skill CX Codex

huashu-design-html-native — Claude Code design skill

Q: How do I install huashu-design-html-native in Claude?

Run `npx skills add reason-machines/trending-skills --skill huashu-design-html-native -a claude-code`. The skill file then lands at `~/.claude/skills/huashu-design-html-native/SKILL.md`.

Turns a plain-language request into a finished file: prototype, slide deck, animation or infographic in HTML/CSS/JS. No Figma involved.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓

npx skills add reason-machines/trending-skills --skill huashu-design-html-native -a claude-code

Open on GitHub

What huashu-design-html-native does

The skill runs in agents that read SKILL.md: Claude, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode. You describe the outcome, the agent builds a single-file HTML with a clickable prototype inside an iPhone 15 Pro or Android bezel, a slide deck, a timeline animation exported to MP4 and GIF, or a print-quality infographic. A separate mode critiques a design across five dimensions and returns a radar chart with a Keep/Fix/Quick Wins list.

The repo ships the building blocks: animations.jsx with Stage, Sprite, Easing and interpolate primitives, device frames, the deck_stage.js slide engine, the design_canvas.jsx variant panel, 24 prebuilt examples and six background tracks. Scripts render-video.js, convert-formats.sh, add-music.sh and html2pptx.js handle Playwright rendering, 60fps interpolation, music muxing and converting DOM styles into editable PPTX objects.

The agent does not start blind. It fires a batch of questions first, marks assumptions and placeholders inside the HTML, and shows a gray-box skeleton for approval. When a named brand is involved, the skill insists on pulling brand colors from downloaded assets into brand-spec.md instead of guessing from memory. Video rendering goes through Playwright, so check that it is installed before asking for an MP4.

What it helps with

build a clickable app prototype inside a phone bezel
produce a slide deck and export it as editable PPTX
render an animation to MP4 and GIF with background music
lay out three design variants side by side on one canvas
get a five-dimension critique with a fix list

Example prompts for the agent

make a meditation app prototype in an iPhone frame
build a slide deck for the quarterly review and export it as PPTX
generate a logo animation and export it as MP4

How to install huashu-design-html-native

1Skills CLI (Vercel)

npx skills add reason-machines/trending-skills --skill huashu-design-html-native -a claude-code

2Manually: put the files in place

~/.claude/skills/huashu-design-html-native/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/huashu-design-html-native/

1Skills CLI (Vercel)

npx skills add reason-machines/trending-skills --skill huashu-design-html-native -a codex

2Manually: put the files in place

.agents/skills/huashu-design-html-native/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add reason-machines/trending-skills --skill huashu-design-html-native -a cursor

2Manually: put the files in place

.cursor/skills/huashu-design-html-native/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install reason-machines/trending-skills huashu-design-html-native

2Manually: put the files in place

.github/skills/huashu-design-html-native/SKILL.md

1Skills CLI (Vercel)

npx skills add reason-machines/trending-skills --skill huashu-design-html-native -a gemini-cli

2Platform CLI

gemini skills install https://github.com/reason-machines/trending-skills --path skills/huashu-design-html-native

Manually: put the files in place

.devin/skills/huashu-design-html-native/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add reason-machines/trending-skills --skill huashu-design-html-native -a opencode

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about huashu-design-html-native

How do I install huashu-design-html-native in Claude?

Run npx skills add reason-machines/trending-skills --skill huashu-design-html-native -a claude-code. The skill file then lands at ~/.claude/skills/huashu-design-html-native/SKILL.md.

What does huashu-design-html-native do?

It builds design artifacts from a text request: prototypes, slide decks, animations and infographics, all in HTML/CSS/JS. It can also export the result to MP4, GIF, PPTX and PDF.

Do I need Figma to use this skill?

No. Everything is built with HTML, CSS and JavaScript, and the output is a file you open in a browser.

Similar skills

Everything for Design →

prototype adobe Renders a proposed page redesign into one self-contained static HTML file you can open in a browser and iterate on from chat. CX Codex +1 524installs html-prototype plannotator A skill that builds one self-contained HTML file: a static mockup or a working prototype with states, keyboard support and responsive layout. It exists to test an interface decision before code. CX Codex +1 1,800installs extract-design-system arvindrk This skill extracts design primitives from a public website and generates starter tokens.json and tokens.css files for your project. CX Codex +1 130,700installs explain-interface jakubkrehel Explains how a visual effect, animation, or website layout was built from a live page or a screenshot. It breaks down the underlying layer stack. CX Codex +1 14,100installs Web Design Builder rknall Turns a spec or a plain description into HTML5/CSS/JS, then checks accessibility and behaviour through Playwright MCP. CX Codex +1 416installs slide-creator Starchild-ai-agent Builds 16:9 presentation slide decks using HTML and CSS, then renders them to PDF via headless Chromium. CX Codex +1 4,100installs

From the same set49

isolet-widget-isolation This skill packages a component into a self-contained widget with shadow DOM and scoped styles, ready to embed on any page. CX Codex +1 474installs ntwarden-windows-analysis-toolkit A skill for digging into Windows internals: processes, services, network, ETW, kernel. Useful when you need to break down what a suspicious process is doing. CX Codex +1 443installs tech-doc-style-chinese Style rules for Chinese technical writing: spacing between CJK and Latin, corner brackets, no buzzwords. Ships with a Python linter. CX Codex +1 434installs anubis-android-app-manager A skill for building and configuring Anubis, an Android app manager that freezes app groups through Shizuku depending on VPN state. CX Codex +1 427installs cc-design-html-prototyping This skill builds HTML mockups, slide decks, and interactive prototypes. Use it to explore visual directions before implementing an interface. CX Codex +1 423installs lingbot-map-3d-reconstruction A skill for streaming 3D scene reconstruction from images or video: point clouds, camera poses, depth maps. Useful when you need geometry out of a long frame sequence. CX Codex +1 418installs pgque-postgres-queue A skill that walks you through PgQue, a snapshot-based Postgres queue written in pure PL/pgSQL. Useful when events need to move inside the database. CX Codex +1 400installs aube-package-manager Guidance for using aube, a Rust-based Node.js package manager, across dependencies, workspaces, CI, and migrations from other package managers. CX Codex +1 392installs