Vibe UI

SKILL.md

---
name: vibe-ui
description: Use when choosing a DESIGN.md style, applying a style to a web project, generating page prompts, or checking UI code against a selected visual style.
---

# 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 ...`.

```bash
node scripts/design.mjs list
node scripts/design.mjs search <keyword>
node scripts/design.mjs recommend "<user goal>"
node scripts/design.mjs use <design_id>
node scripts/design.mjs like <design_id> [page_type] [--strength light|medium|bold]
node scripts/design.mjs remix <primary_design_id> <secondary_design_id> [goal]
node scripts/design.mjs generate <page_type>
node scripts/design.mjs check <file_or_directory>
node scripts/design.mjs preview [--out directory]
node scripts/design.mjs browse [--out directory]
node scripts/design.mjs submit <design_id> <DESIGN.md> [--name display_name]
node scripts/design.mjs extract-url <url_or_html_file> [--out DESIGN.md]
node scripts/design.mjs import <figma_or_screenshot_notes> [--kind figma|screenshot] [--out DESIGN.md]
node scripts/design.mjs report <file_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 <design_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 "<goal>"` 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 <design_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 <primary> <secondary> [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 <design_id> <DESIGN.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 <page_type>` and follow the resulting prompt together with the project’s existing stack and components.
- After implementation, run `check <file_or_directory>` for quick feedback or `report <file_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.