Frontend Design Deslop

---
name: frontend-design-deslop
description: 'Use when a user builds or styles a web frontend or asks to make it not look AI-generated. Not for component-level UI work without the token system: use frontend-ui-engineering.'
---

# Frontend design deslop

## Contract

| Field | Bound contract |
|---|---|
| Trigger | User builds or styles a web frontend or asks to make it not look AI-generated. |
| Authority | Reversible local: writes only DESIGN.md, design token files, and component CSS in the working project; rollback is version control. No remote mutation. No other files are touched. |
| Side effect | Writes DESIGN.md, design tokens, and component CSS. |
| Done | A committed token system and a crafted interface with a recorded slop-audit pass and a WCAG 2.2 AA pass/fail gate that passes. |

## Not for

- Component-level UI work without a token system: use frontend-ui-engineering.
- Clean-room reconstruction of an authorized reference surface: use frontend-fidelity-rebuild.
- Remote, credential, publish, deploy, or irreversible changes.

## Inputs

Required: the frontend project directory to style, and the surface to craft (page, component, or app shell).

Optional: brand palette, typeface preferences, existing token files, and a target framework. When omitted, derive a neutral token system from the project's existing styles; state that it was derived rather than supplied.

## Procedure

1. Read the target surface and any existing styles, tokens, and brand inputs. Record what was found versus supplied so the design system is grounded, not invented. Done when: found-versus-supplied is recorded.
2. Author a design strategy in DESIGN.md: layout grid, type scale, color system in OKLCH, spacing scale, motion intent, and component list. State the strategy before writing tokens so the tokens follow a decision, not a guess. Done when: DESIGN.md strategy section is written.
3. Emit a token system as CSS custom properties (or the project's token format) covering color, typography, spacing, radius, shadow, and motion. Tokens are the single source of truth; component CSS references tokens, never hard-coded values. Done when: token system covers all six categories and no component CSS uses hard-coded values.
4. Craft the interface using the tokens. Apply the never-slop list and reject every violation before claiming the surface done:
   - Generic AI gradient backgrounds and rainbow color stops.
   - Default framework spacing, borders, and radius with no design intent.
   - Centered hero stacks, three-card feature grids, and other templated AI layouts used without purpose.
   - Hard-coded color, font, spacing, or radius values that bypass the token system.
   - Placeholder copy, lorem ipsum, or unfilled image alt text.
   - Low-contrast text, focus rings removed, or interactive elements without a visible focus state.
   Done when: every never-slop item is checked and cleared or fixed.
5. Run a WCAG 2.2 AA pass/fail gate over the crafted surface: contrast ratios for text and UI components, focus visibility, target sizes, and semantic structure. Record pass or fail per criterion. Done when: every criterion is recorded as pass.
6. Run a slop audit against the never-slop list and record each item as cleared or violated. Fix violations in the interface and tokens before recording a pass. Done when: every item is recorded as cleared.
7. Commit DESIGN.md, the token files, and the component CSS. Record the slop-audit result and the WCAG 2.2 AA gate result alongside the commit so the pass is auditable. Done when: artifacts are committed with both gate results recorded.

## Failure and recovery

- WCAG 2.2 AA gate fails: do not record a pass. Fix the failing criterion in tokens or component CSS and re-run the gate. If a criterion cannot be met within the supplied inputs, stop and report the unmet criterion and the input gap.
- Slop audit finds a violation: fix it in the interface or tokens and re-audit. A partial pass is not a done state; record the outstanding violations and continue only on them.
- Token system conflicts with existing styles: prefer the new token system and update component CSS to reference it; do not leave hard-coded overrides. If a caller-supplied constraint makes the token system incoherent, stop and report the conflict rather than shipping inconsistent tokens.
- Rollback: revert DESIGN.md, token files, and component CSS via version control. No other files were written, so no further recovery is needed.

## Output

Committed DESIGN.md, token system file, and component CSS implementing the crafted interface, plus a recorded slop-audit pass and WCAG 2.2 AA gate pass; the done predicate holds only when both gates pass and the artifacts are committed.