mirror of
https://github.com/aculix/huashu-design.git
synced 2026-10-27 07:15:54 +00:00
alchainandClaude Opus 4.7
7d7bab4a82
花叔设计工作台 —— 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>
149 lines
7.3 KiB
Markdown
149 lines
7.3 KiB
Markdown
# huashu-design
|
||
|
||
花叔设计工作台 —— 一个把「AI 当设计师」落到实处的 Skill。
|
||
|
||
不是让 AI 生成一张图，而是让 AI 进入「资深 Junior Designer」的工作模式：先给假设 + 占位 + 理由，show 给 manager 看，得到方向反馈，再做 variation，再迭代细节。最后还能请一位「严苛评审」打分。
|
||
|
||
适用于任何支持 Skill 规范的 AI agent：Claude Code、Codex、Cursor、Trae、OpenClaw、Hermes Agent 等。
|
||
|
||
---
|
||
|
||
## 它能做什么
|
||
|
||
一条 skill 同时覆盖四件事：
|
||
|
||
1. **高保真 HTML 视觉产出**
|
||
交互原型、App / iOS mockup、幻灯片、动画 Demo、设计变体探索、信息图 —— 用 HTML 做，而不是用 Figma 截图或 placeholder 拼贴。
|
||
|
||
2. **设计方向顾问（Fallback）**
|
||
当你的需求只是「给我做个好看的页面」时，skill 会从 5 个流派、20 种设计哲学里推荐 3 个差异化方向（信息建筑派 / 运动诗学派 / 极简主义派 / 实验先锋派 / 东方哲学派），再并行生成 3 个视觉 Demo 让你挑。
|
||
|
||
3. **Junior Designer 工作流**
|
||
不直接闷头做大招。先写 assumptions + reasoning + placeholder，尽早 show；方向错了，晚改比早改贵 100 倍。
|
||
|
||
4. **专家级评审**
|
||
交付后可选一轮 5 维度评分（哲学一致性 / 视觉层级 / 细节执行 / 功能性 / 创新性），外加具体的 Quick Fixes 清单。
|
||
|
||
---
|
||
|
||
## 附带的工程工具链
|
||
|
||
- **Starter Components**：iOS / Android / macOS / Browser 的设备边框，design_canvas（变体画布），animations.jsx（Stage + Sprite 时间轴引擎），deck_stage.js（幻灯片外壳）。
|
||
- **视频导出**：HTML 动画一键导出 25fps MP4 → 60fps 插帧 MP4 → palette 优化 GIF，配 6 首场景化 BGM（科技 / 广告 / 教育 / 教程）自动 fade。
|
||
- **幻灯片导出**：HTML → PDF（矢量）/ PPTX（图片铺底）。
|
||
- **Playwright 验证**：截图 + 控制台错误检查，交付前跑一遍。
|
||
|
||
---
|
||
|
||
## 安装
|
||
|
||
把整个目录放到你 agent 读取 skills 的位置即可。
|
||
|
||
**Claude Code**：
|
||
|
||
```bash
|
||
git clone https://github.com/alchaincyf/huashu-design-skill.git ~/.claude/skills/huashu-design
|
||
```
|
||
|
||
**其他 agent**（Codex / Cursor / Trae / OpenClaw / Hermes Agent 等）：按各自的 skills 约定放置，SKILL.md 的 frontmatter + markdown 结构是通用的。
|
||
|
||
安装完成后，用任意包含触发词的话开启：
|
||
|
||
> 「做个 iOS App 原型」「帮我做 pitch deck」「导出 MP4」「评审这个设计」「做个好看的页面（我没想法）」
|
||
|
||
触发词完整清单见 `SKILL.md` frontmatter 的 description 字段。
|
||
|
||
---
|
||
|
||
## 使用前需要自己配置的东西
|
||
|
||
大部分能力开箱即用，下面几项在需要时再弄：
|
||
|
||
| 能力 | 需要 |
|
||
|------|------|
|
||
| 视频导出 | `npm i -g playwright` + `brew install ffmpeg`（或等价方案） |
|
||
| 幻灯片导出 PDF | `npm i -g playwright pdf-lib` |
|
||
| 幻灯片导出 PPTX | `npm i -g playwright pptxgenjs` |
|
||
| Playwright 截图验证 | `npm i -g playwright` |
|
||
| 个人品牌锚定（可选） | 复制 `assets/personal-asset-index.example.json` 到你的 agent 私有 memory 目录并填真实信息 |
|
||
|
||
---
|
||
|
||
## 目录结构
|
||
|
||
```
|
||
huashu-design-skill/
|
||
├── SKILL.md # 主干文件：哲学 + 工作流 + 路由表
|
||
├── references/ # 深度参考：按需加载
|
||
│ ├── workflow.md # 开工问什么问题
|
||
│ ├── content-guidelines.md # 反 AI slop 完整清单
|
||
│ ├── react-setup.md # React + Babel 最佳实践
|
||
│ ├── slide-decks.md # 幻灯片架构
|
||
│ ├── animations.md # 动画引擎用法
|
||
│ ├── animation-pitfalls.md # 动画踩坑 + T0 黑屏修复
|
||
│ ├── tweaks-system.md # 实时调参 UI
|
||
│ ├── design-context.md # 没有 design system 怎么办
|
||
│ ├── design-styles.md # 20 种设计哲学
|
||
│ ├── scene-templates.md # 按输出类型的场景模板
|
||
│ ├── critique-guide.md # 评审打分标准
|
||
│ ├── verification.md # 产出验证流程
|
||
│ └── video-export.md # 视频导出命令链
|
||
├── scripts/ # 可执行脚本
|
||
│ ├── render-video.js # HTML → 25fps MP4
|
||
│ ├── convert-formats.sh # 25fps MP4 → 60fps MP4 + GIF
|
||
│ ├── add-music.sh # BGM 叠加 + 自动 fade
|
||
│ ├── export_deck_pdf.mjs # HTML → PDF
|
||
│ ├── export_deck_pptx.mjs # HTML → PPTX
|
||
│ └── verify.py # Playwright 截图 + 控制台检查
|
||
└── assets/ # 起手组件 + BGM + 示例
|
||
├── deck_stage.js # 幻灯片外壳（单文件架构）
|
||
├── deck_index.html # 幻灯片拼接器（多文件架构）
|
||
├── animations.jsx # Stage + Sprite 时间轴引擎
|
||
├── design_canvas.jsx # 变体画布
|
||
├── ios_frame.jsx # iPhone 设备边框
|
||
├── android_frame.jsx # Android 设备边框
|
||
├── macos_window.jsx # macOS 窗口 chrome
|
||
├── browser_window.jsx # 浏览器 chrome
|
||
├── bgm-{tech,ad,educational,tutorial,*-alt}.mp3
|
||
├── personal-asset-index.example.json
|
||
└── showcases/ # 24 个预制 showcase（8 场景 × 3 风格）
|
||
```
|
||
|
||
---
|
||
|
||
## 设计原则（写进 DNA 的五条）
|
||
|
||
1. **从 existing context 出发**，不凭空画 hi-fi。没有 design system / brand / Figma 就先找，真没有就明确告知「我会基于通用直觉做」。
|
||
2. **Junior Designer 模式**：先 show 假设，再执行。不要一头扎进去闷头做大招。
|
||
3. **给 variations，不给最终答案**。3+ 个变体，跨视觉 / 交互 / 色彩 / 布局 / 动画维度递进，让用户 mix and match。
|
||
4. **Placeholder > 烂实现**。没图标就留灰色方块 + 文字标签，不画烂 SVG；没数据不编造假数据。
|
||
5. **反 AI slop**：激进渐变、满屏 emoji、圆角卡片 + 左 accent border、SVG 画人画物、Inter / Roboto 填所有文字 —— 每一条都是默认避开项（用户可按品牌 override）。
|
||
|
||
完整哲学和工作流见 `SKILL.md`。
|
||
|
||
---
|
||
|
||
## BGM 版权说明
|
||
|
||
`assets/bgm-*.mp3` 为原创 / 授权音乐，仅限配合本 skill 生成的演示 / 宣传视频使用。商业投放前请确认你的素材来源许可；若替换成自己的 BGM，只需保留相同文件名或改脚本参数。
|
||
|
||
---
|
||
|
||
## License
|
||
|
||
MIT。自由 fork、魔改、开分支。PR 欢迎，尤其欢迎：
|
||
|
||
- 新的设计哲学流派（在 `references/design-styles.md` 里）
|
||
- 新的 scene template（在 `references/scene-templates.md` 里）
|
||
- 新的 showcase（在 `assets/showcases/` 里）
|
||
- 其他 agent 环境的适配笔记（尤其欢迎 Codex / Cursor / Trae 的使用报告）
|
||
|
||
---
|
||
|
||
## 致谢
|
||
|
||
- Skill 规范：Anthropic Claude Code
|
||
- 设计哲学蒸馏：Pentagram、Field.io、Kenya Hara、Stefan Sagmeister、Dieter Rams、Massimo Vignelli 等 20 位设计师 / 机构
|
||
- 工程实践：Remotion / After Effects（Stage + Sprite 思路）、Playwright（验证 + 录制）、ffmpeg（视频后处理）
|
||
- 灵感来源：AI Artifacts 原生设计能力 → 搬到 Skill 架构 → 跨 agent 可用
|