D.1 First run: choosing how generations run

Since 0.21.1, OpenDesign does not require an account. The first-run flow asks two questions --- what do you want to make, and how do you want to run it --- and both have an "or" answer. You can connect a locally installed coding-agent CLI, paste a BYOK key for an API provider, or sign into OpenDesign Cloud for the subscription models and hosted image generation. Signing in is optional, and signing out preserves everything stored locally: provider keys, base URLs, model choices, and media defaults. The login mandate that briefly existed mid-year (and that the community pushed back on hard) lasted roughly three weeks; the product's stable position is that the cloud is an extension of the local workspace, never a gate in front of it.

The execution-mode choice lives permanently in Workspace settings → Models & providers, as a two-option segmented control: Local CLI or API providers. Below it, OpenDesign lists every coding-agent CLI it detected on your machine --- the app rescans your PATH and shows version numbers, default models, and connection problems inline.

You can run more than one CLI at once and switch the active agent per session from the composer. The per-agent model pickers are entitlement-aware and label themselves with the agent's name: the reference install's Home picker reads Antigravity · Claude Sonnet 4.6 (Thinking), and inside a project the same control offers the full model ladder --- Default (CLI config), Gemini 3.1 Pro (High/Low), Gemini 3.5 Flash (High/Medium/Low), Claude Sonnet 4.6 (Thinking), Claude Opus 4.6 (Thinking), GPT-OSS 120B (Medium) --- plus a link to the execution settings. Choosing a fast tier for iteration and a thinking tier for final generation is a two-click move, per project.

D.2 The left navigation: every destination and when to use it

The workspace rail is short and stable in v0.21.1: Home, Community, Personal projects, Design systems, Plugins, and Workspace settings --- with community links (Discord, the @OpenDesignHQ X account, and email) pinned to the bottom of the rail since 0.20.2. A ⌘K search box sits at the top of the rail and reaches projects, design systems, and plugins from anywhere.

Home is the daily entry point --- creation chips, composer, examples, recent projects. Covered in D.3.

Community is the template gallery: what other people have published, filterable by type and category, with Remix and Use actions on every card. Covered in D.7.

Personal projects is the supervision surface: a filterable grid or list of everything you have made, with multi-select, type filters ("Any type"), sorting, and grid/list view toggles. Project cards carry their type badge (Prototype, Slide, Design System, Media, Website clone) and a per-card actions menu.

Design systems holds your authored systems and the 152 official presets. Covered in D.6.

Plugins is the marketplace, split into Expert suites and Skills. Covered in D.7.

Workspace settings is the full configuration surface --- nine sections, catalogued in D.9. It is also reachable with Cmd/Ctrl+, from anywhere.

D.3 The home surface and creation types

Home in v0.21.1 is one composer plus three rails. The composer row carries the creation-type chips --- Prototype (the default, and the chip Home opens on), Slide deck, Image, Document, HyperFrames, Website clone, and an All menu holding Video, Audio, Live artifact, and WebGL. The list is product-owned and stable: since 0.20.0, installed plugins no longer add or remove types, which ended a long stretch of composer-shape drift. Selecting Prototype reveals a sub-filter row --- Landing/marketing, Dashboards, Mobile app, Wireframe, Apps, More --- so the common prototypes never leave the home surface.

The Mode control is the Ask / Plan / Design contract from Chapter 03. The picker states each contract in one line --- Plan's is the newest: it creates an editable plan document first, then hands off to Design after you review it.

The Design system picker under the composer binds a brand contract before the prompt ships. It opens with search, a Clear action, a Create button, and the official presets list --- Neutral Modern flagged as the chat default, then Agentic, Airbnb, Airtable, Ant, Apple, Application, Arc Browser, Artistic, Atelier Zero, Bento, and onward through all 152.

Below the composer, the examples rail is usage-ranked: the cards shown lead with templates that have real usage behind them, and they re-filter with the creation-type chips. Below that, Recent projects carries multi-select, type filter, sort, and grid/list toggles.

D.4 The project workspace

Opening a project switches the window to the workspace: a chat pane on the left, a tabbed file area on the right, and a toolbar that changes with the artifact type. The workspace shown here is a deck project --- an editorial four-slide presentation about a fictional book-writing framework --- because decks exercise the most chrome.

Anatomy worth naming, because Chapter 03's loop refers to it: the run header shows the agent that executed the turn and how long it took; tool rows expand to the actual commands and thoughts; the self-check panel is the skill-driven quality gate scoring its own output before declaring done; and the next-step chips ("Match next step", "Design polish / ready to ship", "More") are one-click follow-up prompts seeded by the agent itself.

Inspecting the source: the Code view

The Preview/Code toggle is a real editor, not a read-only viewer. Code view shows the artifact's actual source --- for a deck, the self-contained HTML with its design tokens declared as oklch() custom properties at the top of the file.

The Design Files tab shows the project's file inventory as cards with rendered thumbnails and per-file age.

Every file carries a Versions panel: per-version thumbnails, the prompt that produced each, Current/AI-edit markers with timestamps, and Switch-to-this-version / Download actions. Version history has existed since 0.14.0; the panel is now per-file rather than per-project.

D.5 Editing, comments, and hand-off — refining in place

Once a generation lands on the canvas, refining the output does not require starting a new turn from scratch. The project toolbar provides a set of in-place tools for direct visual editing, structured feedback, and export: you can adjust elements directly on the canvas, leave spatial annotations for the agent, or hand the project off to external editors and deployment targets.

Direct manipulation: the Edit tool

The preview toolbar carries four mode toggles: Comment, Mark, Edit, and a Comments counter. Edit is the matured direct-manipulation editor from 0.17.0: click any element on the canvas and it acquires selection handles; drag to move or resize; double-click text to edit it in place. The pinned inspector exposes the element's full parameter set --- content, color in oklch(), background, opacity, font family, size, weight, line height, letter spacing, radius, border, dimensions, padding, margin, and flex alignment --- with undo, redo, delete, cancel, and save along the bottom.

Comments and marks

Comment mode turns the cursor into an annotation tool: click anywhere on the canvas to pin a note. Comments queue in the chat pane and are visible to the agent on the next turn --- the mechanism that powers both solo review and the two-way commenting in Team Workspace (Chapter 12). Mark mode is the older freehand annotation for circling regions.

Present, Export, Share, Hand-off

The toolbar's right end is where finished work leaves the canvas --- as four distinct actions since 0.19.0, not one tabbed popover. Present offers in-tab presentation with speaker notes in a popup window (presenter view), fullscreen, or a new tab. Export writes files. Share publishes. The editor hand-off button (with "Open in Cursor" as its one-click form) pushes the project into a real editor.

D.6 Design systems

The Design systems page splits into Your systems (authored or captured) and Official presets --- 152 as of v0.21.1, filterable to Web, searchable, and each opening into a detail pane: Identity (the system's self-description), Logo, Typography with display/body/mono faces and weight ranges, Palette with named token swatches, imagery and layout posture, and a row of design-system assets --- landing page, pitch deck, poster, email, newsletter, form page --- that render the system's own documentation in its own voice.

Authoring a house system and capturing brands from URLs, DESIGN.md files, .fig files, and the browser clipper is Chapter 05's subject; the pipeline emits user: systems that appear alongside these presets and attach from the composer exactly the same way.

D.7 Community and plugins

The Community surface is the shared template gallery. Type tabs (Prototype, Slides, Live Artifact, Image, Video, HyperFrames, Audio) and category filters (Landing/marketing, Brand/design, Dashboards, Apps, Developer tools, Docs/reports) narrow the field; every card carries Remix and Use actions, and since 0.16.0 the gallery leads with templates that have real usage behind them.

The Plugins page is a marketplace with a two-tier model: Expert suites --- workflow-level bundles that install several skills, connectors, and quality gates --- and plain Skills. Sources split into OpenDesign official and Personal; categories mirror the creation types. Official suites as of v0.21.1 include Hallmark (anti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots), Humanize PPT (audience-state-transfer outlines, per-page media decisions, a production brief, and a capped three-round checkup on the rendered deck), Handoff to OpenCode (an offline-complete bundle: verbatim project mirror, design system materialized with real font binaries, machine-enforced adherence config), Critique theater (five-dimension critique panel emitting the score signal), Code import, Design extract, and Build test.

D.8 Use everywhere: CLI, MCP, headless

The "Use everywhere" framing of earlier versions has consolidated into two surfaces: the od CLI (full command reference in Appendix A) and the OpenDesign MCP section of Workspace settings. The MCP page states what an external agent gains --- read or search any file in a project; collect a design's files, styles, components, and fonts as context; use the project and file currently open in OpenDesign as context --- and prints a ready-made setup command per CLI.

The CLI carries the same capabilities headlessly: od generate, od export (including by project ID and --format html for the offline-safe single-file export), od lint (the anti-slop linter, no model needed), od brand, od library, od templates, od mcp install <agent>, od amr status|logout, and the DeepSeek Harness setup commands. Appendix A is the complete map.

D.9 Workspace settings

Workspace settings (nav rail, or Cmd/Ctrl+,) is one surface with nine sections. The rail: Models & providers, General, Open Design Labs, Instructions & rules, Memory, Media providers, OpenDesign MCP, Privacy, About. Chapter 02 maps them; this section shows the ones with meaningful visuals.

General holds language (20 locales), the completion-sound and desktop-notification switches, Pets --- the desktop-companion delight layer, with eight built-ins from Clippy to a YoRHa unit --- project locations, and the Design Jury toggle ("When enabled, a five-panel review appears alongside agent generations and scores the output before shipping").

Open Design Labs is new in 0.21.1 and is the settings page to watch. Its preamble is worth quoting in full because it tells you how the project thinks about quality: "Get early access to capabilities that have not shipped yet. They are usually better than what you have today, and turning one off restores the current behaviour right away." The first experiment is Design Harness --- a switch that routes your next generation through the project's newest generation strategy, described as "noticeably more polished results (beta)".

Memory shows the saved-facts store --- categorized User / Project / Reference / Rule, ten saved on the reference machine, each with preview, edit, and delete. Instructions & rules is the fixed global-rule text injected into every chat.

Media providers wires image, video, audio, and search backends. Configured providers show a green dot; keys are stored masked and never displayed after saving. Privacy carries the two telemetry toggles (anonymous metrics; conversation and tool content, with secrets stripped), the anonymous ID with rotation, and a delete-my-data action.

About is the update-control center: version and channel, "You are already on the latest version", Check again, View release notes, the auto-install checkbox, Clear update cache, Export diagnostics, and Reset onboarding.

D.10 Message center and account surfaces

The avatar menu (top right) opens the account surface: signed-in identity, plan, allowance balance, and links to Settings, Message center, GitHub, feature requests, and sign-out. The Message center is the plain-list notification surface (simplified in 0.20.2) for OpenDesign updates, platform announcements, and account notices --- with a footer link into desktop notification settings.

D.11 Figure index and capture notes

All figures in this appendix were captured September 1, 2026 from OpenDesign v0.21.1 (stable channel, packaged app, macOS arm64), window-scoped at the app's default size. The full-size originals live in the book's repository under state/screenshots/v0211/.