When a prototype is ready to become a real product, Take it to code gives you the whole thing as a small project folder. It runs as-is in a browser, and it comes with a guide that coding agents read first, so they understand your screens, design and data before changing anything.
Open Take it to code
Take it to code works on finished versions. Open the version you want, then either:
- Open the rail (☰ Tools) and choose Take it to code, or
- Open the Share menu and choose Take it to code.
The dialog says "Keep building vN in Claude Code, Cursor, Codex or your own editor." From here you can download the project, push it to GitHub, or copy a command to start your coding agent.
Download the project
Click Download {name}-v{N}.zip, for example pawsome-v7.zip. Unzip it and open index.html in a browser: there's no install or build step.
Anyone who can view the prototype can download it. Downloads are free and use no credits.
What's in the folder
| File | What it is |
|---|---|
index.html |
The prototype itself, with every screen. |
phluffle/runtime.js |
Screen navigation. It shows one <section data-screen> at a time and wires up data-goto links. |
phluffle/data.js |
Provides window.phluffle for saving records, member sign-in and uploads. It uses pretend data unless you configure it. |
AGENTS.md |
A guide coding agents read first (see below). |
CLAUDE.md |
Points Claude Code at AGENTS.md. |
README.md |
A short note for people: open index.html, no install or build step. |
design-tokens.json |
The colours and fonts the prototype uses, plus its Tailwind config. |
data-schema.json |
The data collections the prototype saves, and who can see them. |
.gitignore |
Common files to keep out of a repo. |
What AGENTS.md tells your agent
AGENTS.md is written for coding agents, but it's a good read for people too. It covers:
- How it's built: one page with many screens, how navigation works, and that there's no build step.
- Screens: a table of every screen and where each one links.
- Design tokens: the main colours and fonts to keep new work consistent.
- Data: each collection and its access rules, and the
window.phluffleAPI. - Open feedback: unresolved comments from your team.
- Recent changes: what the last versions did.
- Rules for keeping the design as the project grows.
Download just the HTML file
Prefer a single file? Click Just the HTML file. You get one .html file with navigation working, handy for emailing or dropping into another project. It doesn't include AGENTS.md or the other project files.
Keep building with a coding agent
The dialog suggests a command you can copy. Open a terminal and run it:
cd pawsome-v7
claude "Read AGENTS.md, then turn this prototype into a Next.js app. Keep the design and the screens."
Swap in whatever you want to build next. The same folder works in Cursor, Codex or any editor; just open it and point your agent at AGENTS.md.
Tip Changes you make in the downloaded folder stay on your computer. They don't come back to Phluffle as new versions.
Skip the download: connect your agent instead
If you'd rather keep working in Phluffle, connect Claude Code or Cursor directly. Your agent reads the prototype and saves its work back as new versions your team sees, with no Phluffle credits used. See Connect coding agents (MCP).
Pro Connecting coding agents is part of Pro. Downloading the project is free for everyone.
Use a live app's real data in the exported code
If the prototype is published with Live Deploy, index.html includes a commented-out line that points phluffle/data.js at the live app instead of pretend data. To use it:
- Open the live app's Data page and create an API key. See App data.
- In
index.html, uncomment the line near the top and paste your key in place ofYOUR_API_KEY.
The access rules you set for each collection still apply to every request.