> ## Documentation Index > Fetch the complete documentation index at: https://docs.ankra.ai/llms.txt > Use this file to discover all available pages before exploring further. # From Claude Design to a live application > Export a canvas from Claude Design, import it into Ankra, and get a repository, a setup pull request, a build and a public URL without writing a Dockerfile. A design you made in [Claude Design](https://claude.ai/design) can be a running application on one of your clusters in a few minutes. Ankra takes the export, turns the artboards into a static site, creates a GitHub repository for it, commits the site with a Dockerfile, and registers it as an [application](https://docs.ankra.ai/concepts/applications.md) - from there it is the same setup pull request, build and deploy flow every application goes through. > [!NOTE] > > Applications connect to **GitHub** through a [GitHub credential](https://docs.ankra.ai/integrations/github.md). The import creates the repository under that credential's account (or an owner you name), so the credential needs the Ankra GitHub App installed there. ## What the import does ```mermaid theme={null} flowchart LR Export[Claude Design export] -->|import| Ankra[Ankra] Ankra -->|create + commit| Repo[GitHub repository] Repo -->|register| App[Application] App -->|"analyze + generate (PR)"| PR[Setup pull request] PR -->|merge| Build[Build] Build -->|deploy| Cluster[Live on a cluster] ``` Every artboard (`.dc.html`) becomes a page under `site/` in the repository: `Main.dc.html` is `index.html`, the rest take their name (`Pricing.dc.html` becomes `pricing.html`), and a canvas with several artboards gets a `canvas.html` front door listing them by their canvas titles and pages. Images travel along under `site/assets/`. The Dockerfile serves the site with busybox `httpd` on port 8080 as a non-root user, which is what the generated Kubernetes manifests expect. A `.ankra/design-import.json` file records what was imported, so running the same import again registers the same repository without a second commit. ## 1. Export the design In Claude Design, export the canvas. Any of these shapes work: * a folder holding the artboards (`Main.dc.html`, `Pricing.dc.html`, …), `canvas.json` and any images; * a zip of that folder; * a single artboard file; * a saved canvas page (`.html`) - the page Claude Design publishes, which carries the artboards inside it. Files over 2 MiB and exports over 16 MiB are refused; those are the editor's own limits, so an export that came out of it fits. ## 2. Import it **CLI** ```bash theme={null} ankra application import claude-design ./my-design-export --name my-site ``` With one GitHub credential in the organisation the command picks it and creates the repository under that credential's account. Name them yourself when there is a choice: ```bash theme={null} ankra application import claude-design my-design-export.zip \ --credential my-github --owner my-org --repository my-site \ --source-url https://claude.ai/design/p/ --wait ``` `--wait` follows the analysis and prints the setup pull request when it opens. `-o json` returns the application id, the repository, the pages and any warnings as one document. **Portal** Open **Applications → Add application** and choose **Claude Design** as the source. Drop the export files (or the zip, or the saved page) onto the form, name the application, pick the GitHub credential and the owner, and import. The application page opens with the repository link and the setup pull request once analysis has run. **API** ```bash theme={null} curl -X POST "$ANKRA_API/api/v1/org/applications/imports/claude-design" \ -H "Authorization: Bearer $ANKRA_API_TOKEN" \ -H "Content-Type: application/json" \ -d '{ "name": "my-site", "app_repo_credential_name": "my-github", "app_repo_owner": "my-org", "files": [ {"path": "Main.dc.html", "content_base64": "..."}, {"path": "canvas.json", "content_base64": "..."} ] }' ``` The answer has the create route's `id` and `errors`, plus `repository`, `pages` and `warnings`. A refusal you can act on - a repository name that is taken, a file the importer does not recognise - comes back in `errors` with a 200; see the [API reference](https://docs.ankra.ai/api-reference/applications/import-a-claude-design-application.md). ## 3. Merge, build, deploy From here the application is an ordinary one. Ankra opens the setup pull request with the manifests, chart and build workflow (it keeps the committed Dockerfile), the merge builds and publishes the image, and you deploy it to a cluster: ```bash theme={null} ankra application get ankra application deploy --cluster ``` The [applications concept](https://docs.ankra.ai/concepts/applications.md) walks through the setup pull request, secrets and deployment in full. ## Artboards that use template logic An artboard is served as it was authored. Artboards that only use markup and styles look exactly as they did on the canvas. Artboards that depend on the Claude Design runtime - `{{ }}` holes, `sc-for` or `sc-if` blocks, `dc-import` components, or a `data-dc-script` logic block - are imported too, but the import reports each of them as a warning: without the runtime they may not render as they did in the editor. Replace the logic with plain markup in Claude Design and import again, or edit the page under `site/` in the repository; every push builds and deploys. ## Importing again The repository keeps `.ankra/design-import.json`, a record of the files the import was built from. Running the import again with the same export finds that record and registers without committing; running it with a changed export is refused for now - import into a new repository name, or edit the pages in the repository directly. ## Related * [Applications](https://docs.ankra.ai/concepts/applications.md) * [Ankra Pipelines](https://docs.ankra.ai/guides/ankra-pipelines.md) * [Branch demos](https://docs.ankra.ai/guides/branch-demos.md) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.