Tools & exporting to code

Tools, resources, and prompts are provided by the UXMagic backend and surfaced through the bridge, so the list always reflects the live server. Run tools/list from your client to see the current set.

What the agent can do

Read — list_projects, get_project, list_frames, get_frame, read_screen, read_theme, list_project_documents, read_document

Write — create_project, create_frame, duplicate_frame, edit_design, update_design, replace_image, export_figma

AI generation (async) — generate_design → poll generation_status → confirm_generation (human-in-the-loop) / cancel_generation

Resources — uxmagic://project/{id}, uxmagic://frame/{id}, uxmagic://frame/{id}/version/{versionId}, uxmagic://frame/{id}/theme

Prompts — design_screen, redesign_screen, build_theme, clone_site, prototype_flow

Export a frame to code

1. Open or create a project and the frame you want in UXMagic.
2. In your IDE's agent, reference the frame (by name or id) and ask it to generate code in your stack — e.g. "Build the Dashboard frame as a React component."
3. The agent uses the read tools to pull the design, then generates the code. Re-run after design changes to keep code in sync.

You can also use export_figma to export a frame to Figma.

Tips

• Export one screen at a time for the cleanest output, then compose them.
• Key access is scope-bound (designs:read, designs:write, agent:run); a key with no scopes has full access.