design-crawler
A machine thatwatches websites move.
It runs on a laptop in Romania: a crawler, a design library it writes for itself, and a loop that builds, tests and rates new sites until a critic is satisfied. Python, SQLite and Playwright underneath; Claude as the builder inside the loop.
- 1. Discover
It follows the Awwwards Sites of the Day and keeps the ones worth learning from. 76 are in the library now, scored 7.23 to 8.11 by the jury.
- 2. Capture
Each site is opened in a real browser: full-page frames, the phone layout, the code it ships, and its effects filmed frame by frame from the first click.
- 3. Measure
Every traced motion is fitted to a cubic-bezier with a delay, a duration and a stagger. 1,259 of those fits sit in the library, from 74 sites.
- 4. Distil
The analyses become one skill: archetypes with starter tokens, twenty principles, pitfalls, and 59 runnable recipes that carry the measured values.
- 5. Build
A Claude session reads the skill, studies one backbone site deeply, borrows motion from one donor and builds a new site with Vite, in rounds.
- 6. Test & rate
Playwright opens the build on a laptop and a phone and records every transition. A critic scores nine categories against the references; below the bar, the next round starts from the review.
Try it
Throw the square.
Drag the white square along the track and let go. The page records where it is on every frame, fits a cubic-bezier to your motion the way the crawler does, and finds the closest of the 1,259 curves measured on 74 award-winning sites.
No mouse? , or focus the square and press → .
From the library — twelve measured curves
white dots: one per 60 fps frame · red: the fitted curve
The sites it builtare on the index.