vibe-to-ui

中文

Why vibe-to-ui

Good design shouldn't need a design degree.

You can ship systems. You can feel when something looks off. What's missing is a translator — something that takes a cafe photo, a song snippet, or a site you like, and turns that feeling into layout, type, motion, and tokens your agent can actually use.

Explore first. Apply when ready. Previews and mood boards stay outside your repo until you confirm.

Not templated taste. More beauty — in more forms, from more people.

Install

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

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

Claude Code → ~/.claude/skills/

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

Other agents → ~/.agents/skills/

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

What you can do

You want… vibe-to-ui helps you…
Restore a look from a URL or screenshot Extract a full design system + motion DNA, preview first
Only have a feeling / references / music Explore 3 product-aware directions before locking tokens
Fix “generic SaaS layout” energy Translate vibe → Spatial DNA and layout previews
See the direction before committing Generate shareable mood boards
Ship it into the repo Apply tokens (and assets) only after you confirm
Imagery that matches the direction Generate hero / feature / empty-state visuals via your agent’s image tools
Reuse brand across media Persist a local Design Context profile (~/.vibe-to-ui)
Collect design references Global Inspiration Library (inspirations/ + annotated preview)

Deep methodology lives in references/ — loaded on demand, not upfront.

How it feels

inspire → explore 3 directions → choose → preview → apply
  1. Bring anything — URL, screenshot, photo, music, or a sentence of intent
  2. Get three directions grounded in your product (not three random themes)
  3. Compare concept previews + mood boards
  4. Apply when you say so — your project stays untouched until then

Prompts

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

"I want something calm and modern — give me 3 visual directions for my product"

"I recorded a melody that captures the feeling — translate it into a design direction"

"Make this landing page feel editorial, not like a generic SaaS template"

"I like Concept B — apply this design to my project"

"Generate hero and feature illustrations for Concept B"

"vibe-to-ui context --profile my-brand --init"
"vibe-to-ui context --profile my-brand --target print-brochure"

Design Context (local brand memory)

Keep a brand profile on your machine — outside the skill — so reinstall never wipes it:

node bin/vibe-to-ui.js context --list
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 remote connect [email protected]:org/design-contexts.git
node bin/vibe-to-ui.js context sync

Root: ~/.vibe-to-ui (fixed; no env override). Medium targets are open-ended (web, linkedin, print-brochure, …) — not a fixed enum. Optional Git remote sync shares the same root via your private repo.

Details: DESIGN-CONTEXT.md

Inspiration Library (global aesthetic archive)

Collect URLs or screenshots into a cross-project library — separate from brand profiles:

node bin/vibe-to-ui.js inspiration add https://example.com
node bin/vibe-to-ui.js inspiration add https://example.com/docs --product example --page docs
node bin/vibe-to-ui.js inspiration add --image ./shot.png --product mood --page shot
node bin/vibe-to-ui.js inspiration list
node bin/vibe-to-ui.js inspiration link example --profile my-brand
node bin/vibe-to-ui.js inspiration apply example --project .          # product seed preview
node bin/vibe-to-ui.js inspiration apply example --project . --confirm

Cases live under ~/.vibe-to-ui/inspirations/<product>/pages/<page>/. URL screenshots are taken by your agent’s Browser / Computer Use tools with full-scroll coverage (the CLI does not launch a browser). Linking stores a reference-only product pointer. Applying defaults to the product design-seed.md and always shows a DESIGN.md preview first.

Details: INSPIRATION-LIBRARY.md

FAQ

Do I need to be a designer?
No. Bring product context and taste signals — vibe-to-ui structures the rest.

Will it rewrite my repo immediately?
No. Exploration stays in standalone previews until you explicitly ask to apply.

URL or screenshot?
Either. The agent adapts to what you provide.

React / Vue / plain CSS?
Yes. Tokens and direction are framework-agnostic; apply respects your project conventions.

Where do the deep guides live?
In references/ — progressive disclosure keeps startup context lean.

Image generation?
Uses your agent’s host image tool. No API keys or MCP image providers are bundled or required. See VISUAL-ASSET-GENERATION.md.

Media checklist

Future README visuals (flow diagram, examples, Design Context diagram, etc.) are tracked in docs/media/README.md. Only the brand slogan hero is embedded for now.

License

MIT — see LICENSE.

Built with ❤️ by MonkeyUI-dev.