huashu-design

Huashu Design 是由独立开发者花叔（花生）发起并持续维护的开源 AI 原生设计技能，核心定位是“让 AI 代理在终端里直接交付能用的设计——不是‘做得还行’那种水平，而是看起来像大厂设计团队做的”——它不满足于做一份通用的 HTML 模板集合或零散的 UI 代码生成器，而是将 20 种设计哲学、60 种 HTML 原生风格库、5 维度专家评审、品牌资产协议、高保真原型/幻灯片/动画/信息图多格式产出、MP4/GIF/PPTX/PDF/SVG 多格式导出等核心能力整合于一套完整的开源技能体系中，全部配有 npx skills add 一键安装、跨 6+ Agent 兼容、MIT 开源协议、10+ 分钟的极速交付周期以及“三套逻辑并行”的设计方向顾问机制。市面大多 AI 设计工具要么依赖云端图形界面（数据上云、有平台锁定），要么只能生成静态图片或填充模板（缺乏设计深度与可编辑性）——但很少有项目能将“HTML 原生的设计系统”与“完全本地运行、终端驱动的 Agent Skill”同时做到，Huashu Design 解决的正是这个问题。

一、Huashu Design 是什么

Huashu Design 采用“Agent Skill + 设计哲学 + 多格式导出”三位一体的使用体验，通过 GitHub 完全开源发布，采用 MIT 许可证。项目由独立开发者花叔（花生）发起并持续维护，受 Claude Design 启发但定位为“让图形工具这层消失”——让 agent 在终端里干活，而不必打开任何图形界面。用户只需执行 npx skills add alchaincyf/huashu-design 一条命令，即可将技能注册到 Agent 运行时。安装后，支持 Claude Code、Cursor、Codex、OpenClaw、Hermes 等任意支持 AgentSkills 的代理。项目已获得超 20,000 GitHub Stars，上线不到两个月即成为设计类 Agent Skill 的标杆。

Huashu Design 的运作机制与市面常见的“模板填充工具”或“截图式设计生成器”有本质区别。它不是把内容塞进预设模板然后把每一页渲染成扁平图片，而是一套HTML 原生、哲学驱动、任务可切换的设计系统。其核心理念是“设计不是装饰，而是可决策的判断”——技能让 Agent 根据任务自动切换到设计师、动画师、UX 设计师或幻灯片设计师等不同专家角色，而非作为通用的 HTML 工具行事。技能包含三个核心层：SKILL.md 作为主文档编排全流程，references/ 提供按任务深入读取的子文档（含 60 种 HTML 原生风格库、动画陷阱、幻灯片指南、评审指南等），assets/ 提供 24 个预制样例组件和 6 首场景化背景音乐。核心链路（设计→渲染→MP4/PDF/PPTX 导出）100% 本地运行，零网络零 key；云端能力（豆包 TTS 配音、AI 看片评审）完全可选，首次调用需 --yes 显式确认。

二、Huashu Design 能做什么

Huashu Design 的核心能力可以精炼地概括为：顾、原、品、评、导，围绕这五大维度提供了从模糊需求到可交付设计的完整路径，覆盖 AI 辅助设计的全方位需求，具体包括：

20 种设计哲学与 60 种 HTML 原生风格库（顾） ——不是“随便选个风格”，而是“让 Agent 先做设计方向顾问，再开工”。技能内置 20 种设计哲学 作为底层决策框架。当用户需求模糊时，技能自动触发设计方向顾问——三套互补逻辑并行 subagent，各出一版真实视觉：① 秒数轮盘（date +%S 取秒，20 选 1，打破模型偷选极简的惯性）；② 现实参照（世界级获奖网站/PPT/iOS 原型迁移）；③ 最佳设计师（顶级工作室哲学）。背后是 60 种 HTML 原生风格库（网页 20 + PPT 20 + 信息图 20，按大胆/中性/安静分级，纯 CSS 无需生图）。绝不让你在没看到视觉时盲选风格——三版摆出来，看着选。

HTML 原生的多格式设计产出（原） ——不是“生成一张图就结束”，而是“HTML 是工具不是媒介”。技能产出全部为 单文件 HTML——可点击的交互原型（真 iPhone bezel）、可浏览器演讲的幻灯片 deck、时间轴动画、印刷级信息图、设计变体探索。交互原型支持 iPhone 15 Pro 精确机身（灵动岛/状态栏/Home Indicator）、状态驱动多屏切换、真实图片从 Wikimedia/Met/Unsplash 取、Playwright 自动点击测试。时间轴动画由 Stage + Sprite 时间片段模型驱动，useTime/useSprite/interpolate/Easing 四 API 覆盖所有动画需求。演示文稿既支持浏览器演讲，也支持一键导出为 可编辑 PPTX——html2pptx.js 读 DOM 的 computedStyle 逐元素翻译成 PowerPoint 对象，导出的是真文本框，PPT 里双击即可编辑。

品牌资产协议与反 AI slop 规则（品） ——不是“从零瞎猜”，而是“先读懂品牌再设计”。技能涉及具体品牌时强制执行 5 步品牌资产协议：① 问用户有 brand guidelines 吗 → ② 搜官方品牌页（.com/brand 等）→ ③ 下载资产（SVG 文件/官网 HTML/产品截图取色，三条兜底）→ ④ grep 提取色值，绝不从记忆猜品牌色 → ⑤ 写 brand-spec.md + CSS 变量固化。A/B 测试显示 v2 的稳定性方差比 v1 低 5 倍。同时内置反 AI slop 规则——避免一眼 AI 的视觉最大公约数（紫渐变/emoji 图标/圆角+左 border accent/Inter 做 display），用 text-wrap: pretty + CSS Grid + 精心选择的衬线 display 和 oklch 色彩。

5 维度专家评审（评） ——不是“做完就算”，而是“可量化的设计质量门禁”。技能内置 5 维度专家评审：哲学一致性、视觉层级、细节执行、功能性、创新性，各 0–10 分，输出雷达图可视化 + Keep/Fix/Quick Wins 可操作修复清单。典型耗时仅 3 分钟。

Junior Designer 工作流与即时迭代（导） ——不是“憋大招”，而是“早展示、早迭代”。默认工作模式是 Junior Designer 工作流：开工前先写 assumptions + placeholders + reasoning comments，尽早 show 给用户（哪怕只是灰色方块），理解错了早改比晚改便宜 100 倍。Tweaks 实时变体切换支持配色/字型/信息密度等参数化，侧边面板切换，纯前端 + localStorage 持久化，刷新不丢。

三、Huashu Design 适合谁用

Huashu Design 的内容设计使其适配各类希望通过 AI 提升设计效率的开发者、产品经理与创业者，核心聚焦那些“宁愿让 agent 在终端里帮我干活，也不愿意打开任何图形界面”，希望从“打开 Figma 手工设计”升级为“在对话中完成交付级设计”的人群，主要涵盖以下几类：

AI 编码代理的重度使用者与开发者——已经在用 Claude Code、Cursor、Codex 等 Agent 进行日常工作的用户。Huashu Design 让“在对话中完成交互原型、幻灯片、动画、信息图”成为原生体验，无需离开终端。

独立开发者与创业团队——需要快速产出产品原型、融资 pitch deck、产品发布动画，但没有专职设计师。Huashu Design 的 10–25 分钟 交付周期——交互原型 10-15 分钟、演讲幻灯片 15-25 分钟、时间轴动画 8-12 分钟——让创业团队以极低成本获得大厂级别的设计产出。

产品经理与产品设计师——需要快速将 PRD 或用户故事转化为可交互的高保真原型或可演示的幻灯片。技能的品牌资产协议确保设计始终与品牌视觉保持一致。

内容创作者与自媒体人——需要制作信息图、数据可视化或品牌视觉物料。印刷级信息图支持导出 PDF/PNG/SVG，杂志级排版、CSS Grid 精准分栏、text-wrap: pretty 排印细节。

对数据安全有严格要求的组织——涉及商业机密或未发布产品的设计稿不能上传到云端。Huashu Design 的核心链路 100% 本地运行，零网络零 key。

四、Huashu Design 的应用场景是什么

基于其内容设计与定位，Huashu Design 的应用场景主要围绕产品原型制作、演讲幻灯片制作、产品发布动画制作、设计方向探索和设计质量评审，覆盖从个人创作到团队交付的多个场景，具体包括：

产品原型与交互 Demo 场景——产品团队需要快速将产品构想转化为可点击的高保真原型。Huashu Design 提供了一条“在对话中描述需求 → Agent 自动判断图片是内容必需 → 抓公共领域素材 → 三套逻辑并行出一版真实视觉 → 产出可点击的 iPhone 15 Pro 精确原型 → Playwright 自动验证”的完整路径。典型交付物是单文件 HTML，真 iPhone bezel，10-15 分钟完成。

演讲幻灯片与 deck 制作场景——需要将产品文档或 PRD 转化为可演示的幻灯片。技能输出 HTML deck（浏览器演讲）和可编辑 PPTX（文本框保留）双格式。真实案例：13 页 HTML deck 全部用 huashu-design 完成——黑底极简衬线视觉系统，嵌入 2 个带 BGM+SFX 的 22 秒 cinematic demo。典型耗时 15-25 分钟。

产品发布动画与宣传片场景——需要为产品上线制作 60 秒宣传片。技能通过 Stage + Sprite 时间片段模型 驱动动画，支持 MP4（25fps/60fps 插帧）+ GIF（palette 优化）+ BGM 导出。README 里的每一个动画都是 huashu-design 自己做的——不是 Figma，不是 AE，就是一句话 prompt + skill 跑通。典型耗时 8-12 分钟。

设计方向探索与品牌视觉探索场景——面对模糊需求，不知道用什么风格。设计方向顾问的 三套逻辑并行——秒数轮盘 + 现实参照 + 最佳设计师——直接出 3 版真实视觉让你看着选。真实案例：一句“做个介绍鹦鹉进化史的网站”，skill 自动抓公共领域博物插画（Edward Lear/John Gould 的鹦鹉图录），三套逻辑各出一版真实视觉。

设计质量评审与迭代场景——设计完成后需要系统化评估。5 维度专家评审输出雷达图 + Keep/Fix/Quick Wins 清单。Tweaks 实时变体切换支持配色/字型/信息密度等参数化调整。典型耗时仅 3 分钟。

五、Huashu Design 为什么值得关注

Huashu Design 之所以值得关注，核心在于它将“AI 辅助设计从依赖云端图形界面或静态模板升级为完全本地运行、HTML 原生、哲学驱动的终端 Agent Skill”，并具备“20 设计哲学 + 60 风格库、三套逻辑并行顾问、品牌资产协议、5 维评审、多格式导出、MIT 开源”的独特价值，具体体现在以下几点：

从“图形界面依赖”到“终端驱动”的自由度革命。Claude Design 是网页产品，需要打开浏览器、点拖改、受订阅 quota 限制。Huashu Design 是 skill——在 Claude Code 里用，API 消耗，并行跑 agent 不受 quota 限。正如作者所说：“Claude Design 是更好的图形工具，huashu-design 是让图形工具这层消失”。这种“让设计发生在你已经在的地方”的设计哲学，是 Huashu Design 区别于所有云端设计工具最核心的价值。

从“盲选风格”到“三套逻辑并行”的设计方向顾问。大多数设计工具让用户在文字里盲选风格——“你喜欢现代还是复古？”——非设计师无法准确回答。Huashu Design 的三套逻辑并行——秒数轮盘（打破模型惯性）、现实参照（世界级获奖站迁移）、最佳设计师（顶级工作室哲学）——直接出 3 版真实视觉让你看着选。这种“先看再选”而非“先描述再猜”的设计，让“不知道自己想要什么”的用户也能找到适合自己的视觉方向。

从“从零瞎猜”到“品牌资产协议”的设计上下文。大多数设计工具是“从白纸开始”。Huashu Design 强制执行 5 步品牌资产协议——问、搜、下载、grep 色值、固化 spec——绝不从记忆猜品牌色。这个原则来自 Claude Design：“好的高保真设计不是从白纸开始，而是从已有的设计上下文长出来”——65 分作品和 90 分作品的分水岭。

从“做完就算”到“5 维度专家评审”的质量闭环。大多数设计工具只负责“生成”，不负责“质量”。Huashu Design 的 5 维度专家评审——哲学一致性、视觉层级、细节执行、功能性、创新性——输出雷达图 + Keep/Fix/Quick Wins 可操作修复清单。这种“生成 → 评审 → 修复”的闭环，让设计质量从“碰运气”升级为“可量化、可追踪”。

从“一种格式”到“HTML/MP4/GIF/PPTX/PDF/SVG 全格式交付”的覆盖广度。大多数设计工具只输出一种格式。Huashu Design 输出交互原型（HTML）、演讲幻灯片（HTML + 可编辑 PPTX）、时间轴动画（MP4 + GIF）、信息图（PDF/PNG/SVG）。html2pptx.js 读 DOM 的 computedStyle 逐元素翻译成 PowerPoint 对象，导出的是真文本框，PPT 里双击即可编辑。一个技能覆盖了从原型到演示到动画到印刷的全链路交付。

2 万 + Stars 的社区认可 + 活跃迭代。Huashu Design 上线不到两个月 GitHub 星标冲到 20,000+。已从“个人使用免费、企业商用需授权”改为 MIT 协议，个人和商用都免费。社区已维护英语、韩语、越南语等翻译版本。

80 分的 skill，不是 100 分的产品——但 80 分的 skill 比 100 分的产品好用。作者最诚实的声明是：“这是一个 80 分的 skill，不是 100 分的产品。对不愿意打开图形界面的人，80 分的 skill 比 100 分的产品好用”。这种“知道自己什么能做什么不能做”的诚实边界，让用户清楚知道什么可以期待、什么不能期待。

现实挑战与生态成熟度。Huashu Design 并非没有短板。首先，不支持图层级可编辑的 PPTX 到 Figma——产出 HTML，可截图、录屏、导图，但不能拖进 Keynote 改文字位置。其次，Framer Motion 级别的复杂动画不行——3D、物理模拟、粒子系统超出 skill 边界。再次，完全空白的品牌从零设计质量会掉到 60–65 分——凭空画 hi-fi 是 last resort。