Design Screen

---
name: design-screen
description: Design or build a page, screen, landing page, website, app or UI from a request - the whole job, end to end. Use this for "design a landing page", "build a settings screen", "make me a website", "design the onboarding", "ออกแบบหน้าเว็บ", "ทำหน้า landing", "ออกแบบ UI", "ทำแอป". It runs the pipeline no single skill covers: the house doctrine, a written Brief Inference so the result is not the statistical mean, a committed visual direction, tokens, build, the objective gates, then an adversarial critic. Hands off to data-dashboard for dense data screens, redesign for existing UI, and image-to-code when a reference image is given.
---

# Skill: Design a screen

The most common request there is - "design a page / screen / app" - had no skill
that claimed it. `design-code` wanted a stack named, `design-component` works at
the spec level, `apply-aesthetic` waits to be asked for a look, `redesign` needs
existing UI. So nothing matched strongly and the kit got used at a fraction of
its depth, or not at all. This skill is the whole pipeline.

> **Step 0 — is the kit here?** This skill reads files from the kit. Check once:
> `ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING`
> On `KIT_MISSING` only the skill folders were installed, which is what
> `npx skills add` does. Say so plainly, point the user at
> `npx ux-ui-agent-skills init` or the plugin install, and stop. Do not guess the
> contents of a file you could not open.

## Hand off instead, when the work is actually

| The request | Use |
|---|---|
| A dashboard, terminal, console, or any screen whose job is many numbers at once | `data-dashboard` |
| An existing site or app to improve | `redesign` |
| A screenshot, mockup or reference image to match | `image-to-code` |
| One component's spec, not a screen | `design-component` |
| A brand foundation from scratch, before any screen | `brandkit` |

Otherwise, continue.

---

## 1. Taste preflight — write this down BEFORE any markup

Slop comes from generating before deciding. This block is not optional and it is
not internal: put it in your reply, then build to it. If you cannot name the mood
and the layout family, you will regress to the mean and the result will look
machine-generated no matter how many gates pass.

```
Domain:          fintech | editorial | dev-tool | healthcare | consumer | ...
Audience & tone: expert vs first-time, calm vs energetic, premium vs utilitarian
Mood:            the one adjective the result must earn - "expensive", "precise", "warm", "brutal"
Motion depth:    none | subtle feedback | expressive choreography
Layout family:   the section sequence you will use, named, varied per section
Reference anchor: an archetype, or a named system - see step 3
```

Full version and the reasoning: `${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md`.

### Banned defaults — break each one deliberately

These are the tells that make UI read as generated. They are defects, not
starting points.

- **Three or four identical equal-weight cards.** One thing leads: more size,
  more weight, or its own row. A grid of equals gives the eye nowhere to land.
- **Everything centered.** Use asymmetry and a real grid. Center sparingly.
- **The same left-text / right-image row repeated.** Vary composition per section.
- **Display type that is just bold body text.** The largest heading is at least
  2.5x the body size, short, on a wide measure (18-24ch).
- **Generic drop shadow on every box.** Most things are flat; elevation is layered
  and rare.
- **Pure `#000` on `#fff`.** Off-black on warm-white, from the theme.
- **A rainbow of accents.** One primary, one accent at most; neutrals carry it.
- **Emoji anywhere** - icons, bullets, status dots, labels. Use lucide inline SVG
  with `currentColor`, or plain words. This is a hard gate, not a preference.
- **Em-dashes in UI copy**, marketing filler ("elevate", "seamless", "unlock"),
  hollow triads ("powerful, intuitive, beautiful"), fake labels ("SECTION 01",
  lorem ipsum). Say the concrete thing or say nothing.
- **A colored border on one side only** of a card, alert, toast or callout. The
  tinted 3-4px strip is a generated-UI cliche. Full hairline border or surface
  separation, and status carried by a real icon plus text, never colour alone.
- **Cramped vertical rhythm.** Generous macro-whitespace between sections.

---

## 2. Doctrine

Load `design-doctrine` and follow it. The parts that decide this job: token by
intent, one shared theme, the eight states on every interactive element, one
thing leads, zero emoji, and never state a number you did not measure.

## 3. Direction into tokens

Pick the reference anchor from
`${CLAUDE_SKILL_DIR}/../../../taste/aesthetic-systems.md` or the library at
`${CLAUDE_SKILL_DIR}/../../../design-systems/library/`, then resolve it into
tokens rather than styling screens directly. One CSS-variable layer, imported
once. If a brand colour fails contrast, adjust it: taste serves tier 4 and never
overrides accessibility.

Reference output to match for quality:
`${CLAUDE_SKILL_DIR}/../../../examples/showcase/` and
`${CLAUDE_SKILL_DIR}/../../../examples/templates/`.

## 4. Build

**Mobile is the base**, not an afterthought: write the phone layout as the base
styles and layer wider screens on with `min-width`. `max-width` is fine for a
narrow refinement, never as the way mobile gets supported. Every value a token. Every interactive element ships all eight
states. Content first, then the layout that serves it.

## 5. Gate — run it, never claim it

```bash
node ${CLAUDE_SKILL_DIR}/../../../scripts/accuracy_report.mjs
```

Report the real `N/N` line. For a single file, at minimum:

```bash
node ${CLAUDE_SKILL_DIR}/../../../scripts/verify_states.mjs <file> [--dark]
node ${CLAUDE_SKILL_DIR}/../../../scripts/verify_responsive.mjs <file> --scale=1.25
node ${CLAUDE_SKILL_DIR}/../../../scripts/slop_tells.mjs --strict <file>
node ${CLAUDE_SKILL_DIR}/../../../scripts/taste_audit.mjs --strict <file>
```

A render gate with no browser prints SKIPPED and exits 0. That is not a pass.
Set `DS_REQUIRE_BROWSER=1` when you run one on its own and intend to trust it.

## 6. Render and look

Gates pass while a screen is still visibly broken. Screenshot it, look at every
state, and click each control to confirm something actually changed.

## 7. Critic

Run `/critique`. It is adversarial on purpose and it sees the work, not your
reasoning. A passing gate is never evidence of taste.

---

## What you deliver

The Brief Inference block, the files, the real gate output, and the critic's
verdict. If a gate was not run, say which and why - an unmeasured result is
reported as unmeasured, never as a pass.