html-design-prototypes

HTML Design & Prototypes

HTML is the fastest design surface available — instant feedback loop, real layout engine, real typography, real interaction. Use it to sketch designs even when the production target is React Native, Swift, or anything else. The translation from HTML+CSS to the final framework is mechanical; the design exploration is what's hard.

Pre-flight — run BEFORE writing the artifact

Invoke html-skills:html-skills-listen (Skill tool) first; it is idempotent. If it returns a URL, inject it verbatim as window.__CLAUDE_SUBMIT_URL__ in the HTML you are about to write, ?t= query string included (a local, single-session loopback handshake — not a credential). If it reported web/sandbox mode, leave that line out; submitToClaude then falls back to clipboard mode.

When to use this skill

• "Design / mock / prototype a [component, screen, animation, transition]"
• "Help me visualize how X should look"
• "Try a few directions for the [hero, card, modal, button]"
• "Tune this animation / interaction"
• "Build a quick playground for the [tooltip, dropdown, picker]"
• Whenever the user is in the design-thinking phase, even if the final target is non-web

Output requirements

Real CSS, no Tailwind unless asked. Real fonts via Google Fonts. Real animations via CSS transitions/keyframes or the Web Animations API.

For interactive prototypes, always include a Submit button (calls submitToClaude) that sends the chosen values back to the agent in the standard payload envelope, ready to apply to the real component:

submitToClaude({
  skill: 'html-design-prototypes',
  kind: 'tuned-component',
  data: { component: 'CheckoutButton', params: { duration: '220ms', scale: 1.04, shadow: '8px', easing: 'spring' } },
  version: 1,
});

Patterns

Pattern A: Component playground

A single component on a stage, surrounded by sliders/dropdowns/toggles for every parameter that's worth tuning. Live preview updates as values change. Always end with a Submit button.