kittl-ai-edit · Meridian Skills

Kittl AI Edit (via Chrome)

Kittl is a browser-based design app with a suite of AI image tools. This skill drives those tools through the Claude in Chrome connector to make a targeted change to an image on a Kittl canvas (the kind of "the client/reviewer wants this one thing fixed" edit) while keeping the rest of the design intact.

The whole game is: pick the smallest tool that does the job, feed it good references, write a prompt that protects the artwork, and verify the result before calling it done. AI regeneration is powerful but happy to quietly redraw text, drop elements, or crop the subject. Most of this skill is about not letting it.

Before you start (hard requirements)

You need the Claude in Chrome tools. They're usually deferred, so load them with one ToolSearch call, e.g. select:mcp__claude-in-chrome__tabs_context_mcp,mcp__claude-in-chrome__navigate,mcp__claude-in-chrome__computer,mcp__claude-in-chrome__find,mcp__claude-in-chrome__file_upload,mcp__claude-in-chrome__form_input,mcp__claude-in-chrome__browser_batch,mcp__claude-in-chrome__switch_browser.
Kittl must be open and logged in in the connected browser (app.kittl.com). If a project is open, its editor lives at app.kittl.com/project/<id>.
Reference and source images must be real files in a connected folder (for Meridian, that's usually /Users/you/Downloads/refs or the active Cowork workspace). Images pasted into chat do NOT land on the filesystem, so file_upload can't reach them. If Matt pastes a reference in chat, ask him to drop the actual file into a connected folder (or add it to the Kittl canvas himself) before you can use it. Don't burn time hunting; just ask.
If more than one Chrome is connected, you'll be blocked until one is chosen. Call switch_browser (it pings every connected extension and lets the user click Connect in the right one) rather than guessing; you can't tell them apart from device IDs alone.

Step 1: Map the request before touching anything

Pin down four things, from the conversation and by looking at the actual files:

Which image is being edited (open it; don't assume from the name).
What change: perspective/angle, reflection, background, add/remove an element, reframe/aspect, upscale, or vectorize.
Reference image(s), if any: the thing the result should match.
The preserve list: exactly what must survive unchanged (title, headlines, body text, logo, icons, colors, layout).

Flag contradictions instead of guessing. Reviewer notes are often ambiguous or have the files crossed. If a note says "this reflection is the good one" but the file it names is the one the reviewer elsewhere called "too sharp," stop and reconcile it with Matt before spending tokens. Getting the direction backwards means regenerating the exact thing the reviewer rejected.

Step 2: Pick the right Kittl AI tool

Reach for the smallest tool that does the job. It's cheaper, faster, and less likely to disturb parts you wanted to keep.

Remix / Generate Image (with reference images): whole-image regeneration. Use for perspective/angle changes, restyles, or any change to the box geometry itself. This is the main tool for "match this reference's angle." Give it the target as a second reference image; a text description alone is much weaker.
Edit Area: an AI brush. Paint a region, prompt it, and only that region regenerates. Use when just part of the image changes and the rest must stay pixel-identical (e.g., soften only the reflection at the base, remove one object, fix one detail). It reads the whole image for lighting/style context, so edits blend in.
Erase & Fill: remove an object and fill the gap.
Reframe: change aspect ratio / extend the canvas.
Background Remover / Upscale / Vectorize: as named.

Key limits to remember:

Perspective/geometry cannot be done with Edit Area. It needs a full Remix, because you're changing the whole 3D pose.
Reflection softening can go either way: Edit Area on just the reflection zone (keeps the box pixel-perfect), or baked into the Remix prompt if you're already regenerating for perspective. If you're doing a perspective Remix anyway, fold the reflection fix into the same prompt: one generation, both fixes.

Step 3: The Remix-with-reference workflow (the common case)

This is the path for "re-render this to match the reference's angle while keeping the design." The gotchas are inline because each one cost real time to learn.

Connect. Load the Chrome tools, tabs_context_mcp to see tabs, pick the browser if prompted (switch_browser).
Work in a FRESH blank project, not the busy canvas. In the menu (top-left hamburger) → New Project → pick Standard (1200×1200 is fine; the source images are square). The main working canvas (e.g. "Marco's Canvas") is a minefield of prior AI-gen nodes; a stray click selects one and stages its old prompt, and it's easy to trigger a generation you didn't mean to. A clean project gives you full control and overwrites nothing. You can move the finished image wherever it belongs afterward.
Upload the files. Open the Uploads panel (left sidebar; find "Uploads button"). find the panel's hidden file input and file_upload the source image and the reference image (real paths under a connected folder; combined < 10 MB).
Place the source on the canvas by clicking its upload thumbnail (newest upload sits top-left of the grid). If it lands overlapping other art, drag it to a clear spot so you can select it cleanly later.
Select the source → click "Remix" in the contextual toolbar that appears above it. This stages it as image 1 in the AI input bar at the bottom.
Set the mode + model BEFORE typing the prompt. The generation-mode picker offers Agentic AI, Generate Image, Generate Video; choose Generate Image. Then open the model picker and choose one suited to faithful mockups:
- Nano Banana 2: "realistic imagery & graphic editing"; strong at re-posing while preserving the design. Good default, cheaper.
- Nano Banana 2 4K / Nano Banana Pro: higher-fidelity mockups; use if base quality or text sharpness isn't good enough.
- ChatGPT Image 2 tends to redraw more and is more likely to alter text/layout, so avoid it for "preserve the artwork" jobs.
Set aspect ratio to Match (matches the source).

Why order matters: switching the mode (e.g., Agentic AI → Generate Image) clears the prompt field. If you type first and switch after, you lose the prompt. Mode and model first, prompt last.
Add the reference as image 2. find the hidden file input inside the AI prompt toolbar (distinct from the Uploads panel's input) and file_upload the reference to it. You should now see two thumbnails staged: 1 = source, 2 = reference.
Write the prompt with form_input, not by typing. find the prompt textbox element and set its value with form_input. Do not rely on Cmd+A to clear it. Kittl intercepts Cmd+A as "select all objects on the canvas," so it won't clear the field, and typing over leftover text garbles the prompt (this bites every time). form_input replaces the whole value cleanly in one shot. See the prompt pattern below.
Verify the staged setup (two thumbnails, correct model, "Match", prompt reads correctly with no leftover fragments), then click the send / up-arrow to generate. Each generation spends tokens (the count shows on the button), so confirm the setup is right before sending rather than firing repeatedly.
Wait, then verify (Step 5). Generations take ~15-45s; a purple "Generating Image" tile marks the pending result, which drops onto the canvas as a new object when done.

Step 4: Prompt pattern (perspective match, preserve the design)

Structure every "match a reference" prompt the same way:

Re-render the [SUBJECT] box from image 1 at the exact camera angle and perspective of the
box in image 2: [describe the target angle in words too, e.g. a three-quarter view with the
front face turned slightly to the left, the right side panel clearly visible, seen at a
slight downward angle]. Show the ENTIRE box fully in frame, centered, nothing cropped.
[Reflection instruction: either "keep the existing soft, subtle, diffuse reflection" or
"replace the sharp mirror reflection with a soft, diffuse faded glow, NOT a sharp mirror
reflection."] Keep the [SUBJECT] front artwork, the [TITLE], all text and headlines, the
[logo / feature icons / specific elements], and the [colors] exactly the same and undistorted.
Photorealistic product box mockup, clean studio lighting.

Two lines that repeatedly save the output:

"Show the entire box fully in frame, centered, nothing cropped." Without it, the model will happily crop the subject and leave dead space; in one run it dropped the entire right-hand column of feature icons. Name the elements you must keep so it can't quietly omit them.
Describe the target angle in words in addition to the reference image. The reference does the heavy lifting, but the words disambiguate.

Worked example (perspective + reflection, both fixed in one pass): Input: Northwind "solution stack" box, reflection too sharp, wrong perspective; Halcyon blue box as the angle reference. Prompt: "Re-render the Northwind product box from image 1 at the exact camera angle and perspective of the box in image 2: a three-quarter view with the front face turned slightly to the left, the right side panel clearly visible, seen at a slight downward angle, on a dark studio floor with a soft, subtle, diffuse reflection beneath it (a gentle faded glow, NOT a sharp mirror reflection). Keep the Northwind front artwork, the Northwind logo, all text and headlines, the feature icons, and the orange-and-yellow colors exactly the same and undistorted. Photorealistic product box mockup, clean studio lighting."

Worked example (perspective only, keep the good reflection): Input: Terrace Dining box, perspective wrong but reflection already good; Halcyon box as angle reference. Prompt: "...Show the entire box fully in frame, centered, nothing cropped. Keep the existing soft, subtle, diffuse reflection on the dark studio floor (a gentle faded glow, NOT a sharp mirror reflection). Keep the Terrace Dining front artwork, the TERRACE DINING title, all text, the illustration, and the brand colors exactly the same and undistorted..."

Step 5: Verify before you call it done

This is not optional: AI regeneration's failure modes are easy to miss at a glance. Zoom in on the result (computer action zoom) and check:

Artwork integrity first, because that's the part AI breaks. Is every text block present, legible, and spelled right? Are all logos and icons there and undistorted? Colors preserved? Compare against the source element-by-element (e.g., all eight feature icons still present).
Perspective matches the reference. Note honestly if it's slightly off (e.g., a touch more top-down than the reference) so Matt can decide if it's close enough.
Reflection is what was asked (soft/diffuse vs sharp).
Composition: nothing cropped, subject centered, no blank voids.

If it failed (cropped, missing elements, garbled or misspelled text, distorted layout): regenerate with a sharper prompt (add/strengthen the "entire box, centered, nothing cropped" and preserve lines) or step up the model (Nano Banana 2 4K / Pro). Generating 2 variants at once (set count to 2×) is a reasonable hedge for a finicky, subjective fix.

Gotchas: the expensive lessons, in one place

Chat-pasted images aren't files. Get the real file into a connected folder first.
Multiple browsers → you must pick one. Use switch_browser.
New blank project, never the live canvas. Avoids stray selections and accidental generations among the prior AI nodes.
Set mode + model before typing, because switching mode clears the prompt.
Use form_input to set the prompt. Cmd+A doesn't clear Kittl's prompt field; re-typing garbles it with leftover text.
"Match" aspect + "entire subject, centered, nothing cropped" to avoid crop/void failures and dropped elements.
Perspective = Remix; local touch-ups = Edit Area. Edit Area can't change geometry.
Every generation costs tokens (shown on the send button), so verify the staged setup before sending.
The browser connection can blip. If a tool returns "Claude in Chrome is not connected," it's usually transient: re-run tabs_context_mcp and retry; a half-finished drag may need redoing.

Meridian Display Co. reference conventions

The house perspective reference is the Halcyon blue watch box (web_SEG_box_blue...). When Matt says "match the perspective on the website" or "use the blue M-SEG box," that's the angle target.
Segment box mockups are named M-SEG*, e.g. M-SEG1 (2).jpg = the Terrace Dining box, M-SEG2-2 (1).jpg = the Northwind box. Reviewer notes reference these filenames; open them to confirm which is which, since the names aren't self-describing.
Reference/source files usually live in /Users/you/Downloads/refs or the active Cowork workspace.
Reviewer feedback often comes from Nora and is phrased loosely ("too sharp," "wrong perspective even though that's the website's"). Treat it as intent to interpret, reconcile ambiguities with Matt, and match a concrete reference image rather than a vague adjective.
Deliverable: the corrected image sits on the Kittl canvas as a new object. Offer to export it (download / into refs) and to place it back on the main canvas once approved.