What is the vibe-to-ui skill?
The vibe-to-ui skill is a SKILL.md in MonkeyUI-dev/vibe-to-ui. From a reference or an intent it explores three design directions, shows previews, and applies the one you choose to your project. Exploration stays outside the project until you confirm a direction.
The vibe-to-ui skill is a SKILL.md in MonkeyUI-dev/vibe-to-ui. It turns a URL, a screenshot, an image, a music clip or a sentence into three design directions, then applies the one you confirm.
The flow is reference or intent, three directions, previews, you choose, then apply. Exploration stays outside your project until you explicitly confirm a direction, so the project is not rewritten immediately.
Two modes and a mandatory first stage
Stage 0 is Page Type Identification. The agent records a primary type, a secondary modifier, density, confidence, evidence and design consequences before it explores. SKILL.md lists nine common page types, from landing pages to consumer app surfaces.
Reference Fidelity Mode applies when you give a concrete UI, screenshot, live page or local project. Vibe Translation Mode applies when you give only atmosphere references or abstract feelings.
Eight core capabilities
- Design System Extraction from a URL, screenshot or mockup, shown in a standalone preview before anything is applied.
- Design Exploration with 3 directions, typography exploration, mood boards and standalone concept previews.
- Spatial Vibe Exploration, which turns a fuzzy aesthetic intent or mixed inspiration into page-level layout decisions.
- Mood Board Generation that stays appropriate for the target page type.
- Apply Design to Project, covering token application and layout application.
- Visual Asset Generation through the host image tool.
- Local Design Context profiles under
~/.vibe-to-ui/profiles/. - Design Inspiration Library under
~/.vibe-to-ui/inspirations/.
Who the vibe-to-ui skill is for
Best for
- Developers who vibe code and want a local design companion for their projects.
- Anyone with a website URL, screenshot or fuzzy aesthetic intent who wants three visual directions to choose from.
- React, Vue or plain CSS projects, where the direction and tokens are framework-agnostic.
Not for
- Choosing animated Magic UI components such as marquee, globe and blur-fade and installing them through the shadcn registry, which the magic-ui skill covers.
- Browsing, installing and previewing tinte.dev themes through the shadcn preset API, which the tinte skill covers.
- Turning a Figma URL into code through a seven step workflow of design context, screenshot and validation, which the figma-implement-design skill covers.
- Auditing an existing app across 15 visual dimensions and returning a three phase refinement plan, which the bencium design-audit skill covers.
How to install Vibe to UI Skill: Design Directions From Any Reference
npx skills add MonkeyUI-dev/vibe-to-ui#v0.6.0Run the install command
Run the command above in your project.
Manual alternative
Clone the repository with
git clone https://github.com/MonkeyUI-dev/vibe-to-ui.git ~/.claude/skills/vibe-to-ui, or into~/.agents/skills/for other agents.Give it a reference
Share a URL, screenshot, image, music clip or sentence and ask for design directions.
Choose a direction
Review the previews, pick one and ask the agent to apply it.
Check that it loaded
Ask your agent to explore design directions from a screenshot. Expect Page Type Identification first, then three directions with previews.
Key features
- Three directionsEach run explores 3 design directions and shows previews before anything is applied.
- Flexible inputsA URL, screenshot, image, music clip or sentence can start the process.
- Page type identificationStage 0 records primary type, secondary modifier, density, confidence, evidence and design consequences.
- Two modesReference Fidelity Mode handles a concrete UI or project, and Vibe Translation Mode handles atmosphere references or abstract feelings.
- Design system extractionUse a URL or screenshot to extract a design system and motion DNA, with a reviewable preview before applying anything.
- Mood boards and typographyDesign Exploration includes typography exploration, mood boards and standalone concept previews.
- Apply to projectApplies the chosen direction to the project as tokens and layout, only after you confirm it.
- Visual asset generationVisual assets use your agent host's image tool by default, and no image generation API or keys are required.
- Local design contextProfiles live under
~/.vibe-to-ui/profiles/, created for example withnode bin/vibe-to-ui.js context --profile my-brand --init. - Inspiration librarySaved inspirations live under
~/.vibe-to-ui/inspirations/, managed with the inspiration add, link and apply commands.
Frequently asked questions
What is the vibe-to-ui skill?
It is a SKILL.md in MonkeyUI-dev/vibe-to-ui. Given a URL, screenshot, image, music clip or sentence, your AI coding agent explores three design directions, shows previews and applies the one you choose. Your project changes only after you explicitly ask to apply a confirmed direction.
How do I install the vibe-to-ui skill?
Run npx skills add MonkeyUI-dev/vibe-to-ui#v0.6.0 in your project. You can also git clone the MonkeyUI-dev/vibe-to-ui repository into ~/.claude/skills/vibe-to-ui, or into ~/.agents/skills/ for other agents. It works with Claude Code, Cursor, Codex, Gemini CLI, Kimi Code and any agent that can run npx.
What is Stage 0 in vibe-to-ui?
Stage 0 is a mandatory Page Type Identification that runs before design system extraction, spatial vibe exploration, mood board generation or project application. The agent records a primary type, a secondary modifier, density, confidence, evidence and design consequences. If the page is mixed, it picks one primary type and notes the secondary pattern.
What is the difference between its two modes?
Reference Fidelity Mode is for a concrete UI, screenshot, live page or local project, and it first matches the page type and structural feel. Vibe Translation Mode is for atmosphere references or abstract feelings. Reference Fidelity is the default whenever a concrete UI or project is provided.
Does it rewrite my project right away?
No. The flow runs reference or intent, three directions, previews, your choice, then apply. Exploration produces standalone previews and stays outside your project until you confirm a direction. Only then does the Apply Design to Project capability write tokens and layout, following your project's existing conventions.
Do I need an image generation API key?
No. Visual assets use your agent host's image tool by default, so the skill includes no image generation API and requires no API keys. Each image gets an asset spec covering role, aspect ratio, target display size and style reference, and previews use preview resolution until you apply a direction.
What do the local profiles and inspiration library do?
Local Design Context keeps a brand profile under ~/.vibe-to-ui/profiles/, created with node bin/vibe-to-ui.js context --profile my-brand --init, stored outside the skill package, so reinstalling the skill leaves your visual language in place. The Design Inspiration Library under ~/.vibe-to-ui/inspirations/ is managed with inspiration add, link and apply commands.