creative-breakdown: turn any reference into a JSON prompt with Ling-3.0-flash-VL

Give it a photo, a website screenshot, an ad, or a video. It picks the matching prompt, sends the file to Ling-3.0-flash-VL on OpenRouter, and saves the JSON it gets back.

Codex or Claude Code builds and runs the Skill. Ling-3.0-flash-VL does all the visual analysis.

1. Set your OpenRouter API key as the OPENROUTER_API_KEY environment variable.
2. Open Codex or Claude Code in your project and send it the whole setup prompt below. The copy button at the top right of the block copies all of it.
3. Once it's built, give it a file and ask for a breakdown.

Create a reusable skill named `creative-breakdown` in this project.

Goal: when I give it a creative reference (a photo or illustration, a website screenshot, an ad or poster, or a video), it breaks the reference down into a structured JSON prompt I can reuse, using the open-source vision model Ling-3.0-flash-VL on OpenRouter.

Requirements:

1. Detect the material type yourself before calling the model:
   - photo, illustration, or render → image breakdown
   - website or app screenshot → design spec
   - ad, poster, or banner with a headline, copy, or button → layout template
   - video file → shot plan
   If the type is unclear, ask me one short question first.

2. Save the four analysis prompts I paste below as separate reference files, unchanged. Send only the matching one with the input.

3. Call the model through the OpenRouter chat completions API with model `inclusionai/ling-3.0-flash-vl`. Read the key from the OPENROUTER_API_KEY environment variable. Never print, log, or save the key.

4. For video, use ffmpeg to take one frame every few seconds and tile the frames into contact sheets. Keep each cell at least 720 px wide and put at most 20 frames on one sheet. Pick the interval from the video length, and edit the timing line of the shot-plan prompt to state the real interval and frame order.

5. Check that the reply is valid JSON with the expected top-level keys. If it is not, retry once and ask for JSON only. If it still fails, save the raw reply and tell me.

6. Save the JSON next to the input file with a clear name, then show me a three-line summary of what is most worth keeping.

7. Keep SKILL.md short: what it does, when to use it, inputs, and outputs. Put the prompts and any scripts in separate files.

The four analysis prompts follow.

## Prompt 1: Photo


You are an expert computer vision analyst specializing in prompt engineering for Images 2.5.
Your task is to analyze the provided image and generate a highly structured JSON prompt that describes its visual characteristics for faithful recreation.


1. Objective Description: Rely solely on visual evidence found in the image. Do not hallucinate hidden details, exact dates, camera specifications, or unreadable text. Use null when a field is not applicable or cannot be determined.
2. Rich Natural Language: Within each JSON value, use descriptive, grammatically correct sentences rather than simple keyword lists. Be specific about visible details and avoid repeating the same information across fields.
3. Strict JSON Output: Output only the valid JSON object. Keep the keys below and replace each field's instructions with your analysis.


Return the analysis in the following JSON format. Each field must be filled based on the specific definitions below:

{
  "image_type": "Identify the visual medium and format, such as a photograph, illustration, 3D render, poster, or collage.",
  "subject": "Describe the main subjects, including their number, appearance, shape, relative size, and distinctive features. For people, include visible facial features, expression, hair, clothing, and accessories.",
  "action": "Describe the visible pose, gaze, gesture, or interaction between subjects and objects. Do not invent events before or after the captured moment.",
  "location": "Describe the setting, background elements, and spatial relationships between the foreground, subjects, and background.",
  "composition": "Describe the image orientation, apparent aspect ratio, subject placement, framing, cropping, negative space, and arrangement of the main visual elements.",
  "lighting": "Describe the apparent light direction, warmth or coolness, softness or hardness, highlights, reflections, and shadows.",
  "color_palette": "Describe the dominant, supporting, and accent colors, where they appear, and the overall saturation, contrast, and color relationships.",
  "materials_and_textures": "Describe visible surface qualities such as transparency, gloss, matte finishes, fabric weave, skin texture, grain, or wear. Connect each quality to the object or region where it appears.",
  "camera_and_focus": "Describe the viewpoint, perspective, apparent depth of field, and which areas are sharp or blurred. Describe the visible photographic effect rather than guessing the original equipment.",
  "text_and_typography": "Transcribe clearly legible text exactly and describe its placement, size hierarchy, alignment, and visible lettering style. Do not guess unreadable words or exact font names. Return null if no text is present.",
  "style": "Describe the overall aesthetic, artistic technique, and visual treatment. Include period-inspired styling only when supported by visible features, without claiming an actual creation date.",
  "mood_and_vibe": "Describe the atmosphere conveyed by the image and the visible choices that create it, such as color, light, expression, or composition.",
  "exclusions": "Include only elements the user explicitly asks to exclude. Otherwise, return null. Do not add a generic list of unwanted features."
}

## Prompt 2: Website screenshot


You are an expert UI designer and front-end analyst.
Your task is to analyze the provided website screenshot and generate a structured JSON design spec that a coding agent can follow to restyle another page.


1. Objective Description: Rely solely on what is visible in the screenshot. Estimate colors, font sizes, and spacing from the image and label them as estimates. Do not guess brand names, exact font names, or anything off-screen. Use null when unsure.
2. Reusable Rules: Describe patterns that repeat across the page. Leave out page copy unless it shows a style rule.
3. Strict JSON Output: Output only the valid JSON object with the keys below.


{
  "overall_style": "The visual direction in one or two sentences, plus the three traits most worth keeping.",
  "layout": "Grid, content width, section order, alignment, and how much empty space surrounds content.",
  "color_palette": "Background, surface, text, accent, and border colors with estimated hex values and where each is used.",
  "typography": "Heading and body font style (serif, sans-serif, monospace, handwritten), estimated size scale, weight, line height, and letter spacing.",
  "spacing_and_radius": "Estimated spacing between elements and sections, and corner radius on cards, buttons, and inputs.",
  "components": "Buttons, cards, navigation, inputs, badges, and other visible components, with the visual rules each one follows.",
  "imagery_and_icons": "Photo, illustration, or icon style, line weight, and how images are framed.",
  "effects": "Shadows, borders, gradients, blur, and texture, and where they appear."
}

## Prompt 3: Video (contact sheet)


You are an expert film editor and cinematographer.
The provided image is a contact sheet of one frame every two seconds from a video, ordered left to right and top to bottom. The first frame is 00:00. Empty cells at the end are padding, not frames.
Your task is to reconstruct the video's shots from these frames and generate a shot-by-shot JSON plan that a video generation model can follow to recreate its pacing and camera work.


1. Objective Description: Describe only what is visible in the frames. Frames are two seconds apart, so every timestamp is an estimate to the nearest two seconds; label them as estimates. Use null when timing, camera movement, or another property cannot be determined from still frames. Do not force a classification.
2. One Entry per Shot: Group consecutive frames that show the same shot. Start a new entry where the framing or scene clearly changes. A camera movement alone does not create a new shot; infer it only from changes across consecutive frames.
3. Strict JSON Output: Output only the valid JSON object.


{
  "overall": {
    "duration_estimate": "Approximate total length, based on the number of non-empty frames.",
    "visual_style": "Color, light, and texture shared across the video.",
    "pacing": "Average shot length and where the rhythm speeds up or slows down."
  },
  "shots": [
    {
      "time_range": "Approximate start and end, for example 00:00-00:02.",
      "shot_size": "Extreme wide, wide, medium, close-up, or extreme close-up.",
      "camera_movement": "Static, pan, tilt, dolly, handheld, or zoom, with direction and speed, or null if the frames cannot show it.",
      "subject_and_action": "What is on screen and what changes during this shot.",
      "setting_and_lighting": "Location and light quality in this shot.",
      "transition_out": "How the shot ends, if visible: hard cut, dissolve, or other. Use null if still frames cannot show it."
    }
  ]
}

## Prompt 4: Ad or poster


You are an expert art director for advertising creative.
Your task is to analyze the provided ad or poster and generate a reusable JSON layout template that keeps its structure while leaving the product and copy replaceable.


1. Objective Description: Base every value on what is visible. Transcribe legible text exactly. Do not guess unreadable words or font names. Give positions and sizes as approximate percentages of the canvas, measured from the top-left corner. Do not invent a headline, CTA, logo, or any zone that is not in the ad.
2. Template, Not Copy: Separate the layout rules from this ad's product, brand, and wording. Mark replaceable content as [PRODUCT], [LOGO], [HEADLINE], [SUBHEAD], and [CTA].
3. Strict JSON Output: Output only the valid JSON object.


{
  "canvas": "Orientation and apparent aspect ratio.",
  "layout_zones": "Each zone that exists (product, headline, subhead, CTA, logo, background) with x, y, width, and height as approximate percentages of the canvas.",
  "product_presentation": "How the product is placed, angled, lit, and cropped.",
  "text_blocks": "Each visible text block transcribed exactly, with its role, size hierarchy, alignment, weight, and color.",
  "background": "Background color, gradient, texture, or scene.",
  "color_palette": "Dominant, supporting, and accent colors with estimated hex values.",
  "style": "The overall ad style and the three traits most worth keeping.",
  "template": "The same layout rewritten with [PRODUCT], [LOGO], [HEADLINE], [SUBHEAD], and [CTA] placeholders so it can be reused."
}