Vibe UI Design Workflow
Paste the following prompt into your AI chat to install this skill:
Please install @user_cea1fb81/vibe-ui according to https://skillhub.cn/install/skillhub.md.
About this skill
Problem: style drift in generated web UI
Generated web pages often run, but their visual language stays inconsistent. Fonts, spacing, color, component density, and layout rhythm can change from one page to the next. Vibe UI turns visual style into an executable DESIGN.md workflow, keeping style selection, page templates, and review rules under the same constraint set.
How it works: lock the design before generating code
Vibe UI uses the Vibe Gate 2.0 loop by default:
- Run read to interpret the brief and write .vibe-ui/brief-read.json and .vibe-ui/product-context.json.
- Use use, recommend, or like to choose a style and write DESIGN.md and DESIGN.generated.md.
- Use workflow, invariants, and brief-check to define the execution chain, non-drift rules, and anti-pattern watchlist.
- Generate with generate, then close the revision loop with check, report, critique, and polish.
It includes 18 curated styles, plus 150 upstream DESIGN.md systems, 111 template indexes, and template recipes. Supported page types include landing, dashboard, pricing, login, docs, settings, profile, and chrome-extension-landing.
Boundaries and notes
- The styles are inspired by publicly visible UI patterns; do not present them as official brand systems.
DESIGN.mdis the source of truth for color, typography, spacing, radius, shadows, layout rhythm, density, and interaction style.- The static checker is only a first-pass review; run project tests and inspect the rendered UI for frontend work.
- Keep design reads, dials, and scaffold text in
.vibe-uiJSON, reports, prompts, or comments rather than production UI.
Use Cases
- Define the visual style for a SaaS pricing page, choose Stripe, and generate page prompts plus review items.
- Refactor a login page while avoiding default indigo and emoji icons, checking output against the anti-pattern watchlist.
- Build a dashboard in a Linear-inspired style, generate DESIGN.md, template prompts, and run brief-check.
- Review whether a generated page feels Notion-like, then use critique and polish to produce a repair prompt.
Best For
- Frontend engineers who want to reduce style drift in generated UI.
- Founders building product marketing sites who need a reusable visual language for landing and pricing pages.
- Independent developers using LLMs to write frontend code who need design constraints as a checkable workflow.
- SaaS product engineers maintaining dashboards and settings pages with consistent UI.
Related Skills
Convert Chinese or natural-language requests into paste-ready English image prompts for ChatGPT's web UI, covering generation, editing, multi-image references, and exact text without performing image generation.
A creative AI image workflow for style transfer, reference-based creation, scene replacement, series expansion, material conversion, era shifts, composition rework, lineart conversion, and cartoonization.
Translates star-inspired football memories and fan resonance into compliant original IP poster concepts while avoiding real names, likenesses, official badges, and event logos.
Extracts real web page colors, typography, components, layouts, and interaction styles with a Playwright script to produce a verifiable design guideline.