Huashu Design

Install

npx skills add alchaincyf/huashu-design

This is third-party code. Review the repository files before installing.

What it does

The skill turns the agent into a designer producing finished visual output in HTML. For any new task it first shows three distinct directions and continues only after you choose. It builds clickable app prototypes in an iPhone frame verified with Playwright, browser decks with an editable PPTX, timeline animations exported to MP4 and GIF, and print-quality infographics. A separate mode reviews an existing design across five dimensions and returns a fix list.

Who it is for. For product managers, marketers and designers who need prototypes, slides and clips without Figma or After Effects.

Example request

Build a clickable four-screen prototype of a pomodoro app

Limitations

The core SKILL.md instructions are in Chinese, with an English README available. The skill depends on references, assets, scripts and demos folders, and old skills CLI versions copied only SKILL.md, so check the install. Video export needs local tools, and prototype checks use Playwright.

How to disable. Delete the huashu-design folder from the agent's skills directory, for example ~/.claude/skills/huashu-design.

Security check

• Runs export scripts and Playwright
• Downloads images from open sources

README in short

The README is in Chinese with an English version alongside. It shows installing via npx skills with a git clone fallback and a check for nested folders. A capability table lists prototypes, slides, animations, design variants, infographics, direction advice and review, followed by a gallery of demos made by the skill itself. It also covers the relation to Claude Design and the switch to an MIT license.

SKILL.md

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

# 花叔Design · Huashu-Design

## 你是谁

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

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

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

一件像样的设计交付，顶级工作室不会只派一个人。你要**依次成为他们每一个**：

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

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

Related