# Design exploration

Created 2026-09-30; revised 2026-10-01 for fixed mobile screens. This specification defines the independent exploration. Current implementation and observed acceptance are recorded in `prototypes/design/review.md`.

Current creative iteration, requested on 2026-10-01: generate full-screen mockup images using product/content/style prompts with open composition. The six-direction first round and exact prompts are in `prototypes/design/image-concepts/round-01/`. The HTML exploration below records the initial delivered slice; its existence does not imply the user likes or has selected its visual directions.

## Objective

Explore fourteen substantially different visual styles for the Russian album-promotion quiz. Let the user browse each style on a phone, move through the same sample screens, compare the artwork and interaction treatment, and choose directions for further development.

Use the interface-craft skill at [.agents/skills/interface-craft/SKILL.md](../.agents/skills/interface-craft/SKILL.md). Apply its product brief, visual system, mobile forms, interaction, and rendered-validation guidance. Use the image-craft skill at [.agents/skills/image-craft/SKILL.md](../.agents/skills/image-craft/SKILL.md) automatically for image prompting, generation, editing, and review, including in subagent work. Also follow the imagegen skill and use the built-in image generation tool for artwork, with prompt-writing guidance for concrete, reproducible instructions.

Product constraints are in [AGENTS.md](../AGENTS.md). Author material is in [content_reference.md](content_reference.md). The [technical prototype spec](technical-feasibility-spec.md) defines sharing behavior and provisional compatibility rules, but this design slice does not need its server to run.

## Deliverables

- Fourteen browsable mobile HTML prototypes, each with working sample transitions.
- Six required screens per style, for 84 primary screen views.
- Four accepted generated illustrations per style, for 56 accepted illustrations.
- A Russian comparison gallery linking to every style and its sample screens.
- Six baseline mobile screenshots per style, for 84 primary screenshots.
- Concrete style prompts, concrete content prompts, every final submitted prompt, asset records, revision notes, and a mobile review report.

More generations may be necessary to obtain 56 accepted assets. Count accepted deliverables separately from attempts. Do not reduce the image count by reusing the same four artworks across styles. Intro and personal-result screens may reuse a style's own four assets, avoiding additional required generations.

The exploration tests visual direction, reading, touch controls, and transitions. The gallery is a review tool. It does not imply that fourteen themes will ship in the product.

## Fixed brief and creative freedom

The audience is Russian-speaking album listeners and people invited through Telegram. The main task is to answer quickly, understand a personal result, and want to compare it with another person's result. The tone is cosmic, romantic, dryly humorous, and emotionally recognizable, as established by the author's copy.

There is no established album artwork, palette, or typography constraint for this exploration. Explore widely. Keep every style connected to both space and human connection, rather than applying an unrelated visual theme to the questions.

All prototype and gallery copy must be Russian, including style names, buttons, specimen labels, errors, status text, explanatory notes, and alternative text. Keep UI text as HTML so it remains selectable, accessible, and editable. Generated artwork contains no labels or interface screenshots.

Preserve the same underlying story, questions, answers, personal result, and two compatibility pairs across all styles. Distinctness should come from composition, typography, image medium, image placement, answer presentation, fixed detail steps, and motion. Do not invent different quiz logic to make styles seem different.

The six-screen comparison is a fixed sample journey. Do not add names, registration, or a lengthy onboarding flow. Names remain a later product possibility.

## Shared sample content

Store the sample content once and reuse it across every style. Mark the gallery and sample result views with concise Russian fixture labeling, such as `Дизайн-прототип` and `Пример результата`. Keep provenance in the shared fixture data so author copy and invented compatibility copy are distinguishable.

| Screen ID | Content and required action |
| --- | --- |
| `intro` | Author's opening experiment invitation; `Пройти диагностику` |
| `question-signal` | First author question, `СИГНАЛ`, all four original options; choose one answer, then `Далее` |
| `question-distance` | Second author question, `РАССТОЯНИЕ`, all four original options; choose one answer, then `Узнать результат` |
| `personal-result` | Author's `ДАЛЕКИЙ СВЕТ` short result, with expanded text available; a sharing action and a way to inspect compatibility examples |
| `compatibility-orbit` | Visitor `ДАЛЕКИЙ СВЕТ`, sender `ЗЕМНОЙ ОБЪЕКТ`; fixture category `На одной орбите` |
| `compatibility-interference` | Visitor `ДАЛЕКИЙ СВЕТ`, sender `РЕЖИМ НЕВИДИМКИ`; fixture category `Сигналы с помехами` |

The intro contains these source sentences:

> Вы были выбраны для участия в эксперименте по изучению человеческих сигналов.
>
> Мы не знаем, почему именно вы.
>
> Возможно, произошла ошибка.

The first question uses the source message `Нам надо поговорить` and these options:

- Ответить: «что случилось?»
- Перечитывать сообщение 17 раз
- Делать вид, что нет интернета
- Мысленно взорваться

The second question describes a distance of 550 light-years and permits one message. Its options are:

- Я скучаю
- Когда вернешься?
- А где у нас гречка?
- Отменить отправку

The personal-result screen shows a short author summary. `Подробнее` opens additional fixed screens with Next/Back controls; all metadata, expanded paragraphs and the recommendation remain reachable in order. The user approved this treatment on 2026-10-01. Include the complete reading sequence in mobile review.

Use the two fixture compatibility titles and descriptions in the technical spec verbatim. Display both outcome labels clearly, with `Ваш сигнал` and `Сигнал человека, который отправил ссылку`. Use `Пример совместимости` where needed. Compatibility is category-based; the design must not introduce an invented percentage or a meter that suggests a measured value.

Selected answers in the design prototype are preserved when moving back. The result remains the fixed shared `ДАЛЕКИЙ СВЕТ` specimen so all fourteen styles can be compared fairly. Make the fixture nature clear. Actual scoring belongs to the technical slice.

## Interaction contract

Every style implements the same usable sample route:

`intro → question-signal → question-distance → personal-result`

From the personal result, the reviewer can open either compatibility specimen and return. Provide Russian-labeled screen navigation for review without pretending a real recipient has completed the quiz.

- Answer options are semantic, accessible single-choice controls. Selected state uses more than color alone.
- Advancing without an answer shows a brief Russian instruction. Moving back retains the selection.
- Main actions are reachable by touch and keyboard. Avoid hover-only details, drag-only answers, or hidden gesture navigation.
- Expanded result text uses additional fixed steps, with working Next/Back and a return to the short result.
- Restart and return-to-gallery actions work. Deep links to all six screens work for screenshots and review.
- Sharing controls explain that they are previews when backend behavior is absent. A `Как будет выглядеть ссылка` control may open a local Russian preview specimen; it must not invent a live invitation or native sharing success.
- A real share action may be added only if it has a valid specimen URL and clearly communicates its design-prototype purpose. Backend integration is unnecessary for accepting this slice.

Each style includes one small, purposeful motion example, such as selection feedback or a screen transition. Respect reduced motion and keep the same meaning available without animation. Do not generate animated raster assets as an additional requirement.

Music is outside this exploration. A sound-control visual may explain its temporary unavailability if included, but it must not appear to play audio. The theatrical analysis screen is a later integration screen; the six required specimens do not need an additional waiting step.

## Fourteen starting directions

These are concrete starting hypotheses rather than a predetermined winner. A direction may be refined during execution if the change is documented and keeps the fourteen alternatives distinct.

| ID and Russian gallery name | Visual thesis and composition | Type, palette, and interaction treatment |
| --- | --- | --- |
| `01-observatory` / Тихая обсерватория | A precise observation panel treats feelings as signals. A complete landscape illustration sits in an observation frame beside the heading; questions and response rows share the same fixed viewport. | Clear sans body, compact technical metadata, midnight blue, pale cyan, soft white. A short focus-ring movement confirms selection. |
| `02-phosphor` / Ночной терминал | A spare receiver log makes the author's diagnostics feel immediate. Text drives the screen, with a shallow raster-art strip and full-width answer rows. | Readable Cyrillic monospace roles, near-black, phosphor green, warm pale text. A brief cursor or line reveal marks transitions. |
| `03-cinema` / Между звёздами | A cinematic still creates distance and intimacy. A large immersive image leads into a quiet opaque reading area and a bottom action. | Expressive display serif with plain sans controls, ink violet, deep blue, restrained red light. A brief fade connects scenes. |
| `04-collage` / Космические письма | Cut paper and postcard fragments make the test feel like a personal message. An offset image, generous margins, and clearly separated answer slips form the page. | Strong editorial headings and plain body text, warm paper, coral, cyan, charcoal. A paper-edge shift confirms a tap. |
| `05-launch-poster` / Запуск чувств | A bold printed poster gives each question a memorable headline. Use a large compact title, geometric artwork, and a contrasting block of answers. | Heavy Cyrillic display type with a simple body face, vermilion, midnight blue, ivory. A crisp slide or wipe changes screens. |
| `06-field-notes` / Атлас близости | An illustrated astronomy notebook gives room for the longer descriptions. Images appear as lower background specimens behind a bounded reading area. | Readable book serif body, sans controls, cream, ink blue, dusty blue. Detail steps have a brief transition. |
| `07-soft-gravity` / Мягкая гравитация | Rounded miniature space objects make emotional distance feel approachable. A floating central sculpture and spacious controls form a gentle composition. | Rounded but readable sans roles, pearl, peach, lilac, dark plum text. A small settling motion confirms an answer. |
| `08-twilight` / Свет после заката | Textured painting emphasizes the lingering light in the author's romance. A wide painted scene anchors an editorial page with substantial result text. | Literary display serif with plain sans controls, dusk blue, rust, warm white. A slow but brief light change precedes a stable reading state. |
| `09-spectrum` / Частота света | One bright line carries the metaphor of connection. Use abundant negative space, small artwork, large precise text, and unboxed answer rows. | Rational sans roles, near-black, white, electric teal. A short luminous connection marks progression, with no continuous attention loop. |
| `10-starlight-textile` / Созвездие нитей | Tactile fabric makes a cosmic signal feel human and intimate. Place stitched artwork around solid answer controls within the same fixed screen. | Friendly sans headings and plain body text, midnight fabric, lilac, warm yellow, cream. A slight stitch-trace reveal marks a transition. |
| `11-pink-noir` / Розовый космос | Matte black sculpture and soft pink light make the emotional signal intimate. Use a dark immersive scene and a quiet opaque reading area. | Elegant serif titles, plain sans answers, velvet black, blush, restrained fuchsia. Soft brief light reveal. |
| `12-pink-pulse` / Розовый импульс | Hard pink ink and black paper turn the signal into a graphic music poster. Use strong type, angular illustration framing, and firm answer rows. | Heavy sans titles, black, hot pink, pale pink text. Crisp selection-line movement. |
| `13-ultraviolet` / Ультрафиолетовая близость | Translucent violet forms and pink paths glow in black space, with blue light in the shadows. Use a clean observation frame with generous dark reading space. | Clear sans roles, black, violet, magenta, blue accents. Brief optical connection on transition. |
| `14-blue-hour` / Синий час | Blue-dominant painterly space carries violet shadows and pink distant light. Use an editorial landscape and readable warm-pink copy accents. | Literary serif titles, plain sans controls, deep blue-black, violet, soft pink. Short scene fade. |

Do not implement all fourteen as the same rounded-card stack with palette changes. Keep the shared flow, but give each direction its own image-to-text relationship, answer layout, result reading order, and compatibility composition. Style conventions may not reduce mobile legibility.

Use fonts with working Cyrillic glyphs. Start with appropriate system or locally available fonts, then document any chosen font's source and license before bundling it. Do not rasterize text or depend on missing font files to achieve the style.

## Prompt preparation order

Before generating any artwork:

1. Write and version the fourteen concrete style prompts below. Refine them to match the implementation's compact visual contract.
2. Write and version the four concrete content prompts below. Keep subjects and the compatibility meanings shared across all styles.
3. Combine one style prompt and one content prompt with the common asset instructions. Save that complete prompt before submitting it.
4. Confirm that the HTML image slot, intended crop, palette, and generation prompt agree.

Style prompts define medium, material, palette, lighting, and visual density. Content prompts define the actual objects, their relationships, and the scene. Neither may rely on an instruction such as "make it tasteful" to replace concrete choices.

Prompt text is internal documentation and may use English. Any text that appears to participants remains Russian.

## Concrete style prompts

These blocks are reusable art-direction instructions. They deliberately contain no scene subject; each is combined with a concrete content prompt.

### 01-observatory

```text
Render the supplied scene as a precision astronomical observation plate. Use fine pale-cyan engraved lines, sparse crosshatching, subtle midnight-blue paper grain, and small soft-white light accents. Suggested colors: #071923, #90CED8, #E7F2ED. Keep silhouettes geometrically clear, edges crisp, and illumination restrained. Use visible depth through line density, not glossy surfaces. The artwork should feel like a quiet instrument observing a real signal. Preserve open background around the main forms. Render no labels, numbers, lettering, interface controls, or watermark.
```

### 02-phosphor

```text
Render the supplied scene as monochrome phosphor raster artwork on nearly black glass. Build recognizable objects from coarse luminous pixels and thin green contours, with slight bloom and faint scan-line texture. Suggested colors: #050A06, #72EB86, #D3EFD5. Keep the central silhouettes simple enough to read at a small mobile size. Use darker regions to separate objects rather than adding decorative symbols. The image is receiver artwork, not a screenshot of a terminal. Render no text, ASCII lettering, numbers, interface controls, or watermark.
```

### 03-cinema

```text
Render the supplied scene as a cinematic photographic space still with physically textured surfaces, believable soft shadows, deep blue-black space, and one restrained warm red or ivory light. Suggested colors: #101021, #332B53, #D35465, #E9D7C3. Use a wide, quiet composition with a clear focal relationship and distant haze. Favor intimate scale and atmospheric separation over explosions or busy star fields. Keep grain subtle and preserve dark detail. Render no text, labels, logos, interface elements, or watermark.
```

### 04-collage

```text
Render the supplied scene as a handmade cut-paper collage on warm off-white stock. Construct the objects from torn charcoal paper, cyan translucent paper, and coral shapes, with visible fibers and gentle real contact shadows. Suggested colors: #F2E8D5, #292A2E, #F06B64, #69BDCD. Use a slightly offset editorial arrangement and broad unoccupied areas. Show layers and uneven paper edges without burying the scene in scraps. Keep the two-way connection legible through shape. Render no printed text, letters, stamps with words, interface controls, or watermark.
```

### 05-launch-poster

```text
Render the supplied scene as a bold three-color screen-printed space illustration. Use large flat geometric forms, confident silhouettes, limited halftone shadows, and lightly imperfect ink registration. Suggested colors: #E34D3E, #17253C, #F3E6CB. Make the main scene readable from across a phone screen. Use directional arcs and generous negative space, with sharp transitions between ink colors. Keep the composition poster-like but omit all poster typography. Render no text, numerals, slogans, national symbols, logos, interface controls, or watermark.
```

### 06-field-notes

```text
Render the supplied scene as a naturalist's astronomical specimen illustration on cream paper. Use dark ink outlines, fine stippling, delicate blue-gray watercolor washes, and visible but quiet paper texture. Suggested colors: #F3ECDD, #223B50, #829FB3, #B7AA91. Give each object a clear contour and a modest sense of volume. Keep the scene calm, carefully observed, and spacious. Any orbit marks are plain visual lines rather than labeled diagrams. Render no handwriting, labels, numbers, captions, interface controls, or watermark.
```

### 07-soft-gravity

```text
Render the supplied scene as a small handcrafted clay sculpture suspended in a softly lit studio-like cosmos. Use matte rounded forms, slight clay imperfections, pearl backgrounds, peach highlights, and lilac shadows. Suggested colors: #EEE8F4, #E8AA98, #AFA0D8, #443450. Keep object silhouettes distinct and avoid plastic gloss. Light the scene from a broad soft source and give it gentle depth through overlapping forms and contact shadows. Preserve generous empty space. Render no faces unless required by the scene, no text, interface controls, logos, or watermark.
```

### 08-twilight

```text
Render the supplied scene as a quiet oil painting of space at twilight. Use visible short brush marks, layered dusk-blue shadows, restrained rust accents, and luminous warm-white edges. Suggested colors: #192C48, #6F7B99, #A86047, #E8DECD. Preserve the supplied objects and their relationship through strong silhouettes before adding painterly texture. Let light linger around the connection while the surrounding space stays still. Avoid crowded celestial decoration. Render no text, labels, signatures, interface elements, or watermark.
```

### 09-spectrum

```text
Render the supplied scene as a minimal optical-light composition in near-black space. Reduce objects to a few precise translucent surfaces and readable silhouettes. Use one luminous teal signal with a narrow white core, restrained spectral dispersion, and large areas of clean dark background. Suggested colors: #060B0E, #F2F7F6, #52D7CF. Avoid chrome ornament, fog clouds, broad neon gradients, and busy stars. Show the connection through the path and intensity of light. Render no text, numbers, interface controls, logos, or watermark.
```

### 10-starlight-textile

```text
Render the supplied scene as a carefully made fabric illustration. Form planets, receivers, and signal paths from layered felt, stitched thread, and a midnight-blue woven backing. Suggested colors: #17213A, #AA94C8, #E5C56C, #EEE3D1. Show tactile fibers, small seams, and gentle shadows while keeping the main silhouettes uncluttered. Use thread paths to express connection and interruptions. Keep the scene intimate and handmade rather than toy-like. Render no sewn lettering, labels, buttons resembling UI, logos, or watermark.
```

### 11-pink-noir

```text
Render the supplied scene as matte sculptural objects in velvet-black space, illuminated by a soft blush-pink source and one restrained fuchsia signal. Suggested colors: #080509, #171018, #F3A6C5, #D52C78. Use smooth charcoal ceramic forms, gentle pink edge light, soft grain, and believable shadow depth. Keep the composition intimate and uncluttered; black occupies most of the background. Preserve both bodies and every signal relationship in the scene. Keep complete silhouettes within the landscape frame. Render no faces, flowers, extra objects, text, labels, logos, controls, or watermark.
```

### 12-pink-pulse

```text
Render the supplied scene as a high-contrast black-and-hot-pink music-print illustration. Suggested colors: #070507, #EE3D93, #F8BDD8. Use flat black silhouettes, bold pink contours, angular cut shapes, and a small amount of pink halftone grain. Black remains the dominant negative space. Make signal paths graphic and immediately readable, while retaining the scene's exact object count. Keep this direction sharp and printed rather than glossy, photographic, or soft sculptural. Render no text, letters, numbers, slogans, heart icons, controls, logos, or watermark.
```

### 13-ultraviolet

```text
Render the supplied scene as translucent optical forms suspended in black space, with violet as the main body color, a pink signal, and blue illumination in the shadows. Suggested colors: #080712, #783DF2, #EB6AAE, #3479DE. Use frosted-glass surfaces, crisp complete silhouettes, restrained refraction, and thin luminous edges. Keep the image dark enough that violet, pink, and blue remain individually recognizable rather than blending into one gradient. The signal path expresses the relationship between objects. Render no additional planets, text, numerical scales, logos, controls, or watermark.
```

### 14-blue-hour

```text
Render the supplied scene as a blue-dominant gouache painting of quiet space. Suggested colors: #080D20, #234C9C, #65489E, #E18EBB. Use broad matte blue brush marks, black negative space, violet object shadows, and one soft pink source of light or signal. Make the bodies solid and complete, with readable separation at a small mobile size. Keep the palette visibly blue-led while retaining pink and violet accents. Avoid fog that hides a required station or interruption. Render no extra bodies, handwriting, labels, numbers, controls, signatures, logos, or watermark.
```

## Concrete content prompts

These scene instructions stay fixed across the fourteen directions. Their shared subjects make the illustration comparison meaningful.

### question-signal

```text
Scene: one small orbital message receiver floats in quiet space. A single incoming light pulse has just reached its open circular sensor, with three faint curved signal rings around the arrival point. Show the receiver and the incoming signal clearly as the only main objects. The receiver has no readable display. Frame it at medium distance, with open space surrounding the pulse. This illustrates receiving an emotionally important message without suggesting which answer is correct. Do not depict an explosion, a person, a heart icon, or multiple competing messages.
```

### question-distance

```text
Scene: two small observation stations sit on the edges of two distant planets. One small point of transmitted light travels along a long curved route through mostly empty space between them. Both stations remain visible and separated; the light is still in transit. Give the route and the distance room to read at a mobile image size. This illustrates sending one message across 550 light-years without choosing the content of that message. Do not add readable displays, numbers, a bridge, a spacecraft, a person, or heart symbols.
```

### compatibility-orbit

```text
Scene: one distant warm star and one small Earth-like planet are separate but connected by a single steady luminous arc. Show both complete silhouettes, with the planet grounded by its solid form and the star giving off restrained light. Keep the arc continuous and gentle, with open space between the two bodies. This represents the pairing of Distant Light and Earth Object finding a shared orbit. Do not merge the bodies, add extra planets, or imply a numerical compatibility value.
```

### compatibility-interference

```text
Scene: one distant warm star sends a thin light path toward one dark orbital object that is partly hidden in an eclipse-like shadow. The path has two clear interruptions before reaching the object. Show enough of the dark object's silhouette to recognize that it is present rather than absent. Keep both bodies at comparable visual importance so neither is presented as a villain. This represents Distant Light and Invisible Mode having trouble reaching each other. Do not add an explosion, a broken heart, extra planets, or a numerical compatibility value.
```

## Common asset instructions and composition

For every submission, put these instructions first, followed by the chosen style instructions and then the scene instructions in clearly delimited blocks:

```text
Generate one finished raster illustration for a mobile Russian music-album quiz. The illustration is artwork placed inside a real HTML interface, not a screenshot or a complete website mockup. Apply the style instructions to the scene instructions while preserving all specified subjects and relationships.

Use a landscape composition close to 3:2. Keep the main objects within the central 70 percent of the image so modest responsive cropping preserves their relationship. Maintain clear silhouettes at a displayed width of about 320 CSS pixels. Keep the artwork fully opaque. Render no text, letters, labels, numerical scales, controls, logos, signatures, or watermark. Public Russian text will be added as HTML outside the image.

Return one coherent illustration. If the style and scene conflict, preserve the scene's objects and relationship, then simplify secondary texture. Add no unrelated subjects.

<style>
[Complete chosen style prompt]
</style>

<scene>
[Complete chosen content prompt]
</scene>
```

The bracketed markers are a preparation template only. Replace them with the full prompt text before generation and persist the expanded string that the tool receives. Do not submit unresolved placeholders.

Ask for composition and medium through the built-in tool's prompt. Do not invent unsupported size, quality, output-directory, or seed parameters. Record actual output dimensions rather than claiming the tool guaranteed an exact size.

The planned accepted asset filenames for every style are:

| Scene | Relative filename inside the style directory | Intended use |
| --- | --- | --- |
| question-signal | `assets/question-signal-v1.png` | First question; possible intro reuse |
| question-distance | `assets/question-distance-v1.png` | Second question; possible personal-result reuse |
| compatibility-orbit | `assets/compatibility-orbit-v1.png` | Shared-orbit comparison |
| compatibility-interference | `assets/compatibility-interference-v1.png` | Interrupted-signal comparison |

Keep originals in their actual returned format; change extensions in the records if necessary. Use versioned siblings for revisions instead of overwriting originals. Save accepted project assets in the workspace, even if generation initially returns a file in the Codex image directory.

Use the built-in image generation tool by default, with one call per distinct asset. The word "batch" does not authorize an API or CLI fallback. If the built-in path is unavailable, report that concrete limitation before changing generation methods. Do not replace required raster artwork with CSS shapes or reuse another style's artwork to claim completion.

## Documentation and progress

Keep the following records with the implemented exploration:

| File | Contents |
| --- | --- |
| `README.md` | How to run and browse the gallery, fixture scope, current completion counts |
| `shared/sample-content.json` or equivalent | Source-linked Russian copy, specimen outcome pairs, explicit provisional fields |
| `styles/{styleId}/design.md` | One-sentence thesis; composition, type roles, color roles, spacing, image slots, control states, motion, and rationale |
| `styles/{styleId}/prompts/style-v1.txt` | Exact style prompt and later versions |
| `shared/prompts/{sceneId}-v1.txt` | Exact concrete content prompt and later versions |
| `styles/{styleId}/prompts/{sceneId}-v1.txt` | Fully expanded prompt submitted for that asset |
| `asset-manifest.json` | Every accepted asset and generation attempt, status, paths, prompt versions, tool, actual dimensions, and revision notes |
| `review.md` | Mobile checks, defects, fixes, unresolved limitations, and observations for each style |
| `screenshots/{styleId}/{screenId}-390.png` | Baseline captures of each required screen |

An asset record includes style ID, scene ID, attempt ID, status, exact prompt path, style/content prompt versions, tool used, returned source path, workspace destination, actual dimensions, timestamp, and brief visual review. If a previous image was a reference or edit target, record its path and role. Only accepted assets count toward 56.

A generation revision states one specific reason, such as an unreadable signal path or a mismatched paper palette. Preserve the subject and relationship while changing that targeted detail. Do not repeatedly expand prompts without recording what the change is intended to fix.

Any generation orchestrator or other long-running script must report progress such as `12/56 accepted; current 04-collage/question-distance; attempt 2`. Persist completed, pending, and failed items after every result so a restart resumes unfinished work. Keep completion counts for styles, accepted images, and screenshots separate. Do not expose image base64 payloads in progress logs.

## Implementation and review sequence

1. Create the shared six-screen fixture and gallery skeleton, then record the fourteen compact design contracts.
2. Finalize all fourteen style prompts and all four content prompts before the first generation call.
3. Generate and inspect each style's four assets. Save prompts, outputs, attempts, and acceptance findings as the work progresses.
4. Build each style's HTML/CSS and sample transitions, incorporating its own accepted artwork. Share flow state and content where useful, without forcing one common layout.
5. Review every style on the same baseline phone viewport and fix mobile defects before polishing optional desktop views.
6. Capture screenshots and finish the comparison gallery, progress manifest, and review notes.

Keep implementation in `prototypes/design/` or an equivalent separate directory. A suggested structure is `index.html`, `shared/`, `styles/{styleId}/`, `screenshots/`, `asset-manifest.json`, and `review.md`. The design gallery should run with a simple static local server and have no dependency on the technical prototype's database.

## Mobile acceptance

User correction on2026-10-01: every screen in the mobile quiz flow must fit the viewport with no scrolling. This supersedes the first scrolling prototype baseline. Keep each question, all four options, and the primary action visible together. Compose artwork behind or around the content; a tall image above the question is unsuitable. Intro, personal result, both compatibility specimens, preview dialog, and additional result-detail steps follow the same constraint. The comparison gallery may scroll because it is a separate review tool.

Test portrait viewports320×568,375×667,390×844 and430×932. Account for safe areas and dynamic viewport height. No document or inner panel scrolling is allowed in the flow. Reject clipping or unreachable content even if `overflow:hidden` makes the document appear fixed. Long author result text remains accessible through the approved additional fixed steps. Keep public text Russian and controls comfortably tappable. Test increased text/zoom and record conflicts separately. Fit-aware detail pagination must preserve source words. Enlarged question text can conflict with four simultaneously visible options at the smallest size; report this limitation rather than hide excess text or claim a pass.

Use a 390 by 844 CSS pixel portrait viewport as the capture baseline, and review every required screen at all four sizes above. All design decisions and behavioral checks begin in the mobile layout. Desktop is a supplementary reflow check.

For each of the fourteen styles:

- Open all six screens and follow the main sample flow by touch or pointer. Choose answers, go back, retain selection, reach the result, and open both compatibility views.
- Complete the sample flow using a keyboard, with visible focus and sensible order.
- Inspect realistic long Russian copy, including every fixed personal-result detail step. Fix clipping, horizontal overflow, unreadable captions, and controls covered by fixed actions.
- Confirm Cyrillic glyphs render correctly and that type size, line spacing, and contrast support reading on a phone.
- Use a 44 CSS pixel touch target as the design starting point. Keep selection, focus, error, and disabled states distinguishable beyond color.
- Test reduced motion and 200 percent enlargement. Distinguish root-font probes from CSS scale and actual phone text settings; pixel-based type may ignore root-font changes. Record enlargement failures explicitly. Static states must carry the same meaning as animated states.
- Inspect each generated image in the actual layout for crop, palette consistency, focal clarity, and accidental baked-in text.
- Confirm each compatibility view distinguishes the visitor's outcome, the sender's outcome, and the provisional pair description.
- Capture the six baseline screenshots only after critical mobile defects are fixed.

Automated navigation and overflow checks can support this work. Inspect rendered outputs as well; source code and thumbnails are insufficient. Do not claim accessibility conformance, real-phone native sharing, or human usability research based solely on automated checks.

## Comparison gallery and evaluation

The gallery is usable on a phone. Show the Russian style name, a representative mobile screenshot, a short Russian statement of the direction, and links to open the prototype or an individual specimen. Provide a screen selector so the reviewer can compare the same question or compatibility example across styles.

Show progress or missing-artwork states honestly while the exploration is incomplete. A style marked complete has its six usable screens, four accepted images, six baseline screenshots, prompt records, and mobile review findings.

Compare the styles on these questions rather than assigning fabricated numerical scores:

| Criterion | Review question |
| --- | --- |
| Quiz clarity | Can a person identify the question, choose one response, and find the next action immediately? |
| Russian readability | Does the long content remain comfortable to read on a narrow phone? |
| Album identity | Does the direction connect space and romance to the author's diagnostic humor? |
| Artwork consistency | Do the four images belong to one style while expressing the four different scenes? |
| Compatibility clarity | Can a person tell whose outcome is whose and what the pairing means? |
| Distinctness | Does the style change composition, type, art medium, and interaction treatment rather than only colors? |
| Practicality | Can its motion, image weight, and layout plausibly support the eventual mobile product? |

Report observed interface friction and design judgment separately from user preference. The user chooses directions after browsing; a model's favorite is not a selected production style.

Human usability sessions are a later evaluation unless arranged during execution. If conducted, use the mobile prototypes and record the tasks, participants, observations, and consented findings. Do not invent participants or research results.

## Completion criteria

The slice is complete when all fourteen distinct styles are browsable, all 56 accepted illustrations are saved and referenced, all 84 primary mobile screenshots exist, prompt provenance is complete, required interactions work, and the mobile review report names actual checks and unresolved limitations.

Music integration, final album links, final compatibility writing, the production quiz, and production deployment remain later work. A selected style can be integrated with the technical slice after the user evaluates the exploration.