A design-taste skill tested on 5 sites

Ledger entry: taste-design-skill (Instagram reel by Eden Bibas). User ask: "make a bundled experiment in the ai-lab repo, tell me what you got to do with it, use it on very popular websites."

Hypothesis

The skill turns a public reference site into design tokens plus reasoning that is accurate to the real site and more useful than a plain "describe this design" prompt.

Setup

  • Find the repo from the reel (https://www.instagram.com/eden_bibas/reel/DdT0bNWEqHQ/). Read all of its files first; record repo URL, commit hash, license. Install only inside outputs/skill/.
  • Public pages only, read-only browsing (screenshots and computed styles); no logins, no scraping at volume. One page load per site.

Fixed inputs

5 very popular sites with different design languages, in source/sites.md: stripe.com, linear.app, apple.com, notion.so, vercel.com (swap one if blocked and say so).

Cases (per site)

  1. Run: skill produces tokens and rationale. Record the output, time and whether it needed fixing.
  2. Ground truth: independently read the live computed styles (primary colors, font families, base spacing, radius) with Playwright and compare to the skill's tokens. Pass = each token within a tolerance written in advance (exact for fonts, a small color distance for colors).
  3. Baseline: same model, no skill, prompt "extract this site's design tokens and explain the choices". Compare the accuracy of baseline vs skill with the same ground truth.
  4. Rationale quality: a blind judge agent rates whether the stated reasoning is specific to the site (not generic "clean and modern") on a 1-5 scale.
  5. Usability: from the skill's output alone, build a one-screen mock with the tokens and screenshot it next to the real site's screenshot; judge resemblance (1-5).
  6. Failure log: sites that blocked, broke or timed out.

Deliverables

insights/RESULTS.md: token accuracy table, rationale scores, skill vs baseline, what it is and is not good for. demo/index.html: for one site, the real screenshot beside the skill-derived mock and its tokens (real outputs only).