Skip to content
Conduit

skill

claude-skill-aesthetic-foundations

A Claude Code skill that injects aesthetic principles from painting, photography, graphic design, and Eastern visual tradition into UI/design decisions.

caoxg/claude-skill-aesthetic-foundationscommunitylistedunreviewed
Use skill

Set up

Skills are installed by placing their folder where your agent loads skills.

Download ZIP from GitHub Open the repository

The download comes from github.com/caoxg/claude-skill-aesthetic-foundations itself, not from our server, so what you get is exactly what its author published.

Install instructions come from the README

Skills do not use an MCP config. Follow the steps in the README below.

README

synced Oct 26, 2026

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

SkillWhat it doesWhen to use
aesthetic-foundations (this)General aesthetic principles + critique frameworkVisual judgment, "is this beautiful", reviewing a screenshot
frontend-designProduction-grade web UI implementationBuilding/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")
↑↓ navigate openesc close