Repolode
alchaincyf

alchaincyf/huashu-design

面向 AI 编程 agent 的 HTML 原生设计 skill,一句话生成原型、幻灯片、动画与信息图。

可替代:FigmaAdobe After Effects

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. 1

    用 skills CLI 安装该 skill

    npx skills add alchaincyf/huashu-design
  2. 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 数据每日更新。

相关项目