Shape Ui Aesthetics

---
name: shape-ui-aesthetics
description: Create, redesign, refine, or review screen-based interfaces as authored aesthetic systems. Use when an AI coding agent must establish a product-specific visual thesis, shape composition and hierarchy, choose an expressive computational medium, reconcile motion, interaction, color, cognition, and coherence decisions, or critique a polished but generic UI while preserving real content, functionality, accessibility, and implementation truth.
---

# Shape UI Aesthetics

Direct the work as one authored aesthetic system. Preserve a stable creative spine, route only material uncertainties to exact internal capabilities, and return one coherent result.

## Frame the assignment

Choose one work mode:

- **Create** — establish a new aesthetic system and materialize it.
- **Redesign** — replace the governing experience while preserving declared product truth.
- **Refine** — improve a bounded region without silently expanding the Change Boundary.
- **Review** — diagnose the current artifact and propose consequential corrections.

Record the artifact, Change Boundary, user and core task, real content, available media assets and the environment's asset-generation tools (probe for them — built-in tools, CLIs, APIs — do not assume absence), protected functionality, required states and devices, explicit musts, and prohibitions. Inspect existing artifacts before changing them. Do not choose a layout, style, or rendering medium while the frame is still unclear.

## Establish the Aesthetic Engine

Define these relationships before selecting components:

1. **Protagonist** — the subject, force, object, or system the experience makes present.
2. **Ritual** — the consequential action through which the user encounters or changes it.
3. **Desired afterimage** — what should remain perceptually or emotionally after use.
4. **Central tension** — the productive opposition that gives the work energy.
5. **Aesthetic thesis** — one product-specific proposition connecting meaning, behavior, and form.
6. **Signature Move** — one load-bearing interaction, composition, or medium behavior that makes the thesis unmistakable.

Set ambition in proportion to the product. Let expressive work be bold when spectacle, identity, or self-expression is part of the core task. Require every unusual move to carry meaning, orientation, agency, or memory rather than merely decorate the surface.

## Run the decision protocol

At the initial direction, every consequential checkpoint, and every material artifact observation:

1. Scan all nine Domain Lenses lightly.
2. Add only consequential unresolved questions to an Open Decision Ledger. For each, record observed evidence, design consequence, dependencies, and what must be validated.
3. Group decisions that share an outcome or dependency into Decision Clusters.
4. Form the Decision Frontier from every cluster whose dependencies are satisfied.
5. Load the index for each materially signaled domain. Do not load an index for a weak association or topic word alone.
6. Select exact contracts from the index. Load one to three complementary contracts per cluster; allow multiple clusters in the same frontier.
7. Absorb each Capability Contribution. Capabilities never route other capabilities.
8. Reconcile contributions through [routing and reconciliation](references/routing-and-reconciliation.md), update the shared direction, and rescan only when new material evidence appears.
9. Stop when no dependency-ready material decision remains.

## Scan the nine Domain Lenses

Load an index only when its decision is materially uncertain:

- **Meaning, Culture & Aesthetic Thesis** — Is product meaning embodied as an experiential proposition rather than visual adjectives? Load [the meaning index](references/index-meaning-culture-aesthetic-thesis.md).
- **Spatial Composition** — Do mass, void, sequence, scale, and center of gravity form a convincing whole? Load [the spatial index](references/index-spatial-composition.md).
- **Information, Attention & Typography** — Does attention follow consequence, and can users read, compare, and remember what the task requires? Load [the information index](references/index-information-attention-typography.md).
- **Color, Light & Material** — Do value, color relation, illumination, edge, and surface behavior create the intended hierarchy and atmosphere? Load [the color index](references/index-color-light-material.md).
- **Motion, Rhythm & Causality** — Does change through time explain cause, state, hierarchy, continuity, or identity, and does it remain comfortable, accessible, interruptible, and viable on target devices? Load [the motion index](references/index-motion-rhythm-causality.md).
- **Interaction, Agency & Wayfinding** — Do objects, actions, feedback, control, and recovery match the user's activity model? Load [the interaction index](references/index-interaction-agency-wayfinding.md).
- **Computational Medium & Embodiment** — Is DOM, SVG, Canvas, WebGL/WebGPU, 3D, a procedural system, or a hybrid the right body for the protagonist and ritual, and can its composition adapt intrinsically across content, containers, inputs, and capability tiers? Load [the medium index](references/index-computational-medium-embodiment.md).
- **Human Fit, Cognition & Inclusion** — Does the experience fit learned expectations, attention limits, bodies, abilities, context, dignity, and belonging? Load [the human-fit index](references/index-human-fit-cognition-inclusion.md).
- **Coherence, Critique & Evidence** — Do local decisions still read as one authored grammar, and what evidence could falsify the direction? Load [the coherence index](references/index-coherence-critique-evidence.md).

Scanning is not a nine-step workflow. A quiet lens stays unloaded; a material signal may activate several domains.

## Materialize the direction

Materialization begins with the asset strategy: from the tool probe recorded in the frame, declare generate, placeholder, or deliberately none — load [the imagery recipe](references/recipe-imagery-as-material.md) to decide — before writing markup. Then translate the reconciled direction into the medium required by the assignment. When the direction matches a proven system family, consult the [exemplar recipe index](references/index-exemplar-recipes.md) for measured parameter bands and disciplines drawn from living reference sites; recipes are vocabulary, not defaults — adopt, adapt, or reject them in service of the thesis, and never copy a single exemplar wholesale. Preserve real content, protected functionality, state truth, and the Change Boundary. Make the protagonist and ritual load-bearing in structure and behavior. Carry the visual grammar across responsive states, empty/loading/error/success states, input modes, and reduced-motion behavior.

Treat imagery as a first-class material of the system, not an afterthought. Reference-grade interfaces routinely delegate color, material, and atmosphere to photography, illustration, or rendered objects. Before building, record an explicit **asset strategy** in the direction state — this is mandatory, not optional, and has exactly three answers: **generate** (first probe the environment for image-generation tools — built-in tools, CLIs, callable APIs — and name what you found), **placeholder** (no tool available; place intent-annotated placeholders, never decorative CSS substitutes), or **deliberately none** (defend pure typography from the thesis). Claiming no tool exists without having probed is a protocol violation. Load [the imagery recipe](references/recipe-imagery-as-material.md) to make this decision. When generating, derive every prompt from the established thesis — color temperature, light, material, composition — so all assets belong to one world, and reject any asset that fails the system before it ships.

When implementation is in scope, build or edit the artifact rather than stopping at adjectives or a mood board. Inspect the result in its actual medium and at consequential viewport, device, and interaction states.

## Critique before delivery

Apply [critique and guardrails](references/critique-and-guardrails.md). Test authorship, medium purpose, whole-page composition, information load, interaction truth, coherence, accessibility, performance, cultural claims, and unresolved evidence obligations. Preserve a daring direction by degrading its implementation elegantly when a hard boundary prevents the ideal form.

## Return one Director-owned result

Present a single authored design, implementation, refinement, or review. State the governing thesis, the declared asset strategy and its execution, consequential decisions, visible result, preserved constraints, and unresolved human choices or validation obligations. Do not expose a catalogue of capabilities, a routing transcript, stitched specialist reports, provenance, or a numerical beauty score.