# 模拟展示 3：Web 平台能力评估卡

<div class="grid grid-cols-2 gap-8 mt-8">

<div class="card-blue">
<div class="font-semibold mb-3">能力示例</div>
<div class="space-y-2 text-sm">

- CSS 新布局与交互能力
- View Transitions
- File System / Clipboard / Share APIs
- PWA 安装与离线体验
- 本地 AI 与浏览器内置能力探索

</div>
</div>

<div class="card">
<div class="font-semibold mb-3">评估维度</div>
<div class="space-y-2 text-sm text-gray-300">

- 用户价值：解决什么真实问题？
- 兼容性：Chrome-only 还是跨浏览器？
- 降级方案：不可用时如何处理？
- 风险：权限、隐私、性能、安全

</div>
</div>

</div>

<div class="mt-8 card-amber text-sm">
推荐输出格式：能力名称 / Chrome 支持状态 / 业务场景 / Demo 链接 / 风险 / 下一步。
</div>

<!--
这里可以把每个新 API 都变成一张评估卡。不要只问“能不能用”，而是问“能解决什么问题、什么时候可上线、不能用时怎么降级”。
-->