ui-ux-design

Define scalable UI/UX design systems with tokens for Figma handoff.

Updated Apr 23, 2026
One-click install
npx skills add https://github.com/Ayub-Khan/immortal_agent_swarm --skill ui-ux-design-ayub-khan
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-design
Source: https://github.com/Ayub-Khan/immortal_agent_swarm/tree/main/.agents/skills/ui-ux-design
Command: npx skills add https://github.com/Ayub-Khan/immortal_agent_swarm --skill ui-ux-design-ayub-khan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Bridge the gap between design and implementation by providing a scalable UI/UX design system framework with tokens, ensuring consistent handoff and collaboration.

Core Features & Use Cases

  • Design Systems: scalable component libraries with design tokens
  • Responsive Design: mobile-first layout and breakpoints
  • Typography & Color: scalable typography, color theory, accessible palettes
  • Figma Collaboration: design handoff, token export, and asset workflow

Quick Start

Initialize a scalable UI/UX design system and token workflow for your project.

Frequently Asked Questions about ui-ux-design

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

FAQPage Schema
How do I set up a scalable design system with tokens for development handoff?

Set up a scalable design system by defining typography scales, color tokens, spacing guidelines, and component primitives. This framework streamlines design-to-development handoff by ensuring consistent, accessible collaboration across product teams through structured documentation.

Can I use this to manage responsive design and typography scales for mobile-first layouts?

Yes, you can use this to manage responsive design layouts. It requires a scalable typography scale and mobile-first breakpoints to ensure visual consistency and accessibility across different screen sizes within your component architecture.

What's the best way to export Figma design tokens for a component library?

The best way to export Figma design tokens involves applying a token workflow that bridges design and code. It supports Figma collaboration by structuring color theory, typography, and spacing guidelines for seamless asset handoff and implementation.

What is a design token workflow and when do I need it for UI architecture?

A design token workflow standardizes UI architecture by translating visual design attributes into code variables. You need it to maintain consistency, accessibility, and collaboration across product teams when scaling component libraries.

Do I need existing component primitives to define an accessible color palette and spacing guidelines?

Yes, you need existing component primitives. Defining an accessible color palette and spacing guidelines requires these primitives to ensure the UI/UX design system scales effectively and maintains visual consistency across the product.