# What good design looks like

This is a companion to the matrix, not a second generation prompt. It was written while the first experiments were running and is not supplied to the benchmark models. Use it to explain preferences and diagnose changes, not to manufacture an objective winner from a small sample.

## The standard for Forma

A good Forma site makes a visitor want to spend a Saturday making something, then helps them choose and reserve the right workshop without confusion. It feels like one particular creative studio, uses the actual workshop content well, and stays comfortable to use on a phone or keyboard.

Look for these observable qualities:

- **A recognizable identity.** Type, color, imagery, composition, and voice tell the same story. A distinctive choice earns attention without overwhelming the workshops. Warmth does not require beige; craft does not require rustic decoration.
- **A useful hierarchy.** The first viewport explains the offer and makes the next action clear. Titles, dates, prices, and availability are easy to compare. Secondary content supports the booking decision.
- **Intentional composition.** Alignment, spacing, image crops, line lengths, and density create rhythm across the whole page. A beautiful hero should not conceal a weak remainder.
- **Readable, coherent typography.** A clear type scale and adequate contrast work with real content and long titles. Small labels remain readable. Type expresses character without making information harder to scan.
- **Trustworthy interaction.** Filtering has clear selection and empty states. Booking shows the chosen workshop, price, validation, pending state, errors, and a durable confirmation. A control does what its label promises.
- **Adaptation and access.** Mobile is thoughtfully rearranged, not merely shrunk. Keyboard navigation, focus, labels, modal dismissal, touch targets, and reduced motion receive deliberate treatment.
- **Restraint and finish.** No accidental gaps, clipped text, stretched photos, unexplained icons, irrelevant decoration, or inconsistent controls. Motion explains a change or supports one memorable moment.

## Human evaluation rubric

Score each dimension from 1–5. Record a concrete example or screenshot region with each score. Use **not assessed** when evidence is missing; do not turn missing evidence into a neutral score.

| Dimension                    | Weight | What the reviewer should inspect                                                                           |
| ---------------------------- | -----: | ---------------------------------------------------------------------------------------------------------- |
| Identity and relevance       |    20% | Does this feel authored for a creative workshop studio? Is the visual language coherent and memorable?     |
| Hierarchy and comprehension  |    20% | Can a new visitor identify the offer, compare workshops, and find the booking action quickly?              |
| Composition and typography   |    20% | Are spacing, alignment, type scale, contrast, imagery, and content density consistently resolved?          |
| Interaction and feedback     |    20% | Can a visitor search, filter, book, recover from errors, and understand confirmation without guessing?     |
| Responsive and inclusive use |    15% | Is mobile well composed? Are keyboard use, focus, readable text, labels, and motion preferences supported? |
| Craft and restraint          |     5% | Are small inconsistencies resolved? Do decorative details and motion justify their attention cost?         |

Common anchors apply to every dimension:

| Score           | Anchor                                                                                                           |
| --------------- | ---------------------------------------------------------------------------------------------------------------- |
| 1 — Broken      | Prevents understanding or completion, or shows pervasive incoherence.                                            |
| 2 — Weak        | Recognizable intent, but several substantial problems repeatedly interrupt the experience.                       |
| 3 — Competent   | Clear and usable with ordinary execution; some rough edges or generic decisions remain.                          |
| 4 — Strong      | Coherent, deliberate, and polished; only minor issues, with concrete strengths.                                  |
| 5 — Exceptional | Distinctive and exceptionally resolved across the inspected states, with no material weakness in this dimension. |

If all dimensions were inspected, calculate `sum(weight × score / 5)` for a 0–100 human rubric score. Do not substitute the gallery's quick 1–5 preference rating for this fuller assessment. A visually compelling artifact can still fail functionality; always report both.

## Consistent review procedure

1. Hide model and skill labels where practical. Randomize viewing order, and compare the same viewports and states.
2. Give the first viewport five seconds. Record what the product is, who it serves, and the apparent next action.
3. Scroll the full desktop page. Compare image treatment, hierarchy, typography, rhythm, and the ending.
4. Inspect mobile at 390 × 844. Check wrapping, ordering, navigation, controls, and overflow.
5. Search for a workshop, choose a category, trigger an empty result, and restore the full list.
6. Book a workshop. Inspect validation, loading, errors, success, keyboard focus, Escape, and persistence.
7. Review the automated report after writing the initial visual observations. Note whether a failure is in generated code, the provider, or the evaluation harness.
8. Compare each skill variant with its model's vanilla output. Record improvements, regressions, and uncertainty. Avoid attributing every difference to the skill from a single sample.

## Evidence and limits

The suite's automated checks cover a limited set of observable behaviors: rendering, overflow, search, filters, booking, API validation, availability, persistence, and serious/critical axe findings on the initial desktop view. They cannot determine taste, meaningful brand fit, complete accessibility, security, or production readiness. Counts of passed checks are diagnostic, not a design leaderboard.

All experiments currently use one task and one sample per cell. Reliable claims require repeated runs, additional tasks, and preferably multiple independent reviewers. Compare identical task/asset hashes and compatible harness settings. Record provider failures and explicit compatibility overrides separately from design weaknesses.

Generation times include provider latency, reasoning, tool use, and local self-checks while several experiments run concurrently. They measure this workflow under its recorded conditions, not isolated inference speed. A run that writes a usable site but leaves a server in the foreground can exhaust the time limit; show its artifact and its timeout together, rather than silently treating it as a normally completed generation.

## Review worksheet

```text
Run ID / comparison IDs:
Reviewer / date:
Views and states inspected:
First-impression finding:
Dimension scores (or not assessed):
Best decision, with evidence:
Most consequential weakness, with evidence:
Improvement relative to vanilla:
Regression relative to vanilla:
Automated failures and their likely source:
Overall preference / confidence:
```

## Live observation notes

- **Provider capability is a confound.** The first GLM 5.3 attempts returned HTTP 400 after image tool results despite the catalog advertising vision support. That is not evidence of poor design. Later attempts use an explicit text-only compatibility override.
- **Harness readiness is a confound.** Early artifact capture ran before the downloaded browser was available. Those artifacts require recapture; a missing preview is not a design failure. Capture now uses installed Chrome and records its version.
- **Execution boundaries matter.** An initial model trial used broad process-name cleanup. The batch was interrupted and restarted under OS containment with one revised brief for every model. Early trials are retained for transparency; do not mix them with the contained cohort when judging skill effects.
- **Shared ingredients encourage convergence.** The first inspected vanilla renders from GLM 5.2, GLM 5.3 Flash, and DeepSeek used similar cream backgrounds, serif headings, warm accents, and the same supplied craft image. Similarity alone does not prove copying or low quality; judge fit, clarity, and execution. These were preliminary trials, not the final controlled cohort.
- Further visual observations belong here only after inspecting the actual renders and interactions. Keep strengths and defects attached to run IDs.

### First controlled comparison: DeepSeek + Frontend Design

Compared `deepseek-4.1-flash--vanilla--2026-09-16T17-31-42-268Z` with `deepseek-4.1-flash--frontend-design--2026-09-16T17-36-40-333Z` at 1440 × 1000:

- Vanilla uses a serif headline, warm cream palette, pill buttons, and a multi-photo collage. The offer and two main actions are immediately recognizable, but the dark header CTA has weak text contrast.
- Frontend Design changes the composition substantially: an oversized sans-serif headline, cool pale background, dark blue-green ink, restrained amber identity mark, and one large rectangular image. It has a clearer visual departure from the common warm studio template.
- The skill variant passes 19/19 automated checks versus 18/19 for vanilla; the difference is the initial accessibility check. That is a measured improvement in this sample, not proof of a general skill advantage.
- The redesigned hero spends more vertical space before the primary action. The image and supporting copy sit low in the first viewport. Whether that added spaciousness earns its cost is a human hierarchy/composition judgment, not something the check count answers.

### Functional polish must be observed

In `glm-5.3-flash--vanilla--2026-09-16T17-31-42-268Z`, the category and booking controls were blocked by a modal backdrop carrying the HTML `hidden` attribute. Its CSS still made the layer intercept clicks. The API tests passed while the visitor flow failed. The corresponding Frontend Design attempt passed those flows. This is why the rubric gives interaction and feedback a full 20%, and requires actually completing a reservation.

## Design references

These sources informed the skill selection; each tested skill's exact revision is in `config/skills.lock.json`:

- [Anthropic Frontend Design](https://github.com/anthropics/skills/tree/main/skills/frontend-design)
- [Vercel Web Interface Guidelines](https://github.com/vercel-labs/web-interface-guidelines)
- [UI UX Pro Max](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill)
- [Impeccable](https://github.com/pbakaus/impeccable)
- [Taste](https://github.com/Leonxlnx/taste-skill)