alchaincyf/huashu-design

Huashu Design · HTML-native design skill for Claude Code · Claude Code 里 HTML 原生的设计 skill · 高保真原型 / 幻灯片 / 动画 + 20 设计哲学 + 5 维评审 + MP4 导出 · Agent-agnostic

huashu‑design 是什么？

一个 兼容 Claude 的技能，让你只需向 AI 代理（Claude Code、Cursor、Codex 等）输入自然语言请求，即可生成完成的设计产物。该技能在本地运行，将 HTML/CSS 样式模板、动画工具和导出脚本的集合拼接在一起，并生成：

可点击的应用原型（带 iPhone 风格框架的 HTML）
演示文稿——既有交互式 HTML 版本，也有可编辑的 PPTX 文件
导出为 MP4/GIF 的短动态图形（包括可选背景音乐）
打印就绪的信息图（PDF/PNG/SVG）
带视觉模型的设计方向建议
快速 5 维设计评审（雷达图 + 可操作清单）

所有这些都无需打开图形界面——你只需告诉代理你需要什么，然后等待技能完成。

如何安装

npx skills add alchaincyf/huashu-design

如果安装只创建了 SKILL.md，你可能需要更新版本的 skills CLI（≥ 1.5.19）。或者，将仓库克隆到你的 Claude 技能文件夹中：

git clone https://github.com/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design

它能做什么？（典型交付时间）

任务	输出	大约时间
可点击的应用原型	带 iPhone‑15‑Pro 框架的 HTML 文件，功能齐全的导航，经 Playwright 验证	10‑15 分钟
演示文稿	基于浏览器的 HTML 演示文稿 + 可编辑的 PPTX（真实文本框）	15‑25 分钟
短动画	MP4（25 fps 或 60 fps 插值）+ GIF + 可选 BGM	8‑12 分钟
设计变体	3 个以上并排模型、实时调整面板、跨维度探索	10 分钟
信息图 / 数据可视化	打印质量的 PDF/PNG/SVG，采用 CSS 网格布局	10 分钟
设计方向顾问	六个缩略图概念 → 三个精炼视觉，由包含 84 个纯 HTML 样式样本的库支持	10 分钟
5 维专家评审	雷达图 + 保留/修复/快速获胜清单	3 分钟

核心机制

品牌资产协议 – 当提到品牌时，技能会自动：
- 请求品牌指南，
- 从官方品牌页面抓取 SVG/标志资产，
- 提取颜色值，以及
- 编写包含 CSS 变量的 brand‑spec.md，以便每个生成的文件使用确切的品牌调色板。
设计方向回退 – 对于模糊的提示，技能运行三种独立的逻辑（最佳设计师、真实世界参考、“二手”风格轮盘），并生成六个缩略图。你选择三个；其余三个保留为备份。
84 样式 HTML 库 – 涵盖网页、PPT、信息图和应用程序 UI 样式（包括中文/东亚视觉词汇）的纯 HTML/CSS 模板。无需外部图像；该库为每种样式提供示例截图。
初级设计师工作流 – 技能在填充真实内容之前会输出假设、占位符和推理注释，向用户展示早期草稿并允许迭代调整。
设计检查与账本 – design_lint.py 检查事实问题（损坏的图像、低对比度、控制台错误），并在本地账本（~/.huashu-design/）中记录每个项目的视觉指纹。这有助于避免项目之间意外的样式重复。

示例提示

做一份 AI 心理学的演讲 PPT，推荐 3 个风格方向让我选
做个 AI 番茄钟 iOS 原型，4 个核心屏幕要真能点击
把这段逻辑做成 60 秒动画，导出 MP4 和 GIF
帮我对这个设计做一个 5 维度评审

该技能会响应请求的资产，随时可以交付。

限制

没有可编辑的 PPTX → Figma 管道（输出是 HTML，不是原生设计文件）。
非常复杂的 3‑D 或粒子系统动画不在范围内。
从完全未知的品牌开始可能会产生较低的美学评分（约 60‑65 / 100）。

许可证与社区

自 2026‑05‑14 起，该项目采用 MIT 许可证——免费用于个人和商业用途。该仓库包含英语、韩语和越南语的翻译分支，以及一个社区维护的 SKILL.md，代理会读取该文件。

快速入门清单

安装技能（npx skills add …）。
验证 assets/、scripts/、references/、demos/ 文件夹是否存在。
打开任何兼容 Claude 的代理并发出设计请求。
查看生成的文件，如有需要可通过内置面板进行调整，然后导出。

简而言之： huashu‑design 是一个开源的、代理无关的技能，它将一行文本转化为精美、可导出的设计——从 UI 原型到动态图形——全部在本地执行，无隐藏遥测。