Huashu Design HTML Native

Huashu Design — HTML-Native Design Skill

Skill by ara.so — Daily 2026 Skills collection.

Huashu Design turns natural-language requests into deliverable designs — interactive prototypes, animated slides, motion exports, and infographics — entirely in HTML/CSS/JS, no Figma or GUI required. Install it once into your agent; from then on say what you want and receive a finished file.

Installation

npx skills add alchaincyf/huashu-design

Compatible with Claude Code, Cursor, Codex, OpenClaw, Hermes, and any agent that reads SKILL.md.

What It Produces

Repository Structure

huashu-design/
├── SKILL.md                  # Agent-facing spec (the real instructions)
├── assets/
│   ├── animations.jsx        # Stage + Sprite + Easing + interpolate APIs
│   ├── ios_frame.jsx         # iPhone 15 Pro bezel (Dynamic Island, Home bar)
│   ├── android_frame.jsx
│   ├── macos_window.jsx
│   ├── browser_window.jsx
│   ├── deck_stage.js         # HTML slide engine
│   ├── deck_index.html       # Multi-file deck assembler
│   ├── design_canvas.jsx     # Side-by-side variant display
│   ├── showcases/            # 24 prebuilt examples (8 scenes × 3 styles)
│   └── bgm-*.mp3             # 6 scene-matched background tracks
├── references/
│   ├── animation-pitfalls.md
│   ├── design-styles.md      # 20 design philosophies detail
│   ├── slide-decks.md
│   ├── editable-pptx.md
│   ├── critique-guide.md
│   └── video-export.md
├── scripts/
│   ├── render-video.js       # HTML → MP4 via Playwright
│   ├── convert-formats.sh    # MP4 → 60fps interpolation + GIF
│   ├── add-music.sh          # Mux BGM into MP4
│   ├── export_deck_pdf.mjs
│   ├── export_deck_pptx.mjs
│   └── html2pptx.js          # DOM computedStyle → real PPTX objects
└── demos/                    # 9 capability demos (c*/w* series)

Core Concepts

1. Junior Designer Workflow (Default Mode)

The agent never starts blind. Before any task it:

1. Shows a one-shot question list — waits for batch answers before touching code
2. Writes assumptions, placeholders, and reasoning comments inside the HTML
3. Shows an early skeleton (even gray boxes) — gets approval
4. Fills content → generates variations → adds Tweaks panel — shows each step
5. Runs Playwright visual check before final delivery

2. Brand Asset Protocol (Mandatory for Named Brands)

When the task involves a specific brand (Stripe, Linear, Anthropic, your company):

Never guess brand colors from memory. Always extract from downloaded assets.

/* brand-spec.md output example */
:root {
  --brand-primary:   #635BFF;   /* Stripe violet — freq: 847 */
  --brand-secondary: #0A2540;   /* Stripe navy   — freq: 312 */
  --brand-accent:    #00D924;   /* Stripe green  — freq: 89  */
}

3. Design Direction Advisor (Fallback)

Triggered when the request is too vague to start. The agent:

• Picks 3 directions from different schools out of 5 schools × 20 philosophies
• Returns each with: representative works, mood keywords, reference designers
• Generates 3 parallel visual demos for the user to choose
• Then enters the Junior Designer main flow

The 5 schools and 20 philosophies live in references/design-styles.md. Examples:

4. Motion Design Engine

The animation system uses four composable primitives from assets/animations.jsx:

// Stage: defines total duration and canvas
const stage = useStage({ duration: 5000, width: 1920, height: 1080 });

// Sprite: a timed element (appears at t=500ms, lasts 2000ms)
const logo = useSprite({ start: 500, duration: 2000 });

// interpolate: map time → value with easing
const x = interpolate(stage.t, [0, 1000], [−200, 0], Easing.easeOutExpo);
const opacity = interpolate(stage.t, [0, 500], [0, 1], Easing.linear);

// Render
return (
  <div style={{
    transform: `translateX(${x}px)`,
    opacity,
    ...logo.style,   // visibility gating included
  }}>
    {children}
  </div>
);

5. Anti-AI-Slop Rules

Avoid the visual least-common-denominator:

• ❌ Purple gradients, emoji icons, left border-accent cards, SVG-drawn human faces, Inter as display font
• ✅ text-wrap: pretty, CSS Grid layouts, curated serif display fonts, oklch() color space, actual whitespace

Starter Patterns

iOS App Prototype

<!-- Uses assets/ios_frame.jsx internally -->
<!-- Agent generates a self-contained HTML file like this: -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AI Pomodoro — Prototype</title>
  <style>
    :root {
      --ios-width: 393px;
      --ios-height: 852px;
      --brand-primary: #FF3B30;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #1a1a1a;
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
    }

    .device {
      width: var(--ios-width);
      height: var(--ios-height);
      background: #000;
      border-radius: 54px;
      box-shadow:
        0 0 0 2px #3a3a3a,
        0 0 0 6px #1a1a1a,
        0 40px 80px rgba(0,0,0,0.8);
      overflow: hidden;
      position: relative;
    }

    /* Dynamic Island */
    .dynamic-island {
      position: absolute;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      width: 126px;
      height: 37px;
      background: #000;
      border-radius: 20px;
      z-index: 100;
    }

    /* Screen states */
    .screen { display: none; width: 100%; height: 100%; }
    .screen.active { display: flex; flex-direction: column; }

    /* Navigation */
    [data-go] { cursor: pointer; }
  </style>
</head>
<body>
  <div class="device">
    <div class="dynamic-island"></div>

    <!-- Screen: Home -->
    <div class="screen active" id="screen-home">
      <div style="flex:1; display:flex; flex-direction:column; align-items:center;
                  justify-content:center; padding: 60px 32px 0; background:#fff;">
        <div style="font-size:72px; font-weight:700; color:var(--brand-primary);
                    font-variant-numeric:tabular-nums;">25:00</div>
        <div style="margin-top:8px; color:#6e6e73; font-size:17px;">Focus Session</div>
        <button data-go="screen-running"
          style="margin-top:48px; background:var(--brand-primary); color:#fff;
                 border:none; border-radius:50%; width:80px; height:80px;