Claude 风格 HTML 与 Deck 设计

它解决什么问题

当用户要求输出“HTML 页面、Landing Page 或 Deck”时，模型容易直接生成一套通用模板：渐变背景、圆角卡片、堆叠 icon、缺少设计上下文，结果像 AI 默认皮肤。这个技能把 HTML 设计约束成设计师工作流，强调先理解需求、找品牌资产、建立系统、再输出可维护文件。

技能如何工作

• 先提问再动手：识别产出类型、品牌资料、保真度、设备与变体数量，避免盲目生成。
• 设计优先：读取 UI Kit、品牌色、字体规范；没有素材时用 oklch()、Google Fonts、清晰占位符，而不是硬画 SVG。
• 构建与验证：用 React + Babel 做交互原型，用纯 HTML/CSS 做静态页；拆分文件、保留版本、检查 console、响应式与触控区。
• 交付方式：默认给出保守、进阶、实验三个变体，并可用 Tweaks 面板微调参数。

适用边界

更适合需要快速产出可评审页面的工程师、设计师和原型场景。它不是通用网站生产系统：不保证接入后端、内容真实素材或复杂业务组件；若用户未给品牌上下文，仍需人工判断视觉方向。