Brief
App type, audience, a few personality words. That’s it.
for developers who can build anything except a decent UI
Flawless backend. Buttons in crisis.
design-brief is a local, agent-agnostic tool for devs who are strong on logic and weak on pixels. Explore real UI directions in your browser, lock one, and hand your coding agent a design contract it can actually build from — instead of prompting “make it look nice” and praying.
One command. No account. No build step.
$ npx design-directions@latest play
Boots a local playground at localhost:4321, detects your project, and writes
globals.css, the Tailwind theme, and DESIGN_SPEC.md straight into
it when you lock a direction. Works fully offline with a preset library — no account, no
telemetry. Prefer a global install? npm i -g design-directions (the command is
design-brief).
From “I’ll just wing the CSS” to a real contract.
Explore
3–5 coherent directions, side by side. Tweak live — instant, deterministic, no AI.
Lock
One Direction becomes the single source of truth. Nothing can drift.
Export the contract
globals.css (shadcn variables + motion), the Tailwind theme, and a
DESIGN_SPEC.md with hard constraints, per-app-type component scope, motion,
and accessibility.
Hand it off
Give the spec to v0, Framer, Cursor, or Claude Code. It builds the real thing.
The trick: this entire page was built from design-brief’s own “grain-dark” export.
The colors, type, grain, and every animation come straight from the tokens. Lock a
direction, hand the DESIGN_SPEC.md to your agent, and it builds something like
this — on brand, by construction.
Want AI to invent new directions? Bring your own key.
Presets are the offline floor. Set one env var and the playground’s “Remix” will author
brand-new directions from your brief: ANTHROPIC_API_KEY,
OPENAI_API_KEY, Groq (OpenAI-compatible — point
OPENAI_BASE_URL at Groq), or a fully local OLLAMA_HOST. Keys stay
on your machine; nothing is ever sent to us.
Try it with Groq
$ export OPENAI_API_KEY=<your-groq-key> $ export OPENAI_BASE_URL=https://api.groq.com/openai/v1 $ export OPENAI_MODEL=llama-3.3-70b-versatile $ npx design-directions@latest play
Now the playground’s Remix button authors brand-new directions from your brief — live, on your machine, on your key.