一个智能体技能,让编程助手把图表、代码对比审阅、计划和表格生成为样式精美的 HTML 页面,替代终端里的 ASCII 字符图。
alchaincyf/huashu-design
面向 AI 编程 agent 的 HTML 原生设计 skill,一句话生成原型、幻灯片、动画与信息图。
- Star
- 25,426
- Fork
- 2,850
- 未关闭 Issue
- 4
- 最近提交
- 3天前
这是什么?
Huashu Design 是一个 agent skill,可安装到 Claude Code、Codex、Cursor 等支持 skills 的工具中。它让 agent 以 HTML 文件的形式产出设计交付物:一句提示可以生成可点击的 iPhone 风格 App 原型、可导出可编辑 PPTX 的演讲幻灯片、导出 MP4 或 GIF 的时间轴动画,以及印刷级信息图。
遇到具体品牌时,skill 会先查找官方品牌页和素材,从中提取色值并写入品牌规范文件,再开始设计。需求模糊时,它会从 84 种 HTML 原生风格库中挑出六个候选做成缩略图,再把其中三个做成完整稿供用户选择。
此外还内置五维度设计评审,按哲学一致性、视觉层级、细节执行、功能性和创新性打分,并输出保留、修改与快速改进清单。核心流程在本地运行,语音合成、AI 看片评审等云端能力单独放在一个目录中,需要用户自行配置密钥并确认后才会调用。
核心功能
- 01生成单文件 HTML 原型,包含 iPhone 15 Pro 机身和可点击的多屏流程。
- 02幻灯片可导出为 HTML 演示,也可导出带真实文本框的可编辑 PPTX。
- 03时间轴动画可导出 MP4 和 GIF,支持 60fps 插帧和背景音乐。
- 04提供带缩略图的设计方向探索,内置 84 种风格样张库。
- 05按五个维度进行设计评审,输出雷达图和可执行的修改清单。
适用场景
- 在确定风格前,快速生成几套演讲幻灯片方案进行对比。
- 根据一句描述制作可点击的移动端 App 原型。
- 制作短小的产品发布动画,导出为 MP4 或 GIF。
- 在交付前对已有设计进行结构化评审。
快速上手
- 1
用 skills CLI 安装该 skill
npx skills add alchaincyf/huashu-design - 2
在支持 skills 的 agent(如 Claude Code、Codex、Cursor)中用自然语言描述你要的设计
使用前须知
- 无法将图层级可编辑的 PPTX 导出到 Figma;产出为 HTML、截图、视频或可编辑文本的 PPTX。
- 3D、物理模拟、粒子系统等复杂动画超出该 skill 的能力范围。
- 作者称在没有品牌资产的情况下从零设计质量约为 60–65 分,建议提供品牌素材。
标签
常见问题
- huashu-design 是什么?
- 面向 AI 编程 agent 的 HTML 原生设计 skill,一句话生成原型、幻灯片、动画与信息图。 Huashu Design 是一个 agent skill,可安装到 Claude Code、Codex、Cursor 等支持 skills 的工具中。它让 agent 以 HTML 文件的形式产出设计交付物:一句提示可以生成可点击的 iPhone 风格 App 原型、可导出可编辑 PPTX 的演讲幻灯片、导出 MP4 或 GIF 的时间轴动画,以及印刷级信息图。
- huashu-design 可以免费使用吗?用的什么许可证?
- huashu-design 以 MIT 许可证开源。用于商业产品前,请先确认许可证条款。
- huashu-design 还在维护吗?
- 活跃维护中。huashu-design 最近一次提交是在 2026年10月17日。
- huashu-design 适合用来做什么?
- 在确定风格前,快速生成几套演讲幻灯片方案进行对比。 根据一句描述制作可点击的移动端 App 原型。 制作短小的产品发布动画,导出为 MP4 或 GIF。 在交付前对已有设计进行结构化评审。
- huashu-design 怎么安装和运行?
- 用 skills CLI 安装该 skill: npx skills add alchaincyf/huashu-design 在支持 skills 的 agent(如 Claude Code、Codex、Cursor)中用自然语言描述你要的设计
- 在哪里获取 huashu-design?
- 源代码和安装说明在 GitHub 上:https://github.com/alchaincyf/huashu-design
概要由 AI 根据项目 README 生成;GitHub 数据每日更新。
相关项目
面向产品团队的开源设计平台,支持实时协作、设计令牌与自托管部署。
一款 AI Agent Skill,可生成 12 套主题的可编辑演示文稿,支持在浏览器中修改并导出 HTML、PDF、PPTX。
一个 Agent Skill,让 AI 把复杂问题的回答生成为一页可离线查看的 HTML,含图表与表格。
面向 Claude Code 与 Codex 的 Agent Skill,把 AI 生成的动作接入随滚动、鼠标、拖动等操作变化的网页动画。