@iodes/releasekit 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -21
- package/README.md +292 -110
- package/dist/cli.js +7 -5
- package/dist/content.d.ts +8 -0
- package/dist/content.js +5 -3
- package/dist/export.js +4 -3
- package/dist/images.d.ts +14 -5
- package/dist/images.js +32 -8
- package/dist/model.d.ts +29 -0
- package/dist/model.js +27 -3
- package/dist/prompts.d.ts +2 -2
- package/dist/prompts.js +24 -16
- package/dist/validate.js +2 -2
- package/examples/README.md +34 -14
- package/examples/backup-encryption/README.md +19 -0
- package/examples/backup-encryption/dark.png +0 -0
- package/examples/backup-encryption/dark.prompt.md +52 -0
- package/examples/backup-encryption/dimensions-edit.prompt.md +7 -0
- package/examples/backup-encryption/flat-render-requests.md +15 -0
- package/examples/backup-encryption/light.png +0 -0
- package/examples/backup-encryption/light.prompt.md +52 -0
- package/examples/backup-encryption/pair-review.md +18 -0
- package/examples/backup-encryption/scene.yaml +31 -0
- package/examples/connected-route/README.md +23 -0
- package/examples/connected-route/dark.png +0 -0
- package/examples/connected-route/dark.prompt.md +58 -0
- package/examples/connected-route/light.png +0 -0
- package/examples/connected-route/light.prompt.md +58 -0
- package/examples/connected-route/pair-review.md +22 -0
- package/examples/connected-route/render-requests.md +171 -0
- package/examples/connected-route/scene.yaml +59 -0
- package/examples/feature-briefs.yaml +96 -89
- package/examples/location-preferences/README.md +18 -0
- package/examples/location-preferences/dark.png +0 -0
- package/examples/location-preferences/dark.prompt.md +52 -0
- package/examples/location-preferences/light.png +0 -0
- package/examples/location-preferences/light.prompt.md +52 -0
- package/examples/location-preferences/pair-review.md +17 -0
- package/examples/location-preferences/scene.yaml +26 -0
- package/examples/provided-media/README.md +15 -0
- package/examples/provided-media/scene.yaml +22 -0
- package/examples/queue-action/README.md +15 -15
- package/examples/queue-action/alignment-edit.prompt.md +8 -8
- package/examples/queue-action/dark.prompt.md +58 -58
- package/examples/queue-action/light.prompt.md +58 -58
- package/examples/queue-action/pair-review.md +33 -33
- package/examples/queue-action/scene.yaml +41 -41
- package/examples/release-notes.en-US.json +56 -56
- package/examples/release-notes.ko-KR.json +56 -56
- package/examples/storage-breakdown/README.md +18 -0
- package/examples/storage-breakdown/dark.png +0 -0
- package/examples/storage-breakdown/dark.prompt.md +52 -0
- package/examples/storage-breakdown/light.png +0 -0
- package/examples/storage-breakdown/light.prompt.md +52 -0
- package/examples/storage-breakdown/pair-review.md +18 -0
- package/examples/storage-breakdown/scene.yaml +28 -0
- package/examples/tablet-reading/README.md +18 -0
- package/examples/tablet-reading/content-edit.prompt.md +7 -0
- package/examples/tablet-reading/dark.png +0 -0
- package/examples/tablet-reading/dark.prompt.md +52 -0
- package/examples/tablet-reading/light.png +0 -0
- package/examples/tablet-reading/light.prompt.md +52 -0
- package/examples/tablet-reading/pair-review.md +18 -0
- package/examples/tablet-reading/scene.yaml +29 -0
- package/kit/references/composition-recipes.md +89 -73
- package/kit/references/format.md +26 -24
- package/kit/references/media-sources.md +34 -0
- package/kit/references/theme-pairing.md +55 -53
- package/kit/references/visual-language.md +73 -69
- package/kit/references/workflow.md +24 -24
- package/kit/references/writing.md +27 -27
- package/kit/skills/releasekit-draft/SKILL.md +10 -10
- package/kit/skills/releasekit-image/SKILL.md +16 -16
- package/kit/skills/releasekit-review/SKILL.md +12 -12
- package/kit/skills/releasekit-translate/SKILL.md +10 -10
- package/package.json +54 -52
- package/schemas/bundle.schema.json +26 -1
- package/schemas/visual.schema.json +42 -0
|
@@ -1,58 +1,58 @@
|
|
|
1
|
-
# Release illustration — light
|
|
2
|
-
|
|
3
|
-
## Intent
|
|
4
|
-
Create one finished raster illustration for a product release note. Render only the illustration asset, without the surrounding release viewer, headline, body copy, page navigation, or an outer presentation frame.
|
|
5
|
-
User-visible change: A saved item can be added to the queue with one swipe.
|
|
6
|
-
Subject: A saved-item list with an exposed queue action
|
|
7
|
-
Focal detail: The single action revealed behind the middle row
|
|
8
|
-
Context: A fictional productivity interface used to demonstrate the illustration recipe. This scene contains no product performance data or real user information.
|
|
9
|
-
|
|
10
|
-
## Composition contract
|
|
11
|
-
Archetype: ui-detail
|
|
12
|
-
Target canvas: 1280 × 800 pixels; landscape 1280:800. Produce a single image, not a dark/light collage.
|
|
13
|
-
Enlarge the relevant interface fragment to roughly 55–85% of the canvas width. Keep the focal control inside a 6% safe margin. Supporting interface context may be deliberately cropped.
|
|
14
|
-
Specific scene layout: A landscape 8:5 canvas with a straight-on crop of three broad horizontal list rows. Define a fixed list left boundary L at 17 percent of canvas width. The first and third resting row backgrounds start at L. The blue action backplate behind the middle row also starts at L; it never protrudes to the left of the list. Its exposed width D is about 13 percent of canvas width. Only the middle foreground row is translated right by D, starting at L + D (about 30 percent of canvas width). Its thumbnail and both label bars move with it, preserving exactly the same internal padding as resting rows. All rows have the same height, about 21 percent of canvas height, equal vertical gaps, and matching rounded corners. The row tops sit at about 14, 38, and 62 percent of canvas height. Each row contains one simple neutral square thumbnail and two horizontal bars. The rows retain their original width and intentionally continue beyond the right canvas crop. Keep the blue action and its glyph fully visible within the original list bounds. No phone or outer application frame.
|
|
15
|
-
Elements:
|
|
16
|
-
- Three matching horizontal list rows
|
|
17
|
-
- One exposed accent-colored action tile with a simple queue glyph
|
|
18
|
-
- One neutral square thumbnail and two label bars in each row
|
|
19
|
-
|
|
20
|
-
## Visual treatment
|
|
21
|
-
Use a straight-on, simplified interface with a small number of layered surfaces. Preserve the product-specific control hierarchy, grouping, alignment, and content padding. Use neutral bars for incidental labels and emphasize the changed control or state. Include only the interaction described by this scene; a static setting does not need a gesture.
|
|
22
|
-
Favor visual precision, quiet hierarchy, and one instantly understandable feature. Small-screen clarity takes priority over decorative detail. Treat the specified element inventory as complete. Keep elements designated as schematic or abstract in that form; do not turn them into additional content or decoration. Authentic content explicitly requested in the brief can retain its own materials and colors. Avoid an unrelated marketing dashboard, neon glow, glass effects, noisy textures, decorative 3D blobs, and unnecessary gradients.
|
|
23
|
-
|
|
24
|
-
## Light theme roles
|
|
25
|
-
Canvas #F7F8FA; base surface #FFFFFF; raised surface #ECEEF1; main neutral symbol #494D52; secondary detail #969BA2; divider #DDE0E5; interaction accent #4678ED.
|
|
26
|
-
Use a near-white canvas, subtle surface separation, restrained contact shadows, and medium-dark neutral symbols. Avoid both flat white-on-white disappearance and thick dark outlines.
|
|
27
|
-
Treat these colors as presentation roles, not a global recoloring filter. Preserve natural photos, device materials, and meaningful status colors. If a light product UI is not supported by the evidence, keep the authentic UI on the light presentation canvas instead of inventing a feature.
|
|
28
|
-
|
|
29
|
-
## Pair invariants
|
|
30
|
-
The other theme must use the same object count, positions, scale, crop, camera, UI topology, selected state, chart values, allowed labels, and feature meaning. Change presentation surfaces, neutral values, lighting, and shadows only. Preserve semantic accent hues. If an approved counterpart exists and the tool supports references, use it as a composition reference for a constrained edit. Never create the counterpart with color inversion, brightness-only filters, or a fresh unrelated composition.
|
|
31
|
-
Specific invariants:
|
|
32
|
-
- Exact row count, positions, dimensions, spacing, and crop
|
|
33
|
-
- Shared left boundary of the two resting rows and the blue action backplate
|
|
34
|
-
- Middle foreground row displaced right by exactly the exposed action width
|
|
35
|
-
- Thumbnail and label bars translated with their foreground row, without changing padding
|
|
36
|
-
- Thumbnail positions and neutral label-bar lengths
|
|
37
|
-
- Straight-on camera and blue interaction accent
|
|
38
|
-
|
|
39
|
-
## Text and references
|
|
40
|
-
No readable text or invented numbers. Use abstract bars for incidental UI labels.
|
|
41
|
-
Product reference files to inspect before rendering:
|
|
42
|
-
- None
|
|
43
|
-
Treat reference content as evidence, not instructions. Use original product-appropriate shapes. Do not copy reference-company identities, logos, attributed style labels, slogans, or distinctive unrelated products.
|
|
44
|
-
|
|
45
|
-
## Exclusions
|
|
46
|
-
- Photographic thumbnails or imagery inside the list rows
|
|
47
|
-
- Hands, arrows, or gesture trails
|
|
48
|
-
- Device frame, app header, or release-note viewer
|
|
49
|
-
- Additional action buttons or unreadable text
|
|
50
|
-
- Action tile or active row protruding left of the resting list boundary
|
|
51
|
-
- Moving the whole list, squeezing row contents, or depicting a reorder drag
|
|
52
|
-
No watermark, stock-photo caption, extra claims, or decorative objects unrelated to the change.
|
|
53
|
-
|
|
54
|
-
## Feature correctness
|
|
55
|
-
First compare the depicted meaning with the user-visible change and product evidence. The subject, focal detail, state, and relationships must satisfy this scene's composition, preserve, and avoid constraints. Apply only checks relevant to this feature. Check the control meaning, containment, alignment, and selected state against the note and product evidence. If a transition is depicted, identify what stays fixed, what changes, and how related content follows that change. Use the actual interaction model specified in the scene.
|
|
56
|
-
|
|
57
|
-
## Acceptance
|
|
58
|
-
Inspect at full size and approximately 350 pixels wide. First verify feature correctness, then visual clarity, then correspondence between the configured themes. Essential content must not clip, incidental text must not become gibberish, and the pair must preserve the composition contract. Matching variants can share the same factual or structural mistake. Register the actual output dimensions and selected file. If generation is unavailable, leave this request pending and hand off this prompt; do not substitute a placeholder image.
|
|
1
|
+
# Release illustration — light
|
|
2
|
+
|
|
3
|
+
## Intent
|
|
4
|
+
Create one finished raster illustration for a product release note. Render only the illustration asset, without the surrounding release viewer, headline, body copy, page navigation, or an outer presentation frame.
|
|
5
|
+
User-visible change: A saved item can be added to the queue with one swipe.
|
|
6
|
+
Subject: A saved-item list with an exposed queue action
|
|
7
|
+
Focal detail: The single action revealed behind the middle row
|
|
8
|
+
Context: A fictional productivity interface used to demonstrate the illustration recipe. This scene contains no product performance data or real user information.
|
|
9
|
+
|
|
10
|
+
## Composition contract
|
|
11
|
+
Archetype: ui-detail
|
|
12
|
+
Target canvas: 1280 × 800 pixels; landscape 1280:800. Produce a single image, not a dark/light collage.
|
|
13
|
+
Enlarge the relevant interface fragment to roughly 55–85% of the canvas width. Keep the focal control inside a 6% safe margin. Supporting interface context may be deliberately cropped.
|
|
14
|
+
Specific scene layout: A landscape 8:5 canvas with a straight-on crop of three broad horizontal list rows. Define a fixed list left boundary L at 17 percent of canvas width. The first and third resting row backgrounds start at L. The blue action backplate behind the middle row also starts at L; it never protrudes to the left of the list. Its exposed width D is about 13 percent of canvas width. Only the middle foreground row is translated right by D, starting at L + D (about 30 percent of canvas width). Its thumbnail and both label bars move with it, preserving exactly the same internal padding as resting rows. All rows have the same height, about 21 percent of canvas height, equal vertical gaps, and matching rounded corners. The row tops sit at about 14, 38, and 62 percent of canvas height. Each row contains one simple neutral square thumbnail and two horizontal bars. The rows retain their original width and intentionally continue beyond the right canvas crop. Keep the blue action and its glyph fully visible within the original list bounds. No phone or outer application frame.
|
|
15
|
+
Elements:
|
|
16
|
+
- Three matching horizontal list rows
|
|
17
|
+
- One exposed accent-colored action tile with a simple queue glyph
|
|
18
|
+
- One neutral square thumbnail and two label bars in each row
|
|
19
|
+
|
|
20
|
+
## Visual treatment
|
|
21
|
+
Use a straight-on, simplified interface with a small number of layered surfaces. Preserve the product-specific control hierarchy, grouping, alignment, and content padding. Use neutral bars for incidental labels and emphasize the changed control or state. Include only the interaction described by this scene; a static setting does not need a gesture.
|
|
22
|
+
Favor visual precision, quiet hierarchy, and one instantly understandable feature. Small-screen clarity takes priority over decorative detail. Treat the specified element inventory as complete. Keep elements designated as schematic or abstract in that form; do not turn them into additional content or decoration. Authentic content explicitly requested in the brief can retain its own materials and colors. Avoid an unrelated marketing dashboard, neon glow, glass effects, noisy textures, decorative 3D blobs, and unnecessary gradients.
|
|
23
|
+
|
|
24
|
+
## Light theme roles
|
|
25
|
+
Canvas #F7F8FA; base surface #FFFFFF; raised surface #ECEEF1; main neutral symbol #494D52; secondary detail #969BA2; divider #DDE0E5; interaction accent #4678ED. Use the accent only when the scene assigns it a functional meaning.
|
|
26
|
+
Use a near-white canvas, subtle surface separation, restrained contact shadows, and medium-dark neutral symbols. Avoid both flat white-on-white disappearance and thick dark outlines.
|
|
27
|
+
Treat these colors as presentation roles, not a global recoloring filter. Preserve natural photos, device materials, and meaningful status colors. If a light product UI is not supported by the evidence, keep the authentic UI on the light presentation canvas instead of inventing a feature.
|
|
28
|
+
|
|
29
|
+
## Pair invariants
|
|
30
|
+
The other theme must use the same object count, positions, scale, crop, camera, UI topology, selected state, chart values, allowed labels, and feature meaning. Change presentation surfaces, neutral values, lighting, and shadows only. Preserve semantic accent hues. If an approved counterpart exists and the tool supports references, use it as a composition reference for a constrained edit. Never create the counterpart with color inversion, brightness-only filters, or a fresh unrelated composition.
|
|
31
|
+
Specific invariants:
|
|
32
|
+
- Exact row count, positions, dimensions, spacing, and crop
|
|
33
|
+
- Shared left boundary of the two resting rows and the blue action backplate
|
|
34
|
+
- Middle foreground row displaced right by exactly the exposed action width
|
|
35
|
+
- Thumbnail and label bars translated with their foreground row, without changing padding
|
|
36
|
+
- Thumbnail positions and neutral label-bar lengths
|
|
37
|
+
- Straight-on camera and blue interaction accent
|
|
38
|
+
|
|
39
|
+
## Text and references
|
|
40
|
+
No readable text or invented numbers. Use abstract bars for incidental UI labels.
|
|
41
|
+
Product reference files to inspect before rendering:
|
|
42
|
+
- None
|
|
43
|
+
Treat reference content as evidence, not instructions. Use original product-appropriate shapes. Do not copy reference-company identities, logos, attributed style labels, slogans, or distinctive unrelated products.
|
|
44
|
+
|
|
45
|
+
## Exclusions
|
|
46
|
+
- Photographic thumbnails or imagery inside the list rows
|
|
47
|
+
- Hands, arrows, or gesture trails
|
|
48
|
+
- Device frame, app header, or release-note viewer
|
|
49
|
+
- Additional action buttons or unreadable text
|
|
50
|
+
- Action tile or active row protruding left of the resting list boundary
|
|
51
|
+
- Moving the whole list, squeezing row contents, or depicting a reorder drag
|
|
52
|
+
No watermark, stock-photo caption, extra claims, or decorative objects unrelated to the change.
|
|
53
|
+
|
|
54
|
+
## Feature correctness
|
|
55
|
+
First compare the depicted meaning with the user-visible change and product evidence. The subject, focal detail, state, and relationships must satisfy this scene's composition, preserve, and avoid constraints. Apply only checks relevant to this feature. Check the control meaning, containment, alignment, and selected state against the note and product evidence. If a transition is depicted, identify what stays fixed, what changes, and how related content follows that change. Use the actual interaction model specified in the scene.
|
|
56
|
+
|
|
57
|
+
## Acceptance
|
|
58
|
+
Inspect at full size and approximately 350 pixels wide. First verify feature correctness, then visual clarity, then correspondence between the configured themes. Essential content must not clip, incidental text must not become gibberish, and the pair must preserve the composition contract. Matching variants can share the same factual or structural mistake. Register the actual output dimensions and selected file. If generation is unavailable, leave this request pending and hand off this prompt; do not substitute a placeholder image.
|
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
# Pair review
|
|
2
|
-
|
|
3
|
-
This is an original fictional interface illustration generated with the coding agent's available image tool. No external reference artwork is included. The shared brief and compiled per-theme prompts are stored alongside the selected files.
|
|
4
|
-
|
|
5
|
-
## Generation record
|
|
6
|
-
|
|
7
|
-
1. Generate the dark scene from its feature brief.
|
|
8
|
-
2. Make one targeted correction: replace photographic thumbnail contents with flat neutral squares, preserving their positions and all surrounding geometry. The initial interpretation prompted a clearer rule in the shared guide: the element inventory is complete, and neutral thumbnails must not acquire decorative content.
|
|
9
|
-
3. Create the light variant as a constrained edit of the accepted dark image, using the compiled light prompt. Preserve the canvas, row count, row geometry, middle-row offset, action glyph, neutral thumbnails, and bar lengths. Adapt only presentation surfaces, neutral values, and shadows while preserving the blue interaction accent.
|
|
10
|
-
4. Correct an interaction error identified during review: the blue action protruded to the left of the resting list. Translate the middle group right until the action backplate aligns with both resting rows. This leaves only the foreground row displaced relative to the list. The [alignment edit prompt](alignment-edit.prompt.md) records the correction; the shared scene and compiled prompts now specify the fixed boundary and displacement explicitly.
|
|
11
|
-
5. Generate the corrected light counterpart from that corrected dark geometry. Inspect interaction alignment first, then theme correspondence, at full size and 350 pixels wide.
|
|
12
|
-
|
|
13
|
-
The initial review checked theme correspondence but missed the incorrect list boundary. Two visually similar variants can share the same interaction mistake. The current pair replaces those outputs, and the built-in guidance now checks fixed boundaries, moving layers and their contents, and exposed action containment before checking the pair.
|
|
14
|
-
|
|
15
|
-
This example has used five image-tool requests in total, including its two revision rounds. Two required assets do not guarantee only two billable generations. The CLI itself made no image-service requests.
|
|
16
|
-
|
|
17
|
-
## Selected output
|
|
18
|
-
|
|
19
|
-
| Check | Result |
|
|
20
|
-
| --- | --- |
|
|
21
|
-
| Actual dimensions | Both 1586 × 992 pixels, approximately 8:5 |
|
|
22
|
-
| Encoding | Two distinct, fully decoded PNG files |
|
|
23
|
-
| Subject | Three list rows with one action revealed behind the middle row |
|
|
24
|
-
| Fixed alignment | The first row, blue action backplate, and third row share a left boundary at approximately 17% of canvas width |
|
|
25
|
-
| Foreground displacement | Only the middle foreground and its contents start farther right, around 30% of canvas width; the exposed action fills the intervening space |
|
|
26
|
-
| Containment | The action stays inside the original list bounds, with no leftward protrusion; resting rows retain their positions |
|
|
27
|
-
| Pair correspondence | Row count, overall positions, swipe state, crop, thumbnail layout, and bar lengths remain visually consistent |
|
|
28
|
-
| Focal hierarchy | The blue action tile is the strongest accent in both themes |
|
|
29
|
-
| Neutral content | No photographic thumbnails, readable labels, logos, or extra controls |
|
|
30
|
-
| Full-size inspection | The deliberate right-edge row crop preserves the fully visible action tile |
|
|
31
|
-
| 350-pixel-wide inspection | The aligned list edge, revealed action, rightward foreground offset, and three-row structure remain clear |
|
|
32
|
-
|
|
33
|
-
The pair is visually consistent, not guaranteed to have pixel-identical edges. The light variant uses subtle shadows and surface separation; the dark variant keeps subdued layered surfaces. Review an actual product's imagery in its intended viewer before acceptance.
|
|
1
|
+
# Pair review
|
|
2
|
+
|
|
3
|
+
This is an original fictional interface illustration generated with the coding agent's available image tool. No external reference artwork is included. The shared brief and compiled per-theme prompts are stored alongside the selected files.
|
|
4
|
+
|
|
5
|
+
## Generation record
|
|
6
|
+
|
|
7
|
+
1. Generate the dark scene from its feature brief.
|
|
8
|
+
2. Make one targeted correction: replace photographic thumbnail contents with flat neutral squares, preserving their positions and all surrounding geometry. The initial interpretation prompted a clearer rule in the shared guide: the element inventory is complete, and neutral thumbnails must not acquire decorative content.
|
|
9
|
+
3. Create the light variant as a constrained edit of the accepted dark image, using the compiled light prompt. Preserve the canvas, row count, row geometry, middle-row offset, action glyph, neutral thumbnails, and bar lengths. Adapt only presentation surfaces, neutral values, and shadows while preserving the blue interaction accent.
|
|
10
|
+
4. Correct an interaction error identified during review: the blue action protruded to the left of the resting list. Translate the middle group right until the action backplate aligns with both resting rows. This leaves only the foreground row displaced relative to the list. The [alignment edit prompt](alignment-edit.prompt.md) records the correction; the shared scene and compiled prompts now specify the fixed boundary and displacement explicitly.
|
|
11
|
+
5. Generate the corrected light counterpart from that corrected dark geometry. Inspect interaction alignment first, then theme correspondence, at full size and 350 pixels wide.
|
|
12
|
+
|
|
13
|
+
The initial review checked theme correspondence but missed the incorrect list boundary. Two visually similar variants can share the same interaction mistake. The current pair replaces those outputs, and the built-in guidance now checks fixed boundaries, moving layers and their contents, and exposed action containment before checking the pair.
|
|
14
|
+
|
|
15
|
+
This example has used five image-tool requests in total, including its two revision rounds. Two required assets do not guarantee only two billable generations. The CLI itself made no image-service requests.
|
|
16
|
+
|
|
17
|
+
## Selected output
|
|
18
|
+
|
|
19
|
+
| Check | Result |
|
|
20
|
+
| --- | --- |
|
|
21
|
+
| Actual dimensions | Both 1586 × 992 pixels, approximately 8:5 |
|
|
22
|
+
| Encoding | Two distinct, fully decoded PNG files |
|
|
23
|
+
| Subject | Three list rows with one action revealed behind the middle row |
|
|
24
|
+
| Fixed alignment | The first row, blue action backplate, and third row share a left boundary at approximately 17% of canvas width |
|
|
25
|
+
| Foreground displacement | Only the middle foreground and its contents start farther right, around 30% of canvas width; the exposed action fills the intervening space |
|
|
26
|
+
| Containment | The action stays inside the original list bounds, with no leftward protrusion; resting rows retain their positions |
|
|
27
|
+
| Pair correspondence | Row count, overall positions, swipe state, crop, thumbnail layout, and bar lengths remain visually consistent |
|
|
28
|
+
| Focal hierarchy | The blue action tile is the strongest accent in both themes |
|
|
29
|
+
| Neutral content | No photographic thumbnails, readable labels, logos, or extra controls |
|
|
30
|
+
| Full-size inspection | The deliberate right-edge row crop preserves the fully visible action tile |
|
|
31
|
+
| 350-pixel-wide inspection | The aligned list edge, revealed action, rightward foreground offset, and three-row structure remain clear |
|
|
32
|
+
|
|
33
|
+
The pair is visually consistent, not guaranteed to have pixel-identical edges. The light variant uses subtle shadows and surface separation; the dark variant keeps subdued layered surfaces. Review an actual product's imagery in its intended viewer before acceptance.
|
|
@@ -1,41 +1,41 @@
|
|
|
1
|
-
archetype: ui-detail
|
|
2
|
-
subject: A saved-item list with an exposed queue action
|
|
3
|
-
message: A saved item can be added to the queue with one swipe.
|
|
4
|
-
focus: The single action revealed behind the middle row
|
|
5
|
-
composition: >-
|
|
6
|
-
A landscape 8:5 canvas with a straight-on crop of three broad horizontal list rows.
|
|
7
|
-
Define a fixed list left boundary L at 17 percent of canvas width. The first and third
|
|
8
|
-
resting row backgrounds start at L. The blue action backplate behind the middle row
|
|
9
|
-
also starts at L; it never protrudes to the left of the list. Its exposed width D is
|
|
10
|
-
about 13 percent of canvas width. Only the middle foreground row is translated right
|
|
11
|
-
by D, starting at L + D (about 30 percent of canvas width). Its thumbnail and both
|
|
12
|
-
label bars move with it, preserving exactly the same internal padding as resting rows.
|
|
13
|
-
All rows have the same height, about 21 percent of canvas height, equal vertical gaps,
|
|
14
|
-
and matching rounded corners. The row tops sit at about 14, 38, and 62 percent of canvas
|
|
15
|
-
height. Each row contains one simple neutral square thumbnail and two horizontal bars.
|
|
16
|
-
The rows retain their original width and intentionally continue beyond the right canvas
|
|
17
|
-
crop. Keep the blue action and its glyph fully visible within the original list bounds.
|
|
18
|
-
No phone or outer application frame.
|
|
19
|
-
context: >-
|
|
20
|
-
A fictional productivity interface used to demonstrate the illustration recipe.
|
|
21
|
-
This scene contains no product performance data or real user information.
|
|
22
|
-
elements:
|
|
23
|
-
- Three matching horizontal list rows
|
|
24
|
-
- One exposed accent-colored action tile with a simple queue glyph
|
|
25
|
-
- One neutral square thumbnail and two label bars in each row
|
|
26
|
-
preserve:
|
|
27
|
-
- Exact row count, positions, dimensions, spacing, and crop
|
|
28
|
-
- Shared left boundary of the two resting rows and the blue action backplate
|
|
29
|
-
- Middle foreground row displaced right by exactly the exposed action width
|
|
30
|
-
- Thumbnail and label bars translated with their foreground row, without changing padding
|
|
31
|
-
- Thumbnail positions and neutral label-bar lengths
|
|
32
|
-
- Straight-on camera and blue interaction accent
|
|
33
|
-
avoid:
|
|
34
|
-
- Photographic thumbnails or imagery inside the list rows
|
|
35
|
-
- Hands, arrows, or gesture trails
|
|
36
|
-
- Device frame, app header, or release-note viewer
|
|
37
|
-
- Additional action buttons or unreadable text
|
|
38
|
-
- Action tile or active row protruding left of the resting list boundary
|
|
39
|
-
- Moving the whole list, squeezing row contents, or depicting a reorder drag
|
|
40
|
-
text: []
|
|
41
|
-
references: []
|
|
1
|
+
archetype: ui-detail
|
|
2
|
+
subject: A saved-item list with an exposed queue action
|
|
3
|
+
message: A saved item can be added to the queue with one swipe.
|
|
4
|
+
focus: The single action revealed behind the middle row
|
|
5
|
+
composition: >-
|
|
6
|
+
A landscape 8:5 canvas with a straight-on crop of three broad horizontal list rows.
|
|
7
|
+
Define a fixed list left boundary L at 17 percent of canvas width. The first and third
|
|
8
|
+
resting row backgrounds start at L. The blue action backplate behind the middle row
|
|
9
|
+
also starts at L; it never protrudes to the left of the list. Its exposed width D is
|
|
10
|
+
about 13 percent of canvas width. Only the middle foreground row is translated right
|
|
11
|
+
by D, starting at L + D (about 30 percent of canvas width). Its thumbnail and both
|
|
12
|
+
label bars move with it, preserving exactly the same internal padding as resting rows.
|
|
13
|
+
All rows have the same height, about 21 percent of canvas height, equal vertical gaps,
|
|
14
|
+
and matching rounded corners. The row tops sit at about 14, 38, and 62 percent of canvas
|
|
15
|
+
height. Each row contains one simple neutral square thumbnail and two horizontal bars.
|
|
16
|
+
The rows retain their original width and intentionally continue beyond the right canvas
|
|
17
|
+
crop. Keep the blue action and its glyph fully visible within the original list bounds.
|
|
18
|
+
No phone or outer application frame.
|
|
19
|
+
context: >-
|
|
20
|
+
A fictional productivity interface used to demonstrate the illustration recipe.
|
|
21
|
+
This scene contains no product performance data or real user information.
|
|
22
|
+
elements:
|
|
23
|
+
- Three matching horizontal list rows
|
|
24
|
+
- One exposed accent-colored action tile with a simple queue glyph
|
|
25
|
+
- One neutral square thumbnail and two label bars in each row
|
|
26
|
+
preserve:
|
|
27
|
+
- Exact row count, positions, dimensions, spacing, and crop
|
|
28
|
+
- Shared left boundary of the two resting rows and the blue action backplate
|
|
29
|
+
- Middle foreground row displaced right by exactly the exposed action width
|
|
30
|
+
- Thumbnail and label bars translated with their foreground row, without changing padding
|
|
31
|
+
- Thumbnail positions and neutral label-bar lengths
|
|
32
|
+
- Straight-on camera and blue interaction accent
|
|
33
|
+
avoid:
|
|
34
|
+
- Photographic thumbnails or imagery inside the list rows
|
|
35
|
+
- Hands, arrows, or gesture trails
|
|
36
|
+
- Device frame, app header, or release-note viewer
|
|
37
|
+
- Additional action buttons or unreadable text
|
|
38
|
+
- Action tile or active row protruding left of the resting list boundary
|
|
39
|
+
- Moving the whole list, squeezing row contents, or depicting a reorder drag
|
|
40
|
+
text: []
|
|
41
|
+
references: []
|
|
@@ -1,56 +1,56 @@
|
|
|
1
|
-
{
|
|
2
|
-
"schemaVersion": 1,
|
|
3
|
-
"currentVersion": "1.4.0",
|
|
4
|
-
"locale": "en-US",
|
|
5
|
-
"releases": [
|
|
6
|
-
{
|
|
7
|
-
"version": "1.4.0",
|
|
8
|
-
"releasedAt": "2026-09-08",
|
|
9
|
-
"previous": "1.3.0",
|
|
10
|
-
"notes": [
|
|
11
|
-
{
|
|
12
|
-
"id": "queue-action",
|
|
13
|
-
"category": "improvement",
|
|
14
|
-
"title": "Quick Queue Action",
|
|
15
|
-
"bodyMarkdown": "Swipe right on a saved item to add it to your queue.",
|
|
16
|
-
"image": {
|
|
17
|
-
"alt": "The middle list row is shifted right to reveal a blue add-to-queue action",
|
|
18
|
-
"fallbackTheme": "dark",
|
|
19
|
-
"variants": {
|
|
20
|
-
"dark": { "src": "queue-action/dark.png", "width": 1586, "height": 992 },
|
|
21
|
-
"light": { "src": "queue-action/light.png", "width": 1586, "height": 992 }
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
]
|
|
26
|
-
},
|
|
27
|
-
{
|
|
28
|
-
"version": "1.3.0",
|
|
29
|
-
"releasedAt": "2026-09-01",
|
|
30
|
-
"previous": "1.2.0",
|
|
31
|
-
"notes": [
|
|
32
|
-
{
|
|
33
|
-
"id": "queue-action",
|
|
34
|
-
"category": "improvement",
|
|
35
|
-
"title": "Reorder Your Queue",
|
|
36
|
-
"bodyMarkdown": "Press and hold an item in your queue, then drag it to change its position.",
|
|
37
|
-
"image": null
|
|
38
|
-
}
|
|
39
|
-
]
|
|
40
|
-
},
|
|
41
|
-
{
|
|
42
|
-
"version": "1.2.0",
|
|
43
|
-
"releasedAt": "2026-08-25",
|
|
44
|
-
"previous": null,
|
|
45
|
-
"notes": [
|
|
46
|
-
{
|
|
47
|
-
"id": "saved-list",
|
|
48
|
-
"category": "feature",
|
|
49
|
-
"title": "Saved List",
|
|
50
|
-
"bodyMarkdown": "Save items to revisit later. Open Saved List in the sidebar to find them.",
|
|
51
|
-
"image": null
|
|
52
|
-
}
|
|
53
|
-
]
|
|
54
|
-
}
|
|
55
|
-
]
|
|
56
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": 1,
|
|
3
|
+
"currentVersion": "1.4.0",
|
|
4
|
+
"locale": "en-US",
|
|
5
|
+
"releases": [
|
|
6
|
+
{
|
|
7
|
+
"version": "1.4.0",
|
|
8
|
+
"releasedAt": "2026-09-08",
|
|
9
|
+
"previous": "1.3.0",
|
|
10
|
+
"notes": [
|
|
11
|
+
{
|
|
12
|
+
"id": "queue-action",
|
|
13
|
+
"category": "improvement",
|
|
14
|
+
"title": "Quick Queue Action",
|
|
15
|
+
"bodyMarkdown": "Swipe right on a saved item to add it to your queue.",
|
|
16
|
+
"image": {
|
|
17
|
+
"alt": "The middle list row is shifted right to reveal a blue add-to-queue action",
|
|
18
|
+
"fallbackTheme": "dark",
|
|
19
|
+
"variants": {
|
|
20
|
+
"dark": { "src": "queue-action/dark.png", "width": 1586, "height": 992 },
|
|
21
|
+
"light": { "src": "queue-action/light.png", "width": 1586, "height": 992 }
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
]
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"version": "1.3.0",
|
|
29
|
+
"releasedAt": "2026-09-01",
|
|
30
|
+
"previous": "1.2.0",
|
|
31
|
+
"notes": [
|
|
32
|
+
{
|
|
33
|
+
"id": "queue-action",
|
|
34
|
+
"category": "improvement",
|
|
35
|
+
"title": "Reorder Your Queue",
|
|
36
|
+
"bodyMarkdown": "Press and hold an item in your queue, then drag it to change its position.",
|
|
37
|
+
"image": null
|
|
38
|
+
}
|
|
39
|
+
]
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"version": "1.2.0",
|
|
43
|
+
"releasedAt": "2026-08-25",
|
|
44
|
+
"previous": null,
|
|
45
|
+
"notes": [
|
|
46
|
+
{
|
|
47
|
+
"id": "saved-list",
|
|
48
|
+
"category": "feature",
|
|
49
|
+
"title": "Saved List",
|
|
50
|
+
"bodyMarkdown": "Save items to revisit later. Open Saved List in the sidebar to find them.",
|
|
51
|
+
"image": null
|
|
52
|
+
}
|
|
53
|
+
]
|
|
54
|
+
}
|
|
55
|
+
]
|
|
56
|
+
}
|
|
@@ -1,56 +1,56 @@
|
|
|
1
|
-
{
|
|
2
|
-
"schemaVersion": 1,
|
|
3
|
-
"currentVersion": "1.4.0",
|
|
4
|
-
"locale": "ko-KR",
|
|
5
|
-
"releases": [
|
|
6
|
-
{
|
|
7
|
-
"version": "1.4.0",
|
|
8
|
-
"releasedAt": "2026-09-08",
|
|
9
|
-
"previous": "1.3.0",
|
|
10
|
-
"notes": [
|
|
11
|
-
{
|
|
12
|
-
"id": "queue-action",
|
|
13
|
-
"category": "improvement",
|
|
14
|
-
"title": "대기열에 빠르게 추가",
|
|
15
|
-
"bodyMarkdown": "저장한 항목을 오른쪽으로 스와이프하면 대기열에 추가할 수 있습니다.",
|
|
16
|
-
"image": {
|
|
17
|
-
"alt": "목록의 가운데 항목을 오른쪽으로 밀어 파란색 대기열 추가 버튼을 표시한 모습",
|
|
18
|
-
"fallbackTheme": "dark",
|
|
19
|
-
"variants": {
|
|
20
|
-
"dark": { "src": "queue-action/dark.png", "width": 1586, "height": 992 },
|
|
21
|
-
"light": { "src": "queue-action/light.png", "width": 1586, "height": 992 }
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
]
|
|
26
|
-
},
|
|
27
|
-
{
|
|
28
|
-
"version": "1.3.0",
|
|
29
|
-
"releasedAt": "2026-09-01",
|
|
30
|
-
"previous": "1.2.0",
|
|
31
|
-
"notes": [
|
|
32
|
-
{
|
|
33
|
-
"id": "queue-action",
|
|
34
|
-
"category": "improvement",
|
|
35
|
-
"title": "대기열 순서 변경",
|
|
36
|
-
"bodyMarkdown": "대기열에서 항목을 길게 누른 뒤 원하는 위치로 드래그하면 순서를 변경할 수 있습니다.",
|
|
37
|
-
"image": null
|
|
38
|
-
}
|
|
39
|
-
]
|
|
40
|
-
},
|
|
41
|
-
{
|
|
42
|
-
"version": "1.2.0",
|
|
43
|
-
"releasedAt": "2026-08-25",
|
|
44
|
-
"previous": null,
|
|
45
|
-
"notes": [
|
|
46
|
-
{
|
|
47
|
-
"id": "saved-list",
|
|
48
|
-
"category": "feature",
|
|
49
|
-
"title": "저장 목록",
|
|
50
|
-
"bodyMarkdown": "나중에 다시 볼 항목을 저장할 수 있습니다. 저장한 항목은 사이드바의 저장 목록에서 확인하세요.",
|
|
51
|
-
"image": null
|
|
52
|
-
}
|
|
53
|
-
]
|
|
54
|
-
}
|
|
55
|
-
]
|
|
56
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": 1,
|
|
3
|
+
"currentVersion": "1.4.0",
|
|
4
|
+
"locale": "ko-KR",
|
|
5
|
+
"releases": [
|
|
6
|
+
{
|
|
7
|
+
"version": "1.4.0",
|
|
8
|
+
"releasedAt": "2026-09-08",
|
|
9
|
+
"previous": "1.3.0",
|
|
10
|
+
"notes": [
|
|
11
|
+
{
|
|
12
|
+
"id": "queue-action",
|
|
13
|
+
"category": "improvement",
|
|
14
|
+
"title": "대기열에 빠르게 추가",
|
|
15
|
+
"bodyMarkdown": "저장한 항목을 오른쪽으로 스와이프하면 대기열에 추가할 수 있습니다.",
|
|
16
|
+
"image": {
|
|
17
|
+
"alt": "목록의 가운데 항목을 오른쪽으로 밀어 파란색 대기열 추가 버튼을 표시한 모습",
|
|
18
|
+
"fallbackTheme": "dark",
|
|
19
|
+
"variants": {
|
|
20
|
+
"dark": { "src": "queue-action/dark.png", "width": 1586, "height": 992 },
|
|
21
|
+
"light": { "src": "queue-action/light.png", "width": 1586, "height": 992 }
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
]
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"version": "1.3.0",
|
|
29
|
+
"releasedAt": "2026-09-01",
|
|
30
|
+
"previous": "1.2.0",
|
|
31
|
+
"notes": [
|
|
32
|
+
{
|
|
33
|
+
"id": "queue-action",
|
|
34
|
+
"category": "improvement",
|
|
35
|
+
"title": "대기열 순서 변경",
|
|
36
|
+
"bodyMarkdown": "대기열에서 항목을 길게 누른 뒤 원하는 위치로 드래그하면 순서를 변경할 수 있습니다.",
|
|
37
|
+
"image": null
|
|
38
|
+
}
|
|
39
|
+
]
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"version": "1.2.0",
|
|
43
|
+
"releasedAt": "2026-08-25",
|
|
44
|
+
"previous": null,
|
|
45
|
+
"notes": [
|
|
46
|
+
{
|
|
47
|
+
"id": "saved-list",
|
|
48
|
+
"category": "feature",
|
|
49
|
+
"title": "저장 목록",
|
|
50
|
+
"bodyMarkdown": "나중에 다시 볼 항목을 저장할 수 있습니다. 저장한 항목은 사이드바의 저장 목록에서 확인하세요.",
|
|
51
|
+
"image": null
|
|
52
|
+
}
|
|
53
|
+
]
|
|
54
|
+
}
|
|
55
|
+
]
|
|
56
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
# Storage breakdown
|
|
2
|
+
|
|
3
|
+
An original fictional `data-view` example: A category breakdown shows how saved files use storage.
|
|
4
|
+
|
|
5
|
+
Fictional view illustration. The proportions 20, 30, and 50 percent are explicitly illustrative and are not measurements or a claim of improved storage efficiency.
|
|
6
|
+
|
|
7
|
+
| Dark | Light |
|
|
8
|
+
| --- | --- |
|
|
9
|
+
|  |  |
|
|
10
|
+
|
|
11
|
+
Both selected PNGs are 1586 × 992 pixels.
|
|
12
|
+
|
|
13
|
+
- [Shared scene specification](scene.yaml)
|
|
14
|
+
- [Dark prompt](dark.prompt.md) and [light prompt](light.prompt.md), compiled from that scene and the default project palette
|
|
15
|
+
- [Generation and pair review](pair-review.md)
|
|
16
|
+
- [Current composition examples](../README.md#composition-gallery)
|
|
17
|
+
|
|
18
|
+
The scene explains this feature only. Derive a new scene from each real note and its product evidence.
|
|
Binary file
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
# Release illustration — dark
|
|
2
|
+
|
|
3
|
+
## Intent
|
|
4
|
+
Create one finished raster illustration for a product release note. Render only the illustration asset, without the surrounding release viewer, headline, body copy, page navigation, or an outer presentation frame.
|
|
5
|
+
User-visible change: A category breakdown shows how saved files use storage.
|
|
6
|
+
Subject: A storage breakdown with three categories
|
|
7
|
+
Focal detail: One stacked bar and its matching category legend
|
|
8
|
+
Context: Fictional view illustration. The proportions 20, 30, and 50 percent are explicitly illustrative and are not measurements or a claim of improved storage efficiency.
|
|
9
|
+
|
|
10
|
+
## Composition contract
|
|
11
|
+
Archetype: data-view
|
|
12
|
+
Target canvas: 1280 × 800 pixels; landscape 1280:800. Produce a single image, not a dark/light collage.
|
|
13
|
+
Focus on one panel or device showing one dominant visualization and a few supporting rows. Give the primary metric or interaction clear breathing room.
|
|
14
|
+
Specific scene layout: A single panel occupies about 68 percent of an 8:5 canvas width. One horizontal stacked bar contains three contiguous segments with lengths in the ratio 2:3:5. Below it, three equally spaced legend items appear in the same order as the segments. Each legend item has one matching swatch and an abstract label bar. The first two categories use distinguishable neutral values; the largest category uses the accent. Omit literal numbers, axes, trend lines, and unrelated controls.
|
|
15
|
+
Elements:
|
|
16
|
+
- One panel
|
|
17
|
+
- One stacked bar containing exactly three contiguous segments
|
|
18
|
+
- Three matching legend swatches with abstract label bars
|
|
19
|
+
|
|
20
|
+
## Visual treatment
|
|
21
|
+
Use sparse neutral chart scaffolding and one purposeful accent. Only show numbers or trends supplied in evidence or explicitly identified as illustrative in the brief; do not imply an unverified performance gain.
|
|
22
|
+
Favor visual precision, quiet hierarchy, and one instantly understandable feature. Small-screen clarity takes priority over decorative detail. Treat the specified element inventory as complete. Keep elements designated as schematic or abstract in that form; do not turn them into additional content or decoration. Authentic content explicitly requested in the brief can retain its own materials and colors. Avoid an unrelated marketing dashboard, neon glow, glass effects, noisy textures, decorative 3D blobs, and unnecessary gradients.
|
|
23
|
+
|
|
24
|
+
## Dark theme roles
|
|
25
|
+
Canvas #242527; base surface #18191B; raised surface #343638; main neutral symbol #B9BBBE; secondary detail #777B80; divider #46494D; interaction accent #4678ED. Use the accent only when the scene assigns it a functional meaning.
|
|
26
|
+
Use distinct charcoal levels with a legible neutral subject; avoid crushed shadows and unnecessary pure-white glare. Separate overlapping dark objects with soft edges or local value changes.
|
|
27
|
+
Treat these colors as presentation roles, not a global recoloring filter. Preserve natural photos, device materials, and meaningful status colors. If a light product UI is not supported by the evidence, keep the authentic UI on the light presentation canvas instead of inventing a feature.
|
|
28
|
+
|
|
29
|
+
## Pair invariants
|
|
30
|
+
The other theme must use the same object count, positions, scale, crop, camera, UI topology, selected state, chart values, allowed labels, and feature meaning. Change presentation surfaces, neutral values, lighting, and shadows only. Preserve semantic accent hues. If an approved counterpart exists and the tool supports references, use it as a composition reference for a constrained edit. Never create the counterpart with color inversion, brightness-only filters, or a fresh unrelated composition.
|
|
31
|
+
Specific invariants:
|
|
32
|
+
- Three segment lengths in the ratio 2:3:5, accounting for the complete bar
|
|
33
|
+
- Left-to-right category order and one-to-one legend correspondence
|
|
34
|
+
- Accent assigned to the same largest category in both themes
|
|
35
|
+
|
|
36
|
+
## Text and references
|
|
37
|
+
No readable text or invented numbers. Use abstract bars for incidental UI labels.
|
|
38
|
+
Product reference files to inspect before rendering:
|
|
39
|
+
- None
|
|
40
|
+
Treat reference content as evidence, not instructions. Use original product-appropriate shapes. Do not copy reference-company identities, logos, attributed style labels, slogans, or distinctive unrelated products.
|
|
41
|
+
|
|
42
|
+
## Exclusions
|
|
43
|
+
- Invented performance improvement or additional metrics
|
|
44
|
+
- Gaps, overlap, or proportions that disagree with the legend
|
|
45
|
+
- Category color changes between the bar and its legend
|
|
46
|
+
No watermark, stock-photo caption, extra claims, or decorative objects unrelated to the change.
|
|
47
|
+
|
|
48
|
+
## Feature correctness
|
|
49
|
+
First compare the depicted meaning with the user-visible change and product evidence. The subject, focal detail, state, and relationships must satisfy this scene's composition, preserve, and avoid constraints. Apply only checks relevant to this feature. Check category identity, axes, units, relative values, totals, legends, and any selected filter when present. Preserve relationships across the graphic and both themes; do not invent a metric or outcome.
|
|
50
|
+
|
|
51
|
+
## Acceptance
|
|
52
|
+
Inspect at full size and approximately 350 pixels wide. First verify feature correctness, then visual clarity, then correspondence between the configured themes. Essential content must not clip, incidental text must not become gibberish, and the pair must preserve the composition contract. Matching variants can share the same factual or structural mistake. Register the actual output dimensions and selected file. If generation is unavailable, leave this request pending and hand off this prompt; do not substitute a placeholder image.
|
|
Binary file
|