vibe-to-ui
SolidDesign systems, motion, mood boards, spatial layout, visual assets, Design Context profiles, and a global Inspiration Library from screenshots, website URLs, inspiration images, music, or fuzzy aesthetic intent. Classifies page archetype, explores 3 product-aware directions before locking tokens (unless exact restoration), and applies only after confirmation. Use when designing or restyling UI, collecting design inspiration under ~/.vibe-to-ui/inspirations, extracting tokens/motion, generating assets, saving brand context under ~/.vibe-to-ui, or Git remote sync of Design Context for cross-device sharing.
Install
Quality Score: 85/100
Skill Content
Details
- Author
- MonkeyUI-dev
- Repository
- MonkeyUI-dev/vibe-to-ui
- Created
- 4 months ago
- Last Updated
- 2 days ago
- Language
- JavaScript
- License
- MIT
Similar Skills
Semantically similar based on skill content — not just same category
design-html
Design finalization: generates production-quality Pretext-native HTML/CSS. Works with approved mockups from /design-shotgun, CEO plans from /plan-ceo-review, design review context from /plan-design-review, or from scratch with a user description. Text actually reflows, heights are computed, layouts are dynamic. 30KB overhead, zero deps. Smart API routing: picks the right Pretext patterns for each design type.
vibe-clone
Clone or adapt a design reference into a new artifact. Use when the user gives a design cue (a live URL, screenshots, a mood board, brand/Figma docs, or a described aesthetic) and wants a new artifact built in that visual language: a landing page, brief, report, deck, portfolio, or component. Two modes: CLONE (faithful reproduction of the user's own property) and ADAPT (extract the reference's design DNA and reapply it to the user's own content). Triggers: "make X look like <site>", "clone this design", "build it in the style of <reference>", "use this mood board", "match this brand", "rebuild this in our colors". Not for: writing copy with no visual reference, generic UI with no reference, backend/API work, or deploying/hosting.
vibe-upgrader
Upgrade real frontend projects through one of two explicit tracks: standard UI/UX improvement for hierarchy, usability, content, controls, and brand polish; or experimental visual work for immersive, high-impact, signature motion and non-standard interaction. Use only when the user explicitly invokes this skill (for example, `$vibe-upgrader` in Codex or `/vibe-upgrader` in Claude Code) or explicitly requests its full workflow. Preserve project facts and permission boundaries, prototype experimental mechanisms before integration, and use MotionSites, React Bits, foundation UI, existing assets, or custom work only when their responsibility fits the task.