| name | image-to-prompt |
| license | Apache-2.0 |
| description | Turns a design image, screenshot, or mockup into a structured natural-language Design_Brief covering layout, components, text_content, spacing, colors, typography, states, motion, atmosphere, interactions, images, and target_stack. Use when someone shares a UI image and wants to rebuild, recreate, clone, or turn it into frontend code, for example "rebuild this screenshot" or "turn this mockup into code". First step of the caecus pipeline; hands off to generate-and-verify. |
| compatibility | Requires a vision-capable agent that can view images. |
| metadata | {"author":"mihneaptu","version":"0.1.0-beta.6"} |
image-to-prompt
Turn a design image into a natural-language Design_Brief, ready to hand to
generate-and-verify.
Requirements
Must be able to view images. If not, say so and stop.
Why this exists
GLM 5.2 writes excellent frontend code but is text-only and cannot see. This skill captures
what is in the image as precise design language so a code model can build it faithfully. Keep
the brief about what the design looks like, never about how to code it.
Steps
- Read the image carefully. For any region whose text or detail is too small to read with
certainty (dense footers, fine-print labels, logo wordmarks, small repeated UI rows),
zoom into or crop that region of the source and look again before writing it down.
Only after actually looking closer may something be marked
illegible in source; never
guess small copy from a thumbnail.
- Write a
Design_Brief in labeled sections, following
../_shared/design-brief-format.md:
layout, components, text_content, spacing, colors, typography, states,
motion, atmosphere, interactions, images, notes.
- For a static icon toolbar or similar flat UI, mark
motion, atmosphere, and
interactions "not applicable" and say why. For anything with movement, mood, or
tactility, populate them.
- For lists, menus, or repeated rows whose items differ, describe each item's attributes
individually: which rows carry a trailing chevron, which carry a keyboard shortcut,
which icon each uses. Never collapse into "each item optionally has a chevron".
- Describe in plain design language. Avoid code and CSS properties; say "uniform, moderate
inner padding", not
padding: 12px.
- Recommend a
target_stack: HTML/CSS for simple static designs; React+Tailwind for
interactive or complex ones. If the user named a stack, use theirs.
Output
A complete Design_Brief with source_type: image and inspiration_only: false. Hand it
to generate-and-verify.
Handoff gate: run every check in
../_shared/handoff-gates.md before handing off.
If the image cannot be read
If the image is missing, unreadable, or an unsupported format, report that clearly and stop
rather than guessing.
