What problem does it solve? Designing and shipping a web surface usually splits into disconnected passes: a designer picks tokens, a copywriter fills in words later, and QA happens after the fact, producing generic layouts, placeholder copy, and unverified renders. This Skill runs design, copy, and visual QA as one coordinated pass so a surface ships with layout, words, and rendered evidence together. ## Core Features & Use Cases - Lane routing and surface classification: Routes work into Design, Suedify (reference-to-target restyle), Copy, or multi-agent team lanes, and classifies the surface register (brand, product, docs, campaign, mobile) before any design decision. - Design laws and token systems: Applies dark-mode token values, fluid type scales, component laws, motion timing specs, and scoped bans on generic patterns, with a 100-point design-system audit score. - Copy with proof discipline: Writes headlines, CTAs, email, and social copy using formula banks and persona modes, with hard rules against invented metrics, testimonials, or partner claims. - Visual QA and ship gates: Captures Playwright screenshots at desktop and mobile widths, compares source targets against implementations, and produces visual-qa-report.md plus ship/ship-with-caveats/hold verdicts. - Use Case: Ask it to restyle your landing page to match a reference site's look: it captures both sites, extracts a token map into DESIGN.md, rewrites the hero and copy in your brand voice, renders the result, and reports remaining mismatches. ## Quick Start Use $johnny-suede-design to redesign my landing page at this repo path, running the design, copy, and visual QA lanes and showing me rendered screenshots before shipping.
