What is the visual-design-mastery skill?
The visual-design-mastery skill is a SKILL.md in phazurlabs/sumi that codifies visual design craft. Your AI coding agent scores an interface on 10 weighted dimensions, grounds feedback in 70 canonical rules and applies designer pattern libraries, color science and composition techniques.
The visual-design-mastery skill offers designer-grade visual judgement. It codifies principles from 36+ designers and 23 canonical books, and it applies when you are scoring visual quality or when work looks cheap but you cannot say why.
Its premise is that the gap between a vibe-coded app and a professionally designed product is learnable, systematic craft. Every world-class designer applies a finite set of principles: typographic hierarchy, color harmony, spatial rhythm, compositional balance and material craft.
How the score works
Any interface is rated on 10 dimensions, each scored 1 to 10. A weighted total produces a comparable quality score, with benchmarks that run from 3.0 for a vibe-coded default to 9.0 and above for an Awwwards Site of the Day.
What the skill covers
- A visual design philosophy section, followed by 36+ designer pattern libraries grouped by era and style.
- 70 canonical rules across Layout, Typography, Color, Composition and Detail.
- Color mastery covering OKLCH, HCT and a dark mode color strategy.
- Typography mastery, composition techniques and micro-craft details.
- Visual trends for 2025 to 2026, split into ascending, fading and timeless.
Who the visual-design-mastery skill is for
Best for
- Scoring the visual quality of an interface against a weighted 10 dimension system.
- Explaining why work looks cheap by citing canonical rules and designer patterns.
- Building color, type and grid systems from published authority such as Refactoring UI and Laws of UX.
Not for
- Choosing from 50+ chart types, composing dashboards and designing KPI cards, which the data-visualization-mastery skill covers.
- Applying iOS 26 Liquid Glass, Material 3 Expressive, modern CSS, watch, TV, automotive and visionOS rules, which the platform-visual-standards skill covers.
- Producing mockups, icons, illustrations and video through MCP image models, which the ai-design-generation skill covers.
- Judging why an interface confuses people with affordance, signifier and feedback rules and a 10 point diagnostic, which the design-everyday-things skill covers.
How to install Visual Design Mastery Skill: Score and Judge Visual Quality
/plugin marketplace add phazurlabs/sumi
/plugin install sumi@sumi-marketplaceAdd the marketplace
Run
/plugin marketplace add phazurlabs/sumiin Claude Code.Install the plugin
Run
/plugin install sumi@sumi-marketplace.Start
Run
/sumi:start, which asks what you are working on in plain words and picks the play.Grade a design
Run
/sumi:gradefor a score or/sumi:roastfor the fast version.
Check that it loaded
Run /sumi:grade on a screen and look for a Design Quality Score from 0 to 100.
Key features
- Designer pattern libraries36+ designers are grouped as Modernist Pioneers, Contemporary Icons, Product Design Teams, Studios and Agencies, Hardware-Informed Design, and Motion and Animation Studios.
- 70 canonical rulesRules from 23 design books are grouped as Layout 1 to 15, Typography 16 to 30, Color 31 to 45, Composition 46 to 60 and Detail 61 to 70.
- 10 dimension scoringEach dimension is scored 1 to 10: layout, typography, color, spacing, hierarchy, consistency, craft, innovation, accessibility and delight. The weighted total is calibrated to Awwwards.
- Weighted formulaTypography carries 0.14, layout, color and hierarchy 0.12 each, spacing, consistency and craft 0.10 each, innovation 0.08, and accessibility and delight 0.06 each.
- Score benchmarks3.0 is a vibe-coded default, 5.0 a competent developer, 6.5 a junior designer, 7.5 a senior designer, 8.5 an Awwwards honorable mention and 9.0+ a Site of the Day.
- Color masteryColor rules cover oklch(), HCT, APCA contrast, P3 gamut and dark mode mapping. Dark mode is handled as a parallel color system.
- Typography and compositionTypography covers variable fonts, fluid and modular scales, optical alignment and font pairing. Composition covers Swiss grids, an 8px baseline, the golden ratio and visual weight.
- Micro-craft detailsA section covers pixel-perfect alignment, subpixel rendering awareness and optical adjustments.
- Visual trendsTrends for 2025 to 2026 are listed as currently ascending, currently fading and timeless.
Frequently asked questions
What is the visual-design-mastery skill?
It is a SKILL.md in the phazurlabs/sumi repository that codifies visual design craft. Your AI coding agent uses 36+ designer pattern libraries, 70 canonical rules from 23 books, a 10 dimension score calibrated to Awwwards, color science and composition techniques to judge visual quality.
How do I install the visual-design-mastery skill?
In Claude Code, run /plugin marketplace add phazurlabs/sumi, then /plugin install sumi@sumi-marketplace, then /sumi:start. The start command asks what you are working on in plain words and picks the play. To grade a design afterward, run /sumi:grade for a score or /sumi:roast for the fast version.
How does the 10 dimension score work?
Each dimension is scored 1 to 10, and a weighted total combines them. Typography weighs 0.14, layout, color and hierarchy 0.12 each, spacing, consistency and craft 0.10 each, innovation 0.08, and accessibility and delight 0.06 each. Benchmarks run from 3.0 for a vibe-coded default to 9.0 and above for a Site of the Day.
What are the 70 canonical rules?
They are rules extracted from 23 canonical design books, including Grid Systems, Thinking with Type, Interaction of Color, Refactoring UI and Laws of UX. They are grouped as Layout, Typography, Color, Composition and Detail, so your AI coding agent can ground a recommendation in published authority.
Which color topics does the skill cover?
The color section covers advanced palette construction, brand color systems and a dark mode color strategy. The color reference covers oklch(), HCT, Dynamic Color, APCA contrast, P3 gamut, dark mode mapping, semantic color systems and harmony algorithms. Rule 33 prefers APCA over WCAG 2.x AA ratios for perceptually accurate contrast.
When should I use the skill?
Use it when you are scoring visual quality or when work looks cheap but you cannot say why. The skill explains why a design choice works by citing designers and canonical rules, and it helps with building type systems, grid systems and color palettes, including the rules for dark mode.