{
  "markdown": "# Perception-First Design\n\n**People decide in 50 milliseconds. Now your design process can too.**\n\nEveryone has an opinion about design. They use these products\ndaily, so the opinion feels earned. But opinions aren't\ndiagnosis. This is.\n\n---\n\n**A 5-layer diagnostic framework grounded in cognitive\npsychology. Tells you which perceptual layer is failing, in what\norder to fix it, and why the fix works. Before anyone touches a\npixel.**\n\n~100 peer-reviewed citations. 15 years applied. Open framework.\n\nCreated by Stefan Kovalik / [Aurochs](https://aurochs.agency)\n\n[![License: CC BY-SA 4.0](https://img.shields.io/badge/License-CC_BY--SA_4.0-lightgrey.svg)](https://creativecommons.org/licenses/by-sa/4.0/)\n\n---\n\n## What Changes When You Have This\n\nThe stakeholder says make the logo bigger. The VP doesn't like\nblue. The founder's spouse thinks the hero needs a video.\n\nThe designer is either pushing pixels to someone else's vision\nor burning half their time persuading stakeholders why a bad\ninstinct is bad. The person on the other end of the screen, how\nthey actually perceive and decide in 50 milliseconds, is nowhere\nin the conversation.\n\nPFD changes the conversation from opinions to diagnosis.\n\nYou look at a page and you see the layers. Not the colors, not\nthe layout, not the copy. The perceptual gates between a human\nand a decision.\n\nThe hero is fine but L0 is broken: too many competing elements\nburning working memory before visitors reach the headline. L2 is\nleaking trust through inconsistent spacing the viewer's nervous\nsystem notices before the designer does.\n\nYou stop guessing. You fix L0 first because Lavie (1995) proved\nthat lower-level processing demands eliminate higher-level\nprocessing capacity. Then L1. Then L2.\n\nEach fix compounds upward through the stack, toward the thing\nevery decision actually runs on: **pre-verbal arousal.** The\nviewer's nervous system fires before their analytical mind\nengages. They feel the outcome before they evaluate the offer.\n\nDamasio (1994) showed the body generating emotional signals that\nbias decisions before conscious deliberation. LeDoux (1996)\nmapped the pathway: 12ms emotional response, 200-300ms conscious\nevaluation. The feeling arrives first. Always.\n\nDesign becomes a lens of empathy to solve with, not a set of\nbusiness objects to align with the user. The stakeholder can\nstill disagree, but now they're disagreeing with cognitive\npsychology instead of someone's taste.\n\n---\n\n### The Ralph Loop\n\nLLMs miss things. Not sometimes. Every time. A single pass\nthrough any problem is probabilistically incomplete, the same\nway a 3D renderer's first pass produces a noisy image. The\nfix is the same too: run it again. Each pass catches what the\nlast one missed.\n\nThe [Ralph Loop](https://github.com/frankbria/ralph-claude-code)\napplies this to PFD. Run a design, plan, pitch, or system\nthrough the 5 layers. Loop until exit conditions fire and\ncompletion signals hold up under evaluation. Brute force\nrepetition against your own instructions, compounding toward\nan asymptote.\n\nRound 1 catches the obvious layer violations. Round 2 catches\nwhat only surfaces after the obvious ones are fixed. By round\n3, the conversation isn't about opinions. It's about which\nperceptual layer the remaining issues live on and what the\nscience says to do about them.\n\nMatch depth to stakes. Quick design decision: 1 pass. Feature\nspec: 5. Landing page or pitch deck: 10. Systems architecture\nor deep research: 50. I've run 100+ on things that needed it.\nEach pass costs more and returns less, so you stop when\nconfidence stops climbing.\n\n---\n\n## The Five Layers\n\nFix bottom-up. Upstream failures block everything downstream.\n\n| Layer | Gate | What Breaks If It Fails |\n|---|---|---|\n| **Cognitive Load (L0)** | Working memory: 3-5 chunks | Visitor leaves before processing anything. Bandwidth consumed by noise. |\n| **First Impression (L1)** | 50ms visual verdict | Attention never activates. Everything downstream multiplies by zero. |\n| **Processing Fluency (L2)** | Easy to process = feels true | Trust erodes subconsciously. The visitor can't explain why they don't believe you. |\n| **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. |\n| **Decision Architecture (L4)** | Structure shapes choice | The trail is broken. Interested visitors can't find the path to action. |\n\nFull framework (700+ lines, ~100 citations):\n[framework/PERCEPTION-FIRST-DESIGN.md](framework/PERCEPTION-FIRST-DESIGN.md)\n\n---\n\n## Try It\n\n### For Practitioners\n\nClone the repo. Read the framework. The five layers are a\ndiagnostic instrument: walk any design, email, pitch, or\nonboarding flow through them bottom-up. You'll see what's\nbroken and why, grounded in the same prediction error logic the\nbrain runs on.\n\n```bash\ngit clone https://github.com/skovalik/perception-first-design.git\n```\n\n### In Claude Code\n\nAutomated design thinking. The PFD skill runs on anything humans\nperceive: interfaces, landing pages, emails, ads, pitches,\nonboarding flows, documentation.\n\n**Install via your own marketplace** (no review required):\n\n```bash\n/plugin marketplace add skovalik/perception-first-design\n/plugin install perception-first-design@perception-first-design\n```\n\nAfter install, use the skill in four ways:\n\n```bash\n# Bare invocation — auto-detects mode from input\n\"PFD this landing page: https://example.com\"     # → evaluate (URL = artifact)\n\"Run PFD on our onboarding flow design problem\"  # → solve (problem = derivation)\n\"What happens if we remove the URL bar from Chrome?\"  # → analyze (hypothetical)\n\n# Force Mode 2 (solve): derives a solution from cognitive constraints\n/perception-first-design:solve \"Should we use a modal or inline expansion for the pricing FAQ?\"\n/perception-first-design:solve \"We're losing mobile users at checkout. What's failing?\"\n\n# Force Mode 1 (evaluate): corpus-backed audit of an existing artifact\n/perception-first-design:evaluate https://example.com\n\n# Force Mode 3 (analyze): descriptive cascade for hypotheticals and mechanism questions\n/perception-first-design:analyze \"What happens if Twitter removes the like button?\"\n/perception-first-design:analyze \"Why does dark mode feel premium even when contrast is worse?\"\n\n# Composite: run all three modes on the same input\n/perception-first-design:all \"We're considering removing the URL bar. Run the full PFD treatment.\"\n```\n\n**Mode 1: Evaluation.** Walk an existing design through the 5\nlayers. Each layer validates or flags. Works on URLs,\nscreenshots, mockups, HTML files, copy, emails, pitches.\nAnything humans perceive.\n\n**Mode 2: Derivation.** Work bottom-up through the 5 layers.\nEach layer produces a hard requirement. The solution emerges from\naccumulated constraints, not intuition, not competitive copying,\nnot what the HiPPO wants. This is the mode that generates\nanswers you wouldn't have reached by instinct.\n\n**Mode 3: Analysis.** Walk the 5 layers as predictive lenses,\nnot as constraints. Output cascading consequences, trade-offs,\nand integrative compounds. Good for hypothetical change\nquestions (\"what happens if X\"), mechanism questions (\"why does\nX work\"), and behavioral observations (\"users say X but do Y\").\nProduces results, not recommendations. The cognitive contract is\ndescriptive, not prescriptive.\n\nRule Zero: do not propose any solution until all 5 layers are\nanalyzed. The right answer is the only one that survives all\nfive filters. (Analysis follows a parallel rule: walk all 5\nlayers as descriptive lenses, then check trade-offs and\nintegrative compounds, before treating the cascade as complete.)\n\n---\n\n## Example output\n\nHere is the full `/pfd:all` output on a thought experiment about\nbrowser design. The question hits all five perceptual layers in\ndifferent ways and surfaces a finding the v0.6.0 `solve` mode\ncompressed to a single verdict.\n\n<details>\n<summary><strong>/pfd:all on \"What happens if we remove the URL bar and browser tabs from Chrome?\"</strong></summary>\n\nThree lenses, by cognitive contract.\n\n### Analyze (descriptive)\n\n5 layer-cascade consequences, 3 integrative compounds.\n\n#### 1. Working memory hits both axes simultaneously [Cognitive Load]\n\n*Users have to hold \"where am I\" and \"what tabs were open\" in their heads instead of in the UI.*\n\nThe URL bar and tabs are memory prostheses (location + parallel-task tracking). Removing both moves both into the head simultaneously. Power users running 5+ context-switching tasks hit the 4-5 chunk Cowan ceiling within a session.\n\n**What happens:** Light users do not notice for weeks. Power users hit the ceiling immediately, drop context, churn first. Tab groups (the hierarchical memory structure power users built workflows around) compound the loss.\n\n**Citations:** Cowan (2001, 2010) for working memory capacity ~3-5 chunks; Hassin et al. (2009) for WM cost of unconscious processing.\n\n#### 2. The \"is this a real browser\" first-impression splits across populations [First Impression]\n\n*The 50ms aesthetic credit reverses asymmetrically: casual users keep it, navigation-heavy users lose it instantly, touchscreen users hit a hard wall.*\n\nThree populations split immediately. Casual content consumers (social, news, single-page apps) keep first-impression high. Power users lose it within 30 seconds. Touchscreen-only users hit catastrophic failure (hover-discoverability does not exist on touch). Plus a novice cascade: cannot share URLs verbally because there is nothing to copy.\n\n**What happens:** Net first-impression bimodal. Touchscreen users churn first, novice users second, casual content consumers stay loyal.\n\n**Citations:** Lindgaard et al. (2006) for 50ms visual appeal; Kurosu & Kashimura (1995) / Tractinsky (2006) for aesthetic-usability effect.\n\n#### 3. Predictive processing failure cascades into the extension and automation ecosystem [Processing Fluency]\n\n*25-year-deep convention breaks AND every extension, password manager, and automation script that assumes URL/tab DOM exists breaks too.*\n\nPredictive processing breaks (the schema users pre-load in 200ms is gone). Safari's precedent shows users CAN adapt when only one signal changes; this proposal changes both. Adjacent infrastructure: extensions, automation, password managers all break. Password managers throwing errors because they cannot read the URL is the most dangerous version.\n\n**What happens:** Sessions feel 15-25% slower during transition. Trust erodes laterally. Extension breakage generates a separate \"something broke\" cascade misattributed to Chrome instability rather than the design change.\n\n**Citations:** Reber & Schwarz (1999) for fluency-truth effect; Clark (2013) for predictive processing; Forster, Leder & Ansorge (2013) for felt vs measurable fluency.\n\n#### 4. Behavior-vs-survey gap manifests as the L3 trap on PM dashboards [Perception Bias]\n\n*Surveys say \"I love clean interfaces.\" Analytics show users compensating with more windows, heavier bookmarks, search-as-URL-bar. PM dashboard reads \"NPS up, engagement flat\" for 6 months while power users churn invisibly.*\n\nNPS goes UP (clean things survey well). Session count goes UP (workflow fragmentation reads as engagement). Pages-per-session goes DOWN (misattributed to engagement quality). Task completion time goes UP (rarely tracked at right granularity).\n\n**What happens:** \"NPS up, engagement flat\" looks fine. PMs misread for 6 months until cohort retention shows power-user churn. By then rollback is politically expensive.\n\n**Citations:** Nisbett & Wilson (1977) for System 2 rationalization; Kahneman (2011) for autopilot decisions.\n\n#### 5. Substitution reshapes the trust surface and surrenders identity verification [Decision Architecture × Perception Bias]\n\n*Without URL bar and tabs, navigation routes through search engines. Chrome donates query share AND loses the visual surface that anchored phishing detection. Phishing volume drops, severity rises.*\n\nSelf-tax: Chrome donates 1-3% query share to search partner. Phishing trade-off: volume drops (lookalike-URL spoofing loses primary surface) but per-attempt severity rises (no surface to verify chase.com.evil.io). Regulatory cascade: EU DMA/DSA may classify URL display as regulated consumer-protection surface.\n\n**What happens:** Search partner gains query share. Identity-sensitive brands escalate to Google. EU/UK/AU/CA regulators file inquiries within 6 months. Banks run \"always verify the URL\" campaigns and discover the URL is no longer visible.\n\n**Citations:** Trope & Liberman (2010) for construal-level theory; Seckler et al. (2015) for trust as conjoint perceptual judgment.\n\n#### A. User backlash unfolds in three waves [Cross-layer + Social Aggregation]\n\n*Power-user tech press in days. Enterprise security in weeks. Regulators in months. Each wave narrows Google's response window.*\n\nWave 1 (days): Hacker News, Reddit, tech press. Migration to Firefox/Brave/Arc. Wave 2 (weeks): enterprise IT, security teams. Wave 3 (months): regulators, academic citation infrastructure.\n\n**What happens:** Backlash compounds louder than any single layer. Google's response window narrows; by Wave 3, regulatory action constrains future design freedom regardless of preference.\n\n**Citations:** Applied prediction; no direct framework citation. Closest adjacent: Seckler et al. (2015) for trust as a conjoint judgment that aggregates across users.\n\n#### B. Substitute behaviors lock in faster than re-introduction reverses [Cross-layer]\n\n*Once users build search-as-navigation habits over 4-6 weeks, rollback recovers WM and fluency but cannot recover the donated query share. Asymmetry is permanent.*\n\nRollback recovers WM and fluency cost. Does not recover habits. Some users never re-adopt URL-bar use because their workflow stabilized around bookmarks/history.\n\n**What happens:** Even successful rollback leaves ~0.5-1% query share permanently donated. The asymmetry is why the change is high-risk regardless of outcome.\n\n**Citations:** Hertwig & Erev (2009) for description-experience gap.\n\n#### C. The Chromium ecosystem inherits the bet [Cross-layer]\n\n*Chrome OS, Android Chrome, embedded WebViews, Edge/Brave/Arc/Vivaldi all face follow-or-fork. Edge gains positioning advantage by NOT removing the URL bar.*\n\nEmbedded WebViews carry the change forward inside other apps. Chromium derivatives must follow (inherit backlash) or fork (absorb maintenance). Chrome OS becomes harder to use as navigation OS because the URL is the shell.\n\n**What happens:** Edge gains relevance positioning as \"the one that didn't remove the URL bar.\" Some Chromium derivatives fork the URL-bar code permanently, fragmenting upstream-merge.\n\n**Citations:** Applied prediction; no direct framework citation. Strategic/ecosystem cascade rather than perceptual finding.\n\n### Solve (prescriptive)\n\n**R1 [Cognitive Load]:** The browser MUST externalize location and parallel-task tracking somewhere visible. WM cannot hold either.\n*Citations: Cowan (2001, 2010); Hassin et al. (2009).*\n\n**R2 [First Impression]:** Substitute affordances MUST be discoverable in the first 50ms across all device types. No hidden gestures or hovers without visual telegraph.\n*Citations: Lindgaard et al. (2006); Tractinsky (2006).*\n\n**R3 [Processing Fluency]:** If we break the address-bar-on-top schema, replace it with one equally consistent and predictable. URL/tab DOM/API surfaces MUST remain accessible programmatically.\n*Citations: Reber & Schwarz (1999); Clark (2013).*\n\n**R4 [Perception Bias]:** Measure behavior, not survey claims. Test by behavioral metrics, not stated preference.\n*Citations: Nisbett & Wilson (1977); Kahneman (2011).*\n\n**R5 [Decision Architecture]:** Replacement MUST preserve identity verification (anti-phishing surface), navigation control, and parallel-task management. Trust surface stays visible.\n*Citations: Trope & Liberman (2010); Seckler et al. (2015).*\n\n**Primary solution: Hide-on-idle, surface-on-approach.** URL bar and tabs auto-hide while reading content. Surface on cursor approach (desktop) or edge swipe (touch). All five R's satisfied.\n\n**Alternative 1: Vertical rail.** Persistent left sidebar, schema shifts horizontal to vertical, functions remain.\n\n**Alternative 2: Move tabs to the bottom; keep URL bar.** Lower-risk, smaller aesthetic gain.\n\n**Original proposal hard-fails R1, R3, R5.**\n\n**Gap:** Touch users underserved by all alternatives. The non-obvious solution: hide-on-idle plus a thin always-visible edge strip that expands on tap. Satisfies all five R's including the touch population.\n\n### Evaluate (rated)\n\n> **Skipped.** Evaluate requires an artifact (URL, screenshot, HTML, copy of the proposed minimal browser). Attach a mockup of any alternative to score against the layer rubric.\n\n---\n\n*Initial findings across three lenses. Ralph Loop any consequence/requirement, cite further, dive into a single mode, or ask any follow-up to dig deeper.*\n\n</details>\n\nWhat each section delivers:\n\n**Analyze** surfaces 5 layer-cascade consequences plus 3 integrative\ncompounds. Each consequence has a plain-language italic subtitle,\nmechanism prose, a \"What happens\" prediction, and 1-3 strongest\nsupporting citations from the framework's research base.\n\n**Solve** derives R1 through R5 from the layer constraints, then\nproposes solutions that satisfy all five (hide-on-idle, vertical\nrail, move tabs to bottom). The literal \"remove both\" proposal\nhard-fails three requirements. That hard-fail is the answer to\nwhether the original idea is good.\n\n**Evaluate** skips because no artifact was provided. Attach a\nmockup of any alternative to score it against the layer rubric.\n\nThe output ends with one italic line inviting deeper paths: Ralph\nLoop a finding, cite further, dive into one mode, or ask any\nfollow-up.\n\n---\n\n## What's in the Repo\n\n```\n.claude-plugin/      Plugin manifest + marketplace catalog\n  plugin.json        Metadata (name, version, license, keywords, path overrides)\n  marketplace.json   Self-hosted marketplace entry pointing at this repo\n\nframework/           The complete PFD framework (v3.6, ~100 citations)\n  PERCEPTION-FIRST-DESIGN.md\n  ADHD-CURB-CUT.md   ADHD and autism as diagnostic instruments, not disclaimers\n\ncorpus/              The evaluation engine\n  core/              Rubric, constraints, psychology reference, output schema\n  heuristics/        26 rules across 5 layers with psychology citations\n  design-systems/    Tailwind, WordPress, Shopify detection profiles\n  worked-examples/   7 calibrated examples from terrible (18/100) to excellent (92/100)\n\nskills/pfd/          The PFD skill (derivation protocol, layer summaries)\n  references/learnings/    29 curated learnings sharded by primary layer\n\ncommands/            /perception-first-design: solve, evaluate, analyze, all\n\nscripts/             gen-pfd-index.py (regenerate _index + _search from atoms)\n```\n\n> The framework is open. The calibration is earned.\n>\n> This repo ships 29 curated learnings as atom files under\n> `skills/pfd/references/learnings/`, organized by perceptual\n> layer (`L0/`, `L1/`, `L2/`, `L3/`, `L4/`, `meta/`, `cross/`) with\n> a generated `_index.md` and `_search.json` for lazy-load.\n>\n> Contribute a learning via pull request or the\n> [Learning Submission issue template](.github/ISSUE_TEMPLATE/learning-submission.md).\n\n---\n\n## ADHD and the Curb-Cut Effect\n\nI designed this framework with autism and ADHD as diagnostic\ninstruments. The cognitive constraints I design around are\nconstraints every user has. Mine are just louder.\n\nA page that overloads an ADHD user's working memory is\noverloading everyone's. The ADHD user just notices first. Same\nprinciple as curb cuts: built for the constrained case, better\nfor everyone.\n\nFull write-up:\n[framework/ADHD-CURB-CUT.md](framework/ADHD-CURB-CUT.md)\n\n---\n\n## The Book\n\n*Make Me Think: Perception-First Design for the Post-Usability\nEra* by Stefan Kovalik. 12 chapters at\n[aurochs.agency/writing/make-me-think/](https://aurochs.agency/writing/make-me-think/).\nThe framework is the reference; the book is the story.\n\n---\n\n## Citation\n\n```\nKovalik, S. (2025-2026). Perception-First Design: A cognitive\npsychology framework for design. Version 3.6. CC BY-SA 4.0.\nhttps://github.com/skovalik/perception-first-design\n```\n\nMachine-readable: [CITATION.cff](CITATION.cff)\n\n## License\n\n**CC BY-SA 4.0.** See [LICENSE](LICENSE).\n\n**Practice exemption:** applying PFD in practice — running\nanalyses, producing recommendations, delivering client work,\ndesigning products with PFD principles — does not create a\nderivative work and is not subject to share-alike. You can\napply PFD commercially without any obligations on your work\nproduct. Only redistributions or modifications of the\nframework text itself trigger share-alike.\n\n\"Perception-First Design\" is a trademark (USPTO Serial 99686343).\nThe methodology is open and I want it used and shared. Please\ncredit it.\n\nIf you want to use the name commercially (a product, service,\ncertification, or branded offering), just email me at\n**stefan@aurochs.agency**. I'm very likely to say yes. I mostly\nwant to know who's using it and how.\n\n**Attribution:** *Perception-First Design™ by Stefan Kovalik / Aurochs.*\n\nSee [NOTICE](NOTICE) for full terms.\n\n## Contributing\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md). Key rule: every claim\nneeds a citation or must be labeled \"practitioner observation.\"\n\n## About\n\nStefan Kovalik. BA Psychology, UC Santa Barbara. 15 years design\nand development. Autism and ADHD as diagnostic instruments, not\ndisclaimers.\n\n[aurochs.agency](https://aurochs.agency) /\n[LinkedIn](https://linkedin.com/in/kovalik/) /\n[Bluesky](https://bsky.app/profile/stefankovalik.bsky.social)\n",
  "bytes": 21689,
  "sha": "202c5d3c149c8853cac82b5e6792c18b1392164f9249524710dd714c15c1ddb9",
  "repo_slug": "skovalik/perception-first-design",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_skovalik_perception_first_design_percept_4d4f41de/readme"
}