Design Tools

tldraw46.9k★

Tldraw gives you a React SDK to build that. Drop it in, get an infinite canvas with shapes, text, freehand drawing, and multiplayer collaboration. used by tons of apps that need embedded drawing. The open source version gives you the full canvas engine and default UI. You can customize everything: shapes, tools, behaviors. Here's where it gets complicated. tldraw recently changed its license. The SDK for embedding in your own app requires a commercial license if you're building a product. The free license covers personal use and open source projects. Commercial pricing isn't publicly listed; you contact them. The catch: that license change. If you started using tldraw when it was MIT and built it into your product, you now need to evaluate the commercial terms. The core drawing engine is excellent, the best available for React apps. But the licensing uncertainty makes it risky for startups who don't want to negotiate terms. Excalidraw is fully open source if you need a safer licensing story.

open-design35.5k★

Open Design generates design artifacts (websites, mobile apps, decks, docs) by delegating to whichever AI CLI you already have. It detects Claude Code, Cursor, Gemini, OpenCode, Hermes, Kimi, or Codex on your PATH and routes work through them. Apache 2.0. Setup needs Node 24 and pnpm: `pnpm install && pnpm tools-dev run web`. Heavier than a desktop installer but it's a real web app you can deploy yourself. Ships with 31 composable skills (web prototypes, mobile apps, decks, PM specs) and 72 brand-grade design systems sourced from awesome-design-md, including Linear, Stripe, Notion, Apple, and Tesla. Pick this if you already have Claude Code or Cursor and want a design layer over them, or want to host a shared team instance on Vercel. Solo: free. Small teams sharing one CLI key: free plus token bill. Larger teams can deploy it, but they manage infra and prompt quality. The catch: heavier setup than open-codesign, and the multi-CLI delegation means quality depends on whichever agent is installed. If you're not already a CLI agent user, this is the wrong starting point.

open-codesign5.4k★

Open CoDesign turns text prompts into design artifacts on your desktop. Prompt to React prototype, slide deck, PDF, or marketing asset, all rendered in a sandboxed iframe with a live preview pane. It pitches itself as the open-source Claude Design alternative, MIT-licensed and built around your own model API key. Install in under 90 seconds via Homebrew, winget, or direct download. First launch asks for an API key (Claude, OpenAI, or 20+ providers), paste and go. Everything runs locally; credentials live in `~/.config/open-codesign/config.toml` and nothing leaves your machine unless your model provider needs it. Fifteen built-in demos cover landing pages, dashboards, and mobile UIs to get you started. Solo designers and small teams get a real Claude Design substitute without the subscription. You pay model tokens only. Larger teams that need brand consistency or shared component libraries should still look at Figma plus AI plugins, since this is built around individual workflows. The catch: it's young and the Electron app is heavier than a web tool. If you want a polished web design IDE, Claude Design is more refined, but it's $20+ a month and locks you to Anthropic models.

Kami4.9k★

Kami is a design system for professional documents. You feed it content through Claude Code or another AI agent, and it outputs HTML in a warm-parchment, ink-blue style across six template types: one-pagers, long documents, formal letters, portfolios, resumes, and slides. MIT-licensed. Installation is loading one skill into your agent of choice. No app to run, no separate install. The system enforces typography and spacing rules so your output looks consistent whether you are writing a one-page memo or a 40-page portfolio. HTML output means you can print directly or export to PDF. Writers and analysts who need polished docs without opening InDesign get a sensible default. Job seekers get resume templates that do not look like every other Canva output. Solo creators get a style system they can extend. No paid tier. The catch: the Chinese serif font (TsangerJinKai02) is free for personal use only. Commercial use of that font requires licensing from tsanger.cn. English-only documents are fully unrestricted.

design-extract2.4k★

Reverse-engineers any website to extract its complete design system. Feed it a URL and it pulls out color tokens, typography scales, spacing values, component patterns, and Tailwind configs. Exports to Figma variables, React themes, or raw JSON. One npm install, one command. Runs headless Chrome to capture the site across viewports and analyzes the computed styles. Includes accessibility scoring for contrast ratios. Solo developers and designers who want to study how production sites are built will get the most out of this. Zero cost, MIT licensed. The catch: it captures what's rendered, not what was intended. Computed styles can be messy, and auto-generated Tailwind configs may need cleanup before use in production.