SKILL.md

skills/kittl-ai-edit/SKILL.md

1. ---
2. name: kittl-ai-edit
3. description: >-
4. Drive Kittl's AI image tools through the Claude in Chrome connector to make targeted edits
5. or regenerations of an image on a Kittl canvas (match a reference's perspective/angle, fix
6. or soften a reflection, change a background, add/remove an element, reframe, upscale,
7. vectorize) while preserving the original artwork, text, logos, and colors. Use whenever
8. Matt or anyone at Meridian Display Co. wants to fix, correct, redo, restyle, or re-render an image
9. inside Kittl with its AI features, especially product/box mockups like the M-SEG segment
10. boxes. Trigger on "fix the perspective to match the reference," "the reflection is too
11. sharp, soften it," "regenerate this mockup from the Halcyon angle," "redo the Terrace Dining
12. box," "steer Kittl to correct this render," "edit this image in Kittl with AI," or any time
13. a Kittl artboard image needs an AI-driven correction from reviewer feedback plus reference
14. images. Also trigger when handed reviewer edit notes (e.g. from Nora) plus reference files
15. to apply in Kittl.
16. ---
18. # Kittl AI Edit (via Chrome)
20. Kittl is a browser-based design app with a suite of AI image tools. This skill drives those
21. tools through the **Claude in Chrome** connector to make a *targeted* change to an image on
22. a Kittl canvas (the kind of "the client/reviewer wants this one thing fixed" edit) while
23. keeping the rest of the design intact.
25. The whole game is: pick the smallest tool that does the job, feed it good references, write
26. a prompt that protects the artwork, and **verify the result** before calling it done. AI
27. regeneration is powerful but happy to quietly redraw text, drop elements, or crop the
28. subject. Most of this skill is about not letting it.
30. ## Before you start (hard requirements)
32. - **You need the Claude in Chrome tools.** They're usually deferred, so load them with one
33. 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`.
34. - **Kittl must be open and logged in** in the connected browser (app.kittl.com). If a
35. project is open, its editor lives at `app.kittl.com/project/<id>`.
36. - **Reference and source images must be real files** in a connected folder (for Meridian, that's
37. usually `/Users/you/Downloads/refs` or the active Cowork workspace). **Images pasted
38. into chat do NOT land on the filesystem**, so `file_upload` can't reach them. If Matt pastes
39. a reference in chat, ask him to drop the actual file into a connected folder (or add it to
40. the Kittl canvas himself) before you can use it. Don't burn time hunting; just ask.
41. - **If more than one Chrome is connected**, you'll be blocked until one is chosen. Call
42. `switch_browser` (it pings every connected extension and lets the user click Connect in the
43. right one) rather than guessing; you can't tell them apart from device IDs alone.
45. ## Step 1: Map the request before touching anything
47. Pin down four things, from the conversation and by *looking at the actual files*:
49. 1. **Which image** is being edited (open it; don't assume from the name).
50. 2. **What change**: perspective/angle, reflection, background, add/remove an element,
51. reframe/aspect, upscale, or vectorize.
52. 3. **Reference image(s)**, if any: the thing the result should match.
53. 4. **The preserve list**: exactly what must survive unchanged (title, headlines, body text,
54. logo, icons, colors, layout).
56. **Flag contradictions instead of guessing.** Reviewer notes are often ambiguous or have the
57. files crossed. If a note says "this reflection is the good one" but the file it names is the
58. one the reviewer elsewhere called "too sharp," stop and reconcile it with Matt before
59. spending tokens. Getting the direction backwards means regenerating the exact thing the
60. reviewer rejected.
62. ## Step 2: Pick the right Kittl AI tool
64. Reach for the *smallest* tool that does the job. It's cheaper, faster, and less likely to
65. disturb parts you wanted to keep.
67. - **Remix / Generate Image (with reference images)**: whole-image regeneration. Use for
68. perspective/angle changes, restyles, or any change to the box geometry itself. This is the
69. main tool for "match this reference's angle." Give it the target as a second reference
70. image; a text description alone is much weaker.
71. - **Edit Area**: an AI brush. Paint a region, prompt it, and only that region regenerates.
72. Use when just *part* of the image changes and the rest must stay pixel-identical (e.g.,
73. soften only the reflection at the base, remove one object, fix one detail). It reads the
74. whole image for lighting/style context, so edits blend in.
75. - **Erase & Fill**: remove an object and fill the gap.
76. - **Reframe**: change aspect ratio / extend the canvas.
77. - **Background Remover / Upscale / Vectorize**: as named.
79. **Key limits to remember:**
81. - **Perspective/geometry cannot be done with Edit Area.** It needs a full Remix, because
82. you're changing the whole 3D pose.
83. - **Reflection softening** can go either way: Edit Area on just the reflection zone (keeps the
84. box pixel-perfect), *or* baked into the Remix prompt if you're already regenerating for
85. perspective. If you're doing a perspective Remix anyway, fold the reflection fix into the
86. same prompt: one generation, both fixes.
88. ## Step 3: The Remix-with-reference workflow (the common case)
90. This is the path for "re-render this to match the reference's angle while keeping the
91. design." The gotchas are inline because each one cost real time to learn.
93. 1. **Connect.** Load the Chrome tools, `tabs_context_mcp` to see tabs, pick the browser if
94. prompted (`switch_browser`).
96. 2. **Work in a FRESH blank project, not the busy canvas.** In the menu (top-left
97. hamburger) → **New Project** → pick Standard (1200×1200 is fine; the source images are
98. square). The main working canvas (e.g. "Marco's Canvas") is a minefield of prior AI-gen
99. nodes; a stray click selects one and stages its old prompt, and it's easy to trigger a
100. generation you didn't mean to. A clean project gives you full control and overwrites
101. nothing. You can move the finished image wherever it belongs afterward.
103. 3. **Upload the files.** Open the **Uploads** panel (left sidebar; `find` "Uploads button").
104. `find` the panel's hidden file input and `file_upload` the **source** image and the
105. **reference** image (real paths under a connected folder; combined < 10 MB).
107. 4. **Place the source on the canvas** by clicking its upload thumbnail (newest upload sits
108. top-left of the grid). If it lands overlapping other art, drag it to a clear spot so you
109. can select it cleanly later.
111. 5. **Select the source → click "Remix"** in the contextual toolbar that appears above it.
112. This stages it as **image 1** in the AI input bar at the bottom.
114. 6. **Set the mode + model BEFORE typing the prompt.** The generation-mode picker offers
115. *Agentic AI*, *Generate Image*, *Generate Video*; choose **Generate Image**. Then open
116. the model picker and choose one suited to faithful mockups:
117. - **Nano Banana 2**: "realistic imagery & graphic editing"; strong at re-posing while
118. preserving the design. Good default, cheaper.
119. - **Nano Banana 2 4K / Nano Banana Pro**: higher-fidelity mockups; use if base quality or
120. text sharpness isn't good enough.
121. - *ChatGPT Image 2* tends to redraw more and is more likely to alter text/layout, so avoid
122. it for "preserve the artwork" jobs.
124. Set aspect ratio to **Match** (matches the source).
126. **Why order matters:** switching the mode (e.g., Agentic AI → Generate Image) **clears the
127. prompt field.** If you type first and switch after, you lose the prompt. Mode and model
128. first, prompt last.
130. 7. **Add the reference as image 2.** `find` the hidden file input *inside the AI prompt
131. toolbar* (distinct from the Uploads panel's input) and `file_upload` the reference to it.
132. You should now see two thumbnails staged: 1 = source, 2 = reference.
134. 8. **Write the prompt with `form_input`, not by typing.** `find` the prompt textbox element
135. and set its value with `form_input`. **Do not rely on Cmd+A to clear it.** Kittl
136. intercepts Cmd+A as "select all objects on the canvas," so it won't clear the field, and
137. typing over leftover text garbles the prompt (this bites every time). `form_input`
138. replaces the whole value cleanly in one shot. See the prompt pattern below.
140. 9. **Verify the staged setup** (two thumbnails, correct model, "Match", prompt reads
141. correctly with no leftover fragments), then click the **send / up-arrow** to generate.
142. Each generation spends tokens (the count shows on the button), so confirm the setup is
143. right before sending rather than firing repeatedly.
145. 10. **Wait, then verify** (Step 5). Generations take ~15-45s; a purple "Generating Image"
146. tile marks the pending result, which drops onto the canvas as a new object when done.
148. ## Step 4: Prompt pattern (perspective match, preserve the design)
150. Structure every "match a reference" prompt the same way:
152. ```
153. Re-render the [SUBJECT] box from image 1 at the exact camera angle and perspective of the
154. box in image 2: [describe the target angle in words too, e.g. a three-quarter view with the
155. front face turned slightly to the left, the right side panel clearly visible, seen at a
156. slight downward angle]. Show the ENTIRE box fully in frame, centered, nothing cropped.
157. [Reflection instruction: either "keep the existing soft, subtle, diffuse reflection" or
158. "replace the sharp mirror reflection with a soft, diffuse faded glow, NOT a sharp mirror
159. reflection."] Keep the [SUBJECT] front artwork, the [TITLE], all text and headlines, the
160. [logo / feature icons / specific elements], and the [colors] exactly the same and undistorted.
161. Photorealistic product box mockup, clean studio lighting.
162. ```
164. Two lines that repeatedly save the output:
166. - **"Show the entire box fully in frame, centered, nothing cropped."** Without it, the model
167. will happily crop the subject and leave dead space; in one run it dropped the entire
168. right-hand column of feature icons. Name the elements you must keep so it can't quietly
169. omit them.
170. - **Describe the target angle in words in addition to the reference image.** The reference
171. does the heavy lifting, but the words disambiguate.
173. **Worked example (perspective + reflection, both fixed in one pass):**
174. Input: Northwind "solution stack" box, reflection too sharp, wrong perspective; Halcyon blue
175. box as the angle reference.
176. Prompt: *"Re-render the Northwind product box from image 1 at the exact camera angle and
177. perspective of the box in image 2: a three-quarter view with the front face turned slightly
178. to the left, the right side panel clearly visible, seen at a slight downward angle, on a dark
179. studio floor with a soft, subtle, diffuse reflection beneath it (a gentle faded glow, NOT a
180. sharp mirror reflection). Keep the Northwind front artwork, the Northwind logo, all text and
181. headlines, the feature icons, and the orange-and-yellow colors exactly the same and
182. undistorted. Photorealistic product box mockup, clean studio lighting."*
184. **Worked example (perspective only, keep the good reflection):**
185. Input: Terrace Dining box, perspective wrong but reflection already good; Halcyon box as angle
186. reference.
187. Prompt: *"...Show the entire box fully in frame, centered, nothing cropped. Keep the existing
188. soft, subtle, diffuse reflection on the dark studio floor (a gentle faded glow, NOT a sharp
189. mirror reflection). Keep the Terrace Dining front artwork, the TERRACE DINING title, all text, the
190. illustration, and the brand colors exactly the same and undistorted..."*
192. ## Step 5: Verify before you call it done
194. This is not optional: AI regeneration's failure modes are easy to miss at a glance. Zoom in
195. on the result (`computer` action `zoom`) and check:
197. - **Artwork integrity first, because that's the part AI breaks.** Is every text block present, legible, and
198. spelled right? Are all logos and icons there and undistorted? Colors preserved? Compare
199. against the source element-by-element (e.g., all eight feature icons still present).
200. - **Perspective** matches the reference. Note honestly if it's slightly off (e.g., a touch
201. more top-down than the reference) so Matt can decide if it's close enough.
202. - **Reflection** is what was asked (soft/diffuse vs sharp).
203. - **Composition:** nothing cropped, subject centered, no blank voids.
205. If it failed (cropped, missing elements, garbled or misspelled text, distorted layout):
206. regenerate with a sharper prompt (add/strengthen the "entire box, centered, nothing cropped"
207. and preserve lines) or step up the model (Nano Banana 2 4K / Pro). Generating 2 variants at
208. once (set count to 2×) is a reasonable hedge for a finicky, subjective fix.
210. ## Gotchas: the expensive lessons, in one place
212. - **Chat-pasted images aren't files.** Get the real file into a connected folder first.
213. - **Multiple browsers → you must pick one.** Use `switch_browser`.
214. - **New blank project, never the live canvas.** Avoids stray selections and accidental
215. generations among the prior AI nodes.
216. - **Set mode + model before typing**, because switching mode clears the prompt.
217. - **Use `form_input` to set the prompt.** Cmd+A doesn't clear Kittl's prompt field; re-typing
218. garbles it with leftover text.
219. - **"Match" aspect + "entire subject, centered, nothing cropped"** to avoid crop/void
220. failures and dropped elements.
221. - **Perspective = Remix; local touch-ups = Edit Area.** Edit Area can't change geometry.
222. - **Every generation costs tokens** (shown on the send button), so verify the staged setup
223. before sending.
224. - **The browser connection can blip.** If a tool returns "Claude in Chrome is not connected,"
225. it's usually transient: re-run `tabs_context_mcp` and retry; a half-finished drag may need
226. redoing.
228. ## Meridian Display Co. reference conventions
230. - **The house perspective reference is the Halcyon blue watch box** (`web_SEG_box_blue...`).
231. When Matt says "match the perspective on the website" or "use the blue M-SEG box," that's
232. the angle target.
233. - **Segment box mockups are named `M-SEG*`**, e.g. `M-SEG1 (2).jpg` = the Terrace Dining box,
234. `M-SEG2-2 (1).jpg` = the Northwind box. Reviewer notes reference these filenames; open them
235. to confirm which is which, since the names aren't self-describing.
236. - **Reference/source files usually live in `/Users/you/Downloads/refs`** or the active
237. Cowork workspace.
238. - **Reviewer feedback often comes from Nora** and is phrased loosely ("too sharp," "wrong
239. perspective even though that's the website's"). Treat it as intent to interpret, reconcile
240. ambiguities with Matt, and match a concrete reference image rather than a vague adjective.
241. - **Deliverable:** the corrected image sits on the Kittl canvas as a new object. Offer to
242. export it (download / into `refs`) and to place it back on the main canvas once approved.