102.7K+Download
Skip to the usage guide
huashu-designby alchaincyf

Huashu Design Skill.

A Claude Code and Codex skill for UI design: high-fidelity HTML prototypes, slides, animation, and visualizations; starts from three drafts.

  • Web & UI
  • HTML
Download OpenDesignView usage guide
alchaincyf/huashu-design · SKILL.mdSKILL.md
--- name: huashu-design description: 花叔Design——用HTML做高保真原型、幻灯片、动画、可视化与专家评审。任何新设计100%先出三个方向初稿给用户选（指定风格/品牌也不豁免），选定后才执行。触发词：做原型、PPT、幻灯片、动画、设计风格、评审、做个HTML页面、UI mockup、导出MP4/GIF、做个好看的。生产级Web App/需后端的系统不适用。 --- ## 你是谁 ## 使用前提 ## 任务路由：一张表定入口 ## 核心原则 #0 · 事实验证先于假设（优先级最高，凌驾所有其他流程） ## 核心哲学（优先级从高到低） ## 设计方向顾问（Fallback 模式）
Front matter and section headings read from the upstream file on 2026-09-14 · 33,602 characters in full

01 What it does

What the huashu-design Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

Huashu-Design is an HTML-based design workflow for high-fidelity prototypes, slide decks, motion demos and visualizations. New visual work normally begins with three real direction drafts, even when a style or brand is specified. Explicit waivers, approved-direction iterations and mechanical tasks have documented exceptions; resource-limited environments have reduced variants.

It runs a brand-asset protocol (logos, product photos, real color values) instead of guessing, verifies factual claims about products via WebSearch before designing, and applies explicit anti-AI-slop rules for color, icons, cards and imagery. It is not meant for production web apps or backend-driven systems.

What it produces

  • Descriptively named HTML design files, versioned when heavily revised
  • Multi-page HTML deck with an overview wall, auto-exported to PDF and optionally editable PPTX
  • MP4 animation exports with BGM and SFX by default
  • Gate files such as brand-spec.md and direction-approved.md documenting assets and the user's chosen direction
See the example prompt ↗

How It Works

  1. 01
    Verify Facts First

    Before designing anything tied to a real product, technology or event, the agent must WebSearch its existence, release status, version and specs rather than rely on training memory.

  2. 02
    Route the Task

    A signal table maps task cues (brand name, slide/PPT, animation/export, app/iOS prototype, critique) to the correct entry point and reference file before work starts.

  3. 03
    Run the three-direction Fallback

    Start with a shared brief and assets, then three real direction drafts for user choice. Separate agents run in parallel where available; the source provides serial and lighter-variant fallbacks. Record any allowed waiver in direction-approved.md.

  4. 04
    Answer the Five Form Questions

    Answer narrative role, viewing distance, visual temperature, content capacity and visual motif before defining the system. The standard workflow waits for approval of those decisions and then an early draft; its reduced-runtime path records assumptions but still requires gate files.

  5. 05
    Export with Verification

    Check the rendered design in a browser. Animations default to MP4 with BGM and SFX, using the documented renderer and FFmpeg tools; decks auto-export to PDF. Editable PPTX is a requested, best-effort derivative and conversion losses must be disclosed. Cloud review or narration requires separate credentials and approval.

02 Find your fit

When to Use the huashu-design Skill

Use the huashu-design skill in Claude Code or Codex when the job is UI design of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • Interactive high-fidelity product mockups the user can click through and feel the flow of
  • 1920x1080 HTML slide decks meant to function like a PPT
  • Timeline-driven motion design used as video material or concept demos
  • Print-quality infographics and data-driven visualizations
  • Comparing multiple design directions side by side or tuning with Tweaks

Know the Boundaries

  • Production-grade web apps or systems that need a backend are out of scope
  • SEO websites and dynamic backend-driven systems do not go through this skill

What to Provide

  • Brand asset checklistLogo, product images, UI screenshots, color palette, fonts and forbidden zones asked for in one batch before searching official channels.
  • Style or brand referenceA liked website URL, screenshot, or a product whose feel should be matched; if none exists the agent proceeds with a stated assumption.
  • Existing design system or codebaseThe agent first checks whether a design system, UI kit, codebase or Figma exists before doing any hi-fi design from scratch.

03 Inside the skill

Rules the huashu-design Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Three Directions Before New Design

    A named style or brand does not waive visual choice. The source permits an explicit user waiver, iteration after an approved direction, or mechanical work; record the applicable exception and user wording or reason in direction-approved.md.

  2. Logo Is a Required Asset

    If a design shows a recognizable product or brand name, fetching its official logo is mandatory, not optional, and as many logos as products appear.

  3. Placeholder Over Bad Execution

    Missing icons get a grey block plus text label rather than a poorly drawn SVG; missing data gets an honest comment, never fabricated numbers.

  4. No Filler Content

    Every element must earn its place; blank space is solved with composition, not by inventing stats, icons on every heading, or gradients everywhere.

  5. Avoid Named AI-slop Patterns

    Purple gradients, emoji icons, rounded cards with a colored left border accent, and AI-drawn SVG people/faces are flagged as default AI visual patterns to avoid unless the brand itself uses them.

  6. React Scoping Constraints

    Never name a style object const styles = {...} because multiple components will clash; components must be exported across script tags via Object.assign(window, {...}).

  7. Animation Exports Default to Audio

    Animation HTML defaults to delivering as an MP4 with both BGM and SFX; a silent version is treated as an unfinished deliverable unless the user explicitly asks for no audio.

  8. Decks Default to multi-file with Overview Wall

    The standard deck uses separate HTML pages and an overview wall. Single-file decks are reserved for small pitches without an overview or shared-state needs; the source also prescribes a single-file fallback in its reduced-runtime mode. Decks of at least five pages begin with two representative pages before expansion.

04 Put it to work

Install huashu-design in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add huashu-design to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal
npx skills add https://github.com/alchaincyf/huashu-design --skill huashu-design

Use the complete repository with its assets, references and scripts. Browser checks and exports require Playwright and the relevant Node packages; video work uses FFmpeg, with HyperFrames the documented default for new animation projects. Optional cloud TTS and review need separate credentials and consent.

Give the Skill a First UI Design Task

Adapt this prompt with your own content and constraints, then run it in Claude Code or Codex.

Example prompt
做个咖啡主题的 PPT

Source: SKILL.md example (verbatim).

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Take a Playwright screenshot and check console errors before delivering
  • Personally look at the result in a browser before delivery since AI-written code often has interaction bugs
  • Run three Playwright click tests on app prototypes (detail view, key hotspot, tab switch) with zero pageerror
  • Check readability floor: body text at least 14px, labels at least 12px, contrast at least 4.5:1

In OpenDesign import huashu-design from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
alchaincyf
Repository
github.com/alchaincyf/huashu-design Branch master
Skill file
SKILL.md Content checksum recorded at verification; commit a790f70
License
MIT From LICENSE.
Repository stars
24,121 GitHub snapshot taken 2026-09-14 for the whole alchaincyf/huashu-design repository. Not a rating or usage count for huashu-design.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. 你是谁Frames the agent as a studio playing six roles: art director, brand researcher, visual/motion designer, engineer, copywriter.
  2. 使用前提States which output types the skill covers and that production web apps are excluded.
  3. 任务路由：一张表定入口Table matching task signals to the correct entry point and reference file.
  4. 核心原则 #0 · 事实验证先于假设Requires WebSearch verification of product facts before any design work begins.
  5. 核心哲学（优先级从高到低）Six ordered principles: use existing context, align before building, give variations, prefer placeholders, avoid filler, avoid AI slop.
  6. 设计方向顾问（Fallback 模式）Defines the mandatory seven-phase process producing three parallel design directions before execution.
  7. App / iOS 原型专属守则（速查版）Specific overriding rules for mobile app prototypes covering architecture, images, device frames, click tests.
  8. 工作流程Numbered standard workflow with checkpoints, gate-file protocol, and question templates.
  9. 异常处理Predefined fallback actions for vague requests, refused questions, conflicting context, tight deadlines.
  10. 技术红线（必读 references/react-setup.md）Non-negotiable React/Babel and Stage/Sprite implementation constraints.
  11. Starter Components（assets/下）Lists premade components (deck_index.html, animations.jsx, ios_frame.jsx etc.) and when to use each.
  12. 产出要求Naming conventions, versioning, file location and final browser/Playwright check requirements.
The Skill's Own Description
“花叔Design——用HTML做高保真原型、幻灯片、动画、可视化与专家评审。任何新设计100%先出三个方向初稿给用户选（指定风格/品牌也不豁免），选定后才执行。触发词：做原型、PPT、幻灯片、动画、设计风格、评审、做个HTML页面、UI mockup、导出MP4/GIF、做个好看的。生产级Web App/需后端的系统不适用。”

Front-matter description from SKILL.md. The full file is about 33,602 characters. Read the full file on GitHub.

06 Before you install

Questions About the huashu-design Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Does this skill only work in Claude Code?

No, the skill is described as agent-agnostic and works in Claude Code, Codex, Cursor, Trae, OpenClaw, Hermes Agent or any markdown-based skill agent, with a documented degraded mode for weaker runtimes without subagent spawning.

Huashu Design

Run huashu-design on a Real UI Design Task.

Download OpenDesign, import huashu-design from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/alchaincyf/huashu-design --skill huashu-design