skills.rest
vibbs
vibbsCOMMUNITY
Explore all skills by this author →
GitHub

design-system

Generate design tokens and UX guidance from selected archetypes.

6|1|Updated Feb 25, 2026
Search Tags:#design system#design review#tokens#archetype#ui consistency#ux patterns
One-click install
npx skills add https://github.com/vibbs/company-os --skill design-system-vibbs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/vibbs/company-os/tree/main/.claude/skills/design-system
Command: npx skills add https://github.com/vibbs/company-os --skill design-system-vibbs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures visual and user experience consistency across all frontend implementations by generating project-specific design tokens and providing clear UX guidance based on chosen archetypes.

Core Features & Use Cases

  • Archetype Selection: Guides users through selecting a design archetype (e.g., Linear, Notion) based on product type, user priority, and information density.
  • Token Generation: Creates design-tokens.md with colors, typography, spacing, etc., adjusted for density and dark mode.
  • UX Guidance: Provides frontend agents with relevant visual tokens and UX patterns for component development.
  • Design Review: Audits existing code for design consistency violations (hardcoded values, missing states).
  • Use Case: When starting a new UI project, use this Skill to select a design archetype, generate the initial design tokens, and then have the frontend agent use these tokens and patterns to build consistent components.

Quick Start

Run /design-system generate-tokens to create your project-specific design tokens.

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 project?▼

To generate design tokens, run the generate-tokens command to create a project-specific design-tokens.md file containing colors, typography, and spacing adjusted for density and dark mode.

What are design archetypes and how do they guide UX patterns?▼

Design archetypes are predefined style models like Linear or Notion that guide UX patterns by aligning visual tokens and component recommendations with your product type, user priority, and information density.

Can I audit existing frontend code for UI consistency violations?▼

Yes, you can audit existing code for UI consistency violations to identify hardcoded values and missing component states, ensuring visual alignment with your established design system standards.

How do I maintain visual consistency when building frontend components?▼

You maintain visual consistency by providing frontend agents with generated design tokens and archetype-based UX patterns, ensuring every component uses standardized colors, typography, and spacing rather than hardcoded values.

Do I need design tokens for dark mode and high information density interfaces?▼

Yes, generating design tokens allows you to explicitly adjust colors, typography, and spacing to support dark mode and accommodate high information density according to your selected archetype standards.

What is the best way to start a design system from scratch?▼

The best way to start a design system is selecting a design archetype that matches your product type, generating initial design tokens, and using those tokens to build consistent UI components.

Related Skills

Explore More Design & Creative Skills→
ZiadNagarZiadNagar

animation-systems

Define motion tokens, choreography patterns, and reduced-motion support for design systems.

Community
Advanced
nimadorostkarnimadorostkar
25

design-systems

Standardize component libraries with three-layer token architecture and variant-based APIs.

Community
Advanced
WellApp-aiWellApp-ai
341

design-context

Align UI decisions with design system tokens, Storybook stories, and codebase patterns.

Official
Basic
JStaRFilmsJStaRFilms
23

ui-ux-pro-max

Generate standardized UI/UX design systems from natural language prompts.

Community
Advanced