heyeddi-design

HeyEddi Design

HeyEddi 应用的技术栈无关 UI 设计：探索、简报、评审和设计系统文档。实现（Vue、Flutter、组件中的 CSS）属于技术栈技能——请参阅 reference/implement-routing.md。

团队：@taste-penpot 一次性确定视觉风格（Anthropic frontend-design + tokens）。本技能负责产品契合度和实现交接。开始任何设计环节前，请阅读 reference/design-team.md。不要另行设计一套配色，也不要重新从探索 → 调研 → 发散开始寻找视觉风格。

**自动接续：**讨论设计时仍会加载本技能；如果 @taste-penpot 尚未完成该环节并产出 tokens，本技能会立即加载它。然后记录这些 tokens。reference/brief-language.md 提供的是简报的产品语言，不是另一套艺术指导。

设计与实现（必须分开）

层级	技能	交付内容
设计（本技能）	@heyeddi-design	简报、线框图、评审、design.md、信息架构、审美方向
实现（技术栈）	@heyeddi-handoff、@design-handoff-flutter	Vue / Flutter 生产级 UI 代码
强制执行（技术栈）	@vue-design-system	Quasar 外壳、PrimeVue Aura、动效、tokens、CLI
验证（无关技术栈）	@visual-auditor、@ux-flow-auditor	截图、对比度、流程、修复

每次以交付上线 UI 结束的会话，都要阅读 reference/implement-routing.md。

默认行为（无需确认）

• **任何形式的设计讨论：**先加载 brief-language.md；确定视觉风格、主题和明确排除项，再处理界面外壳
• 改进设计 / 重新设计：“更好的设计”“让它更好”“重新设计”“换个新风格”“全面改版”“惊艳”“一流”等表达 → 不要只做润色。运行评审雄心门槛检查（reference/critique.md）；如果设计像模板或未达到雄心标准 → shape → craft → implement。对于这些表达，仅调整间距或 tokens 是不恰当的。
• 评审 + 修复（局部）：“看起来很糟”“修复这个页面”“润色”“调整间距” → 先评审，再交由技术栈实现者 + @visual-auditor 处理，除非雄心门槛检查要求升级到 shape（此时先执行 shape；无需询问）。
• **Craft：**简报确认后，在同一工作流中交接给技术栈实现者
• **雄心标准：**旗舰路由默认应达到令人印象深刻的工艺水准——不要等用户提出要求

子 Agent（默认）

按子命令委派：请参阅 reference/subagents.md。主对话负责确认简报并合并结果。

始终委派的任务	子 Agent
@visual-auditor / Playwright	shell
validate_vue、npm test、build	shell
critique、craft、polish（路由工作）	generalPurpose
research、线框图 explore	generalPurpose
为 document 扫描代码库	explore

交接环节中不要直接运行视觉捕获。

跨支柱同步（必须）

请阅读 reference/cross-pillar-handoff.md。为 craft、critique、polish、shape（已确认的简报）做好前后衔接：

@heyeddi  load_workflow_context --route /path
… design work + Decision log in design.md …
@heyeddi  append_pillar_opinion --pillar design …
→ @heyeddi-product scope check; @ux-flow-auditor flow note if IA affects tasks

设置（每个会话）

1. 每个会话运行一次 python scripts/load_context.py --project-root <root>（如果输出已在对话中，则跳过）。

2. 如果 product_exists 为 false，且任务需要战略背景信息，则在 shape/craft 之前运行 init。

3. 阅读所调用模式的子命令参考文件（必需：不得跳过）。 3a. 任何涉及设计/外观/感觉的讨论（discover、shape、craft、critique、polish，或非正式的“让它看起来……”）都要先阅读 reference/brief-language.md：主题/隐喻、明确排除项、主视觉/字体/强调色/响应式/SSOT、首屏检查清单、完成门槛。 3b. 在规划、制作、评审或润色任何路由时，阅读 reference/implement-routing.md。 3c. 每个会话中，在规划、制作或评审任何路由时，阅读一次 reference/surface-completeness.md。 3d. 每个会话阅读一次 reference/foundations.md：响应式、主题、i18n、a11y、阅读模式始终启用，除非 product.md 明确豁免。 3e. 规划 营销、仪表板或设置路由时，阅读 reference/modern-reference.md。 3f. 规划、制作或润色任何面向用户的路由时，阅读 reference/audience-design.md。 3g. 对旗舰路由，阅读 reference/design-ambition.md。 3h. 对任何面向用户的路由，阅读 reference/aesthetic-direction.md。 3i. 在简报或 design.md 中撰写 UI 文案时，阅读 context/PROSE_ANTI_SLOP.md。 3j. 对旗舰路由进行 explore、shape 和 critique 时，阅读 reference/visual-tools.md：如果 IDE 提供 GenerateImage，就用它探索设计方向；用 Canvas 汇总比较、简报和评审结果。

4. 完成 shape（简报已确认）、critique 或 polish 后，在 .heyeddi/design.md 的 Decision log 中追加记录。

5. 栈实现者完成后：迭代期间使用 @visual-auditor，以 fast 模式检查 375,768,1440 宽度。在旗舰/营销项目宣布完成之前：以 done 模式检查 375,430,768,1024,1440,1920 宽度（--preset done），并修复发现的问题。Logo 移除测试：移除品牌标识后，如果它看起来可能属于另一家初创公司，就还没完成。

命令

命令	用途
（无子命令）	设计需求模糊 → 从 discover 开始
init	创建或刷新 PRODUCT.md；提供生成 DESIGN.md 的 document 选项
discover	仅进行需求探索访谈：不写代码，也不生成最终简报
research	针对当前设计方向进行网页趋势/参考资料调研
explore	概念图（GenerateImage）+ Canvas 比较 + 线框图
shape	完整规划流程：discover → research → explore → 确认简报
document	根据代码或初始问题生成或刷新 DESIGN.md
craft	简报就绪 → 移交给栈实现者（参见 implement-routing）
critique	评审现有 UI → 报告 → 自动衔接实现 + visual-auditor
polish	优化设计规范，并由栈实现者编写代码（在 critique 之后）

路由规则

1. 更好的设计／重新设计意图（针对现有路由提出“更好的设计”“做得更好”“重新设计”“焕然一新”“全面改造”“重大改进”“令人惊艳”“一流”等要求）：加载 reference/critique.md 的雄心门槛 → 如需升级处理，则加载 reference/shape.md，然后执行 craft（而非仅做润色）。参见 reference/design-ambition.md § 改进与重新设计。
2. 现有 UI：局部修复（“评审”“看起来很糟”“修复此页面”“润色”）：加载 reference/critique.md → 运行雄心门槛 → 仅当门槛判定应局部处理时，才通过润色路径实施并使用 @visual-auditor。不要提问。
3. 没有子命令、宽泛的全新项目需求：加载 reference/discover.md 和 brief-language.md。
4. 子命令与表格匹配：加载 reference/<command>.md（shape/craft/critique/polish 还需加载 brief-language.md）。
5. 没有确认过的简报时执行 craft：先执行 shape（简报必须包含主题和明确排除项）。 5b. 没有用户画像的旗舰路由：先使用 @heyeddi-intake 或执行 discover。
6. 本次会话尚未进行过评审时执行 polish：先执行 critique（包括雄心门槛）。
7. 截图／已批准的模型稿：使用 @heyeddi-handoff（实施），不要用设计 craft 编写代码。
8. 绝不要调用 impeccable：此技能会取代它。

产出物

产出物	位置
设计简报（已确认）	.heyeddi/designs/<feature>/brief.md
线框图	.heyeddi/designs/<feature>/wireframes/
研究笔记	.heyeddi/designs/<feature>/research.md
设计系统	.heyeddi/design.md
产品背景	.heyeddi/product.md
评审、审计	.heyeddi/docs/

<feature> 使用 kebab-case。

基础规范（设计规格——实施者须在代码中落实）

响应式、浅色／深色模式、en+es 国际化、WCAG 2.2 AA、语义化令牌：参见 reference/foundations.md、reference/token-strategy.md、reference/brief-language.md。

参见 context/VOCABULARY.md、context/ANTI_PATTERNS.md、context/PROSE_ANTI_SLOP.md、context/EXAMPLES.md、reference/brief-language.md。

任务完成后：建议后续技能

python .agents/skills/heyeddi/scripts/suggest_next_skill.py \
  --current-skill heyeddi-design --project-root .

已知时，添加 --route /path 和 --mode <sub-command>。