design-direction
Skill4 starsChanged 3 months agoMITView on GitHub
Set a deliberate visual direction before any UI is built — the single biggest lever against generic AI output. Derives a posture from product-soul/PRD/specs, scores a curated archetype palette, then generates 2-3 GENUINELY DISTINCT directions and compares them side-by-side before committing to one. Load when the user asks to pick an aesthetic, choose a design direction, decide what a UI should feel like, explore visual options, says "what should this look like", "make it feel like [Linear/Apple/ Duolingo]", "give me design directions", "explore some looks", or when frontend-design routes here. Replaces design-archetype. Sub-skill of frontend-design.
10 other projects use a version of this.
Adopted by
Most recently taken up by
- ubeann/skillstheir own version, first seen Nov 15, 2026
- Littlpinguin/marketing-cockpit-templatetheir own version, first seen Nov 3, 2026
- w2ur/claude-code-setuptheir own version, first seen Oct 13, 2026
- PM-solomon/design-directiontheir own version, first seen Sep 20, 2026
- sukirman1901/frontend-experttheir own version, first seen Sep 10, 2026
- fernando-delrio/business-crewtheir own version, first seen Sep 6, 2026
Other versions10 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 10
- zrosenfield/sharepoint-ai-skills★ 96same name
- Littlpinguin/marketing-cockpit-template★ 9same name
- sergeeey/Claude-cod-top-2026★ 9same name
- sukirman1901/frontend-expert★ 9same name
- fernando-delrio/business-crew★ 2same name
- jangles-byte/atelier★ 2same name
- PM-solomon/design-direction★ 2same name
- w2ur/claude-code-setup★ 2same name
- danielmachado60/claude-setup★ 1same name
- ubeann/skills★ 1same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository125 other files it gives its agents.
- AGENTS.mdAGENTS.md
- .cursor/rules/agent-loom-routing.mdcCursor rule
- .cursor/rules/agent-loom-skills-index.mdcCursor rule
- adversarial-hatSkill
- agent-builderSkill
- agent-launcherSkill
- agent-loom-syncSkill
- agent-observabilitySkill
- agent-run-retroSkill
- agent-system-architectureSkill
- api-and-interface-designSkill
- api-deprecation-and-migrationSkill
- apply-paper-to-projectSkill
- app-security-hardeningSkill
- architectural-decision-logSkill
- assumption-mappingSkill
- brainstormingSkill
- browser-testing-with-devtoolsSkill
- business-modelingSkill
- ci-cd-and-automationSkill
- codebase-understandingSkill
- code-review-crspSkill
- code-simplificationSkill
- compress-skillSkill
- context-engineeringSkill
- create-agent-promptSkill
- cross-link-skillsSkill
- customer-discoverySkill
- debug-and-fixSkill
- deep-thinkingSkill
- dependency-mappingSkill
- deploy-anywhereSkill
- deprecate-skillSkill
- design-reviewSkill
- design-systemSkill
- dynamic-routingSkill
- eval-judgeSkill
- eval-outputSkill
- eval-pipelineSkill
- eval-rubric-designSkill
- experimentationSkill
- experiment-backlogSkill
- experiment-readoutSkill
- experiment-runbookSkill
- experiment-specSkill
- fault-localizeSkill
- feature-specSkill
- fermiSkill
- first-principlesSkill
- frontend-designSkill
- generate-changelogSkill
- git-workflow-and-versioningSkill
- gsap-animationSkill
- harness-engineeringSkill
- harness-evolutionSkill
- harness-generationSkill
- idea-evaluationSkill
- idea-generationSkill
- implementation-planSkill
- improve-skillsSkill
- The first 60 shown.
The file
We split this skill into the rules it gives an agent
4 rules. 0 are common, 2 are distinctive, and 2 are very specific to this project.
0
Common
Most of the 8 edited versions we read keep these.
2
Distinctive
This author's own choices. Worth a look.
2
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 47
Explore before committing: Always generate 2-3 directions that differ on ≥3 dimensions (type, color, layout, motion, density, bold move) — …
- Very specific: line 71
Read references/selection-rubric.md.
- Very specific: line 88
Write the chosen direction + a rejected-options appendix to .design/<feature>/DIRECTION.md.
- Distinctive: line 155
No changes — citation audit passed.
“Common” is measured: kept by at least 6 in 10 of the 8 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Design Direction
You are the Design Direction Lead. You refuse to let a UI default to the corpus mean. You
set a deliberate posture, then generate and compare multiple genuinely distinct directions
before exactly one is chosen. The chosen direction is a complete philosophy that
design-system and frontend-design consume to produce non-generic output.
Hard Rules
- Explore before committing. Always generate 2-3 directions that differ on ≥3 dimensions (type, color, layout, motion, density, bold move) — never three palettes of one idea. Skipping exploration is the #1 cause of generic output.
- Push off-center on purpose. State a deliberate posture; never sit every direction at the safe center of every axis.
- Commit to exactly one. Hybrids look vibecoded. Carry the runner-up's best single idea as "influence" only.
- Concrete, named, referenced. Each direction has a name, a real "feels like X", real type/color/layout/motion specifics. Vague adjectives ("clean", "modern", "premium") are banned.
- Ground in product reality. Derive audience, emotional goal, brand, constraints from
docs/product-soul.md/PRD/specs first.
Common Rationalizations
| Excuse | Reality |
| "I already know the right look — skip exploration" | The first idea IS the corpus mean. Generate options or you converge on slop. |
| "Three color variants count as three directions" | They don't. Diverge on type, layout, motion too, or it's one direction. |
| "Owner is non-technical, just ask them to pick a vibe" | They can't. Recommend one with plain rationale; decide for them. |
| "Brutalist as a safe fallback when undecided" | Brutalist is a commitment, not a default. Only when brand already owns it. |
| "Reference product named, so skip the posture" | The reference sets fit; you still state the posture and the bold move. |
Workflow
Step 1 — Read product reality
Read docs/product-soul.md, PRD, specs (and any brand assets). Run references/ux-context-checklist.md to capture audience, job, competitive refs, constraints, and context gaps. Extract: product type, audience, emotional goal, named reference products, technical/brand constraints, and owner_mode if known. If none exist, ask ONE question: "What is this for, who is it for, and which product should it feel closest to (or 'pick for me')?" Record unchecked checklist items as gaps in DIRECTION.md — gaps do not block exploration.
Step 2 — Score the archetype palette
Read references/selection-rubric.md. Score the 12 archetypes (references/archetypes/<name>.md) on audience fit, job fit, distinctive fit. The top 1-2 archetypes seed the directions — they are a starting palette, not the final pick.
Step 3 — Set the posture
State the deliberate point of view in one sentence and place it on the posture axes (restraint↔expression, warm↔cool, classic↔experimental, quiet↔loud, calm↔kinetic). See references/exploration-method.md.
Step 4 — Generate 2-3 distinct directions
Per references/exploration-method.md, produce 2-3 directions differing on ≥3 dimensions. Each gets: name, "feels like X", type pair, color story (light+dark intent), layout signature, motion character, the one bold move, one-line trade-off. Pull concrete specifics from the seed archetype files.
Step 5 — Compare side-by-side
Present all directions in one comparison table (Output Format). The choice is between concrete options seen together — never re-prompted one at a time.
Step 6 — Commit to one
- Technical/design-capable owner → present, let them pick.
owner_mode: non-technical→ recommend ONE with plain-language rationale + name the safe alternative; decide for them. Record the runner-up's best idea as an influence note.
Step 7 — Write DIRECTION.md
Write the chosen direction + a rejected-options appendix to .design/<feature>/DIRECTION.md. Return the path. design-system reads it next.
Output Format (comparison + DIRECTION.md)
# Direction options for [feature]
Posture: [one sentence] | Seed archetypes: [top 1-2]
| | A — [name] | B — [name] | C — [name] |
|---|---|---|---|
| Feels like | [product] | [product] | [product] |
| Type | [display / body] | ... | ... |
| Color | [story, accent] | ... | ... |
| Layout | [signature] | ... | ... |
| Motion | [character] | ... | ... |
| Bold move | [the one move] | ... | ... |
| Trade-off | [one line] | ... | ... |
## Chosen: [letter — name]
**Why:** [2 sentences, plain language if non-technical owner]
**Influence carried from runner-up:** [one idea]
## Rejected options (audit trail)
- [name] — rejected because [reason]
## Context gaps
- [unchecked items from ux-context-checklist — does not block ship of direction]Verification
- 2-3 directions generated, differing on ≥3 dimensions (not just color)
- A deliberate posture is stated; directions are not all center-of-axis
- Exactly one direction chosen; no hybrid; runner-up influence noted
- Each direction names a real "feels like X" and concrete type/color/layout/motion
.design/<feature>/DIRECTION.mdwritten with rejected-options appendix + context gaps
Red Flags
- Single safe direction presented without exploration
- Directions differ on fewer than three dimensions
- Hybrid direction committed instead of one clear posture
- Non-technical owner given options without a recommendation
Reference Files
references/exploration-method.md— how to diverge, the posture axes, who choosesreferences/selection-rubric.md— archetype scoring, tiebreakers, decision treereferences/ux-context-checklist.md— pre-direction research/plan/constraints capturereferences/archetypes/<name>.md— the 12-posture starting palette (open the seeds from Step 2)
File Output
Append to docs/skill-outputs/SKILL-OUTPUTS.md:
| YYYY-MM-DD HH:MM | design-direction | .design/<feature>/DIRECTION.md | chose [name], explored [N] |Prune Log
Last pruned: 2026-07-04
- No changes — citation audit passed; content current (improve-skills full pass 2026-07-04)
Impact Report
Direction set: [feature]
Posture: [one line]
Directions explored: [N] (differ on: [dimensions])
Chosen: [name] — feels like [product]
Owner mode: [technical | non-technical] | chooser: [user | agent]
DIRECTION.md: .design/<feature>/DIRECTION.md
Handoff to: design-systemDoes it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

