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
- Open or create a project and the frame you want in UXMagic.
- 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."
- 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.