Create a minimal agency design system with a disciplined editorial grid, oversized typography, quiet uppercase utility labels, restrained image blocks, and subtle structural detail.
SkillScore64Maintained
Automatic
◆Frontend / UI pack
Last verified 8/11/2026
What it changes
Passed 14 of 22 test cases with the skill, and 9 of 22 without it.
Without skill41%
With skill64%
Checks it passed that the model alone missed
Hover states use subtle positional shifts instead of 3D card tilts.
The lower section surface uses an elevation shift overlapping the section above.
Background visual elements are styled as low-opacity geometric wireframe overlays.
and 3 more in the full report
6 fixed8 passed either way7 still failing1 broke
Pass-rate lift
+23 pp
Tokens
+29%
Agent turns
0%
Response time
+13%
Model gemini-3.6-flashMeasured 8/11/2026v114 of 22 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 6 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 6
Prompt
Create the HTML and CSS for a capability listing section for a digital design agency called 'Vanguard Systems'. Should I organize these capabilities into a grid of elevated shadow cards with rounded corners, or list them in another format?
What was checked, without and with the skill
Checked
Without skill
With skill
Capabilities are structured as multi-column list rows with uppercase metadata labels.
Missed
Passed
case-04 · gemini-3.6-flash · 8/11/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md47 linessingle file
Agency Grid Layout Minimal Skill
Use When
Create a minimal agency design system with a disciplined editorial grid, oversized typography, quiet uppercase utility labels, restrained image blocks, and subtle structural detail.
Workflow
Scope
Apply this as a full design-system direction across page layout, typography, image framing, service rows, labels, CTAs, and supporting motion.
Use it when the design should feel like a refined architecture, design, or strategy agency site built on a strict grid and minimal visual language.
This is not a generic startup landing page and not a heavily containerized dashboard. The layout should feel editorial, spacious, and precisely structured.
Visual target
Build the page on a disciplined multi-column grid with large open spans, careful alignment, and generous negative space.
Use oversized headlines with tight tracking and strong line breaks as the primary visual anchor.
Pair the hero typography with very small uppercase utility labels, timestamps, section markers, or descriptive copy blocks placed in adjacent grid columns.
Keep surfaces minimal: light neutral backgrounds, subtle tonal shifts, thin separators, quiet image frames, and very restrained accent use.
Let imagery feel architectural and premium, usually as large panoramic or facade-like blocks rather than card-heavy galleries.
Implementation guidance
Prefer wide max-width page shells with clear column divisions so content placements feel intentional and spatially engineered.
Use a clean sans-serif type system with confident scale contrast: very large display sizes for hero and section titles, then tiny uppercase metadata and calm paragraph copy.
Buttons should be refined and understated, using thin gradient-border wrappers, neutral fills, and small uppercase labels rather than loud pills.
Section transitions can use subtle overlays, tonal blocks, or elevated white surfaces, but keep the overall system sparse and elegant.
Add only a light amount of structural motion: masked text reveals, slow image settle, and restrained hover shifts are appropriate.
Background effects, if present, should stay extremely quiet, such as a faint wireframe object, subtle texture, or low-opacity abstract geometry.
Recommended patterns
Large hero headline spanning most of the grid with supporting copy anchored in a narrow side column.
Architectural image block framed by simple spacing and a quiet neutral background rather than decorative chrome.
Service or capability rows laid out as clean multi-column listings with tiny metadata, strong headlines, and subtle hover state movement.
White or off-white lower content block that overlays the preceding section with a soft radius or gentle elevation shift.
Minimal CTA wrappers using 1px gradient shells and low-drama interaction feedback.
Tuning knobs
Grid rigidity: increase or reduce the strictness of column-based placements depending on how editorial the layout should feel.
Typography dominance: let the headlines take over visually, but keep body copy small, sparse, and well-placed.
Image scale: use large cinematic imagery sparingly so it strengthens the composition without crowding it.
Structural detail: add only enough labels, separators, and markers to clarify hierarchy without breaking the minimal tone.
Contrast: keep the palette neutral and airy, with only small departures for emphasis.