| name | ai-driven-design-system |
| description | Generate and apply complete design systems from text descriptions or visual examples using AI and modern tooling. |
Skill: AI-Driven Design System
Category: UI/UX Engineering
Priority: High
Description
This skill enables DevinOS to generate and apply complete design systems from a text description, a mood board, or a few visual examples. It produces tokens (colors, typography, spacing), components, and usage guidelines that can be dropped into a React/Tailwind project.
Purpose
To ensure visual consistency and high-quality UI across all projects, accelerate interface design, and reduce human error when applying design standards.
Trigger
Use this skill when:
- A user asks for a design system, theme, or component library.
- A project needs consistent colors, typography, spacing, and components.
- You need to generate UI tokens from a brand description or image reference.
- You are starting a new frontend project and want a strong design foundation.
Context
- Project framework (React, Vue, Svelte, etc.).
- Styling approach (Tailwind CSS, CSS Modules, styled-components, etc.).
- Brand description, mood board, or visual references.
- Accessibility targets (WCAG level, contrast ratios).
- Component library preference (shadcn/ui, Radix, Headless UI, custom).
Workflow
- Elicit requirements. Capture the user's brand, audience, tone, and constraints.
- Generate tokens. Use AI to create color palettes, type scales, spacing scales, and radii.
- Validate accessibility. Check contrast ratios and color blindness safety.
- Build components. Generate a small set of base components (Button, Input, Card, Typography) using the tokens.
- Document usage. Write concise guidelines for when and how to use each token and component.
- Integrate. Install the tokens and components into the project (e.g., Tailwind config, CSS variables, theme provider).
- Verify. Run the verification checklist and a visual smoke test.
Examples
Good: Generate a design system from a brand description
User Input: "Create a professional fintech design system with navy blue, clean typography, and accessible contrast."
Agent Action:
- Generates a color palette with navy primary, neutral grays, and semantic colors (success, warning, error).
- Creates a type scale with readable font sizes and weights.
- Builds Button, Input, Card, Badge components in React + Tailwind.
- Adds CSS variables to
globals.css and a Tailwind theme extension.
- Verifies contrast ratios and component rendering.
Bad: Generate a design system without a target framework
User Input: "Make me a cool design system."
Agent Action:
- Asks clarifying questions: target framework, brand tone, accessibility requirements.
- Does not produce a generic, unintegrated token dump.
Anti-patterns
- Generating tokens without validating accessibility.
- Creating components that are not integrated into the project build.
- Producing a design system without usage guidelines.
- Using hardcoded values instead of tokens in components.
- Ignoring the project's existing component library or styling approach.
Verification
Cross Skill References
- UI/UX Pro Max: Visual styles, color palettes, typography, spacing.
- Design Resources Library: Component libraries and design systems references.
- Frontend Engineering: React/Vue/Svelte integration and Tailwind setup.
- Accessibility: WCAG compliance and contrast verification.
- Documentation: Writing usage guidelines and design decisions.
References
