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 configurable AI generation pipeline uses OpenAI by default, with Anthropic available through configuration, to generate 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.