DesignLint

TL;DR — AI agents produce interfaces that all look and feel the same. DesignLint fixes this in two modes: Create (understand the user, make 9 deliberate design decisions, resolve a creative tension, critique the result — before shipping) and Audit (diagnose an existing interface, identify what's generic, and produce a concrete improvement plan). The goal isn't just different. It's human.

The Problem This Skill Solves

AI coding agents converge — at every level. Left unconstrained, they default to:

UI convergence:

• Typography: Inter, Roboto, or system fonts
• Colors: Purple/blue gradients, white backgrounds, gray text
• Layout: Centered column, 4px grid multiples, predictable spacing
• Components: shadcn/ui defaults, rounded-xl cards, subtle shadows
• Motion: opacity fade-in, nothing else

UX convergence:

• Navigation: Tab bar (5 icons) → List → Push detail. Always.
• Actions: Tap → Modal → Form → Submit → Toast. Always.
• Feedback: Green toast bottom-right for success, red for error. Always.
• Empty states: Centered illustration + one CTA. Always.
• Onboarding: 3-screen carousel with illustrations. Always.
• Data entry: Full form with a Submit button. Always.

Human convergence (the deeper problem):

• No understanding of who uses the product or how they feel
• Aesthetic choices disconnected from context or audience
• Archetypes copied instead of used as departure points
• Generic microcopy ("Submit", "Cancel", "Are you sure?")
• No creative tension — just safe, obvious choices
• No self-critique — first draft ships as final

This skill breaks all three layers.

Two Modes

DesignLint operates in two modes depending on the task:

→ Create Mode (default)

When the user asks to build, design, or create an interface. Follows the full protocol: Phase 0 → Phase 1 (9 decisions) → Phase 2 (brief) → Phase 3 (build) → Phase 4 (audit) → Phase 5 (critique).

→ Audit Mode

When the user asks to review, critique, audit, fix, or improve an existing interface — whether provided as a screenshot, a URL, code, or a description. Follows the Audit Protocol documented at the end of this file: Diagnosis → Convergence Score → Improvement Brief → Execution.

How to detect which mode:

• "Build me a…" / "Create a…" / "Design a…" → Create Mode
• "What's wrong with this?" / "Review this UI" / "Improve this" / "Make this better" / "Audit this design" / "This looks generic" → Audit Mode
• "Redesign this" → Audit Mode first (diagnose), then Create Mode (rebuild with a fresh brief)

Create Mode

Quick Start (Express Mode)

Short on time? Make these 4 decisions minimum:

1. Who and how they feel — One sentence: who is the user and what emotional state are they in when they use this? (e.g., "A busy founder checking metrics between meetings — anxious, time-poor, wants reassurance")
2. Pick an archetype as departure point from references/archetypes.md — then name ONE thing you'll deliberately do differently from that archetype
3. Pick a palette from the Palette Library in the same file
4. Pick a UX paradigm from references/ux.md

Document:

/* Quick DDP: User=busy founder, anxious | Archetype=Linear (but warmer type) | Palette=Amber Night | UX=Command-First + Optimistic UI */

Then write code. For the full protocol (recommended for anything production-facing), continue below.

Phase 0: Understand Before You Design

Before touching archetypes or aesthetics, answer three questions about the human who will use this.

Step 0a — The User in Context

Ask:

"Who is this person, and what is their emotional state when they open this interface?"

This is not a persona exercise. It's a single sentence that anchors every decision that follows.

Examples:

• "A nurse checking patient vitals during a 12-hour shift — exhausted, needs clarity, zero tolerance for friction"
• "A teenager customizing their profile — excited, playful, wants to express identity"
• "A CFO reviewing quarterly numbers before a board meeting — stressed, skeptical, needs confidence in the data"
• "A first-time user who just downloaded an app from a friend's recommendation — curious but impatient"

The emotional context changes everything. A dashboard for an exhausted nurse and a dashboard for an excited teenager should feel fundamentally different — even if they display similar data.

→ Document: /* User: [who] — [emotional state] */

Step 0b — The Creative Tension

Great design lives in tension. Pick TWO qualities that seem contradictory, then commit to resolving both:

Example tensions:

• Dense BUT calm (Bloomberg data density + luxury whitespace)
• Technical BUT warm (monospace precision + serif softness)
• Playful BUT trustworthy (rounded/bouncy + structured layout)
• Minimal BUT expressive (almost nothing on screen + one bold signature)
• Fast BUT considered (snappy interactions + cinematic transitions on key moments)
• Powerful BUT invisible (deep functionality + zero learning curve)

The tension is your creative engine. Without it, you'll default to the obvious — and obvious is generic.

→ Document: /* Tension: [quality A] BUT [quality B] */

Step 0c — Read the Archetypes Library (as departure points)

Open references/archetypes.md. Read at least 5–6 archetypes. But read them as a designer reads references — not as templates to reproduce.

For each archetype, the library documents tokens (type, palette, spatial, motion). These are starting points, not specifications. A human designer looks at Linear and thinks "I love the density but the coldness doesn't fit my users." That transformation — taking what works, discarding what doesn't, adding what's missing — is what makes design human.

Select 1 primary archetype + optionally 1 secondary for contrast. Then ask:

"What would I KEEP from this archetype, what would I DISCARD, and what would I ADD that isn't in any archetype?"

→ Document: /* Archetype: [name] — Keep: [x], Discard: [y], Add: [z] */

Step 0d — Read the UX Reference

Open references/ux.md. This is your UX vocabulary — navigation paradigms, interaction models, data entry patterns, feedback systems, onboarding approaches.

Ask:

"Given my user's emotional state and context — what interaction model would reduce their friction the most? If I removed all visual styling, would the experience still feel different from every other app in its category?"

Phase 1: Design Decision Protocol (DDP)

Work through these 9 decisions in order. Document your choices in a comment block at the top of your code.

Decision 1 — Aesthetic Axis

Pick ONE from each column, then combine them:

Check: Does your aesthetic axis serve the user's emotional context from Phase 0? A "Brutalist" axis for an anxious nurse is probably wrong. An "Industrial" axis for a teenager's profile is probably wrong. Let the user pull you toward the right aesthetic, not the other way around.

→ Document: /* Aesthetic: [axis] — because [why it serves the user] */

Decision 2 — Typography Contract

BANNED fonts (never use these as default choices):

• Inter, Roboto, Arial, Helvetica Neue, San Francisco (system-ui), DM Sans, Plus Jakarta Sans, Outfit, Nunito, Poppins, Space Grotesk