Notes on design and AI

• Canva Code 2.0 vs Figma for Agents: Who Fixes Generic AI Sites?: Canva and Figma both just shipped fixes for AI sites that all look the same. Neither one reads your actual live site. Here's the gap that's left.
• Why Lovable, v0 and Bolt Drift From Your Design System: AI builders nail your brand for the first few screens, then quietly default back to Inter and purple gradients. Here's the context-window reason why, and the fix.
• DESIGN.md Files Are Trending. Most of Them Aren't Yours: DESIGN.md is the markdown spec AI coding agents now read before they build. The popular ones are copies of Stripe and Linear, not your actual site.
• VibeDesigner has 106 color palettes. None of them are yours: VibeDesigner hands AI coding tools a preset design spec. DesignScan reads your actual site instead. Picking a style and extracting one aren't the same move.
• Tokenbridge turns design choices into AI rules. You still write them: Tokenbridge and brandkit-mcp both hand an AI coding tool your design rules. Neither one answers where those rules come from if you don't have them yet.
• Superdesign's Claude Code skill can now extract your brand guide: Superdesign's design skill ships an extract-brand-guide command that pulls colors and type straight from a URL. A real step forward, not a reason to skip dedicated extraction.
• Vibe design: the newest fix for AI's generic UI problem: Flowstep and VP0 design the screen before any code gets written, so AI apps stop looking the same. Neither one knows what your own brand looks like.
• Perceptual color clustering: the design token bug no one talks about: Most site-to-tokens extractors flatten five near-identical blues into noise. TokenScout and DesignDNA both tackle it differently. Here's what still needs a human eye.
• Figma Console MCP exports tokens in 10 formats. It still needs Figma: A community MCP server now exports Figma variables as DTCG 2025.10, CSS, Tailwind, SCSS and TS with zero build tools. Great news, if your system lives in Figma.
• The best AI website builders in 2026 (and why they all look the same): Lovable, Bolt, v0, Framer, Wix, Durable and the rest, grouped by what they're actually for. Plus the one thing none of them do for you: give the site a real look.
• Why every AI website looks the same (and 9 fixes that work): Same font, same centered hero, same purple gradient. Here's why AI-built sites look generic, and nine practical fixes that work in Lovable, Bolt, v0, Cursor and Claude.
• Dembrandt, StyleKit, WAALEE: picking a design token extractor: A wave of free tools now pull colors, type and spacing straight off a live site. Here's what actually separates a CLI, a browser extension and WAALEE.
• ux-skill kills AI slop with 152 rules. It still isn't your brand: ux-skill's deterministic linter and 160 brand specs stop AI coding agents from shipping generic UI. The specs come from Apple, Linear and Stripe, not from your own site.
• OpenAI dots: always-on AI agents are here. Your brand isn't in them: OpenAI's new dots agents take on ongoing work, from proposals to working demos. Here's how fast agents are evolving, and why your design system has to be machine-readable now.
• Anima MCP connects your AI agent to Figma. It still needs a system: Anima's new MCP server pipes Figma components and tokens straight to Claude Code and Cursor. It only helps if a real design system already exists in Figma.
• Chrome DevTools MCP gives agents real CSS. Not a design system: Google's Chrome DevTools MCP now hands Claude Code and Cursor an element's exact CSS cascade. It answers one element at a time, not what a whole site's palette is.
• Claude Design's web capture reads your site. Not its exact tokens: Anthropic's Claude Design can now pull colors and fonts straight from a live URL. Read the docs closely and it's extracting your brand's feel, not its exact values.
• Figma's Code to Canvas sends your UI to Figma, not your real brand: Figma and Anthropic's Code to Canvas turns a running Claude Code build into editable Figma layers. It still assumes that build's colors and type were already yours.
• Webflow's new Assets agent needs your brand variables already set: Webflow's Assets, built on its Vidoso acquisition, generates on-brand creative by reading your design system and brand variables. If those don't exist yet, there's nothing for it to read.
• Bolt.new's Design System Agents assume you already have one: Bolt.new and Replit both shipped agents that reuse an existing design system faithfully. Neither one extracts tokens from a live site that never had one.
• Webflow's AI Site Builder makes a design system. Not your brand's: Webflow's AI Site Builder generates a full token system from a prompt. Brand references get approximated, not copied, and it can't read a site built outside Webflow.
• Lovable shipped Design Systems. It still can't see your brand: Lovable's new Design Systems feature lets teams reuse one system across projects. None of its three ways to build one read tokens off a live URL.
• Google open-sourced DESIGN.md. Here's what's actually in the spec: Google Labs made its DESIGN.md format open source and Apache-2.0 licensed. It's a real spec now, not a convention. Here's what changed and what still has to be filled in by hand.
• Claude Code Skills can extract your design system now. Here's the catch: A growing marketplace of Claude Code Skills promises to pull design tokens straight from a URL or codebase. Great, if you already have Claude Code installed and open.
• v0 Design Systems 2.0 wants your tokens. Here's the shape it expects: v0's Design Systems 2.0 will import your tailwind config and globals.css directly. The catch: it assumes shadcn/ui's CSS variable standard, and most sites don't have that file yet.
• Style Dictionary v5 shipped. Three things quietly broke your tokens: Style Dictionary v5 needs Node 22, tightens what a reference can point to, and zeroheight just retired its legacy export. Here's what actually changes in your pipeline.
• Cursor's Design Mode fixes precision. Not your default palette: Cursor's Design Mode lets you click, draw, or talk an agent through a UI fix on a live page. It's a real upgrade for iteration. It still starts every first draft from Cursor's own defaults.
• shadcn's new MCP server fixes hallucinated components. Not your theme: shadcn/cli v4 shipped an MCP server and shareable presets in 2026. Agents stopped inventing components that don't exist. The look is still whichever preset you picked.
• Tailwind v4 killed the JS config. Your AI builder still guesses: Tailwind v4 moved tokens into a CSS-first @theme block and switched to OKLCH. That fixed one problem and left the default-palette problem untouched.
• Why every AI-coded app looks like shadcn/ui (and the real fix): shadcn/ui is now the default kit for Claude, Lovable, v0, Cursor and Bolt. That's why so many AI apps share one look. Here's what actually breaks the pattern.
• Figma's MCP server only works if you own the Figma file: Figma's Dev Mode MCP server feeds real tokens straight into Claude Code and Cursor. Great, if you have access to the file. Here's the fix when you don't.
• The W3C design tokens spec just went stable, and hex codes broke: DTCG 2025.10 is the first stable Design Tokens Format Module. It also changes how color values are written. Here's what actually changed.
• How to extract a full design system from any website in 60 seconds: Point at a URL, get colors, type, spacing, components, and AI-ready prompts. Here's exactly what happens under the hood.
• Vibe coding is great — until it needs to look designed: AI builders ship working UIs fast. Making them look intentional is a different skill. Here's the bridge.
• Design tokens, explained: the language your AI actually understands: Colors and fonts are the obvious part. The real power is naming decisions so a machine can apply them consistently.
• From screenshot to style guide: reverse-engineering great design: A practical look at how to deconstruct a site you admire into a system you can actually build with.
• Why your AI-generated site looks generic (and how to fix it): Five tells of default AI design — and the one input that removes all of them at once.
• The anatomy of a $100M landing page: What the best-funded startups actually do above the fold — and how to lift the pattern, not the pixels.
• Colors, type, spacing: what to actually steal from sites you admire: A short field guide to the three things worth extracting — and the things that don't transfer.
• How to rebuild any site 1:1 with Claude, Lovable, or v0: A repeatable workflow: extract, hand the tokens to your builder, and reconstruct the exact look and feel.
• W3C design tokens: exporting a system your whole team can use: One portable file that Figma, your codebase, and your AI builder all understand.
• Turning inspiration into production: a practical workflow: The end-to-end path from "I love this site" to shipped, on-brand code — without the guesswork.