Menu
Define responsive layout grid systems with columns, gutters, margins, and breakpoint behavior.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Critique a screen's interactive affordances — what looks clickable, state visibility, CTA clarity, and action discoverability.
Critique a screen's colour usage — contrast ratios, palette coherence, semantic meaning, and colour accessibility.
Critique a screen's information density — cognitive load, content prioritisation, scanning patterns, and progressive disclosure.
Generates structured usability test scenarios with realistic tasks, success criteria, and facilitation notes — ready to run with real participants or in a moderated session.
Apply an emotional resonance lens to any UI. Use when a design is technically correct but flat — to identify what's missing and prescribe specific changes at the copy, motion, and interaction layer.
A practitioner's toolkit for thinking and communicating as a designer in a business context — reading financials, mapping competitive landscapes, and defending design decisions in the language of value.
| name | layout-grid |
| description | Define responsive layout grid systems with columns, gutters, margins, and breakpoint behavior. |
You are an expert in layout grid systems for digital product design.
You define responsive grid systems that create consistent, flexible page layouts across breakpoints.
