vibe-to-ui

Solid

Design 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.

Web & Frontend 21 stars 2 forks Updated 2 days ago MIT

Install

View on GitHub

Quality Score: 85/100

Stars 20%
45
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# vibe-to-ui A local design companion for vibe coding developers. It first classifies the target page archetype and density, then uses the user's product background to derive three plausible visual and spatial directions from references before formalizing any one of them into a design system. It extracts "style DNA" including motion systems, Consumer app UIUX needs, visual asset direction, mood boards, and previews, and turns vague aesthetic feelings into product-aware design decisions that actually fit the product surface. Inspiration may be a **website URL**, screenshot, images, music, or fuzzy intent — the agent adapts to what the user provides (see [references/INSPIRATION-SOURCES.md](references/INSPIRATION-SOURCES.md)). Cases can be saved into a global **Inspiration Library** under `~/.vibe-to-ui/inspirations/<product>/pages/<page>/` (full-scroll analysis + motion + annotated `preview.html`, with product-level synthesis) without putting raw cases into a profile. It can also persist a reusable **Design Context** profile under `~/.vibe-to-ui/profiles/<profile>/` (brand master, tokens, decisions, assets) and adapt it on demand into **open-ended medium targets** — examples include `web`, `social-cover`, and `hyperframes`, and users may define their own (e.g. `linkedin`, `print-brochure`) — without coupling user data to skill install/update. All exploration happens through standalone previews; the agent only touches the user's project when the user confirms a direction and as...

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

Web & Frontend Solid

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.

5 Updated 1 weeks ago
timurgaleev
Web & Frontend Listed

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.

0 Updated today
arpitjaiswal-0701
Web & Frontend Listed

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.

0 Updated today
Zeno-wistom