By skovalik
Apply Perception-First Design framework to evaluate UIs, landing pages, emails, ads, and marketing copy via 5 perceptual layers grounded in cognitive psychology, generating layered scores, trade-off predictions, rebuilt HTML/CSS fixes, and solution proposals for design and communication tasks.
Run all three PFD modes (analyze, solve, evaluate) on the same input. Produces three full outputs side-by-side, one per cognitive contract. Use when a question genuinely warrants multiple cognitive contracts, or when you want to see what the question reveals across descriptive, prescriptive, and rated lenses simultaneously.
Analyze a hypothetical change, mechanism, or behavioral pattern with Perception-First Design. Mode 3 descriptive analysis. Walks the 5 layers as predictive lenses to enumerate cascading consequences, trade-offs, and integrative compounds. Use for "what happens if", "why does X work", "users say X but do Y" questions that want results, not recommendations.
Evaluate an artifact (URL, HTML, screenshot, copy) with Perception-First Design. Mode 1 corpus-backed evaluation that loads heuristic rules, design system profiles, worked examples, and the psychology corpus to produce a layered scoring with citations.
Solve a design, marketing, writing, or communication problem with Perception-First Design. Runs the Mode 2 derivation protocol — derives requirements R1-R5 from cognitive constraints, then produces a solution that satisfies all of them.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
People decide in 50 milliseconds. Now your design process can too.
Everyone has an opinion about design. They use these products daily, so the opinion feels earned. But opinions aren't diagnosis. This is.
A 5-layer diagnostic framework grounded in cognitive psychology. Tells you which perceptual layer is failing, in what order to fix it, and why the fix works. Before anyone touches a pixel.
~100 peer-reviewed citations. 15 years applied. Open framework.
Created by Stefan Kovalik / Aurochs
The stakeholder says make the logo bigger. The VP doesn't like blue. The founder's wife thinks the hero needs a video.
The designer is either pushing pixels to someone else's vision or burning half their time persuading stakeholders why a bad instinct is bad. The person on the other end of the screen, how they actually perceive and decide in 50 milliseconds, is nowhere in the conversation.
PFD changes the conversation from opinions to diagnosis.
You look at a page and you see the layers. Not the colors, not the layout, not the copy. The perceptual gates between a human and a decision.
The hero is fine but L0 is broken: too many competing elements burning working memory before visitors reach the headline. L2 is leaking trust through inconsistent spacing the viewer's nervous system notices before the designer does.
You stop guessing. You fix L0 first because Lavie (1995) proved that lower-level processing demands eliminate higher-level processing capacity. Then L1. Then L2.
Each fix compounds upward through the stack, toward the thing every decision actually runs on: pre-verbal arousal. The viewer's nervous system fires before their analytical mind engages. They feel the outcome before they evaluate the offer.
Damasio (1994) showed the body generating emotional signals that bias decisions before conscious deliberation. LeDoux (1996) mapped the pathway: 12ms emotional response, 200-300ms conscious evaluation. The feeling arrives first. Always.
Design becomes a lens of empathy to solve with, not a set of business objects to align with the user. The stakeholder can still disagree, but now they're disagreeing with cognitive psychology instead of someone's taste.
LLMs miss things. Not sometimes. Every time. A single pass through any problem is probabilistically incomplete, the same way a 3D renderer's first pass produces a noisy image. The fix is the same too: run it again. Each pass catches what the last one missed.
The Ralph Loop applies this to PFD. Run a design, plan, pitch, or system through the 5 layers. Loop until exit conditions fire and completion signals hold up under evaluation. Brute force repetition against your own instructions, compounding toward an asymptote.
Round 1 catches the obvious layer violations. Round 2 catches what only surfaces after the obvious ones are fixed. By round 3, the conversation isn't about opinions. It's about which perceptual layer the remaining issues live on and what the science says to do about them.
Match depth to stakes. Quick design decision: 1 pass. Feature spec: 5. Landing page or pitch deck: 10. Systems architecture or deep research: 50. I've run 100+ on things that needed it. Each pass costs more and returns less, so you stop when confidence stops climbing.
Fix bottom-up. Upstream failures block everything downstream.
| Layer | Gate | What Breaks If It Fails |
|---|---|---|
| Cognitive Load (L0) | Working memory: 3-5 chunks | Visitor leaves before processing anything. Bandwidth consumed by noise. |
| First Impression (L1) | 50ms visual verdict | Attention never activates. Everything downstream multiplies by zero. |
| Processing Fluency (L2) | Easy to process = feels true | Trust erodes subconsciously. The visitor can't explain why they don't believe you. |
| Perception Bias (L3) | Users autopilot, rationalize after | You're designing for what users SAY instead of what they DO. The gap is where conversions die. |
| Decision Architecture (L4) | Structure shapes choice | The trail is broken. Interested visitors can't find the path to action. |
Full framework (700+ lines, ~100 citations): framework/PERCEPTION-FIRST-DESIGN.md
Clone the repo. Read the framework. The five layers are a diagnostic instrument: walk any design, email, pitch, or onboarding flow through them bottom-up. You'll see what's broken and why, grounded in the same prediction error logic the brain runs on.
git clone https://github.com/skovalik/perception-first-design.git
npx claudepluginhub skovalik/perception-first-design --plugin perception-first-designResearch-backed visual design principles for websites, presentations, documents, and any visual medium — grounded in VisAWI, Gestalt psychology, and empirical aesthetics research
Design with Intent. A comprehensive UX and design strategy system — 16 specialized skills and 6 named agents covering strategy, research, experience design, quality assurance, accessibility, measurement, and engineering handoff.
Design workflow for coding agents: discovery, research, strategy, inclusive design, critique, and handoff — enforced automatically
Design & UX skills: UX Research Plan, Design Critique, Accessibility Audit. Create research plans with discussion guides, critique designs using JTBD and Gestalt principles, and audit for WCAG 2.2 compliance.
Expert UI/UX design guidance for unique, accessible interfaces. Always-ask-first protocol for visual decisions, colors, typography, layouts.
Design fluency for frontend development. 1 skill with 23 commands (/impeccable polish, /impeccable audit, /impeccable critique, etc.) and curated anti-pattern detection.