@kr-pro-labs/ui2vibe-mcp

UI Design Token, Responsive Layout Skeleton, Motion Physics & Interactive Component Absorption MCP Server for Vibe Coding

English | 한국어 (Korean)

ui2vibe-mcp is a flagship Model Context Protocol (MCP) server developed by KR-PRO-Labs (@sjdhfjdj30-hash). While clonevibe-mcp extracts and transplants backend/core algorithms from reference codebases, ui2vibe-mcp is its frontend counterpart: it absorbs any UI reference (HTML/CSS/Tailwind snippets, React JSX/TSX, Vue SFCs, or computed DOM snapshots) and distills it into:

1. Perceptual Design Tokens: sRGB/Hex/HSL to OKLCH conversion, automatic Dark/Light mode token pairing, modular typography scales, 8pt grid spacing quantization, multi-layered box shadows, and glassmorphism blur tokens.

2. Semantic Responsive Layout Skeletons: Prunes redundant wrapper div chains ("div-soup") into semantic HTML5 landmarks (header, nav, main, section, article, aside, footer) and solves Flexbox/CSS Grid axes and responsive breakpoints (sm, md, lg, xl).

3. Motion Physics Equations: Parses CSS transition, @keyframes, cubic-bezier(x1, y1, x2, y2), and Tailwind transition utilities, solving equivalent physical harmonic oscillator spring parameters (stiffness, damping, mass, settlingTimeMs) with zero external animation library dependencies.

4. Chameleon Multi-Framework Synthesis: Emits production-ready, zero-dependency components for react-tailwind, react-css-vars, vanilla-css, vue-tailwind, or svelte-css complete with :root/.dark CSS Custom Properties and tailwind.config theme extensions.

5. Automated WCAG & Fidelity Auditing: Verifies WCAG 2.1 AA (>= 4.5:1) and AAA (>= 7.0:1) contrast ratios, minimum 44x44px interactive touch targets, @media (prefers-reduced-motion: reduce) accessibility guardrails, and CLS layout stability.

Architecture Pipeline

flowchart TB
    subgraph Input["1. UI Reference Inputs"]
        R1["HTML / CSS / Tailwind Snippet"]
        R2["React JSX/TSX or Vue SFC"]
        R3["Computed Style / DOM Tree Snapshot"]
    end

    subgraph Engine["2. ui2vibe-mcp Core Pipeline (Node.js 22 Strict ESM)"]
        U1["capture_ui_reference\n(DOM & Style AST Normalizer)"]
        U2["extract_design_tokens\n(OKLCH Color / Type / 8pt Grid / Elevation)"]
        U3["decompose_layout_skeleton\n(Semantic Flex/Grid & Breakpoint Solver)"]
        U4["extract_motion_physics\n(Cubic-Bezier / Spring Physics / Keyframes)"]
        U5["synthesize_vibe_component\n(Chameleon Multi-Framework Synthesizer)"]
        U6["audit_ui_fidelity\n(WCAG Contrast / Touch Target / CLS Auditor)"]
    end

    subgraph Target["3. Host Project UI Assimilation"]
        T1["React / Next.js TSX + Tailwind v3/v4"]
        T2["Vanilla HTML5 + CSS Custom Properties"]
        T3["Vue 3 / Svelte Component + Token Theme"]
    end

    Input --> U1
    U1 --> U2 & U3 & U4
    U2 & U3 & U4 --> U5 --> U6 --> Target

Related MCP server: Atelier-MCP

MCP Tools & Resources

6 Core Tools

2 Built-in MCP Resources

• ui2vibe://presets/motion-curves — Reference catalog of physical spring & cubic-bezier presets (snappy micro-interaction, fluid sheet transition, elastic bounce, decelerated enter).

• ui2vibe://guide/ui-absorption-workflow — Step-by-step playbook for absorbing reference UI designs into host projects without external UI bloat.

Quick Start

git clone https://github.com/KR-PRO-Labs/ui2vibe-mcp.git
cd ui2vibe-mcp
npm install
npm run typecheck
npm test
npm run build

MCP Client Configuration

{
  "mcpServers": {
    "ui2vibe": {
      "command": "node",
      "args": ["/path/to/ui2vibe-mcp/dist/index.js"]
    }
  }
}

License

MIT © KR-PRO-Labs & @sjdhfjdj30-hash