Claude-Style HTML and Deck Design

What Problem It Solves

When users ask for an HTML page, landing page, or deck, models often emit generic templates: gradient backgrounds, rounded cards, stacked icons, and no design context. This skill frames HTML design as a designer workflow: understand requirements, find brand assets, build a system, and produce maintainable files.

How It Works

• Ask before building: identify output type, brand assets, fidelity, devices, and number of variants.
• Design first: read UI kits, brand colors, and font specs; if missing, use oklch(), Google Fonts, and clear placeholders instead of hand-drawn SVG.
• Build and validate: use React + Babel for interactive prototypes and plain HTML/CSS for static pages; split files, keep versions, and check console, responsive layout, and touch targets.
• Deliver variants: provide conservative, progressive, and experimental options, with optional Tweaks controls.

Boundaries

It is best for engineers, designers, and prototype workflows that need reviewable pages quickly. It is not a general production site system: it does not guarantee backend integration, real assets, or complex business components. Without brand context, humans must still steer visual direction.