20d (edited) • Resources
TasteClaw — Reverse-Engineer Any Website's Design DNA
New OpenClaw skill for the community members:
𝗪𝗵𝗮𝘁 𝗧𝗵𝗶𝘀 𝗦𝗸𝗶𝗹𝗹 𝗗𝗼𝗲𝘀
You give it a URL. It gives you:
{domain}.md — the complete Design Map (exact colors, type scale, spacing, shadows, radii, grid) + Taste DNA (WHY the designer made each choice and what they rejected)
{domain}.json — machine-parseable version for downstream tools
Not vibes. Not "clean and modern." Actual px values, hex codes, and design trade-offs.
Example: Run /taste https://linear.app and you'll get the exact font hierarchy, the 8px spacing rhythm, the shadow layering strategy, and WHY Linear chose monochrome icons over colorful ones.
𝗪𝗵𝘆 𝗧𝗵𝗶𝘀 𝗘𝘅𝗶𝘀𝘁𝘀
AI coding agents are terrible at design.
They default to Inter font, blue buttons, 8px border-radius, and a card grid. Every AI-generated landing page looks the same because the agent has no taste — it just picks defaults.
The Taste skill fixes this. Instead of "make it look good," you say "use the design DNA from stripe.com." The agent gets exact tokens AND understands the design philosophy behind them.
Core insight: Design tokens alone are useless. "Spacing is 8px" means nothing. "Spacing is 8px because the designer chose readable rhythm over data density" — that's what makes an AI generate good design for a DIFFERENT page.
𝗛𝗼𝘄 𝗜𝘁 𝗪𝗼𝗿𝗸𝘀
Phase 1 — Capture: Playwright browser loads the URL, takes viewport + full-page screenshots, runs DOM extraction (colors, typography, spacing, cards, grids, effects).
Phase 2 — 4-Step Analysis Pipeline:
Step 1 (Measure): 20 categories of precise measurements from the screenshot + DOM
Step 2 (Pattern): Detect systematic rules (8px grid? 1.25× type scale? accent used only on CTAs?)
Step 3 (Taste): 4 design trade-offs — what they chose AND what they rejected. At least one must be a restraint trade-off (something they deliberately didn't do)
Step 4 (Observer): Critique everything. Delete generic claims. Converge to 3-4 bulletproof principles.
Anti-Slop Enforcement: The pipeline actively rejects "clean," "modern," "sleek," "elegant" — banned at the grep level. If it passes through, the file fails audit.
𝗪𝗵𝗮𝘁 𝗬𝗼𝘂 𝗚𝗲𝘁
Design Map — concrete tokens you can paste into a Tailwind config or CSS custom properties:
Spacing Scale: [8, 16, 24, 32, 48, 64, 96, 128]
Font Hierarchy: Hero→48px/700, H1→32px/600, Body→16px/400
Color Palette: bg:#FAFAFA, text:#1A1A1A, accent:#0066FF
Radius: 4px (buttons), 8px (cards), 12px (modals)
Shadows: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.1)
𝗧𝗮𝘀𝘁𝗲𝗖𝗹𝗮𝘄 𝗗𝗡𝗔 — 𝗽𝗿𝗶𝗻𝗰𝗶𝗽𝗹𝗲𝘀 𝗮𝗻 𝗔𝗜 𝗰𝗮𝗻 𝗮𝗰𝘁𝘂𝗮𝗹𝗹𝘆 𝗳𝗼𝗹𝗹𝗼𝘄:
"Chose multi-layer shadows with tinted color over single flat black shadows — because the eye perceives depth through color temperature shifts, not blur radius alone"
OpenClaw Port Notes
Originally built for Claude Code's Playwright MCP, now fully ported to OpenClaw:
No MCP server needed — a single capture.js script does all browser work via Playwright's direct API
Single exec call — node references/capture.js <url> replaces 6 MCP tool calls
Export formats for Cursor, Windsurf, Claude Code, Copilot, Bolt, Antigravity, v0, Figma Make, and Lovable
Use Cases
• Competitive design research → run /taste on 3 competitors, compare spacing/color/type systems
• Port an aesthetic → "I want my SaaS dashboard to feel like Linear"
• Client design handoff → generate .cursor/rules/ that auto-applies the client's design DNA
𝗚𝗲𝘁 𝗜𝘁
You can find it in the classroom.
𝗧𝗿𝘆 𝘁𝗵𝗲 𝗶𝗱𝗲𝗮: give your AI coding agent a taste.md from your favorite site and see if the output improves. Curious what design DNA people extract from unexpected URLs.
1
1 comment
TasteClaw — Reverse-Engineer Any Website's Design DNA
powered by
skool.com/moltbot-builders-club-7244
Master OpenClaw and other personal AI Agents (Hermes Agent, Claude Code). Build AI employees that run 24/7 to save hours and generate real income.
Suggested communities
Powered by