Skip to the content
FilDocs

Code generation

Generate web pages, components, slides, articles, SVG, Three.js scenes and more with Claude, GPT, Gemini and others, then preview and revise them.

The Code view writes a file from a prompt: a web page, a single component, a slide deck, an article, an SVG drawing, a Three.js scene, a looping animation and more. Pick what it makes, describe it and press Generate: the file appears in your feed as a picture of the page, and opens to run, edit in Design, or change with another prompt.

From a prompt to a running page in the Code view

Generate a web page from a prompt

  1. Click Code in the sidebar, or press O anywhere outside a text field or a canvas.
  2. Check the chips under the prompt box: the model, What it makes (Website to start) and the effort. The price beside Generate is a range, such as "5–49 credits" (see below).
  3. Describe the page: who it's for, its sections, the content and the look ("a launch page for a ceramics studio with a booking form").
  4. Press Generate, or Enter. The run shows "Usually 1–3 minutes" and keeps going if you leave.
  5. The page lands at the top of the feed as a picture of its first screen, and the panel on the right previews it at desktop size. Hover its tile and click View full size to open it in the full view.

The full view runs the page, so links, forms, slides and scenes work. Its Design tab edits every layer, as in Figma (see The Design tab), and Download saves it.

What Code makes

Open What it makes, the second chip, to pick a format. Each line says what you'll get.

The What it makes menu open above the prompt box: Website, Simple HTML page, React app, HTML component, HTML slides, Article, Plain text, Social post, Brand guide and Motion design, each with a one-line description
Seventeen formats, from a whole site to a task list
FormatWhat you get
WebsitePages, a design system and data, kept in step: the default. See Build a website
Simple HTML pageOne self-contained page, the quickest. See Simple HTML pages
React appThe site as a React app with its components and data, to export. See React apps
HTML componentOne UI element on its own, such as a card, a form or a pricing table
HTML slidesA deck of 16:9 slides to click through, 6 to 12 unless you ask
ArticleA post or guide in Markdown, with its pictures
Plain textJust the words: an email, a caption, a script, a bio
Social postA post, thread or video as X, Threads, LinkedIn, Instagram, TikTok or YouTube show it. See Social posts
Brand guideLogo, colours, type and voice, laid out as a guide
Motion designAn animated piece that plays and loops on its own
SVG illustrationA vector drawing, kept as an image
Three.js sceneA real-time 3D scene you can turn and zoom
Skill (SKILL.md)A SKILL.md written from the flow before it, on a canvas. See Prompts, documents and skills
Design systemColours, type and components pages share. See Design systems
Site dataThe content pages show, as a CMS. See Dynamic websites
CalendarDeadlines, launches and invoices on a month, from your documents
TasksA checklist or board to tick, from your documents

In the Code view a Website is made as one page. On a canvas it becomes a whole site: its pages, the design system they share and their data, each a node of its own (see Websites in Fil).

Choose a model and effort

The first chip is the model. Every code model writes every format, takes up to 8 reference pictures and up to 2 pages to revise. The Code view opens on the code model you used last; without one it starts on Claude Sonnet 5.5 at Medium effort.

With SVG illustration picked, the Model menu lists Claude Opus 5.5 as Recommended for SVG, then Claude Fable 5.1, Claude Sonnet 5.5, Claude Haiku 5.5, GPT-6 Astra, GPT-6.1 Sol, Gemini 3.8 Flash, Muse Spark 1.3, Grok 4.7, Kimi K3 and MiniMax M3
SVG and Three.js are best on Claude Opus 5.5 at Extra high effort

Which to pick:

  • Most pages: Claude Sonnet 5.5, the default: fast and good.
  • SVG drawings and Three.js scenes: Claude Opus 5.5 at Extra high effort. The menus mark it "Recommended for SVG" or "Recommended for Three.js"; on a canvas, picking either format moves the node to it.
  • The hardest pages: Claude Fable 5.1, Anthropic's most capable, or Claude Opus 5.5 at a higher effort.
  • Cheap drafts and plain text: Claude Haiku 5.5, Gemini 3.8 Flash or MiniMax M3.
ModelCreditsMaker
Claude Sonnet 5.55–49Anthropic: faster
Claude Opus 5.59–98Anthropic
Claude Fable 5.122–243Anthropic: most capable
Claude Haiku 5.51–3Anthropic: fastest, cheapest
GPT-6 Astra22–243OpenAI
GPT-6.1 Sol5–49OpenAI: faster
Gemini 3.8 Flash2–19Google: fast, low cost
Muse Spark 1.32–21Meta
Grok 4.73–30xAI
Kimi K37–97Moonshot AI
MiniMax M31–6MiniMax: low cost

Credits are what the chip shows for a new website before you type, at each model's default effort (Medium; High on Kimi K3). A long prompt, documents or pictures raise both ends a little.

Effort

The Effort chip sets how hard the model thinks, and the most it may write. More effort takes longer and raises the top of the price range: Claude Sonnet 5.5 holds 33, 49, 65, 97 or 129 credits.

EffortMenu says
LowQuickest and cheapest, for simple pages
MediumBalanced, for most pages: the default
HighThorough, for detailed pages
Extra highThinks longer, for complex pages
MaxThinks the longest, costs the most

Gemini 3.8 Flash goes up to High, Grok 4.7 to Extra high, and Kimi K3 offers Low, High and Max. MiniMax M3 always thinks at full depth, so it has no effort chip. If a run stops with "The page was too long to finish at this effort", choose a higher effort or ask for less.

Change a page with a prompt

Any page can be revised: select it, say what to change, and a new version arrives as its own run, the old one kept.

Revise a page by describing the change
  1. Hover the page in the Code view and click Turn to…, then Turn to Code. (Or select it and click Turn to Code in the panel.) It's attached above the prompt as Revising 1 page.
  2. Keep What it makes on the page's own format.
  3. Describe the change ("Describe what to change in the page") and press Generate.

A revision of one page writes only its edits, a few hundred tokens instead of the whole page, so it costs less: the price shows from 2 credits, and the run is charged for what it wrote. GPT-6 Astra and GPT-6.1 Sol write the whole page again. You can attach up to two pages; with two, the page is written whole. For changes by hand, open the page in Design; to ask an agent who can also make pictures, see Edit with the agent.

When a file has earlier versions, the full view's top bar shows N versions: pick one to look at it, and Restore saves it as a new version, so nothing is lost.

Make code on a canvas

On a canvas, a Code node does the same and reads more: wire in prompts, documents (read whole, up to 60,000 characters), up to 8 pictures and up to 2 pages. Add one with the code button in the toolbar at the bottom (or press 5 on the canvas) and press Generate on the node.

A canvas where a brief for Kiln & Co. feeds a Code node on Claude Opus 5.5 set to SVG illustration and Extra high effort, showing its drawing of a terracotta vase on a potter's wheel, Add at 4–194 credits
A brief wired into a Code node, made as an SVG on Opus 5.5
  • Before a canvas run starts, Claude Sonnet 5.5 reviews it. For a Website, Simple HTML page or React app it can offer a page design to follow and pictures for its sections, made first; pick an option, or Generate as is. Skills, social posts, calendars and task lists aren't reviewed.
  • Once a Website, Simple HTML page or React app is made, the node's button becomes Edit with agent, which opens it in Design with the agent ready.
  • A Design system, Site data, Calendar, Tasks or Social post node keeps one file: type in the box above its button ("What should change in the calendar?") and press Edit to change it in place.
  • Other formats keep every take: Add makes another beside the first, and the one you pick is what feeds the next node.
  • Turn into skill in the panel writes a SKILL.md from the whole flow that made a result, so you can make work like it again.
  • A Calendar or Tasks node reads the documents wired into it and lists every dated item or follow-up. Ticking a task or marking an event done is free and saved as a new version.

Download, upload and share

  • Download in the panel or the full view saves a page as one HTML file with its pictures inside. Articles save as Markdown, plain text as TXT, an SVG as SVG; on a canvas, a React app's link reads Download project (a Vite project, as a zip).
  • To bring a page of your own in, use the upload button beside the price (its tooltip reads Upload HTML), or drop the file on the feed. Then Turn to Code revises it like any other.
  • Pages stay in your library: Community doesn't show them, so the lock chip in the Code view can't be switched. To put a site on the web, see Publish a website; to take the code elsewhere, Export, download and GitHub.

Costs and limits

  • Longer prompts, documents, pictures and pages to revise raise both ends of the range; a higher effort raises the top.
  • A run that fails is refunded in full. Only GPT-6 Astra and GPT-6.1 Sol runs can be stopped once started, with the stop button beside the prompt in the feed (its tooltip reads Cancel); a stopped run is charged for what it wrote. Other models say "This provider cannot cancel a submitted run. It will finish and settle normally."
  • Without enough credits, Generate says so: "This run needs 49 credits; you have 20."
  • A prompt can be up to 4,000 characters. Three.js scenes build every model from code, so they can't load 3D files; for a model you can download, see 3D generation.

What's next

  • Websites in Fil: sites, simple pages and React apps, and how they differ.
  • The Design tab: edit any page layer by layer, or with the agent.
  • Social posts: posts and threads as each platform shows them.
  • Publish a website: put a page or a site on the web.