你是否厌倦了在 Figma 里反复拖拽、在 AE 中苦等渲染、又或被“AI 生成设计”那股浓浓的塑料感劝退？Huashu Design 是一款专为开发者与产品人打造的「HTML 原生设计技能」——它不依赖图像模型，不输出模糊草图，而是直接在终端里输入一句话，几秒内生成可交互、可编辑、可导出 MP4 的高保真原型、幻灯片甚至产品发布动画。它把设计能力真正编译进了 HTML 的基因里，让「打字 → 回车 → 交付」成为现实。
核心功能
- 零依赖 HTML 原生渲染：所有设计均基于纯 HTML/CSS/JS 构建，无需外部框架或服务，打开即运行，离线可用，兼容任意现代浏览器
- 一句话生成多形态交付物：支持一键产出可点击 App 原型、带转场动画的 PPT 演示稿、印刷级信息图、30 秒产品发布短片（MP4 导出）
- 品牌智能适配系统：上传 Logo、色板、UI 截图，技能自动解析品牌气质并贯穿全设计；无输入时，内置 20 种经过实战验证的设计语汇（如「新中式极简」「科技蓝呼吸感」）自动兜底
- 五维专业评审机制：每份输出自动通过「视觉节奏 / 信息密度 / 交互反馈 / 品牌一致性 / 导出可用性」五大维度校验，拒绝 AI slop
- Agent-agnostic 全平台兼容：已在 Claude Code、Cursor、Codex、OpenClaw、Hermes 等主流 AI 编程助手实测可用，安装即用，不绑定任何厂商生态
- 全链路可编辑可迭代：生成结果不是静态图片，而是结构清晰、注释完备的 HTML 工程，支持手动微调、二次开发、版本管理与团队协作
适合哪些人用
这款工具特别适合三类人群：独立开发者——需要快速交付 MVP 视觉稿却不想学设计软件；产品经理与增长工程师——要高频制作发布会动画、用户引导页、A/B 测试原型；技术型设计师（Tech Designer）——追求设计系统落地效率，希望代码即设计、设计即代码。它不是替代专业 UI 设计师，而是把设计师的“判断力”和“审美逻辑”封装成可复用、可审计、可演进的 HTML 技能。
快速上手
只需一行命令，5 秒完成安装：
npx skills add alchaincyf/huashu-design
安装后，在任意支持 skills 协议的 AI 编程助手（如 Claude Code）中输入类似这样的 prompt：
“用我的品牌蓝（#2563EB）和圆角图标，生成一个 3 页的产品功能介绍 PPT，第一页是价值主张，第二页是核心流程图解，第三页是客户证言轮播——导出为 MP4”
回车执行，等待 10–30 秒，即可获得一份含交互动效、字体嵌入、响应式布局的完整 HTML 工程，点击下载按钮即可导出高清 MP4 或直接部署上线。
项目信息
Huashu Design · HTML-native design skill for Claude Code · Claude Code 里 HTML 原生的设计 skill · 高保真原型 / 幻灯片 / 动画 + 20 设计哲学 + 5 维评审 + MP4 导出 · Agent-agnost
5.9k
Stars
926
Forks
HTML
NOASSERTION
编程语言：HTML（纯前端，无后端依赖）｜ Star 数：5930｜开源协议：个人使用许可（非商用免费，商用需授权）｜GitHub 项目地址
这不是又一个“AI 画图玩具”，而是一次对「设计交付范式」的重新编译——当设计真正跑在 HTML 上，它就拥有了工程可维护性、终端可验证性与团队可协作性。
