ultra-ui

name	ultra-ui
description	Ultra UI skill - combines Google's DESIGN.md spec (machine-readable design tokens) with the ui-ux-pro-max knowledge base (91 styles, 161 palettes, 73 font pairings, 161 products, 104 UX guidelines, 25 chart types). Generates lint-clean DESIGN.md files, validates token references and WCAG contrast, exports Tailwind/DTCG tokens, and diffs design systems version-over-version.
layer	domain
category	design
triggers	["/design-pipeline","/ui-pipeline","SaaS dashboard","UI review","UX improvement","WCAG compliance","accessibility audit","add styles","admin panel","ai design","award-winning","beautify","build UI","build a dashboard","build a form","build a landing page","build component","color scheme","complex layout","component design","create a website","create dialog","create screen","create table","create the UI for","create ui","css variables","dark mode","design a","design a component","design a page","design card","design from scratch","design guidelines","design modal","design navigation","design review","design screen","design sidebar","design system","design this screen","design to code","design with stitch","elevate ui","fix ui","generate design","generate ui","improve ui","interface design","landing page design","looks bad","looks ugly","make a page","make it look better","make it look good","make it pretty","mockup","needs polish","pen file","pencil design","pixel perfect","polish the ui","premium UI","professional design","redesign","responsive design","shadcn","stitch","style component","style it","style this","tailwind","theme","ui","ui components","ui design","ui guidelines","user interface","web design","wireframe to code","DESIGN.md","design tokens","design.md","design lint","design diff","tailwind tokens","design token export"]

ultra-ui

Ultra UI turns UI/UX research, product fit, style selection, palette selection, and font pairing into canonical DESIGN.md output. Treat DESIGN.md as the source of truth; generated Tailwind, CSS, or DTCG tokens are exports.

Decision Tree

What does the user need?
|
+- "Generate a DESIGN.md from scratch"
|  +- Has style/palette/font/product keywords -> lib/generate
|  +- Has a product brief only                -> scripts/search.py --design-system, then lib/generate
|  +- Needs exact DESIGN.md schema            -> references/design-md-format.md
|
+- "Validate a DESIGN.md"
|  +- Structural/token/WCAG lint              -> lib/lint or lib/index validate
|  +- Needs rule explanations                 -> references/design-md-validation.md
|  +- Broken refs or contrast warnings        -> fix tokens first, prose second
|
+- "Diff two DESIGN.md files"
|  +- Version-over-version review             -> lib/diff
|  +- Regression found                        -> inspect removed/modified tokens and lint delta
|
+- "Convert DESIGN.md to Tailwind config"
|  +- Tailwind v3 JSON                        -> lib/export --format tailwind
|  +- Tailwind v4 CSS variables               -> lib/export --format css-tailwind
|  +- W3C design tokens                       -> lib/export --format tokens
|
+- "Choose style / color / font / theme"
|  +- Full recommendation                     -> scripts/search.py "<query>" --design-system
|  +- Deep dive by domain                     -> scripts/search.py "<query>" --domain <domain>
|  +- Persist classic design-system docs      -> scripts/search.py "<query>" --design-system --persist
|
+- "Build / design a page or component"
|  +- From scratch, wants durable tokens      -> generate DESIGN.md first
|  +- From scratch, wants code                -> use DESIGN.md tokens, then implement
|  +- Has a .pen file to edit                 -> stitch workflow, then extract DESIGN.md
|  +- Wants full pipeline                     -> inspire -> define DESIGN.md -> implement -> validate
|
+- "Review / audit existing UI"
|  +- Quick check                             -> Pre-Delivery Checklist
|  +- Token/system audit                      -> extract or write DESIGN.md, then lint
|  +- Accessibility audit                     -> WCAG notes + ux-guidelines search
|
+- "Fix / improve existing UI"
|  +- Broken or inconsistent                  -> normalize tokens into DESIGN.md
|  +- Boring or generic                       -> style/color/font search, then revise DESIGN.md
|  +- Pre-launch quality pass                 -> lint + checklist + responsive validation
|
+- "Match a real brand's style"
|  +- Brand reference exists                  -> design-kit/getdesign, then translate to DESIGN.md
|  +- Brand reference absent                  -> infer tokens, document rationale, lint
|
+- "Implement Stitch/Pencil design as code"
   +- Extract design DNA                      -> DESIGN.md tokens + prose
   +- Implement                               -> code from DESIGN.md, export Tailwind if useful