19 AI design-to-code tools rated for one job: generate UI → own real React/Tailwind → e2e-test on a mocked backend → wire the real backend last, for a Vite + React Telegram Mini App.
The axis that matters isn't "AI makes UI" — it's canvas-in-your-IDE + an MCP round-trip. On any tool with a real MCP server, the external agent's model does the codegen — so Fable 5 (via Claude Code) and Kimi 3 (via Cursor/OpenCode) run on top of it. Penpot is the only one model-agnostic even for the design step.
Top picks for your Mini App
spine
pen.dev
Keep as the backbone
Canvas-in-IDE + `.pen` format + MCP. The workflow doc already builds on it; everything below is a swap-in or complement.
Pricing not public
#1 alt
Magic Patterns
Best MCP round-trip
Two-way MCP into Claude Code/Cursor/Codex, React + Vue, built to hand clean components to your own backend.
$20/mo · MCP included
#2 alt
Subframe
Cleanest code
Deterministic export (no LLM in export), React + Tailwind + Radix, design-system-first. Pick if code quality is the goal.
$29/editor/mo
wildcard
Penpot
OSS + any model
Open-source, self-host on the Mac Mini, point the MCP straight at Kimi 3 or Fable 5. MCP is pre-beta.
Free self-host · $7/user cloud
Compare all 19
Tier
MCP
Tool
Fit ▼
Code output
Model
MCP
Stack
Price
No tools match those filters.
MCP first-party round-tripPartial weak / inbound / roadmapUI UI-onlyFull full-stackSite site builderFit = suitability for the Telegram Mini App workflow (0–100, my rating)