I redesigned the DevStacked homepage hero using Wonder — here's the full process.

→ Designed the hero in Wonder Chat, using my actual brand oklch colors pulled straight from my codebase, not guessed hex values → Rewrote the headline for SEO ("Ship Next.js projects faster") instead of generic marketing copy → Opened Wonder's shader panel and tested several animated backgrounds live on canvas — one nearly killed text contrast, landed on a soft drifting color wash that keeps copy readable → Connected Wonder's MCP to Claude, pointed it at my real repo, and had it fetch the design directly

The part that mattered most: Claude didn't just copy Wonder's markup — it recognized my navbar already renders globally via my layout, so it dropped Wonder's mock nav to avoid a duplicate, and rebuilt the hero using my actual Button/Card components and CSS variables instead of generic Tailwind classes.

Genuinely faster than my usual Figma-then-hand-code loop, and the output looked like it belonged in my codebase instead of being bolted on. Wonder File: https://app.wonder.so/syed-ali/files/019f2c69-a579-703f-836b-6560ca0794d0/branches/main/pages/019f2c69-a57b-7780-afde-a6392fe28237 LinkedIn Post: https://www.linkedin.com/feed/update/urn:li:activity:7479471125597585408/