Skip to main content
Bifocal works with web prototypes built in tools like Lovable, Claude Code, and Figma Make. To import, you’ll export your prototype as a ZIP file from wherever it was built, then upload it into Bifocal.

​
Import a prototype

  1. Begin by first creating a Project and adding any optional context / PRD
  2. Next, you’ll be taken to the screen to import your prototype. Give your prototype a recognizable name that will be referred to throughout the project.
  3. Choose how you want to import your prototype: from an external service or by selecting an existing template saved as context in your Bifocal account.
Once a prototype is imported into Bifocal, you can save it as a template that can be reused in the future.
Claude Code generates projects that may need a small amount of preparation before they’ll work in Bifocal. The most common issue is that Claude Code builds with a framework called Next.js by default, which Bifocal doesn’t support. Follow the steps below to ensure compatibility.Step 1 — Check Framework & RoutingAsk Claude Code the following:
Is this project built with Next.js or Vite?
If it says Next.js, use the following prompt:
Convert this project from Next.js to a Vite + React single-page app with react-router-dom for navigation. Remove all server-side rendering, API routes, and any use of getServerSideProps or getStaticProps. Keep all the UI and logic but make everything client-side only. Each major section of the app should be its own route (e.g. /home, /dashboard, /settings). The build shouldproduce a dist/ folder when you run npm run build.
If it says Vite, ask:
Does this project use react-router-dom so that each major section has its own URL path?”
If no, use the following prompt: 
Add react-router-dom to this project. Break the main sections of the UI into separate routes using <BrowserRouter> in main.tsx and <Routes>/<Route> in App.tsx. Each major section should have its own URL path.
Step 2 — Verify buildOnce routing is set up, verify everything works:
Run npm run build and let me know if it succeeds or if there are any errors.
 Fix any errors it reports before exporting.Step 3 — Export ZipAfter the build step, tell Claude:
Create a ZIP of the project excluding node_modules, .git, dist, and any .env files.                                                                       
Then upload that ZIP to Bifocal.
To export a Figma Make project:  
  1. In Figma Make, go to Prototype Settings → GitHub and push your project to a GitHub repository. 
  2. Go to your GitHub repository → click the green Code button → Download ZIP. 
Note: Some Figma assets may not display correctly after export. If images are missing or the build fails, see the troubleshooting section below.
Bifocal works with any project built with Vite and React. If you built your prototype with a different tool, follow these steps before uploading.Step 1 — Check your setup.Ask your AI tool:
Is this project built with Next.js or Vite?
If it says Next.js, paste:
Convert this project from Next.js to a Vite + React single-page app with react-router-dom for navigation. Remove all server-side rendering, API routes, and any use of getServerSideProps or getStaticProps. Keep all the UI and logic but make everything client-side only. Each major section of the app should be its own route (e.g. /home, /dashboard, /settings). The build should produce a dist/ folder when you run npm run build.
If it says Vite, ask:
Does this project use react-router-dom so that each major section has its own URL path?
If no, paste:Add react-router-dom to this project. Break the main sections of the UI into separate routes using <BrowserRouter> in main.tsx and <Routes>/<Route> in App.tsx. Each major section should have its own URL path.”Step 2 — Verify the build.Ask your AI tool:
Run npm run build and let me know if it succeeds or if there are any errors.
Fix any errors it reports before continuing.Step 3 — Create the ZIP.Ask your AI tool:
Create a ZIP of the project excluding node_modules, .git, dist, and any .env files.
Then upload that ZIP to Bifocal.

​
Troubleshooting Import

​
Import Guidelines

Bifocal runs your prototype in a web browser, so it needs to be packaged in a specific way to work correctly.
  • Framework: Your project must be built with Vite and React. Next.js is not supported.
  • Structure: Your project should have a package.json, index.html, and src/ folder at the root level.
  • Build: Running npm run build should produce a dist/ or build/ folder with no errors.
  • Format: Upload your project as a ZIP file. Don’t include node_modules, .git, dist, or any .env files.
Most projects built with Lovable, Claude Code, or Figma Make will meet these requirements automatically — or can be made to with a few prompts.

​
My images are missing after importing from Figma Make

Figma Make uses a special format for images that doesn’t carry over when you export to GitHub. To fix this, open the project in a code editor or ask an AI assistant to replace any imports starting with figma:asset/ with the matching image files from the src/assets/ folder.

​
My build is failing

The most common cause is a Next.js project. Bifocal doesn’t support Next.js — it needs to be converted to Vite + React first. See the instructions ifpr “Other Coding Tools” above which includes a prompt you can paste directly into Claude Code to handle this automatically.

​
Exporting a Prototype

If you create a prototype and want to export it out of Bifocal to continue working on it, you can do so by navigating to the Prototypes tab, selecting the Prototype and then clicking “Export”. This will generate a zip file that you can download and upload into your IDE or coding tool of choice.