🧩 What is theme-factory
A toolkit for styling artifacts with a theme. It works with slides, docs, reports, and HTML landing pages — applying a consistent visual identity: a color palette + selected font pairings.
theme-factory understands that aesthetics matter as much as content. It offers 10 predefined themes with carefully chosen color and font combinations—each with a distinct visual identity—and lets you generate a completely new theme by describing what you want.
Each theme lives in a specification file in the directory themes/, with a complete hex palette and complementary font pairs.
- ✓ Theme application skill: colors + fonts + identity
- ✓ 10 predefined themes with PDF showcases
- ✓ On-the-fly custom theme generation from a description
- ✓ Works with any artifact: slides, docs, HTML, reports
- ✗ Doesn't create the artifact itself — it only styles it
- ✗ Not a complete design system with components
- ✗ Doesn't replace brand-guidelines for a specific brand
- ✗ Doesn't automate image or icon generation
🎣 When Claude triggers theme-factory
The skill is triggered when the request involves styling or theming an existing or new artifact with cohesive colors and fonts.
The skill description is: "Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly." Claude interprets requests to "apply a theme," "make it look better," "use a palette," or "style it" as direct triggers.
"Apply the Ocean Depths theme to this slide", "I want an elegant dark look", "use the Tech Innovation theme"
"Make this report look more professional", "improve the look of this landing page", "it needs a visual identity"
"Create a theme with wine tones and elegant typography", "I want a modern forest theme for my startup"
Existing slides or docs that the user wants to visually standardize before presenting
If the product/subject mentions a specific brand with a defined visual identity (logo, institutional colors, proprietary font), the brand-guidelines skill is more suitable. theme-factory is for when any beautiful theme will do — without brand restrictions.
🚀 How it improves your artifacts
Visual coherence turns good content into a memorable presentation. theme-factory delivers that without requiring you to be a designer.
- • Browser default colors (blue links, black text)
- • Generic font (Arial, sans-serif)
- • Inconsistency between sections
- • Looks like a draft, not a product
- • Cohesive ocean-inspired palette from title to footer
- • Harmonious type pairing selected
- • Each element has an intentional color
- • Looks like a finished, presentable product
The skill references a theme-showcase.pdf with all 10 themes visualized. Ask Claude to show the showcase before choosing — that way, you can decide based on actual visual references, not just the name.
⚙️ How it works under the hood
The theme application process follows defined steps: selection → reading the specification file → consistent application throughout the artifact.
Claude presents the options, or the user names one directly. If none of the 10 fit, it proceeds with custom creation.
themes/<nome>Each theme has a spec file in the directory themes/ with a complete hex palette and font pair. Claude reads this file before applying it.
Colors and fonts are applied consistently — backgrounds, text, borders, buttons, and highlights. Contrast and readability are maintained.
The theme propagates across all elements to create a unified visual experience from beginning to end.
When none of the 10 themes fit, Claude generates a new theme based on the user’s inputs. The theme gets a descriptive name, is shown for review/approval, and then applied. The process mirrors the existing themes in structure.
💬 Practical example + ready-to-use prompts
Real-world theme-factory use cases, with prompts you can copy and paste directly into Claude Code.
Whenever you request a custom theme, Claude will show it to you for approval before applying it. This avoids rework — you validate the colors and fonts in draft mode, then move on to the complete artifact.
- ✓ Name the theme directly ("Ocean Depths")
- ✓ Describe the mood ("elegant dark", "organic natural")
- ✓ Mention the artifact context ("sales slides")
- ✓ Request a review before final application
- ✗ Request a theme without having an artifact to apply it to
- ✗ Mix two topics at the same time in the same artifact
- ✗ Use theme-factory for logos or icons (that's outside its scope)
- ✗ Skip reviewing the custom theme before applying it
🧬 Works well with / limitations
theme-factory shines when combined with other skills—especially brand-guidelines and frontend-design—and has clear limits when the visual identity is already prescribed.
O theme-factory is great when any beautiful theme will do. The brand-guidelines comes in when you have a specific brand with defined institutional colors and fonts — proprietary logo, visual identity guide, usage rules. Use theme-factory for prototypes and internal materials; brand-guidelines when the output is for clients or officially represents the brand.
theme-factory defines the palette and fonts. The frontend-design implements this system in React/Tailwind/shadcn components — buttons, cards, headers, forms. Together, they cover everything from visuals to code: theme → design system → production components.
After defining a theme, canvas-design uses the same colors and fonts to create artistic compositions—banners, thumbnails, covers. Visual consistency extends beyond documents.
-
✗
Brand with prescribed identity: if the company already has brand guidelines with defined hex codes, use brand-guidelines directly — there’s no point in choosing one of the 10 themes.
-
✗
Artifact with the correct theme already applied: if the document is already styled and consistent, applying another theme will override intentional choices.
-
✗
Need for animation or motion design: for that, animation-designer or remotion are the right skills.
📋 Module 2.1 Summary
- ✓ theme-factory is a toolkit for styling slides, docs, reports, and HTML landing pages
- ✓ 10 predefined themes: Ocean Depths, Midnight Galaxy, Tech Innovation, and 7 more
- ✓ Each theme defines a hex palette + font pair in a file in the directory
themes/ - ✓ Custom themes generated on the fly from a description + reviewed before application
- ✓ Use brand-guidelines when you have a specific brand with a prescribed identity
- ✓ Works with frontend-design (implementation) and canvas-design (compositions)