# UI Psychology

> Apply psychology frameworks to UI analysis, user flow design, interface generation, and design audits. Activate when the user mentions: UI improvement, conversion rate, user drop-off, design psychology, Cognitive Load, anchoring effect, social proof, FOMO, CTA optimization, onboarding design, UX audit, design principles, user experience, why users do not click, interface design, user flow, flow design, signup flow, purchase flow, onboarding flow. Supports four modes: ANALYZE, USERFLOW, GENERATE, AUDIT.

- Skill: `teccat/ui-psychology` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds@latest add teccat/ui-psychology`
- Raw SKILL.md: https://api.skillmd.com/api/skills/teccat/ui-psychology/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Security
- Author: TecCat (https://skillmd.com/u/teccat)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/teccat/ui-psychology

---


# UI Psychology Skill

Every design decision backed by psychology research.
Not just making interfaces look good, making users act.

Author: TecCat
Version: v2.0

---

## Quick Mode Selection

| Situation | Mode |
|-----------|------|
| Existing design, want to know what is wrong | ANALYZE |
| Design a user journey | USERFLOW |
| Design spec from scratch | GENERATE |
| Full psychology scan of product | AUDIT |

---

## 3-Layer Psychology Model

### Layer 1 - Perception
| Principle | Design Meaning |
|-----------|---------------|
| Pre-attentive attributes | Color, size, motion decide attention within 250ms |
| Visual hierarchy | F-pattern for content, Z-pattern for landing pages |
| Color psychology | Blue=trust, Red=urgency, Green=safety, Orange=energy |
| White space | More white space = higher perceived quality |
| Gestalt | Proximity groups elements; similarity signals category |

### Layer 2 - Cognition
| Principle | Design Meaning |
|-----------|---------------|
| Cognitive Load | Extra options and steps consume decision energy |
| Hick's Law | More options = slower decisions, keep to 7 or fewer |
| Miller's Law | Working memory limit is 7 plus or minus 2 items |
| Progressive disclosure | Show core first, expand on demand |

### Layer 3 - Behavior
| Principle | Design Meaning |
|-----------|---------------|
| Loss Aversion | Pain of losing = 2x pleasure of gaining |
| Anchoring Effect | First number sets reference for all judgments |
| Social Proof | User counts reduce perceived decision risk |
| Zeigarnik Effect | Unfinished tasks create pull to complete |
| Reciprocity | Give value first, then ask for action |
| Peak-End Rule | Memory = peak moment plus ending |

---

## MODE A: ANALYZE
Trigger: Existing design, want to know why it works or not.
Steps: Apply 3-layer model, reference patterns.md, output score and fix list.

## MODE U: USERFLOW
Trigger: Design or optimize a user journey.
Steps: Read userflow.md for PACE framework, map psychology per step, output flow doc.

## MODE B: GENERATE
Trigger: Design a page or component from scratch.
Steps: Clarify product type and core action, output design spec with psychology basis.

## MODE C: AUDIT
Trigger: Systematic scan of entire product.
Steps: Read audit-checklist.md (85 items), score each, output roadmap.

---

Built by TecCat https://github.com/TecCat MIT License