Theme Factory: Build Complete Design Systems in Minutes, Not Weeks
Summary
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.
Pros
- 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
- No design experience needed—Claude applies color theory and accessibility standards
- Iterate with words: "make it warmer" beats pixel-pushing in Figma
Cons
- 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 Theme Factory Skill
Install the Skill
Download the skill file directly, or install via the plugin marketplace. Skills auto-activate when relevant—no manual invocation needed.
curl -o .claude/skills/theme-factory.md https://raw.githubusercontent.com/anthropics/skills/main/skills/theme-factory/SKILL.md/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skillsDescribe Your Brand
Tell Claude about your product, audience, and the feeling you want. Specific beats vague—"enterprise legal tech, trustworthy but not boring" works better than "professional."
Generate a theme system for a health and wellness app. Target audience is 30-45 year old professionals. Feel: calm, trustworthy, premium. Primary brand color is #2D7D6F.Pick Your Format
CSS custom properties, Tailwind config, styled-components, or raw JSON. Tell Claude your tech stack and get tokens in the format you actually use.
Output as a Tailwind config extending the default theme. Include dark mode variants using the class strategy.Review the System
Claude generates the full system. Check light and dark modes, component examples, and accessibility contrast. Ask for adjustments—more muted, warmer, bolder.
The greens feel too saturated for dark mode. Tone them down. Also, the heading scale jumps too much between h2 and h3.Export and Integrate
Copy the theme into your project. Claude can also generate migration instructions if you're replacing an existing theme system.
Show me how to integrate this with my existing Next.js app that uses Tailwind. I have some custom colors I need to keep.Example Prompts
Real-world scenarios showing how to use Theme Factory effectively
Your Prompt
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.
Expected Outcome
Claude generates 4 distinct theme directions (e.g., "Corporate Trust", "Modern Minimal", "Data Forward", "Accessible Warm") with color swatches and descriptions so you can choose before generating the full system.
Your Prompt
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.
Expected Outcome
A complete theme with semantic color names (--color-primary, --color-surface, etc.), responsive typography, consistent spacing, and button styles for primary, secondary, and ghost variants.
Your Prompt
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.
Expected Outcome
A dark mode palette with adjusted colors that maintain WCAG contrast ratios, plus a clear mapping showing which light colors map to which dark values.
Your Prompt
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.
Expected Outcome
A theme system that captures the essence of Linear's aesthetic (dark surfaces, accent colors, subtle gradients) without being a direct copy, adapted for project management use cases.
Your Prompt
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.
Expected Outcome
A structured JSON file with three token levels that can be imported into Figma Tokens, Style Dictionary, or similar tools.
Frequently Asked Questions
Master Theme Factory and 70+ More Skills
Join our AI Essentials Bootcamp and learn hands-on in just 5 hours.
Enroll Now