ui-designer

Architect design systems and component libraries from discovery to developer handoff.

13|6|Updated Dec 23, 2025
One-click install
npx skills add https://github.com/olehsvyrydov/AI-development-team --skill ui-designer-olehsvyrydov
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/olehsvyrydov/AI-development-team/tree/main/claude/skills/design/ui-designer
Command: npx skills add https://github.com/olehsvyrydov/AI-development-team --skill ui-designer-olehsvyrydov

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables a UI/UX designer to architect premium design systems and production-ready components, reducing handoff friction and accelerating delivery.

Core Features & Use Cases

  • Discovery-driven design: Plan brand style, interaction patterns, and component architecture before prototyping.
  • Atomic design implementation: Build from Atoms to Pages to scale the system.
  • Responsive and accessible UI: Design layouts that adapt to devices and meet accessibility standards.
  • Prototype-to-production handoff: Generate component specs and motion prototypes for developers.

Quick Start

Use the ui-designer skill to initiate a design-system blueprint for a marketing landing page, define color tokens, typography scale, and a starter component library, and begin interactive prototyping.

Frequently Asked Questions about ui-designer

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

FAQPage Schema
How do I architect a responsive UI design system from scratch?

To architect a responsive UI design system, use a discovery-first approach to plan brand styles and interaction patterns, then build components using atomic design principles from Atoms to Pages for scalable layouts.

What is the best way to ensure accessibility in UI component architecture?

To ensure accessibility in UI component architecture, design layouts that adapt to various devices while meeting accessibility standards, integrating these requirements during the discovery and token design phases before prototyping.

How do I prepare UI design prototypes for developer handoff?

Prepare UI design prototypes for developer handoff by generating comprehensive design documentation, component specs, and motion prototypes that align with the atomic structure of your interface components.

Can I design brand-aligned dashboards and mobile apps using atomic design principles?

Yes, you can design brand-aligned dashboards and mobile apps by applying atomic design implementation, building from foundational Atoms up to complex Pages to ensure a cohesive, production-ready system.

How does discovery-first planning improve design system development?

Discovery-first planning improves design system development by defining brand style, interaction patterns, and component architecture before prototyping, reducing handoff friction and accelerating production delivery.

When do I need to define color tokens and typography scale for a UI design system?

You need to define color tokens and typography scale during the initial discovery and token design phase of a UI design system to establish a consistent visual language before building the starter component library.