用途：以设计工程师标准完成前端任务，先理解内容与约束，形成明确视觉方向，再用真实运行结果验证。适用于新建或重构主页、个人品牌页、作品集、Landing Page、Dashboard、表单、卡片、导航等 Web UI。
主要能力与流程：
- Recon：读取框架、CSS 方案、UI 库、图标库、现有组件、CSS variables、主题 token、字体、间距、响应式惯例、设计系统、项目指令、验证命令与可访问性要求；已有系统优先。
- Frame：明确 Purpose、Audience、Content hierarchy、Primary action、Tone、Signature element、Constraints；新建主页、个人品牌页、作品集或平台模板时须读取 template-design.md 并先输出模板简报。
- Research：用内置搜索工具探索方向，例如 python3 scripts/search.py "<项目类型> <行业> <关键词>" --design-system -p "<项目名>"，也可按 style、gsap、app、google-fonts、nextjs 等领域检索；结果需按受众、品牌、语言、现有系统与实施成本过滤。可用 --variance、--motion、--density 三个 1–10 调节器控制探索幅度。
- Craft：遵循 design-philosophy.md、interaction-craft.md、motion-quality.md；复用现有组件与主题 token，保持语义化、mobile-first、WCAG AA。按场景调用专项 Skill，如 emil-design-eng、apple-design、animation-vocabulary、find-animation-opportunities、improve-animations；不可用时以 references 为最低质量基线。
- Persist：已有设计系统优先遵循；首次建立先展示方向并确认；默认不覆盖已有文件，明确更新时用 --force。持久化命令示例：python3 scripts/search.py "<项目描述>" --design-system --persist -p "<项目名>" --page "<页面名>"，生成 design-system/<project-slug>/MASTER.md 与 pages/<page-slug>.md，页面规则覆盖 MASTER。
- Verify：交付前读取 verification.md，运行 lint、typecheck、test、build，实际打开页面检查真实内容与关键交互，验证移动端、桌面端、键盘与 Reduced Motion，检查控制台、资源加载、溢出、裁切与固定层遮挡；无法运行的项目须说明未验证项。
限制：不要把数据库推荐、流行风格或固定页面结构当作答案；不硬编码平行设计系统；动效须遵循 Reduced Motion；仅看源码或勾选清单不等于完成视觉验证。