{"id":"ff02523e-7738-41e0-a044-5b22d16cdd9d","shortId":"t45PUr","kind":"skill","title":"vibe-to-ui","tagline":">-","description":"# vibe-to-ui\n\nA local, single-project 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 directions from references before formalizing any one of them into a design system. It extracts \"style DNA\" including motion systems, generates mood boards and previews, and turns vague aesthetic feelings into actionable design systems that actually fit the product surface. All exploration happens through standalone previews; the agent only touches the user's project when the user confirms a direction and asks to apply it.\n\n> **Tip**: For multi-project sync, team collaboration, and cloud-based design management, upgrade to [MonkeyUI SaaS](https://demo.monkeyui.com/).\n\n## When to use this skill\n\n- User provides a **screenshot or design mockup** and wants to extract its design system\n- User provides a **screenshot or design mockup plus product context** and wants the agent to extend it into **3 visual directions** rather than copy it literally\n- User wants the agent to first identify whether the target is a **landing page, brand page, dashboard, B-end dense operations page, table-detail management page, docs page, onboarding flow**, or another page archetype\n- User has a **vague aesthetic feeling** and wants to explore design directions with inspiration images or music recordings\n- User **shares a music recording or audio clip** (a melody, song snippet, or recorded humming) to express the mood they want their UI to feel\n- User describes a **song, genre, or musical feeling** they associate with their desired aesthetic\n- User provides a **screenshot of any UI** (full page or any section/component) and wants to extract its layout structure for reuse\n- User wants to define a **motion system** that matches the page's actual use case\n- User describes a **product personality or feeling** (for example \"reliable\", \"innovative\", \"playful\") and wants motion guidance that matches\n- User wants to create a **mood board** that stays appropriate for the target page type instead of drifting into the wrong archetype\n- User has collected **multiple reference images** and wants to see them synthesized into a cohesive visual story\n- User wants a **shareable design artifact** that communicates aesthetic intent to collaborators or stakeholders\n- User has **confirmed a design direction** (from concept previews, mood boards, or design system previews) and wants to **apply it to their project**\n\n## Reference Priority Rules\n\nBefore choosing a workflow, classify the user's inputs:\n\n- **Atmosphere reference**: landscape photos, mood photos, music, abstract feelings\n- **Concrete UI reference**: screenshots of products, webpages, apps, local projects, existing codebases\n\nWhen both are present, always use this priority:\n\n1. **Concrete UI / project fidelity**\n2. **Page type fidelity** (goal, density, interaction model, module mix)\n3. **Visual material fidelity** (image strategy, typography, density treatment, glass treatment, motion weight)\n4. **Atmosphere adjustment**\n\n### Mandatory Stage 0: Page Type Identification\n\nBefore any design-system extraction, layout synthesis, mood-board generation, or project application, classify the target page type.\n\nAlways produce:\n\n1. **Primary page type**\n2. **Secondary modifier** if needed\n3. **Density level**: low / medium / high\n4. **Confidence**: high / medium / low\n5. **Evidence**: the signals that drove the classification\n6. **Design consequences**: what this classification means for spacing, hierarchy, imagery, components, and motion\n\nUse these signals to classify page type:\n\n- **Business goal**: conversion, browsing, monitoring, data entry, content consumption, configuration, execution\n- **Information density**: how much content competes on screen at once\n- **Primary interaction mode**: scrolling, reading, filtering, comparing, editing, approving, drilling into records\n- **Dominant modules**: hero, feature grid, table, chart, sidebar nav, detail pane, form, wizard, feed\n- **Decision speed**: emotional persuasion, calm reading, fast scanning, repeated operations\n\nCommon page types:\n\n1. **Landing / marketing page**: persuasive storytelling, strong hero, lower density, higher visual drama\n2. **Brand showcase / portfolio**: presentation-led, immersive imagery, editorial rhythm\n3. **Content / docs / editorial page**: reading clarity, typographic hierarchy, stable navigation\n4. **E-commerce / catalog page**: browsing, filtering, comparison, product-card systems\n5. **B-end dashboard / overview**: metrics, monitoring, summaries, moderate-to-high density\n6. **B-end workbench / dense operations page**: repeated actions, filters, tables, status chips, compact spacing\n7. **Data management / table-detail page**: record list + detail + batch actions, strict scanability\n8. **Form / onboarding / wizard**: guided steps, form grouping, completion feedback\n9. **Consumer app surface**: task-oriented but lighter than B-end systems, often card/feed based\n\nIf the page is mixed, pick one **primary** type and note the secondary pattern. Example: \"Primary: B-end workbench; Secondary: dashboard summary.\"\n\n### Two operating modes\n\n- **Reference Fidelity Mode**: Use when the user provides a concrete UI, screenshot, live page, or local project. Goal: first match the page type and structural feel, then make the output look recognizably close to the reference before applying mood adjustments.\n- **Vibe Translation Mode**: Use when the user provides only atmosphere references or abstract feelings. Goal: infer the intended page archetype from product context, then translate the mood into a UI direction that fits that archetype.\n\nDefault to **Reference Fidelity Mode** whenever a concrete UI or project is provided.\n\n### Non-negotiable rules\n\n- Do not jump into free reinterpretation before identifying the target page type, density level, interaction model, page structure, typography hierarchy, material treatment, and motion intensity.\n- When the mood conflicts with the page type, the **page type wins first**. Tune the vibe inside the archetype instead of changing the archetype accidentally.\n- Do not produce a cinematic landing page treatment for a dense B-end workbench unless the user explicitly wants a strategic repositioning.\n- For **landing / brand / showcase** surfaces, larger imagery, looser spacing, and more expressive motion are acceptable.\n- For **B-end dashboard / dense operations / table-detail** surfaces, prioritize scanability, state clarity, compact but consistent spacing, form and table legibility, and restrained motion.\n- If the reference's strongest signal comes from **photographic landscapes**, use **real scenic imagery as the primary visual layer by default**. Do not replace it with CSS-generated scenes unless the user explicitly asks for illustration or abstraction.\n- When both a concrete UI reference and vibe images are provided, treat the vibe images as **secondary**; they should tune the output, not replace the reference structure or page type.\n- When the user provides a **concrete UI reference plus product background**, default to **reference-led exploration**: derive **3 visual directions** that stay faithful to the reference's page type and structural DNA while adapting mood, material, density posture, and motion to the user's actual product context.\n- Use **direct design-system extraction first** only when the user explicitly asks for restoration, token extraction, exact replication, or \"analyze this design system.\" Otherwise, a concrete reference should become source material for 3 contextual visual directions before token formalization.\n- If page type confidence is low, ask one short clarification question before formalizing the design system.\n- **Default to visual output, not text-only output**: for every exploration, extraction, mood-board, or layout-analysis workflow, generate at least one standalone HTML visual artifact by default. Do not wait for the user to explicitly ask for a preview, visual draft, mockup, or demo.\n- **Do not stop at Markdown analysis alone** when the workflow is meant to shape visual direction. Text analysis supports the visual artifact; it does not replace it.\n- Before generating the UI, briefly summarize:\n  - the inferred page type and density\n  - what must stay similar to the reference\n  - what may be adjusted\n  - whether the task is operating in Reference Fidelity Mode or Vibe Translation Mode\n\n## Five core capabilities\n\n### 1. Design System Extraction (Design Style Restoration)\n\nUser provides a complete UI screenshot or design mockup -> Extract the design system and generate a standalone preview page for the user to review before applying it to their project.\n\n**Trigger**: User says things like \"extract the style from this\", \"what's the design system here\", \"analyze this design\", \"what motion does this use\", \"replicate this closely\", \"restore this style\", or clearly asks for exact tokenization rather than concept exploration.\n\n**Workflow**:\n1. Ask the user to provide a screenshot or image of the target UI\n2. Run **Stage 0: Page Type Identification**\n3. Analyze the image systematically, but interpret tokens through the page type lens:\n   - layout rhythm and density\n   - typography hierarchy and readability needs\n   - color semantics, especially status and priority colors for B-end surfaces\n   - component patterns that fit the classified archetype\n4. Analyze the motion system with the page type in mind:\n   - landing pages can support more entrance choreography\n   - dashboards prefer subtle transitions and focus-preserving movement\n   - dense workbenches should avoid decorative motion that interrupts scanning\n5. Output a structured design system including:\n   - page type summary\n   - design constraints derived from the page archetype\n   - visual tokens\n   - motion tokens\n6. If the user wants a richer aesthetic guide (soul-level, not just tokens), also generate an Aesthetic Analysis document following [references/AESTHETIC-ANALYSIS.md](references/AESTHETIC-ANALYSIS.md), but keep it subordinate to the page type constraints\n7. **Generate a standalone preview page** as an HTML artifact showcasing the extracted design system applied to sample components. This is NOT applied to the project yet.\n8. Ask the user to confirm or adjust both the **page type classification** and the extracted values\n9. Once the user confirms, transition to **Capability 5** (Apply Design to Project) to integrate the design system into the actual project\n\n### 2. Design Exploration\n\nUser has feelings or vibes but no concrete design target -> Interactive conversation to discover and define aesthetics that still match the intended page archetype, generating standalone concept previews for collaborative exploration.\n\n**Trigger**: User says things like \"I want something that feels like...\", \"I have some inspiration images\", \"I'm not sure what style I want\", shares mood or landscape photos, shares a music recording or song that captures the feeling they want, or provides a concrete UI reference together with product context and wants the agent to extend it into multiple visual directions.\n\n**Workflow**:\n1. Ask the user about their project context:\n   - what it does\n   - who it is for\n   - what the primary page type is, or infer it if the user does not know\n2. Run **Stage 0: Page Type Identification**\n3. Invite them to share inspiration: images, other websites, objects, landscapes, or music recordings and audio clips\n4. If a concrete UI reference is present, split the signals into:\n   - **structural DNA to preserve**: page type, composition rhythm, module mix, hierarchy logic\n   - **adaptable style dimensions**: material treatment, typography attitude, density tuning, color temperature, motion character\n5. For each image, description, or music recording, identify aesthetic qualities:\n   - color mood (warm / cool / muted / vibrant)\n   - texture feel (smooth / rough / organic / geometric)\n   - spatial impression (dense / airy / structured / fluid)\n   - emotional tone (playful / serious / luxurious / minimal)\n   - motion feel (still / flowing / snappy / bouncy / cinematic)\n6. Separate signals into two buckets:\n   - **page-type constraints** that should stay fixed\n   - **stylistic freedoms** that can vary\n7. Run **Typography Exploration** across the 3 directions. For each direction, explicitly define:\n   - heading and body font pairing\n   - typography attitude (editorial / neutral / operational / warm / premium / playful)\n   - readability posture for the target page type\n   - font weight strategy and hierarchy feel\n   - fallback stack, including CJK-safe or multilingual fallback when relevant\n   - why this typography direction fits the user's product background rather than only the reference image\n8. Synthesize findings into **3 distinct design concept directions**, each with:\n   - clear inheritance from the reference or product context\n   - a distinct typography direction, not just a color change\n   - a motion personality\n   - a density posture\n   - a clear statement of why it fits the page type\n9. Generate a **mood board** for each concept direction — see [references/MOOD-BOARD.md](references/MOOD-BOARD.md) — as a standalone HTML artifact for the user to feel and compare\n10. For each concept, generate a **standalone concept preview page** as a self-contained HTML artifact:\n   - a styled sample card or module from the actual page archetype\n   - the concept name, color swatches, typography rationale, font samples, and a mini layout demo\n   - motion preview with hover states and entrance effects appropriate to the page type\n   - explicit comparison between heading, body, label, and dense-data text where relevant\n   - these are standalone pages for exploration and do NOT modify the user's project\n11. Let the user react, compare, and choose or mix elements\n12. Once the user decides, apply **Capability 1** (Design System Extraction) to formalize the chosen direction into a complete design system including motion tokens\n13. Transition to **Capability 5** (Apply Design to Project) to integrate the confirmed design into the actual project\n\n### 3. UI Layout Analysis\n\nUser provides a screenshot of any UI, either a full webpage or a single section, and wants its layout structure extracted and formalized.\n\n**Trigger**: User says things like \"I like this layout\", \"analyze this page structure\", \"extract the layout from this screenshot\", \"how is this section structured\", or provides an image of any UI component or page region, especially one with a complex or non-obvious layout.\n\n**Workflow**:\n1. Ask the user to provide a screenshot. It can be the full page or any specific section or component.\n2. Run **Stage 0: Page Type Identification** for the whole page or section\n3. Analyze the visual hierarchy and spatial structure\n4. Output a multi-layer layout blueprint:\n   - **ASCII art** representation for LLM-friendly layout description\n   - **Spatial proportion hints** (loose percentage sketch of positions and sizes) to convey spatial feel and rhythm\n   - **Semantic structure** describing each section's role\n   - **Responsive behavior** notes\n   - **Page-type fit notes** explaining why this structure works for that archetype\n5. Generate a reusable layout skeleton (HTML structure or component tree) the user can apply to their own project\n6. Generate a **standalone HTML wireframe or low-fidelity structural preview** that visualizes the extracted layout rhythm before any project application\n7. Ask the user if they want to customize any section or combine it with a design system from Capability 1\n\n### 4. Mood Board Generation\n\nUser wants to synthesize inspiration and aesthetic signals into a curated visual collage -> Generate an interactive HTML mood board that still respects the target page type.\n\n**Trigger**: User says things like \"create a mood board\", \"I want to see the visual direction as a board\", \"make an inspiration board\", \"synthesize these references into a mood board\", or has collected multiple reference images or signals and wants a cohesive visual summary before moving to design system extraction.\n\n**Workflow**:\n1. Gather the aesthetic signals already established from Design Exploration, user-provided images, or direct description\n2. Run **Stage 0: Page Type Identification** if it has not already been done\n3. Curate and select. Not every reference belongs on the board; choose elements that reinforce a cohesive narrative for that page archetype.\n4. Choose a mood board layout pattern that echoes the project's spatial personality and page type:\n   - landing / brand: larger hero moments and stronger visual storytelling\n   - B-end / data-heavy: UI fragments, density samples, type rhythm, state color discipline\n5. Generate a self-contained HTML mood board artifact with:\n   - theme title and mood keywords\n   - target page type and density note\n   - dominant hero visual or representative UI fragment\n   - color story with proportional swatches reflecting usage weight\n   - typography specimens showing real text in proposed fonts\n   - texture and material samples\n   - spatial and motion cues\n   - design principles or guiding statements\n6. If the user is choosing between directions, generate multiple mood boards for comparison, one per concept\n7. Present the mood board and invite the user's visceral reaction: \"How does this feel?\" not \"Is this correct?\"\n8. Once the user confirms a direction, the mood board becomes source material for Design System Extraction (Capability 1)\n\n### 5. Apply Design to Project\n\nUser has confirmed a design direction (from exploration concepts, design system preview, or mood board) -> Apply the finalized design system to the user's actual project.\n\n**Trigger**: User says things like \"apply this design\", \"use this one\", \"let's go with this direction\", \"integrate this into my project\", \"apply Concept B to my project\", or confirms they are satisfied with a preview and want it in their codebase.\n\n**Workflow**:\n1. Confirm the scope with the user — which parts of the design to apply and where in the project\n2. Audit the user's project to understand existing framework, CSS approach, file conventions, and any existing design tokens\n3. Re-check the confirmed **page type classification** so applied tokens and components stay aligned with the target surface\n4. Generate the appropriate token files (CSS custom properties, Tailwind config, JSON tokens) based on the user's tech stack\n5. Integrate the tokens into the project — create new files or merge with existing ones, respecting project conventions\n6. Present a clear summary of what was created or modified\n7. Invite the user to review and iterate — the collaborative spirit continues after applying\n\n**Important**: This capability is the ONLY point at which the agent modifies the user's project files. All prior exploration (concept previews, mood boards, design system previews) produces standalone artifacts that do not touch the project.\n\n## Combining capabilities\n\nThese capabilities compose naturally. The workflow follows an **explore -> choose -> apply** pattern: the agent generates standalone previews for collaborative exploration, the user confirms a direction, and only then is the design applied to the project.\n\n- **Reference-led Exploration -> Choose -> Apply**: Start from the user's product background plus a concrete reference, derive 3 contextual visual directions, user chooses -> formalize into design system -> apply to project\n- **Exploration -> Choose -> Apply**: Explore vibes, generate 3 concept previews + mood boards, user chooses -> formalize into design system -> apply to project\n- **Exploration -> Mood Board -> Choose -> Apply**: Explore vibes, classify page type, crystallize into mood boards for validation, user confirms direction -> extract design system -> apply to project\n- **Design Restoration -> Preview -> Apply**: Extract design system from a complete design draft, classify page type, generate a standalone preview page -> user confirms -> apply to project\n- **Mood Board -> Extraction -> Apply**: Generate mood board from references, formalize confirmed direction into design system -> apply to project\n- **Exploration -> Mood Board**: Generate a mood board during Design Exploration as a mid-process checkpoint to let the user feel the direction without losing page-type fidelity\n- **Layout + Design System -> Apply**: Analyze a layout from one site, classify its page type, then apply a design system from another source if the archetypes are compatible\n- **Layout + Mood Board**: Extract a layout from one reference, then apply the mood board's visual direction without violating the target archetype\n- **Full pipeline**: Identify page type -> explore feelings -> choose direction -> extract design system -> analyze a reference layout -> preview -> apply styled skeleton to project\n\n## Output format guidelines\n\nAll design system outputs should include:\n\n- **Page type summary**: primary type, secondary modifier if any, density, confidence, evidence, and design consequences\n- **Human-readable Markdown** summary for documentation\n- **Standalone visual artifact by default**: a self-contained HTML preview page generated automatically during the workflow\n- **Machine-readable tokens** in at least one format:\n  - CSS custom properties (`:root { --color-primary: #xxx; }`)\n  - Tailwind CSS config (`tailwind.config.js` theme extension)\n  - JSON token file (for framework-agnostic use)\n- **Motion tokens**: duration, easing, and animation definitions alongside visual tokens\n\nLayout outputs should include:\n\n- page type classification for the analyzed surface\n- ASCII art layout diagram\n- **Spatial proportion hints** (loose percentage sketch of each major element's position and size)\n- semantic HTML structure\n- component hierarchy description\n- **Standalone HTML wireframe preview by default**\n\n## Icon usage guidelines\n\n**Never use raw emoji characters as visual elements in generated UI code.** Always use the project's icon component library. When no library icon fits or harmonizes with the page's aesthetic, create a custom SVG icon component that inherits the design system's tokens and matches the aesthetic soul — see [references/ICON-USAGE.md](references/ICON-USAGE.md) for detailed guidance.\n\n## Important notes\n\n- **Explore first, apply later**: Never modify the user's project files during design exploration. Generate all concept previews, mood boards, and design system previews as standalone artifacts. Only apply to the project when the user explicitly confirms a direction (via Capability 5).\n- When the user asks for a design direction, extraction, or layout analysis and does not explicitly opt out, automatically produce the corresponding HTML visual artifact in the same pass.\n- When a user gives both UI references and atmosphere references, prefer **\"first make it look like the reference, then tune the mood\"** over redesigning from scratch.\n- Always classify page type before locking a palette, spacing scale, typography scale, or motion language.\n- For atmosphere-led pages, prefer **fewer modules, larger scenic imagery, and lower information density** by default, unless the product context clearly points to a denser archetype.\n- For B-end dense pages, prefer clear state colors, strong table and form legibility, compact spacing discipline, and low-distraction motion.\n- Always ask which CSS framework or tech stack the user is using before generating code tokens\n- When extracting colors, provide both hex values and semantic names (for example `primary`, `surface`, `accent`, `success`, `warning`, `danger` where relevant)\n- For typography, note both the font family and the scale ratios, not just absolute sizes\n- Spacing should be expressed as a consistent scale (for example a 4px base unit)\n- Motion tokens should always include `prefers-reduced-motion` fallbacks. Accessibility is non-negotiable.\n- Be honest when visual analysis is uncertain. Flag low-confidence extractions and suggest the user verify.","tags":["vibe","monkeyui-dev","agent-skills","claude-code","cursor","design-system","github-copilot","monkeyui","motion-design","ui-design","vibe-coding"],"capabilities":["skill","source-monkeyui-dev","skill-vibe-to-ui","topic-agent-skills","topic-claude-code","topic-cursor","topic-design-system","topic-github-copilot","topic-monkeyui","topic-motion-design","topic-ui-design","topic-vibe-coding"],"categories":["vibe-to-ui"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/MonkeyUI-dev/vibe-to-ui","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add MonkeyUI-dev/vibe-to-ui","source_repo":"https://github.com/MonkeyUI-dev/vibe-to-ui","install_from":"skills.sh"}},"qualityScore":"0.453","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 7 github stars · SKILL.md body (24,094 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:14:11.147Z","embedding":null,"createdAt":"2026-05-18T13:21:45.022Z","updatedAt":"2026-05-18T19:14:11.147Z","lastSeenAt":"2026-05-18T19:14:11.147Z","tsv":"'/).':126 '0':469,1337,1668,2152,2389 '1':436,495,604,1242,1320,1635,2021,2129,2287,2369,2576,2651 '10':1921 '11':2003 '12':2014 '13':2038 '2':441,499,617,1334,1538,1665,2149,2386,2670 '3':164,451,504,628,1042,1105,1341,1672,1793,1857,2056,2162,2400,2689,2863,2882 '4':464,510,639,1382,1689,2170,2288,2422,2709 '4px':3479 '5':515,652,1418,1524,1726,2042,2226,2463,2577,2729,3296 '6':523,666,1439,1768,2245,2521,2747 '7':682,1472,1787,2267,2538,2758 '8':696,1499,1853,2558 '9':706,1516,1897 'absolut':3466 'abstract':414,801,993 'accent':3447 'accept':928 'access':3492 'accident':890 'across':1791 'action':72,675,693 'actual':76,298,1069,1536,1946,2054,2606 'adapt':1058,1713 'adjust':466,788,1225,1506 'aesthet':69,212,264,366,1446,1457,1557,1735,2298,2372,3228,3245 'agent':88,159,175,1626,2782,2823 'agnost':3141 'airi':1752 'align':2704 'alon':1182 'alongsid':3150 'alreadi':2374,2397 'also':1454 'alway':432,493,3209,3352,3417,3485 'analysi':1147,1181,1193,1458,2059,3308,3501 'analyz':1092,1295,1342,1383,2092,2163,2997,3054,3162 'anim':3148 'anoth':205,3013 'app':423,708 'appli':104,390,786,1274,1487,1494,1525,2019,2043,2240,2578,2597,2613,2630,2664,2699,2771,2820,2841,2850,2873,2878,2893,2900,2918,2924,2943,2949,2961,2996,3008,3030,3059,3257,3283 'applic':487,2266 'approach':2681 'appropri':328,1971,2712 'approv':573 'archetyp':26,207,340,808,823,884,889,1381,1434,1564,1948,2225,2421,3017,3041,3393 'art':2179,3165 'artifact':363,1156,1197,1481,1913,1937,2472,2801,3097,3281,3321 'ascii':2178,3164 'ask':102,989,1084,1118,1167,1311,1321,1500,1636,2130,2268,3300,3418 'associ':260 'atmospher':407,465,798,3334,3369 'atmosphere-l':3368 'attitud':1719,1806 'audio':232,1687 'audit':2671 'automat':3108,3315 'avoid':1412 'b':190,654,668,717,740,903,931,1372,2449,2632,3396 'b-end':189,653,667,716,739,902,930,1371,2448,3395 'background':35,1034,1846,2857 'base':117,722,2722,3480 'batch':692 'becom':1101,2568 'behavior':2211 'belong':2407 'blueprint':2177 'board':63,325,382,483,1143,1901,2290,2310,2326,2336,2340,2347,2410,2426,2471,2532,2542,2567,2596,2795,2886,2898,2909,2947,2952,2966,2970,3022,3033,3274 'bodi':1802,1980 'bounci':1766 'brand':186,618,916,2440 'briefli':1207 'brows':547,645 'bucket':1773 'busi':544 'calm':595 'capabl':1241,1523,2020,2041,2286,2575,2774,2809,2811,3295 'captur':1608 'card':650,1941 'card/feed':721 'case':300 'catalog':643 'chang':887,1880 'charact':1725,3201 'chart':583 'check':2692 'checkpoint':2979 'chip':679 'choos':399,2010,2411,2423,2526,2819,2849,2868,2877,2888,2899,3049 'choreographi':1399 'chosen':2028 'cinemat':895,1767 'cjk':1830 'cjk-safe':1829 'clarif':1121 'clariti':634,943 'classif':522,528,1511,2697,3159 'classifi':22,402,488,541,1380,2903,2933,3003,3353 'clear':1310,1864,1888,2750,3388,3401 'clip':233,1688 'close':781,1305 'cloud':116 'cloud-bas':115 'code':18,3208,3431 'codebas':427,2649 'cohes':355,2359,2416 'collabor':113,369,1570,2767,2828 'collag':2304 'collect':343,2350 'color':1363,1369,1722,1737,1879,1952,2461,2492,3126,3403,3435 'color-primari':3125 'combin':2279,2808 'come':961 'commerc':642 'common':601 'communic':365 'compact':680,944,3409 'companion':15 'compar':571,1920,2008 'comparison':647,1977,2534 'compat':3019 'compet':560 'complet':704,1252,2032,2930 'complex':2122 'compon':534,1375,1490,2114,2148,2235,2702,3185,3215,3234 'compos':2812 'composit':1707 'concept':379,1317,1567,1860,1904,1924,1928,1950,2537,2590,2631,2792,2883,3271 'concret':416,437,758,831,997,1029,1098,1548,1616,1692,2860 'confid':511,1115,3083,3507 'config':2719,3131 'configur':553 'confirm':98,374,1504,1520,2050,2562,2584,2637,2652,2694,2832,2913,2942,2956,3291 'conflict':869 'consequ':525,3087 'consist':946,3474 'constraint':1429,1471,1777 'consum':707 'consumpt':552 'contain':1935,2468,3103 'content':551,559,629 'context':155,811,1071,1622,1642,1871,3387 'contextu':1106,2864 'continu':2769 'convent':2683,2746 'convers':546,1552 'convey':2198 'cool':1740 'copi':169 'core':1240 'correct':2557 'correspond':3318 'creat':322,2323,2736,2755,3229 'crystal':2906 'css':982,2680,2715,3121,3130,3420 'css-gener':981 'cue':2515 'curat':2302,2401 'custom':2275,2716,3122,3231 'danger':3450 'dashboard':188,656,744,933,1400 'data':549,683,1985,2452 'data-heavi':2451 'decid':2018 'decis':591 'decor':1413 'default':824,975,1035,1128,1158,3099,3193,3383 'defin':289,1556,1799 'definit':3149 'demo':1175,1962 'demo.monkeyui.com':125 'demo.monkeyui.com/).':124 'dens':192,671,901,934,1409,1751,1984,3398 'dense-data':1983 'denser':3392 'densiti':28,446,458,505,556,613,665,853,1061,1214,1357,1720,1885,2456,2483,3082,3381 'deriv':37,1041,1430,2862 'describ':252,302,2205 'descript':1730,2186,2385,3187 'design':14,52,73,118,137,144,151,218,362,376,384,476,524,1075,1094,1126,1243,1246,1256,1260,1292,1297,1422,1428,1485,1526,1532,1539,1549,1859,2022,2033,2044,2051,2283,2365,2377,2516,2572,2579,2586,2591,2600,2615,2662,2687,2796,2840,2871,2891,2916,2921,2926,2931,2959,2972,2994,3010,3052,3068,3086,3238,3267,3276,3303 'design-system':475,1074 'desir':263 'detail':197,586,687,691,938,3251 'develop':19 'diagram':3167 'dimens':1715 'direct':41,100,166,219,377,819,1044,1073,1108,1191,1633,1794,1797,1840,1861,1875,1905,2029,2333,2384,2528,2564,2587,2624,2834,2866,2914,2957,2986,3036,3050,3293,3304 'disciplin':2462,3411 'discov':1554 'distinct':1858,1873 'distract':3415 'dna':57,1056,1702 'doc':200,630 'document':1459,3094 'domin':577,2485 'done':2399 'draft':1172,2932 'drama':616 'drift':336 'drill':574 'drove':520 'durat':3145 'e':641 'e-commerc':640 'eas':3146 'echo':2430 'edit':572 'editori':626,631,1807 'effect':1970 'either':2067 'element':2013,2412,3177,3204 'emoji':3200 'emot':593,1755 'end':191,655,669,718,741,904,932,1373,2450,3397 'entranc':1398,1969 'entri':550 'especi':1365,2118 'establish':2375 'everi':1138,2405 'evid':516,3084 'exact':1089,1313 'exampl':309,737,3444,3477 'execut':554 'exist':426,2678,2686,2742 'explain':2218 'explicit':909,988,1083,1166,1798,1976,3290,3312 'explor':82,217,1040,1139,1318,1540,1571,1790,1994,2378,2589,2791,2818,2829,2848,2876,2879,2896,2901,2964,2973,3047,3255,3268 'express':242,925,3471 'extend':161,1628 'extens':3134 'extract':55,142,280,478,1077,1088,1140,1245,1258,1284,1484,1514,2024,2080,2096,2260,2367,2574,2915,2925,2948,3023,3051,3305,3434,3508 'faith':1047 'fallback':1826,1834,3491 'famili':3459 'fast':597 'featur':580 'feed':590 'feedback':705 'feel':70,213,250,258,307,415,774,802,1543,1581,1610,1744,1762,1825,1918,2200,2553,2984,3048 'fewer':3373 'fidel':440,444,454,750,827,1233,2254,2992 'file':2682,2714,2738,2788,3137,3265 'filter':570,646,676 'final':2599 'find':1855 'first':21,177,767,878,1078,3256,3337 'fit':77,821,1378,1841,1893,2216,3221 'five':1239 'fix':1781 'flag':3504 'flow':203,1764 'fluid':1754 'focus':1406 'focus-preserv':1405 'follow':1460,2816 'font':1803,1820,1956,2507,3458 'form':588,697,702,948,3407 'formal':45,1111,1124,2026,2082,2869,2889,2955 'format':3065,3120 'fragment':2455,2491 'framework':2679,3140,3421 'framework-agnost':3139 'free':845 'freedom':1783 'friend':2184 'full':272,2069,2141,3042 'gather':2370 'generat':61,484,983,1149,1204,1263,1455,1473,1565,1898,1925,2227,2246,2291,2305,2464,2529,2710,2824,2881,2936,2950,2967,3107,3206,3269,3430 'genr':255 'geometr':1748 'give':3329 'glass':460 'go':2621 'goal':445,545,766,803 'grid':581 'group':703 'guid':700,1447,2519 'guidanc':316,3252 'guidelin':3066,3196 'happen':83 'harmon':3223 'head':1800,1979 'heavi':2453 'hero':579,611,2442,2486 'hex':3438 'hierarchi':532,636,860,1359,1711,1824,2166,3186 'high':509,512,664 'higher':614 'hint':2189,3170 'honest':3498 'hover':1966 'html':1154,1480,1912,1936,2232,2249,2308,2469,3104,3183,3189,3319 'hum':240 'human':3089 'human-read':3088 'icon':3194,3214,3220,3233 'identif':472,1340,1671,2155,2392 'identifi':178,848,1734,3044 'illustr':991 'imag':222,346,455,1002,1008,1329,1344,1587,1678,1729,1852,2110,2353,2382 'imageri':533,625,920,968,3377 'immers':624 'import':2772,3253 'impress':1750 'includ':58,1424,1828,2035,3072,3156,3486 'infer':804,1210,1657 'inform':555,3380 'inherit':1865,3236 'innov':311 'input':406 'insid':882 'inspir':221,1586,1677,2296,2339 'instead':334,885 'integr':1530,2048,2625,2730 'intend':806,1562 'intens':865 'intent':367 'interact':447,566,855,1551,2307 'interpret':1347 'interrupt':1416 'invit':1673,2544,2759 'iter':2765 'json':2720,3135 'jump':843 'keep':1464 'keyword':2478 'know':1664 'label':1981 'land':184,605,896,915,1393,2439 'landscap':409,964,1599,1682 'languag':3366 'larger':919,2441,3375 'later':3258 'layer':973,2175 'layout':282,479,1146,1354,1961,2058,2078,2091,2098,2127,2176,2185,2230,2261,2427,2993,2999,3020,3025,3057,3153,3166,3307 'layout-analysi':1145 'least':1151,3118 'led':623,1039,2847,3370 'legibl':951,3408 'len':1353 'let':2004,2619,2981 'level':506,854,1450 'librari':3216,3219 'lighter':714 'like':1283,1576,1582,2087,2089,2322,2612,3341 'list':690 'liter':171 'live':761 'llm':2183 'llm-friend':2182 'local':10,424,764 'lock':3357 'logic':1712 'look':779,3340 'loos':2190,3171 'looser':921 'lose':2988 'low':507,514,1117,2253,3414,3506 'low-confid':3505 'low-distract':3413 'low-fidel':2252 'lower':612,3379 'luxuri':1759 'm':1589 'machin':3113 'machine-read':3112 'major':3176 'make':776,2337,3338 'manag':119,198,684 'mandatori':467 'markdown':1180,3091 'market':606 'match':294,318,768,1560,3243 'materi':453,861,1060,1103,1716,2510,2570 'may':1223 'mean':529 'meant':1187 'medium':508,513 'melodi':235 'merg':2740 'metric':658 'mid':2977 'mid-process':2976 'mind':1392 'mini':1960 'minim':1760 'mix':450,727,1710,2012 'mockup':138,152,1173,1257 'mode':567,748,751,791,828,1234,1238 'model':448,856 'moder':662 'moderate-to-high':661 'modifi':501,1998,2757,2783,3079,3260 'modul':449,578,1709,1943,3374 'moment':2443 'monitor':548,659 'monkeyui':122 'mood':62,244,324,381,411,482,787,815,868,1059,1142,1597,1738,1900,2289,2309,2325,2346,2425,2470,2477,2531,2541,2566,2595,2794,2885,2897,2908,2946,2951,2965,2969,3021,3032,3273,3347 'mood-board':481,1141 'motion':59,291,315,462,536,864,926,954,1064,1299,1385,1414,1437,1724,1761,1882,1963,2036,2514,3143,3365,3416,3482,3490 'move':2363 'movement':1408 'much':558 'multi':109,2174 'multi-lay':2173 'multi-project':108 'multilingu':1833 'multipl':344,1631,2351,2530 'music':224,229,257,413,1603,1684,1732 'must':1216 'mute':1741 'name':1951,3442 'narrat':2417 'natur':2813 'nav':585 'navig':638 'need':503,1362 'negoti':839,3496 'neutral':1808 'never':3197,3259 'new':2737 'non':838,2125,3495 'non-negoti':837,3494 'non-obvi':2124 'note':733,2212,2217,2484,3254,3455 'object':1681 'obvious':2126 'often':720 'onboard':202,698 'one':47,729,1119,1152,2119,2535,2618,2743,3001,3027,3119 'oper':193,600,672,747,935,1230,1809 'opt':3313 'organ':1747 'orient':712 'otherwis':1096 'output':778,1015,1131,1136,1419,2171,3064,3070,3154 'overview':657 'page':25,185,187,194,199,201,206,273,296,332,442,470,491,497,542,602,607,632,644,673,688,725,762,770,807,851,857,872,875,897,1022,1052,1113,1211,1267,1338,1351,1389,1394,1425,1433,1469,1477,1509,1563,1653,1669,1705,1775,1818,1895,1930,1947,1974,1992,2094,2116,2142,2153,2159,2214,2316,2390,2420,2437,2480,2695,2904,2934,2940,2990,3005,3045,3073,3106,3157,3226,3354,3371,3399 'page-typ':1774,2213,2989 'pair':1804 'palett':3359 'pane':587 'part':2659 'pass':3325 'pattern':736,1376,2428,2821 'per':2536 'percentag':2191,3172 'person':305,1883,2435 'persuas':594,608 'photo':410,412,1600 'photograph':963 'pick':728 'pipelin':3043 'plausibl':39 'play':312,1757,1812 'plus':153,1032,2858 'point':2778,3389 'portfolio':620 'posit':2194,3179 'postur':1062,1814,1886 'prefer':1401,3336,3372,3400,3488 'prefers-reduced-mot':3487 'premium':1811 'present':431,622,1696,2539,2748 'presentation-l':621 'preserv':1407,1704 'preview':65,86,380,386,1170,1266,1476,1568,1929,1964,2256,2593,2643,2793,2798,2826,2884,2923,2939,3058,3105,3191,3272,3278 'primari':496,565,730,738,971,1652,3076,3127,3445 'principl':2517 'prior':2790 'priorit':940 'prioriti':396,435,1368 'process':2978 'produc':494,893,2799,3316 'product':34,79,154,304,421,649,810,1033,1070,1621,1845,1870,2856,3386 'product-card':648 'project':13,94,110,394,425,439,486,765,834,1278,1497,1528,1537,1641,2002,2046,2055,2244,2265,2432,2581,2607,2629,2635,2669,2675,2735,2745,2787,2807,2844,2875,2895,2920,2945,2963,3063,3212,3264,3286 'properti':2717,3123 'proport':2188,2495,3169 'propos':2506 'provid':133,147,266,756,796,836,1004,1027,1250,1325,1614,2061,2108,2134,2381,3436 'qualiti':1736 'question':1122 'rather':167,1315,1847 'ratio':3463 'rational':1955 'raw':3199 're':2691 're-check':2690 'react':2007 'reaction':2549 'read':569,596,633 'readabl':1361,1813,3090,3114 'real':966,2503 'recogniz':780 'record':225,230,239,576,689,1604,1685,1733 'redesign':3349 'reduc':3489 'refer':43,345,395,408,418,749,784,799,826,957,999,1019,1031,1038,1050,1099,1221,1232,1618,1694,1851,1868,2343,2352,2406,2846,2861,2954,3028,3056,3332,3335,3343 'reference-l':1037,2845 'references/aesthetic-analysis.md':1461,1462 'references/icon-usage.md':3248,3249 'references/mood-board.md':1907,1908 'reflect':2497 'region':2117 'reinforc':2414 'reinterpret':846 'relev':1836,1988,3452 'reliabl':310 'repeat':599,674 'replac':978,1017,1201 'replic':1090,1303 'reposit':913 'repres':2489 'represent':2180 'respect':2313,2744 'respons':2210 'restor':1086,1248,1306,2922 'restrain':953 'reus':285 'reusabl':2229 'review':1272,2763 'rhythm':627,1355,1708,2202,2262,2459 'richer':1445 'role':2209 'root':3124 'rough':1746 'rule':397,840 'run':1335,1666,1788,2150,2387 'saa':123 'safe':1831 'sampl':1489,1940,1957,2457,2511 'satisfi':2640 'say':1281,1574,2085,2320,2610 'scale':3361,3363,3462,3475 'scan':598,1417 'scanabl':695,941 'scene':984 'scenic':967,3376 'scope':2654 'scratch':3351 'screen':562 'screenshot':135,149,268,419,760,1254,1327,2063,2101,2136 'scroll':568 'secondari':500,735,743,1010,3078 'section':2074,2105,2146,2161,2207,2277 'section/component':276 'see':350,1906,2330,3247 'select':2403 'self':1934,2467,3102 'self-contain':1933,2466,3101 'semant':1364,2203,3182,3441 'separ':1769 'serious':1758 'shape':1189 'share':227,1596,1601,1676 'shareabl':361 'short':1120 'show':2502 'showcas':619,917,1482 'sidebar':584 'signal':518,539,960,1699,1770,2299,2355,2373 'similar':1218 'singl':12,2073 'single-project':11 'site':3002 'size':2196,3181,3467 'skeleton':2231,3061 'sketch':2192,3173 'skill':131 'skill-vibe-to-ui' 'smooth':1745 'snappi':1765 'snippet':237 'someth':1579 'song':236,254,1606 'soul':1449,3246 'soul-level':1448 'sourc':1102,2569,3014 'source-monkeyui-dev' 'space':531,681,922,947,3360,3410,3468 'spatial':1749,2168,2187,2199,2434,2512,3168 'specif':2145 'specimen':2501 'speed':592 'spirit':2768 'split':1697 'stabl':637 'stack':1827,2728,3424 'stage':468,1336,1667,2151,2388 'stakehold':371 'standalon':85,1153,1265,1475,1566,1911,1927,1991,2248,2800,2825,2938,3095,3188,3280 'start':2851 'state':942,1967,2460,3402 'statement':1889,2520 'status':678,1366 'stay':327,1046,1217,1780,2703 'step':701 'still':1559,1763,2312 'stop':1178 'stori':357,2493 'storytel':609,2447 'strateg':912 'strategi':456,1822 'strict':694 'strong':610,3404 'stronger':2445 'strongest':959 'structur':283,773,858,1020,1055,1421,1701,1753,2079,2095,2106,2169,2204,2221,2233,2255,3184 'style':56,1247,1286,1308,1593,1714,1939,3060 'stylist':1782 'subordin':1466 'subtl':1402 'success':3448 'suggest':3510 'summar':1208 'summari':660,745,1427,2361,2751,3075,3092 'support':1194,1396 'sure':1591 'surfac':80,709,918,939,1374,2708,3163,3446 'svg':3232 'swatch':1953,2496 'sync':111 'synthes':352,1854,2295,2341 'synthesi':480 'system':53,60,74,145,292,385,477,651,719,1076,1095,1127,1244,1261,1293,1386,1423,1486,1533,2023,2034,2284,2366,2573,2592,2601,2797,2872,2892,2917,2927,2960,2995,3011,3053,3069,3239,3277 'systemat':1345 'tabl':196,582,677,686,937,950,3405 'table-detail':195,685,936 'tailwind':2718,3129 'tailwind.config.js':3132 'target':24,181,331,490,850,1332,1550,1817,2315,2479,2707,3040 'task':711,1228 'task-ori':710 'team':112 'tech':2727,3423 'temperatur':1723 'text':1134,1192,1986,2504 'text-on':1133 'textur':1743,2508 'theme':2474,3133 'thing':1282,1575,2086,2321,2611 'three':38 'tip':106 'titl':2475 'togeth':1619 'token':1087,1110,1314,1348,1436,1438,1453,2037,2688,2700,2713,2721,2732,3115,3136,3144,3152,3241,3432,3483 'tone':1756 'topic-agent-skills' 'topic-claude-code' 'topic-cursor' 'topic-design-system' 'topic-github-copilot' 'topic-monkeyui' 'topic-motion-design' 'topic-ui-design' 'topic-vibe-coding' 'touch':90,2805 'transit':1403,1521,2039 'translat':790,813,1237 'treat':1005 'treatment':459,461,862,898,1717 'tree':2236 'trigger':1279,1572,2083,2318,2608 'tune':879,1013,1721,3345 'turn':67 'two':746,1772 'type':333,443,471,492,498,543,603,731,771,852,873,876,1023,1053,1114,1212,1339,1352,1390,1426,1470,1510,1654,1670,1706,1776,1819,1896,1975,2154,2215,2317,2391,2438,2458,2481,2696,2905,2935,2991,3006,3046,3074,3077,3158,3355 'typograph':635 'typographi':457,859,1358,1718,1789,1805,1839,1874,1954,2500,3362,3454 'ui':4,8,248,271,417,438,759,818,832,998,1030,1206,1253,1333,1617,1693,2057,2066,2113,2454,2490,3207,3331 'uncertain':3503 'understand':2677 'unit':3481 'unless':906,985,3384 'upgrad':120 'usag':2498,3195 'use':30,129,299,433,537,752,792,965,1072,1302,2616,3142,3198,3210,3428 'user':32,92,97,132,146,172,208,226,251,265,286,301,319,341,358,372,404,755,795,908,987,1026,1067,1082,1164,1249,1270,1280,1323,1442,1502,1519,1541,1573,1638,1661,1843,1916,2000,2006,2017,2060,2084,2132,2238,2270,2292,2319,2380,2524,2546,2561,2582,2604,2609,2657,2673,2725,2761,2785,2831,2854,2867,2887,2912,2941,2983,3262,3289,3299,3328,3426,3512 'user-provid':2379 'vagu':68,211 'valid':2911 'valu':1515,3439 'vari':1786 'verifi':3513 'via':3294 'vibe':2,6,17,789,881,1001,1007,1236,1545,2880,2902 'vibe-to-ui':1,5 'vibrant':1742 'violat':3038 'viscer':2548 'visual':40,165,356,452,615,972,1043,1107,1130,1155,1171,1190,1196,1435,1632,2165,2258,2303,2332,2360,2446,2487,2865,3035,3096,3151,3203,3320,3500 'wait':1161 'want':140,157,173,215,246,278,287,314,320,348,359,388,910,1443,1578,1595,1612,1624,2076,2273,2293,2328,2357,2645 'warm':1739,1810 'warn':3449 'webpag':422,2070 'websit':1680 'weight':463,1821,2499 'whenev':829 'whether':179,1226 'whole':2158 'win':877 'wirefram':2250,3190 'without':2987,3037 'wizard':589,699 'work':2222 'workbench':670,742,905,1410 'workflow':401,1148,1185,1319,1634,2128,2368,2650,2815,3111 'wrong':339 'xxx':3128 'yet':1498","prices":[{"id":"e567f593-afa2-4f36-9806-c70f486c3b50","listingId":"ff02523e-7738-41e0-a044-5b22d16cdd9d","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"MonkeyUI-dev","category":"vibe-to-ui","install_from":"skills.sh"},"createdAt":"2026-05-18T13:21:45.022Z"}],"sources":[{"listingId":"ff02523e-7738-41e0-a044-5b22d16cdd9d","source":"github","sourceId":"MonkeyUI-dev/vibe-to-ui","sourceUrl":"https://github.com/MonkeyUI-dev/vibe-to-ui","isPrimary":false,"firstSeenAt":"2026-05-18T13:21:45.022Z","lastSeenAt":"2026-05-18T19:14:11.147Z"}],"details":{"listingId":"ff02523e-7738-41e0-a044-5b22d16cdd9d","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"MonkeyUI-dev","slug":"vibe-to-ui","github":{"repo":"MonkeyUI-dev/vibe-to-ui","stars":7,"topics":["agent-skills","claude-code","cursor","design-system","github-copilot","monkeyui","motion-design","ui-design","vibe-coding"],"license":"mit","html_url":"https://github.com/MonkeyUI-dev/vibe-to-ui","pushed_at":"2026-05-14T15:04:44Z","description":"The design companion for vibe coders that knows your project better every time.","skill_md_sha":"bc6a3a2c00f5680bc34b7d9b0ca94c55181fc686","skill_md_path":"SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/MonkeyUI-dev/vibe-to-ui"},"layout":"root","source":"github","category":"vibe-to-ui","frontmatter":{"name":"vibe-to-ui","description":">-"},"skills_sh_url":"https://skills.sh/MonkeyUI-dev/vibe-to-ui"},"updatedAt":"2026-05-18T19:14:11.147Z"}}