alchaincyf / huashu-design

∴ 是什么

Huashu Design 是一个基于 HTML 的设计技能（skill），运行在支持 skills 的 agent（如 Claude Code、Codex、Cursor）中。输入自然语言需求，它通过内置的风格库、脚本和参考流程生成设计交付物。交付物包括单文件 HTML 网页、可点击 App 原型、可编辑 PPTX、动画视频和信息图，以及设计评审报告。

∴ 解决什么问题

• ›设计师或开发者需要快速获得看起来像专业团队做的、可直接交付的设计，而非明显的 AI 痕迹
• ›需求模糊时，难以确定设计方向，需要系统性的候选方案和视觉预览来辅助决策
• ›涉及具体品牌时，需要获取准确的品牌色和品牌资产，而不是靠记忆随意猜测
• ›项目之间容易风格雷同，需要机制保证每次设计有差异和新鲜感

∴ 怎么上手

1. 01安装：npx skills add alchaincyf/huashu-design
2. 02安装后自检安装目录（如 ~/.claude/skills/huashu-design/），确保 references/、assets/、scripts/、demos/ 四个子目录存在
3. 03若目录不完整，升级 skills CLI：npm i -g skills@latest 或 npx skills@latest add alchaincyf/huashu-design
4. 04仍异常时可用 git clone 兜底：git clone https://github.com/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design
5. 05在 agent 里直接说一句话需求，例如「做一份 AI 心理学的演讲 PPT，推荐 3 个风格方向让我选」
6. 06按提示从六张缩略图里挑三版，agent 会做成完整稿

∴ 适合谁

适合使用 Claude Code、Codex、Cursor 等 agent 的开发者或设计师，需要在几分钟内获得设计初稿、原型或动画，覆盖网页、App、PPT、信息图等常见交付物。

∴ 要点

• ›MIT 协议，自 2026-05-14 起个人和商用均免费，无需事先授权
• ›84 种 HTML 原生风格库，分为网页 20、PPT 20、信息图 20、App 12、中文与东亚 12，每种带样张，纯 CSS 无需生图
• ›设计方向顾问机制：三套逻辑各出两个候选（最佳设计师、现实参照、秒数轮盘），生成六张缩略图，用户挑三版做成完整视觉，避免盲选
• ›品牌资产协议 5 步硬流程：问、搜、下载、grep 色值、写 brand-spec.md，绝不从记忆猜品牌色
• ›越用越懂你：包含经验记录（scripts/learn.py）、外观账本和设计体检，记录偏好和教训并输出评审
• ›跨 agent 通用，支持 Claude Code、Cursor、Codex、OpenClaw、Hermes

∴ 在榜记录

GitHub Trending 今日榜的每日存档，日期按北京时间。2026-10-26 首次上榜，累计在榜 2 天，最高第 13 名。