design-system

Generate design tokens and framework-specific UI components from creative briefs.

Updated Feb 8, 2026

Search Tags:#design system #component library #design tokens #frontend development #ui components

Ready to run

npx skills add https://github.com/bresends/skills --skill design-system-bresends

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/bresends/skills/tree/main/.claude/skills/design-system
Command: npx skills add https://github.com/bresends/skills --skill design-system-bresends

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation of comprehensive design systems, from foundational design tokens to functional UI components, ensuring consistency and efficiency in digital product development.

Core Features & Use Cases

Design Token Generation: Creates a full set of design tokens (colors, typography, spacing, etc.) based on creative briefs or reference images.
UI Component Development: Generates framework-specific UI components (buttons, inputs, cards, etc.) that consume the design tokens.
Use Case: A startup needs a new design system for their web application. They provide a mood board and a few brand color preferences. This Skill generates the design tokens and React components for their UI.

Quick Start

Generate a design system for a new fintech app using the provided mood board image.

Frequently Asked Questions about design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate design tokens for a new UI component library?▼

Generate design tokens for a UI component library by processing creative briefs or reference images to output foundational token files for colors, typography, and spacing.

Can I create framework-specific UI components from a mood board?▼

Yes, you can create framework-specific UI components from a mood board. The system processes reference images and brand preferences to output functional React components that consume the generated design tokens.

What is the best way to build a design system for a web application?▼

The best way to build a design system for a web application is to generate a complete set of design tokens and framework-specific UI components together, ensuring foundational consistency and frontend development efficiency.

Does this design system generator support frontend development with precise specifications?▼

Yes, this design system generator supports frontend development by accepting precise specifications and creative briefs to output both token files and framework-specific UI components tailored to your requirements.

How do I start building a design system if I only have brand color preferences?▼

Start building a design system with only brand color preferences by providing them alongside a reference image or brief. The system generates a complete design token set and matching UI components from those initial inputs.