Huashu Design：用一句话生成可交付的网页、原型与动画
给终端里的Claude Code等agent用的一套设计skill，能把一句话变成HTML、PPTX或动画，不必打开Figma。
GitHub alchaincyf/huashu-design 更新 2026-10-27 分支 master 星标 26.8K 分叉 3.0K
HTML JavaScript Python Shell AI设计工作流 Claude Code Cursor Codex Stage + Sprite 可编辑PPTX

🧭 决策指南

为什么现在热： 材料显示它在2026-10-27进入GitHub Trending daily，当日新增251星；README同时突出3.0版本、MIT开源、84种风格库、六选三工作流，以及HTML、PPTX、MP4和GIF等交付物，因此受关注的直接原因可能与版本发布和能力扩展相关，但材料无法证明具体因果。

适合，如果你

  • 你用Claude Code、Cursor或Codex，并希望从一句话得到HTML、MP4或可编辑PPTX。
    README“装上就能用”与“能做什么”章节列出这些agent及HTML、MP4、PPTX交付物。
  • 你需要先比较六个视觉方向，再挑三个方向进入真实设计。
    README“3.0：三个方向更敢”与references/directions.md写明“六个候选 → 缩略图 → 挑三版”。
  • 你要做可点击的App/Web原型，并接受Playwright验证和单文件HTML交付。
    README“能做什么”列出“单文件HTML、可点击、Playwright验证”，Demo画廊点名iPhone 15 Pro。
  • 你需要本地完成设计、渲染和MP4/PDF/PPTX导出，且不想上传数据到作者服务器。
    README“安全与数据流”写明核心链路100%本地、零网络零key、无telemetry。

不适合，如果你

  • 你的交付要求是把图层级PPTX导入Figma或Keynote后继续拖动文字位置。
    README“Limitations”明确不支持图层级可编辑的PPTX到Figma，也不能拖进Keynote改文字位置。
  • 项目核心依赖Framer Motion级复杂动画、物理模拟或粒子系统。
    README“Limitations”明确这些能力超出skill边界。
  • 你没有品牌资产，却要求从零生成接近高保真设计团队的稳定结果。
    README“Limitations”写明完全空白品牌从零设计质量会掉到60–65分。
  • 你只想安装一个SKILL.md，不准备保留references、assets、scripts和demos目录。
    README“装上就能用”说明四个子目录有99处被引用，缺一不可。

前置条件

  • 需要支持skills的agent，例如Claude Code、Codex或Cursor。
  • 安装命令依赖npx skills；CLI≤1.5.15存在只同步单文件的bug，1.5.19已修复。
  • 完整安装必须包含SKILL.md、references/、assets/、scripts/和demos/。
  • 云能力如豆包TTS和AI看片评审需要你自己的key，并在首次调用时使用--yes显式确认。
  • 动画导出能力涉及Node、ffmpeg等本机能力，README列出capabilities.py用于探测。

第一步命令（README 原文）

npx skills add alchaincyf/huashu-design

要注意

  • 安装后若目录只有SKILL.md，需升级skills CLI或改用git clone。
    README“装上就能用”指出CLI≤1.5.15的单文件同步bug，并给出skills@latest和git clone命令。
  • 云脚本不属于默认本地链路，调用豆包TTS或AI看片评审会涉及厂商官方API。
    README“安全与数据流”说明云能力位于scripts/cloud/且完全可选。
  • 导出前要区分HTML deck与可编辑PPTX，README明确PPTX不具备Figma图层级编辑能力。
    README“能做什么”与“Limitations”章节。
  • 完全空白品牌不要把60–65分的质量描述当作稳定的高保真结果。
    README“Limitations”直接给出60–65分区间。

替代方案

  • Claude Design：你需要浏览器GUI、画布操作或可导Figma，而不是Claude Code中的对话式skill。
    README“和Claude Design的关系”

材料未说明

  • README没有给出Node.js、Python或ffmpeg的具体最低版本。
  • README没有说明Claude Code、Cursor和Codex分别需要哪些具体版本。
  • README没有提供不同硬件上的MP4、GIF或PPTX导出耗时基准。
  • README没有说明API消耗的具体模型、价格或并行agent的资源上限。
  • README没有量化Playwright验证覆盖率或各种浏览器的兼容范围。

💡 深度解析

6
不适合 我已经有 PowerPoint 和 Figma 交付流程，要求每个元素都能自由拖动和改层级；huashu-design 的可编辑 PPTX 能否替代原生设计文件？
适合读者： 需要把 HTML 设计交付给 PowerPoint 或 Figma 团队继续逐层编辑的演示设计师

不适合把它当作 Figma 或 PowerPoint 原生文件替代品，因为 README 明确限定 PPTX 的编辑性有限，HTML 才是主要交付路径。

  • “和 Claude Design 的关系”写明交付物是 HTML、MP4、GIF、可编辑 PPTX 和 PDF，但这不等于完整的设计文件互操作。
  • Limitations 明确说“不支持图层级可编辑的 PPTX 到 Figma”，并指出产出不能拖进 Keynote 改文字位置。
  • “能做什么”只承诺 PPTX“文本框保留”；这更接近保留部分结构化文本，而不是完整图层、布局和效果。
  • 项目洞察还指出 PPTX、PDF、视频转换可能损失字体、布局、动画、透明度和交互能力。

它适合先快速产出 HTML deck 和可编辑程度有限的演示初稿；如果验收标准是设计师逐元素精修，仍应保留 Figma 或 PowerPoint 原生流程。

  • Limitations：不支持图层级可编辑的 PPTX 到 Figma
  • Limitations：产出 HTML，可截图、录屏、导图，但不能拖进 Keynote 改文字位置
  • 能做什么：HTML deck（浏览器演讲）+ 可编辑 PPTX（文本框保留）
  • 项目洞察：PPTX、PDF、视频等格式转换可能存在字体、布局、动画、透明度和交互能力损失
材料未说明：README 未给出不同 PPTX 元素类型的具体可编辑比例或兼容性矩阵。；README 未说明导出的 PPTX 在 PowerPoint、Keynote 和 LibreOffice 中的版本兼容范围。
不适合 我没有 logo、色板、UI 截图或参考作品，只能给一句模糊需求，却希望每次都得到稳定的 90 分高保真网页；huashu-design 能满足这个质量约束吗？
适合读者： 没有现成品牌资产、只给模糊需求，却要求稳定获得 90 分级高保真页面的创业者

不适合把它当作稳定的 90 分高保真生产系统，因为 README 明确承认完全空白品牌从零设计时质量会降到约 60–65 分。

  • 开头说明，提供 logo、色板和 UI 截图会让 skill 读取品牌气质；什么都不给时，六张缩略图、三个真实方向和 84 种风格库只是兜底机制。
  • Limitations 直接写明“完全空白的品牌从零设计质量会掉到 60–65 分”，并称凭空画 hi-fi 是 last resort。
  • README 的 Junior Designer 工作流依赖 assumptions、placeholders、reasoning 和多轮展示；一句模糊需求不足以替代这些上下文。
  • 项目洞察还指出，没有品牌资产、参考作品或明确内容约束时，输出可能通用化并出现 AI slop。

它仍适合用来探索品牌方向，但不满足你要求的稳定质量下限。你需要先提供品牌上下文或接受它的方向探索定位。

  • README 开头：给 skill 你的品牌资产（logo、色板、UI 截图），它会读懂你的品牌气质
  • Limitations：完全空白的品牌从零设计质量会掉到 60–65 分
  • Limitations：凭空画 hi-fi 本来就是 last resort
  • 项目洞察 common_pitfalls：不提供品牌资产、参考作品或明确内容约束，质量可能下降到约 60–65 分
npx skills add alchaincyf/huashu-design
材料未说明：README 未定义“90 分”对应的可量化验收指标或自动化评分阈值。；README 未说明仅靠 84 种风格库时，各类网页在不同内容密度下的稳定性。
适合 我在 Claude Code 里要做一个 AI 番茄钟 iOS 原型，必须包含 4 个核心屏幕并能真实点击；huashu-design 是否比直接写静态页面更适合？
适合读者： 使用 Claude Code、需要制作 4 个核心屏幕并要求真实点击路径的 iOS 原型开发者

适合，因为它把单文件 HTML 原型、设备外框和交互验证放在同一条 agent 工作流里，而不是只生成静态截图。

  • README 的“能做什么”明确列出 App/Web 交互原型，交付物包含“单文件 HTML、真 iPhone bezel、可点击、Playwright 验证”，典型耗时为 10–15 分钟。
  • 安装后可直接在 Claude Code 中提出“做个 AI 番茄钟 iOS 原型，4 个核心屏幕要真能点击”，这正是 README 给出的使用示例。
  • “Junior Designer 工作流”要求先展示 assumptions、placeholders 和早期草稿，交付前用 Playwright 走一遍浏览器，因此适合快速验证屏幕切换和关键路径。

但它交付的是 HTML 原型，不是可直接提交 App Store 的 Swift/SwiftUI 工程；原生导航、系统权限和真实设备行为仍需另行实现。

  • 能做什么：交互原型（App / Web）｜单文件 HTML · 真 iPhone bezel · 可点击 · Playwright 验证
  • 装上就能用：『做个 AI 番茄钟 iOS 原型，4 个核心屏幕要真能点击』
  • 核心机制：交付前用 Playwright 肉眼过一遍浏览器
  • 项目洞察：支持单文件 HTML 原型、状态驱动的多屏切换和 Playwright 交互验证
npx skills add alchaincyf/huashu-design
材料未说明：README 未说明生成的原型能否直接导出为 Swift、SwiftUI 或 React Native 工程。；README 未说明 Playwright 是否能覆盖 iOS 原生手势、系统权限和设备级性能行为。
适合 我们每个项目都要比较多个视觉方向，而且最近 6 个交付里 5 个用了无衬线标题；我希望系统能发现撞色、撞骨架并主动换方向，huashu-design 是否适合？
适合读者： 需要比较多个视觉方向、担心连续项目重复使用无衬线标题和相同页面骨架的小型产品团队

适合，因为六选三、外观账本和事实型设计体检正好对应你的方向比较与去重复约束。

  • README 的 3.0 说明先出六张缩略图，再挑三版做成真实稿；“能做什么”进一步定义为三套逻辑各出两个候选，便于并排比较而不是押注单一方案。
  • 3.0 案例中，观鸟 App 使用参考板先看真实作品；“今晚吃啥”案例记录外观账本发现最近 6 个交付中 5 个是无衬线标题，于是这一版改用宋体。
  • 设计体检曾发现两版首屏都使用《神奈川冲浪里》，随后替换其中一版素材；这证明检查不仅输出审美意见，也能触发具体修复。
  • 项目洞察说明 design_lint 会检查多版本撞色、撞骨架，并输出 Keep、Fix 和 Quick Wins。

它能降低视觉重复，但外观账本是有限的本机经验记录，不是完整的团队设计系统或长期审美模型。

  • 3.0 发布说明：先出六张缩略图再挑三版做成真稿
  • 3.0 案例 · 今晚吃啥：最近 6 个交付里 5 个是无衬线标题，这一版挑了宋体
  • 3.0 案例 · 富岳三十六景：设计体检发现两版首屏都用了《神奈川冲浪里》并替换一版
  • 项目洞察：design_lint 检查多版本撞色、撞骨架并输出 Keep、Fix、Quick Wins
npx skills add alchaincyf/huashu-design
材料未说明：README 未说明外观账本是否支持多人共享、版本控制或团队级合并。；README 未说明 design_lint 对“相似”的具体计算规则、阈值和误报率。
适合 我想把一段逻辑做成 60 秒动画，同时导出 MP4、GIF 和 60fps 插帧版本；本机可以安装 Node、浏览器和 ffmpeg，但我不需要 3D、粒子或物理模拟，huashu-design 是否合适？
适合读者： 需要将 60 秒逻辑动画导出为 MP4、GIF 和 60fps 版本，并在本机使用 Node、浏览器与 ffmpeg 的内容开发者

适合，因为你的动画属于 Stage + Sprite 时间轴覆盖的中等复杂度范围，而且目标格式正是 README 直接支持的导出物。

  • “Motion Design 引擎”列出 Stage、Sprite、useTime、useSprite、interpolate 和 Easing 四类 API，并支持一条命令导出 MP4、GIF、60fps 插帧和带 BGM 的成片。
  • “能做什么”给出时间轴动画交付物：MP4（25fps / 60fps 插帧）+ GIF（palette 优化）+ BGM，典型耗时 8–12 分钟。
  • 安全与数据流说明设计、渲染和 MP4 导出默认 100% 本地运行、零网络零 key，适合不想把素材上传到作者服务器的场景。
  • 限制章节明确排除 Framer Motion 级别的复杂 3D、物理模拟和粒子系统；你的约束没有触及这条边界。

真正的前置条件是本机浏览器、Node、ffmpeg 和字体环境可用；README 没有承诺所有机器上的编码结果完全一致。

  • Demo 画廊 · Motion Design 引擎：Stage + Sprite 时间片段模型与 MP4 / GIF / 60fps 插帧 / BGM
  • 能做什么：时间轴动画｜MP4（25fps / 60fps 插帧）+ GIF（palette 优化）+ BGM｜8–12 min
  • 安全与数据流：核心链路 100% 本地运行，零网络零 key
  • Limitations：Framer Motion 级别的复杂动画不行，3D、物理模拟、粒子系统超出边界
npx skills add alchaincyf/huashu-design
材料未说明：README 未列出支持的浏览器版本、ffmpeg 版本或不同编码器的兼容矩阵。；README 未说明 60fps 插帧的具体算法、输出码率和长动画的资源占用。
适合 我们要把未公开的 logo、色板和 UI 截图交给 Claude Code 做网页和 PPT 方向探索，品牌资料不能上传作者服务器；huashu-design 是否满足本地优先约束？
适合读者： 处理未公开 logo、色板和 UI 截图，希望核心设计链路不出本机的品牌产品团队

适合核心本地流程，但前提是你不启用云端 TTS、AI 看片评审，也不让 agent 抓取外部参考网站。

  • “安全与数据流”明确说明设计、渲染、MP4/PDF/PPTX 导出 100% 本地运行，零网络、零 key，并且没有 telemetry。
  • 本机新增的品味经验和外观账本只写入 ~/.huashu-design/，不会上传；这适合保存品牌上下文和历史视觉选择。
  • 云能力被隔离在 scripts/cloud/，使用自己的 key，首次调用还需 --yes 显式确认，因此不是默认出站链路。
  • README 同时说明参考板只有在让 agent 截取参考作品时才会访问对应网址，所以外部参考是额外的数据边界。

这能满足“项目资产不发给作者服务器”，但不能自动满足企业对所有网络访问、模型 API、缓存和浏览器出站流量的统一合规要求。

  • 安全与数据流：核心链路 100% 本地运行，零网络零 key；无 telemetry
  • 安全与数据流：本机记录只写在 `~/.huashu-design/`，从不上传
  • 安全与数据流：云能力位于 `scripts/cloud/`，首次调用需 `--yes` 显式确认
  • 安全与数据流：参考板只在让 agent 截参考作品时访问那些网址
npx skills add alchaincyf/huashu-design
材料未说明：README 未说明宿主 Claude Code、Codex 或 Cursor 的模型请求是否会把提示词和品牌内容发送给各自服务商。；README 未提供企业代理、防火墙、缓存目录和完整进程级出站审计方案。

✨ 核心亮点

  • 3.0先给六张缩略图，再挑三版做真稿
  • 84种带样张的HTML原生风格库
  • 支持MP4、GIF、PPTX、PDF与PNG导出
  • 核心设计、渲染与导出100%本地运行
  • 仓库仅2名贡献者、10个最近提交

🔧 工程化

  • 用npx skills add安装，向Claude Code生成HTML、原型和动画
  • Stage + Sprite引擎支持MP4、GIF与60fps插帧导出
  • Playwright验证可点击的iPhone 15 Pro原型
  • design_lint.py提供设计体检、撞色检测与外观账本

⚠️ 风险

  • PPTX不能按图层拖入Figma或Keynote改文字位置
  • Framer Motion级复杂动画、物理和粒子系统超出边界
  • 完全空白品牌从零设计质量会降至60–65分
  • skills CLI≤1.5.15可能只同步SKILL.md单文件

👥 适合谁？

  • 使用Claude Code、Cursor或Codex的终端型设计开发者
  • 需要10–25分钟交付HTML、PPTX或App原型的团队
  • 需要Playwright验证多屏iPhone 15 Pro交互原型的人
  • 希望用84种风格库探索网页、PPT或信息图方向的人