designbrief

designbrief

Design direction for AI-generated UI. 21 style guardrail files that give LLMs the context to build tasteful, consistent interfaces.

Live Showcase | MIT License

What This Is

Each style is a markdown file defining the design DNA of a visual direction — typography, color theory, spacing philosophy, component behavior, dark mode, responsive design, content voice, icons, accessibility, and implementation guidance. These are guardrails, not templates. They define what kind of font, color, and spacing — not the exact values.

Think of it as giving your AI coding assistant design taste. Each style also teaches why design choices matter — building the user's intuition over time.

Available Styles

Installation

Quick Install (recommended)

npx designbrief

Auto-detects your tool and copies the skill files into the right place. Supports Claude Code, Cursor, Windsurf, GitHub Copilot, and OpenAI Codex.

# Or specify your tool directly:
npx designbrief --tool claude
npx designbrief --tool cursor

Via skills.sh

npx skills add Heiberg-Industries/designbrief

Via skild.sh

skild install Heiberg-Industries/designbrief

Then just ask for UI:

"Build a landing page for my SaaS product — use the Glassmorphism style"
"I need a dashboard. What style would work for a fintech startup?"

Manual Install

# Claude Code
git clone --depth 1 https://github.com/Heiberg-Industries/designbrief.git .claude/skills/designbrief

# OpenAI Codex CLI
git clone --depth 1 https://github.com/Heiberg-Industries/designbrief.git .agents/skills/designbrief

# GitHub Copilot (VS Code)
git clone --depth 1 https://github.com/Heiberg-Industries/designbrief.git .github/skills/designbrief

git clone --depth 1 https://github.com/Heiberg-Industries/designbrief.git /tmp/designbrief
cp -r /tmp/designbrief/.cursor/rules/ .cursor/rules/
cp -r /tmp/designbrief/styles/ styles/
rm -rf /tmp/designbrief

git clone --depth 1 https://github.com/Heiberg-Industries/designbrief.git /tmp/designbrief
cp -r /tmp/designbrief/.windsurf/rules/ .windsurf/rules/
cp -r /tmp/designbrief/styles/ styles/
rm -rf /tmp/designbrief

See PASTE-INSTRUCTIONS.md for copy-paste instructions specific to each tool.

Copy a style file into your prompt or context:

Here are the design guardrails for this project:
[paste contents of styles/neubrutalism.md]

Now build a pricing page following these guidelines.

How It Works

designbrief follows the Agent Skills open standard. When activated, the skill:

1. Determines the style — from the user's request, or by recommending styles based on project context
2. Loads the style file — reads the full guardrails from styles/{name}.md
3. Applies the guardrails — uses the style's rules for all UI decisions (typography, color, spacing, components, motion)

Contributing

Want to add a style? Use STYLE-TEMPLATE.md as your starting point. Every style must include:

1. Non-Negotiables — The 3 things that MUST be present
2. Identity — Origin, mood, best-for, avoid-for
3. Typography — Families, scale, weight
4. Color — Palette theory, construction rules
5. Spacing & Layout — Grid, whitespace, composition
6. Borders & Shadows — Radius, depth, effects
7. Components — Buttons, cards, inputs, navigation
8. Motion — Animation philosophy
9. Dark Mode & Light Mode — Mode-specific palette, CSS custom properties
10. Responsive & Mobile — Typography scaling, spacing adaptation, performance notes
11. Content & Voice — Headline tone, CTA language, microcopy personality
12. Icons & Illustrations — Icon style, recommended sets, photography direction
13. Accessibility — Contrast ratios, focus states, reduced motion, known risks
14. Do's and Don'ts — Critical guardrails with "why" explanations
15. Implementation Hints — Tailwind + CSS examples
16. Reference Touchstones — Real-world inspiration

License

MIT — free for any use. See LICENSE for details.