How to Prepare Your Design System for AI Agents (Tokens, Components, Code Connect)

Field notes, interviews and short essays on the craft. Published when there's something worth saying — about twice a week.
A working guide to AI-ready design systems. Tokens, components, Code Connect — the structural prep work that determines whether agents produce useful work or noise.


After analyzing 50 SaaS dashboards, seven layout patterns consistently separate products that retain users from products that churn. Each one mapped to a retention metric with real 2026 product examples.

A decision framework for picking the right Figma AI tool. When to use the agent, when to use Make, when to use the MCP server — and when none of them fit.

A working designer's guide to the Figma AI agent. What it does, how to use it, and where it still falls short — written after the May 20, 2026 beta launch.

A complete setup guide for the Figma MCP server. Remote vs desktop, plan requirements, configuration for Cursor, Claude Code, Codex, and VS Code.

A guide to Figma skills — markdown-based agent instructions that shape how Figma's AI tools behave. What they are, how to use them, and how to build your own.

A practical guide to free wireframe kits for Figma. What separates a useful kit from one that slows you down, and how to evaluate any kit fast.

Hand-picked free Penpot templates for UI design in 2026. SaaS dashboards, mobile apps, design systems, wireframes — all verified, free, ready to import.

A no-nonsense reference for spacing systems. The decision framework for 4px vs 8px vs custom, implementation recipes for Figma and Tailwind, and when breaking the grid is actually correct.

Presenting design work to people who don't understand design is the quiet skill that separates senior from mid-level designers. Here's the 2026 playbook, including how to handle AI-generated work and the 'but AI can do t…

Every 'best free design resources' post lists the same 20 sites. This one doesn't. 30 genuinely obscure resources — independent creators, niche categories, open-source gems — all vetted and in use by working designers.

zeroheight's 2026 Design Systems Report shows buy-in satisfaction dropped from 42% to 32% in a year. Gartner moved design systems to the 'Trough of Disillusionment.' Design systems don't crash — they fade. Here's what th…

Most microinteraction posts show pretty animations from Dribbble. This shows 25 patterns tied to specific conversion outcomes — with Baymard Institute, Unbounce, and CXL as the primary sources, and a new section on AI-ge…

Most prompt engineering guides for designers are written for ChatGPT. In 2026, the work has moved to Claude Design, Figma Make, Lovable, v0, and Cursor — and each needs a different prompt style. This is the real playbook…

Anthropic launched Claude Design April 17, 2026. Figma stock fell 5-7% the same day. Lovable crossed $400M ARR in February. Google Stitch 2.0 rattled Figma in March. The honest five-way comparison nobody else is doing, w…

A practical guide to free fintech UI kits for Figma. What to look for, what to skip, and how to spot a wasted download in 90 seconds.

Most typography 'guides' are font-pairing listicles. This is the actual systems approach — primary, secondary, monospace, and fallback — that Linear, Stripe, and Vercel use.

Intercom Fin averages 50.8% resolution but top customers hit 86%. The difference isn't the model — it's the trust design. Google People + AI Guidebook, NIST's 7 trustworthy AI characteristics, and 7 practical patterns +…

Pieter Levels' portfolio runs $3M+ ARR solo. Lovable hit $400M ARR with 146 employees. METR found senior developers were actually 19% slower with AI despite feeling 20% faster. The vibe coding paradox has nuance. Here's…

Animations are showing up in every interface — buttons spring, pages transition, components morph. Most of it is wrong. Here's what UI motion actually should do, the 9 mistakes almost every team makes, and the principles…

Most design teams run 10-15 tools per UX Tools' Design Tools Survey (n=2,220). 2026 added a new category: AI design tool sprawl. Here's what it actually costs in money, time, and cognitive load — with the 5-step audit th…

Notion 3.2 (Jan 2026), Linear Agent (April 2026), Claude Cowork, Tableau Pulse, Amplitude Data Chat — the conversational dashboard layer shipped. Per Gartner, 40% of enterprise apps will have task-specific AI agents by e…

Tailwind UI vs shadcn/ui in 2026: free options, paid Tailwind Plus, what each solves, and the honest hybrid stack most teams should ship.

Polished screens and thick process documentation no longer work. Figma's 2026 State of the Designer (n=906) and Jenny Wen's 'design process is dead' thesis show the shift. Here's what hiring managers actually evaluate, h…

Apple's Liquid Glass bets on spatial computing and sensory interfaces. Google's Material 3 Expressive bets on emotion and personalization. Here's what actually differs, what matters for designers, and which philosophy is…

A practical guide to free crypto dashboard templates. What separates production-ready Figma files from screenshot packs, and how to evaluate any kit fast.

Bad Figma files cost teams hours every week. Good ones make handoff invisible. Here's the exact file structure senior designers at mature product companies use — not the theoretical one in Figma's documentation.

Generative UI isn't AI drawing screenshots. It's interfaces assembled at runtime from your component library. With Claude Design launched April 17, 2026 and agent products like Notion 3.2 and Linear Agent shipping, the c…

A good UI kit is not a shortcut. That's the thing designers who haven't used a genuinely excellent one don't understand.

A good icon set is one of the highest-leverage decisions in a UI design project. Done well, icons make interfaces faster to scan, easier to learn, and more spatially efficient. Done poorly — inconsistent strokes, mismatc…

The way you present your design work is as important as the work itself.

The best free Framer templates in 2026 are: Hanssen (minimal portfolio), Kajo (agency), Viper (bold creative), Fuel (award-winning), Palmer (dark portfolio), Kresna (SaaS landing), Active (startup), SaasLeek (SaaS + blog…

Stripe, Linear, and Vercel feel premium for specific, documented reasons. The designers behind them have written it all down — here's the synthesis most teams never read.

There are over 3,000 Framer templates on the marketplace. Roughly 2,700 of them are variations on the same dark hero layout with the same gradient blur effect and the same "Trusted by 500+ companies" social proof row.

Most "free design resources" lists haven't been updated since 2020. Half the links are dead. The other half point to sites that still exist but stopped adding new content three years ago.

Seven thousand templates. That's how many are in the Webflow Marketplace right now. Most of them are visual candy — they look good on a product page and fall apart the moment you try to build a real site with them.

There are 156 templates tagged "SaaS" in the Webflow Marketplace right now. At least 120 of them will waste your time.

Most Framer templates look like SaaS. Product screenshots in a hero section, a pricing table three scrolls down, some social proof logos. But look closer and they fall apart the moment you try to ship a real product with…

Meta cut 10% on April 23. Microsoft is buying people out. Jenny Wen (Head of Design at Claude) says the classic design process is dead. Here's the honest 2026 survival read.

Most SaaS onboarding flows leak 30-50% of signups before activation. Here's the honest math, verified research, and specific fixes that actually reduce drop-off.

Container queries are the biggest shift in responsive design since media queries were introduced. They are now baseline — supported in Chrome 105+, Firefox…

"Just invert the colors."

Sixty percent of design systems fail. That statistic from industry surveys gets cited constantly, and the usual follow-up advice is to hire a dedicated des…

The no-code vs low-code debate is dead. In 2026 it's a four-lane highway — visual builders, internal tools, AI prompt-to-app, and AI-in-IDE. Here's which lane fits your work.

Motion is no longer decorative. It is a structural UX element — guiding attention, communicating state changes, and creating the perception of speed. Every…

Ninety-one percent of designers now say AI improves their work, according to Figma's 2025 AI report. But here is what that statistic hides: most designers…

Every comparison of Tailwind component libraries is written by a developer. That is the problem.

The design-to-website market cracked wide open when Figma launched Sites at Config 2025, turning a two-horse race into a three-way contest. And the existin…

I want to be upfront about something. Many of the most detailed Penpot reviews — including Smashing Magazine's multi-part series — were produced in partner…

If you are just starting in design, you are probably drowning in tool recommendations. Every blog gives you a list of 50 options organized alphabetically w…

Ten landing pages, ten sets of conversion decisions. Linear, Stripe, Notion, Figma, Vercel, Cursor, Lovable, Kit, Replit, Loom — the specific choices separating above-median from generic.

Typography choices make or break a design faster than color, layout, or imagery. Yet most font pairing guides give you 10 combinations with zero context —…

Every roundup of free illustration libraries makes the same mistake — they list 30 options alphabetically or by popularity and leave you to figure out whic…

You know the feeling. You download a free Figma UI kit, open it, and within 30 seconds you can tell. Fixed-width frames instead of Auto Layout. Color value…

Most color palette generators are slot machines. You hit spacebar, get five random colors, hit spacebar again, repeat until something looks nice. That is n…

Here is a pattern I have watched play out dozens of times: a designer picks an icon library in the first week of a project, and the entire product carries…

A practical methodology for evaluating free design resources. License verification, freshness signals, quality framework, and red flags. By Mantlr Team.

I paid Adobe roughly $840 a year for over a decade. Then one morning I opened Illustrator to trace a single logo, watched the splash screen crawl through i…

Figma is the industry-standard design tool, and the learning resources for it in 2026 are better than they've ever been — much of it completely free.

Webflow sits in an interesting position in 2026. It's no longer the automatic choice for no-code website building — Framer has taken the top position for designer-built sites, and many developers prefer building in Next.…

Freelance designer rates in 2026, verified against primary sources. Product designer median $69.40/hr. AI skills command 40%+ premium. The honest pricing math no blog post gives you.

Most advice on improving design skills is vague. "Practice every day." "Study great design." "Get feedback." None of it is wrong, but none of it explains how.

"We need a design system."

Hand-picked free Webflow portfolio templates for 2026. Real designer-tested picks, exact Webflow plan needed to launch, and what each template ships.

Let me make a distinction that most designers never articulate but that separates good design research from time-wasting browsing.

Free UX research templates organized by stage of the research process. Discovery, generative, evaluative, synthesis, and repository templates that ship work.

There are over 1,500 plugins in the Figma Community. Maybe 40 of them are genuinely good. Maybe 15 should be in every designer's regular workflow.

Free typography resources organized by workflow. Font libraries, pairing tools, identification, variable fonts, and implementation guidance for designers.

Color decisions are where designers lose the most time and make the most preventable mistakes.

Free Notion templates organized by what designers and freelancers actually need. Portfolio, client management, projects, research, finances, and learning.

You don't need 200 fonts. You don't need a $500 type license. You don't need to spend an entire afternoon on Google Fonts before starting a project.

Hand-picked free motion design resources for UI designers in 2026. Animation libraries, Lottie packs, prototype tools, and the stack that actually ships.

Free mobile UI kits for iOS and Android design organized by app category. iOS 26 Liquid Glass and Material 3 Expressive aligned, with honest picks.

Free landing page UI kits matched to conversion intent. Real 2026 benchmarks, honest picks for SaaS, lead capture, e-commerce, and event registration.

Every year I do an audit.

Free illustration packs for SaaS and app design organized by style. Honest picks across flat, character, hand-drawn, isometric, 3D, and abstract aesthetics.

Hand-picked free Framer templates for SaaS startups in 2026. Real founder-tested picks, what each actually ships, and the Framer plan you'll need to launch.

Free Figma plugins that genuinely replace paid tools in 2026. Each plugin named with the paid tool it replaces and the dollar savings. No filler.

I've bought icon sets I've never used. I've used free icon sets on projects billed at enterprise rates. I've also ruined a perfectly good product UI by choosing the wrong icon style because I grabbed the first result tha…

Free design system resources for 2026: component libraries, token specs, documentation tools, and reference systems. What actually works for your team's stage.

12 best free dashboard UI kits for web apps in 2026. Honest picks split by Figma design files, React/Next.js code, and hybrid kits with no marketing fluff.

Typography is the one design skill that separates senior designers from everyone else.

Free color palette tools matched to designer workflows. Generation, image extraction, accessibility, design tokens, and AI personalization with OKLCH guidance.

Let me be honest with you for a second.

10 best free AI design tools for UI designers in 2026. Real free-tier limits, what each tool ships, and exactly when the paywall starts. No marketing fluff.

Best free 3D icons and assets for UI design in 2026. Honest picks across icons, illustrations, characters, and scenes with verified commercial licenses.

Figma vs Penpot in 2026: real cost math at 5–100 designers, migration time, performance limits, AI features. The honest decision guide, no marketing gloss.

AI agents don't just respond anymore — they plan, decide, and act. Here are the 10 UX patterns that actually work for designing agentic experiences in 2026, based on what's shipping in real products right now.

How to build a design portfolio using only free resources in 2026. Real stack, honest budget, case study structure, and what to skip when you have zero money.

Design handoff in 2022 was a screenshot in Slack and a prayer. In 2026 it's Figma MCP, Code Connect, AI coding agents, and the new Claude Design→Claude Code pipeline. Here's the honest state of the art, what still breaks…

Most dark mode guides are earnest 'here's how to do it right.' This one is the contrarian version — why dark mode isn't universally more accessible, the color math that breaks in dark, and when shipping dark mode is actu…

Most color palettes don't survive contact with 50 components. Here's how to architect one that does — DTCG 2025.10, OKLCH, semantic tokens, and the drift traps that quietly break systems.

DOJ extended the Title II deadline by a year on April 20, 2026. The lawsuits haven't paused. What's actually happening in accessibility litigation — and what designers need to know.

What does a 2-person design team with AI leverage actually look like in 2026? Perplexity, Cash App, Anthropic's own teams — the honest archetypes, not the speculative ones.

A designer's guide to v0 by Vercel. What it does, what it can't do, and how it fits into a real design workflow alongside Figma Make and Lovable.

A designer's guide to Lovable. What it does, what it can't do, and how it fits into a real design workflow alongside Figma Make, v0, and Cursor.

A practical guide to Figma Make in 2026. What it is, what it does well, what it can't do, and how it fits into a real design workflow alongside the Figma agent and MCP server.

A designer's tour of the 8 AI tools defining vibe coding in 2026. What each does, where it fits, and which ones belong in your workflow.

A designer's comparison of v0 and Lovable. What each does best, where they differ, and how to pick the right one for your project.

A designer's comparison of Lovable and Cursor. The graduate workflow that's becoming standard in 2026, plus when to switch tools and why.

A practical guide to writing Lovable prompts that produce shippable apps. The 6-part framework, real prompt examples, and the credit-saving patterns.

A practical guide to free SaaS landing page templates. Conversion infrastructure, performance, and the sections that actually drive signups.

A practical guide to free dashboard UI templates. Consumer-facing analytics versus internal operations dashboards — and why most lists conflate them.

A practical guide to free ecommerce Figma templates. Cart, checkout, account flows — the screens that actually decide conversion.

A practical guide to free AI app UI kits. Streaming text, conversation patterns, prompt UI — what to evaluate before committing.

A practical guide to free Tailwind dashboard templates. Code quality, Tailwind version, component library — what to evaluate before forking.

A practical guide to free mobile UI kits for Figma. Platform fidelity, touch targets, native patterns — what to evaluate before committing.

A practical guide to free 3D icon packs. Material consistency, file size, format choices, and how to use 3D icons without bloating your site.

A practical guide to free shadcn/ui Figma kits. What separates a kit that mirrors the code from one that drifts, and how to evaluate fast.

A practical guide to free admin dashboard templates in Figma. What real internal tools need, and why most templates are consumer dashboards in disguise.

A practical walkthrough for designers using v0 by Vercel. From first prompt to deployed app — the workflow that actually works in 2026.

A practical walkthrough for designers using Lovable. From first prompt to deployed full-stack app — the workflow that actually works in 2026.

A practical walkthrough for designers using Figma Make. From first prompt to published web app — the workflow that actually works in 2026.

A practical guide to free Framer portfolio templates. Animation discipline, CMS support, mobile responsiveness — what to evaluate before duplicating.

A practical guide to free illustration packs for designers. Style consistency, license clarity, editability — what to evaluate before committing.

A practical guide to free icon packs. Stroke weight, optical sizing, character coverage — and why system icons and decorative icons need different evaluation.

A practical guide to free Framer templates. Match the template type to your use case — marketing site, portfolio, blog, or SaaS landing.

A practical guide to free font pairings. How to think systemically about heading, body, and code pairings — not just "these two look good together."

A practical guide to free Figma UI kits in 2026. Variables, modes, auto-layout, and how to tell a current kit from a recycled one.

A working designer's comparison of Figma Make and v0. What each does best, where they differ, and how to pick the right one for your project.

A working designer's comparison of Figma Make and Lovable. What each tool does best, where they fall short, and how to pick the right one for your project.

A practical guide to writing Figma Make prompts that produce shippable work. The 5-part framework, real prompt examples, and the patterns to avoid.

A practical breakdown of Figma Make pricing in 2026. Plans, AI credits, what each tier includes, and the real cost of using Make at scale.

An honest guide to Figma Make's limitations in 2026. What it can't do, where it falls short, and which tool to reach for instead.

A practical guide to Figma Make kits. How to bring your production design system into Make, set up npm packages, and write guidelines that actually work.

Twelve Figma Make examples across categories — what designers and founders have built, what prompted them, and what each example reveals about the tool's real range.

A practical guide to adding a backend to Figma Make using Supabase. Auth, databases, file storage, and Edge Functions — what works and what doesn't.

A practical guide to designer freebies. How to spot the curated lists worth your time versus the link farms that waste it.

A practical guide to Cursor AI for designers. Why designers are picking it up in 2026, how to set it up, and how to use it without writing code.

A working designer's complete guide to free design resources in 2026 — from UI kits and fonts to the new generation of AI design tools. What to use, how to evaluate, what to skip.

A practical guide to free mockups. Photo-realistic, flat, and 3D mockups serve different purposes — what to evaluate before you commit.

A designer's decision framework for picking between the four major AI design tools in 2026. Honest answers to the question every designer faces.