What the panel does
- Text to UI. Pick a format (mobile screen, web page, dashboard, tablet, component, wireframe), describe what the screen is for and what it shows, and get a complete design back with a preview.
- Revise a design. Press Revise on a result and say what should change (“switch to a dark theme”, “add a search field under the header”). The model returns the whole design, updated, and you add the new version next to the old one.
- Start from an SVG. Have a screen exported from another tool as SVG? Load it in the panel and ask for changes, or bring it into the canvas as it is with Import SVG or image.
- Images for your design. Image models make photos, illustrations, app icons, avatars and backgrounds. Each one lands on the canvas as a rectangle with an image fill.
- No key needed with credits. Sign in with an email code or Google and pay per use with Craft Apps credits, one balance across the Craft sites. New accounts get 30 free credits; see pricing.
What you get in FigCraft
The model writes SVG because FigCraft imports SVG as an editable frame. The panel asks for SVG that comes in clean:
| In the design | In FigCraft |
|---|---|
| A group per part (“Header”, “Trip card”, “Primary button”) | A layer with that name, nested as designed |
| Boxes drawn as rounded rectangles | Rectangles with their corner radius, ready to resize |
| Every label as text in Inter, Roboto, Open Sans, Lato and other bundled fonts | Text layers you can retype, with font, size and weight intact |
| Drop shadows on cards and buttons | Drop shadow effects in the Design panel |
| Icons and charts as simple paths | Vector layers you can edit point by point |
Add to canvas puts the result in the middle of your view in one step (the panel pastes it into FigCraft for you). Copy SVG puts the code on your clipboard for the desktop app or another tool, and Save downloads it.
Step by step
- In the editor, click AI design in the top bar. The panel opens on the right and the canvas resizes to fit.
- Open the settings (gear icon), choose a provider and paste your API key, or choose Craft credits and sign in. The text model designs screens; the image model is only used on the Image tab.
- On UI design, pick a format, describe the screen and press Design it (or ⌘/Ctrl + Enter).
- Press Add to canvas. Click into the frame’s layers to edit them, or press Revise on the result to ask for changes.
- Tidy the draft by hand: select the layers of a row or list and press Shift+A to wrap them in an auto layout frame, and turn repeated cards into a component.
Prompts that work well
- “Home screen of a hiking app: greeting, search field, a large featured trail card with distance and elevation, a list of three nearby trails, bottom tab bar” as a mobile screen.
- “Sign-in screen for a budgeting app with email and password fields, a primary button, Sign in with Google, and a short value line at the top” as a mobile screen.
- “Pricing section with three plans, the middle one highlighted, monthly and yearly toggle, and a feature comparison under it” as a web page.
- “Primary, secondary and ghost buttons in default, hover and disabled states” as a component.
Say who the screen is for and what it must show, name colours as hex codes when they matter (“use #02da96 as the accent on a dark #111 background”), and ask for one change at a time when revising.
Supported providers
| Provider | Default text model (UI) | Default image model | Get a key |
|---|---|---|---|
| OpenAI | gpt-6.1-sol | gpt-image-2.5-flare | platform.openai.com |
| Google Gemini | gemini-3.8-flash | gemini-3.1-flash-image | aistudio.google.com |
| OpenRouter | anthropic/claude-sonnet-5.5 | google/gemini-3.1-flash-image | openrouter.ai |
| Custom (OpenAI-compatible) | any chat model your API serves | any image model your API serves | your own endpoint |
OpenRouter gives one key access to many models: Claude, GPT, Gemini and Grok for designs, and Gemini, GPT Image, FLUX and Recraft for images. The custom option works with any service that implements OpenAI’s /chat/completions (for designs) or /images/generations (for images) and accepts browser requests.
Privacy: what goes where
| Data | Where it goes |
|---|---|
| Your API key | Stays in your browser. Sent only to the provider, in the request header. |
| With Craft Apps credits | No key. Your prompt and any design you revise go to our Craft Apps service (api.artcraft.run), which runs the model and keeps nothing after it answers. |
| Your prompt, and a design you choose to revise | With your own key, sent from your browser straight to the provider you picked. |
| Everything else you do in FigCraft | Never leaves your device. |
| figcraft.run servers | Serve the static editor files. They receive none of the above. |
The provider’s own terms and data policy apply to what you send them. Before the panel shows or adds a design, it removes scripts, event handlers and embedded web content.
No key? Start from a design you already have
You don’t need a model to bring work in. Export a frame as SVG from another design tool and use Import SVG or image in the editor’s top bar: it arrives as editable layers. See FigCraft as a free Figma alternative for what the editor can and can’t do yet, and how to open a .fig file without Figma.
FAQ
Is the result an editable design or a picture?
An editable design. The text model writes the screen as SVG with named groups and real text, and FigCraft imports it as a frame: each group becomes a layer named after it, boxes stay rectangles with their corner radius, and every label is a text layer you can retype and restyle. Image models give a picture instead, which lands as an image fill.
Do I have to pay to use the AI tools?
With your own API key, you pay your AI provider for what you use, at their normal API prices. figcraft.run charges nothing and adds no markup, because the request never passes through us. Without a key, you can pay per use with Craft Apps credits: new accounts get 30 free credits, one-time packs start at $9.90 with no subscription, and a request is charged only when it succeeds.
Which model designs the best screens?
Models that are good at code write better layouts. The defaults are gpt-6.1-sol on OpenAI, gemini-3.8-flash on Gemini and claude-sonnet-5.5 on OpenRouter. “Load models” in the panel lists everything your key can use; larger models follow long, detailed briefs better and cost more.
Does it use auto layout and components?
Not on its own. The design arrives as nested groups with absolute positions, the way SVG describes it. Once the draft looks right, select the layers of a row or list and press Shift+A to wrap them in an auto layout frame, and turn a repeated card into a component.
Can I keep what the AI makes?
Yes. Save on a result downloads its SVG, which opens in the FigCraft desktop app, Figma, Penpot or any vector editor. The browser build of FigCraft itself can’t save files yet, so download anything you want to keep before you close the tab.
Where is my API key stored?
In your browser only. By default it lasts for the current tab (sessionStorage). Tick “Remember my key on this device” to keep it in localStorage instead, and use “Forget all keys” in the panel settings to delete it.
Does FigCraft itself have AI features?
Not generative ones. FigCraft is built so AI agents can drive it through its MCP server in the desktop app and CLI, but it doesn’t generate designs itself. The panel is something this site adds around the unmodified editor.