applying-visual-identity
Ensures visual consistency by applying branding tokens from DESIGN.md.
Install
mkdir -p .claude/skills/applying-visual-identity && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/12341" && unzip -o skill.zip -d .claude/skills/applying-visual-identity && rm skill.zipInstalls to .claude/skills/applying-visual-identity
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use when the user wants output to follow a company's brand / visual identity, or asks to set one up — "use our brand", "make it on-brand", "here's our identity", "create a DESIGN.md". Reads and applies a DESIGN.md (Google Labs open spec): brand tokens for colors, typography, spacing, radius, shadows, and components, so decks, sites, and docs come out consistently on-brand. Scaffolds a DESIGN.md when none exists.Key capabilities
- →Locate and parse `DESIGN.md` for design tokens
- →Apply design tokens to target mediums like HTML/CSS and Markdown
- →Resolve token references within output
- →Scaffold a `DESIGN.md` file if none exists
- →Ensure brand consistency across different outputs
How it works
The skill reads design tokens from a `DESIGN.md` file, maps them to the target output format, and applies them to ensure visual consistency. If no `DESIGN.md` is found, it can scaffold one.
Inputs & outputs
When to use applying-visual-identity
- →Apply brand styles to docs
- →Ensure design consistency
- →Scaffold new design system
About this skill
Skill: applying-visual-identity
A company's visual identity lives in a DESIGN.md at the project root — the open
spec from Google Labs (Apache-2.0, 2026). It pairs machine-readable design tokens (YAML
frontmatter) with human-readable rationale (prose), so any AI tool renders the brand the same
way across sessions. This skill reads that file and applies it; if none exists, it scaffolds one.
Workflow
- Locate. Look for
DESIGN.mdin the project root. If found, parse the frontmatter tokens — they are the normative values; the prose is guidance. - Apply. Map tokens to the target medium:
- HTML/reveal.js/Marp → CSS custom properties on
:root(--brand-primary,--font-heading, …). - Markdown/docs → headings, callouts, accent usage per the Do's/Don'ts.
- Resolve token references like
{colors.primary}before output.
- HTML/reveal.js/Marp → CSS custom properties on
- Stay in-spec. Use only defined tokens; don't introduce off-palette colors or fonts. If a needed token is missing, ask or pick the closest defined one and note it.
- Scaffold when absent. If there's no
DESIGN.md, offer to create one fromtemplates/DESIGN.md— ask for (or extract from a provided logo/site) the primary color, font, and tone. Never silently invent a brand; fall back to a neutral theme until confirmed.
The DESIGN.md format (Google Labs spec)
YAML frontmatter holds the tokens; the body documents intent in fixed sections.
Frontmatter token groups: colors, typography (objects: fontFamily, fontSize,
fontWeight, lineHeight, letterSpacing), spacing, rounded, shadows, components
(per-component token refs). Colors accept hex / rgb / hsl / oklch(). Dimensions carry units
(px, rem). References use braces: {colors.primary}, {typography.h1}.
Body sections (in order): Overview · Colors · Typography · Layout & Spacing · Elevation & Depth · Shapes · Components · Do's and Don'ts.
See templates/DESIGN.md for a complete, fillable example.
Rules
- Tokens are normative — match them exactly; the prose only explains why.
- Keep
DESIGN.mdin the project root so every tool and agent finds it. - One source of truth: when the brand changes, edit
DESIGN.md, not individual decks. - This skill defines the look;
building-html-presentationsdefines the structure.
When not to use it
- →When introducing off-palette colors or fonts
- →When silently inventing a brand identity
- →When `DESIGN.md` is not intended to be the single source of truth
Limitations
- →It only uses defined tokens and does not introduce off-palette elements
- →It requires `DESIGN.md` to be in the project root
- →It does not silently invent a brand identity
How it compares
This skill uses a specific `DESIGN.md` format for machine-readable design tokens to enforce brand consistency across various outputs, unlike manually applying styles.
Compared to similar skills
applying-visual-identity side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| applying-visual-identity (this skill) | 0 | 1mo | No flags | Intermediate |
| theme-factory | 61 | 3mo | No flags | Beginner |
| brand-guidelines | 9 | 3mo | No flags | Beginner |
| canvas-design | 26 | 3mo | No flags | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
theme-factory
anthropics
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.
brand-guidelines
anthropics
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
canvas-design
anthropics
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
game-art
davila7
Game art principles. Visual style selection, asset pipeline, animation workflow.
interactive-portfolio
davila7
Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio, personal website, showcase work, developer portfolio, designer portfolio.
windows-3-1-web-designer
erichowens
Expert in authentic Windows 3.1 aesthetic for modern web applications. Creates pixel-perfect retro UI with beveled borders, system gray palettes, and program manager styling. Use for retro-themed web apps, 90s desktop aesthetics, nostalgic landing pages, pixel-art adjacent experiences. Activate on "windows 3.1", "retro ui", "beveled borders", "win31", "program manager", "90s aesthetic", "pixel art", "hotdog stand". NOT for vaporwave aesthetics (neon gradients, glowing text), glassmorphism, macOS/iOS styling, flat design, material design.