4 apps Figma
Open Design screenshot thumbnail

Open Design

With over 84,000 GitHub stars since its April 2026 launch, Open Design has emerged as the definitive open-source alternative to Anthropic's Claude Design. Rather than shipping its own language model, Open Design acts as an agent-agnostic design orchestration layer that auto-detects 25+ coding CLI executables on your PATH — including Claude Code, Codex, Cursor, Gemini CLI, OpenCode, Qwen, GitHub Copilot CLI, Hermes, and Kimi — or connects to any OpenAI-compatible endpoint via its built-in BYOK proxy at /api/proxy/stream. The platform introduces a file-based protocol where SKILL.md files define composable design workflows and DESIGN.md files establish version-controlled brand systems, currently shipping 31 first-party skills and 72 brand-grade design systems. Output spans web and mobile prototypes, live dashboards, presentation decks, raster images, video, and HyperFrames motion graphics, with export pipelines for HTML, PDF, PPTX, MP4, and ZIP. The daemon architecture uses SQLite for project state and serves a sandboxed iframe preview renderer with vendored React and Babel for JSX artifacts. Deployment options include the native desktop app for macOS, Windows, and Linux, local daemon mode via pnpm tools-dev, a single-container Docker Compose path serving both API and Next.js frontend on port 7456, and Vercel deployment for the web layer. On RepoCloud, deploy Open Design on a dedicated VPS with full root SSH access, persistent storage for your design systems and generated artifacts, and complete control over which AI providers and agent CLIs your instance connects to, all under the Apache-2.0 license.

Deploy
OpenPencil screenshot thumbnail

OpenPencil

OpenPencil is the open-source design editor that reads and writes native Figma .fig files using the same Kiwi binary format — enabling bidirectional copy-paste between Figma and OpenPencil without data loss. The built-in AI assistant provides 90+ design tools through a chat interface, creating and modifying shapes, fills, strokes, auto-layout, components, variables, and boolean operations from natural language prompts, with BYOK support for Anthropic, OpenAI, Google AI, OpenRouter, Z.ai, MiniMax, and compatible endpoints. A Skia CanvasKit WASM renderer paired with Yoga WASM layout engine delivers Figma-parity rendering with flex and CSS Grid support including gap, padding, and alignment. The headless CLI inspects node trees via XPath queries, lints naming and accessibility, converts between document formats, analyzes color and typography patterns, extracts design tokens, and exports to PNG, SVG, JSX/Tailwind, and HTML. An MCP server exposes all design operations over stdio and HTTP, connecting Claude Code, Cursor, Windsurf, and Gemini CLI for AI-assisted design automation. Real-time P2P collaboration via WebRTC with Yjs CRDT synchronization requires no server and no account. The Vue SDK provides headless components for embedding the editor into custom applications. Ships as a 7 MB Tauri v2 desktop app for macOS, Windows, and Linux, or runs in any browser as a PWA. Running on a dedicated VPS on RepoCloud with guaranteed CPU, RAM, and SSD, full root SSH access, and a browser serial console. MIT licensed.

Deploy
Quant-UX screenshot thumbnail

Quant-UX

Most design tools stop at prototyping; Quant-UX also measures how real users actually perform with the prototype. The visual editor creates prototypes that behave like real apps - functional input widgets, animations, form validation, data binding across screens, and business logic modeled with REST requests and decision elements. Design systems are first-class, with components, design tokens, and master screens; if you design elsewhere, drop in image files or import from Figma. Testing is a shared link or QR code - no installs on the tester's side. Define user tasks up front, and Quant-UX records every session: click heatmaps show where users found (or missed) actionable elements, user journey graphs expose lost users, drop-off charts reveal where tasks stall, and success rates and task KPIs are extracted automatically into a dashboard. An A/B test operator wires two design variants into one prototype and compares task duration, success rate, and interaction counts. In-prototype surveys collect qualitative feedback alongside the numbers, and an AI assistant generates prototype fragments like styled forms on request. The RepoCloud deployment runs the full stack - frontend, backend, and WebSocket server containers over MongoDB - so all test recordings and research data stay on your infrastructure.

Deploy
Draw a UI screenshot thumbnail

Draw a UI

Sketch a wireframe, get working code: Draw a UI turns hand-drawn layouts into web interfaces. It pairs the open-source tldraw canvas with an OpenAI vision model: you sketch a layout - boxes, labels, buttons, arrows, whatever communicates the idea - select the drawing, and click Make Real. The app snapshots your selection as a PNG, sends it to the vision API with instructions to return a single HTML file styled with Tailwind CSS, and renders the result in an iframe directly on the canvas next to your sketch. The loop is iterative: annotate the generated prototype or redraw parts of it, select both the sketch and the previous result, and generate again - the model receives the earlier HTML as context and produces an updated version. Built by Figma engineer Sawyer Hood as one of the first viral GPT-4 Vision demos and the basis for tldraw's "Make Real", it is a Next.js app that runs against your own OpenAI API key. Self-hosting matters here: the upstream demo ships without authentication, so a private deployment keeps your API key from being drained by strangers. MIT-licensed.

Deploy