From code

When your design system already ships in code, that code is the most accurate source there is. Archetype can take your components as your codebase renders them and keep them in step with your repository, so agents build with the real thing.

There are four ways in, from most connected to least:

• Connect a repository: components pushed from your code, tokens pulled into it, kept in step by GitHub Actions.
• Ask your coding agent: a one-off import of token files and rendered components over MCP.
• Paste markup: HTML and CSS you already have in hand.
• Start from a UI library: components from a popular library, drawn on your own foundations.

Connect a repository#

1. 1

   Open the repository drawer

   Go to Settings → Import and press Connect on the Code repository row. The drawer is titled Connect a repository.

2. 2

   Hand the setup to your agent

   Press Copy prompt and paste it into Claude Code, Cursor or Codex, opened on your repository. The agent looks at your code, asks you what to connect, and opens a pull request. It only asks you for what it can't do itself, such as approving the sign-in and adding the API key to GitHub.

3. 3

   Watch it connect

   After you copy the prompt, the drawer shows "Waiting for your agent. This updates by itself." It switches on its own once the first pull or push lands.

Once connected, the row reads Connected with the repository's name, and View opens a board of what the connection does:

Anything not set up yet shows Not set up, with a prompt underneath to finish the rest. Prefer to run the commands yourself? Press Do it by hand instead for the same setup as numbered steps.

Components that come from code are kept in step from the repository, so you change them there rather than in Archetype: the next push brings the change over. The CLI side, including how to describe each component in a *.archetype.tsx file, is in Component sync and Tokens in code.

Ask your coding agent#

Your coding agent can also do a one-off import without connecting the repository for good. This is the route for token files and for components your agent renders itself.

Components#

1. Go to Components, press Add, and open the Code tab.
2. Under 1. Connect your agent, add Archetype to your agent if you haven't.
3. Under 2. Ask it, in your repo, copy the prompt into the agent.

The list under the prompt fills as components arrive. Archetype stores each component as static HTML plus the CSS it needs, so the agent renders every variant and state with your framework and sends the markup your browser actually draws, with your real class names.

Token files#

An agent imports a whole token file in one call to update_brand, rather than retyping values. It accepts three formats:

• W3C Design Tokens (DTCG)
• Tokens Studio, including its sets and themes
• Style Dictionary

If your values only exist as CSS custom properties or a Tailwind theme, the agent first writes them out as one DTCG file by script, then imports that.

Before writing anything, the agent runs a dry run and shows you the summary. If the import finds items you already hold under another name (a "blue" in the repo that your website import called "primary", say), it asks whether to merge them into what you have, skip them or keep both. The whole import is recorded as one change, so it can be undone in one step.

Paste markup#

For a component you have as HTML and CSS:

1. Go to Components, press Add, and open the Paste tab.
2. Paste the HTML, and the CSS if it has any. Or press Upload files to load .html and .css files (up to 10 at a time).
3. Press Import.

Archetype finds the components in what you pasted, whether that is one component, a whole set, or a stylesheet with a fragment. It links every value it can to your Foundations tokens and tells you how many it linked. Values that match nothing are listed under Not in your palette: they stay literal until you add them to Foundations and import again.

Start from a UI library#

The Marketplace tab of the same drawer offers ready-made components from shadcn/ui, Mantine, Radix Themes, Chakra UI, BeautifulUI, Material Design 3 and Ant Design. Open a library, pick the components you want (all of them start picked), and import.

The library's theme is bound to your Foundations as it comes in, so the components arrive in your colors and type rather than the library's defaults. It is a fast way to give agents a full kit before your own components are in.

Next steps#