From swiss-design
Use when generating any output a human will read — interfaces, documentation, data visualizations, CLI output, tables, diagrams
How this skill is triggered — by the user, by Claude, or both
Slash command
/swiss-design:swiss-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
**Core principle:** Clarity through reduction. Every element must earn its place. Remove until removing more would harm understanding.
Core principle: Clarity through reduction. Every element must earn its place. Remove until removing more would harm understanding.
| Principle | Rule | Test |
|---|---|---|
| Reduction | If it doesn't serve comprehension, it's noise. Remove it. | Can I remove this without losing meaning? |
| Grid | Mathematical structure creates visual order. Alignment implies relationship. | Does alignment create rhythm and relationships? |
| Hierarchy | Control attention through contrast in size, weight, position. Three levels max. | Is there a clear reading order at a glance? |
| Typography | Type carries content and creates structure. One typeface, two weights. | Is type doing the structural work, not color or decoration? |
Deep reference for each: [reduction.md], [grid.md], [hierarchy.md], [typography.md]
Before finalizing, run each test above. If any answer is "no," revise. This is not optional.
Verification — the grayscale test: If the design doesn't work in grayscale, the structure is weak. Color supplements hierarchy; it never creates it.
Verification — the squint test: Blur your vision. What do you see first? That's your primary element. If nothing stands out, hierarchy is broken.
| Failure | Symptom | Fix |
|---|---|---|
| Decoration creep | Gradients, shadows, icons that don't encode meaning | Remove. Does comprehension survive? |
| Hierarchy collapse | Everything bold, 12 font sizes, rainbow colors | Three levels max. One lever per level. |
| Grid abandonment | "Just this once" alignment exceptions | Fix the system, don't patch around it |
| Color as crutch | Hierarchy exists only in color, not structure | Make it work in grayscale first |
| Filling empty space | Adding elements because "it looks empty" | Whitespace is breathing room, not a problem |
All of these mean: you're decorating, not designing. Strip back.
npx claudepluginhub zemptime/zemptime-marketplace --plugin swiss-designEnforces anti-slop UI/UX standards for building components, selecting colors/layouts/typography, and reviewing visual designs to avoid generic AI aesthetics.
Indexes 11 visual design principle skills for layout, typography, color, hierarchy, accessibility, and more. Use to start design conversations, select skills, or evaluate UIs, websites, dashboards.
Guides visual hierarchy in UIs using size, weight, color, spacing, position, and density. Defines levels, patterns for heroes/cards/forms, and practices like squint test.