Huashu Design
Description
Huashu Design · HTML-native design skill for Claude Code · Claude Code 里 HTML 原生的设计 skill · 高保真原型 / 幻灯片 / 动画 + 20 设计哲学 + 5 维评审 + MP4 导出 · Agent-agnostic
Installation
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open the source below and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
README
🌐 中文 · English
Huashu Design
*「打字。回车。一份能交付的设计。」* *"Type. Hit enter. A finished design lands in your lap."*
[](LICENSE) [](https://skills.sh) [](https://skills.sh)
**在你的 agent 里打一句话,拿回一份能交付的设计。**
3 到 30 分钟,你能 ship 一段**产品发布动画**、一个能点击的 App 原型、一套能编辑的 PPT、一份印刷级的信息图。
不是「AI 做的还行」那种水平——是看起来像大厂设计团队做的。给 skill 你的品牌资产(logo、色板、UI 截图),它会读懂你的品牌气质;什么都不给,**三套逻辑顾问 + 60 种 HTML 原生风格库**也能兜底到不出 AI slop。
**你看到这篇 README 里的每一个动画,都是 huashu-design 自己做的。** 不是 Figma,不是 AE,就是一句话 prompt + skill 跑通。下次产品发布要做宣传片?现在你也能做。
npx skills add alchaincyf/huashu-design
跨 agent 通用——Claude Code、Cursor、Codex、OpenClaw、Hermes 都能装。
📣 **已改为 MIT 协议。** 自 2026-05-14 起本 skill 完全开源([MIT License](LICENSE)),个人和**商用都免费**,无需事先授权。原「个人使用免费、企业商用需授权」的条款已作废。([查看变更](#license))
[看效果](#demo-画廊) · [安装](#装上就能用) · [能做什么](#能做什么) · [核心机制](#核心机制) · [和 Claude Design 的关系](#和-claude-design-的关系)
▲ 25 秒 · Terminal → 4 方向 → Gallery ripple → 4 次 Focus → Brand reveal
👉 访问带音效的 HTML 互动版 ·
下载 MP4(含 BGM+SFX · 10MB)
📺 新手教程(花叔亲录)
不知道怎么用?看花叔录的 huashu-design 上手教程:
👉 Create generative art using p5.js with seeded randomness, flow fields, and particle systems Apply Anthropic's official brand colors and typography to artifacts Create beautiful visual art in PNG and PDF documents using design philosophy Create distinctive, production-grade frontend interfaces with high design quality Create animated GIFs optimized for Slack's size constraints Style artifacts with professional themes including 10 pre-set color/font combinations Writes and runs codemod scripts that replace hardcoded visual values with token references in ui/src/index.css Expert Design Guidance & Analysis Specialist who provides professional UI/UX insights, design system guidance, | Web standards for semantic markup, maintainable styling, and accessibility. | - | [wshobson/agents](https://Related Skills
Algorithmic Art
Design
Brand Guidelines
Design
Canvas Design
Design
Frontend Design
Design
Slack Gif Creator
Design
Theme Factory
Design Related Agents
Codemod Runner
Designguru
Html Css
