Notes on design and AI

• 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.