用 Huashu Design 一句话拿回能交付的设计

Huashu Design 诞生的原因是：作者宁愿让 agent 在终端里干活，也不想打开任何图形界面的设计工具。这个 26k 星、MIT 许可的 skill，在 Claude Code、Cursor、Codex、OpenClaw 或 Hermes 里说一句话，3 到 30 分钟就能拿回产品发布动画、可点击的 App 原型、可编辑的 PPT 或印刷级信息图。

为什么这个 Skill 重要

README 的说法是：产出应该像真正的设计团队做的，而不是「AI 做的还行」那种水平。支撑这句话的有两套机制。把品牌资产——logo、色板、UI 截图——交给它，它会读懂你的品牌气质；什么都不给，从六张缩略图里挑出的三个真实方向——背后是 84 种 HTML 原生风格库，每种都配一张样张：网页 20、PPT 20、信息图 20、App 12、中文与东亚 12——也能兜底到不出 AI slop。

开工前有一件事要知道：skill 自己的提示词（SKILL.md、references/*.md）是中文写的。README 说明 agent 是双语的，用英文任务照样能跑。

安装

npx skills add alchaincyf/huashu-design

装完先自检。这个 skill 不只是 SKILL.md 一个文件——references/、assets/、scripts/、demos/ 四个子目录里有 99 处被引用的配方、脚本和素材。看一眼安装目录（比如 ~/.claude/skills/huashu-design/）：如果只有 SKILL.md，说明你的 skills CLI 版本太旧，≤1.5.15 有个只同步单文件的 bug，已在 1.5.19 修复。升级后重装：

npm i -g skills@latest        # or npx skills@latest add alchaincyf/huashu-design

升级后仍然不对，就按 README 的兜底方案，把仓库克隆到任意 skills 目录：

git clone https://github.com/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design

实战：一个可点击的 iOS 原型

1. 给 agent 一条 README 里的示例提示：

"Build an iOS prototype for a Pomodoro app — 4 screens, actually clickable."

2. 默认工作模式是 Junior Designer 工作流：agent 把问题清单一次性发给你，等全部答完再动手，先在 HTML 里写好 assumptions、placeholders 和推理注释，然后尽早给你看早期版本——哪怕只是灰色方块。
3. 如果需求模糊到无法着手，设计方向顾问接管：三套逻辑各出两个候选——一位最佳设计师、一件同媒介的获奖作品做现实参照（先由 scripts/ref_board.py 截图亲眼看）、再加一轮基于风格库的秒数轮盘。回来六张缩略图，最强、彼此最不一样的三版做成真实设计，另外三张作为备选。
4. 填充真实内容、产出变体，然后打开 Tweaks——一个侧栏面板，颜色、字体、信息密度都可调参，存进 localStorage 持久化。这三步 agent 会分别再给你看一次结果。
5. 交付前 agent 用 Playwright 在浏览器里肉眼过一遍页面。原型以单个 HTML 文件交付：iPhone 15 Pro 精确机身（灵动岛、状态栏、Home Indicator）、状态驱动的多屏切换，Playwright 点击测试已经跑过。

PPT 类需求走同一条路但终点不同：HTML deck 之外还导出可编辑的 PPTX——html2pptx.js 读取 DOM 的 computedStyle，把每个元素翻译成真正的 PowerPoint 对象，导出的是真文本框，不是图片垫出来的假货。

技巧

• 任务涉及具体品牌时，品牌资产协议强制执行 5 步：问、搜官方品牌页、按资产类型下载（三条兜底）、grep 提取色值，最后全部固化进 brand-spec.md。README 的规矩：绝不从记忆猜品牌色——用 grep 从真实资产里抓。
• README 的第 0 号原则是事实核验先行。任务提到具体产品、技术或事件时，第一个动作是 WebSearch，确认它存在、发布状态、当前版本和规格——不靠训练语料的记忆下结论。
• 这个 skill 会在你本机上学习。scripts/learn.py 开工前带出你说过的品味原话，外观账本记下每次交付长什么样，让下个项目主动避开重复，scripts/design_lint.py 只量能核对的事实——图裂了、字小到读不了、对比度不够、控制台报错是红灯，顺手加的模板装饰则标黄。所有记录都在 ~/.huashu-design/，删掉文件夹就全部忘记。
• 核心链路——设计、渲染、MP4/PDF/PPTX 导出——100% 本地运行，零网络、零 API key。豆包 TTS 配音这类云能力隔离在 scripts/cloud/，完全可选，用你自己的 key，离开你机器之前需要 --yes 显式确认。
• 让它 Run a 5-dimension expert review on this design.，会得到一张雷达图，按哲学连贯性、视觉层级、执行工艺、功能性、创新性打分，外加 Keep / Fix / Quick Wins 修复清单。

何时不用这个 Skill

README 自己列了边界。产出是 HTML，所以没有图层级可编辑的 PPTX 到 Figma 往返——结果可以截图、录屏、导图，但不能拖进 Keynote 改文字位置。Framer-Motion 量级的复杂动画——3D、物理模拟、粒子系统——不在范围内。从零设计一个品牌，按作者自己的标准质量会掉到 60–65 分：这是「一个 80 分的 skill，不是 100 分的产品」。

查看 排行榜 了解更多 skill。