Design Principles

Apply universal design principles to UI/UX review, design feedback, and design documentation. Based on "Universal Principles of Design" (Lidwell, Holden, Butler) — 100 cross-disciplinary principles covering usability, perception, learning, appeal, and decision-making. Use this skill whenever the user asks to review a UI, critique a design, evaluate a mockup or wireframe, give design feedback, write a design spec or design doc, discuss design tradeoffs, improve a layout, or apply design thinking to a product decision. Also trigger when the user asks about specific design concepts like affordanc

8 stars 1 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add shualippe/design-principles-skill --skill design-principles

Manual install

git clone --depth 1 https://github.com/shualippe/design-principles-skill.git /tmp/design-principles-skill
mkdir -p ~/.claude/skills
cp -r /tmp/design-principles-skill/. ~/.claude/skills/design-principles

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

From the SKILL.md

# Universal Design Principles

A skill for applying 100 cross-disciplinary design principles to UI/UX work — design reviews, feedback, documentation, and decision-making.

## When to use this skill

- **Design review / critique**: User shares a UI, mockup, wireframe, or screenshot and wants feedback
- **Design docs / specs**: User is writing a design document and wants principled rationale
- **Design decisions**: User is weighing tradeoffs (e.g., flexibility vs. usability, aesthetics vs. function)
- **Concept explanation**: User asks about a specific design principle or wants to understand a pattern
- **Improvement suggestions**: User wants ideas for making a UI better

## Core behavior

When this skill triggers, read `references/principles.md` to access the full catalog of 100 principles with definitions, UI/UX applications, and cross-references. The reference file is your authoritative source — always consult it rather than relying on memory alone.

### Mode 1: Design Review & Feedback

When the user shares a design (screenshot, description, mockup, URL) for review:

1. **Identify what's working well** — lead with strengths, citing the principles they satisfy
2. **Surface potential issues** — flag problems through the lens of relevant principles
3. **Recommend improvements** — give concrete, actionable suggestions tied to principles

Read the full skill on GitHub

Details

Skill name: design-principles
Repository: shualippe/design-principles-skill
Repo updated: 21 April 2026

FAQ

What does the Design Principles skill do?

How do I install the Design Principles skill?

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

Is Design Principles popular?

It lives in shualippe/design-principles-skill, which has 8 GitHub stars and 1 forks.

Related skills

Elec Sheep Longform

bleakbelladonnals/elec-sheep-longform

Create, revise, and quality-check Elec Sheep branded Chinese educational carousels and vertical long-form infographics while preserving the exact robot-sheep IP, warm hand-drawn blue-orange visual system, editable SVG typography, and batch rendering workflow. Use when the user mentions 电子羊, Elec Sheep, the established mascot/IP, 小红书科普长图, an 8-page knowledge carousel, same-character/same-style continuation, or asks to revise existing Elec Sheep pages without identity or layout drift.

Frontend & Design

Apple Cn Checkout

Caoran1314/apple-cn-checkout

用 bsk_* 浏览器工具在苹果中国官网（apple.com.cn）完成 iPhone 选购与结账。含实测的稳定选择器、5 级门控的一轮批量配方、以及会造成静默失败的坑（networkidle 永不满足 / CSS 猜选择器会打偏 / 点击后立刻读取是旧 DOM）。当用户要求在 Apple 中国官网买手机、加购物袋、或走到微信支付时使用。

Frontend & Design

Figjam Builder

prasantloki/figjam-builder

Build or modify FigJam boards via the Figma Plugin API. Use for creating, editing, extending, restructuring, or fixing the layout of a FigJam board. Triggers on "make a FigJam", "build a board", "update this FigJam", "fix the layout", "/figjam-builder", or a FigJam URL paired with a visual or content change.

Frontend & Design

Personal Brand Ops

YonasValentin/personal-brand-ops

Build personal brands that convert customers, not just rack up views. Use this skill whenever the user wants to define, scale, or operationalize a personal brand or content operation — including brand positioning, content strategy, posting cadence, platform selection, storytelling, media team hiring, onboarding, 1:1 cadences, work-mode design, or trust-first monetization. Trigger on phrases like "build my brand," "scale my content," "should I post on X platform," "what should I post about," "hire a content team," "FTE vs agency," "30/60/90 onboarding," "media team org chart," "monetize my audi

Frontend & Design

Gcw

idonafraid-create/GCW

Analyze, reproduce, recover, and creatively adapt authorized public websites through a staged, evidence-driven workflow. Use for GCW, website teardown or cloning, faithful baselines, design-DNA extraction, WebGL/Canvas/shader reverse engineering, source-loss recovery, route reconstruction, and source-versus-local visual regression.

Frontend & Design

Mqc Female Lawyer Brandcast

MiaoQichuan/mqc-female-lawyer-brandcast

女律师 IP 形象内容工作台。一套固定的风格，播成多种内容形态——用内置的 53 张女律师漫画形象素材，把法律内容做成成套图文：朋友圈九宫格（八股结构）、小红书 3:4 多图、公众号（封面 + 正文插图组）、单张方图、竖版长图。凡是用户要写公众号推文、小红书图文、朋友圈九宫格、普法内容、案例解读、法律科普，或者提到"配图""插图""封面""九宫格""做成图""普法漫画""案情漫画""律师形象""IP 形象"，都要使用这个 Skill。注意：公众号要的是散落在正文段落之间的插图和两张封面，**不是一整张长图**，做公众号一律走 wechat 格式。用户直接给短句让你排版，或者丢一整篇长文、一段案情让你梳理提炼再配图，两种都用它。素材库已内置形象素材，不要调用任何文生图工具。

Frontend & Design

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