huashu-design 是什么？Claude Code/Codex HTML 原生设计 Skill 介绍

你可能见过这样的提示词：“做一个能点击的 App 原型”“把这段逻辑做成 60 秒动画”。真正让结果从普通 HTML 变成可交付设计的，不只是模型会写 CSS，而是它背后多了一套设计工作流。huashu-design 就是这样一个面向 Claude Code、Codex、Cursor 等 agent 的 HTML 原生设计 Skill。

图中展示的是官方仓库发布的 iOS 原型演示：页面不是一张静态效果图，而是围绕手机机身、状态切换和点击路径组织起来的交互样例。官方仓库地址是 alchaincyf/huashu-design，资料、脚本和示例都在同一个入口里。

huashu-design 到底是什么

简单说，它是一组写进 SKILL.md 和 references 文档里的设计规则、组件资产与导出脚本。你用自然语言描述需求，agent 按流程生成 HTML，再继续处理原型、幻灯片、动画、信息图或设计评审。它更像一个会执行设计流程的工作台，而不是单独的网页模板。

它能交付哪些东西

• App 或 Web 高保真原型：单文件 HTML、可点击状态和 Playwright 验证。
• 演讲幻灯片：浏览器可播放的 HTML deck，以及文字仍可编辑的 PPTX 路径。
• 时间轴动画：HTML 动画、MP4、GIF，以及可选的 BGM 和音效。
• 信息图与设计评审：印刷级排版、数据可视化和五维度检查清单。

时间轴演示说明了它的另一条路线：动画先以 HTML 中的 Stage、Sprite 和时间函数表达，再由脚本转成视频。这样改动仍然发生在源文件里，不必在 Figma、After Effects 和代码之间来回搬运。

它和普通“让 AI 写页面”有什么不同

普通提示词往往从颜色和卡片开始，huashu-design 更强调先确认任务、素材和验证方式。涉及具体品牌时，它会要求检查 logo、产品图、UI 截图、色板和字体，再把结果固化成品牌规格；需求模糊时，还能给出三种设计方向供选择。这个顺序会减少“看起来漂亮，但和品牌无关”的情况。

它也没有承诺所有设计都能一步到位。官方资料明确提到，复杂 3D、物理模拟和粒子系统超出适用边界；可编辑 PPTX 也不是把任意 HTML 原样搬进 PowerPoint，而是需要从页面结构开始遵守导出约束。适合把它当成 HTML 设计生产线，不适合把它当成 Figma 的完全替代品。

适合谁使用

1. 需要快速验证产品界面、交互路线和视觉方向的产品或设计人员。
2. 想用 Codex 或 Claude Code 直接产出网页、幻灯片、动画文件的开发者。
3. 希望设计源文件可继续修改，而不是只拿到一张图片的内容团队。

一句话概括：huashu-design 把“设计判断—HTML 实现—浏览器验证—格式导出”串成了一条对话式流程。它的价值不在于替你做审美决定，而在于让每个决定都有文件、素材和操作结果可以追踪。