📌 项目地址：alchaincyf/huashu-design | ⭐ 15,618 颗星 | 🔧 HTML | 📜 MIT
106秒，从安装到可交付的起点
你在README里看到的每个动画，都是huashu-design自己做的。不是Figma拖出来的，不是AE渲出来的，就是一句prompt加skill跑通。
装它只需要一条命令：
npx skills add alchaincyf/huashu-design装完后在Claude Code里直接说话：
「做个AI番茄钟iOS原型，4个核心屏幕要真能点击」
「把这段逻辑做成60秒动画，导出MP4和GIF」
「帮我对这个设计做一个5维度评审」
没有按钮，没有面板，没有Figma插件。打一句话，等几分钟，拿到文件。
三套硬逻辑并行，不是猜
多数AI设计工具的问题是：给一个prompt，模型从概率分布里输出布局，经常出现不可用的伪影——AI slop。
huashu-design用三套互补逻辑并行兜底，直接出三版真实HTML让你看着选：
第一套：秒数轮盘。 20个风格里随机选一个，强制打破你的惯性。你永远不知道下一版会抛给你什么方案。
第二套：现实参照。 从Awwwards、CSS Design Awards这类获奖网站迁移真实的设计模式。不只是抄视觉，是把获奖项目的排版逻辑搬到你的需求里。
第三套：最佳设计师。 参考Brendan Dawes、Jesse C等人的排版哲学。不是风格模仿，是决策逻辑借鉴。
三套逻辑各出一版真实的HTML Demo。你能直接点开看效果，不是在文字描述里盲选风格。
背后是40种HTML原生风格库（网页20 + PPT 20）。纯CSS，不依赖生图API。这意味着输出的配色、字号、行间距、阴影偏移量都有具体参数，不是模型从分布里“猜”出来的。
两个设计细节我反复试过
品牌资产协议：5步硬流程，不走完不出Demo
涉及具体品牌时，工具执行5步强制流程：问 → 搜 → 下载 → grep提取色值 → 写brand-spec.md。
我试了只说“做个品牌页”，不给任何素材。它先问我要品牌名，我说“你自己查”。它自己搜索品牌公开信息，找到logo和截图，从三条备选路径下载，提取主色和辅色，写进brand-spec.md，最后才出Demo。
这个流程是代码级强制，不是软提示。你没法绕开。
Junior Designer工作流：先给你看思考过程
默认不做大招。先写assumptions + placeholders + reasoning，把“我理解你要的东西是这样的、我先做这些占位、我为什么这样安排”一股脑写给你看。你看了觉得不对，马上改。理解错了早改比晚改便宜100倍。
这个流程也省去了大量反复沟通的回合。设计师和开发之间最大的成本是“我以为是那个意思”，这个工作流把“以为”变成“确认”的时间压缩到第一次交互里。
四个真实场景的交付速度
App原型：12分钟拿到可点击的HTML
输入：“做一个AI番茄钟iOS原型，4个核心屏幕要真能点击”。
输出一个单文件HTML。iPhone 15 Pro精确机身，有灵动岛、状态栏、Home Indicator。番茄钟的开始按钮切换计时状态，设置按钮进配置页。图片从Wikimedia/Met/Unsplash取真实照片，不是占位色块。
我把文件发给做iOS开发的朋友，他说“这可以拿去用户测试了”。
演讲PPT：15分钟拿到可编辑PPTX
输入：“做一份AI心理学的演讲PPT，推荐3个风格方向让我选”。
先出三套视觉Demo，我挑了一套。15分钟后拿到两个文件：一个浏览器能打开的HTML deck（浏览器直接演讲），一份可编辑的PPTX。
我用PowerPoint打开PPTX，双击文本框直接改标题和配图。没有“你帮我改一下字体” → “好我生成一个新的你再看看”的来回。
核心原理是html2pptx.js读DOM的computedStyle，逐元素翻译成PowerPoint对象。不是图片转PPT，是真文本框保留。
动画导出：10秒脚本 → MP4 + GIF
我给了10秒产品发布脚本。工具用Stage + Sprite时间片段模型跑通，导出MP4（25fps）和GIF（palette优化），自动加了BGM。
拿给做运营的同事看，他问“这你和AE做的？”。我说不是AE，就是一句话prompt加skill跑通。
设计变体探索：5分钟内三套方案并列
什么都没给，只说“给我设计一个品牌展示页”。三套逻辑并行跑了5分钟，我面前摆着三个风格完全不同的HTML文件。
每个文件都带参数调节侧边面板——配色、字型、信息密度，刷新不丢设置，因为用了localStorage持久化。你看中哪个方案，当场调参数，新打开的页面设置还在。
5维度专家评审怎么用
输入“帮我对这个设计做一个5维度评审”，工具会在3分钟内输出一份完整的评审报告：
- 哲学一致性：0-10分
- 视觉层级：0-10分
- 细节执行：0-10分
- 功能性：0-10分
- 创新性：0-10分
雷达图可视化，附带Keep / Fix / Quick Wins清单。比如它说我一个产品的首屏“英雄区CTA点击路径不明确，建议将主按钮提高27px并增加8px内边距”，这个数值是具体可执行的，不是“优化一下”这种模糊建议。
什么不能做
3D建模、照片级渲染、复杂的品牌VI手册（5页以上的规范文档）它做不了。它擅长的是UI原型、演讲PPT、信息图、动画和设计评审。
但它解决了AI设计工具最实际的问题：从“看起来还行”到“能用”之间的转手成本。你不必把图拖到Figma重新分解，不必拿代码片段自己搭环境，不必为了改一个字去学CSS。
自2026年5月14日起完全免费
这是MIT协议，个人和商用都免费，无需授权。原条款已作废。
安装命令：
npx skills add alchaincyf/huashu-design支持Claude Code、Cursor、Codex、OpenClaw、Hermes等主流agent。
跨agent通用这一点很实际。你不需要成为某个生态的死忠用户，也不需要在不同工具之间反复迁移配置。一条命令，一次安装，在任何agent里都能用。
花5分钟装好，打一句话，10分钟后你就知道真假。