Design Tools

Excalidraw129.1k★

Excalidraw is a virtual whiteboard for sketching diagrams, wireframes, and flowcharts in a hand-drawn style. It runs in your browser, it's fast, and the hand-drawn aesthetic means your diagrams look intentionally informal instead of accidentally ugly. A built-in library of pre-made shapes (AWS architecture icons, flowchart symbols, UI components, network diagrams) covers the common cases. MIT licensed, TypeScript. The free version at excalidraw.com gives you the full drawing tool: shapes, arrows, text, images, freehand, and a library of reusable components. Real-time collaboration works without an account. Export to PNG, SVG, or the native .excalidraw format. There's also an npm package to embed the editor in your own app. The paid tier (Excalidraw+) adds persistent storage, team workspaces, and a link-sharing system. Pricing is around $7/mo per user. Self-hosting the editor is free and straightforward. It's a static site you can deploy anywhere. Solo: free excalidraw.com covers everything. Small teams (2-10): free works fine. Export and share files manually, or self-host for private use. Growing teams: Excalidraw+ makes sense when you need shared libraries and persistent workspaces. Large: evaluate whether your existing design tools (Figma, Miro) already cover this. The catch: it's a drawing tool, not a diagramming tool. No auto-layout, no data-driven diagrams, no flowchart snapping logic. If you need structured diagrams that update from code, look at Mermaid or tldraw. Excalidraw is for when you want to think visually, fast.

open-design84.2k★

Open Design is a local-first tool that turns your AI coding agent into a design studio. Point it at Claude Code, Cursor, Codex, or any of twenty-plus agents it supports, and it generates UI prototypes, dashboards, slide decks, images, and even video, all on your own machine, with no proprietary cloud in the middle. It's Apache 2.0 and positions itself as the open answer to tools like Vercel's v0 and Figma Make. The recent work has pushed it well past a simple prototype generator. It now ships with 150-plus built-in design systems, so outputs can auto-adopt a specific brand's tokens and look, plus a library of prebuilt skills for common jobs and a growing plugin marketplace. Video comes through HeyGen. Under the hood it's a Next.js and Electron app you can run as a desktop install or deploy with Docker. Setup is moderate, Node and pnpm, more moving parts than a single CLI but not painful. You bring your own model keys, and the media features lean on outside services like HeyGen that carry their own costs. It's genuinely useful if you want AI-generated design work without handing your prompts and outputs to a hosted platform. Solo builders and small teams experimenting with agent-driven design are the sweet spot. The catch is maturity. This is still a 0.x project moving fast, with a broadening scope and a healthy pile of open issues. The brand-design-system layer is brand new. If you need something stable and supported today, v0, Framer AI, or Lovable will feel more finished, at a subscription cost. If you want local-first and open, and you can tolerate the rough edges, Open Design is one of the few real options.

Penpot58.2k★

Penpot is the open source design tool: no vendor lock-in, no price hikes, your files on your server. It's a full design and prototyping platform that runs in the browser. MPL-2.0 licensed, backed by a company (Kaleidos) with real funding. You get vector editing, components, design tokens, prototyping, and real-time collaboration. It uses SVG natively, which means your designs are standard web formats from the start. The cloud-hosted version is free for unlimited projects and files. Self-hosting is also free. Penpot doesn't gate features behind paid tiers; the enterprise version adds custom branding, priority support, and SLA guarantees. The catch: Penpot is not Figma. The UI is slower, the plugin ecosystem is nascent, and designers used to Figma will notice the gaps: auto-layout is improving but not at parity, and the component system is less mature. If your designers are productive in Figma and there's no mandate to self-host, switching has real friction. But if data sovereignty matters or you can't justify Figma's $15/editor/mo at scale, Penpot is the only serious open source option.

tldraw49.6k★

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.

Kami10.4k★

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. It now ships nine template types: one-pagers, long documents, formal letters, portfolios, resumes, slides, equity reports, changelogs, and landing pages. MIT-licensed. Installation is loading one skill into your agent of choice, available for Claude Code, Claude Desktop, Codex, and generic agent frameworks. No app to run. The system enforces typography and spacing rules so output stays consistent whether you are writing a one-page memo or a long report, and it now includes built-in SVG diagram types plus Mermaid support for sequence, class, and ER diagrams. HTML output means you print directly or export to PDF. English, Chinese, and Korean are all supported. 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 export. 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. Documents in English or Korean, and Chinese docs using a different font, are fully unrestricted.

Webstudio8.8k★

Webstudio is an open-source visual website builder, and it says the quiet part out loud in its own tagline: it's a Webflow alternative. Drag-and-drop canvas, control over every CSS property, connect any headless CMS, and here's the kicker, it exports every project as a standard Remix/React app you can host anywhere. AGPL, free, no lock-in on what you build. Running it yourself is real work. This isn't a static template, it's a full TypeScript app with a builder, a database, and asset storage. Most people use the hosted version, which has a free Hobby tier (custom domains, a few thousand pageviews a month) and a Pro tier around $15/mo that unlocks CMS integrations, client editing mode, and staging. Self-hosting is possible and truly lock-in-free, but budget the ops time. For designers and small teams who want Webflow's visual power without Webflow's bill, or who need to own their hosting, this is the strongest open-source option going. Solo and small teams do fine on the free Hobby tier or cheap Pro. Larger teams weighing self-host should price the ops time against the hosted seats. Two catches. The AGPL license is copyleft, so if you self-host and modify it inside a commercial product, read the terms first. And the most convenient path, hosted with custom domains and CMS, is the paid one, so "free" really means "free if you do the hosting yourself." The builder is excellent; the freedom has an ops price tag.

open-codesign7.7k★

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.

plasmic6.9k★

Plasmic is a visual builder for React apps and sites that plugs into your real codebase. Designers and non-developers drag and drop UI, developers wire in custom React components and data, and nobody's stuck exporting dead mockups. The client libraries are MIT and free; the Studio you actually build in is a hosted app. Self-hosting is technically on the table, the platform directory is AGPL, but it's a full app plus backend plus database and it's barely documented for self-host. In practice you use the hosted Studio. So read this less as "free self-hosted tool" and more as "SaaS with an open client." The free tier is real: unlimited projects, a headless CMS, custom domains, three collaborators, with a Plasmic badge on your site. Paid starts at $39/mo to drop the badge, $103/mo for a bigger team and AI, and $399/mo for A/B testing and scheduling. The gates are seats, advanced content features, and branding. Solo builders and tiny teams do fine free. The moment you need a fourth collaborator or want the badge gone, you're paying. The catch is the one every open-core visual builder has: the free tier is a real product right up until your team grows, and then the seat cap does exactly what it's designed to do. If you want an open alternative to Webflow or Builder.io that lives in your codebase, Plasmic is a strong one. Just go in knowing the hosted Studio is the actual product.

infinite-canvas4.6k★

infinite-canvas is an open source workspace for AI image creation. It pulls image generation, reference editing, a freeform canvas, a prompt library, and a chat assistant into one interface, so you can lay out ideas and iterate on results in one place instead of bouncing between tabs. AGPL-3.0, free, and meant to run locally. The pitch is the workflow, not the models. A canvas where you arrange references and generations, manage prompts and assets, and refine visually is a real improvement over a single generate-and-download box. It's aimed at one person or a small team running it on their own machine, not a public multi-user deployment. The catch: it's openly in development, and the maintainers say data compatibility between versions isn't guaranteed and you should fork it if you need stability. Treat it as a promising early tool for personal AI-art workflows, not something to depend on. Worth trying if you generate a lot of images and want a real workspace. Wait if you need reliability.

design-extract3.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.

sticker-forge682★

Sticker-forge makes die-cut stickers you can peel off the screen, complete with a satin backing, realistic lighting, and a little peel sound. Build them from text or uploaded images in a WebGL canvas, and because it ships a framework-agnostic web component and JS API, you can embed the whole effect in your own site rather than just using the hosted maker. The engineering is nicer than the premise suggests: custom WebGL shaders for the peel physics, HEIC image conversion, and synthesized audio for the peel itself. MIT licensed, and the hosted demo is free to play with. Solo or team, it costs nothing. Use it when you want a playful, tactile touch, a fun sticker generator on a marketing page, or interactive stickers in a product. The catch is that this is a novelty, and it doesn't pretend otherwise. It's one very well-executed WebGL effect. Delightful, genuinely fun to use, but not a tool that earns a place in a serious workflow. Grab it when you want a moment of polish, not a feature.

Glaxnimate32★

Glaxnimate is a free desktop editor for making Lottie animations, the lightweight vector animations that play in apps and on the web. LottieFiles is the usual on-ramp here, but it's a hosted platform that meters exports and nudges you toward paid plans. Glaxnimate runs on your own machine, exports the same Lottie JSON, and costs nothing. GPL licensed, now maintained under the KDE project. There's no server and no account: you install it and open it like any other app on Windows, Linux, or macOS. It edits vector shapes on a timeline and exports to Lottie, SVG, animated PNG, GIF, or video. It won't feel as polished as a commercial tool, the interface is functional rather than slick, and serious motion-graphics work still belongs in After Effects with the Bodymovin exporter. For icons, loaders, and simple UI animation, it does the job without a subscription. This is the right tool if you make the occasional Lottie animation and don't want a hosted platform metering your exports or watching over your shoulder. Solo developers and small teams: this covers you for free. Larger design teams already living in After Effects will keep using that plus Bodymovin, and reach for Glaxnimate when they want a quick standalone edit without firing up the Adobe stack. The catch is reach. Glaxnimate's real home is GitLab under KDE, so its GitHub presence looks tiny and the project moves at the pace of a small volunteer team. It's stable and actively maintained, but don't expect the tutorial library, the marketplace, or the collaboration features a hosted platform sells you. You're trading the ecosystem for ownership and a price of zero.