Demo 63: Multi-Provider Design Platform

Overview

VibeCody’s Design panel now supports five integrated design and diagramming providers — Figma, Penpot, Evolus Pencil, Draw.io, and an in-house AI diagram generator — plus a cross-provider Design System Hub for token management. This makes VibeCody the only AI coding assistant with deep design-to-code capabilities built in.

Time to complete: ~20 minutes

Prerequisites

• VibeCoder desktop app running (Tauri 2)
• Optional: Penpot account (cloud at design.penpot.app or self-hosted)
• Optional: Draw.io Desktop or browser access

Tab 1 — Draw.io Deep Integration

The Draw.io tab embeds a full diagrams.net editor via embed.diagrams.net with a postMessage bridge for bidirectional communication.

Sub-tabs

Where the file goes

Save writes back to the file you opened. A diagram that has no name yet asks for one — a bare auth-flow becomes diagrams/auth-flow.drawio, and a path you spell out is used exactly as typed. The message afterwards names the file and its size, because “saved to workspace” is the one thing a user does not need to be told.

Export (PNG · SVG · editable SVG · PDF) writes into the workspace beside the diagram: docs/architecture.drawio exports to docs/architecture.png. draw.io’s own export menu downloads through the browser, which the Tauri webview does not surface — so that route produced a file nobody could find.

AI Diagram Generation

Input: "OAuth 2.0 authorization code grant between SPA, backend, and identity provider"
→ kind: sequence
→ format: drawio_xml
→ Output: Complete <mxfile> XML with sequence diagram

C4 Model Templates

The c4_context and c4_container templates follow the C4 Model conventions:

• Blue (#1168bd): internal systems and containers
• Grey (#999999): external systems and actors
• Context → Container → Component hierarchy preserved

Tab 2 — Pencil Wireframes

Evolus Pencil (.ep format)

The Pencil tab generates low-fidelity wireframes in the Evolus Pencil format — ZIP archives containing content.xml with <Document>/<Page>/<Shape> structure.

Available templates:

Templates are generated locally — no provider selected and no network needed. The comma-separated Sections field feeds dashboard (sidebar sections), mobile_app (one screen per entry), settings_page (setting groups) and data_table (columns); Landing Page and Login Form ignore it.

Export formats

Only the React export needs a provider. Preview renders the HTML export in a sandboxed frame without downloading anything.

TuringWorks Pencil MCP

For .pen files in the active Pencil editor, the MCP tab builds batch_design operations:

foo=I("parent", { type: "rectangle", x: 100, y: 100, width: 200, height: 60 })
U(foo, { fill: "#3b82f6" })

VibeCody does not dispatch these yet — the tab returns the exact tool call, labelled status: "not_dispatched", to run against a connected Pencil MCP server.

Tab 3 — Penpot Integration

Penpot is the open-source Figma alternative. VibeCody connects via the REST API at {host}/api/rpc/command/{method}.

Setup

1. Open VibeCoder → Design → Penpot → Connect tab
2. Enter your Penpot host (e.g. https://design.penpot.app) and access token
3. Click Connect — the token is verified against get-profile, then projects load. A wrong host, an expired token or an unreachable instance is reported with Penpot’s own error; it is never reported as a connection.

Token Export

Colors and typographies are extracted from the Penpot file’s design data:

/* CSS custom properties */
:root {
  --accent-blue: #3b82f6;
  --font-heading: Inter, sans-serif;
}

Component Export

Select any component and export to your target framework:

Tab 4 — AI Diagram Generator

The Diagrams tab generates architecture, flow, ER, sequence, and other diagrams from plain-English descriptions using any configured AI provider.

Supported Output Formats

Live Mermaid Preview

Mermaid diagrams render immediately in the right pane via mermaid.js (dark theme):

Input: "User registration flow with email verification and rate limiting"
→ kind: flowchart
→ format: mermaid
→ Live preview: rendered flowchart with swim lanes

Sample Prompts (click to use)

1. User registration flow with email verification
2. OAuth 2.0 authorization code grant
3. Microservices architecture with gateway and event bus
4. E-commerce ER diagram: User, Product, Order, Payment
5. CI/CD pipeline with scan, staging, manual approval
6. SaaS tenant isolation context diagram (C4)

Tab 5 — Design System Hub

The Hub aggregates tokens from all connected providers into a unified browser.

Token Types

Export Formats

/* CSS Custom Properties */
:root { --accent-blue: #3b82f6; --space-4: 16px; }

// Tailwind Config
module.exports = { theme: { extend: { colors: { "accent-blue": "#3b82f6" } } } };

// TypeScript const
export const tokens = { color: { accent_blue: "#3b82f6" } } as const;

// Style Dictionary JSON
{ "colors": { "primary": { "value": "#3b82f6", "type": "color" } } }

Audit

The audit tab scores your design system 0–100 and flags structural issues:

Score interpretation: ≥80 healthy · 60–79 review warnings · <60 critical issues

Token Drift

Compare two snapshots of a design system to see what changed:

Drift detected:
  accent-blue: #3b82f6 → #2563eb  (changed)
  space-8: 32px → 8px             (changed)
  font-mono: added

VibeCody Default Design System

When no external provider is connected, VibeCody loads its built-in design system:

• 15 color tokens: accent-blue, bg-primary, bg-secondary, text-primary, text-secondary, border-color, success, warning, error, info, purple, green, orange, surface, overlay
• 8 spacing tokens: space-1 (4px) through space-16 (64px)
• 8 typography tokens: font-mono, font-sans, font-size-xs through font-size-2xl

Related Demos

• All demos