Design rigorfor AI coding

Research web design principles and real examples to connect a brand-fit direction with responsive implementation and rendered-screen verification.

$ npx designpaca

Brief · References · Direction · Tokens · Build · Preflight · Proof

Decisions carry through to code and checks

Principles selected from research are recorded, translated into design tokens and implementation rules, then verified through repeatable checks.

Evidence converges into one visual position.

References are separated by role before their decisions are combined.

Type, color roles, and spacing become reusable constraints.

The same rules are measured at narrow, medium, and wide widths before completion.

Each stage records the decisions the next one needs, keeping the build anchored to an intentional direction.

0
Brief gate

Set the goal, audience, required features, language, and constraints before design work begins.
1
Reference research

Study real examples that solved a similar problem, then separate useful principles from habits to avoid.
2
Direction

Choose the visual direction, information hierarchy, and accepted risk to establish one coherent design language.
3
Design tokens and budget

Define color, type, spacing, motion, and performance limits as concrete values.
4
Implementation

Turn the chosen principles into responsive layouts, materials, interactions, and accessible states.
5
Preflight audit

Check viewport behavior, contrast, keyboard access, metadata, tokens, and performance with repeatable tests.
6
Decision record

Document accepted and rejected choices so the same quality standard carries into the next build.

Run responsive behavior, accessibility, token hygiene, and metadata through the same repeatable checks.

7 Pipeline stages: Connect research, contextual judgment, implementation, verification, and decision records from stage 0 through stage 6.
Evidence · context Criteria kept distinct: Apply universal usability criteria separately from style decisions that fit the project.
Rendered screens Two kinds of review: Automate functional checks, then separately review the composition and hierarchy users actually see.

View the audit checks

Make sure core content stays intact without clipping or overlap at 320px.
Check that heading, body, and button spacing follows the token system.
Measure contrast for text and interface controls.
Complete navigation and primary actions with a keyboard.
Keep content and primary actions available with reduced motion and at 200% zoom.
Review real before-and-after screens for composition, hierarchy, and responsive behavior.
Connect sources, metadata, language, alt text, and ARIA labels to the rendered page, then check tokens, SEO, and unnecessary code.

The interactive installer detects your workspace and places the skill files where supported tools expect them.

$ npx designpaca