design-direction
Skill96 starsChanged 3 months agoMITView on GitHub
Creates a distinctive visual direction for interfaces, pages, dashboards, slides, forms, and other visual artifacts. Use when the user asks to "make this look good," "redesign this," "make it more visual," "create a polished visual," or produce something bold, expressive, immersive, or memorable. Prevents report-page fallback, repeated layout grammar, cosmetic reskins, decorative UI, and invented content. Do not use for content-only editing, analytical questions, functional code changes, or minor formatting requests without a visual-design goal.
8 other projects use a version of this.
Adopted by
Most recently taken up by
- 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
- danielmachado60/claude-setuptheir own version, first seen Aug 1, 2026
Other versions8 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 8
- 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
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 repository27 other files it gives its agents.
- CLAUDE.mdCLAUDE.md
- authoring-sharepoint-markdownSkill
- autoresearchSkill
- brainstorming-design-docsSkill
- copy-editingSkill
- decision-logSkill
- deck-assemblySkill
- executive-summarySkill
- faq-buildingSkill
- find-expertSkill
- forest-styleSkill
- gap-analysisSkill
- hiring-pipeline-reportSkill
- improve-skillsSkill
- ingest-knowledgeSkill
- kb-admin-reportSkill
- linkedin-post-writingSkill
- list-formattingSkill
- log-knowledge-gapSkill
- meeting-notesSkill
- project-briefSkill
- quarterly-expense-reportSkill
- ralph-loopSkill
- site-analyzerSkill
- style-guidelinesSkill
- uppababy-brand-reviewSkill
- youtube-descriptionSkill
The file
We split this skill into the rules it gives an agent
11 rules. 0 are common, 11 are distinctive, and 0 are very specific to this project.
0
Common
Most of the 6 edited versions we read keep these.
11
Distinctive
This author's own choices. Worth a look.
0
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 19
Before choosing a layout, identify one brief-specific visual proposition that makes the artifact memorable.
- Distinctive: line 20
Do not refine the first plausible direction.
- Distinctive: line 21
Treat "bold" as a decisive visual idea, not as more gradients, decoration, motion, or color.
- Distinctive: line 22
When recent related artifacts are available in context, identify the closest one before committing to a direction.
- Distinctive: line 23
Treat repetition in structure, information sequence, primary visualization, composition, palette, typography, or component grammar as a …
- Distinctive: line 24
If a result differs from the closest related artifact mainly through color, type, decoration, or reordered cards, revise the underlying …
- Distinctive: line 30
Before selecting a direction, obtain a non-semantic seed from the runtime, such as a request identifier, session identifier, or current …
- Distinctive: line 36
If the runtime exposes no external value, proceed from the brief without inventing fake randomness and rely on the collision checks below.
- Distinctive: line 45
Every section has similar visual weight, producing no deliberate focal moment.
- Distinctive: line 57
Do not replace one recurring template with a prescribed menu of alternate templates.
- Distinctive: line 63
When context includes related outputs, briefly name the structural collision that was avoided.
“Common” is measured: kept by at least 6 in 10 of the 6 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
Prevent visually polished work from collapsing into the same reusable design with different content.
Decision rules
- Before choosing a layout, identify one brief-specific visual proposition that makes the artifact memorable. It must affect the dominant composition, hierarchy, scale, sequence, or interaction—not only color, type, or decoration.
- Do not refine the first plausible direction. Use the creative seed to consider materially different visual propositions, then choose the one that best expresses the brief rather than the one that is easiest to implement.
- Treat "bold" as a decisive visual idea, not as more gradients, decoration, motion, or color.
- When recent related artifacts are available in context, identify the closest one before committing to a direction.
- Treat repetition in structure, information sequence, primary visualization, composition, palette, typography, or component grammar as a collision signal.
- If a result differs from the closest related artifact mainly through color, type, decoration, or reordered cards, revise the underlying structure.
- Let the content determine which differences matter. Do not satisfy variety by mechanically changing a fixed number of dimensions.
- Preserve required content, claims, functionality, brand constraints, and accessibility. Variety is not permission to alter meaning.
Creative entropy
Before selecting a direction, obtain a non-semantic seed from the runtime, such as a request identifier, session identifier, or current timestamp. Do not pretend that a model-generated string is random.
Privately use the seed to disrupt the most obvious choices in composition, hierarchy, rhythm, material, imagery, and interaction. Look for patterns or associations in the seed only as a way to reach less probable ideas.
The seed is inspiration, not a specification. Discard any interpretation that conflicts with the brief, content, accessibility, brand constraints, or usability. Do not reveal the seed in the artifact or describe it as part of the design rationale.
If the runtime exposes no external value, proceed from the brief without inventing fake randomness and rely on the collision checks below.
Failure checks
Reject or revise an artifact when any of these are true:
- Its dominant structure is a vertical stack of titled report sections.
- Cards, panels, and containers are the primary visual idea rather than a consequence of the content.
- Its most memorable quality is that it looks clean, professional, polished, or editorial.
- Every section has similar visual weight, producing no deliberate focal moment.
- The visual concept could be removed without changing how the artifact communicates.
- Changing the title would make it plausible for an unrelated brief.
- It repeats a familiar hero, metric strip, chart region, timeline, and recommendation sequence without the content requiring that sequence.
- It defaults to warm-paper editorial styling, dark recommendation slabs, purple-blue gradients, floating glass panels, bento grids, or uniform rounded cards because they are convenient.
- It repeats the palette, title treatment, card grammar, or data sequence of a nearby artifact without a content-driven reason.
- Containers, pills, badges, icons, grids, imagery, or motion are decorative rather than communicating grouping, state, sequence, or meaning.
- Empty hero space or oversized titles displace useful information.
- It invents claims, data, labels, interactions, or states that the source does not support.
- Placeholder text or fake data appears in the delivered artifact.
- Visual novelty weakens legibility, contrast, focus visibility, touch targets, responsive behavior, or reduced-motion support.
Do not replace one recurring template with a prescribed menu of alternate templates. Avoid choosing a named visual form merely because it appears in these instructions.
Delivery
Build and render the finished artifact. Do not return exploratory directions, token lists, implementation code, or a generic design plan unless the user asks for them.
When context includes related outputs, briefly name the structural collision that was avoided. If a tool fails or produces no result, state that plainly and do not invent a completed artifact.
Does 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.

