aesthetic-foundations

A Claude Code skill that gives Claude general aesthetic judgment — drawing on painting, photography, graphic design, and Eastern visual tradition.

> Not a web/CSS framework checklist. Complements rather than replaces > frontend-design.

---

What it does

Default Claude has read the design literature but doesn't retrieve it consistently when looking at your UI. It defaults to "generic Material / Bootstrap muscle memory." This skill, when triggered, activates the aesthetic vocabulary so the critique is grounded in principles:

• Composition — visual weight, rule of thirds, leading lines, figure-ground, tension & resolution
• Color — Munsell hue/value/chroma, Albers relativity, Itten 7 contrasts, value-first hierarchy, limited palette
• Typography — Bringhurst measure/leading/scale, serif vs sans semantic load, type as texture
• Grid & rhythm — Müller-Brockmann grid systems, modular scale, 8pt, breaking the grid
• Visual hierarchy — Gestalt principles, 3-level law, white space as hierarchy, one-page-one-CTA (Rams)
• Ma & negative space — Japanese 間, Chinese 留白 / 计白当黑, 4 uses of white
• Master references — Vermeer, Mondrian, Rothko, Hopper, Sargent, 八大山人, 倪瓒, Hokusai, Monet (painters) — Bresson, Avedon, Saul Leiter, 杉本博司, Stephen Shore (photographers) — Rams, Vignelli, Tschichold, Saul Bass, Lupton, 原研哉, Paula Scher (designers) — full Chinese aesthetics tradition (留白, 气韵, 文人画, 园林, 民间美术)

The 7-step critique protocol (3-second first impression → squint test → value test → negative-space test → crop test → master comparison → concrete move list) replaces "I think it should be cleaner" with reasoned design moves.

---

Install

/plugin marketplace add caoxg/claude-skill-aesthetic-foundations
/plugin install aesthetic-foundations@aesthetic-foundations

After install + Claude Code reload, the skill activates automatically when Claude is asked to evaluate UI / make typography/color/layout decisions / review a screenshot. You can also force-trigger it explicitly:

> "Use the aesthetic-foundations skill to review this page."

---

What's inside

skills/aesthetic-foundations/
├── SKILL.md                              entry: when to trigger, what to load
├── critique-protocol.md                  the 7-step review procedure
├── references/
│   ├── composition.md                    构图: visual weight / paths / negative space
│   ├── color.md                          色彩: Munsell / Albers / Itten 7 contrasts
│   ├── typography.md                     字体: Bringhurst / scale / mixed scripts
│   ├── grid-and-rhythm.md                网格: Müller-Brockmann / 8pt / modular scale
│   ├── visual-hierarchy.md               层级: Gestalt / 3-level / emphasis toolbox
│   └── ma-and-negative-space.md          留白: 間 / 计白当黑 / 4 uses of white
└── masters/
    ├── painters.md                       9 painters as design reference
    ├── photographers.md                  7 photographers as framing reference
    ├── designers.md                      7 designers as systematic-aesthetic reference
    └── 中式审美.md                       Chinese visual tradition (separate file by
                                          intent — it's a distinct mode, not a footnote)

~1900 lines of reference. The skill is knowledge dense, not procedural — when triggered, Claude has the right vocabulary in context; the actual critique is improvised against the page in front of you.

---

Language

Most reference docs are in Chinese (zh-CN), with English technical terms inline where standard (Munsell / Albers / Gestalt / Bringhurst). The skill itself works regardless of your project language — it's the concepts that get loaded, not a particular vocabulary.

If you need English-only docs, PRs welcome.

---

Relation to other skills

| Skill | What it does | When to use | |---|---|---| | aesthetic-foundations (this) | General aesthetic principles + critique framework | Visual judgment, "is this beautiful", reviewing a screenshot | | frontend-design | Production-grade web UI implementation | Building/coding components, picking framework styles |

They compose. aesthetic-foundations decides what should look like,

frontend-design shows how to ship it in React/CSS.

---

Credits

Distilled from observations during a visual redesign pass on a private project — the principles ended up reusable enough to extract.

License: MIT

---

Contributing

Issue / PR welcome on:

• Adding more master references (especially under-represented traditions:

Persian miniatures, Indian/Mughal, African textile, Latin American modernism)

• English translations
• New reference categories (motion design? typography for screens-only?)
• Critique-protocol refinements based on real-world misses

Not welcome:

• Style-specific opinions packaged as universals ("brutalist is the only

honest design")

• AI-slop generic design lists ("12 web design principles")