网页设计工程师

要解决的问题

AI 生成的网页长期停留在「能用」水平：Inter 配 #3b82f6、紫粉蓝渐变、圆角卡片加彩色左边框。根因是模型在临场编造设计令牌，而不是从既有体系取值；品牌素材缺失时，又用 CSS 剪影和手绘 SVG 顶替，产出物一眼就是通用「科技感」，品牌识别度被稀释为零。

核心能力

这个技能把 Agent 定位为设计工程师，交付载体始终是 HTML，但会按任务切换身份：UX 设计师、动效设计师、幻灯片设计师、原型工程师、数据可视化专家。

• 事实核查优先：涉及具体产品、SDK、版本或时间线时先查权威来源，不凭记忆断言，不确定就停下来问。
• 体系前置：写第一行代码前，先在 Markdown 里声明配色、字体、间距、圆角、阴影、动效令牌，等用户确认后再动手。
• 配方化：references/style-recipes/ 提供 25 个具名配方（Linear、Aesop、MUJI 等），经 INDEX.md 索引挑选，而不是临场编数值。
• 素材协议：Logo、产品图、UI 截图的识别价值高于色值表；拿不到 Logo 就停止并询问，绝不用色块代替。
• 占位符哲学：[icon]、16:9 image 这类明确标记，比画得很差的山寨图标更专业。

工作流程

1. 步骤 0：事实核查。
2. 步骤 1：判断信息是否充分，决定提问还是直接动手——有 PRD 就不该甩一长串问题。
3. 步骤 2：按优先级收集背景（截图 / Figma > 现有页面 > 行业实践 > 风格锚点）。
4. 步骤 2b：用五个旋钮校准密度、观看距离、视觉温度等决策变量。
5. 步骤 3：回答四个定位问题，声明体系，停下来等确认。
6. 步骤 4：先出 v0 草稿（布局 + 占位符 + 假设清单）让用户尽早纠偏，而不是憋一个大招。
7. 步骤 5-7：完整构建、交付前清单自查、按需做五维度评审。

技术约束

React + Babel 内联 JSX 走固定版本 CDN，三条硬规则：绝不使用 const styles（会跨组件静默覆盖）、各 <script type="text/babel"> 之间不共享作用域（需显式挂到 window）、禁用 scrollIntoView（iframe 预览中会干扰外层滚动）。布局以 Grid + Flexbox 为主，令牌走 CSS 自定义属性，配色从品牌色出发用 oklch() 派生，而不是凭空发明新色相。

适用边界

适合可视化前端交付物：页面、仪表盘、原型、幻灯片、动画、UI 模型、设计系统。不适合后端 API、CLI 工具、数据处理脚本，也不做「素材转长文 HTML」或「旁白转可录制网页视频」——后两者有专属技能，应转交。反陈词滥调规则的唯一正当例外是「品牌规范本身就用了它」，此时它是品牌签名而非糊弄。