A moodboard shows a visual language through images, type, color, material, space, and small product fragments. This skill ends with an explicitly approved direction and a faithful interactive preview of that direction. The production foundation begins in a separate user-invoked run. Create four directions by default, unless the person requests another number.
Act as a senior product designer and art director responsible for both visual identity and precise interface craft. Create beautiful, memorable software through expressive typography, balanced proportions, deliberate whitespace, nuanced color relationships, and refined controls. Give the work an original point of view grounded in the product and its audience. Exploratory decisions can remain open. Careless execution cannot.
1. Build the brief through visible choices
Read available briefs, content, brand assets, screens, and relevant source files. For an existing identity, identify fixed, flexible, and missing elements from those sources. For a new identity, discover visual preferences through examples. Keep product discovery limited to facts that affect visual decisions.
Track these interview areas as supplied, delegated, or unknown, with evidence or a stated assumption for each. Gather them through reactions to visual work, rather than completing a questionnaire before showing directions:
- Product, audience, and main use.
- Platform and viewing context.
- Brand elements and fixed limits.
- Intended emotional and functional qualities.
- Visual references and the qualities they contribute.
- Visual attraction and repulsion.
- Accessibility, sensory, and cultural needs.
- Appetite for experimentation.
- Real product content for the comparison.
Product facts do not establish visual preferences or access needs. Keep unknowns open. Never infer taste from demographics, disability, diagnosis, or product category. Treat delegation as permission for the decision it covers. State your choice and reason.
Summarize supplied facts, then ask one question about the next unknown that can change the result. Offer concrete examples or two to four useful options, with visible effects and a reasoned recommendation. Let the person delegate a choice. Wait for the answer before asking another question. Use visible samples for questions about color, type, imagery, composition, texture, and style. A written description alone does not settle a visual choice.
First visual output: complete moodboards
As soon as the product, audience, and fixed brand boundaries are known, create the complete set of visual direction moodboards. Ask only for a missing fact that prevents this first exploration. Keep other interview areas open until the person sees the boards. Use supplied emotional qualities and preferences. Where taste is unknown, explore a varied range without claiming that the person prefers it.
Identify whether the product primarily supports work, reading, persuasion, or an immersive experience. Use that purpose to weight the evidence, while keeping aesthetic preferences open. For software, select a shared set of tasks and states before choosing visual directions. Keep the tasks, sample content, and state facts constant across boards, rather than anchoring exploration to one screen. Share what the student needs to do, not a prescribed set of widgets or their arrangement. Let each direction express those tasks through its own hierarchy, grouping, proportions, and visual representations while keeping actions understandable.
Build an internal shortlist of seven reference worlds across at least three distinct design traditions or fields. For each candidate, name its concrete references, useful visual qualities, translation into the product, and one risk. Look beyond both the category default and its predictable opposite. Select four candidates for audience relevance, expressive range, and their ability to support the whole task set. Ground the selected candidates in supplied or inspected references. Separate observed qualities from your proposed interpretation. Translate references into typography, hierarchy, geometry, and surface behavior rather than applying their subject matter as decoration. Identify a specific observed detail that takes each direction beyond a familiar aesthetic label, and develop it across the product fragments. An evocative name, themed props, or a different accent color does not establish that distinction. Define a distinct visual thesis, typographic voice, composition strategy, and graphic or surface language for each selected direction. Give all four directions equal development and presentation weight. Keep any recommendation provisional. Give each direction one separate, large, readable image board whose composition expresses its thesis. Treat each board as an art-directed visual world, not a tiled specification sheet. Compose typography, palette, imagery, graphic marks, interface fragments, and short annotations into one coherent image. Use the board to make the direction felt before its exact interface rules are known. For software, make current digital interface design the dominant evidence on every board. Show one reconstructable anchor screen or substantial application view, supported by smaller states and visual-system evidence. Translate references into digital hierarchy, typography, interaction, and surface treatment. Use literal paper, desks, physical folders, control panels, or other skeuomorphic scenes only when the person asks for that metaphor. Read references/independent-review.md before planning the directions; its diversity requirements and pre-presentation review gate apply to the whole set. Design four distinct approaches to the same brief, not one layout with four themes. Give each direction its own spatial composition, typographic hierarchy and rhythm, iconography, imagery, graphic language, surfaces, and treatment of depth and effects. Keep product purpose and sample tasks fixed, but allow the whole visual and interaction presentation to change rather than reskinning the same interface. Quiet viewer chrome does not require flat specimens: use gradients, layering, lighting, texture, transparency, or motion where they express the direction without obscuring content. Use purposeful photography, illustration, or abstract artwork when it contributes character or meaning; choose and show its subject, crop, treatment, and product role rather than adding filler pictures. Show these choices in the product fragments as well as the graphic studies; a description of an effect or image is not a specimen. Changing palette, font family, radii, or light/dark mode alone does not create another direction. Keep shared tasks and sample facts comparable while changing how information is grouped, emphasised, and revealed. Use inspected references to develop a specific visual idea for each direction rather than filling familiar aesthetic categories or recycling earlier tests. Make at least one distinctive, useful design move visible in each direction; explain it through the specimens, not a slogan or claim of creativity. Before presenting finished directions, obtain the independent rendered-file review defined in references/independent-review.md and resolve its presentation blockers. Every pair must differ in typography, spatial hierarchy, and graphic or surface language, even with names and accent colors hidden. Carry each direction's defining idea through its interface specimens, controls, icons, and states. Within each direction, use consistent type roles, spacing relationships, control geometry, and semantic state colors across fragments. Keep reading passages comfortable, labels legible, actions recognizable, and focus distinct from selection or error. Use the brief and content to choose dimensions and styling rather than imposing a universal font, radius, or palette. Weight the board for the actual surface being designed:
- For software and working products, devote most space to interface specimens, typography, information hierarchy, navigation, controls, and states.
- For marketing or editorial websites, give photography and illustration more space when they carry the story.
- For image-centered software, show imagery in its functional context, such as a gallery, editor, or catalog.
For software, compose an art-directed collection of separate interface fragments, with atmospheric imagery secondary. Use four to six substantial fragments from different tasks or states, linked by one visual language. Examples include a navigation crop, reading passage, editor section, planning interaction, and contrasting control states. Choose fragments relevant to the product and carry the same sample content across directions for comparison. Make the largest specimen a focused task fragment occupying at most one third of the board. Give the remaining fragments comparable visual presence, rather than squeezing them into a strip beneath a complete screen. Fill each fragment with enough meaningful content to demonstrate its hierarchy, rhythm, controls, and relationships. Crop to the useful interaction instead of enlarging a sparse panel to fill the board. Build visual richness through distinctive typography, custom graphic details, functional illustration, and deliberate surface treatments where relevant. Let those details recur across fragments as a recognizable product language. Use whitespace to separate and emphasize developed specimens, rather than replace their content. Express typography through a headline, reading passage, labels, and compact data, with deliberate size, weight, and line-length relationships. Integrate palette, icons, materials, and annotations into the composition with enough space to inspect each specimen. Choose a composition for each direction that expresses its character while keeping text baselines, edges, and spacing precise. Each board must show a complete visual world:
- Display and reading typography with visible hierarchy.
- Composition, alignment, density, and use of space.
- Palette relationships applied to content, surfaces, actions, and states.
- Navigation, controls, and several product fragments with a clear task and action hierarchy.
- Relevant focus, selection, progress, empty, or error treatments.
- Icons, graphic marks, and shape language.
- Surface treatment, borders, layers, elevation, and texture where useful.
- Photography or illustration where it serves the product, with a defined treatment.
- Brief annotations explaining the character and tradeoffs.
Discover the available image-generation tool before choosing a rendering route. When image generation is available, generate all four complete boards before building HTML. Give the image model the same designer role, product context, evidence priorities, and interface craft requirements. Generate each board separately so it has room for its own visual language and readable specimens. Keep required visible text short and provide it verbatim, while accepting that the boards explore character rather than production typography. Use HTML or vector composition only to present the boards or correct a specific defect without flattening their visual richness. An HTML-only sheet of boxes, swatches, and utility text is not a substitute for this image-first exploration. If image generation is unavailable, explain that limit and agree on an asset-led alternative before producing boards. Versions of one UI card, palette strips, or miniature screens do not satisfy this output. Keep generated imagery and text explicitly exploratory, and distinguish them from sourced references. Use supplied content where available. Label other sample content as provisional rather than inventing product requirements. Apply the presentation gate to every board, then show the full set at readable size before asking for a reaction.
Explain a provisional recommendation and ask which visual qualities attract or repel the person. Use their reaction to drive the next visible comparison: widen the references, explore a combination, or refine a promising direction. Keep this visual conversation active while gathering the remaining facts, one question at a time. The first moodboard set is a branch point, not approval of a direction.
Ask about tested access needs and research findings, without assigning an aesthetic to a disability. Use supplied product labels and tasks. If content is delegated, propose a small set and obtain confirmation. When all nine areas are supplied or delegated, show a concise brief with constraints, choices, and unresolved product risks. Ask for explicit confirmation and wait. An interview answer does not confirm the whole brief.
Done when the person confirms the brief, including reactions to the visible moodboards and subsequent comparisons.
2. Develop the moodboards
Read the bundled board standard in full after brief confirmation. It contains the required evidence, sourcing, composition, and comparison process. Develop the existing moodboard directions from the confirmed brief and visual feedback. Keep the requested number of directions and preserve earlier boards for comparison. Keep product content constant, while giving each direction its own visual thesis and composition. Use references beyond the product category and generate original material for deliberate gaps. Build the complete review artifact before requesting reactions.
Done when every board meets the board standard and passes the presentation gate.
Presentation gate
Apply this gate to every moodboard, comparison render, and revision. Choose a format that the current session can inspect and display before producing the artifact. Inspect the actual rendered result at the size the person will see. Make sure that images and fonts load, text is legible, and each claimed difference is visible. Inspect every UI specimen at readable size, including its labels, controls, and annotations. Make sure that text follows shared alignment lines, related labels share baselines, and repeated elements use consistent spacing. Inspect line breaks, padding, icon alignment, contrast, and hierarchy. Correct clipping, collisions, distorted text, and arbitrary offsets. For generated moodboards, treat an incidental lettering defect as a disclosed limitation when the intended label and visual decision remain clear. Correct generated text only when it changes the task, state, action, or ability to judge the direction; exact interface copy belongs in the HTML preview. Critique beauty and originality as well as correctness: identify the strongest visual idea and how the whole board sustains it. Refine awkward proportions, weak type relationships, and generic elements until each direction feels coherent and distinctive. Judge the visual details themselves, rather than accepting a direction's name or rationale as evidence of originality. Replace oversized empty panels with developed, focused fragments. Keep decorative elements clear of text and controls. Compare the boards' underlying arrangements and representations, not only their colors and textures. If they repeat the same visual formula, revise the weakest direction's composition without changing the shared task or adding features to manufacture difference. Check visible state facts against the sample content: totals match marked items, progress matches completion, and control symbols match their labels and current state. Read text at presentation size, including small captions, and correct collisions, broken baselines, and ambiguous controls. Record concrete visual evidence for the weakest part of each board and the least distinct pair before deciding whether to revise or present. Base the final critique on those observations; disclose unresolved defects and limits instead of treating completed inspection as proof of quality. Compare the full set for creative range. Rework directions that read as one template with different styling. For software boards, make sure that several substantial fragments reveal the same design language across different tasks and states. Recompose any board dominated by a complete screen before presenting it. If generated UI cannot meet this bar, rebuild the affected specimens with controlled text and layout, then inspect the new render. Do not excuse visible alignment defects because the artifact is a moodboard. Show it through inline images or an open visual preview in the harness or external browser. For HTML, serve the artifact and open its URL. A source file, path, or command is not a presentation. Show every visual result directly before asking for a decision about it.
If image retrieval, generation, rendering, inspection, or display fails, report the exact failure and stop the visual run. Do not silently replace failed imagery, redraw unavailable references, or claim inspection from source code. Resume only after the failure is resolved and the artifact can pass this gate.
3. Select and refine
Ask what attracts and repels the person, tied to exact objects or regions in the boards. Let them choose one direction or combine named qualities from several. Record each retained quality and its source. Preserve the earlier board for comparison. Create a visible revision that shows how the accepted feedback changes the language. Request explicit approval after the revision passes the presentation gate. Silence is not approval.
Done when the person explicitly approves the visible revision as the source direction for the preview.
4. Build the faithful preview
Read rich preview in full after direction approval.
Load the available frontend-design skill before planning or coding the preview.
Build the connected HTML mini prototype directly from the approved board and its reconstructable interface specimens.
Treat this stage as translation, not reinterpretation: preserve the approved composition, proportions, typography, colour relationships, imagery, shape, depth, and graphic details.
Render each HTML scene and compare it with the approved board at the intended viewport.
Correct visible differences until the HTML reads as the same designed world rather than a generic implementation of its description.
Show the working preview and the reference comparison, then ask for explicit approval.
Done when the connected preview works, every scene passed the presentation gate, and the person approves its fidelity.
5. Record the approved direction
Write docs/visual-direction.md, or update the project's existing visual-direction record.
Record the product context, fixed constraints, approved artifact, selected and rejected qualities, and their visual evidence.
Include reference provenance, exploratory type and imagery rules, unresolved decisions, approver, and approval date.
Record the approved board, HTML preview, viewing command, comparison renders, and known fidelity gaps.
Keep exact production tokens and components pending for the foundation run.
Keep the approved board and preview accessible alongside the record.
Done when another agent can build the foundation without repeating the interview.