Skip to content

# designpaca

Ask an agent to “make it look good” and it pours out the defaults it knows. Not because it can't do better — because nothing was decided. This skill forces those decisions, in order.

`npx designpaca`

Node 20.11+ · detects and preselects your install targets

Repository npm

Six stages

## From one line of brief to a page that passed its own audit

Every stage has a pass condition. Fail it and you don't move on. Below is what one brief actually became at each stage, from a coffee roastery landing page built with this skill.

The brief that came in

Build a subscription landing page for a small-batch coffee roastery

1. ### Brief gate

   Compress the brief into three lines: what, for whom, constraints. Pick a path by scope.

   For whom: home baristas of 3+ years who can taste the roast profile

2. ### Reference research

   Pick three real sites at three different layers — structure, tone, detail.

   R2 = an independent literary publisher. Tone comes from outside the category

3. ### Direction

   Synthesize the references into one axis. Choose exactly one risk worth taking.

   Sentiment stays in the name. The screen carries numbers.

4. ### Design tokens

   Decide the numbers before writing code. The performance budget is fixed here too.

   --measure: 65ch / --leading-normal: 1.55 / JS budget 0KB

5. ### Build

   Layout → surface → depth → motion. It must be finished with every effect switched off.

   <h1>Acidity 8.5 · Body 6.0 · Light roast</h1>

6. ### Preflight

   Read your own work as a stranger's. All twelve gates must answer no.

   12/12 gates passed · 0 slop fingerprints · 31px overflow at 320px → fixed

What remains after six stages is one page and one design.md. The next person reads that file and continues the same decisions.

This page, measured

## Fixing the copy does not remove the slop

Polishing sentences fixes sentences. The radius vocabulary, the translucent panels, the number of type steps all stay. So here are this page's own form metrics. If a number comes back badly, it ships as it is.

radius vocabulary | 2 | 3px and 6px. Nothing else
translucent panels (backdrop-filter) | 0 | costs 15–30% FPS on real devices
type scale steps | 5 | the display size is defined outside the scale
font families | 2 | one text + one mono. Each language loads only its own
accent colours | 1 | deep teal. Light and dark are the same colour
JS to first paint | 314B | gzip. 0.6% of the 50KB budget. One copy button
slop fingerprints | 0 | 9 patterns checked
hard gates | 12/12 | all twelve checked. Four were measured on a real 320px render
time to interactive | — | not measured yet. Lighthouse, after deploy

Measured on the production build. Unmeasured entries stay empty — a hole is more honest than an invented number.

## What this page actually got caught on

Not the result of auditing someone else. The result of auditing itself.

- 6 eyebrow labels — the count rule caps them at ceil(7 sections / 3) = 3

  Kept three, dropped the rest. Sections read fine without a label above the heading

- The scroll reveal used clip-path — hard gate 8 allows only transform and opacity

  Switched to a cover pushed with translateX. Same result, and clip-path's interpolation limits went away with it

- Divider colour sits at 1.30:1 — fine as decoration, a WCAG 1.4.11 failure as an input border

  Added a 6.11:1 alias and split the two uses. No new colour, so the palette count is unchanged

- The text column was 960px — wider than the measure we had just set (561px)

  Bound the grid's main column to --measure. The skill's own example code was wrong too, so that got fixed as well

- 13px of horizontal overflow at 320px — even with the table inside an overflow container

  A grid item's default min-width is auto, so content pushes the parent wider. overflow-x only works once min-width:0 is set

- The button inside the dark band sat at 2.88:1 — the threshold is 4.5:1

  The band inverted the accent colour but left the text on it white. Added an inverted counterpart token and switched both together

- Scrolling to the very bottom still left the last 3 of 6 pipeline stages at opacity 0 — half of this page's core section was gone

  Elements near the page bottom never reach cover 22% in animation-range. Visible with effects off but missing with them on is not the same as having a fallback. The effect was removed

All seven were caught while building this page, and fixed after being caught. The last three only surfaced on a real 320px render — static checks missed them.

Your language is probably not Latin

## Tools built on Latin assumptions stop at the script boundary

Design tooling written in English carries no rules for other scripts. 9–11px text is a label in Latin and unreadable in Korean. A line-height of 1.5 is standard in Latin and cramped in Korean.

Line breaking fails first. The default breaks Korean mid-word — the equivalent of breaking English mid-syllable, in the middle of a sentence. Both paragraphs below use the same text, width and font. The only difference is one line of word-break.

default

원두의 산미와 바디를 구분하는 사람에게 필요한 것은 형용사가 아니라 수치다.

keep-all

원두의 산미와 바디를 구분하는 사람에게 필요한 것은 형용사가 아니라 수치다.

- word-break: keep-all — without it, words break at arbitrary points
- line-height 1.6–1.8 — more generous than Latin needs
- no negative letter-spacing — Korean glyphs are near-monospaced and collapse immediately
- 25–40 characters per line — Latin's 65–75 is far too long
- not specifying a Korean font is itself a sign of unfinished work

## Every rule states why

A prohibition without a reason does not survive contact with a brief. If the user asks for it explicitly, the user wins.

Never start without references
  Starting from memory produces the category average.
One accent colour
  Wanting a second one means the hierarchy failed.
Be bold in exactly one place
  Shout in two places and both go unheard.
Spectacle ranks fourth
  Judging weights are Design 40 / Usability 30 / Creativity 20 / Content 10.
Never invent a number
  A number-shaped hole is honest. An invented number costs trust.
It must be finished with every effect off
  That state is the basis of every fallback. If it collapses, the effects were doing the structure's job.

## One line

Targets are detected and preselected. If you edit a skill file yourself, updates leave it alone.

`npx designpaca`

Claude Code | ~/.claude/skills/designpaca/
Codex CLI | ~/.codex/skills/designpaca/
Cursor | .cursor/rules/designpaca.mdc
Windsurf | .windsurf/rules/designpaca.md
AGENTS.md | block injection — agent agnostic

npx designpaca update
  Pull the latest skill. Files you edited are skipped
npx designpaca doctor
  Diagnose install state and drift
npx designpaca uninstall
  Exact removal, driven by the manifest