Define and document design tokens, component states, and exportable guidelines.
npx skills add https://github.com/elsolal/Skillz-Claude --skill ui-designer-elsolal
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
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.
Use the UI designer skill to load your project context and begin defining tokens and components compatible with your framework.
High-intent search queries and answers about installing and using this skill.
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.
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.
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.
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.
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.
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.
StartaleGroupCollect project design context and persist it to the AI config file.
i3ringitDetect and fix visual differences between Figma designs and web implementations.
AradotsoSynchronize Figma design tokens and components with code-ready formats.
IsthisreelEnforce design tokens for color, typography, and spacing across UI components.
