Open Design is a local-first, open-source design-to-code platform that serves as an alternative to Claude Design. It detects installed coding-agent CLIs (26+ supported), runs design skills against brand-grade DESIGN.md design systems, and streams artifacts (prototypes, decks, images, video, HyperFrames) into a sandboxed preview. The architecture is a monorepo with pnpm workspaces, comprising a Node.js daemon (Express + SQLite), a React/Next.js web SPA, an Electron desktop shell, and an Astro landing page. Core capabilities include a plugin system with 277 official plugins, design system management, AI-powered artifact generation, collaboration (workspace, team resource sharing, presence), critique/theater scoring, media generation, and research integration (Tavily). The daemon acts as a local server that manages projects, conversations, agent runtimes, and SSE event streaming. The web client provides a rich UI for chat, project management, design system browsing, plugin marketplace, and real-time collaboration. The desktop app wraps the web client with native features like folder pickers, deep-link handling, and auto-updater. The codebase demonstrates high craftsmanship with clean abstractions (HTTP adapter pattern, plugin architecture, agent runtime definitions, SWR cache, backoff controller, singleton registries) and extensive test coverage (Vitest unit tests, Playwright e2e). It is actively maintained with a rapid release cadence and modern dependency management.
Penpot is a full-stack, open-source collaborative design and prototyping platform. The codebase is a polyglot monorepo comprising a Clojure backend (REST/RPC API, PostgreSQL, Redis, S3 storage), a ClojureScript frontend (React-based UI with custom text editor and design system), a Rust WebAssembly renderer (Skia-based shape rendering and export), a Node.js media processor (image/font conversion), a TypeScript MCP server (AI integration via Model Context Protocol), and a plugin ecosystem (SES-sandboxed JavaScript runtime with Angular/TypeScript example plugins). The architecture follows a microservices-like pattern with separate deployable components, real-time collaboration via WebSocket/Redis message bus, and background task processing. The system is designed for self-hosting and enterprise deployment with features like SSO, audit logging, webhooks, and rate limiting.
Onlook is a browser-based visual editor for building and modifying Next.js + Tailwind CSS websites. It provides a Figma-like canvas where users can directly manipulate React components, with changes written back to source code via AST-based transformation. The application integrates an AI chat assistant that can generate code, edit files, and run terminal commands through a set of well-defined tools (e.g., search-replace, file edit, bash). The monorepo architecture separates concerns into packages for AI agents, code parsing, font management, UI components, database access (Drizzle + Supabase), git operations, and sandbox management (CodeSandbox). It also includes a complete billing system (Stripe), GitHub integration for project import, custom domain management, and a publish/deployment pipeline. The codebase demonstrates strong engineering practices with type-safe tRPC APIs, MobX state management in the editor, extensive use of Radix UI primitives, and a consistent monorepo toolchain (Bun workspaces, ESLint, Prettier). While the editor engine is somewhat monolithic, individual packages like the AST parser, font helpers, and utility library are well-isolated and testable.
Playroom is a code-oriented design environment for React component libraries. It allows developers to write JSX code in an in-browser CodeMirror editor and see live previews rendered inside isolated iframes, with support for multiple themes and viewport widths simultaneously. The application provides a CLI (playroom start / build) that generates a dynamic webpack configuration, serves the editor UI via webpack-dev-server in development, or produces a static build for production. The frontend is a single-page React application using Vanilla Extract for CSS-in-JS, with state managed via React context and persisted to IndexedDB via localforage. Code is compiled client-side with sucrase, and the entire editor state (code, themes, widths) can be compressed into shareable URLs via lz-string.
This is a monorepo providing a feature-rich sketch-ruler component library for Vue 3, targeting design tools, low-code platforms, and big-screen visualization. It includes a framework-agnostic core package (`@sketch-ruler/core`) with 2D transform engine, plugin system, snap engine, canvas manager, and minimap engine—all zero DOM dependencies. Separate packages handle canvas rendering (`@sketch-ruler/canvas`) with optimized label caching, offscreen caching, and input management (mouse, keyboard, wheel), and a selection engine (`@sketch-ruler/selecto`). The main Vue package (`vue3-sketch-ruler` / `@sketch-ruler/sketch-ruler`) provides Vue components (SketchRuler, Minimap, RulerLine) plus composables for canvas transform, ruler scale, and snap detection. The architecture is cleanly layered, well-tested with Vitest, and shipped via npm. The demo site showcases multiple use cases (editors, whiteboards, org charts, big-screen displays). The code demonstrates mature engineering with reusable patterns, though the large monorepo and external demo dependencies introduce some maintenance surface.