ui-designer

Define and document design tokens, component states, and exportable guidelines.

1|Updated Jan 20, 2026

Search Tags:#accessibility #components #UI #guidelines #tokens #design-system #Figma

Ready to run

npx skills add https://github.com/elsolal/Skillz-Claude --skill ui-designer-elsolal

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/elsolal/Skillz-Claude/tree/main/.claude/skills/ui-designer
Command: npx skills add https://github.com/elsolal/Skillz-Claude --skill ui-designer-elsolal

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill defines and enforces a coherent UI design system, ensuring visual consistency across products by standardizing tokens, components, and guidelines. It helps teams reduce drift between UX and UI and accelerates collaboration between designers and developers.

Core Features & Use Cases

Design tokens: centralize colors, typography, spacing, and components for consistent styling.
Component guidelines: document states, variants, and usage rules for reusable UI building blocks.
Figma integration: support importing design tokens and translating design specs into implementation notes.
Use Case: when starting a new product, generate a design system document and a token set that aligns with brand guidelines.

Quick Start

Use the UI designer skill to load your project context and begin defining tokens and components compatible with your framework.

Frequently Asked Questions about ui-designer

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

FAQPage Schema

How do I define a cohesive UI design system with reusable tokens and components?▼

To define a cohesive UI design system, you need to standardize reusable tokens, component states, and usage guidelines. This process centralizes colors, typography, and spacing rules to ensure visual consistency across product features.

Can I import design tokens from Figma into my project's UI design system?▼

Yes, you can import design tokens from Figma. The UI design system supports Figma integration, allowing you to translate design specifications into implementation notes and align your framework with the imported token sets.

What are design tokens and when do I need them for my UI components?▼

Design tokens are centralized variables for colors, typography, and spacing that ensure consistent styling across UI components. You need them when starting a new product or scaling features to prevent visual drift between design and development.

Does this UI design system approach work for documenting component states and variants?▼

Yes, documenting component states and variants is a core feature of this UI design system approach. It provides guidelines for reusable UI building blocks, detailing specific states and usage rules to accelerate designer and developer collaboration.

What's the best way to enforce visual consistency across multiple product features?▼

The best way to enforce visual consistency is to centralize your design tokens and component guidelines. Standardizing these elements reduces UX and UI drift, ensuring that all product features adhere to the same brand-aligned visual rules.

Why should I standardize my UI components instead of styling features individually?▼

You should standardize UI components to reduce drift between design and development. Creating a unified system of reusable tokens and documented states accelerates collaboration and ensures cohesive visuals, rather than maintaining inconsistent one-off styles.