UI craft is about the quality of the final visual execution — typography, colour, spacing, motion, and the micro-details that separate good design from great. It is the difference between a layout that works and an interface that feels considered.
Tools strong in this facet give designers the precision controls they need: fine-grained typography settings, robust auto-layout, detailed component overrides, and support for the kind of obsessive pixel-pushing that high-craft work requires. They also tend to handle the complex stuff well — intricate nested components, responsive resizing that does not break, and export that preserves intent.
If you care about shipping something that looks as good as you imagined it, this is the facet to weight heavily.
11 tools rated above 6/10
Figma
www.figma.com
The dominant interface design tool at roughly 90% market share, now extended across motion, code, and generation. Config 2026 shipped Code Layers (turn any design element into interactive code with one click), Figma Motion (keyframe timeline on canvas), generative shaders, 3D transforms, and an AI agent with skills and connectors to Notion, Slack, Granola, and GitHub. Dev Mode handles developer handoff without a separate tool.
Agentation
agentation.dev
Agentation is a floating toolbar you add to your React app that lets you click on UI elements and generate structured markdown feedback for AI coding agents. Instead of describing "the blue button in the sidebar," it captures CSS selectors, component names from the React fiber tree, and positional data so agents like Claude Code or Cursor can locate and fix the exact element. Free and open source, works with any AI agent that accepts text input.
Locale
joshpuckett.me/locale
Preview your locally installed fonts in the browser — with adjustable size, weight, sample text, and background options.
Paper
paper.design
Paper is a code-native design tool where every element on the canvas is real HTML and CSS — what you design is what ships, with no conversion step. Its MCP server exposes 24 bidirectional tools so AI agents can not only read your design but modify it: sync tokens from Figma, populate UI with live API data, or convert a design into React/Tailwind and commit to GitHub. The Snapshot Chrome extension (March 2026) lets you paste any live website into the canvas as editable HTML/CSS layers, so you start from production rather than a blank slate. May 2026: QuiverAI's Arrow 1.0 model (a16z-backed, #1 on SVG Arena) is now integrated — generate and edit real editable SVG assets directly in the canvas. July 2026: Paper Shaders — their standalone WebGL effects library — went fully open source (Apache 2.0), free for commercial use. Raised $34M Series A led by Accel and ICONIQ (with Designer Fund, Michael Grinich, Anton Osika) in July 2026 on 25x ARR growth since early 2026. Built by Stephen Haney, formerly of Modulz/Radix UI; $20/month ($16/month annual).
Recraft
recraft.ai
AI design studio for generating production-quality vector and raster assets with brand consistency.
Sketch
www.sketch.com
The original modern UI design tool — a native macOS app that pioneered the design system era. 2026 updates include a local MCP server (connect Claude or Codex directly to your documents), a new eyedropper with colour variable support, selection colours, independent borders, and a revamped fonts panel with In Use / All Fonts tabs. Loyal community, faces headwinds from Figma, but keeps investing in craft and AI integration on its own terms.
Framer
www.framer.com
A website building platform where AI agents live directly on the canvas to design pages, handle breakpoints, write component code, and run accessibility audits. As of July 2026: external agents (Claude Code, Cursor, Codex, Gemini CLI) connect directly to your Framer project, letting your existing AI toolchain work inside the canvas and import codebases from frameworks like Next.js. Branching lets teams fork their live site, test changes safely, and merge back in. Strong animation controls, CMS, one-click publishing, and a creator marketplace that paid out $6.5M in 2025 with no revenue share taken.
Jitter
jitter.video
Jitter is a browser-based motion design tool aimed at designers who want After Effects-style animation without the learning curve. It integrates directly with Figma (300k+ plugin installs), exports to 4K video, GIF, and Lottie, and includes kinetic typography and AI image-to-video generation. Won the Golden Kitty Award 2023 in the Design category.
LottieFiles
lottiefiles.com
LottieFiles is the central ecosystem for Lottie animations — a community library of 400,000+ animations, an online editor, and integrations with Figma, After Effects, Webflow, and Framer. Lottie files are up to 600% lighter than GIFs and render natively on iOS, Android, and web. The platform also handles team collaboration, version control, and the newer dotLottie format for even smaller file sizes.
Rivet
rivet.design
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`.
Subframe
subframe.com
Subframe is a code-first UI builder where every layer maps directly to React and Tailwind components — no mockup-to-code translation gap. It ships 200+ pre-built components, design system support, and clean code export you actually own. A standout feature is MCP integration with Cursor and Claude Code, letting developers prompt new designs from their IDE. Aimed at backend-heavy teams that need to ship quality UI without a dedicated designer.