Claude-optimized web design skill. Generates distinctive, production-grade single-page HTML through interactive design consultation. Tuned for Claude's strengths: deep instruction following, hierarchical reference processing, and consistent multi-section code generation.
Generate distinctive, production-grade single-page HTML through interactive design consultation. Every generation must look unique — never converge on common AI defaults.
This skill is tuned for Claude's processing characteristics:
.htmlWalk through each step sequentially. Ask one question at a time. Confirm before proceeding. If the user provides all specs upfront, skip to Step 6.
Ask what kind of page to build.
| Type | Typical Sections |
|---|---|
| Landing page | Hero, features, testimonials, CTA, footer |
| Portfolio | Hero, project grid, about, contact |
| Blog/article | Header, content, sidebar, footer |
| Dashboard | Nav, stat cards, charts, data tables |
| Product page | Hero, gallery, specs, pricing, reviews |
| Event page | Hero, schedule, speakers, registration |
Adapt sections to the user's concept.
Read references/styles.md. Present the 6 categories with brief visual descriptions:
User picks 1–3 styles (one per axis: aesthetic + layout + texture).
After selection, read references/combinations.md to validate. Flag anti-patterns. Suggest refinements if needed.
Read references/palettes.md. Suggest 3 palettes matching the chosen styles.
Present each palette with visual blocks and context:
Palette: Earthbound Warmth
█ #C18A63 █ #F4EBD2 █ #7E9C76 █ #4A3F36 █ #5E7B4C
Best for: eco brands, wellness — pairs with Neobrutalism, Japandi
Ensure 4.5:1 contrast ratio between text and background. Define hierarchy: background, surface, primary, secondary, accent.
Read references/fonts.md. Suggest 3 font pairs matching styles.
Pair: Space Grotesk + Space Mono
Heading: Space Grotesk (600, 700) — geometric, technical
Body/Accent: Space Mono (400) — monospace contrast
Best for: Neobrutalism, Dashboard
All fonts from Google Fonts CDN. Korean projects: always include Noto Sans KR.
Ask about:
Summarize choices:
┌─────────────────────────────────────────┐
│ Page: [concept] │
│ Styles: [selections] │
│ Palette: [name] │
│ Fonts: [heading + body] │
│ Sections: [list] │
│ Tone: [description] │
└─────────────────────────────────────────┘
After confirmation, generate the complete HTML.
Generate the full HTML in a single pass. Claude's strength is maintaining coherence across long outputs — leverage this by establishing the design system (Tailwind config, CSS variables, keyframe animations) in the <head> first, then building sections that reference those tokens consistently.
Mental model for generation:
<head>: Tailwind config with ALL semantic color tokens, font families, custom shadows, and all <style> rules (keyframes, grain overlays, hover effects, scroll animation classes)<body> sections top-to-bottom, each section using the tokens from step 1<script> with IntersectionObserver and interaction handlersThis top-down approach plays to Claude's sequential coherence — tokens defined early get used consistently throughout.
<!DOCTYPE html>
<html lang="[user-language]">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Page Title]</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=[fonts]&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: { /* ALL palette colors as semantic tokens */ },
fontFamily: { /* heading, body, mono */ },
boxShadow: { /* custom shadows matching style */ }
}
}
}
</script>
<style>
/* Keyframe animations, grain/noise overlay, hover effects, scroll animation classes */
</style>
</head>
Every generated page MUST include all of the following:
Structure:
<nav>, <main>, <section>, <footer>sm:, md:, lg: breakpointsDesign System:
shadow-lg)Interactivity:
html { scroll-behavior: smooth }Accessibility:
aria-label on buttons, nav links, decorative SVGs (aria-hidden="true")Visual Richness:
Before outputting the final HTML, mentally verify:
A well-designed page should: