Get started

OpenCode frontend workflow

Visually edit frontend UI before OpenCode writes the code

OpenCode can inspect your repository and implement frontend changes, but visual requests such as “move this button slightly left” still leave the target, property, and amount open to interpretation.

Modify adds a browser-side visual step. Make the change on the rendered page, review the exact selector and before-and-after values, then copy one structured prompt into OpenCode. Use the manual paste workflow with no setup, or install the optional open-source /modify command and skill.

Add visual editing to OpenCode — free

Free. No credit card required.

Read docs

Visual prompt handoff

Edit the page first.
Then prompt the AI.

Modify is designed for the last-mile UI changes that are obvious on screen but expensive to describe in chat.

Exported prompt includes

Target

Element selector and page context

Change

CSS property or visual operation

Before

Original value from the live page

After

Approved value after visual editing

Real Modify output

Give OpenCode an implementation brief, not a visual guess

Modify exports the target and approved values as plain structured text. You copy this prompt from Chrome and paste it into your existing OpenCode session.

# Target Modification Request

### Target: Get started button
- **Selector:** `.hero-actions .primary-button`
- **Current Text:** "Get started"

**Apply These Style Changes:**
```css
padding-inline: 24px;  /* was: 16px */
transform: translateX(-12px);  /* was: none */
```

**Requested Changes For This Target:**
- Reuse the existing primary button component and preserve its hover state.

Optional OpenCode companion

Install a /modify command in one step

The open-source companion adds a project-level /modify command and modify-frontend skill. It helps OpenCode map Modify selectors and before-and-after values back to your existing components, utilities, and design tokens.

It installs plain Markdown files only. There is still no background connection between Chrome and your terminal, and you stay in control of every prompt and code change.

Project install

npx modify-opencode init

For a machine-wide install, run npx modify-opencode init --global.

View source on GitHubView npm package

Where a terminal-first workflow loses visual precision

You verify frontend work in the browser, but the next instruction usually goes back through prose or a screenshot. That forces OpenCode to infer which element, CSS property, and measurement should produce the result you want.

Modify lets you approve the visual state first. The exported prompt records selectors, original values, requested values, text changes, deletion requests, and per-element comments so OpenCode starts from concrete implementation context.

How to use Modify with OpenCode

  1. Step 1

    Open your dev server page (or the deployed site) in Chrome.

  2. Step 2

    Adjust elements visually with Modify: drag, resize, recolor, edit text, tune spacing.

  3. Step 3

    Review the captured changes and comments, then click Copy AI Prompt.

  4. Step 4

    Paste the structured prompt into your OpenCode session and ask it to implement the requested state in your existing project conventions.

No native OpenCode integration required

Modify does not connect to your terminal or repository. It prepares the visual implementation brief in Chrome; OpenCode keeps control of file discovery, code edits, tests, and review.

Because the handoff is plain structured text, the workflow does not depend on a specific OpenCode model or provider. The optional /modify companion standardizes how OpenCode interprets that text, but it does not create a background connection or grant the browser extension repository access.

Tips for accurate OpenCode frontend changes

  • Batch related tweaks on one component into a single exported prompt.
  • Tell OpenCode which route or component owns the page when the repository is large.
  • Ask OpenCode to reuse existing design tokens, utilities, and components instead of copying raw CSS blindly.
  • Hard-refresh and compare after implementation; export a follow-up delta only when another visual change is still needed.
  • For responsive fixes, edit at the target breakpoint and mention the viewport.

Choose the right browser handoff

Modify vs OpenCode Chrome Annotation

Both products bring browser context into an OpenCode workflow, but they solve different parts of the problem. This comparison is based on the public OpenCode Chrome Annotation listing checked in July 2026.

Compare
Modify
OpenCode Chrome Annotation
Primary action
Visually edit layout, styles, text, and add comments
Select an element and send an annotation with a screenshot
Implementation context
Selector plus before-and-after values, text changes, deletions, and comments
Annotation, element metadata, page context, and screenshot
OpenCode setup
No OpenCode plugin; copy and paste the exported prompt
Requires its local OpenCode plugin and localhost connection
Best fit
Approve the desired visual state before asking OpenCode to implement it
Send annotated browser feedback directly into a connected OpenCode session
Review the public comparison source

FAQ

Does Modify add a visual editor inside OpenCode?

No. Modify runs in Chrome on the rendered webpage. It exports a structured implementation prompt that you paste into OpenCode; it does not change the OpenCode interface.

How does Modify connect to OpenCode?

It does not connect directly. Click Copy AI Prompt in Modify, switch to your OpenCode session, and paste the prompt. You can paste it normally or use the optional open-source /modify command and skill to standardize the implementation workflow.

How is Modify different from OpenCode Chrome Annotation?

Modify lets you make and approve visual CSS or content changes before exporting exact deltas. OpenCode Chrome Annotation focuses on selecting an element and sending annotation context through a local OpenCode plugin. Modify uses a manual clipboard handoff and does not require that plugin.

Does it depend on which model OpenCode uses?

No. The handoff is plain structured text, so it can be used with the model or provider you have configured in OpenCode.

Does Modify need repository access?

No. Modify works on the rendered page in Chrome. OpenCode keeps control of the repository; Modify supplies the visual change request and available page context.

Make the page look right, then hand the exact request to OpenCode

Install Modify, edit the rendered frontend in Chrome, and copy your first structured implementation prompt into OpenCode.

Install the OpenCode visual workflow — free

Free. No credit card required.