Visual Design

Use this skill before creating or redesigning a site, landing page, homepage, layout, style system, typography, color palette, animation system, or other visual polish.

Design Direction

Understand the context and commit to a clear aesthetic direction:

• Purpose: What problem does this interface solve? Who uses it?
• Artistic direction: the feeling of the site — palette, type, surfaces, shapes, imagery, and motion — settled with pick_design from the direction catalog below and written down as the site's DESIGN.md (see "Concept and Direction").
• Signature concept: the spatial structure that makes the site memorable, settled with pick_design from the layout catalog below.
• Constraints: Account for technical requirements, performance, accessibility, responsive behavior, and WordPress editability.

Execute the settled direction and concept with precision. Bold maximalism and refined minimalism can both work; the important thing is intentionality.

Concept and Direction

Every site gets one artistic direction and one signature concept, both chosen before any code is written: the direction first, because it becomes the site's DESIGN.md, then the concept, chosen to suit it. The concept is the one structural idea a visitor remembers — a cover made of four tiles, a site laid out sideways, a page read like a newspaper — and it is about layout only: the shape of the page and how sections relate to the viewport. The direction is everything the concept leaves open — color, type, surfaces, shapes, how imagery is treated, how things move — and any direction must be able to dress any concept. A Swiss typographic Checkerboard and a Neo-brutalist Checkerboard share a grid and nothing else.