Get started

Docs

Set up Modify and generate precise AI UI prompts.

These docs cover the practical workflow: install Modify in Chrome, visually adjust real webpages in context, capture HTML to Figma when design needs a reference, and export precise prompts your AI coding tool can turn into implementation work.

If you are new to Modify, start with the quick start below. If your team already uses Cursor, Copilot, Claude, or another AI coding workflow, use the export sections to keep UI handoff specific.

Quick start in five minutes

The fastest way to adopt Modify is to use it on a page where AI got the first draft close, but not exact. That keeps the workflow grounded in a real layout instead of a synthetic demo.

  1. Step 1Install Modify in Chrome and pin it for easy access

    Use Modify on the live pages you are tuning with AI so the workflow starts from the real browser state instead of a duplicated mockup.

  2. Step 2Open the real page you want to fine-tune

    That can be an AI-generated landing page, a staging route, a CMS preview, or a responsive state that only makes sense in the browser.

  3. Step 3Select elements and make the visual adjustment

    Move the headline, tune padding, adjust color, edit copy, or resize the component until the page matches your visual intent.

  4. Step 4Export the change as an AI-ready prompt

    Copy a structured prompt with selectors, CSS deltas, before-and-after values, and context that your AI coding tool can apply.

What to tune on the live page

Modify works best when the UI issue is obvious visually, but hard to explain precisely in a text prompt. Make the adjustment on the page, then let Modify translate it into implementation detail.

  • Hero spacing, CTA hierarchy, and layout balance after AI generates the first version
  • Padding, gap, color, and typography changes that are hard to describe in plain language
  • Responsive states and browser-only details that need measured visual adjustment
  • Prompt-ready UI changes that should move from approved page state to code quickly

What you can export

A good AI UI workflow does not end with another vague prompt. It ends with a format the next tool can apply. Modify gives you three practical ways to move from visual change to code.

Visual UI changes

Keep the change attached to the exact part of the live page that needs work, so the source of truth is the UI state you already approved.

AI prompt export

Generate precise prompts with target selectors, properties, old values, new values, and implementation context for AI coding tools.

HTML to Figma capture

Move a live page back into Figma when you need a design baseline, archive, or comparison point before refining the implementation.

Team habits that keep handoff clean

The highest-leverage change is usually not the tool itself. It is the habit of approving the visual state first and exporting only prompts that are specific enough to implement. That keeps design, product, engineering, and AI tools aligned on one source of truth.

  • Adjust the real page first, then ask AI to implement the specific visual state you approved.
  • Keep each prompt focused on one UI issue so the exported instruction stays easy to apply.
  • Use HTML to Figma capture when you need a reference artifact, not as a substitute for live tuning.
  • Send exported prompts to the AI tool or engineer that will implement the change, then review the result before shipping.

Need more context?

Review the roadmap for the next workflow improvements, revisit the privacy policy for website and extension data handling, or head back to the homepage to see pricing and the product overview.

For tool-specific workflows, see the Cursor UI prompt guide, the Claude Code UI editing guide, or the Modify vs Marker.io comparison.

If your team wants rollout help, send a note to support@modifyit.top.