skills.rest
bresends
bresendsCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/bresends/skills --skill design-system-bresends
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
labs21-devlabs21-dev
28

brand-identity-extractor

Extract brand design systems and handoff tokens from images, mood boards, or briefs.

Official
Advanced
Adelie-SquadAdelie-Squad
17

ui-designer

Create and apply design tokens for color, typography, and spacing.

Official
Intermediate
hnabyz-bothnabyz-bot

moai-domain-frontend

Plan and implement component-driven UIs across React 19, Next.js 16, and Vue 3.5.

Community
Advanced
RaNDoM6913RaNDoM6913
1

design-system-reviewer

Analyze frontend components for design system token compliance and hardcoded values.

Community
Advanced