> ## Documentation Index
> Fetch the complete documentation index at: https://help.bifocal.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Importing and exporting prototypes

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.

## Import from popular AI coding tools

<AccordionGroup>
  <Accordion title="Lovable">
    <Accordion />

    <Accordion />
  </Accordion>

  <Accordion title="Claude Code">
    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 & Routing**

    Ask 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 build**

    Once 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 Zip**

    After 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.
  </Accordion>

  <Accordion title="Figma Make">
    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**. 

    <Info>
      *Note:* *Some* *Figma* *assets* *may* *not* *display* *correctly* *after* *export.* *If* *images* *are missing* *or* *the* *build* *fails,* *see* *the* *troubleshooting* *section* *below.*
    </Info>
  </Accordion>

  <Accordion title="Other AI Coding Tools">
    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.
  </Accordion>
</AccordionGroup>

## 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.