By name: vignelli description: "Vignelli lens — Restraint as clarity. Type discipline, grid consistency, color economy, systematic limitation. Read-only diagnostic." user_invocable: true
Vignelli Lens — Atomic Skill
Purpose
Massimo Vignelli's standard: "The life of a designer is a life of fight — fight against the ugliness." Ugliness, for Vignelli, meant excess. Too many typefaces. Arbitrary grids. Color without reason. This lens evaluates whether the design achieves clarity through disciplined limitation, or whether it mistakes variety for richness.
Read-only diagnostic. Evaluates screenshots. No file changes.
Usage
/vignelli # Evaluate all screenshots
/vignelli [screenshot-path] # Evaluate a single screenshot
Context
Read
- Screenshots from
.audit/screenshots/(latest set) — REQUIRED. Never evaluate from source code alone. docs/visual-reference-index.md→ active reference set- Reference images from active set relevant to this lens's domain
.audit/rubric.mdif it exists
Invoke (as needed)
/print-craft→ material quality baseline → PRESSED/ADEQUATE/DIGITAL (for texture-related questions)
Lens Criteria (embedded)
The evaluation questions below ARE this lens's criteria.
Evaluate
Step 0: Read Screenshots (Mandatory)
Before evaluating ANY question below, use the Read tool to view the screenshot images provided in your prompt. Claude can read PNG files — the Read tool returns visual content.
Read each screenshot path provided. Base ALL evaluations on what you SEE in the screenshots, not on source code, CSS, or documentation. If no screenshot paths were provided, state "NO SCREENSHOTS PROVIDED — cannot evaluate" and stop.
Do NOT fall back to reading SCSS, CSS, or HTML files. The evaluation is of the RENDERED output, not the source.
"Restraint. How many type sizes? Is the grid mathematical? Does limitation produce clarity?"
For each screenshot, ask:
V1. Type discipline — how many sizes?
Look at the screenshot and count distinct type sizes visible on the page. Vignelli used a maximum of three sizes in most work. More than four is almost always a sign of indecision. Flag: More than four distinct type sizes. Sizes that differ by trivially small amounts (suggesting no intentional scale). Display type competing with body type for attention.
V2. Grid consistency
Does the layout follow a visible mathematical structure? Are elements aligned to a consistent grid, or do they feel arbitrarily placed? Vignelli's grids were simple and unbreakable. Flag: Elements that break alignment without conceptual justification. Inconsistent margins or gutters. Layout that shifts logic between sections.
V3. Color restraint
How many colors are in use? Are they systematic or decorative? Vignelli treated color as information, not ornament — each color carried meaning. Flag: More than three or four colors without clear semantic purpose. Color used for decoration rather than hierarchy or meaning. Gradients or effects that add complexity without communication.
V4. Systematic hierarchy
Is there a clear, repeatable system for how information is ranked? Headings, subheadings, body, captions — each level should be immediately distinguishable and consistent across the entire design. Flag: Hierarchy that changes between pages or sections. Levels that are ambiguous (is this a heading or a subheading?). Decorative treatments that obscure the information order.
V5. Does limitation produce clarity or feel forced?
This is the crucial test. Restraint is not the same as poverty. A Vignelli design feels inevitable — as if nothing else was possible. A merely minimal design feels like something is missing. Flag: Restraint that reads as emptiness rather than intention. Limitation that produces confusion (too few visual cues to navigate). Austerity that feels performative rather than purposeful.
Output
Print in conversation. No file changes. Format:
# Vignelli Lens — "Restraint as clarity"
## Overall: [DISCIPLINED / ADEQUATE / UNDISCIPLINED]
**V1. Type discipline** — [observation]
[Evidence from screenshots. Specific count of sizes observed.]
**V2. Grid consistency** — [observation]
[Evidence. What aligns, what breaks.]
**V3. Color restraint** — [observation]
[Evidence. Colors identified, their apparent purpose.]
**V4. Systematic hierarchy** — [observation]
[Evidence. How information levels are distinguished.]
**V5. Limitation produces clarity?** — [observation]
[Evidence. Whether the restraint feels purposeful or impoverished.]
Direction (if not all passing)
For each non-passing question, state:
- What specifically is wrong (with evidence from screenshots)
- What specifically to change (exact CSS/SCSS/HTML change, not "improve X")
- Which files to modify
- What the result should look like after the change
Limitations
Claude's visual assessment, not expert critique. Useful as structured feedback, not authoritative judgment.
Called By
/design-reviewcoordinator — runs in parallel with other visual lenses- Standalone — usable anytime