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 collaborative design platform, now a complete creation ecosystem. Config 2025 launched Draw (vector illustration), Sites (web publishing), Make (AI prototyping with Claude), and Buzz (branded asset production). As of March 2026, Figma enforces AI credit limits across all plans — 500 credits/month on free (150/day cap), scaling to 4,200 on Enterprise — with pay-as-you-go billing coming in May. The MCP server now supports two-way workflows across Cursor, Warp, Factory, and Augment, with Code Connect UI updates adding multi-file component attachments and cross-framework code previews for Org and Enterprise plans.
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. Built by Stephen Haney, formerly of Modulz/Radix UI; currently in open alpha at $16/month.
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. The 2025 Copenhagen update is its biggest UI overhaul since 2020: contextual toolbar, rewritten Inspector, wrapping Stacks, and macOS Tahoe's Liquid Glass aesthetic. Loyal community but faces headwinds from Figma's browser-based collaboration and AI features.
Framer
www.framer.com
Design-to-production platform for modern websites — part Figma, part Webflow. AI generates complete page layouts from prompts, with strong animation controls, CMS, and one-click publishing. Raised $100M Series D at $2B valuation in August 2025. Best for design-forward landing pages and portfolios; less suited to large content-heavy sites.
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.