Design Plan

Skill: design-plan

Produces ./design//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//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//DESIGN-PLAN.md using this exact structure:

# DESIGN-PLAN: 

**Slug:** ``
**Date:** YYYY-MM-DD
**Status:** Draft

## Audience

## Visual Direction

**Primary direction:** 

## Voice & Tone

**Adjectives:** , , 

**In practice:**
- 
- 

## Brand Archetype (optional)

## Mood References

- **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

- 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]"
- 

## Platform Priorities

**Phase 1:** 

## Token Direction Hints (for design-system to interpret)

**Color stance:** 

**Type stance:** 

**Density:** 

**Surface:** 

---

## Handoff

Run: `/design-system ` — the design-system skill will read this plan and generate concrete `DESIGN.md` tokens, `tokens.css`, and `showcase.html`.

4. Confirm and hand off

After writing the file, tell the user:

> Plan saved to ./design//DESIGN-PLAN.md. > > Next: run /design-system to derive concrete tokens and a visual showcase. Or revise the plan first — anything you want me to push back on or expand?

Rules

• The plan is strategic only — no hex codes, no font sizes, no spacing values. Those live in DESIGN.md.
• Never hardcode Shane's personal brand into this skill. The plan is brand-agnostic input.
• 1 page max. If the file exceeds ~80 lines, cut.
• If the user can't answer a question, write TBD — needs decision before tokens rather than guessing.
• If ./design//DESIGN-PLAN.md already exists, ask before overwriting.
• Universal anti-patterns (purple-cyan gradients, indigo/violet default, orbs, italics-emphasis, Inter/Roboto/system primary, etc.) live in ../design-anti-patterns.md and apply to every brand. The positive craft floor (../design-principles.md) and the direction roster + offer-3 procedure (../design-variation-sop.md) are the other two shared canonical references. The Hard NOs section of the plan is for brand-SPECIFIC bans on top of those universals — don't restate the universals here.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: slogsdon
• Source: slogsdon/skills-design
• License: MIT

Install and usage instructions live in the source repository linked above.