花叔又出手了，这次直接把设计师的活儿给干了。
一个 Skill，装进 Claude Code，打一句话，高保真原型 / PPT / 动画视频就出来了。
不是那种 AI 味儿拉满的紫色渐变 + emoji 图标，是真的像设计团队做出来的东西。
这个项目叫 Huashu Design，GitHub 已开源，MIT 协议，商用也没问题。
开源地址：https://github.com/alchaincyf/huashu-design
01
这玩意儿到底能干啥？
简单说，你只需要对着 Claude Code（或者 Cursor、Codex、OpenClaw 都行）说一句话，比如：
- 「帮我做一个 AI 心理学的 PPT，给我 3 个风格方向选。」
- 「做一个番茄钟 iOS App 原型，4 个页面，要能点击跳转。」
- 「把这段逻辑做成 60 秒动画，导出 MP4 和 GIF。」
- 「给这个设计做一个 5 维度专家评审。」
然后 3 到 30 分钟，成品就出来了。
不用打开 Figma，不用打开 After Effects，不用装任何图形界面插件。
纯终端操作，一行命令安装：
npx skills add alchaincyf/huashu-design装完就能用，太丝滑了。
02
能力有多全？我直接列一下
🎨 设计方向顾问
当你的需求比较模糊的时候，它不会瞎猜。而是从 5 大设计流派 × 20 种设计哲学里，给你推荐 3 个差异化方向，每个方向都带代表作品、关键词和设计师参考。然后同时生成 3 个视觉 Demo，你选一个继续往下走。
这个交互逻辑太好了，比直接出一版然后来回改强一百倍。
📱 iOS App 原型
像素级还原 iPhone 15 Pro 的机身（灵动岛 / 状态栏 / Home Indicator 全有），多屏状态驱动导航，图片直接从 Wikimedia / Unsplash 拉真实素材，交付前还会用 Playwright 跑点击测试。
你没看错，AI 给你做完原型还帮你测了。。。
🎬 动画引擎
内置了 Stage + Sprite 时间切片模型，提供 useTime / useSprite / interpolate / Easing 四个 API，基本覆盖所有动画需求。一条命令导出 MP4 / GIF / 60fps 插帧 / 带 BGM 的成品。
README 里那些炫酷的动画，全部是这个 Skill 自己做的，没用任何外部工具。
📊 HTML 幻灯片 → 可编辑 PPTX
先生成 HTML 演示文稿，然后用内置的 html2pptx.js 把 DOM 计算样式翻译成真正的 PowerPoint 对象。导出的 PPTX 里是真实的文本框，不是截图贴上去的假货。
📈 信息图 / 数据可视化
杂志级排版，精确 CSS Grid 布局，text-wrap: pretty 排版细节，真实数据驱动。可导出矢量 PDF / 300dpi PNG / SVG。
🔍 5 维专家评审
从设计哲学一致性、视觉层次、执行工艺、功能性、创新性五个维度给设计打分（0-10），输出雷达图可视化，还附带 Keep / Fix / Quick Wins 清单。
03
为什么效果能这么好？三个核心机制
说实话，我一开始也觉得「AI 做设计」不靠谱，心想顶多出个能看的草图。但花叔这个 Skill 确实做了几个很硬核的设计决策，让出品质量远超预期。
第一，核心素材协议（Core Asset Protocol）
这是整个 Skill 里最严格的规则。只要任务涉及具体品牌（Stripe、Linear、Anthropic、DJI 或者你自己公司），就会强制执行 5 步流程：搜品牌官网 → 找品牌素材 → 下载（三条降级路径）→ 验证提取 → 写 brand-spec.md。
素材重要性排序：Logo > 产品渲染图 > UI 截图 > 颜色值 > 字体。
花叔做了 A/B 测试（v1 vs v2，各 6 个 Agent），v2 的稳定性方差降低了 5 倍。他说：「稳定性的稳定性，才是真正的护城河。」
这句话我反复品了好几遍，确实有道理。
第二，事实验证优先（Principle #0）
最高优先级规则。当任务提到具体产品 / 技术 / 事件时（比如「DJI Pocket 4」「Gemini 3 Pro」），第一步必须先 WebSearch 确认真实性。
搜一次的成本：10 秒。搞错的成本：1-2 小时返工。
这个意识太强了，大部分 AI 工具都在假装自己什么都知道。
第三，Anti AI-slop 规则
专门列了一堆「禁止事项」来避免 AI 设计的通病：
- 禁止紫色渐变
- 禁止 emoji 当图标
- 禁止圆角 + 左边框高亮
- 禁止 SVG 小人
- 禁止 Inter 当展示字体
- 禁止 CSS 剪影代替真实产品图
取而代之的是 text-wrap: pretty + CSS Grid + 精选衬线展示字体 + oklch 色彩空间。
一看这个清单就知道作者踩过多少坑。
04
和 Claude Design 有啥区别？
花叔在 README 里很坦诚地说：核心素材协议的理念源自 Anthropic 为 Claude Design 写的 system prompt。
但定位完全不同：
- Claude Design 是一个更好的图形工具
- Huashu Design 让图形工具层消失
简单说：如果你愿意打开图形界面，用 Claude Design；如果你跟花叔一样，宁可在终端里干所有事，那 Huashu Design 就是你的菜。
花叔自己说这是一个「80 分的 Skill，不是 100 分的产品」，但对于不愿意打开图形 UI 的人来说，80 分的 Skill 打得过 100 分的产品。
我觉得这个定位太准了。
05
背后的故事
花叔说，Anthropic 发布 Claude Design 那天他玩到了凌晨 4 点。但几天后他发现自己再也没打开过——不是因为不好，而是他更愿意让 Agent 在终端里干活。
于是他让 Agent 解构了 Claude Design 本身（包括社区流传的 system prompt、品牌素材协议、组件机制），提炼成结构化 Spec，然后写成 Skill 装进了自己的 Claude Code。
他说：「感谢 Anthropic 把 Claude Design 的 prompt 写得这么清晰。这种基于其他产品启发的衍生创作，是 AI 时代开源文化的新形态。」
这个态度我很喜欢，既不藏着掖着，也不搞虚假创新叙事。
06
谁适合用？
- 独立开发者：不想花钱请设计师，但又不想做出来的东西一看就是程序员审美
- 内容创作者：需要快速出产品发布动画、宣传视频、信息图
- Claude Code 深度用户：习惯终端操作，不想切到图形界面
- 创业团队：MVP 阶段需要看起来专业的原型和演示
MIT 协议，完全免费，商用无限制。这种项目不收藏说不过去。
开源地址：https://github.com/alchaincyf/huashu-design
📖 相关推荐
资深互联网从业者，专注AI工具研究与实战应用。长期跟踪ChatGPT、Claude、Stable Diffusion等前沿AI技术，擅长将复杂的技术概念转化为通俗易懂的教程。运营颜资源小站，致力于为中文用户提供高质量的AI教程、开源项目推荐和数字资源整理。
评论(0)