brief to design system
by nowrich
Generates production-ready, WCAG-compliant design systems and CSS tokens from a product brief.
Secure checkout via Stripe
Works with the AI tools you already use
See it in action
You say
Generate a design system for a B2B analytics dashboard. Audience: Data scientists. Personality: Precise, neutral, and efficient. Tech stack: Tailwind and React.
Your agent does
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;
}
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
Drop the file into your AI Agent. Works with Claude, Cursor, ChatGPT, and 20+ more.
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 today
- 30-day refund guarantee
- One-time purchase, yours forever
- Secure checkout via Stripe
Creator
12 skills on Agensi
Frequently Asked Questions
Popular in Branding & Design
UI/UX Design Critique & Redesign Expert
Performs senior-level UI/UX audits on screenshots, mockups, prototypes, product screens, dashboards, forms, websites, and mobile interfaces. It evaluates layout, spacing, typography, hierarchy, contrast, navigation, affordances, discoverability, consistency, component states, responsive behavior, accessibility, cognitive load, and UX friction, then converts findings into concrete redesign specifications, before/after direction, component changes, mobile rules, priority levels, and validation plans instead of generic design feedback.
Figma to Frontend UI Specification Agent
Transforms Figma designs, screenshots, wireframes, prototypes, or written UI descriptions into precise frontend implementation specifications covering layout, spacing, typography, design tokens, components, responsive behavior, interaction states, animations, accessibility, assets, developer notes, QA criteria, and implementation risks.
Design System MD — Brand-Quality UI via DESIGN.md
Apply world-class design systems to any UI project in one step using getdesign.md CLI
Design Doc
Convert visual directions and screenshots into a stable design system document for AI coding agents to follow.