skills.rest
catlog22
catlog22COMMUNITY
Explore all skills by this author →
GitHub

maestro-ui-design

Generate UI design prototypes and extract design tokens with OKLCH colors.

511|63|Updated Mar 17, 2026
Search Tags:#automation#accessibility#prototyping#ui-ux#ui-design#design-system#design-tokens
One-click install
npx skills add https://github.com/catlog22/Maestro-Flow --skill maestro-ui-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: maestro-ui-design
Source: https://github.com/catlog22/Maestro-Flow/tree/main/.codex/skills/maestro-ui-design
Command: npx skills add https://github.com/catlog22/Maestro-Flow --skill maestro-ui-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Maestro UI Design automates the creation of coherent UI design systems and prototypes from a phase brief or ad-hoc topic, removing manual iteration between concept, tokens, and prototypes and enabling fast handoff to implementation.

Core Features & Use Cases

  • Style Variant Generation: Produce multiple, contrasting style directions (colors, typography, motion) and present them for selection.
  • Design Token Extraction: Synthesize production-ready design-tokens.json and animation-tokens.json with OKLCH colors and WCAG AA guidance.
  • Prototype Assembly: Generate responsive HTML/CSS prototypes per target pages using contextual content and accessibility constraints.
  • Delegation & Fallback: Delegate work to an external ui-ux-pro-max skill when available or run a self-contained 4-layer pipeline otherwise.
  • Use Case: Convert a phase brief into a MASTER.md design spec, tokens, and a set of prototype pages ready for engineering handoff.

Quick Start

Run the maestro-ui-design skill on a phase or topic by invoking maestro-ui-design with a phase number or descriptive topic such as maestro-ui-design "landing page for SaaS".

Frequently Asked Questions about maestro-ui-design

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

FAQPage Schema
How do I generate design tokens and UI prototypes from a brief?▼

To generate design tokens and UI prototypes, provide a phase number or descriptive topic to trigger automated style variant generation, responsive HTML/CSS assembly, and extraction of design-tokens.json for engineering handoff.

What are design tokens and how do OKLCH colors work in UI design systems?▼

Design tokens are standardized variables for UI properties like color and typography. This skill outputs OKLCH color tokens in a design-tokens.json file to ensure perceptual color uniformity and WCAG AA contrast compliance across prototypes.

Can I extract animation tokens alongside standard UI design tokens?▼

Yes, you can extract animation tokens alongside standard UI design tokens. The process generates a separate animation-tokens.json file to define motion behaviors, ensuring consistent transitions and micro-interactions across the design system.

How do I create accessible UI prototypes that meet WCAG AA contrast standards?▼

Create accessible UI prototypes by applying automated accessibility constraints during assembly. The pipeline validates OKLCH color combinations against WCAG AA contrast requirements, ensuring generated HTML/CSS pages maintain compliant visual hierarchy.

What's the best way to automate UI design system creation for engineering handoff?▼

Automate UI design system creation by running a phase-based workflow that outputs a MASTER.md design spec, production-ready tokens, and responsive prototypes, consolidating concept, tokens, and prototype iteration into a single handoff artifact.

Do I need any external dependencies to generate UI style variants?▼

No external dependencies are required to generate UI style variants. The skill runs a self-contained 4-layer pipeline by default, but optionally delegates to an external ui-ux-pro-max skill when available for enhanced processing.

Related Skills

Explore More Design & Creative Skills→
MartinoPoloMartinoPolo

gk-design-brief

Creates Grovekeeper UI component briefs and triggers /gk-mockup for visuals.

Community
Intermediate
joi-fairsharejoi-fairshare
1

design-mockup-web

Generate responsive HTML mockups from design tokens and specifications.

Community
Advanced
Syedyasir001Syedyasir001

ui-ux-pro-max

Generate design systems with style guides, color palettes, and font pairings.

Community
Advanced
lilbom32lilbom32

accessibility-review

Identify WCAG 2.1 AA compliance gaps in designs and frontend code.

Community
Advanced