Why AI frontends look right and behave wrong
They are pretty at a glance and fall apart on inspection. The fix isn't more components — it's a way to choose between them.
- Buttons that look interactive but do nothing
- A component chosen because it looked cool, not because it fits
- Everything shredded into same-size cards (card-soup)
- Inter + an even 3-card grid + a purple gradient — the default
- Five loud moments competing; none wins
- Every interactive element names its real states
- Every component passes a one-sentence "why it's here" test
- Hierarchy carried by tables, weighted layouts, typography
- The obvious average-AI pick is recorded, then consciously rejected
- Exactly one signature moment; the rest serve it
The method: ask → derive → source → score → place → validate
A consulting intake, not a search box. Nothing is recommended before the brief is settled — and the message decides the components, not the gallery.
The fit rubric — the part the "use a gallery" advice skips
Five axes, gates first. A component that fights the message is rejected even if its colors are perfect.
| Axis | What it measures | Role |
|---|---|---|
| A · Token fit | Remap distance from the DESIGN.md tokens — colors, type, radius, elevation, spacing. | weight .35 |
| B · Message fit | Does the component's rhetorical intent reinforce or fight the site's stated intent? | GATE |
| C · UX + backend honesty | Flow-fit, and whether interactivity is real — a dead control on a critical path is a reject. | weight .30 |
| D · Distinctiveness | Lands in distinctive/awwwards, not bland and not gratuitous. Penalizes average-AI tells. | weight .35 |
| E · House override | When a house system (e.g. ACH Thesis) is in play, its patterns become first-choice. | GATE |
One scene, to make the message-gate concrete
A grief-support service.
The brief: gentle, steady, human. The AI reaches for an aurora-spotlight hero — animated gradient, glowing particles — because it reads as "premium," and it even takes the brand's blue cleanly. Token fit: a 3 out of 4.
The rubric rejects it anyway. Axis B is a gate: a hero whose rhetoric is "hype, kinetic, launch" actively undermines a service whose whole job is to feel calm and safe. Token fit becomes irrelevant. The same component scores a 4 on a brutalist agency launch — fit is never a property of the component alone.
→ fit-rubric.md, Axis B worked pairingsWhy this needed its own skill
Component knowledge already exists. Component judgment didn't.
A component knowledge base knows what a card is. A token scaffolder knows the colors. A slop validator knows what's average. None of them answer: for this message, with these tokens, buy this component, place it here, and here's why a flashier one would fight the statement.
That binding — message × tokens × placement, at a defensible distinctiveness band — is the whole job, and it's the one thing none of the neighbors do.
→ SKILL.md §5, Division of laborThe self-check it runs before it ships a recommendation
Provenance — this page was built by the skill it describes
Fittingly, in the ACH Thesis design system: AI contribution is declared, never decorative.
- What is AI-generated
- The layout, copy, and code — produced by component-consulting running on itself, consuming ach-thesis-DESIGN.md.
- What is human-decided
- The subject (this skill), the archetype (ACH Thesis), and the sign-off. The human chose the constraints; the skill chose the components.
- When
- 2026-06-18 · Axis-E (house-override) mode, so the 14 ACH patterns replaced the gallery catalog.
- Restore path
- Prescription preserved at consulting-report.md; tokens are the canonical ACH DESIGN.md — revert by re-running with Axis E off.