This example provides a repeatable, image-first workflow for the Image Spec pattern: use diagrams and mockups as primary specifications, then iterate with annotated visuals.
- Create a single high-level diagram (architecture, UI mock, or flow) with labels and constraints (ports, component names, state transitions).
- Attach the image and provide a short prompt that clarifies only what the image cannot (tech stack, scope, constraints).
- Run the generated result, capture a screenshot, and annotate what’s missing or incorrect.
- Re-attach the annotated image and iterate on one slice at a time.
architecture.png: components + boundaries + portsdata-model.png: fields + relationships + example payloadsui-mock.png: layout + key interactionsflow.png: sequence of steps + decision points
Build the system from the attached images.
Tech stack: <stack>
Scope: <what to implement first>
Constraints: <performance/security/testing constraints>
Output: code + tests + a short runbook