Design Tools

Library of design skill files and UI prompts that give AI coding agents — Claude, Cursor, Codex, Google Stitch — a consistent visual design system to follow when generating interfaces.

AI vector design platform for generating, editing, and animating production-ready SVGs from text prompts or image input. a16z-backed with API access to their Arrow models.

A design canvas that outputs production-ready HTML, CSS, and React instead of a static file. Powered by Claude Code. Currently in public beta.

A browser-based design tool from the team behind Motion (Framer Motion). Design visually on live pages while an AI agent writes the corresponding code directly into your project files. Works with React, Vue, plain HTML, and Tailwind. One-time purchase, early access.

A CSS-like declarative stylesheet language for binding sounds to UI events on the web. Write selectors and cascade rules for audio the same way you already do for visual styles.

A web shader animation tool for frontend developers and design engineers. Create interactive visual effects without writing GLSL from scratch. Free tier plus Pro subscription.

Rivet is an open-source visual programming environment for building AI agents and LLM workflows — you wire together nodes for prompts, conditionals, tool calls, and data transformations on a drag-and-drop canvas instead of writing prompt-chaining code. Built by Ironclad and available as a TypeScript library for embedding in your own app. Model-agnostic (OpenAI, Anthropic, Google), supports parallel execution, real-time remote debugging, and exposes any graph as an HTTP endpoint via `rivet serve`.

Captures screenshots of UI you love, extracts design tokens with AI, and builds a taste profile your coding assistants actually use. Bring your aesthetic to every AI-generated build.

Automated design reviews on every pull request. Catches accessibility issues and visual bugs in AI-generated code across React, Angular, Vue, and Svelte — expert design feedback baked into your CI pipeline.

The official open-source, local-first Claude Design alternative. Generate decks, landing pages, dashboards, and brand systems using Claude Code, Codex, Cursor, Gemini, or Qwen — driven by composable skills and portable components.

AI frontend agent that designs, codes, and tests in one loop. Kombai reads your existing codebase, generates production-ready React/Next.js, then inspects the live browser output to fix what's broken — without leaving your IDE.

A design tool where AI agents are first-class, not bolted on. Artboards, layers, auto-layout, and 66 MCP tools — Claude Code, Cursor, and Windsurf can design directly in the canvas. Built on React and Tailwind under the hood, with hosting included. Free.

High-performance code editor built in Rust with GPU rendering via a custom GPUI framework — genuinely faster than VS Code with 0.5s startup, 120fps scrolling, and 2.5x lower power draw. Native multiplayer editing baked in from day one. Agentic editing, open-source Zeta model for autocomplete, and multi-model AI panel. Open source under GPL; Windows support arrived in late 2025.

Private hosting for internal sites and prototypes. Secure by default, shareable in seconds.

Blueberry is a Mac workspace that combines a code editor, terminal, browser preview, and canvas in one window, with a built-in MCP server so your AI always has full context: open files, browser preview, terminal output, and pinned apps like Figma, GitHub, Linear, and PostHog. It adds flow mode, tiling layouts, and ambient music for focus. A complete rethink of the dev environment for people building software products.

Google Antigravity is an agentic IDE built on a forked VS Code that lets AI agents autonomously plan, write code, run the terminal, and test in a browser with minimal hand-holding. It pairs with Google Stitch (their text-to-UI design tool) to form a full design-to-code pipeline. Available free in public preview with generous Gemini 3 Pro limits; also supports Claude and OpenAI models.

A toolkit for coding agents — Claude Code, Cursor, Codex — to build UIs that don't embarrass you. Made by Adam Wathan and Steve Schoger, the team behind Tailwind CSS and Refactoring UI. Early access.

Anima is a Figma plugin and AI Playground that converts designs into production-ready React, Vue, HTML, Tailwind, and TypeScript code. It was Figma's Dev Mode launch partner and has 1.5M+ installs, making it one of the most established design-to-code tools. The 2025 update adds multi-screen prototype import so entire Figma flows convert to working code in one go, and a diff engine that applies small edits in seconds.