Skip to content
Content
Skill

/design-plan

Generate a DESIGN-PLAN.md for a new brand or branding project — the strategic intent layer (visual direction, voice, audience, hard NOs, mood references) that PRECEDES design tokens. Use BEFORE design-system. Triggers include "design plan for [brand]", "brand brief", "let's plan

From plugin
skills-design
319 skills

Claude Code

$ npx -y skills add slogsdon/skills-design --skill design-plan --agent claude-code

SKILL.md

design-plan.SKILL.md
name: design-plan
description: Generate a DESIGN-PLAN.md for a new brand or branding project — the strategic intent layer (visual direction, voice, audience, hard NOs, mood references) that PRECEDES design tokens. Use BEFORE design-system. Triggers include "design plan for [brand]", "brand brief", "let's plan a brand", "create a DESIGN-PLAN.md", "/design-plan".

Skill: design-plan

Produces `./design/<brand-slug>/DESIGN-PLAN.md` — a brand-agnostic strategic plan that the `design-system` skill consumes to derive concrete tokens. Think of it as the design equivalent of a PRD: it captures intent, constraints, and direction without committing to specific hex codes or fonts yet.

When to use

  • Starting a new branding project (Shane's own brand, a client brand, or an experiment)
  • Before `/design-system` — the system skill needs strategic input to make non-arbitrary token decisions
  • When revisiting a brand and the existing plan no longer matches the work

Do NOT use this for one-off artifacts where the brand is already defined and a `DESIGN.md` exists. Skip straight to a platform skill.

Inputs

A brand slug (kebab-case, e.g. `shane-personal`, `acme-launch`) and answers to 3 short questions (default) or 8 deeper questions (with `--deep` flag).

Output

`./design/<brand-slug>/DESIGN-PLAN.md` — created in the current working directory. The skill creates the parent dirs if needed. Never write to any other location.

Steps

1. Determine brand slug

If the user said "design plan for X", derive the slug from X (kebab-case, lowercase, no special chars). If they didn't, ask:

> What brand slug should I use? (kebab-case, e.g. `shane-personal`, `acme-launch`)

2. Run the interview

**Default (3 questions, ~2 min):**

1. One sentence: who is this brand for, and what do they do? (e.g. "tooling for senior engineers building AI products")

2. Pick a visual direction + give me 3 voice/tone adjectives:
   - editorial (type-led, print-inspired, restrained)
   - technical (dev aesthetic, mono-led, dense)
   - bold (high-contrast, expressive, attention-grabbing)
   - minimal (whitespace-led, calm, neutral)
   - mixed (specify which two and how)
   Voice adjectives: e.g. "direct, dry, confident" or "warm, curious, generous"

3. Hard NOs and mood references:
   - Aesthetic constraints to never violate (e.g. "no emojis ever", "no gradients", "no stock photography")
   - 2–3 reference brands or sites whose vibe you want to channel (URLs or names)

The five directions above (editorial / technical / bold / minimal / mixed) are the common shorthands. The full named-aesthetic roster — Swiss, brutalist, warm minimal, bold geometric, code/terminal, solarpunk, distinctive display, archival, and more, each defined in concrete type/color/radius/density/layout terms — lives in `../../design-variation-sop.md`. If the user's answer points at one of those, name it explicitly in the plan's Visual Direction section. **Do not let the plan default to "minimal" / "clean" / "modern"** — that is the absence of a direction, not a direction (variation-sop Rule 1). Pick deliberately, biased away from whatever recent brands chose.

**Deep dive (8 questions, ~10 min) — only if user passes `--deep` or asks for it:**

Add to the above:

4. Competitors / peers — name 2–3 brands in the same space you want to feel DIFFERENT from. Why?

5. Color associations — any colors that mean something for the brand (positive or banned)? E.g. "must include warm cream, never use medical blue."

6. Type personality — preference for serif (literary, established), sans (modern, neutral), mono (technical, precise), or mixed? Any specific font families you want considered?

7. Density preference — spacious (lots of whitespace, breathing room) or compact (information-dense, efficient)? Affects line-height and spacing scale.

8. Platform constraints — anything platform-specific to honor? E.g. "LinkedIn artifacts must always include the company mark" or "YouTube thumbnails must work for a developer audience that hates clickbait"

Ask all questions in a single message. Do not ask one at a time.

3. Generate the plan

Write to `./design/<brand-slug>/DESIGN-PLAN.md` using this exact structure:

# DESIGN-PLAN: <Brand Name>

**Slug:** `<brand-slug>`
**Date:** YYYY-MM-DD
**Status:** Draft

## Audience

<1–2 sentences from Q1. Be specific about who, not generic "developers" — e.g. "senior engineers (10+ yrs) at AI infrastructure companies who write production code daily and choose their own tools.">

## Visual Direction

**Primary direction:** <editorial | technical | bold | minimal | mixed>

<2–3 sentences interpreting what this means in execution terms. E.g. for "editorial": "Typography carries the visual weight. Display serif for headlines, generous letter-spacing on small uppercase labels, hairline rules over heavy borders. Whitespace is a design element, not leftover space.">

## Voice & Tone

**Adjectives:** <adj1>, <adj2>, <adj3>

**In practice:**
- <One concrete writing example showing the voice in action>
- <One example of what the voice is NOT>

## Brand Archetype (optional)

<If clear from interview, name one: Sage, Creator, Maverick, Magician, Hero, Explorer, Caregiver, Lover, Jester, Everyman, Innocent, Ruler. If unclear, omit this section entirely.>

## Mood References

<List the references from Q3, with one-line interpretation each. E.g.>
- **Are.na** — quiet authority, no ornamentation, content-first
- **Linear changelog** — technical precision with editorial restraint
- **Fraunces specimen** — display type as the entire visual event

## Hard NOs

<Bulleted list of aesthetic constraints from Q3. Be ruthless — these become enforcement rules in every downstream skill.>

- No purple-to-cyan or blue-to-pink gradients
- No floating orbs, glowing nodes, brain meshes, robot iconography
- No center-aligned hero with template "[Big Word] [Subheading] [Button]"
- <user-supplied NOs>

## Platform Priorities
Read more
@slogsdon
Ships withskills-design

Brand-agnostic design system and artifact generators for Claude Code, plus a figure-worth audit and PDF and HTML-to-PNG export utilities. 19 skills total. Install via the slogsdon-claude-code-config marketplace.

Stars on GitHub

Momentum

stars in total
3
Star history of slogsdon/skills-design on GitHub, a chart by star-history.com

Other skills on skills-design.

design-blog-hero

design-blog-hero

Generate a blog post hero artifact — TWO pixel-exact HTML canvases in a single file: an Open Graph card (1200×630) for social…

design-link-in-bio

design-link-in-bio

Generate a minimal single-column standalone HTML page — mobile-first at 375px width — for use as a link-in-bio destination.…

More skills from other plugins.

prompt-lookup

prompt-lookup

Activates when the user asks about AI prompts, needs prompt templates, wants to search for prompts, or mentions prompts.chat. Use…

@gh-f@gh-fInstall Skill
ppt-master

ppt-master

AI-driven presentation workflow for generating editable PPTX decks and slides, reconstructing page visuals, creating reusable…

@hugohe3@hugohe3Install Skill
morph-ppt

morph-ppt

Use this skill when the user wants a .pptx with smooth cross-slide animation — PowerPoint Morph transitions, Keynote-style…

officecli11d33k
@iofficeai@iofficeaiInstall Skill

Questions about design-plan.

Which coding agents can use design-plan?
design-plan installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.