design

What problem does it solve? Web design work often jumps straight from a vague brief to code, producing generic AI-looking layouts with no recorded rationale, no accessibility verification, and no clear ownership of who may edit production source. This Skill structures the entire flow: it captures a visual direction through rendered choice boards, records every decision in a design contract, and only routes implementation to a dedicated frontend-implementer after explicit sign-off. ## Core Features & Use Cases - Direction and area boards: Generates 3-5 ranked direction candidates and per-area variants as self-contained HTML boards, rendered and screenshotted in Chrome so choices are made visually, with a mix-and-match loop and quick mode for provisional auto-picks. - Surface-specific guidance: Loads dedicated subskill guidance for landing pages, blogs, dashboards, documentation, and onboarding, plus a facelift mode that preserves brand, content, and conversion paths. - Design contract and token system: Produces a design document covering two-tier light/dark color tokens, typography scale, spacing, radius roles, motion specs, and section separators that implementers consume instead of hardcoded values. - Independent evaluation: Runs a contrast protocol measuring rendered WCAG ratios in both modes, captures desktop and mobile evidence, and routes divergences back for up to three rework rounds. - Use Case: Redesign a marketing landing page: the Skill presents three rendered direction boards, captures your pick, generates ranked hero and pricing variants, then hands the signed-off contract to the implementer and verifies the built result against the design with measured contrast evidence. ## Quick Start Ask the agent to redesign your landing page using the design skill, for example: redesign the homepage at localhost:3000 with three variants per area and wait for my sign-off before implementing.