init: huashu-design skill v1.0

花叔设计工作台 —— AI 驱动的 HTML 设计工作流，支持 Claude Code / Codex /
Cursor / Trae / OpenClaw / Hermes Agent 等任意 skill-compatible agent。

四条主干能力：
- HTML 高保真视觉产出（原型/App/幻灯片/动画/变体/信息图）
- 设计方向顾问 Fallback（5 流派 × 20 设计哲学 × 24 预制 showcase）
- Junior Designer 工作流（先 show 假设再迭代）
- 专家级 5 维度评审（哲学/层级/执行/功能/创新）

工程工具链：
- HTML → 25fps/60fps MP4 + palette GIF，含 6 首场景化 BGM
- HTML → PDF / PPTX 导出
- Playwright 截图 + 控制台错误验证
- iOS/Android/macOS/Browser 设备边框 + Stage/Sprite 动画引擎

初版包含 SKILL.md + 13 份 references + 7 个 scripts + 18 类 assets。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

references/workflow.md

@@ -0,0 +1,216 @@
+# 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**：
+- 几步？
+- 需要用户做什么？
+- 跳过路径？
+- 目标留存率？
+
+**做动画**：
+- 时长？
+- 最终用途（视频素材/官网/社交）？
+- 节奏（快/慢/分段）？
+- 必须出现的关键帧？
+
+## 问题模板示例
+
+遇到新任务时，可以抄这个结构在对话里问：
+
+```markdown
+开始前想跟你对齐几个问题，一次列齐你批量回答就行：
+
+**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汇报：
+
+```html
+<!--
+我的假设：
+- 这是给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 **极短**：
+
+```markdown
+✅ 幻灯片已完成（10张），带Tweaks可切换"夜/日模式"。
+
+注意：
+- 第4页的数据是假的，等你提供真数据我替换
+- 动画用了CSS transition，不需要JS
+
+下一步建议：先你浏览器打开看一遍，有问题告诉我哪页哪处。
+```
+
+不要：
+- 罗列每一页的内容
+- 重复讲你用了什么技术
+- 夸自己设计多好
+
+Caveats + next steps，结束。