🎨 Identity & Themes

theme-factory is a skill that maintains 10 predefined visual themes (each with a color palette and font pair) ready to apply to any presentation artifact or HTML interface.

Instead of choosing colors and fonts from scratch for every new slide or page, you choose a theme and Claude applies everything consistently and professionally.

Presets, color palette, typography pair, visual consistency.

The skill is triggered when the user asks to apply a theme, change a deck’s look, or mentions "theme-factory," "theme," "palette," "colors and fonts" in the context of an artifact.

Knowing the triggers helps you phrase requests that activate the right skill at the right time, without having to invoke it manually.

Description as a trigger, key phrases, automatic invocation.

Each of the 10 presets lives in a dedicated file in the folder themes/ and defines exact hex colors, fonts for headings and body text, and a distinct visual identity for different contexts (corporate, creative, minimalist, etc.).

Choosing the right theme before generating the artifact saves rework — each preset is designed for a specific audience or context.

Named presets, themes/ folder, identity by context.

In addition to the presets, you can describe the desired identity in natural language ("I want something dark with purple tones and serif typography"), and the skill generates a cohesive theme from scratch.

Makes it possible to create unique visual identities without needing to know how to choose fonts or build color palettes by hand.

Theme generation, natural language, on-demand palette.

Claude reads the file for the chosen theme, extracts the specified colors and fonts, and consistently replaces all color and typography points in the artifact — maintaining contrast and readability.

Understanding the process helps you create artifacts that benefit from the theme (use CSS variables or named classes, not scattered hardcoded values).

Consistent replacements, contrast, readability.

theme-factory is the style layer applied on top of any artifact generated by another skill — frontend-design, web-artifacts-builder, canvas-design — giving the final result a visually unified look.

Knowing that it’s a "final styling step" helps you plan the workflow: create the content first, then apply the theme.

Style layer, composition, final step.

A skill that encapsulates Anthropic's visual identity guidelines: official color palette, corporate typography (Poppins for UI, Lora for long-form reading), and rules for applying accents and shapes.

Lets you generate any artifact in the brand’s visual style without checking the guidelines every time or getting the exact colors wrong.

Brand manual, official palette, corporate typography.

The skill is triggered when someone asks to apply "brand guidelines," "Anthropic identity," "brand look and feel," or when the context involves official documents, corporate presentations, or institutional artifacts.

Distinguishing when to use brand-guidelines (specific brand) versus theme-factory (generic theme) helps avoid applying the wrong look to the wrong context.

Institutional context, brand triggers, specificity.

The palette includes dark neutral tones for backgrounds, coral/terracotta as the primary accent, and whites for text. Typography: Poppins (headings and UI) and Lora (long-form body text)—loaded via Google Fonts when needed.

Knowing the system lets you create artifacts that genuinely look Anthropic — not just "similar".

Poppins, Lora, Anthropic palette, color accent.

The skill automatically applies the right font for each element type: Poppins for headings, buttons, and UI labels; Lora for long-form reading paragraphs. It's not a blind substitution—it's context-aware for each tag.

Manually mixing sources is where most amateur designs fail. The skill gets it right by default.

Typographic hierarchy, UI font vs. reading font, contextual implementation.

Beyond colors and fonts, the skill guides the use of geometric shapes and visual accents that make up Anthropic’s style—subtle borders, soft gradient backgrounds, icons aligned with the system.

The details are what elevate an artifact from "well-formatted" to "genuinely on-brand".

Shapes, accents, subtle gradients, visual completeness.

brand-guidelines applies a specific, fixed identity (Anthropic's). theme-factory applies any of 10 neutral themes or one generated on demand. Use brand-guidelines for institutional context; theme-factory for creative freedom.

Confusing the two results in a "generic" artifact when you wanted a "corporate" one — or the reverse.

Specific vs. generic identity, usage context, intentional choice.

A skill that creates original visual art pieces — posters, thumbnails, banners, campaign assets — using a "design philosophy" methodology that goes from concept to renderable HTML/CSS execution.

Unlike generating an image from a text prompt, canvas-design produces HTML/CSS that can be adjusted, exported, and reproduced with consistent quality.

Static art, visual philosophy, exportable HTML/CSS.

The skill is triggered when the user asks "create a poster," "make a graphic piece," "design a banner," or mentions canvas-design. It also triggers for requests for "visual art" with fixed dimensions.

Knowing the triggers helps you avoid using the skill when editing an existing template would be enough — it’s best for original creation.

Original creation, art requests, fixed dimensions.

Before writing a single line of CSS, the skill generates a "design philosophy": the visual essence of what will be created, the implicit reference inferred from the request, and the chosen color and typography system. The brain before the hands.

This conceptualization step is what distinguishes art with intention from random layouts — and it can be refined before execution.

Visual philosophy, implicit reference, concept before code.

The canvas is generated as HTML/CSS with exact pixel dimensions. The skill uses absolutely positioned elements, color layers, and precise typography to compose the piece. To export as .png or .pdf, the HTML artifact is converted via browser.

Understanding the HTML/CSS format lets you manually edit any element before exporting — full control.

Absolute positioning, layers, browser-based export.

The skill supports creating multiple pieces connected by the same visual philosophy—for example, a main poster + Stories version + horizontal banner—while maintaining a cohesive identity across all formats.

Visual campaigns need multiple formats. The skill does this without recreating the concept from scratch for each asset.

Multiple formats, cohesive identity, reuse of the philosophy.

canvas-design creates one-off static pieces with deliberate compositional intent. algorithmic-art creates generative art in a loop, great for backgrounds and animations, but without the same control over static composition.

The two skills complement each other: canvas-design for the poster, algorithmic-art for the animated background behind it.

Static vs. generative, composition vs. system, complementarity.

A skill that creates visual art using algorithms and p5.js — the output isn't a static image, but a system that generates different visuals on each run (or reproducibly with the same seed). Includes flow fields, particles, noise, and generative geometry.

Generative art produces infinite variations on the same visual idea — perfect for backgrounds, heroes, and pieces where a static image would feel rigid.

p5.js, generative system, infinite variations.

The skill triggers when the user mentions "generative art," "p5.js," "flow field," "animated background," "page background," "particles," "noise field," or asks for something "that generates variations." It also responds to explicit requests for "algorithmic art."

Vague requests like "cool background" don’t trigger the skill — being specific about the type of visual ensures the right tool kicks in.

Precise triggers, generative art, p5.js named.

Every algorithm uses randomSeed(seed) e noiseSeed(seed) to make the result reproducible: given the same seed number, the generated visuals are identical. Inspired by the Art Blocks generative NFT pattern.

Reproducibility lets you iterate: find a nice variation, note the seed, and it will always come back. Without a seed, the artwork would be impossible to recover.

randomSeed, noiseSeed, Art Blocks pattern, reproducibility.

The generated artifact includes a sidebar with interactive controls: sliders for numeric parameters (quantity, scale, speed), optional color pickers, Prev/Next/Random navigation for seeds, and Regenerate, Reset, Download PNG buttons.

The controls transform the art from "generated once" to "interactively explored" — you can find the perfect variation without reopening Claude.

Sliders, seed navigation, Download PNG, self-contained artifact.

Just as canvas-design uses a "design philosophy," algorithmic-art defines an "algorithmic philosophy" before coding: What is the essence of the system? Organic? Mathematical? Controlled chaos? The algorithm flows from the philosophy, not from a menu of patterns.

Without a clear philosophy, the result is random noise with no personality. The philosophy is what gives the art character.

Algorithmic philosophy, visual character, intentional system.

algorithmic-art is ideal as a landing page hero section background, an animated slide background, or featured portfolio art. The p5.js canvas can be embedded as an HTML element and controlled with CSS to sit behind the content.

Knowing where to fit generative art into a real page is the step from creation to application — and that’s where the end user sees its visual value.

Hero background, embedded canvas, z-index, implementation on a real page.