网页设计工程师

面向问题

• 很多网页/幻灯片/原型需求容易被做成“能跑即可”的界面：默认配色、拥挤布局、缺少品牌识别。
• 这个技能把 Agent 定位成 网页设计工程师，输出物始终是 HTML/CSS/JavaScript/React，但按任务切换身份：UX、动效、幻灯片、原型、数据可视化。
• 它强调标准是“惊艳”而非“功能可用”，尤其适合页面、仪表盘、原型、演示稿、可视化、动画和 UI mockups。
• 它把设计决策拆成可检查的步骤，避免 Agent 直接堆出通用模板。

工作方式

• 先验证事实：涉及产品、SDK、版本、发布时间时，先查权威来源，避免把不确定的记忆写成设计假设。
• 收集设计上下文：优先读用户提供的截图、Figma、代码库、UI Kit；若用户给了代码和截图，优先从源码提取设计 token。
• 先定系统再写代码：在输出 v0 前，先给出叙事角色、观看距离、视觉温度和容量判断，并声明颜色、字体、间距、圆角、阴影和动效系统。
• 早出 v0：先用占位符和关键布局展示方向，让用户纠偏，再进入完整组件、状态和动效实现。
• 交付前自检：在声明完成前检查视觉层级、间距系统、颜色数量和字体数量；用户明确要求验收时再运行浏览器检查。
• 边界清晰：不适用于后端 API、CLI 工具、数据脚本、纯逻辑开发；品牌任务需要真实 logo 和产品素材，不能只用 hex 颜色或手绘 SVG 代替。