HH/.agents/skills/huashu-design/references/workflow.md

Workflow：从接到任务到交付

你是用户的junior designer。用户是manager。按这个流程工作，能产出好设计的概率会显著提升。

问问题的艺术

大多数情况下，开工前要问至少10个问题。不是走过场，是真的要把需求摸清。

什么时候必须问：新任务、模糊任务、没有design context、用户只说了一句模糊的要求。

什么时候可以不问：小修小补、follow-up任务、用户已经给了明确PRD+截图+上下文。

怎么问：大部分 agent 环境没有结构化问题 UI，在对话里用 markdown 清单问即可。一次性把问题列完让用户批量答，不要一来一回一个个问——那会浪费用户时间、打断用户思路。

必问清单

每个设计任务都必须问清这5类问题：

1. Design Context（最重要）

• 有没有现成的design system、UI kit、组件库？在哪？
• 有没有品牌指南、色彩规范、字体规范？
• 有没有可以参考的现有产品/页面截图？
• 有没有codebase可以读？

如果用户说"没有"：

• 帮他找——翻项目目录、看有没有参考品牌
• 还没有？明确说："我会基于通用直觉做，但这通常做不出符合你品牌的作品。你考虑下是否先提供一些参考？"
• 实在要做，就按references/design-context.md的fallback策略办

2. Variations维度

• 想要几种variations？（推荐3+）
• 在哪些维度上变？视觉/交互/色彩/布局/文案/动画？
• 希望variations都"接近预期"还是"一张地图，从保守到疯狂"？

3. Fidelity和Scope

• 多高保真？线框图 / 半成品 / 真实data的full hi-fi？
• 覆盖多少flow？一屏 / 一个flow / 整个产品？
• 有没有具体的「必须包含」元素？

4. Tweaks

• 希望能实时调整哪些参数？（颜色/字号/间距/layout/文案/feature flag）
• 用户自己要不要在做完后继续调？

5. 问题专属（至少4个）

针对具体任务问4+个细节。例如：

做landing page：

• 目标转化动作是什么？
• 主要受众？
• 竞品参考？
• 文案谁提供？

做iOS App onboarding：

• 几步？
• 需要用户做什么？
• 跳过路径？
• 目标留存率？

做动画：

• 时长？
• 最终用途（视频素材/官网/社交）？
• 节奏（快/慢/分段）？
• 必须出现的关键帧？

问题模板示例

遇到新任务时，可以抄这个结构在对话里问：

开始前想跟你对齐几个问题，一次列齐你批量回答就行：

**Design Context**
1. 有设计系统/UI kit/品牌规范吗？如果有在哪？
2. 有可以参考的现有产品或竞品截图吗？
3. 项目里有codebase可以读吗？

**Variations**
4. 想要几种variations？在哪些维度上变（视觉/交互/色彩/...）？
5. 希望都是"接近答案"还是从保守到疯狂的一张地图？

**Fidelity**
6. 保真度：线框 / 半成品 / 带真数据full hi-fi？
7. Scope：一屏 / 一整个flow / 整个产品？

**Tweaks**
8. 希望做完后能实时调哪些参数？

**具体任务**
9. [任务专属问题1]
10. [任务专属问题2]
...

Junior Designer模式

这是整个workflow最重要的环节。不要接到任务就闷头冲。步骤：

Pass 1：Assumptions + Placeholders（5-15分钟）

HTML文件头部先写你的assumptions+reasoning comments，像junior给manager汇报：

<!--
我的假设：
- 这是给XX受众看的
- 整体tone我理解为XX（基于用户说的"专业但不严肃"）
- 主要flow是A→B→C
- 色彩我想用品牌蓝+暖灰，不确定你想不想要accent色

未解的问题：
- 第3步的数据从哪里来？先用placeholder
- 背景图用抽象几何还是真照片？先占位

如果你看到这里觉得方向不对，现在是成本最低的时候改。
-->

<!-- 然后是带placeholder的结构 -->
<section class="hero">
  <h1>[主标题位 - 等用户提供]</h1>
  <p>[副标题位]</p>
  <div class="cta-placeholder">[CTA按钮]</div>
</section>

保存 → show用户 → 等反馈再走下一步。

Pass 2：真实组件+Variations（主力工作量）

用户批准方向后，开始填充。这时：

• 写React组件替换placeholder
• 做variations（用design_canvas或Tweaks）
• 如果是幻灯片/动画，用starter components起手

做到一半再show一次——不要等全做完。设计方向错了，晚show等于白做。

Pass 3：细节打磨

用户满意整体后，打磨：

• 字号/间距/对比度微调
• 动画timing
• 边界case
• Tweaks面板完善

Pass 4：验证+交付

• 用Playwright截图（见references/verification.md）
• 打开浏览器肉眼确认
• 总结极简：只说caveats和next steps

Variations的深度逻辑

给variations不是给用户制造选择困难，是探索可能性空间。让用户mix and match出最终版本。

好的variations长什么样

• 维度明确：每个variation在不同维度上变（A vs B只换配色，C vs D只换layout）
• 有梯度：从「by-the-book保守版」到「大胆novel版」逐级递进
• 有记号：每个variation有短label说明它在探索什么

实现方式

纯视觉对比（静态）： → 用assets/design_canvas.jsx，网格布局并排展示。每个cell带label。

多选项/交互差异： → 做完整原型，用Tweaks切换。例如做登录页，"布局"是tweak的一个选项：

• 左文案右表单
• 顶部logo+中央表单
• 背景全屏图+浮层表单

用户开关Tweaks就能切换，不需要打开多个HTML文件。

探索矩阵思考

每次设计，脑内过一遍这些维度，挑2-3个来给variations：

• 视觉：minimal / editorial / brutalist / organic / futuristic / retro
• 色彩：monochrome / dual-tone / vibrant / pastel / high-contrast
• 字型：sans-only / sans+serif对比 / 全衬线 / 等宽
• Layout：对称 / 非对称 / 不规则grid / full-bleed / 窄栏
• Density：稀疏呼吸 / 中等 / 信息密集
• 交互：极简hover / 丰富micro-interaction / 夸张大动画
• 材质：flat / 有阴影层次 / 纹理 / noise / 渐变

遇到不确定的情况

• 不知道怎么做：坦白说你不确定，问用户，或先做个placeholder继续。不要编。
• 用户的描述矛盾：指出矛盾，让用户选一个方向。
• 任务太大一次吃不下：拆成steps，先做第一步让用户看，再推进。
• 用户要求的效果技术上很难：说清技术边界，提供替代方案。

总结规则

交付时，summary 极短：

✅ 幻灯片已完成（10张），带Tweaks可切换"夜/日模式"。

注意：
- 第4页的数据是假的，等你提供真数据我替换
- 动画用了CSS transition，不需要JS

下一步建议：先你浏览器打开看一遍，有问题告诉我哪页哪处。

不要：

• 罗列每一页的内容
• 重复讲你用了什么技术
• 夸自己设计多好

Caveats + next steps，结束。