CSS Daily
A daily CSS challenge — like Wordle, but for CSS.
Each morning a new challenge appears. You get an HTML structure and a target screenshot, then write CSS to match it as closely as possible before time runs out. Your score is calculated by pixel-level comparison in real time as you type.
The Story
CSS Daily was inspired by the March MadCSS tournament and built in a single day. A new challenge generates automatically every morning, so there's always something fresh to try. The visual diff scoring engine is adapted from SynHax, the open-source project by Wes Bos and Scott Tolinski.
Built With AI
The entire site was built using Claude Code. Each morning, the Claude API generates a new challenge — the HTML structure, target CSS, and starter CSS stubs. Playwright automatically renders the target to a screenshot, and GitHub Actions handles the full pipeline: generate, screenshot, commit, and deploy. No manual intervention needed.
This project demonstrates what's possible when you combine AI-augmented development with good architecture. The result is a fully automated platform that ships a new challenge every day with zero maintenance.
How It Works
CSS Daily is built with Astro, React, CodeMirror 6, and Tailwind CSS. The scoring engine uses real-time pixel-level visual diffing with Euclidean RGB distance scoring, adapted from SynHax with modifications. No backend, no database — just a static site, a cron job, an AI, and a dream.