One design.
Every way to work.
Give your agent the same canvas, assets, and revision history you use in the studio.
Working in the editor
Edit and Preview stay visible in the toolbar. Save your latest edits before using Share to publish a snapshot. Design JSON downloads the current local document without saving to the server. If a document save times out, export JSON to preserve local edits, then reload and reconcile the saved revision before saving or sharing again.
Use Shift-click for multiple selection, drag layer grips to reorder, and drop in the center of a container to nest. Assets → Components includes visual icons; select an instance to edit labels, values, options, variants and other supported properties.
Collapse sidebars or the timeline to make room for the canvas. Space plays or pauses motion while the canvas or timeline has focus. Project, page, panel, preview, presentation and settings destinations preserve browser history. Saved project cards render a thumbnail of the actual design.
For 3D, choose a material finish, import a color texture, and edit UVs through Mesh / UV / Rig. Camera and lighting have separate collapsible sections. Ordered 2D captions and 3D scene layers are composed together in the editor, raster export and shared viewer. Static SVG remains symbolic for 3D; GLB/glTF excludes 2D captions.
The catalog includes dashboard, commerce, workshop, proposal, booking, product visualization and social-motion starters. Ant, shadcn, Material, Carbon and Atlassian inspired presets adapt visual foundations to supported studio components; they are not official implementations. Discover IDs through /api/catalog or dsa templates list and dsa themes list.
From a brief to a saved design
Connect your agent
Sign in to the studio, create an API key, and inject it into your agent environment.
Manage API keysChoose a starting point
Inspect templates, themes, and the document schema. Use existing page and node IDs.
Explore the CLIEdit, inspect, export
Make focused changes, save against the revision you read, and inspect the actual artifact.
Understand revisionsnpm install -g https://github.com/bestagentkits/design-studio-ai/releases/download/v0.4.3/bestagentkits-design-studio-ai-0.4.3.tgz
# Inject DESIGN_STUDIO_API_KEY using your secret manager.
export DESIGN_STUDIO_URL=https://studio.datxanhmientrung.ai
dsa health
dsa templates list
dsa schema
dsa projects listdsa projects create --name "Product story" --template product-deck
# Use the ID and revision returned by the server.
dsa projects get PROJECT_ID
dsa projects export PROJECT_ID --format png --revision OBSERVED_REVISION --output preview.png