skills.rest
OmexIT
OmexITCOMMUNITY
Explore all skills by this author →
GitHub

ui-design

Convert specification documents into UI/UX design artifacts with wireframes and design tokens.

13|4|Updated Feb 20, 2026
Search Tags:#handoff#ui-design#wireframes#design-systems#component-spec#mult-agent
One-click install
npx skills add https://github.com/OmexIT/claude-skills-pack --skill ui-design-omexit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/OmexIT/claude-skills-pack/tree/main/skills/ui-design
Command: npx skills add https://github.com/OmexIT/claude-skills-pack --skill ui-design-omexit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill converts specification documents or panel analyses into ready-to-use UI/UX design artifacts, accelerating handoff to engineering and reducing ambiguity in design intent.

Core Features & Use Cases

  • Generate comprehensive UI/UX design artifacts from a spec, including wireframes, design system tokens, component specs, and visual guidelines.
  • Orchestrate a multi-agent design team (UX Lead, UI Designer, Component Architect, Accessibility Reviewer, Design System Engineer, Design Reviewer) to produce consistent, accessible designs across platforms.
  • Support tool-assisted generation (Stitch MCP, Figma MCP, DESIGN.md import) or manual generation when tools are unavailable, with outputs suitable for downstream engineering and design-code handoff.

Quick Start

Pass one or more paths to spec/panel analysis documents to initiate the design workflow.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I generate wireframes and component specs from a specification document?▼

To generate wireframes and component specs from a specification document, pass the spec file path to trigger a multi-agent workflow that outputs production-ready UI/UX design artifacts, design tokens, and visual guidelines.

What is the best way to turn panel analyses into design-system references for engineering handoff?▼

Turning panel analyses into design-system references involves orchestrating a multi-agent team including a UX Lead and Component Architect. This workflow transforms analyses into structured component specs and design tokens, reducing ambiguity for engineering handoff.

Can I use Figma MCP to create UI design artifacts from a spec?▼

Yes, you can use Figma MCP to create UI design artifacts from a spec. The workflow supports tool-assisted generation via Figma MCP and Stitch MCP, or it can manually generate outputs when these tools are unavailable.

How does the multi-agent workflow ensure accessibility in UI design?▼

The multi-agent workflow ensures accessibility in UI design by deploying a dedicated Accessibility Reviewer agent alongside the UI Designer and UX Lead. This agent evaluates designs to produce consistent, accessible components across platforms.

Do I need DESIGN.md import to generate design tokens and component specifications?▼

No, you do not need DESIGN.md import to generate design tokens and component specifications. The workflow supports optional tool integrations like DESIGN.md, but can manually generate complete design artifacts when tools are unavailable.

What limitations exist when generating UI/UX design artifacts without Stitch MCP or Figma MCP?▼

Without Stitch MCP or Figma MCP, the limitation is manual generation of UI/UX design artifacts. The workflow still produces wireframes and component specs, but lacks direct tool-assisted generation integration for downstream engineering.

Related Skills

Explore More Design & Creative Skills→
Busboom-FooBusboom-Foo

project-initiation

Dispatch the sprint-planner agent to generate overview, specification, and usecases documents.

Official
Intermediate
AradotsoAradotso
3

figma-console-mcp-design-system-api

Synchronize Figma design tokens and components with code-ready formats.

Official
Advanced
taewook486taewook486

moai-design-tools

Fetch Figma design context and export Pencil designs into React and Tailwind CSS code.

Community
Advanced
stoodderstoodder
1

design

Generate UX designs and descriptive documentation from feature specification files.

Community
Intermediate