ShellX Design Studio Manual

Interface map

Click a feature to see where it lives.

ShellX Design Studio canvas editor with the tool rail, Objects panel, canvas surface with a multi-selection cluster, and the Inspector visible

Selected item

Select an element

Click any element on the rendered page to select it. Selection is a state, not a mode: the moment an object is selected, every edit is available in place from the quick-action toolbar, the Inspector, or the keyboard.

Where Canvas surface

Requirement Requires a page loaded into a Canvas session.

Shortcut / tip Click to select; Shift-click adds to the selection.

The interface-map screenshot is a historical v0.6.78 reference; the controls and workflows described here are current for v0.6.89. Projects Home and Image Editor have historical figures in the sections below.

First run

Install, first page, then connect an agent.

Desktop app

Install the Windows (current-user NSIS) or macOS (signed, notarized DMG) build — no administrator rights on Windows. The tester installers are code-signed; on Windows you may still see a first-run prompt, which is expected.

Node 22.6+

The UI ships in the app, but Apply, verify, structural edits, export, and the agent loop run on a small local Node bridge. The app does not bundle Node — install Node 22.6 or newer from nodejs.org before first launch. If it is missing, the app opens and a first-run banner names the exact fix.

First page

The app opens on Projects Home. Choose New canvas project to create a durable project package and its first Canvas together. Make a real edit, use the visible Save action, then close and reopen the app to confirm the project returns. Project Home and its tool launchers are available after the project exists.

Your coding agent

Structural edits, redline briefs, and generation route to your own local CLI — Claude Code, Codex, or Grok. Deterministic text, style, geometry, and delete edits work with no agent connected (you still need Node for Apply and export).

Workspace

Projects Home is the front door.

This Projects Home image is a historical v0.6.78 reference; button labels and first-run routing follow the current text below.

Projects Home

The unclosable global home: New canvas project, Library, Refresh, and your open and saved project lists. Creating a canvas project makes the durable package and first Canvas in one step. The first-run guide can be dismissed immediately and remembers that choice. Each open project exposes the current save action for its live document.

Project Home

Created per project. The big launchers open Canvas, Image Editor, Vector, Motion, Asset Studio, Capture Page, and Import Page. Real packages, assets, captures, exports, and receipts appear below the launchers once they exist.

Parallel sessions

Keep several Canvas, Image Editor, Vector, Asset Studio, and Motion tabs open at once. Each has a stable session id, so an agent can edit a page in one tab while you edit an image in another — no cross-wiring.

Settings and theme

The gear (top-right) opens Settings — agents, Motion renderer, Capabilities, and About. Switch the chrome between dark and light from the top bar; the choice persists locally.

Workspace recovery

If both Canvas rails are closed, visible Objects and Inspector recovery tabs remain available beside the canvas. An invalid or empty workspace route returns to Projects Home instead of leaving an inert white page.

Image Editor

One image, in its own session.

This Image Editor image is a historical v0.6.78 reference and does not show every current interaction, selection, mask, or version control.

Tool rail

Select, Adjust, Crop, Resize, BG, Frame, Text, Mark, and Paint down the left. Always-visible creator quick actions cover Auto enhance, Mono, Square, Remove BG, Caption, Watermark, Product Card, and Highlight.

Adjust and looks

Brightness, contrast, saturation, exposure, warmth, tint, highlights, shadows, blur, sharpen, vignette, and grain, plus named looks: Natural, Vivid, Warm, Cool, Mono, Matte, Dramatic, Soft.

Layers and overlays

A Canvas-parity element tree contains the image document root, a fixed source image, nested groups, and editable text, watermark, paint, and callout layers. Hide or show and lock controls exist at source, group, and layer level; group state applies to its descendants. Multi-select layers to Group, select a group to Ungroup, and bring or send a layer or whole group through sibling z-order. These commands share the undoable Image model used by the preview, raster export, Debug API, and MCP.

Select and arrange

Click, Shift-click, marquee, additive marquee, or Ctrl/Cmd+A to build an ordered multi-selection. Drag or nudge it, resize from eight handles, align or distribute it, use the context menu, and double-click text for inline editing. One gesture produces one undo step.

Selections and masks

Draw, move, and resize rectangle or ellipse selections. Background include and exclude masks use verified alpha geometry with feather and invert controls. Cleanup rectangles are recorded as proposals; subject bounds refuse when verified alpha evidence is unavailable.

AI previews and proposals

The AI tab can create deterministic local previews and durable proposal state. Provider execution for that Image Editor queue is not wired until a trusted host runner exists; a connected global media route does not turn a proposal into an executed result.

Versions and recovery

Save verified image versions into the project package, restore them explicitly, and reopen them after restart. A crash or reload can recover the durable draft, while preview-only gesture frames never overwrite the saved baseline.

Export and apply

Compare Original / Split / Edited, then export PNG / JPEG / WebP with pixel evidence. A standalone file session exports a file; a source-bound canvas image applies CSS or raster changes back to the canvas.

Asset Studio

Batch work with durable proposal history.

Batch workspace

Select local assets, apply watermark, text, filter, and export settings across the selection, then keep or revert explicit versions with before-and-after receipts.

Durable proposals

Proposal history survives restart in the project package. Open a saved proposal as a read-only preview, compare its evidence, and restore it explicitly; previewing alone never changes the active asset.

Provider queue

Asset jobs expose queued, unavailable, completed, or failed truth while other tabs stay usable. Provider-backed output is promoted only after a real result exists; an unavailable provider never produces a fabricated asset.

Global and session Library

Open the top-level Library to browse durable assets without first creating a project. Select an asset row to reveal its real Open, Edit, or Studio action; the action creates or addresses the required project session. Inside Canvas, the Library rail remains preview-before-commit.

Vector

Edit safe SVG structure and source.

Source staging

Edit SVG source in a staging area, validate it, then apply. An invalid draft remains visible for correction and is refused without replacing the last verified document.

Structure and resources

Edit elements, hierarchy, reusable resources, and text. Add, move, or remove nodes through typed operations that refuse broken references and structural cycles.

Paths and history

Edit typed path commands with keyboard support and undo or redo. Save durable versions, open read-only previews, and restore a chosen version explicitly.

Exact local export

Export the verified SVG source locally without a remote publish step. The exported file follows the active verified document, not an invalid staged draft.

Motion

Edit and render Canvas-bound or linked Motion work.

A current Motion screenshot is still needed. The older sample-scaffold figure was removed because it no longer represents this workflow.

Honest requirement

Motion edits and renders through the optional external ShellX Motion CLI and SDK. Install it on the same operating system as Design Studio; a session must be bound to a Canvas document or linked package. Configure its CLI path and root in Settings. Paths containing spaces are supported. If the renderer is unavailable, Motion returns an actionable reason and no fake file.

Render settings

Set duration, FPS, and format (MP4 H.264 or WebM VP9). Render, Download, or Save to project drops the clip into the project package as an exports row.

Scope to selection

Toggle Selection to render only the selected objects, or Whole board for the full document. An empty selection falls back to the whole board and the result carries an honest selection warning.

Timeline, tracking, and keying

Select frames and keyframes, edit curves and typed timeline values, create tracked regions, apply chroma-key and roto masks, and author spatial paths. Each mutation creates a confined immutable revision with a host-owned receipt.

Compositing, 3D, and procedural motion

Build a constrained typed compositing graph whose visual layout stays UI-local; arbitrary agent connect, disconnect, or reorder is refused. Import bounded glTF / GLB static scenes and author data-only procedural relationships, then bake or detach them explicitly.

Linked package and Cut roundtrip

Canvas-bound and linked-package sessions preserve package identity. Verified renders and ShellX Cut handoff artifacts carry document, package, and receipt lineage, and each accepted edit remains one undoable operation.

Review and Design Intelligence

Evidence first, with explicit human decisions.

Six review profiles

Run focused review manifests against the exact current source and DESIGN.md evidence. Review is detector-only: it reports findings and never silently applies a fix.

Review workspace

Record dispositions in a saved local workspace and reopen them later. If the source fingerprint changed, the workspace is labelled historical instead of being presented as current truth.

Design fingerprints

Design Intelligence compares two or more observed sources, lints node, provenance, truth, and data evidence, then returns exactly three candidates with no automatic selection.

Explicit handoff

After a person selects a candidate, Intelligence creates read-only contract and brief drafts. It does not mutate source, write a project file, persist a choice, or publish anything.

Design Contract v2

The v2 contract combines tokens, typography, components, states, evidence, and drift checks into a portable local artifact. Drafting and validation remain separate from applying source changes.

Agents

Bring your own coding CLI.

Two real ways in

Mode A (primary): Settings, Standalone CLI agent — Design Studio launches your local Claude Code, Codex, or Grok to do structural applies, chat edits, and redline briefs. Mode B: Desktop app MCP connector — register Design Studio as a local MCP server and drive it from your agent's terminal. The in-app copy buttons fill your installed app's real local paths.

Capability split (read this)

Coding-agent readiness is not media-provider readiness. Page and deck edits use your coding CLI; image and video generation are a separate media route (Direct local CLI, ShellX route, or No route yet). A ready coding agent does not mean image or video is ready.

Trust the receipt, not the prose

Every apply emits a host-owned receipt (file checksum, byte range, element touched) the model cannot fake, and a render-diff verifier compares real pixels. If the agent reaches outside scope, the host reverts the out-of-scope write and reports over-reach.

Installed skills and MCP runtime

The desktop package includes Design Studio agent skill bundle 1.19.0 for Codex and Claude Code, generated operation registry 1.1.0 with 169 operations, Debug API guides covering 79 namespaces, capability and recipe references, and the standalone MCP runtime. Connector setup verifies those packaged resources before advertising the profile.

Workflows

Common Design Studio tasks.

Edit your first page

Open a template or a blank Canvas, click an element, then move, resize, and restyle from the quick-action toolbar. Every deterministic edit is one undoable step.

Multi-select and arrange

Shift-click, marquee drag, or Select all, then align, distribute, group, ungroup, and reorder from the float cluster over a 2+ selection. Group and ungroup are source-owned operations with undo and agent-command parity.

Redline and apply

Draw cross-out, circle, arrow, bracket, and note marks, then Apply. All marks compile into one intent batch; you get a receipt and a render-diff verdict.

Generate from a brief

Ask your connected agent to build a page. It writes real source, then self-checks with quality, accessibility, and screenshot evidence. No agent ready means an honest needs-agent refusal, not a fabricated page.

Review and design intelligence

Run the visible Review profiles, inspect evidence-backed findings, and save a source-bound review workspace that reopens as current or historical truth. Design Intelligence turns a typed brief into explicit proposals and handoff artifacts; it never silently applies a suggestion.

Render a Motion clip

Configure the Motion CLI in Settings, open a Motion session, optionally scope to a selection, then render MP4 or WebM and save it into the project package.

Export and hand off

Export HTML, PNG, PDF, or JSON from a page; Deck PPTX for slides; Assets ZIP or Handoff ZIP for a full package. Rendered exports degrade honestly with a reason if the renderer is unavailable.

Reference

Local-first, and a note for agents.

Local-first and private

Rendering, redline, deterministic source edits, and verification all run on your machine over a loopback bridge. There is no cloud account, no telemetry, and no embedded keys. The only things that leave your machine are a URL you explicitly capture, a read-only GitHub version check in About, and whatever your own coding-agent CLI sends to its provider when you ask it to act.

Debug API

Design Studio exposes a local, loopback-bound automation surface (the window.__canvas namespace and an MCP connector) so agents and tests can drive it. It is documented inside the app and the connector setup, not in this user manual — this manual stays static and never drives the local API. This build carries agent skill bundle 1.19.0, Debug guidance for 79 namespaces, and operation registry 1.1.0 with 169 operations. See Settings, Desktop app MCP connector to connect an agent host.