MonkeyUI-dev/vibe-to-ui
Make AI-generated UI actually look designed. Contribute to MonkeyUI-dev/vibe-to-ui development by creating an account on GitHub.
24 stars · 4 forks
README
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.
Manual install 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
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
Bring a signal — a URL, screenshot, image, music clip, or a sentence. See three directions — each grounded in your product and page type, not random theme swaps. Compare before committing — standalone concept previews and mood boards make the choice concrete. 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
Restore or analyze an existing UI Use a URL or screenshot to extract a design system, motion DNA, and a reviewable preview before applying anything. Analyze https://example.com and give me the design tokens and motion system.
For a full methodology, see Design System, Motion System, and Spatial Vibe.
Keep a local Design Context Persist a brand profile outside the skill package, so reinstalling the skill never resets your visual language. 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 Profiles live under ~/.vibe-to-ui; medium targets are open-ended. Optional Git sync can share profiles and inspiration across devices through your private repository. Read the Design Context guide →
Build an Inspiration Library Collect real product pages and screenshots in a global archive, keep their full-scroll visual analysis separate from brand rules, then link or apply a product-level design seed only when you decide to. 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 Read the Inspiration Library guide →
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.