用途
design-webapp 用于构建和扩展仪表盘、SaaS 屏幕或任何需要认证的应用界面。它不适用于营销或落地页——若目标表面是营销页，应使用 design-web。该技能在 design-system 令牌存在且 design-method 的 Gate 0 锁定产品寄存器后使用。
主要能力
- 明确覆盖所有状态：每个数据表面必须显式处理空、加载、错误和已填充状态，禁止静默空白默认。加载时使用骨架行/卡片而非仅旋转器；空状态需命名实际对象类型和首个操作；错误状态需提供可操作消息和重试入口。
- 表格硬性规则：第一列为可读标识符（非原始 ID/UUID），数字列右对齐，表头滚动时粘性，内容优先换行而非截断，密度作为一等模式（标准 48dp 行 / 紧凑 36dp 行），移动端回退为水平滚动并固定首列。
- 数据可视化：优先柱状图/折线图而非饼图，颜色编码数据而非装饰，同一表面所有图表保持类别到颜色的映射一致。
- 表单：单列布局，标签在字段上方，内联验证，复用 design-web 的表单指南，仅补充产品寄存器默认（单列优于多列，无营销风格浮动标签）。
- 命令面板（若存在）：键盘快捷键为可选，仅在用户手动触发操作至少一次后揭示，不将其作为必需交互前置教学。
- 响应式外壳：桌面全侧边栏、平板图标栏、移动端汉堡菜单。
- 复用通用组件指南：按钮、卡片、网格、图标等复用 design-web，本技能仅添加应用特有内容。
使用方式
- 确认处于产品寄存器（密集、可预测、动效克制），动效强度默认 ≤ 4。
- 从 references/layouts/pages/ 选择页面模式（仪表盘、认证登录、注册、引导、个人资料、设置、错误页），并根据 design-system.md 调整密度。
- 从 references/layouts/patterns/ 选择交互模式（数据表格、命令面板、模态对话框、Toast 通知、空状态）。
- 应用响应式仪表盘外壳。
- 在生成前，先在浏览器中打开语料库中的两个应用界面（reve-recode/index.html 和 linear-recode/index.html）进行观察，然后阅读对应的 tokens 文件，从中提取 UI 过程而非十六进制值。
- 直接生成 HTML/CSS（默认），或可选通过 Gemini Design MCP 生成。
- 在交付报告中写入“Je reproduis”行，声明三个可命名元素，格式与 design-web 一致。
适用场景
适用于构建认证应用内的各种表面：仪表盘、认证页面、设置、数据表格、个人资料、引导流程、错误页等。不适用于营销网站或落地页。
限制
- 不进行行业浏览，不参考模板平台获取品味。
- 若 Gemini Design MCP 不可用，回退到直接生成。
- 若引用的页面模式不匹配请求，应适配最接近的模式并在报告中注明偏差。
- 若数据表面缺少空/错误文案，应阻塞并询问所有者，不得发布静默空白状态。
- 外观相似性测试不适用于本技能；取而代之的是领域特异性底线测试：该屏幕的文案、图标和分组能否未经编辑地放入同类别的不相关产品中。
- 第三个声明元素通常为 [sector: none — register from brief]，仅在简报明确指定要对标的产品寄存器时才使用真实 sector URL。