More than 50 named design styles for Claude. Add it to a project, name a style, and Claude builds a landing page, UI, or frontend in that style. A short CLAUDE.md lists every style and points Claude to its file in spec/, one file per style. Claude reads only the style you name (fonts, colors, shadows, layout, components, animations) and writes a single HTML page. Each style sits in its own file, so a normal session loads just the short list (about 70 lines), not the whole catalog (about 4,600 lines).
claude-design-styles/
├── CLAUDE.md # Short list of styles, and how to find each style file
└── spec/
├── bento.md # one file per style
├── clay.md
├── sci-fi-hud.md
└── … # 53 styles total
To find a style's file: take the style name, make it lowercase, swap spaces for hyphens, and drop the word "style". So sci-fi hud style becomes spec/sci-fi-hud.md.
- Copy both
CLAUDE.mdand thespec/folder into your project, or point Claude at this repo through Claude Projects.CLAUDE.mdneedsspec/; on its own it has nothing to load. - Ask Claude to build something and name the style you want.
Describe your product in the prompt: its name, what it does, the main features, and the button text.
Read CLAUDE.md and build a landing page using bento style.
Product: Pinpoint
A time-tracking app for freelancers. Automatically tracks time across apps
and projects, generates invoices, and syncs with Stripe.
Features:
- Automatic time tracking across Mac apps
- Project and client tagging
- One-click invoice generation
- Stripe integration for payments
- Weekly summary reports
CTA: "Start Free Trial"
Read CLAUDE.md and build a landing page using dark cosmic style.
Keep all copy minimal and direct. Don't over-explain features.
Product: Beacon
An uptime monitoring service for developers. Pings your endpoints every
60 seconds and alerts you via Slack, email, or PagerDuty the moment
something goes down.
Features:
- 60-second check intervals
- Multi-region monitoring
- Slack, email, and PagerDuty alerts
- Status page builder
- 90-day response time history
CTA: "Monitor Free for 14 Days"
Point Claude at your existing README.md and it will pull the product name, features, and copy for you:
Read CLAUDE.md and README.md.
Build a landing page using neobrutalist style based on the features and
descriptions in README.md. Keep copy tight: headline, subheadline,
feature grid, and a single CTA.
Claude reads the product name, feature list, and description from your README and builds the page around them. You don't have to write the copy.
Give Claude an existing HTML file and it will rebuild it in a new style, keeping your content and structure:
Read CLAUDE.md and landingpage.html.
Rebuild the landing page using dark cinema style. Keep all existing
sections, copy, and CTAs. Only change the visual design.
Claude reads your current page, pulls out every section and block of content, and rebuilds it in the style you named. Handy for trying different looks without rewriting any copy.
That's it. Claude does the rest: typography, colors, layout grid, components, and interactions, all matching the style you named.
- 🍎 Bento Style: Apple/macOS-inspired bento grid, clean and minimal
- 🌿 Soft Modern Style: White bg, blurred orb accents, rounded, friendly and accessible
- ❄️ Scandinavian Style: Cold whites, extreme negative space, hygge minimalism, quiet luxury
- 🏢 Corporate Style: Conservative trust blues, structured grid, buttoned-up B2B professionalism
- 📐 Swiss Style: Helvetica-inspired, rigid typographic grid, black/red only, zero decoration
- 🌌 Dark Cosmic Style: Dark slate, glowing indigo/cyan, radial dot grid, glassmorphism
- 🎬 Dark Action Style: Dark gradient bg, yellow/gold accents, Oswald font, cinematic energy
- 🚀 Dark SaaS Style: Slate-950, sky blue accent, stagger animations, clean SaaS
- 🎭 Dark Cinema Style: Near-black, red glow, Bebas Neue, noise overlay, floating labels
- 💾 Dark Mono Style: Dark zinc surfaces, cyan + pink accents, monospace, scanline texture
- 🌠 Dark Neon Style: Black background, multiple vivid neon glow colors, bleed and bloom effects
- 🌌 Vaporwave Style: Purple/teal gradients, retro grid floors, synthwave glow and glitch effects
- ⬛ Pure Brutalist Style: Monochrome black/white, hard shadows, monospace, no color
- ⚡ Neobrutalist Style: Hard black shadows with vivid neon color accents
- ☢️ Acid Brutalist Style: Pure black, acid yellow + red, Anton/Bebas fonts, noise grain
- 🔧 Utility Terminal Style: White bg, strict 1px borders, monospace, no rounding, grid texture
- 🏗️ Monolith Style: White bg, dark navy shadows, thick top border accent, monospace brutalism
- 📺 Retro Terminal Style: Green-on-black CRT monitor aesthetic with phosphor glow effects
- 🕹️ Pixel Style: 8-bit pixelated fonts, game UI, sprite aesthetic, retro game feel
- 🖥️ Y2K Style: Windows 95 beveled gray UI, system fonts, chunky pixel buttons, early internet
- 🌊 Groovy Style: Warm oranges/browns, 70s swirls, rounded retro lettering, psychedelic curves
- 🎨 Memphis Style: 80s/90s geometric shapes, bright pastels, squiggles and confetti
- 🌴 Tropical Style: Coral, turquoise, warm vacation energy, Miami/resort vibes
- 🎪 Pop Art Style: Cyan/pink/yellow on loud background, floating bordered container
- 🍭 Kawaii Style: Super cute pastel, bubble rounded, character illustration accents
- 💥 Manga Style: Speed lines, bold ink outlines, dramatic panel layouts, high contrast
- 🌈 Psychedelic Style: Acid swirls, melting text, rainbow overflow, mind-bending distortion
- 🗞️ Zine Style: Photocopied DIY aesthetic, cut-and-paste collage, raw indie energy
- 🔆 Aurora Style: Flowing multi-color gradient backgrounds, silk light effect, soft and dreamy
- 👑 Luxury Style: Cream/off-white, serif display font, gold accents, generous whitespace
- 🌸 Art Deco Style: Geometric gold ornaments, symmetry, 1920s glamour and opulence
- 🌺 Cottagecore Style: Floral patterns, watercolor washes, storybook softness and whimsy
- 🌙 Gothic Style: Dark greens/blacks, ornate serif, candle-wax drips, moody atmosphere
- ✒️ Japanese Style: Wabi-sabi imperfection, ink brush strokes, kanji-inspired negative space
- 🔷 Blueprint Style: Deep blueprint blue, white grid lines, Courier Prime, technical drawing aesthetic
- 🔴 Dot Grid Style: Gray dotted background, Archivo Black + Space Mono, hot pink accent, hard shadows
- 🟣 Pink Neo Style: Hot pink dotted background, Archivo Black + Space Mono, pink/yellow/blue palette
- 📊 Dashboard Style: Chart-forward, dense metrics, sidebar navigation, admin/analytics feel
- 🤖 Sci-Fi HUD Style: Heads-up display, corner brackets, data readouts, radar and targeting UI
⚠️ Cyberpunk Style: Yellow/black warning stripes, HUD overlays, neon on dark, danger aesthetics
- 💎 Glassmorphism Style: Frosted glass cards on gradient mesh backgrounds, soft blurs and translucency
- 🏛️ Neumorphism Style: Soft same-color shadows creating pushed/extruded soft UI on light gray
- 📦 Clay Style: Clay morphism, chunky rounded cards with physical depth
- 🖨️ Newspaper Style: Black ink on newsprint, serif fonts, editorial column layouts
- 📖 Longform Style: Full-bleed hero images, pull quotes, drop caps, rich magazine editorial flow
- 🎵 Skeuomorphic Style: Realistic material textures, depth and shadows mimicking physical objects
- 🌸 Organic Style: Earthy tones, rounded organic shapes, warm and natural hand-crafted feel
- ✍️ Handwritten Style: Hand-drawn borders, pencil textures, imperfect sketch-like lines
- 🏆 Athletic Style: Diagonal cuts, bold color blocks, high-impact sport energy
- 🌍 Grunge Style: Worn textures, splatter marks, distressed rough torn edges
- 🔮 Isometric Style: 3D isometric grid illustrations, flat-color depth and layered objects
- 🎭 Maximalist Style: Everything layered, dense pattern-on-pattern, opulent visual chaos
- 🔣 Enterprise Editorial Style: White/dark alternating sections, indigo, large rounded app cards
Each style file (spec/<style>.md) covers:
- 🔤 Typography: font families, weights, sizes, letter spacing
- 🎨 Color palette: every color value, set as CSS variables
- 🪞 Shadows: the named shadow levels used across components
- 🃏 Cards: background, border, and hover states
- 🔘 Buttons: primary, secondary, ghost, and pressed states
- 📐 Layout: grid structures, hero layouts, section flows
- 🧩 Components: pills, badges, stat cards, nav, marquee, footer
- ✨ Animations: transitions, keyframes, and scroll effects where used
- ⚙️ Setup notes: CDN links, font imports, and any special CSS
Claude writes a single self-contained HTML file with:
- Inline CSS (no separate stylesheet)
- Tailwind CSS from a CDN
- Google Fonts from a CDN
- Font Awesome 6 from a CDN
- Plain JavaScript for any interactions
No build step. Open the file in a browser and it works.
Every style has a demo page you can open right now. No build step, no dependencies.
All 53 rendered pages are in the results/ folder. Open any file in your browser.
Full-page screenshots of every style are in the screenshots/ folder, so you can compare looks without opening each file.
