web-smith
Design-to-code tool that extracts assets and design tokens, then rebuilds sites as Astro/Tailwind projects with Lighthouse and visual-diff checks.
Problem
Most AI design-to-code workflows generate plausible pages but miss the actual visual system, assets, spacing, and performance standards of the source site.
Approach
- Scraped the target site, screenshots, assets, and design tokens before code generation.
- Rebuilt pages as Astro and Tailwind projects instead of one-off static copies.
- Added Lighthouse and visual-diff checks so the output can be judged by quality gates, not just screenshots.
Outcome
Repeatable design-to-code workflow for high-fidelity rebuilds
Generated Astro/Tailwind projects with performance and accessibility checks
Asset and token extraction before implementation
Visual-diff loop for comparing generated output against the source
Tech
Astro Tailwind CSS AI Tooling Visual Diff