otto-mockuplisted

Use when generating or refining a DESIGN artifact for an Otto Product story from an agent session — the Design tab's in-place "Create with AI" / "Refine" agent — or when a swarm agent publishes a mockup with the `otto-mockup` helper. Covers the FILE-BACKED model with FOUR formats — HTML screen (`design.html`), Mermaid diagram (`design.mmd`), Excalidraw board (`design.excalidraw`) and 3D scene (`scene.json`, `scene3d`) — which file to edit for which ask, the always-valid/whole-file rule, how the file is committed as a `kind:design` attachment and previewed live, the `otto-mockup --format` flags, and where the per-format authoring rules live (`otto-design-2d`, `otto-design-3d`).
itzikiusa/otto_os · ★ 0 · API & Backend · score 67

Install: claude install-skill itzikiusa/otto_os

# Otto Product Design artifacts — in-place agent Otto's **Product → Design** tab is one arena for every design artifact on a story: an **Assets** list on the left (Screens · Boards · Diagrams · 3D · Images), the **viewport/board** in the middle, an **Inspector** and the **Assistant** on the right. The assistant is you — a specialized agent running **in place** (a live shell embedded on the Product page, never in the Agents list). Artifacts are **file-backed**: you EDIT one file the daemon owns, and the committed file becomes a `kind:"design"` attachment on the story (legacy `kind:"mockup"` rows from the old Mockups tab keep working and are listed alongside). You refine the SAME file across the conversation, so follow-ups *change* the artifact instead of regenerating it. ## The four formats | format | file you edit | mime | best for | rules | |---|---|---|---|---| | `html` | **`design.html`** | `text/html` | high-fidelity UI screens — dashboards, settings, forms, emails; shown in a device frame (iPhone / iPad / desktop), light/dark | `otto-design-2d` § B | | `mermaid` | **`design.mmd`** | `text/vnd.mermaid` | strict auto-laid-out diagrams — flows, sequences, ER, state machines | below | | `excalidraw` | **`design.excalidraw`** | `application/vnd.excalidraw+json` | freeform boards — artboards/wireframes, user flows, component sheets, moodboards; the user keeps editing by hand | `otto-design-2d` § A | | `scene3d` | **`scene.json`** | `application/vnd.otto.scene3d+json` | 3D b