--- name: screenshot-reference-match description: Rebuild a supplied screenshot or listing artwork reference as native editable AppScreens layers. Use for close matches from Create with Agent, copied Inspiration references or attached finished designs. metadata: title: Match a screenshot reference summary: "Rebuild a reference as editable layers, check an early render and complete the agreed set." prompt: "Rebuild these attached references in AppScreens for my iPhone app. Use my branding, check an early render and show me the finished set." connection: required connection-note: "Needs an AppScreens connection to save and render the editable design." --- # Match a screenshot reference When tools are deferred, discover matching names first, then read the complete descriptions and input schemas of the tools needed next. Do not dump the catalogue or strip descriptions to declarations alone. Use focused `get_design_contract` queries for isolated settings, including surrounding constraints and dependent fields; read the complete page contract before editing a whole design document. Never truncate returned definitions. Keep each selected tool response complete and emit one copy of its JSON. Forward all image content as images, without printing base64. 1. **Inspect the evidence.** Look at the actual attached image or call `get_inspiration_images` with `mode: contact_sheet` once per copied request for a numbered overview. Check every returned position against the request. An exact reference needs no catalogue search. For unclear text, crops or overlaps, use `mode: images` with only the relevant `reference.positions` (or URLs for artwork) to inspect the original detail. If overview mode is unavailable, use individual images. Ask for an attachment or agree on a smaller set for catalogue gaps in `missingPositions`. Retry transient failures once. If the client cannot show the images, ask for attachments before designing. 2. **Resolve the output.** Use the requested project or inspect the app’s brief, selected release configuration and listing. For a new mobile screenshot set, call `plan_screenshot_requirements` with known stores, devices and languages. Ask one short question about material gaps. Use its `createProject` inputs and apply `settingsPatch` before writing copy. The reference device and country do not set the customer’s scope. If the planner is unavailable, use `list_render_targets` and `list_languages`. For listing artwork, use the artwork target and placement from the copied prompt. Use the customer’s existing logos, photos and brand artwork first. For icons and illustrations, search `list_library_images` or use a suitable emoji in native Text when its appearance fits the reference. Otherwise ask for the missing asset or offer original replacement artwork using the client's image tools. If the draft also needs a decision about missing clean captures, ask in the same question whether to wait for them or use blank Device slots. Generate artwork when the customer requests or delegates it. Generate each photo, illustration or background separately at its intended crop and aspect ratio. Place each artwork asset in one replaceable Image element or background image slot. Keep captions, simple layout shapes and frames native. Do not reconstruct complex artwork with dozens or hundreds of tiny Shapes or rasterize that same approximation as a workaround; editable layout does not require decomposing every graphic. If neither suitable artwork nor image generation is available, explain the gap and agree on a simpler treatment. Use genuine logos and verified awards and ratings. 3. **Map the set and build a representative editable page.** Pair each reference position with its intended page. Match the headline, focal subject and supporting elements at their relative positions and sizes. Preserve hierarchy, margins, rotations, crops, overlaps and colour roles using the customer's copy, brand and assets. Add only the text roles the reference has. Skip page numbers, eyebrows, brand labels and badges it does not show. Keep the finished reference outside the deliverable. Use native Text, Shape and Image layers and native Device layers for genuine app UI, including frameless captures. For a plain blank screen, leave its slot unassigned and use `apply_project_changes` with `element.update` and `changes: {blankWhenEmpty: true}`. Use a template only where it helps match the reference. Inspect specific native settings with `get_design_contract`. For a laurel, badge or quote bubble around a caption, use component text and property decoration, then apply a native Text decoration. Prefer a compact style for laurels unless the reference calls for a taller wreath. Set the title and subtitle fonts once with `set_project_settings` `patch.theme.titleFont` and `subtitleFont`, and keep each text's `global` on so it follows them. For a shared text shadow, set `theme.shadow` and keep the shadow's `global` on. Turn `global` off only for a text that needs its own font or shadow. Check the saved value with `get_project_element`. For hand-drawn arrows, underlines, circles, sparkles and scribbles, search `list_library_images` in scribblesDoodles and place the closest match as an Image element. If nothing matches, browse scribblesDoodles without search before drawing shapes. 4. **Check an early render.** If the customer requested early review, limit the first pass to the pages they asked to see. Otherwise, if the cover uses a different layout, check both the cover and a typical page. Check saved layers with `list_project_elements`, then call `render_project_preview` with the saved revision, the selected `screenshotIds`, one agreed target and one language. Use `wait_for_operation` with `timeoutSeconds: 25`, then `get_preview_image` to inspect each render beside its reference at the same display size. Fix the biggest visible differences before repeating the layout. Show any requested early preview and wait for feedback. Otherwise, continue through the agreed set unless a decision blocks progress. If you cannot inspect the preview, say which checks remain open. 5. **Complete the agreed set.** Build the remaining pages in reference order, matching each layout. Use `add_project_screenshot` when a template is short and `list_project_screenshots` to verify the agreed count. If both Duo displays are requested, pair them by position and add unmatched positions only once. Compare every rendered page with its reference using `get_preview_image` with `mode: contact_sheet`, following `nextOffset` through the full set. Open a page with `mode: image` when the sheet leaves a question about text fit, crops or overlaps. Fetch details from the same completed operation; re-render after edits, not just to view a page larger. Fix and re-render pages with visible layout problems. For a page beyond the reference set, add it with `add_project_screenshot` mode duplicate from its closest finished neighbour, then replace the caption and capture. Keep the neighbour's background, palette, type scale and device scale, then render the new page beside its neighbours and fix any drift. Share the reviewed project and preview, and identify the Device slots that still need captures. Export only when requested and get separate approval for the exact store upload. ## Wait efficiently Await each pending tool call, including catalogue reads and saves. In Codex, use `yield_time_ms: 35000` for execution and runner waits where supported. Resume the same execution if it yields; do not check every second or overlap wait calls. The 25-second AppScreens wait and 35-second runner window are maxima, so completed results return sooner. Continue on the same operation ID for a bounded period, for example about 60 seconds. Stop on success, failure or cancellation; if still running, report the latest status and keep the ID. A wait expiring is not a reason to start another render.