@iodes/releasekit 0.1.6 → 0.1.7
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/README.md +2 -2
- package/dist/model.js +4 -4
- package/dist/prompts.js +18 -16
- package/examples/README.md +4 -4
- package/examples/backup-encryption/dark.prompt.md +15 -6
- package/examples/backup-encryption/light.prompt.md +15 -6
- package/examples/connected-route/dark.prompt.md +13 -4
- package/examples/connected-route/light.prompt.md +13 -4
- package/examples/location-preferences/README.md +6 -4
- package/examples/location-preferences/dark-refined.png +0 -0
- package/examples/location-preferences/dark-refinement.prompt.md +70 -0
- package/examples/location-preferences/dark-size-correction.prompt.md +5 -0
- package/examples/location-preferences/dark-weight-correction.prompt.md +5 -0
- package/examples/location-preferences/dark.prompt.md +15 -13
- package/examples/location-preferences/light-refined.png +0 -0
- package/examples/location-preferences/light-refinement.prompt.md +70 -0
- package/examples/location-preferences/light.prompt.md +15 -14
- package/examples/location-preferences/pair-review.md +17 -10
- package/examples/location-preferences/scene.yaml +16 -9
- package/examples/queue-action/README.md +3 -3
- package/examples/queue-action/dark-accent-edit.prompt.md +5 -0
- package/examples/queue-action/dark-accent.png +0 -0
- package/examples/queue-action/dark-refined.png +0 -0
- package/examples/queue-action/dark-refinement.prompt.md +74 -0
- package/examples/queue-action/dark-size-correction.prompt.md +5 -0
- package/examples/queue-action/dark.prompt.md +15 -13
- package/examples/queue-action/light-accent-edit.prompt.md +5 -0
- package/examples/queue-action/light-accent.png +0 -0
- package/examples/queue-action/light-refined.png +0 -0
- package/examples/queue-action/light-refinement.prompt.md +74 -0
- package/examples/queue-action/light.prompt.md +14 -13
- package/examples/queue-action/pair-review.md +11 -5
- package/examples/queue-action/scene.yaml +13 -9
- package/examples/storage-breakdown/dark.prompt.md +15 -6
- package/examples/storage-breakdown/light.prompt.md +15 -6
- package/examples/tablet-reading/dark.prompt.md +14 -5
- package/examples/tablet-reading/light.prompt.md +14 -5
- package/kit/references/composition-recipes.md +5 -5
- package/kit/references/format.md +1 -1
- package/kit/references/theme-pairing.md +6 -6
- package/kit/references/visual-language.md +17 -17
- package/kit/skills/releasekit-image/SKILL.md +2 -2
- package/package.json +1 -1
- package/schemas/config.schema.json +8 -8
- package/schemas/release.schema.json +8 -8
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
# Light refinement request
|
|
2
|
+
|
|
3
|
+
Actual built-in request. Uses the approved dark-refined.png as the composition reference. Candidate selection: light-refined.png. See pair-review.md for the reviewed result.
|
|
4
|
+
|
|
5
|
+
Use case: precise-object-edit. Input image 1 is the approved DARK neutral queue-action illustration and is the composition reference and edit target. Produce its LIGHT counterpart at exactly the same 1585 by 992 pixel dimensions. Preserve every row position, left boundary, middle-foreground offset, right crop, thumbnail position, bar length, padding, rounded corner, and the exact queue glyph. Keep the scene entirely neutral. Change only theme fills: canvas #F8F8F8; every foreground row #ECECEC (raised); all three thumbnails and all six incidental bars #B8B8B8 (secondary); exposed action backplate #999999 (primary); queue glyph #FFFFFF (surface). Keep this soft light hierarchy instead of carrying over dark charcoal fills. Uniform flat areas with no outlines, grain, glow, gradients, shadows, or extra content. One light PNG only, no dark/light collage.
|
|
6
|
+
|
|
7
|
+
# Release illustration — light
|
|
8
|
+
|
|
9
|
+
## Intent
|
|
10
|
+
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.
|
|
11
|
+
User-visible change: A saved item can be added to the queue with one swipe.
|
|
12
|
+
Subject: A saved-item list with an exposed queue action
|
|
13
|
+
Focal detail: The single action revealed behind the middle row
|
|
14
|
+
Context: A fictional productivity interface used to demonstrate the illustration recipe. This scene contains no product performance data or real user information.
|
|
15
|
+
|
|
16
|
+
## Composition contract
|
|
17
|
+
Archetype: ui-detail
|
|
18
|
+
Target canvas: 1585 × 992 pixels; landscape 1585:992. Produce a single image, not a dark/light collage.
|
|
19
|
+
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.
|
|
20
|
+
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 neutral 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 neutral action and its glyph fully visible within the original list bounds. Use canvas for the background and raised for the foreground rows. Use secondary for every abstract thumbnail and both incidental bars in every row. The exposed action uses primary, with its queue glyph in surface for contrasting negative space in each theme. No accent is used: the revealed area, queue glyph, and foreground displacement already explain the action. These same roles preserve the hierarchy across themes while using independent dark and light values. Keep each assigned fill uniform and flat. No shadows, phone, or outer frame.
|
|
21
|
+
Elements:
|
|
22
|
+
- Three matching horizontal list rows
|
|
23
|
+
- One exposed neutral action tile with a simple queue glyph
|
|
24
|
+
- One neutral square thumbnail and two label bars in each row
|
|
25
|
+
|
|
26
|
+
## Visual treatment
|
|
27
|
+
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. Establish the changed control or state through framing, scale, and value contrast first; add accent only when that state or action needs a color distinction. Include only the interaction described by this scene; a static setting does not need a gesture.
|
|
28
|
+
Favor visual precision, quiet hierarchy, and one instantly understandable feature. Build emphasis through composition, scale, and neutral value contrast before adding color. No accent is the default, and a fully neutral image is a finished result. Being new, important, or the focal subject does not itself justify color. 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.
|
|
29
|
+
|
|
30
|
+
## Light theme roles
|
|
31
|
+
| Role | Color | Assignment |
|
|
32
|
+
| --- | --- | --- |
|
|
33
|
+
| canvas | #F8F8F8 | Uniform illustration background |
|
|
34
|
+
| surface | #FFFFFF | Base or recessed interface panels |
|
|
35
|
+
| raised | #ECECEC | Foreground panels, controls, and quiet tile fills |
|
|
36
|
+
| primary | #999999 | Main neutral glyphs, focal controls, and feature-defining marks |
|
|
37
|
+
| secondary | #B8B8B8 | Supporting glyphs, incidental bars, and abstract content |
|
|
38
|
+
| divider | #D9D9D9 | Thin separators and necessary surface boundaries |
|
|
39
|
+
Use these configured roles consistently across the scene and release. Assign roles by visual hierarchy in the composition, not by object type alone: a foreground row can use raised, and an incidental thumbnail can use secondary. Keep equivalent roles consistent across the release. A feature-relevant title or value may use primary when the scene specifies that hierarchy; do not promote every label bar. Repeated elements with the same role use the same fill. Keep flat areas uniform. Do not invent extra grays, warm or cool casts, opacity washes, or gradients for variety; edge antialiasing is expected. Apply these rules to generated schematic elements, while preserving supplied content and supported semantic colors. Optional project accent: #4678ED; this is available, not required. Use it only on the exact element whose supported state, action, or data meaning the scene says needs color. Otherwise use no accent. Keep unrelated glyphs, tiles, and supporting surfaces neutral; do not invent a colored state, badge, or marker to use the palette.
|
|
40
|
+
Keep a soft light presentation using this theme's configured palette: primary glyphs use #999999; incidental label bars normally use the lighter secondary role #B8B8B8. Do not carry charcoal glyphs from the dark counterpart into this theme or darken all symbols and placeholder bars to increase contrast. Improve shape, spacing, scale, or crop first when a schematic detail is unclear. Respect explicit project palette overrides.
|
|
41
|
+
Use the configured near-white canvas and light surfaces. Separate panels with the divider role only where needed. Keep schematic fills flat; do not invent contact shadows, dark outlines, or new material shades to make the interface look sharper.
|
|
42
|
+
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.
|
|
43
|
+
|
|
44
|
+
## Pair invariants
|
|
45
|
+
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 neutral presentation values and necessary surface separation within the recipe. Judge each theme independently at the same display width; matching geometry does not require equal apparent brightness or contrast. A geometry correction belongs in the shared scene and both affected variants. Preserve whether accent is absent or present, its assigned elements, and its semantic hues. A neutral scene stays neutral in both themes. 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.
|
|
46
|
+
Specific invariants:
|
|
47
|
+
- Exact row count, positions, dimensions, spacing, and crop
|
|
48
|
+
- Shared left boundary of the two resting rows and the neutral action backplate
|
|
49
|
+
- Middle foreground row displaced right by exactly the exposed action width
|
|
50
|
+
- Thumbnail and label bars translated with their foreground row, without changing padding
|
|
51
|
+
- Thumbnail positions and neutral label-bar lengths
|
|
52
|
+
- Straight-on camera and neutral action hierarchy in both themes
|
|
53
|
+
|
|
54
|
+
## Text and references
|
|
55
|
+
No readable text or invented numbers. Use abstract bars for incidental UI labels.
|
|
56
|
+
Product reference files to inspect before rendering:
|
|
57
|
+
- None
|
|
58
|
+
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.
|
|
59
|
+
|
|
60
|
+
## Exclusions
|
|
61
|
+
- Decorative accent color, bright incidental bars, gradients, or material shading
|
|
62
|
+
- Photographic thumbnails or imagery inside the list rows
|
|
63
|
+
- Hands, arrows, or gesture trails
|
|
64
|
+
- Device frame, app header, or release-note viewer
|
|
65
|
+
- Additional action buttons or unreadable text
|
|
66
|
+
- Action tile or active row protruding left of the resting list boundary
|
|
67
|
+
- Moving the whole list, squeezing row contents, or depicting a reorder drag
|
|
68
|
+
No watermark, stock-photo caption, extra claims, or decorative objects unrelated to the change.
|
|
69
|
+
|
|
70
|
+
## Feature correctness
|
|
71
|
+
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.
|
|
72
|
+
|
|
73
|
+
## Acceptance
|
|
74
|
+
Inspect at full size and approximately 350 pixels wide. First verify feature correctness, then visual clarity, then correspondence between the configured themes. Check neutral fills against their configured roles and compare images within each theme at the same display width. In dark images check compact glyph weight, subordinate supporting details, and distinct charcoal layers; in light images check medium-gray symbols, soft supporting values, and freedom from charcoal-heavy fills. File validation does not establish color consistency. Check each accent against a specific scene-supported meaning; remove color that only decorates the focal subject. 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.
|
|
@@ -11,39 +11,39 @@ Context: A fictional productivity interface used to demonstrate the illustration
|
|
|
11
11
|
Archetype: ui-detail
|
|
12
12
|
Target canvas: 1280 × 800 pixels; landscape 1280:800. Produce a single image, not a dark/light collage.
|
|
13
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
|
|
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 accent-colored 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 accent-colored action and its glyph fully visible within the original list bounds. Use canvas for the background and raised for the foreground rows. Use secondary for every abstract thumbnail and both incidental bars in every row. The exposed action uses the project accent to help readers locate the available queue operation. Its queue glyph is white (#FFFFFF) in both themes for on-accent contrast. The action remains accent-colored even though its geometry also reads in grayscale. Leave all other elements neutral. Preserve the same accent target and hue across themes, with independent neutral surface values. Keep each assigned fill uniform and flat. No shadows, phone, or outer frame.
|
|
15
15
|
Elements:
|
|
16
16
|
- Three matching horizontal list rows
|
|
17
17
|
- One exposed accent-colored action tile with a simple queue glyph
|
|
18
18
|
- One neutral square thumbnail and two label bars in each row
|
|
19
19
|
|
|
20
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.
|
|
22
|
-
Favor visual precision, quiet hierarchy, and one instantly understandable feature. Build
|
|
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. Use framing, scale, and value contrast to establish the hierarchy. Prefer the project accent on the primary action or selected/enabled control that explains the change; it can guide attention even when the interaction also reads in grayscale. Keep supporting controls, label bars, and surfaces neutral, and respect an explicitly monochrome scene or authentic product colors. 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. Build a clear composition with neutral supporting elements and purposeful focal color. Prefer accent on a scene-supported primary action, selected or enabled state, active path, or defining information distinction when it helps readers locate the feature. Color need not be indispensable to comprehension. Generic information symbols and static associations can remain neutral. 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
23
|
|
|
24
24
|
## Light theme roles
|
|
25
25
|
| Role | Color | Assignment |
|
|
26
26
|
| --- | --- | --- |
|
|
27
27
|
| canvas | #F8F8F8 | Uniform illustration background |
|
|
28
|
-
| surface | #FFFFFF | Base interface panels
|
|
29
|
-
| raised | #ECECEC |
|
|
30
|
-
| primary | #999999 | Main neutral glyphs and feature-defining marks |
|
|
31
|
-
| secondary | #B8B8B8 |
|
|
28
|
+
| surface | #FFFFFF | Base or recessed interface panels |
|
|
29
|
+
| raised | #ECECEC | Foreground panels, controls, and quiet tile fills |
|
|
30
|
+
| primary | #999999 | Main neutral glyphs, focal controls, and feature-defining marks |
|
|
31
|
+
| secondary | #B8B8B8 | Supporting glyphs, incidental bars, and abstract content |
|
|
32
32
|
| divider | #D9D9D9 | Thin separators and necessary surface boundaries |
|
|
33
|
-
Use these configured roles consistently across the scene and release. Assign
|
|
34
|
-
Keep a soft light presentation using
|
|
33
|
+
Use these configured roles consistently across the scene and release. Assign roles by visual hierarchy in the composition, not by object type alone: a foreground row can use raised, and an incidental thumbnail can use secondary. Keep equivalent roles consistent across the release. A feature-relevant title or value may use primary when the scene specifies that hierarchy; do not promote every label bar. Repeated elements with the same role use the same fill. Keep flat areas uniform. Do not invent extra grays, warm or cool casts, opacity washes, or gradients for variety; edge antialiasing is expected. Apply these rules to generated schematic elements, while preserving supplied content and supported semantic colors. Project accent: #4678ED. Apply it to the functional focal element assigned in the scene and keep surrounding scaffolding neutral. Neutral role values must not replace that assigned accent. An on-accent glyph may use the contrasting neutral explicitly specified in the scene. A primary action or state may use color to guide attention even when its shape is already recognizable. Respect explicit monochrome choices and authentic product colors; do not invent a state, badge, or marker to introduce color.
|
|
34
|
+
Keep a soft light presentation using this theme's configured palette: neutral primary glyphs use #999999; incidental label bars normally use the lighter secondary role #B8B8B8. Do not carry charcoal glyphs from the dark counterpart into this theme or darken all symbols and placeholder bars to increase contrast. Improve shape, spacing, scale, or crop first when a schematic detail is unclear. Respect explicit project palette overrides.
|
|
35
35
|
Use the configured near-white canvas and light surfaces. Separate panels with the divider role only where needed. Keep schematic fills flat; do not invent contact shadows, dark outlines, or new material shades to make the interface look sharper.
|
|
36
36
|
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.
|
|
37
37
|
|
|
38
38
|
## Pair invariants
|
|
39
|
-
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
|
|
39
|
+
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 neutral presentation values and necessary surface separation within the recipe. Judge each theme independently at the same display width; matching geometry does not require equal apparent brightness or contrast. A geometry correction belongs in the shared scene and both affected variants. Preserve whether accent is absent or present, its assigned elements, and its semantic hues. A neutral scene stays neutral in both themes. 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.
|
|
40
40
|
Specific invariants:
|
|
41
41
|
- Exact row count, positions, dimensions, spacing, and crop
|
|
42
|
-
- Shared left boundary of the two resting rows and the
|
|
42
|
+
- Shared left boundary of the two resting rows and the accent-colored action backplate
|
|
43
43
|
- Middle foreground row displaced right by exactly the exposed action width
|
|
44
44
|
- Thumbnail and label bars translated with their foreground row, without changing padding
|
|
45
45
|
- Thumbnail positions and neutral label-bar lengths
|
|
46
|
-
- Straight-on camera and
|
|
46
|
+
- Straight-on camera, the same accent-colored action, and white queue glyph in both themes
|
|
47
47
|
|
|
48
48
|
## Text and references
|
|
49
49
|
No readable text or invented numbers. Use abstract bars for incidental UI labels.
|
|
@@ -52,6 +52,7 @@ Product reference files to inspect before rendering:
|
|
|
52
52
|
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.
|
|
53
53
|
|
|
54
54
|
## Exclusions
|
|
55
|
+
- Accent spreading to supporting rows or thumbnails, bright incidental bars, gradients, or material shading
|
|
55
56
|
- Photographic thumbnails or imagery inside the list rows
|
|
56
57
|
- Hands, arrows, or gesture trails
|
|
57
58
|
- Device frame, app header, or release-note viewer
|
|
@@ -64,4 +65,4 @@ No watermark, stock-photo caption, extra claims, or decorative objects unrelated
|
|
|
64
65
|
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.
|
|
65
66
|
|
|
66
67
|
## Acceptance
|
|
67
|
-
Inspect at full size and approximately 350 pixels wide. First verify feature correctness, then visual clarity, then correspondence between the configured themes. Check neutral fills against their configured roles and compare
|
|
68
|
+
Inspect at full size and approximately 350 pixels wide. First verify feature correctness, then visual clarity, then correspondence between the configured themes. Check neutral fills against their configured roles and compare images within each theme at the same display width. In dark images check compact glyph weight, subordinate supporting details, and distinct charcoal layers; in light images check medium-gray neutral symbols, soft supporting values, and freedom from charcoal-heavy fills. File validation does not establish color consistency. Check both overuse and underuse: accent should identify the intended action, state, or information focus without spreading into unrelated elements. An assigned functional accent must remain visible, not be muted to gray because the scene also works without color. 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.
|
|
@@ -10,25 +10,31 @@ This is an original fictional interface illustration generated with the coding a
|
|
|
10
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
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
12
|
6. Revise the light palette with [this constrained edit](light-palette-edit.prompt.md). Assign every incidental bar to `secondary: #B8B8B8`, thumbnails to `raised: #ECECEC`, rows to `surface: #FFFFFF`, and the background to `canvas: #F8F8F8`. Keep the blue action and the existing interaction geometry. Select `light-soft.png` after full-size and 350-pixel review alongside the earlier version; spot-check its fills against the intended roles.
|
|
13
|
+
7. Apply the [dark hierarchy revision](dark-refinement.prompt.md). Keep the interaction geometry and original dark palette, but map foreground rows to `raised`, incidental bars and thumbnails to `secondary`, the action to `primary`, and its glyph to `surface`. Remove the accent because the revealed area and glyph already distinguish this action. Select the neutral treatment after full-size and 350-pixel comparison with the earlier dark image.
|
|
14
|
+
8. Generate the [light counterpart](light-refinement.prompt.md) from that reviewed dark candidate, retaining the geometry and role assignments with the independent light values.
|
|
15
|
+
9. Correct a one-pixel output-width difference with the image tool using [this size request](dark-size-correction.prompt.md). Keep the decoded outputs at 1586 × 992 and inspect the pair again.
|
|
16
|
+
10. Revise the shared scene after review found the neutral-only guidance suppressed useful functional color. Apply the [dark accent edit](dark-accent-edit.prompt.md) to the reviewed dark image: use the project blue on the exposed action and white on its queue glyph, preserving the neutral supporting hierarchy and interaction geometry.
|
|
17
|
+
11. Apply the [same localized accent edit](light-accent-edit.prompt.md) to the reviewed light image. Inspect both full-size outputs and a 350-pixel-wide pair; select `dark-accent.png` and `light-accent.png`.
|
|
13
18
|
|
|
14
19
|
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.
|
|
15
20
|
|
|
16
|
-
This example has used
|
|
21
|
+
This example has used eleven image-tool requests in total, including three for the independent theme treatment revision and two for the functional accent revision. Two required assets do not guarantee only two billable generations. The CLI itself made no image-service requests.
|
|
17
22
|
|
|
18
23
|
## Selected output
|
|
19
24
|
|
|
20
25
|
| Check | Result |
|
|
21
26
|
| --- | --- |
|
|
22
27
|
| Actual dimensions | Both 1586 × 992 pixels, approximately 8:5 |
|
|
23
|
-
| Encoding | Two distinct, fully decoded PNG files: `dark.png` and `light-
|
|
28
|
+
| Encoding | Two distinct, fully decoded PNG files: `dark-accent.png` and `light-accent.png` |
|
|
24
29
|
| Subject | Three list rows with one action revealed behind the middle row |
|
|
25
30
|
| Fixed alignment | The first row, blue action backplate, and third row share a left boundary at approximately 17% of canvas width |
|
|
26
31
|
| Foreground displacement | Only the middle foreground and its contents start farther right, around 30% of canvas width; the exposed action fills the intervening space |
|
|
27
32
|
| Containment | The action stays inside the original list bounds, with no leftward protrusion; resting rows retain their positions |
|
|
28
33
|
| Pair correspondence | Row count, overall positions, swipe state, crop, thumbnail layout, and bar lengths remain visually consistent |
|
|
29
|
-
| Focal hierarchy | The blue action
|
|
34
|
+
| Focal hierarchy | The blue action and white queue glyph provide the functional focus; supporting thumbnails and bars stay neutral in both themes |
|
|
35
|
+
| Accent containment | Blue remains confined to the exposed action, with no blue in the supporting rows, thumbnails, or bars |
|
|
30
36
|
| Neutral content | No photographic thumbnails, readable labels, logos, or extra controls |
|
|
31
37
|
| Full-size inspection | The deliberate right-edge row crop preserves the fully visible action tile |
|
|
32
|
-
| 350-pixel-wide inspection | The aligned list edge,
|
|
38
|
+
| 350-pixel-wide inspection | The blue action and white glyph remain easy to locate; the aligned list edge, foreground offset, and three-row structure remain clear |
|
|
33
39
|
|
|
34
|
-
The pair
|
|
40
|
+
The pair preserves the same interaction and neutral supporting hierarchy while using separate dark and light values. The blue action and white queue glyph retain the same functional meaning in both themes. Dark rows remain distinct from the charcoal canvas without bright incidental bars; the light variant uses soft pale rows and supporting gray content. The pair is visually consistent, not guaranteed to have pixel-identical edges. Raster fills remain approximate rather than exact palette swatches. Review an actual product's imagery in its intended viewer before acceptance.
|
|
@@ -5,7 +5,7 @@ focus: The single action revealed behind the middle row
|
|
|
5
5
|
composition: >-
|
|
6
6
|
A landscape 8:5 canvas with a straight-on crop of three broad horizontal list rows.
|
|
7
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
|
|
8
|
+
resting row backgrounds start at L. The accent-colored action backplate behind the middle row
|
|
9
9
|
also starts at L; it never protrudes to the left of the list. Its exposed width D is
|
|
10
10
|
about 13 percent of canvas width. Only the middle foreground row is translated right
|
|
11
11
|
by D, starting at L + D (about 30 percent of canvas width). Its thumbnail and both
|
|
@@ -14,12 +14,15 @@ composition: >-
|
|
|
14
14
|
and matching rounded corners. The row tops sit at about 14, 38, and 62 percent of canvas
|
|
15
15
|
height. Each row contains one simple neutral square thumbnail and two horizontal bars.
|
|
16
16
|
The rows retain their original width and intentionally continue beyond the right canvas
|
|
17
|
-
crop. Keep the
|
|
18
|
-
Use canvas for the background
|
|
19
|
-
thumbnail
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
17
|
+
crop. Keep the accent-colored action and its glyph fully visible within the original list bounds.
|
|
18
|
+
Use canvas for the background and raised for the foreground rows. Use secondary
|
|
19
|
+
for every abstract thumbnail and both incidental bars in every row. The exposed
|
|
20
|
+
action uses the project accent to help readers locate the available queue
|
|
21
|
+
operation. Its queue glyph is white (#FFFFFF) in both themes for on-accent
|
|
22
|
+
contrast. The action remains accent-colored even though its geometry also
|
|
23
|
+
reads in grayscale. Leave all other elements neutral. Preserve the same
|
|
24
|
+
accent target and hue across themes, with independent neutral surface values.
|
|
25
|
+
Keep each assigned fill uniform and flat. No shadows, phone, or outer frame.
|
|
23
26
|
context: >-
|
|
24
27
|
A fictional productivity interface used to demonstrate the illustration recipe.
|
|
25
28
|
This scene contains no product performance data or real user information.
|
|
@@ -29,12 +32,13 @@ elements:
|
|
|
29
32
|
- One neutral square thumbnail and two label bars in each row
|
|
30
33
|
preserve:
|
|
31
34
|
- Exact row count, positions, dimensions, spacing, and crop
|
|
32
|
-
- Shared left boundary of the two resting rows and the
|
|
35
|
+
- Shared left boundary of the two resting rows and the accent-colored action backplate
|
|
33
36
|
- Middle foreground row displaced right by exactly the exposed action width
|
|
34
37
|
- Thumbnail and label bars translated with their foreground row, without changing padding
|
|
35
38
|
- Thumbnail positions and neutral label-bar lengths
|
|
36
|
-
- Straight-on camera and
|
|
39
|
+
- Straight-on camera, the same accent-colored action, and white queue glyph in both themes
|
|
37
40
|
avoid:
|
|
41
|
+
- Accent spreading to supporting rows or thumbnails, bright incidental bars, gradients, or material shading
|
|
38
42
|
- Photographic thumbnails or imagery inside the list rows
|
|
39
43
|
- Hands, arrows, or gesture trails
|
|
40
44
|
- Device frame, app header, or release-note viewer
|
|
@@ -18,16 +18,25 @@ Elements:
|
|
|
18
18
|
- Three matching legend swatches with abstract label bars
|
|
19
19
|
|
|
20
20
|
## Visual treatment
|
|
21
|
-
Use sparse neutral chart scaffolding and
|
|
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.
|
|
21
|
+
Use sparse neutral chart scaffolding and use the assigned accent to make the scene's focal series, selected value, or category comparison easy to locate, with matching legend semantics. Preserve an explicitly neutral presentation when appropriate. 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. Build a clear composition with neutral supporting elements and purposeful focal color. Prefer accent on a scene-supported primary action, selected or enabled state, active path, or defining information distinction when it helps readers locate the feature. Color need not be indispensable to comprehension. Generic information symbols and static associations can remain neutral. 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
23
|
|
|
24
24
|
## Dark theme roles
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
| Role | Color | Assignment |
|
|
26
|
+
| --- | --- | --- |
|
|
27
|
+
| canvas | #242527 | Uniform illustration background |
|
|
28
|
+
| surface | #18191B | Base or recessed interface panels |
|
|
29
|
+
| raised | #343638 | Foreground panels, controls, and quiet tile fills |
|
|
30
|
+
| primary | #B9BBBE | Main neutral glyphs, focal controls, and feature-defining marks |
|
|
31
|
+
| secondary | #777B80 | Supporting glyphs, incidental bars, and abstract content |
|
|
32
|
+
| divider | #46494D | Thin separators and necessary surface boundaries |
|
|
33
|
+
Use these configured roles consistently across the scene and release. Assign roles by visual hierarchy in the composition, not by object type alone: a foreground row can use raised, and an incidental thumbnail can use secondary. Keep equivalent roles consistent across the release. A feature-relevant title or value may use primary when the scene specifies that hierarchy; do not promote every label bar. Repeated elements with the same role use the same fill. Keep flat areas uniform. Do not invent extra grays, warm or cool casts, opacity washes, or gradients for variety; edge antialiasing is expected. Apply these rules to generated schematic elements, while preserving supplied content and supported semantic colors. Project accent: #4678ED. Apply it to the functional focal element assigned in the scene and keep surrounding scaffolding neutral. Neutral role values must not replace that assigned accent. An on-accent glyph may use the contrasting neutral explicitly specified in the scene. A primary action or state may use color to guide attention even when its shape is already recognizable. Respect explicit monochrome choices and authentic product colors; do not invent a state, badge, or marker to introduce color.
|
|
34
|
+
Preserve this theme's independent charcoal hierarchy: canvas #242527, base surface #18191B, foreground surface #343638, primary #B9BBBE, and secondary #777B80. Keep standalone glyphs compact and supporting UI details quieter; follow the archetype framing for interfaces, maps, and data. Do not enlarge, thicken, or brighten every glyph and label bar. Retain the necessary separation between background, panels, and focal controls instead of compressing all dark values to match a softened light variant. Respect explicit project palette overrides.
|
|
35
|
+
Separate base and foreground panels with their configured charcoal fills. Reserve stronger neutral contrast for the feature-defining control; incidental bars and thumbnails remain subordinate. Keep edges clean and fills flat, without milky overlays, glow, or invented material shading.
|
|
27
36
|
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
37
|
|
|
29
38
|
## 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
|
|
39
|
+
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 neutral presentation values and necessary surface separation within the recipe. Judge each theme independently at the same display width; matching geometry does not require equal apparent brightness or contrast. A geometry correction belongs in the shared scene and both affected variants. Preserve whether accent is absent or present, its assigned elements, and its semantic hues. A neutral scene stays neutral in both themes. 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
40
|
Specific invariants:
|
|
32
41
|
- Three segment lengths in the ratio 2:3:5, accounting for the complete bar
|
|
33
42
|
- Left-to-right category order and one-to-one legend correspondence
|
|
@@ -49,4 +58,4 @@ No watermark, stock-photo caption, extra claims, or decorative objects unrelated
|
|
|
49
58
|
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
59
|
|
|
51
60
|
## 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.
|
|
61
|
+
Inspect at full size and approximately 350 pixels wide. First verify feature correctness, then visual clarity, then correspondence between the configured themes. Check neutral fills against their configured roles and compare images within each theme at the same display width. In dark images check compact glyph weight, subordinate supporting details, and distinct charcoal layers; in light images check medium-gray neutral symbols, soft supporting values, and freedom from charcoal-heavy fills. File validation does not establish color consistency. Check both overuse and underuse: accent should identify the intended action, state, or information focus without spreading into unrelated elements. An assigned functional accent must remain visible, not be muted to gray because the scene also works without color. 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.
|
|
@@ -18,16 +18,25 @@ Elements:
|
|
|
18
18
|
- Three matching legend swatches with abstract label bars
|
|
19
19
|
|
|
20
20
|
## Visual treatment
|
|
21
|
-
Use sparse neutral chart scaffolding and
|
|
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.
|
|
21
|
+
Use sparse neutral chart scaffolding and use the assigned accent to make the scene's focal series, selected value, or category comparison easy to locate, with matching legend semantics. Preserve an explicitly neutral presentation when appropriate. 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. Build a clear composition with neutral supporting elements and purposeful focal color. Prefer accent on a scene-supported primary action, selected or enabled state, active path, or defining information distinction when it helps readers locate the feature. Color need not be indispensable to comprehension. Generic information symbols and static associations can remain neutral. 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
23
|
|
|
24
24
|
## Light theme roles
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
| Role | Color | Assignment |
|
|
26
|
+
| --- | --- | --- |
|
|
27
|
+
| canvas | #F8F8F8 | Uniform illustration background |
|
|
28
|
+
| surface | #FFFFFF | Base or recessed interface panels |
|
|
29
|
+
| raised | #ECECEC | Foreground panels, controls, and quiet tile fills |
|
|
30
|
+
| primary | #999999 | Main neutral glyphs, focal controls, and feature-defining marks |
|
|
31
|
+
| secondary | #B8B8B8 | Supporting glyphs, incidental bars, and abstract content |
|
|
32
|
+
| divider | #D9D9D9 | Thin separators and necessary surface boundaries |
|
|
33
|
+
Use these configured roles consistently across the scene and release. Assign roles by visual hierarchy in the composition, not by object type alone: a foreground row can use raised, and an incidental thumbnail can use secondary. Keep equivalent roles consistent across the release. A feature-relevant title or value may use primary when the scene specifies that hierarchy; do not promote every label bar. Repeated elements with the same role use the same fill. Keep flat areas uniform. Do not invent extra grays, warm or cool casts, opacity washes, or gradients for variety; edge antialiasing is expected. Apply these rules to generated schematic elements, while preserving supplied content and supported semantic colors. Project accent: #4678ED. Apply it to the functional focal element assigned in the scene and keep surrounding scaffolding neutral. Neutral role values must not replace that assigned accent. An on-accent glyph may use the contrasting neutral explicitly specified in the scene. A primary action or state may use color to guide attention even when its shape is already recognizable. Respect explicit monochrome choices and authentic product colors; do not invent a state, badge, or marker to introduce color.
|
|
34
|
+
Keep a soft light presentation using this theme's configured palette: neutral primary glyphs use #999999; incidental label bars normally use the lighter secondary role #B8B8B8. Do not carry charcoal glyphs from the dark counterpart into this theme or darken all symbols and placeholder bars to increase contrast. Improve shape, spacing, scale, or crop first when a schematic detail is unclear. Respect explicit project palette overrides.
|
|
35
|
+
Use the configured near-white canvas and light surfaces. Separate panels with the divider role only where needed. Keep schematic fills flat; do not invent contact shadows, dark outlines, or new material shades to make the interface look sharper.
|
|
27
36
|
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
37
|
|
|
29
38
|
## 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
|
|
39
|
+
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 neutral presentation values and necessary surface separation within the recipe. Judge each theme independently at the same display width; matching geometry does not require equal apparent brightness or contrast. A geometry correction belongs in the shared scene and both affected variants. Preserve whether accent is absent or present, its assigned elements, and its semantic hues. A neutral scene stays neutral in both themes. 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
40
|
Specific invariants:
|
|
32
41
|
- Three segment lengths in the ratio 2:3:5, accounting for the complete bar
|
|
33
42
|
- Left-to-right category order and one-to-one legend correspondence
|
|
@@ -49,4 +58,4 @@ No watermark, stock-photo caption, extra claims, or decorative objects unrelated
|
|
|
49
58
|
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
59
|
|
|
51
60
|
## 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.
|
|
61
|
+
Inspect at full size and approximately 350 pixels wide. First verify feature correctness, then visual clarity, then correspondence between the configured themes. Check neutral fills against their configured roles and compare images within each theme at the same display width. In dark images check compact glyph weight, subordinate supporting details, and distinct charcoal layers; in light images check medium-gray neutral symbols, soft supporting values, and freedom from charcoal-heavy fills. File validation does not establish color consistency. Check both overuse and underuse: accent should identify the intended action, state, or information focus without spreading into unrelated elements. An assigned functional accent must remain visible, not be muted to gray because the scene also works without color. 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.
|
|
@@ -19,15 +19,24 @@ Elements:
|
|
|
19
19
|
|
|
20
20
|
## Visual treatment
|
|
21
21
|
Keep any generated frame flat and schematic, with the screen grounded in supplied product evidence. Use a single device unless cross-device interaction is the feature. Choose a supplied capture when actual device appearance matters; do not invent a modeled hardware product.
|
|
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.
|
|
22
|
+
Favor visual precision, quiet hierarchy, and one instantly understandable feature. Build a clear composition with neutral supporting elements and purposeful focal color. Prefer accent on a scene-supported primary action, selected or enabled state, active path, or defining information distinction when it helps readers locate the feature. Color need not be indispensable to comprehension. Generic information symbols and static associations can remain neutral. 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
23
|
|
|
24
24
|
## Dark theme roles
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
| Role | Color | Assignment |
|
|
26
|
+
| --- | --- | --- |
|
|
27
|
+
| canvas | #242527 | Uniform illustration background |
|
|
28
|
+
| surface | #18191B | Base or recessed interface panels |
|
|
29
|
+
| raised | #343638 | Foreground panels, controls, and quiet tile fills |
|
|
30
|
+
| primary | #B9BBBE | Main neutral glyphs, focal controls, and feature-defining marks |
|
|
31
|
+
| secondary | #777B80 | Supporting glyphs, incidental bars, and abstract content |
|
|
32
|
+
| divider | #46494D | Thin separators and necessary surface boundaries |
|
|
33
|
+
Use these configured roles consistently across the scene and release. Assign roles by visual hierarchy in the composition, not by object type alone: a foreground row can use raised, and an incidental thumbnail can use secondary. Keep equivalent roles consistent across the release. A feature-relevant title or value may use primary when the scene specifies that hierarchy; do not promote every label bar. Repeated elements with the same role use the same fill. Keep flat areas uniform. Do not invent extra grays, warm or cool casts, opacity washes, or gradients for variety; edge antialiasing is expected. Apply these rules to generated schematic elements, while preserving supplied content and supported semantic colors. Project accent: #4678ED. Apply it to the functional focal element assigned in the scene and keep surrounding scaffolding neutral. Neutral role values must not replace that assigned accent. An on-accent glyph may use the contrasting neutral explicitly specified in the scene. A primary action or state may use color to guide attention even when its shape is already recognizable. Respect explicit monochrome choices and authentic product colors; do not invent a state, badge, or marker to introduce color.
|
|
34
|
+
Preserve this theme's independent charcoal hierarchy: canvas #242527, base surface #18191B, foreground surface #343638, primary #B9BBBE, and secondary #777B80. Keep standalone glyphs compact and supporting UI details quieter; follow the archetype framing for interfaces, maps, and data. Do not enlarge, thicken, or brighten every glyph and label bar. Retain the necessary separation between background, panels, and focal controls instead of compressing all dark values to match a softened light variant. Respect explicit project palette overrides.
|
|
35
|
+
Separate base and foreground panels with their configured charcoal fills. Reserve stronger neutral contrast for the feature-defining control; incidental bars and thumbnails remain subordinate. Keep edges clean and fills flat, without milky overlays, glow, or invented material shading.
|
|
27
36
|
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
37
|
|
|
29
38
|
## 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
|
|
39
|
+
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 neutral presentation values and necessary surface separation within the recipe. Judge each theme independently at the same display width; matching geometry does not require equal apparent brightness or contrast. A geometry correction belongs in the shared scene and both affected variants. Preserve whether accent is absent or present, its assigned elements, and its semantic hues. A neutral scene stays neutral in both themes. 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
40
|
Specific invariants:
|
|
32
41
|
- Hardware material and light screen in both presentation themes
|
|
33
42
|
- One device, exact screen layout, six body bars and their lengths
|
|
@@ -49,4 +58,4 @@ No watermark, stock-photo caption, extra claims, or decorative objects unrelated
|
|
|
49
58
|
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 actual device count, screen content, and relationship between devices. Do not imply an unsupported device, connection, or application theme.
|
|
50
59
|
|
|
51
60
|
## 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.
|
|
61
|
+
Inspect at full size and approximately 350 pixels wide. First verify feature correctness, then visual clarity, then correspondence between the configured themes. Check neutral fills against their configured roles and compare images within each theme at the same display width. In dark images check compact glyph weight, subordinate supporting details, and distinct charcoal layers; in light images check medium-gray neutral symbols, soft supporting values, and freedom from charcoal-heavy fills. File validation does not establish color consistency. Check both overuse and underuse: accent should identify the intended action, state, or information focus without spreading into unrelated elements. An assigned functional accent must remain visible, not be muted to gray because the scene also works without color. 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.
|
|
@@ -19,15 +19,24 @@ Elements:
|
|
|
19
19
|
|
|
20
20
|
## Visual treatment
|
|
21
21
|
Keep any generated frame flat and schematic, with the screen grounded in supplied product evidence. Use a single device unless cross-device interaction is the feature. Choose a supplied capture when actual device appearance matters; do not invent a modeled hardware product.
|
|
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.
|
|
22
|
+
Favor visual precision, quiet hierarchy, and one instantly understandable feature. Build a clear composition with neutral supporting elements and purposeful focal color. Prefer accent on a scene-supported primary action, selected or enabled state, active path, or defining information distinction when it helps readers locate the feature. Color need not be indispensable to comprehension. Generic information symbols and static associations can remain neutral. 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
23
|
|
|
24
24
|
## Light theme roles
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
| Role | Color | Assignment |
|
|
26
|
+
| --- | --- | --- |
|
|
27
|
+
| canvas | #F8F8F8 | Uniform illustration background |
|
|
28
|
+
| surface | #FFFFFF | Base or recessed interface panels |
|
|
29
|
+
| raised | #ECECEC | Foreground panels, controls, and quiet tile fills |
|
|
30
|
+
| primary | #999999 | Main neutral glyphs, focal controls, and feature-defining marks |
|
|
31
|
+
| secondary | #B8B8B8 | Supporting glyphs, incidental bars, and abstract content |
|
|
32
|
+
| divider | #D9D9D9 | Thin separators and necessary surface boundaries |
|
|
33
|
+
Use these configured roles consistently across the scene and release. Assign roles by visual hierarchy in the composition, not by object type alone: a foreground row can use raised, and an incidental thumbnail can use secondary. Keep equivalent roles consistent across the release. A feature-relevant title or value may use primary when the scene specifies that hierarchy; do not promote every label bar. Repeated elements with the same role use the same fill. Keep flat areas uniform. Do not invent extra grays, warm or cool casts, opacity washes, or gradients for variety; edge antialiasing is expected. Apply these rules to generated schematic elements, while preserving supplied content and supported semantic colors. Project accent: #4678ED. Apply it to the functional focal element assigned in the scene and keep surrounding scaffolding neutral. Neutral role values must not replace that assigned accent. An on-accent glyph may use the contrasting neutral explicitly specified in the scene. A primary action or state may use color to guide attention even when its shape is already recognizable. Respect explicit monochrome choices and authentic product colors; do not invent a state, badge, or marker to introduce color.
|
|
34
|
+
Keep a soft light presentation using this theme's configured palette: neutral primary glyphs use #999999; incidental label bars normally use the lighter secondary role #B8B8B8. Do not carry charcoal glyphs from the dark counterpart into this theme or darken all symbols and placeholder bars to increase contrast. Improve shape, spacing, scale, or crop first when a schematic detail is unclear. Respect explicit project palette overrides.
|
|
35
|
+
Use the configured near-white canvas and light surfaces. Separate panels with the divider role only where needed. Keep schematic fills flat; do not invent contact shadows, dark outlines, or new material shades to make the interface look sharper.
|
|
27
36
|
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
37
|
|
|
29
38
|
## 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
|
|
39
|
+
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 neutral presentation values and necessary surface separation within the recipe. Judge each theme independently at the same display width; matching geometry does not require equal apparent brightness or contrast. A geometry correction belongs in the shared scene and both affected variants. Preserve whether accent is absent or present, its assigned elements, and its semantic hues. A neutral scene stays neutral in both themes. 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
40
|
Specific invariants:
|
|
32
41
|
- Hardware material and light screen in both presentation themes
|
|
33
42
|
- One device, exact screen layout, six body bars and their lengths
|
|
@@ -49,4 +58,4 @@ No watermark, stock-photo caption, extra claims, or decorative objects unrelated
|
|
|
49
58
|
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 actual device count, screen content, and relationship between devices. Do not imply an unsupported device, connection, or application theme.
|
|
50
59
|
|
|
51
60
|
## 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.
|
|
61
|
+
Inspect at full size and approximately 350 pixels wide. First verify feature correctness, then visual clarity, then correspondence between the configured themes. Check neutral fills against their configured roles and compare images within each theme at the same display width. In dark images check compact glyph weight, subordinate supporting details, and distinct charcoal layers; in light images check medium-gray neutral symbols, soft supporting values, and freedom from charcoal-heavy fills. File validation does not establish color consistency. Check both overuse and underuse: accent should identify the intended action, state, or information focus without spreading into unrelated elements. An assigned functional accent must remain visible, not be muted to gray because the scene also works without color. 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.
|
|
@@ -6,8 +6,8 @@ The rules below are conditional on the selected subject. Choose the [media sourc
|
|
|
6
6
|
|
|
7
7
|
| Archetype | Use when | Starting composition | Common failure |
|
|
8
8
|
| --- | --- | --- | --- |
|
|
9
|
-
| `icon-tile` | A capability or status is recognizable through one symbol | Flat tile about 20–24% of canvas width;
|
|
10
|
-
| `symbol-pair` | Two capabilities are connected |
|
|
9
|
+
| `icon-tile` | A capability or status is recognizable through one symbol | Flat tile about 20–24% of canvas width; compact filled glyph about 50–65% of tile width, normally neutral with accent available for a supported action or state | A sculpted 3D object, colored decorative badge, or oversized glyph |
|
|
10
|
+
| `symbol-pair` | Two capabilities are connected | Compact neutral glyphs, each longest dimension around 8–11% of canvas width; generous spacing and a short subtle divider | Coloring one symbol merely for emphasis, unequal weights, or an unsupported direction |
|
|
11
11
|
| `ui-detail` | A specific interaction or setting changed | One enlarged fragment occupying about 55–85% of width | A complete invented dashboard with the useful control too small |
|
|
12
12
|
| `device-view` | The device or cross-device context matters | One unobtrusive front-facing display, around 28–48% of width | Decorative device mockups unrelated to the workflow |
|
|
13
13
|
| `object-detail` | A real physical part explains the feature | Supplied photograph or capture, with a useful crop | Inventing a physical product or generating a 3D substitute |
|
|
@@ -46,15 +46,15 @@ Message: a saved item can be added to a queue with one swipe.
|
|
|
46
46
|
|
|
47
47
|
Choose `ui-detail`. Three broad horizontal list rows extend slightly past the right crop. Define the resting list left boundary as `L` and the exposed action width as `D`. The top and bottom row backgrounds and the middle row's action backplate all start at `L`. For this rightward swipe, only the middle foreground row starts at `L + D`; its thumbnail and label bars move with it and retain their original padding. The action occupies the space revealed inside the original row bounds. Its left edge must not protrude outside the resting list. Do not shift the entire list or compress the active row to make room.
|
|
48
48
|
|
|
49
|
-
Represent incidental text as two or three neutral bars with consistent padding. Assign
|
|
49
|
+
Represent incidental text as two or three neutral bars with consistent padding. Assign roles according to the scene's hierarchy: incidental bars and thumbnails can share `secondary`, with foreground rows in `raised` over the canvas. Use `surface` for a base or recessed panel when present. A feature-relevant title or value can use `primary` if its hierarchy matters. Keep equivalent roles consistent across the release and both themes. Keep the action icon recognizable and the entire interaction inside the safe margin. This is a horizontal reveal gesture, not a vertical reorder drag: the rows keep their order and vertical positions. Keep one interaction. Prefer the project accent on the exposed action so readers can locate the available operation quickly, even when the swipe geometry also reads in grayscale. Keep the supporting rows neutral; honor an explicit monochrome brief or authentic product color scheme. Do not add a floating hand, arrow trail, extra feature, or surrounding app navigation.
|
|
50
50
|
|
|
51
|
-
Before pairing, check that the resting rows and action backplate share a left boundary, the foreground displacement equals the revealed action width, and its contents moved as one unit. For the theme pair, lock row dimensions, offset, action width, bars, crop, and selected state. Change only
|
|
51
|
+
Before pairing, check that the resting rows and action backplate share a left boundary, the foreground displacement equals the revealed action width, and its contents moved as one unit. For the theme pair, lock row dimensions, offset, action width, bars, crop, and selected state. Change only neutral presentation values and necessary surface separation within the recipe. A second view that selects another row is a failed pair. Two matching images can still share the same interaction error, so correspondence alone is insufficient.
|
|
52
52
|
|
|
53
53
|
## Worked brief: a saved-location preference
|
|
54
54
|
|
|
55
55
|
Message: a setting can be saved for a selected location.
|
|
56
56
|
|
|
57
|
-
Choose `symbol-pair` if the association itself is sufficient: a
|
|
57
|
+
Choose `symbol-pair` if the association itself is sufficient: a compact adjustment glyph and a location pin, balanced around a short neutral divider. Compare filled ink weight rather than forcing equal widths; a solid pin may need a narrower silhouette than a sparse adjustment glyph. Leave generous space between symbols. Establish this geometry once in the shared scene and retain it in both themes. Choose `ui-detail` if users need to discover the new menu action. Do not add a device just to fill the empty space. A location pin is a metaphor; it must not imply geofencing or automatic behavior absent from the evidence.
|
|
58
58
|
|
|
59
59
|
## Worked brief: activity information
|
|
60
60
|
|
package/kit/references/format.md
CHANGED
|
@@ -14,7 +14,7 @@ Within one release:
|
|
|
14
14
|
| `prompts/<id>.<theme>.md` | Generation requests for pending generated variants; supplied images have no generation request |
|
|
15
15
|
| `assets/` | Selected raster files with content-derived names |
|
|
16
16
|
|
|
17
|
-
`visuals.dark` and `visuals.light` assign six neutral roles: `canvas` for the background, `surface` for base panels, `raised` for
|
|
17
|
+
`visuals.dark` and `visuals.light` assign six neutral roles: `canvas` for the background, `surface` for base or recessed panels, `raised` for foreground panels and controls, `primary` for main glyphs and focal marks, `secondary` for supporting glyphs, bars, and abstract content, and `divider` for thin boundaries. The scene maps elements by hierarchy rather than fixing one role to every instance of an object type. See the [role table](visual-language.md#assign-neutral-colors-by-role). Values are fixed per role within the captured theme policy; do not derive a separate palette for each note. Updating the toolkit does not overwrite existing project colors or release snapshots. To adopt new defaults in an existing project, edit `releasekit/config.yaml`; use `image plan --sync-config` to apply that project policy to a draft.
|
|
18
18
|
|
|
19
19
|
`visuals.accent` makes a project color available for generated images; it does not require that color in every image. In the shared scene's `composition`, record no accent or the exact colored element and its supported state, action, or information meaning. Keep that assignment in `preserve`; neutral scenes remain neutral in both themes.
|
|
20
20
|
|
|
@@ -10,7 +10,7 @@ This generation policy does not require inventing a second appearance for suppli
|
|
|
10
10
|
|
|
11
11
|
Policy is captured in each release when it is prepared. Editing the project default affects new releases. To apply the current project policy to an existing draft, run `releasekit image plan <version> --sync-config`. Previously selected files are retained; themes disabled by the new policy are not exported. Ready releases must be reopened before their policy changes.
|
|
12
12
|
|
|
13
|
-
For a requested palette correction, change the relevant saved theme roles at the requested project or release scope before generating replacements. A project change belongs in `releasekit/config.yaml`; sync that policy into the target draft with `releasekit image plan <version> --sync-config`. A release-only change belongs in that draft's captured visual policy. Do not work around a saved dark glyph value by adding a one-off lighter color to a prompt. Regenerate and review the affected requested variants; preserve unchanged accepted counterparts. Palette changes are authoring policy changes, not a global filter over supplied images.
|
|
13
|
+
For a requested palette correction, change the relevant saved theme roles at the requested project or release scope before generating replacements. A project change belongs in `releasekit/config.yaml`; sync that policy into the target draft with `releasekit image plan <version> --sync-config`. A release-only change belongs in that draft's captured visual policy. Do not work around a saved dark glyph value by adding a one-off lighter color to a prompt. Regenerate and review the affected requested variants; preserve unchanged accepted counterparts. A light-only palette correction does not request dark regeneration. If the shared geometry needs correction, update the scene and review both affected variants, keeping each theme's palette. Palette changes are authoring policy changes, not a global filter over supplied images.
|
|
14
14
|
|
|
15
15
|
## Coverage and repeat runs
|
|
16
16
|
|
|
@@ -24,13 +24,13 @@ An existing image reported as stale or invalid is unresolved, even though its fi
|
|
|
24
24
|
|
|
25
25
|
## One scene, two presentation treatments
|
|
26
26
|
|
|
27
|
-
Both outputs share the same scene brief. Lock subject identity, geometry, object count, positions, scale, crop, camera, UI topology, action state, chart values, and any allowed literal labels. Change presentation
|
|
27
|
+
Both outputs share the same scene brief. Lock subject identity, geometry, object count, positions, scale, crop, camera, UI topology, action state, chart values, and any allowed literal labels. Change neutral presentation values and necessary surface separation within the selected recipe. Match geometry, not apparent brightness or contrast: use each theme's independent treatment. Preserve meaningful status colors and natural photographic or material colors. Lock the absence of accent for a neutral scene; when accent is justified, keep it on the same meaningful elements in both variants. A theme change does not introduce an accent.
|
|
28
28
|
|
|
29
29
|
| Role | Dark treatment | Light treatment |
|
|
30
30
|
| --- | --- | --- |
|
|
31
31
|
| Canvas | Quiet charcoal | Quiet near-white |
|
|
32
|
-
| Interface surface |
|
|
33
|
-
| Primary neutral symbol |
|
|
32
|
+
| Interface surface | Distinguish base and foreground charcoal layers | Separate white and pale-gray values |
|
|
33
|
+
| Primary neutral symbol | Compact mid-light neutral; no oversized bright glyph | Medium gray from `primary`, without default charcoal fills |
|
|
34
34
|
| Secondary detail | Subdued, still distinguishable | Lighter `secondary` for incidental bars and supporting detail |
|
|
35
35
|
| Surface separation | Preserve only feature-relevant layers | Use surface roles and thin dividers; do not invent shadows |
|
|
36
36
|
| Optional interaction or status color | Preserve assignment and semantic hue, or keep absent | Preserve assignment and semantic hue, or keep absent |
|
|
@@ -45,13 +45,13 @@ Do not invert pixels or shift brightness globally. A black lens remains a black
|
|
|
45
45
|
3. Generate one requested variant using its prompt. Select and inspect the result.
|
|
46
46
|
4. Import it. Re-run the image plan; a valid approved counterpart is now offered as a composition reference for the other theme.
|
|
47
47
|
5. When the available tool supports image references or edits, use the counterpart for a constrained theme edit. Otherwise repeat the exact scene contract and inspect for layout drift. Never claim pixel-identical geometry from independent stochastic generations.
|
|
48
|
-
6.
|
|
48
|
+
6. Review dark images together and light images together at equal display widths, then compare the pair. Check glyph ink size, supporting detail, and charcoal layer separation in dark; check medium-gray neutral symbols and soft supporting values in light. Check equivalent elements against their configured roles without forcing equal apparent contrast between themes. Both files should have the same pixel dimensions. Verify pose, crop, UI state, values, and semantic colors by sight, then import the selected counterpart.
|
|
49
49
|
|
|
50
50
|
Use one file per theme, not a split canvas or a two-panel comparison image. Keep the current selection until a reviewed replacement is imported into the same slot. Do not restart the entire release when one small defect can be corrected locally.
|
|
51
51
|
|
|
52
52
|
## Replace or regenerate an image
|
|
53
53
|
|
|
54
|
-
Treat replacement and regeneration as an edit to the existing release, note ID, and affected theme. Reopen a ready release as a draft before editing it. Reuse its scene brief and current assets as needed for the requested correction. A request to regenerate an image still needs work even if the unchanged asset is reported as current by the plan; report the requested replacement as pending until it has been generated, reviewed, and imported.
|
|
54
|
+
Treat replacement and regeneration as an edit to the existing release, note ID, and affected theme. A requested accent-use correction updates the shared scene's color assignment; regenerate the affected variants while preserving unrelated geometry and theme palettes. Reopen a ready release as a draft before editing it. Reuse its scene brief and current assets as needed for the requested correction. A request to regenerate an image still needs work even if the unchanged asset is reported as current by the plan; report the requested replacement as pending until it has been generated, reviewed, and imported.
|
|
55
55
|
|
|
56
56
|
Keep the existing variant metadata while preparing the candidate, then run `releasekit image import <version> <note> --theme <theme> --file <selected-file>` for the same slot. Import validates the candidate and saves the new selection before removing unused managed images for this note, including older imports and obsolete shared/themed files. Reimporting identical bytes reuses the same file. Other selected variants, notes, releases, declared image references, and original source files outside the note's managed assets are preserved. If decoding or saving fails, the previous source and selection remain intact; report the replacement as pending.
|
|
57
57
|
|