Skip to content

[FEATURE] Desktop: "screenshot / mockup → working code" workflow with built-in live preview (like CUE / code-to-UI) #41361

Description

Feature request

GitHub/Codex CLI have agentic PR review loops; Claude Code desktop has visual diff; Trae has entire "screenshot to UI code". OpenCode currently does not have a first-class "image/screenshot → working UI code" workflow in the desktop app.

What I'd like

In the Desktop app, a flow like Trae's "CUE" / Gemini CLI's "Design to Code":

  1. User drags a screenshot (or picks a clip) into the chat → the image is attached (already works via drag & drop).
  2. A dedicated workflow (e.g. /screenshot-code or a "convert to UI" button) tells the model:
    • generate a complete single-file HTML/CSS/JS (or based on project's framework: React/Vue) implementing that mock,
    • plus a running preview (live). Desktop currently has no way to preview a rendered result.

Why

  • Many users use opencode desktop to build UIs; "截图转页面" is the single most requested productivity flow in async (Chinese) forums, and is the biggest Trae/Claude difference for UI tasks.
  • There's currently no built-in preview: we can only open an external browser and commit changes.

Related

Scope suggestion

  • MVP: detect image attachments → ask model to generate a single self-contained index.html prototype → open in embedded webview (desktop has webui already) with hot-reload on file save.
  • Later: framework-aware generation (next/src/app) and diff apply.

This is a quick win: the tools exist (model can read images; desktop has webview), only the UX workflow is missing.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions