Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
appautomaton avatar

Brand System

appautomaton/presentation

  • 9 installs
  • 53 repo stars
  • Updated July 9, 2026
  • appautomaton/presentation

brand-system is a Claude skill that creates a visual identity system (palette, typography, style direction) as a brand brief, JS config, and preview PDF.

About

This skill creates a visual identity system consisting of a color palette, font pairings, and style direction. A developer or consultant uses it before building a deck, presentation, or document that needs a unified visual language. It produces three artifacts: a markdown brand brief with rationale, a machine-readable identity.js config for downstream build scripts, and a three-slide preview PDF proving the palette, typography, and a combination demo.

  • Creates a visual identity system: palette, typography, style direction
  • Outputs a markdown brand brief, a JS config, and a preview PDF
  • Uses an 8-role color palette and a pairing lookup for typography

Brand System by the numbers

  • 9 all-time installs (skills.sh)
  • Ranked #1,469 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
  • Data as of Jul 28, 2026 (Skillselion catalog sync)
At a glance

brand-system capabilities & compatibility

Capabilities
branding · ui design · design system
Use cases
ui design · web design · presentations
From the docs

What brand-system says it does

Eight roles. One accent + three signals. Every color traces to a reason.
SKILL.md
npx skills add https://github.com/appautomaton/presentation --skill brand-system

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs9
repo stars★ 53
Last updatedJuly 9, 2026
Repositoryappautomaton/presentation ↗

What it does

Produce a color palette, font pairing, and style direction as a brand brief, JS config, and preview PDF before building a deck.

Who is it for?

Establishing a cohesive design system before building a deck, presentation, or document.

Skip if: Producing finished slides or laying out every page, which downstream skills handle.

When should I use this skill?

You need a unified palette, typography, and style direction before a visual project.

What you get

A brand brief, identity.js config, and preview PDF define the palette, fonts, and style direction.

  • brand-brief.md
  • identity.js config
  • brand-preview.pdf

By the numbers

  • 8-role color palette structure
  • 3-slide preview PDF
  • 6 active design directions in the design landscape

Files

SKILL.mdMarkdownGitHub ↗

Brand System

Create a visual identity system: palette, typography, and style direction — documented in a markdown brief, extracted into a JS config, and rendered as a preview PDF.

Artifacts

All output goes to the user's working directory. Ask for the path if not provided.

FileWhat it is
brand-brief.mdThe primary artifact. Research, rationale, and every design decision in one readable document.
identity.jsA machine-readable extraction of the brief. Importable by downstream build scripts.
brand-preview.pdfA 3-slide rendered proof: palette, typography, and a combination demo.

Intermediate HTML goes to /tmp/brand-system/ and is cleaned up after rendering.

Reference files

Load these on demand — not all are needed for every engagement.

FileWhen to load
references/palette-guide.mdWhen building the color palette — 8-role structure, derivation from anchor color, contrast testing
references/typography-guide.mdWhen selecting fonts — pairing lookup table, weight discipline, same-vs-different family guidance
references/design-landscape.mdWhen proposing a visual style — 6 active design directions with full specifications (2025-2026)

---

How to work

This is a conversational design process. The brief is built through dialogue — research, propose, refine.

1. Start from what you know

Read the user's request. Most of the direction is already implied — the subject, the context, the tone. Don't ask questions the request already answers.

If genuine ambiguity remains, ask the one or two questions that would most change your direction. Good questions resolve a fork in the road.

Worth asking (only if truly unclear):

  • "Should this feel institutional and restrained, or is there room for something more contemporary?"
  • "Is there an existing brand I should align with, or are we starting fresh?"

Decide yourself (don't ask the user):

  • What colors to use — research the brand and propose
  • What font to use — match the context and recommend
  • How many palette roles — the structure is defined, follow it

2. Research

Before choosing colors or fonts, look at what exists.

Known brand → search for their actual colors, typeface, and visual direction. Extract the primary brand color, the typeface family, and the tone.

New project → search for what works in the space — peer palettes, industry conventions, tone-appropriate examples.

3. Build the palette

Load references/palette-guide.md for the full role structure and derivation rules.

The palette grows from an anchor color:

  • User provides one → build around it
  • Known brand → extract from research
  • Fresh → choose based on tone and context

Eight roles. One accent + three signals. Every color traces to a reason.

4. Choose typography

Load references/typography-guide.md for the pairing lookup table and rules.

Find the Google Font that echoes the subject's typographic character. One family for both heading and body is the default — a second family must earn its place.

5. Propose a style direction

Load references/design-landscape.md for the full catalog of six active design directions.

The style defines shape language, surface treatment, and compositional rules. It is recorded in the brief and the config, but it is un-opinionated in application — the style direction is a vocabulary that downstream skills interpret for their own medium. This skill defines what the visual language is, not how every slide or page should look.

Recommend the best fit based on context and offer 1-2 alternatives. Filter by context — don't present all six.

Anti-patterns regardless of style:

  • Rounded cards with shadows → SaaS product UI
  • Cards nested inside cards → visual noise
  • Gradient fills on content → marketing, not professional
  • Inconsistent radius within a single composition

6. Draft the brief, then refine

Write brand-brief.md with everything so far. Present it and ask the user 2-3 targeted questions — the decisions most likely to benefit from their input.

Identify what to surface based on what you're least certain about. If the accent color was a clear derivation from the brand, don't ask about it. If you had to choose between two equally good fonts, surface that choice.

Structure of the brief:

# Brand Brief — [Project Name]

## Context
[Who, what, for whom]

## Research
[What was found — colors, typeface, tone, sources]

## Color Palette
| Role | Hex | Rationale |
|---|---|---|
| ... | ... | ... |

## Typography
| Role | Font | Weights | Rationale |
|---|---|---|---|
| ... | ... | ... | ... |

## Visual Style
[Which direction, why, what it means in practice]

## Identity (if applicable)
[Project or firm name, tagline, positioning — only when the project calls for it]

Iterate until the user approves. Typically 1-3 rounds. Each round should narrow.

Do not generate `identity.js` or render the preview until the brief is finalized. The preview confirms decisions already made — it is not a design exploration tool.

7. Generate the config

Extract the approved brief into identity.js. Every value comes from the brief.

module.exports = {
  // 'institutional' | 'modern' | 'dark' | 'bento' | 'editorial' | 'data-forward'
  style: 'modern',

  palette: {
    name: 'project-name',
    surfaceDark: '#...',  accent: '#...',  accentLight: '#...',
    surfaceMuted: '#...',  surface: '#...',
    text: '#...',  textMuted: '#...',  textFine: '#...',  textOnDark: '#FFFFFF',
    chartPrimary: '#...',  chartSecondary: '#...',
    positive: '#...',  warning: '#...',  negative: '#...',
  },

  fonts: {
    heading: { family: '...', weights: [600, 700], stack: "'...', system-ui, sans-serif" },
    body:    { family: '...', weights: [400, 600], stack: "'...', system-ui, sans-serif" },
    mono:    null,
  },

  // Optional — include when the project has a brand identity
  firm: null, // or { name: '...', tagline: '...', logoSVG: null }

  toCSS() { /* generates [data-palette="..."] { --accent: ...; --radius: ...; ... } */ },
  // Style tokens are included in the CSS output alongside palette colors.
  // Downstream skills use var(--radius), var(--card-border), etc.
};

8. Render the preview

Write a short Node script to the user's working directory. The script requires the engine from this skill's base directory (provided in context) and the identity config from the working directory:

const { createPreview } = require('<this-skill>/engine');
const brand = require('./identity');
createPreview(brand, { output: './brand-preview.pdf' });

<this-skill> = this skill's base directory path. Node resolves playwright from the skill's own node_modules/ — no install needed in the user's project.

Three slides: palette swatches, typography specimens + combo demo, cover on dark surface. Present to the user — if anything is off, update the brief first, then regenerate.

---

Architecture

brand-system/
  SKILL.md                            ← always loaded (this file)
  references/
    palette-guide.md                  ← load when building palette
    typography-guide.md               ← load when choosing fonts
    design-landscape.md               ← load when proposing style
  engine/
    index.js                          ← createPreview(brand) → PDF
    render.js                         ← Playwright HTML → PDF
  package.json                        ← playwright only
  node_modules/                       ← self-contained

Self-contained: package.json + node_modules/ are inside the skill folder. All require() calls resolve locally — no workspace-level install needed. Run npm install inside this skill folder if node_modules/ is missing.

The identity.js this skill produces is an input to downstream skills, not an instruction. Downstream skills interpret the style direction for their own medium — this skill defines the vocabulary, not the implementation.

Related skills

anthropicsFrontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165kvercel-labsWeb Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6klarksuiteLark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16ksleekdotdesignSleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476leonxlnxDesign Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4knextlevelbuilderUi Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112k

FAQ

What artifacts does it produce?

A markdown brand brief, a machine-readable identity.js config, and a three-slide preview PDF.

How is the palette structured?

Eight roles built from an anchor color: one accent plus three signals, each traced to a reason.

Design & UI/UXbrandingui
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.