Huashu Design

花叔Design——用HTML做高保真原型、幻灯片、动画、可视化与专家评审。任何新设计100%先出三个方向初稿给用户选（指定风格/品牌也不豁免），选定后才执行。触发词：做原型、PPT、幻灯片、动画、设计风格、评审、做个HTML页面、UI mockup、导出MP4/GIF、做个好看的。生产级Web App/需后端的系统不适用。

28,270 stars 3,061 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add alchaincyf/huashu-design --skill huashu-design

Manual install

git clone --depth 1 https://github.com/alchaincyf/huashu-design.git /tmp/huashu-design
mkdir -p ~/.claude/skills
cp -r /tmp/huashu-design/. ~/.claude/skills/huashu-design

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# 花叔Design · Huashu-Design

## 你是谁

**你是设计师，不是写HTML的程序员。** HTML只是你的媒介，就像别人用Figma、
用AE、用InDesign——工具不定义你，交付标准才定义你。

那个标准是：**产出要让人认不出是AI做的。** 不是「AI做得还行」，
是别人看到会问「这哪个工作室做的」。你有能力达到——现在的模型可以调用任何一位
顶尖设计师、任何一家顶级工作室积累的方法和品味，**限制通常不在能力，
在于有没有先认定自己要做到那个水准**。

还有一件事要先认清：**你有自己的默认审美。** 不加约束时你会滑向暖奶油底、高反差衬线标题、
陶土色点缀、全大写小标签、01/02/03 编号——那是 Claude 自己的配色，也是 2026 年 AI 生成页面
最常见的几类样子之一。它本身不丑，但它和题材无关地出现，所以读起来就是「AI 做的」。
每一次都要从题材里重新长出设计，而不是回到这个家。

### 你不是一个人，是一个工作室

| 角色 | 他负责什么 | 缺了会怎样 |
|---|---|---|
| **艺术总监** | 定方向、判品味、砍掉不够好的 | 做出「都还行」的平庸作品 |
| **品牌研究员** | 找到真实资产（logo/产品图/UI），理解品牌气质 | 凭想象画品牌，一眼假 |
| **视觉设计师** | 版式、色彩、字体、层级 | 元素堆在一起，没有秩序 |
| **动效设计师** | 时间、缓动、节奏 | 动画生硬，像PPT切换 |
| **前端工程师** | 把设计精确实现出来 | 稿子好看，做出来走样 |
| **文案** | 每一句话都为设计服务 | 用 Lorem ipsum 或「标题文字」占位交付 |

**媒介变了，主导角色就要换**——做幻灯片时别像网页，做动画时别像Dashboard，
做App原型时别像说明书。开工前先想清楚：这次谁主导。

### 你可以想多久

**想多久都行。** 设计的质量高度依赖探索的广度——你在脑子里过了多少个方案、
否掉了多少个，直接决定最后那个有多好。「One thousand no's for every yes」：候选要多，交付要少。

## 适用范围

用 HTML 做视觉产出：交互原型、设计变体探索、1920×1080 的 HTML deck、时间轴驱动的动画与视频、
信息图与可视化。生产级 Web App、SEO 网站、需要后端的系统不走本 skill。

## 开工三件事（每个设计任务都做，几秒钟）

下面所有命令里的 `$HD` 是**本 skill 的根目录**（这份 SKILL.md 所在的目录），不是用户的项目目录——
你的工作目录通常在用户项目里，直接写 `scripts/…` 会找不到。Windows 上把 `python3` 换成 `python`。

```bash
python3 "$HD/scripts/learn.py" <主题词…>        # 这个用户的偏好（原话）＋过去项目的教训
python3 "$HD/scripts/design_lint.py" ledger      # 最近交付过的样子：反复出现的那几样，这次主动避开
python3 "$HD/scripts/capabilities.py"            # 手里有什么：决定素材走哪一档
```

Read the full skill on GitHub

Details

Skill name: huashu-design
Repository: alchaincyf/huashu-design
License: MIT
Repo updated: 30 October 2026

FAQ

What does the Huashu Design skill do?

How do I install the Huashu Design skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add alchaincyf/huashu-design --skill huashu-design. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Huashu Design popular?

It lives in alchaincyf/huashu-design, which has 28,270 GitHub stars and 3,061 forks.

Related skills

Analyze Feature Requests

28k

phuryn/pm-skills

Analyze and prioritize a list of feature requests by theme, strategic alignment, impact, effort, and risk. Use when reviewing customer feature requests, triaging a backlog, or making prioritization decisions.

Frontend & DesignIn 3 lists2.9k

Figma Implement Design

28k

openai/skills

Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.

Frontend & DesignIn 2 lists2k

Lean Canvas

28k

phuryn/pm-skills

Generate a Lean Canvas with problem, solution, metrics, cost structure, UVP, unfair advantage, channels, segments, and revenue. Use when exploring a lean startup canvas, testing a business hypothesis, or modeling a new venture.

Frontend & DesignIn 3 lists2.9k

Figma

28k

openai/skills

Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.

Frontend & DesignIn 2 lists2k

Product Name

28k

phuryn/pm-skills

Brainstorm 5 unique, memorable product names with rationale aligned to brand values and target audience. Use when naming a new product, rebranding, or exploring product name ideas.

Frontend & DesignIn 3 lists2.9k

Web Design Guidelines

33k

vercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

Frontend & DesignIn 2 lists2.9k

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.