UI/UX visual design, styling, and aesthetic validation
Visual design guidance for beautiful, consistent, and accessible UIs.
/* Primary */
background: var(--primary);
color: white;
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
/* Hover: slight brightness change */
/* Active: scale(0.98) */
/* Disabled: opacity 0.5, cursor not-allowed */
background: var(--surface);
border-radius: 12px;
padding: 24px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
/* Hover: elevate shadow */
Use the actual Playwright MCP tools to validate visual design:
mcp__playwright__browser_navigate(url: "http://localhost:3000")
mcp__playwright__browser_take_screenshot(fullPage: true, filename: "full-page.png")
mcp__playwright__browser_evaluate(function: `
// Check computed margins/paddings
const elements = document.querySelectorAll('*');
const spacings = new Set();
elements.forEach(el => {
const style = getComputedStyle(el);
['margin', 'padding'].forEach(prop => {
['Top', 'Right', 'Bottom', 'Left'].forEach(dir => {
const val = parseInt(style[prop + dir]);
if (val > 0) spacings.add(val);
});
});
});
return [...spacings].sort((a,b) => a-b);
`)
Check: Does it follow 4px/8px grid?
mcp__playwright__browser_evaluate(function: `
const colors = new Set();
document.querySelectorAll('*').forEach(el => {
const style = getComputedStyle(el);
colors.add(style.color);
colors.add(style.backgroundColor);
});
return [...colors].filter(c => c !== 'rgba(0, 0, 0, 0)');
`)
Check: Limited palette? Consistent use?
mcp__playwright__browser_evaluate(function: `
const fonts = new Set();
document.querySelectorAll('*').forEach(el => {
fonts.add(getComputedStyle(el).fontFamily);
});
return [...fonts];
`)
Check: Max 2-3 font families?
mcp__playwright__browser_resize(width: 375, height: 667)
mcp__playwright__browser_take_screenshot(filename: "mobile.png")
mcp__playwright__browser_resize(width: 1280, height: 800)
mcp__playwright__browser_take_screenshot(filename: "desktop.png")
mcp__playwright__browser_console_messages(level: "error")
| Don't | Do Instead |
|---|---|
| Rainbow of colors | Limited, intentional palette |
| Tiny click targets | Min 44x44px touch targets |
| Text on busy backgrounds | Overlay or solid backgrounds |
| Inconsistent border-radius | Pick one: 4px, 8px, or 12px |
| Auto-playing animations | User-triggered or subtle loops |
| Placeholder-only labels | Visible labels always |
When working with existing design systems:
