Vibe UI

Vibe UI is a DESIGN.md workflow skill for web UI work. It helps choose an inspired visual style, apply its DESIGN.md, generate page-specific build prompts, and review generated code for consistency.

Included styles are inspired by publicly visible UI patterns. Do not describe them as official brand systems.

Commands

Run commands from skills/vibe-ui or call node /absolute/path/to/skills/vibe-ui/scripts/design.mjs ....

node scripts/design.mjs list
node scripts/design.mjs search \x3Ckeyword>
node scripts/design.mjs recommend "\x3Cuser goal>"
node scripts/design.mjs use \x3Cdesign_id>
node scripts/design.mjs like \x3Cdesign_id> [page_type] [--strength light|medium|bold]
node scripts/design.mjs remix \x3Cprimary_design_id> \x3Csecondary_design_id> [goal]
node scripts/design.mjs generate \x3Cpage_type>
node scripts/design.mjs check \x3Cfile_or_directory>
node scripts/design.mjs preview [--out directory]
node scripts/design.mjs browse [--out directory]
node scripts/design.mjs submit \x3Cdesign_id> \x3CDESIGN.md> [--name display_name]
node scripts/design.mjs extract-url \x3Curl_or_html_file> [--out DESIGN.md]
node scripts/design.mjs import \x3Cfigma_or_screenshot_notes> [--kind figma|screenshot] [--out DESIGN.md]
node scripts/design.mjs report \x3Cfile_or_directory> [--out DESIGN-REPORT.md]

Supported page types: landing, dashboard, pricing, login, docs, settings, profile, chrome-extension-landing.

Workflow

• If the user names a style, run use \x3Cdesign_id> in the project root to copy DESIGN.md, write DESIGN.generated.md, and write .vibe-ui/current-design.json.
• If the user describes a product or page but has not chosen a style, run recommend "\x3Cgoal>" and use the default recommendation unless they choose another.
• If the user asks for a page that should feel "like" a known style, run like \x3Cdesign_id> [page_type] to generate a lightweight brand-safe prompt. Use --strength light|medium|bold to control how strongly the reference should influence the page.
• If the user asks to combine two styles, run remix \x3Cprimary> \x3Csecondary> [goal] and keep one primary DESIGN.md source of truth.
• If the user wants to browse or compare styles visually, run preview or browse to generate a local static design browser.
• If the user has their own DESIGN.md, run submit \x3Cdesign_id> \x3CDESIGN.md> to store it under .vibe-ui/submissions.
• If the user wants a draft DESIGN.md from a URL, Figma export, or screenshot notes, run extract-url or import; treat outputs as drafts that require provenance and brand-safety review.
• Before generating or editing a page, run generate \x3Cpage_type> and follow the resulting prompt together with the project’s existing stack and components.
• After implementation, run check \x3Cfile_or_directory> for quick feedback or report \x3Cfile_or_directory> to write a DESIGN-REPORT.md. Fix issues such as unsupported gradients, arbitrary hardcoded colors, mismatched shadows, radius drift, or weak page structure. Use the patch suggestions and DESIGN.md token candidates as starting points, then inspect the rendered UI.

Design Library

The curated MVP registry lives in registry.json; source DESIGN.md files live under resource/awesome-design-md-main/design-md. Use search instead of reading the full resource directory unless a specific design must be inspected.

Default high-confidence styles include linear, vercel, stripe, apple, cursor, openai, notion, raycast, mintlify, framer, airbnb, shopify, feishu, doubao, xiaohongshu, wechat-reading, slack, and figma.

Guardrails

• Treat DESIGN.md as the source of truth for colors, typography, spacing, radius, shadows, layout rhythm, density, and interaction style.
• Do not copy real logos, trademarks, or brand claims from inspiration sources.
• Do not add unrelated visual tropes unless the selected DESIGN.md supports them.
• The static checker is a first-pass review with token-aware replacement suggestions; for frontend work, still run the project’s tests and inspect the rendered UI.