From a fuzzy idea to a design direction you can actually build.
Quick start
npx design-direction-skillThen, in Claude Code
/design-directionOr just describe your idea: “I’m designing a fintech app that should feel trustworthy but not boring.”
Why this skill
Most designers know the feeling: you have a product to design but the brief is fuzzy. This skill turns that vague idea into a complete design direction, so you start building with conviction instead of guessing.
Everything is generated from a single tokens file, so what you approve is exactly what developers receive.
How it works
01 · Mood brief
Tone words, colour story, type personality, visual do’s and don’ts, and a short design manifesto.
02 · Concrete spec
Light and dark palettes with semantic colours, WCAG AA-checked pairs, type scale, spacing and component rules.
03 · Feature thinking
User flows, feature ideas and micro-interaction concepts tied to your direction and audience.
You get
Use it in Claude Code
Claude Code · CLI, desktop or IDE
1 · Install
2 · Run
Type /design-direction or describe your idea.
Installs the skill into your project’s .claude/skills folder, or for every project with --global.
This project
npx design-direction-skillAll projects
npx design-direction-skill --globalTry a prompt
“I’m designing a fintech app that should feel trustworthy but not boring”
“Help me nail the vibe for a recipe app targeting busy parents”
“I want something that feels premium but approachable, not sure where to start”
Release notes
Loading releases…
Open source · MIT
[v1.4.0]
Latest[v1.3.0]
[v1.2.0]
[v1.1.0]