vibe-to-ui

中文

Make AI-generated UI actually look designed.
Turn a generic AI-generated page into a direction with intention — layout, type, motion, imagery, and the rules that hold them together.

Install & try it · Examples · How it works · Advanced workflows · FAQ

A visible difference, not a prettier prompt

The same AI-generated landing page can feel generic or deliberate. vibe-to-ui helps your agent turn references and taste into a coherent UI direction before it touches production code.

Bring a screenshot, URL, image, music clip, or a sentence of intent. Get a design direction you can see, compare, and choose — then apply it when it is right.

Install and try it

npx skills add MonkeyUI-dev/vibe-to-ui#v0.6.0

Then give your agent one prompt:

This landing page looks like generic AI UI. Use vibe-to-ui's bundled visual-reference starter set,
first identify its page type, then give me 3 visual directions that feel designed. For each
direction, generate a preview and use the available image-generation tool to create a small set of
original visual reference assets (hero, illustration, or texture as appropriate) that fit its
design system. Do not change my project until I choose one.

Works with Claude Code, Cursor, Codex, Gemini CLI, Kimi Code, and any npx-capable agent.

mkdir -p ~/.claude/skills
git clone https://github.com/MonkeyUI-dev/vibe-to-ui.git ~/.claude/skills/vibe-to-ui

mkdir -p ~/.agents/skills
git clone https://github.com/MonkeyUI-dev/vibe-to-ui.git ~/.agents/skills/vibe-to-ui

Examples

Lumen Audio

Used: Design Exploration · Typography Exploration · Motion System

Noctis Candles

Used: Page Type Identification · Design Exploration · Motion System

Aurora

Used: Spatial Vibe · Typography Exploration · Motion System

Aperture

Used: Page Type Identification · Spatial Vibe · Typography Exploration

How it works

Reference or intent → 3 directions → previews → you choose → apply

1. Bring a signal — a URL, screenshot, image, music clip, or a sentence.
2. See three directions — each grounded in your product and page type, not random theme swaps.
3. Compare before committing — standalone concept previews and mood boards make the choice concrete.
4. Apply only when ready — exploration stays outside your project until you explicitly confirm a direction.

Your agent should never need to guess whether “make it feel premium” means a new palette, a different layout, or a more restrained motion system. vibe-to-ui turns that judgment into a shared, reviewable direction.

Advanced workflows

Analyze https://example.com and give me the design tokens and motion system.

node bin/vibe-to-ui.js context --profile my-brand --init
node bin/vibe-to-ui.js context --profile my-brand --target web
node bin/vibe-to-ui.js context --profile my-brand --target print-brochure

node bin/vibe-to-ui.js inspiration add https://example.com --product example --page home
node bin/vibe-to-ui.js inspiration link example --profile my-brand
node bin/vibe-to-ui.js inspiration apply example --project . --confirm

FAQ

Do I need to be a designer?
No. Bring product context and taste signals; vibe-to-ui structures the visual decisions with you.

Will it rewrite my project immediately?
No. Exploration produces standalone previews. Your project changes only after you explicitly ask to apply a confirmed direction.

Can I use a screenshot instead of a URL?
Yes. A screenshot, URL, photo, music clip, or written intent can all be useful starting points.

Does it work with React, Vue, or plain CSS?
Yes. The direction and tokens are framework-agnostic; application follows your project conventions.

Does it include an image-generation API or require API keys?
No. Visual assets use your agent host’s image tool by default. You can explicitly choose MiniMax when it is available and appropriate for the asset; its credentials remain outside the project. See Visual Asset Generation.

Design the dream you were told to put away.

License

MIT — see LICENSE.

Built with ❤️ by MonkeyUI-dev.