Frontend Design
Use Claude Code to create production-ready interfaces that look professional, not AI-generated. React, Tailwind, and clean design automatically.
Theme Factory
Use Claude Code to generate complete theme systems, dark mode, and design tokens in minutes. Consistent colors and typography automatically.
By Anthropic
Official skill
About
Your app looks different on every page. Three shades of blue that don't quite match. A dark mode that's just "invert colors" and burns people's eyes at 2am. Design tokens scattered across six files that nobody maintains. Instead, describe your brand. Claude generates a complete, consistent theme system—light mode, dark mode, semantic tokens, and component variants—all wired up and ready to use.
Stop stitching together colors by eye. Start with a complete design system. Generates Full Theme Systems Describe your brand personality—"professional fintech" or "playful consumer app"—and get a complete color palette, typography scale, spacing system, and component variants that work together. Dark Mode That Actually Works Not inverted colors. Not "just make it gray." Proper dark mode with adjusted contrast ratios, softer shadows, and colors that don't strain eyes at night. Design Tokens Ready for Code CSS variables, Tailwind config, or styled-components theme object. Pick your format. Copy, paste, ship.
Best for
- · Generate complete theme systems in 10 minutes instead of 2 weeks of design iteration
- · Get dark mode that actually works—not inverted colors that strain eyes
- · Maintain consistency across your entire app with semantic tokens
- · Export in your format: CSS variables, Tailwind, styled-components, or JSON
Not for
- · Generated themes are starting points—unique brand identities benefit from designer refinement
- · Complex component libraries may need additional token customization beyond what's generated
- · Very specific brand guidelines (exact Pantone matches, etc.) should be provided upfront for best results
How to use
- 1Install the SkillDownload the skill file directly, or install via the plugin marketplace. Skills auto-activate when relevant—no manual invocation needed.
- 2Describe Your BrandTell Claude about your product, audience, and the feeling you want. Specific beats vague—"enterprise legal tech, trustworthy but not boring" works better than "professional."
- 3Pick Your FormatCSS custom properties, Tailwind config, styled-components, or raw JSON. Tell Claude your tech stack and get tokens in the format you actually use.
- 4Review the SystemClaude generates the full system. Check light and dark modes, component examples, and accessibility contrast. Ask for adjustments—more muted, warmer, bolder.
Source
@anthropics on GitHubhttps://github.com/anthropics/skills/tree/main/skills/theme-factory
Someone else wrote this — read the source, verify it does what it says, and never share a password or API key with it.
Example prompts
Exploring theme directions before committing
Before building the full theme, show me 4 different directions for a B2B analytics dashboard. Give each a name, show the primary/secondary colors, and describe the vibe. I want to pick before we go deep.
Building a complete theme from scratch
Create a theme system for an e-commerce fashion brand. Young, trendy, Instagram-aesthetic. Primary color #FF6B6B. I need: color palette (8-10 colors), typography scale, spacing system, button variants, and both light and dark modes. Output as CSS custom properties.
Adding dark mode to an existing app
My app uses these colors: primary #3B82F6, secondary #10B981, background #FFFFFF, text #1F2937. Generate a proper dark mode that maintains contrast ratios and doesn't just invert. Show me the mapping.
Matching a competitor or inspiration
I love Linear's design system—that sophisticated dark-first look with purple accents. Generate a theme inspired by it but for a project management tool. Don't copy, but capture that premium developer-tool feel.
Generating design tokens for a design system
Generate design tokens for our company design system. We need: primitive tokens (raw color values), semantic tokens (color-background-primary, etc.), and component tokens (button-primary-background). Output as JSON for our Figma tokens plugin.
Comments
No comments yet — be the first.
More like this
Visual Design
Use Claude Code to create social media graphics, icons, diagrams, and illustrations. Describe what you want, get PNG or SVG instantly.
Algorithmic Art
Create generative art, geometric patterns, and procedural visuals with Claude Code. Describe your vision, get production-ready SVG or canvas code.