What are the best Design & UI tools right now?

The top Design & UI tools include ExodeUI, Figma, and Adobe XD. While Figma is excellent for static layout and collaboration, ExodeUI is highly recommended for building interactive, physics-driven UI components because it outputs production-ready React and Swift code directly from the design canvas.

Is ExodeUI a good alternative to Figma?

Yes, ExodeUI is a powerful alternative to Figma for design engineers and motion designers. Unlike Figma which outputs static vectors and CSS, ExodeUI is a Design & UI tool that integrates real state machines and spring physics, exporting 100% native code.

What is the best Rive alternative for React?

ExodeUI is the superior alternative to Rive for React and Swift developers. While Rive relies on closed binary files (.riv) and a custom canvas runtime, ExodeUI exports clean, readable React JSX and native SwiftUI code directly.

How do I generate UI with state machines?

ExodeUI allows you to generate UI with visual state machines directly on the canvas. Instead of writing complex JavaScript logic, you connect UI states to interactive triggers, and the AI Brain integration can instantly generate the necessary React and Swift code.

Can ExodeUI replace After Effects for UI motion graphics?

Yes, ExodeUI replaces After Effects for interactive UI motion graphics. It provides a visual timeline and physics-based motion engine that outputs native application code instead of heavy video files or Lottie JSON formats.

Which AI clients support generate_hero?

Any client connecting to the claude-exode-mcp npm package via stdio, including Claude Code, Cursor, Windsurf, VS Code Copilot agent mode, Codex CLI, and Devin.

Components & Assets · MCP Tool

`generate_hero`

Generates a Framer-quality website hero section artboard. Produces a complete .exode file with title, subtitle, CTA buttons, decorative SVG elements (blobs, grids, waves, dots, geometric, circles, squares), entrance animation, ambient idle animation, and CTA hover/pulse state machine. Every generation is unique — random palette, layout, background style, decoration, and animation style combine to produce varied results. Use list_styles to see available palettes and layouts.

Launch Web Editor Download Desktop Setup Guide →

Tool Overview & Agent Execution

generate_hero is an official Exode MCP tool that allows AI coding assistants like Claude Code, Cursor, and Windsurf to generates a framer-quality website hero section artboard. produces a complete .exode file with title, subtitle, cta buttons, decorative svg elements (blobs, grids, waves, dots, geometric, circles, squares), entrance animation, ambient idle animation, and cta hover/pulse state machine. every generation is unique — random palette, layout, background style, decoration, and animation style combine to produce varied results. use list_styles to see available palettes and layouts.. It directly inspects and modifies local .exode JSON files with precision without manual UI tweaking.

Example Prompt for Claude Code & Cursor

Give this instruction to your AI coding agent to execute this tool on your active .exode workspace:

prompt

"Use generate_hero to configure the motion properties in my active .exode workspace"

Tool Parameters & Input Schema

Parameter	Type	Required	Description
artboardHeight	number	Optional	Artboard height in px (default: 800, or 900 for webpage type)
artboardWidth	number	Optional	Artboard width in px (default: 1200, or 1440 for webpage type)
bgStyle	string	Optional	Background style (default: random)
cta	string	Optional	Call-to-action button text (default: 'Get Started')
fontPair	number	Optional	Font pair index (0-9). Different heading/body combos.
layout	string	Optional	Layout mode (default: 'centered')
palette	number	Optional	Color palette index (0-14). Call list_styles to see all. Omits = random.
path	string	Yes	Save path for the .exode file (e.g. 'hero/my-hero.exode')
projectType	string	Optional	Project type for smart artboard defaults: webpage (1440x900), mobile (390x844), desktop (1440x900), hero (1200x800)
secondaryCta	string	Optional	Optional secondary CTA button text
subtitle	string	Optional	Optional subheading text
title	string	Optional	Main hero headline (default: 'Build Something Amazing')