perception-first-design — Claude Code plugin: 5-layer design diagnosis
Walks a page, email or pitch through five perceptual layers and tells you which one to fix first. Useful when the argument is about taste instead of causes.
/plugin marketplace add anthropics/claude-plugins-community
/plugin install perception-first-design@claude-communityWhat perception-first-design does
The plugin ships a skill that runs any material through five layers: cognitive load, the 50ms first impression, processing fluency, perception bias and decision architecture. You fix them bottom-up, since a failure low in the stack blocks everything above it. The framework itself runs 700+ lines with roughly 100 peer-reviewed citations.
Three modes. evaluate audits something that already exists — a URL, screenshot, mockup, HTML file or copy. solve derives a solution from cognitive constraints rather than instinct. analyze works through hypotheticals like removing the URL bar from a browser. A composite all mode runs all three on the same input. Without an explicit call, the skill picks a mode from how you phrase the request.
Match the number of passes to the stakes: the author suggests one pass for a quick design decision, five for a feature spec, ten for a landing page or pitch deck. Later passes return less than earlier ones, so you stop once confidence flattens out. Evaluation needs the artifact itself — a link, a file or text.
What it helps with
- find out why visitors leave a landing page before reaching the headline
- derive interface requirements from cognitive constraints instead of taste
- show a stakeholder what is wrong with their instinct, citing research
- audit an onboarding flow or email for breaks in the path to action
- reason through a hypothetical like removing a UI element, layer by layer
Example prompts for the agent
- PFD this landing page: https://example.com
- Run PFD on our onboarding flow design problem
How to install perception-first-design
Plugin marketplace
/plugin marketplace add anthropics/claude-plugins-community/plugin install perception-first-design@claude-communityStep by step, with commands for each platform: Claude Code plugins: marketplaces, installing, and building your own
Questions about perception-first-design
How do I install perception-first-design in Claude Code?
Through the marketplace: first /plugin marketplace add anthropics/claude-plugins-community, then /plugin install perception-first-design@claude-community.
What does perception-first-design do?
It runs a design, email or pitch through five perceptual layers and shows which layer is failing and in what order to fix it. It works in evaluation, derivation and analysis modes.
What is the difference between evaluate, solve and analyze?
evaluate audits an existing artifact against the layers, solve derives a solution from cognitive constraints, and analyze works through hypothetical questions. The all mode runs all three on one input.
