Design Psychology

Audit or build any website/UI against research-backed conversion and design-psychology principles (Hick's Law, Von Restorff, Goal Gradient, Peak-End, Fitts's Law, the Aha moment, loss aversion, social proof, feedforward, labor illusion, and ~50 more). Use when reviewing a live URL or a local codebase for conversion/UX quality, or when designing or editing any user-facing surface — landing pages, pricing, onboarding, CTAs, forms, empty states, error flows, mobile screens. Auto-detects whether the target is a live URL or local source files. Brand-agnostic: derives the product's own tokens and vo

Install

skills CLI (Claude Code, Cursor, Codex and more)
npx skills add Fh-Ndiritu/design-psychology-skill --skill design-psychology
Manual install
git clone --depth 1 https://github.com/Fh-Ndiritu/design-psychology-skill.git /tmp/design-psychology-skill
mkdir -p ~/.claude/skills
cp -r /tmp/design-psychology-skill/. ~/.claude/skills/design-psychology

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Design Psychology

A portable standard for making interfaces that **convert on first contact, retain through genuine value, and feel premium** — grounded in ~60 named cognitive principles. It runs in two modes against any website, regardless of stack or brand.

This file is the orchestrator. It tells you *how to run*. The depth lives in [`references/`](references/), loaded on demand. Do not paste an entire reference file into your reasoning unless the task needs it — pull the specific principle.

---

## Two modes

| Mode | Trigger | Output |
| --- | --- | --- |
| **AUDIT** | "review / critique / score / improve this site/page/flow," a URL, a repo to evaluate | A prioritized findings report with severity, the violated principle, the exact location, and one concrete fix per finding. |
| **BUILD** | "design / build / write / redesign this screen / CTA / pricing / onboarding / empty state / error" | The artifact itself (markup, copy, component) produced *through* the principles, plus a short rationale tying each major decision to a principle. |

If the request is ambiguous, default to **AUDIT** when an existing surface is named, **BUILD** when a new artifact is requested. When both apply ("review and fix"), audit first, then build the fixes.

---

## Step 0 — Detect the input source (always first)
Read the full skill on GitHub

Details

Skill name
design-psychology
License
MIT
Repo updated
29 June 2026

FAQ

What does the Design Psychology skill do?

Audit or build any website/UI against research-backed conversion and design-psychology principles (Hick's Law, Von Restorff, Goal Gradient, Peak-End, Fitts's Law, the Aha moment, loss aversion, social proof, feedforward, labor illusion, and ~50 more). Use when reviewing a live URL or a local codebase for conversion/UX quality, or when designing or editing any user-facing surface — landing pages, pricing, onboarding, CTAs, forms, empty states, error flows, mobile screens. Auto-detects whether the target is a live URL or local source files. Brand-agnostic: derives the product's own tokens and vo

How do I install the Design Psychology skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add Fh-Ndiritu/design-psychology-skill --skill design-psychology. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Design Psychology popular?

It lives in Fh-Ndiritu/design-psychology-skill, which has 7 GitHub stars and 0 forks.

Related skills

Game UI Mobile Friendly Design

7

dungnotnull/game-ui-mobile-friendly-design-agent-skill

Mobile-Friendly Game UI Design & Touch-Friendly Interaction — Bulletproof production-grade harness for Mobile Game UI/UX & Touch Interaction Design analysis with zero placeholder code. Use this skill whenever the user asks for mobile game UI evaluation, touch interaction design, gesture discoverability analysis, accessibility assessment for games, one-handed mobile usability, thumb zone layout optimization, Fitts's Law application to touch targets, colorblind accessibility in games, or any mobile game interface design question. This skill provides evidence-backed analysis with academic citatio

Frontend & Design

Brand Guidelines

7

piaoyinghuang/brand-consistency-ai-skill

Universal brand guideline engine for producing, reviewing, and suggesting brand-compliant marketing materials for ANY company. Use this skill whenever a task involves brand identity, visual consistency, marketing collateral, or corporate design standards. Triggers include: brand guidelines, brand book, visual identity, corporate identity, brand compliance, brand review, brand audit, marketing materials, social media copy, poster design, banner design, PPT template, presentation template, company brochure, brand colors, typography guidelines, tone of voice, brand voice, logo usage, brand assets

Frontend & Design

Tidyfactor Design

7

TidyFactor/Design

Code-native UI design lifecycle engine (Figma alternative) with Contextual Decision Layer (CDL). Supports all 7 design stages with zero per-page CSS/JS and pluggable CSS foundations (Native, Tailwind, daisyUI, Pico, Hybrid). Trigger on commands 'brief', 'study', 'init', 'brand', 'tokens', 'palette', 'layout', 'components', 'page', 'dashboard', 'motion', 'i18n', 'audit', 'deploy', or design system requests.

Frontend & Design

Blindspot

7

IdanTayree/Blindspot

Turn an idea — or a half-planned project already underway — into a buildable blueprint, by interviewing the user one question at a time until the unknowns run out, then deep-reading and verifying real open-source components for each part. Use this whenever someone describes something they want to build but has not specified it ('I want to build an app that…', 'I have an idea for…', 'help me plan/spec/scope this', 'turn my idea into a plan'), whenever they ask for a PRD, a spec, a product requirements document or a build plan, AND equally whenever someone says an existing project feels under-pl

Frontend & Design

Wedding Invitation

7

wyx-sg/wedding-invitation-skill

Use this skill when the user wants to design and generate a wedding invitation card in any language. The skill drives a conversational workflow — you gather the couple's info and style preferences, design a bespoke HTML template from scratch (no template selection), render it locally with headless Chrome, produce a print-ready PNG, and include a live tweak panel so the user can adjust colors, fonts, frames, and optional components without rebuilding. All data stays on the user's machine; no cloud, no signups, no data leaves.

Frontend & Design

Bauhaus Design

7

capsrock/bauhaus-design-skill

Create frontends, posters, dashboards, and web UIs rooted in Bauhaus and Swiss International Typographic Style (Internationale Typografische Stil) design principles. Use this skill when the user mentions Bauhaus, Swiss design, International Typographic Style, grid systems, Josef Müller-Brockmann, Max Bill, Jan Tschichold, Herbert Bayer, László Moholy-Nagy, constructivism, De Stijl-influenced UI, or asks for designs that emphasize mathematical grids, typographic hierarchy, geometric abstraction, asymmetric layouts, or modernist clarity. Also trigger when the user wants a 'clean modernist' look,

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.