develop

Implement Subframe designs in an application. For sync questions, explain the boundary below without changing files.

Choose the source of truth

Before writing code, inspect the application package's .subframe/sync.json, synced directory, component imports, theme files, routes, and package.json. State which model the evidence supports:

• Subframe owns the theme and components. A sync configuration and generated components used by the app establish this model. Build pages from those components. Keep visual changes in Subframe and re-sync; keep application behavior in code. If a required component or token is missing from Subframe, use design to add it there, then bring it into code. Do not hand-roll a look-alike or patch generated styles.
• The codebase owns the theme and components. An established library such as MUI, shadcn, or custom components, with no Subframe sync, establishes this model. Treat the Subframe page as a visual reference. Implement with the app's components and tokens; translate styling to their equivalents instead of pasting Tailwind classes that bypass them. Do not initialize or sync Subframe unless the user chooses to adopt it. Use import when asked to bring the code's system into Subframe so future designs use it faithfully.
• Mixed or unclear. Name both models and the evidence for each, including any project mismatch. Follow an established boundary for the target screen. Ask only when the unresolved choice changes which components, theme, or files you will use.

Read setup.md only when the app has no Subframe setup and the user wants Subframe's components, or init/sync fails.

Get code with fewest tokens

Fetch get_page_info once for the page being implemented and inspect screenshot_page. Use files[].fileName and files[].contents as the page source. Keep the clean export defaults; node IDs and editor metadata are unnecessary for implementation. Page imports follow the project's export settings, normally its configured import alias; resolve them against the local setup.

In the Subframe model, use CLI sync for missing components and init for theme files: they write code directly to disk without passing it through context. Read only the local component APIs needed for implementation. Do not fetch every component with get_component_info to obtain code already available through sync.

Sync missing components by name, for example npx @subframe/cli@latest sync Button Alert. Never automatically re-sync components already present; refresh them only for a requested design update. Avoid routine sync --all or a bare sync, which also syncs everything. Named sync includes dependencies; inspect those changes too.