brief to design system
Generates production-ready, WCAG-compliant design systems and CSS tokens from a product brief.
$5
Works with the AI tools you already use
Claude Code
Cursor
Codex CLI
GitHub Copilot
Gemini CLI+20 moreClaude CodeCursorCodex CLIGitHub CopilotGemini CLI
OpenClaw
Manus
Grok+17 agentsbrief to design system
Example session with this skill installed
Generate a design system for a B2B analytics dashboard. Audience: Data scientists. Personality: Precise, neutral, and efficient. Tech stack: Tailwind and React.
- Read your context and instructions
- Compiled the brief to design
- Generated the design tokens stylesheet
Precision Analytics Design System
Philosophy: Maximize data density without sacrificing clarity or focus.
Color Palette
- Primary-600 (#0F172A) on White: 14.5:1 (Passes AAA)
- Error-500 (#EF4444) on White: 4.5:1 (Passes AA)
Tokens
:root {
--font-size-sm: 0.875rem;
--space-4: 1rem;
}
brief-to-design-system-tokens.css
CSS · design tokens
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
What you get
About this skill
The problem
Starting a new project often leads to inconsistent UI choices or "grey area" designs that fail accessibility standards. Developers frequently waste time manually calculating contrast ratios or inventing ad-hoc spacing values that don't scale.
What it does
- Generates a comprehensive Markdown design system from a simple three-point product brief.
- Calculates exact WCAG contrast ratios for all color pairings to ensure AA compliance.
- Defines a full typography, spacing, and layout scale using semantic naming conventions.
- Creates detailed rule sets for six core components including hover, focus, and active states.
- Produces a production-ready CSS custom property block for immediate implementation.
Why this beats prompting it yourself
Generic prompts often return vague aesthetic advice or inaccessible color palettes. This skill enforces a strict architectural structure that maps every visual decision to a named design token and validates accessibility programmatically before outputting a single line of code.
Use cases
- Scaffolding a design system for a new B2B SaaS dashboard or internal tool.
- Generating accessible brand guidelines and CSS tokens for a developer-centric CLI.
- Creating a consistent component spec for a rapid consumer app prototype.
- Auditing existing UI against a standardized ten-item checklist.
Known limitations
This skill is designed for greenfield projects and is not intended to refactor or merge two existing design systems.
How to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.
Skills folder by agent
Click the path to copy it. Create the folder if it does not exist yet.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
30-day refund
Not a fit? Get your money back
Trust & safety
Security scanned
Verified clean 1 month ago
- Passed all security checks, Safe to install