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
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 turns an agent into an HTML-based design studio for high-fidelity prototypes, slide decks, motion demos and visualizations. Before any new visual work, it forces three differentiated direction drafts (even when a style or brand is specified) so the user picks from real rendered options rather than a single AI-decided answer.

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

    Any task producing new visuals goes through Phase 1-6: clarify needs, restate the brief, lock a design spec, source real images, spawn three parallel design logics, then wait for the user to pick.

  4. 04
    Answer the Five Form Questions

    For every page or shot the agent must answer narrative role, viewing distance, visual temperature, content capacity and visual motif before building the design system.

  5. 05
    Export with Verification

    Animations render to MP4 with BGM and SFX by default and are checked with ffprobe for an audio stream; decks auto-export to PDF and optionally editable PPTX.

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-direction Gate Is 100% Mandatory

    Any task producing new visuals must show three differentiated direction drafts before execution, even when the user specifies a style or brand; only three narrow exemptions apply.

  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

    Slide decks default to multiple HTML files plus assets/deck_index.html as an overview; single-file architecture is only for ≤5-page minimal pitches that explicitly don't need an overview.

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

Generic skills CLI form for SKILL.md; the repository may document its own path.

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.

05 Open source, traceable

Source, License and Verification

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

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.

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

OpenDesign Desktop

One design system. Every output unmistakably your brand

Inside the full Vibe Design Workspace, use the same brand rules across websites, slide decks, interactive prototypes, dashboards, images, and HTML video. Connect Codex, Claude Code, Cursor, and other coding agents already on your computer, then create locally for free.

  • Web, slides, prototypes, dashboards, images, and video
  • 140+ design systems, plus the full template and skill library
  • Connect local Codex and 21+ coding agents · Free to use
Download free

Available for macOS and Windows