01 · Structure
Auto layout becomes flex
Frames and groups keep their hierarchy; sections become frame containers. Direction, wrap, gap, padding, alignment, sizing, constraints and relative placement map onto native structure.
This website, the web and MacOS app, and the extension is 100% designed and built with AI(Claude Fable 5, Opus 5 and GPT 5.6). App infrastructure is Convex. There hasn't been a single pixel designed, but all built with prompts.
100% free. Fountible stays free until it isn't.
Apple Silicon build·Intel Mac·All downloads
Fountible renders real React and Tailwind. Paste from Figma or generate in context with Kimi K3, Claude or ChatGPT then refine editable motion and 3D rotation before export. A 3 weekend project by @onuro.
Fountible is only 3 weeks old but already being used by teams at:
Theygaveusdesigntools.Thentheyblockeduswithhandoffs.Theygaveusagenticdesign.Buttheyfailed.Until“Bro”.
Fountible
An infinite canvas that renders real React and Tailwind — no redraw, no handoff.
Starter
$0
Pro
$29
Team
$99
Everything a design tool has
Figma paste, components, variables, animation timelines, 3D transforms and multiplayer — the familiar design workflow mapped onto the web platform so it stays close to production.
Fountible
Frames render live React styled with Tailwind — what you shape on the canvas is exactly what ships in the browser.
export function Hero() {
return <section className="px-7 py-8">
<h1 className="text-3xl
font-semibold">
Ship as real code.
</h1>
</section>;
}
Select any node and copy it as clean React, HTML or SVG. Components, props and theme tokens come along for the ride.
Mia is editing the CTA
Live cursors and presence on a shared canvas. Create a team, share files and fonts — everyone stays in sync.
A compact snapshot of the current canvas is already in context. Attach a layer to add its exported markup and, when capture succeeds, a visual reference.
Use your Kimi K3 API key on web or desktop, or connect a Claude or ChatGPT subscription locally. Every model works on the same editable React and Tailwind canvas.
Figma → Fountible
Paste a Figma selection directly onto the canvas. Supported frames, auto layout, text, shapes, vectors, fills and effects become native Fountible layers — without an export file, plugin or import wizard.
Layers
$29 / month
✓ Unlimited projects
✓ Team libraries
✓ Motion export
Layers
Generated styles
01 · Structure
Frames and groups keep their hierarchy; sections become frame containers. Direction, wrap, gap, padding, alignment, sizing, constraints and relative placement map onto native structure.
02 · Detail
Mixed-style text, parametric shapes, pen vectors, fills, gradients, strokes, shadows, blur, opacity and blend modes arrive as supported editable properties.
03 · Flow
Use ordinary copy and paste. The scene is decoded locally, centered in your current view and selected in one undoable step so you can continue designing immediately.
Complex details may be approximated. Image fills become self-contained when the source Figma file allows link access; the guide covers fallbacks and known limits.
Context-aware AI
Every request begins with the current page, top-level canvas outline, selected layers and design variables. Attach a layer or image when you want an exact reference. Then generate with your Kimi K3 key, Claude or ChatGPT directly into editable React and Tailwind.
AI
Bring a Kimi or Anthropic key anywhere, or use a Claude / ChatGPT subscription on desktop.
Your key · web and desktop
Claude subscription
Claude Pro or Max via Claude Code.
OpenAI Codex
Your ChatGPT plan via Codex.
Anthropic API key
Your key · web and desktop
API keys are encrypted at rest. Subscription sign-ins stay on your machine and run through the desktop app.
Pro
Card added$29 / month
The model receives a compact canvas snapshot first, then can inspect exact layer detail or use a visual reference you attach when the task needs it.
Bring a Kimi K3 or Anthropic API key on the web and desktop. Prefer the subscription you already have? Claude and ChatGPT connect locally through the desktop app.
Motion, built into the canvas
Add a polished entrance in seconds or open the timeline for full choreography. Every keyframe stays attached to the real layer — including 3D rotation, solid fill or stroke, blur, size and radius.
Give every layer a point of view.
01 · Presets
Fade, slide, scale, blur, rotate, flip, grow, wiggle, spin, pulse or float. Trigger on load, in view, hover or press, then tune delay, stagger and easing.
02 · Timeline
Scrub the scene, drag individual keyframes, multi-select for batch easing or deletion, snap to time or another property, and retime a layer’s entire animation span without rebuilding it.
03 · Real output
Export the frame that owns the motion and Fountible emits its first non-empty clip as plain anime.js — including 3D rotation. Motion itself adds only the anime.js dependency.
Start by hand or ask the assistant to build the timeline from a prompt. Either way, every keyframe remains visible and editable.
Built into the canvas
Design-system tools, editable motion, spatial transforms and collaboration — shown the way they work inside Fountible.
Create a main component, reuse instances, override text and styles, then reset or jump back to the source.
bg-brand
rounded-card
gap-space-lg
opacity-muted
Color, number, radius and opacity variables mint real utilities. Change one token and every usage updates.
Grain gradient
Live shader layer
Add mesh and grain gradients, waves, Voronoi, halftone, liquid metal, water or ASCII as parameterized layers — not flattened images.
Rotate on X, Y and Z, then tune perspective, depth, backface and pivot. Fountible writes the same compound CSS transform you see.
Acme design team
Shared workspace
Team fonts
● 3 people online
Keep work inside shared teams, upload team-wide fonts, and design together with live cursors and presence.
Vertical, horizontal and grid flows map directly to flexbox, grid, gap, padding and responsive sizing.
Figma alternative
Fountible is built for the same job as Figma and Paper — visual UI design with multiplayer — but you can paste supported Figma work into a real React and Tailwind canvas, then use components, variables, editable timelines and 3D transforms that export as production code and anime.js.
| Fountible | Figma | Paper | |
|---|---|---|---|
| Canvas renders real UI | Live React + Tailwind on the canvas | Drawn rectangles & vectors | Design-first canvas |
| Export | Production React / HTML / SVG | Dev Mode handoff, plugins, inspect | Handoff-oriented export |
| Bring over Figma work | Direct paste into native editable layers | Source design | File-dependent workflow |
| Fidelity gap | Zero — the design is the code | Rebuild in code after design | Still a design → code step |
| Collaboration | Real-time multiplayer | Real-time multiplayer | Team collaboration |
| AI assistant | Kimi BYOK, Claude or ChatGPT with canvas context | Plugins & third-party AI | Varies by product |
| Motion | Presets + editable keyframe timeline → anime.js | Prototype transitions / plugins | Varies by product |
| 3D transforms | X / Y / Z, perspective, depth + keyframed rotation | Limited / plugin-oriented | Varies by product |
| Components | Local components with instances & overrides | Components & variants | Components & systems |
| Best for | Teams who ship React & Tailwind | General product design | Design-system workflows |
If you searched for a Figma alternative,** Figma clone**, or** Paper app alternative** that exports real code — start free in the browser.
FAQ
Common questions about pasting existing Figma work, AI models, editable motion, exporting React and getting started free.
Fountible is a Figma-style visual design tool — frames, auto layout, vectors, components, variables, 3D transforms, multiplayer — but the canvas renders real React components styled with Tailwind. It’s a Figma alternative built for teams who ship code, not a pixel-perfect clone of Figma’s file format.
For product UI that ends up as React and Tailwind, yes. You can paste supported Figma work into native editable layers, continue on a live DOM canvas with components, variables, motion and 3D transforms, then export production code. Teams using Figma for pure illustration or marketing art may keep both tools.
Yes. Use the normal Copy command on a Figma selection, then paste it onto the Fountible canvas. Supported frames, auto layout, text, shapes, vectors, fills and effects become native editable layers without an import file or plugin. Complex details may be approximated, and private image fills require link access.
Paper is another strong Figma alternative focused on design craft. Fountible’s differentiator is that anything you design is also code — the same React and Tailwind classes you see on the canvas are what you export.
Yes. Select a node and copy or export clean React, HTML, or SVG. Layout maps to flexbox and gap; fills, radius, and tokens map to real CSS and Tailwind utilities — including your variables.
Not if you use Claude Pro/Max through Claude Code or ChatGPT through Codex in the desktop app. In the browser or desktop app, you can instead bring an Anthropic or Kimi API key. Kimi K3 runs with its required Max reasoning mode.
Yes. Every request starts with the current page, canvas outline, selection and document variables. The assistant prefers your Tailwind variable utilities, and you can attach a layer with its JSX, classes and visual reference when an edit needs exact context.
Yes. Bring your Kimi API key on the web or desktop, select Kimi K3 in the canvas assistant and design with its required Max reasoning mode. Your key is validated and encrypted at rest.
Yes. Add entrance, emphasis and loop presets, or use the timeline to keyframe position, scale, rotation, opacity, size, corner radius, solid fill or stroke, and layer blur. Scrub, retime, snap, multi-select keyframes and edit curves or springs.
Yes. Ask the canvas assistant to add a motion preset or author a frame timeline. The generated tracks and keyframes appear in the same editor for manual refinement, including X, Y and Z rotation while perspective and depth remain intact.
Yes — Fountible is 100% free while you get started. No credit card required. Open the web app or download the macOS desktop build and the Fountible Capture Chrome extension.