Browse Library

New

Open-source MCP server by Southleft for design system work in Figma: two-way token sync, component creation, Figma-to-code parity checks and accessibility audits. Write access, unlike read-focused servers.

New

Node-based canvas for AI image and video generation, formerly Weavy, acquired by Figma in October 2025. Chain models from Google, OpenAI, Runway, Black Forest Labs and others with pro editing tools in one workflow.

New

Website builder for designers with an AI agent that creates editable pages, sections, copy and code components inside your project. Publishes real sites with CMS, SEO and localization.

New

Google's agent-first development platform: a desktop app, IDE and the agy CLI that replaced Gemini CLI for individual users in June 2026. Free for individuals, with built-in browser agents for checking UI.

New

Open-source visual editor for React and Next.js apps. Edit the running product on a Figma-like canvas with AI chat, and changes write back to your code.

New

OpenAI's coding agent, included in ChatGPT plans. Runs as a desktop app, CLI, IDE extension and cloud agent, so designers can turn specs and screenshots into working UI in a real codebase.

New

Agentic design canvas, formerly Pencil, that stores designs in an open JSON format next to your code. Design with Claude, Codex or Gemini on the canvas, or drive it from your coding agent through MCP.

New

Official MCP server from shadcn/ui. Lets coding agents browse, search and install components from shadcn, third-party and private registries using plain language.

New

Storybook's official MCP server. Gives coding agents your real component docs, story previews and component tests, so generated UI reuses your design system instead of inventing new components.

New

A design canvas on top of your codebase. Design with real React and Tailwind components, then let Claude Code or Codex implement the change locally, with git branches and pull requests.

New

Design system platform for tokens, components and documentation that now serves scoped design system context to AI agents through MCP. Free plan for up to 5 editors.

New

AI UI generator for wireframes, high-fidelity screens and multi-screen flows, with a Figma plugin, code export and custom design systems. Built for product designers rather than developers.

Turn trust levels into concrete settings for one task: which files the agent may touch, which actions it may take alone, what needs your approval, and when it must stop.

Turn a loose design request into a bounded task an AI agent can finish and you can check: inputs, constraints, acceptance criteria, then a small plan with affected files, checks, and a way back.

Create a small set of real test cases for a prompt or skill you rely on, with pass and fail checks for each, so you can tell whether a prompt change or a new model made it better or worse.

Map a new screen or feature onto the components your design system already has: direct matches, compositions of existing parts, and the few real gaps, each with a reason.

Check an AI-built screen against its acceptance criteria by actually using it, and get a report that separates verified behaviour, failures, and what nobody tested, with evidence for each.

Capture an AI session that worked into instructions you can rerun: the inputs it needs, the steps, the corrections you made along the way, the boundaries, and the checks, ready to save as a skill.

A Mac app for running several coding agents (Claude Code, Codex, Cursor) in parallel, each in its own isolated workspace. The moment one agent stops being enough, this is the layer you are missing.

Real-time AI image and video generation on a live canvas, plus one of the best upscalers available. Generation you steer with your hands, not just with prompts.

Generates real React components from prompts and screenshots, and can work against your own component library. Prototyping that speaks your design system's language.

A design tool where the canvas is real HTML and CSS, with an MCP server so coding agents can read and write the canvas. What you design is what ships.

An image generator aimed at designers rather than prompt hobbyists: proper vector output, consistent brand styles, and icon sets that belong to the same family.

AI that generates sitemaps, wireframes, and style guides from a project brief, built from a library of over 1,000 components, with export to Figma, Webflow, and React, or hosting on Relume itself.

Google's AI design canvas that turns prompts, sketches, and voice into mobile and web UI, clickable prototypes, and code. Fast for early exploration, and it improves a lot when you feed it a proper design brief.

Part 1 of The Pattern Engine series. UI assembled at runtime from user intent, and why your component library under-specifies for the agent doing the assembling. Sequel to the Agentic Design Systems series.

Your team's operating knowledge (how you name tokens, review work, and decide what good is) lives in people's heads. Put it in a repo of skills and playbooks and your least AI-fluent teammate works like your best one, while agents execute against the same source. This guide builds it, with the maturity ladder and review model that keep it honest.

An agent inside your product creates states you do not control: variable steps, variable output, and actions with real consequences taken on a user's behalf. Five patterns keep that surface trustworthy: deterministic confirmation gates, reasoning states, canonicals, intent-first navigation, and recovery.

When an AI builds your interface, the token name is the instruction. Why visual names like color.blue.500 make models guess, and how intent-based names make generation predictable.

A repeatable workflow for catching contrast failures, broken focus states, and semantic problems before they ship, with Claude doing the sweep, axe doing the math, and you making the calls AI can't.

Stop pasting token tables into prompts. In about 100 lines of TypeScript, give every AI tool on your team live, queryable access to your tokens and components, and a lint tool that maps raw values back to the system.

Individual adoption is easy; team capability is not. The operating model for taking AI from three enthusiasts to a whole design org: shared context repos, trust levels, usage norms, and the rituals that make it stick.

Deciding what an AI agent knows when it works: which files, rules, and examples load into its context window, and when. The discipline behind CLAUDE.md, skills, and MCP.

The slow gap that opens between your design system as documented and your product as shipped: hardcoded values, rogue variants, one-off components nobody approved.

Hard limits on what an AI agent can do, enforced by the system rather than the prompt: scoped permissions, protected files, required reviews, and kill switches.

A workflow where an AI agent does the work but a human approves it before it counts: the agent proposes, you decide. The standard pattern for mid-trust agents.

Running an AI agent read-only against your real design system before giving it any authority. The agent audits and reports; it cannot change anything.

A loop where agents detect design system drift, fix it at the source, and add a rule so the same drift cannot happen again. The system gets stronger with every cycle.

A five-step scale (Observer, Advisor, Junior, Senior, Autonomous) that defines what an AI agent is allowed to do, and what it has to prove before it gets more authority.

Benchmark-based comparison and ranking of open large language models on Hugging Face.

The four ways an element can arrive on screen, when to use each, and the one rule that makes them feel native: exits run faster than entrances. Includes an interactive demo you can replay.

Micro-feedback is the cheapest motion with the highest payoff. Hover lifts, focus rings, and a press that scales down all tell the user the interface heard them. Includes a live demo.

Fade-and-rise on scroll is the most overused effect in AI-generated sites. Here is how to do it with restraint: trigger once, animate transform and opacity only, and never block content. Includes a live demo.

When an AI states something false with full confidence: a made-up API, a token that does not exist, a citation that was never written. Fluent, plausible, and wrong.

The instruction you give an AI. The clearer and more specific it is, the better the result. A system prompt sets the standing rules for the whole session.

A technique that lets an AI look things up before it answers. It retrieves the relevant documents first, then generates from them, instead of relying on memory.

A reusable instruction file that teaches Claude how to do one job your way, invoked with a slash command. Your taste, your review process, your rules, made portable.

A second AI agent spun up to handle one focused task in its own context, then report back. Used to search, review, or work in parallel without cluttering the main session.

The small chunks of text an AI reads and writes, and what your usage is measured in. Not to be confused with design tokens, which are reusable style values.

Building software by describing what you want in plain language and letting the AI write the code, steering by feel and result rather than by reading every line.

Why AI coding tools need both a project rules file and a tools file, what belongs in each one, and how to connect them so agents stop guessing your stack.

How to choose between local resume, Remote Control, and Claude Code on the web so your AI work keeps running even when you step away from your computer.

PRO

Use Codex subagents to run accessibility, first-time user, copy, edge-state, and design-system reviews in parallel, then merge the findings into one prioritized report.

StackBlitz's prompt-to-app generator that spins up a full-stack project in the browser. Fast for throwaway prototypes, dangerous as a stand-in for a design system.

Prompt-to-app generator with a built-in backend (Lovable Cloud, built on Supabase). Best-in-class at full-stack generation. Worst-in-class as an excuse to skip having a design system.

Delegate the mechanical parts of design QA to an AI agent that drives a real browser. Token usage, contrast, dark mode, responsive, and focus state checks that run on every PR without you clicking through every page.

A practical walkthrough of the small automation flow I use to collect new YouTube videos overnight, turn their captions into markdown transcripts, summarize the useful ones, and sync everything into Obsidian before I start work.

When CLAUDE.md, taste skills, UX review agents, parallel review, or trust levels stop working, look here. The five most common failure modes per topic, with the fix for each.

Anthropic markets it as a reasoning feature. I use it as a debugger. When Claude misnames a token or mislabels a component, the scratchpad tells you exactly why.

How I label 20 component names by hand and get Claude to pattern-match the rest. Practical setup for component naming, token naming, and any classification task.

A 5-version walkthrough showing how a bare prompt becomes a production-ready design audit. Built on the same iterative method Anthropic teaches internally.

One reusable context block that holds your design system, with versions and sources, a filled-in example, and how to load it in Claude Projects, Claude Code, or the API.

Get design tokens from Claude as JSON that always parses, using structured outputs, then check references and types with a short script before anything reaches your build.

Mintlify is $120 a month. Supernova is enterprise pricing. Astro Starlight is free, fast, and good enough for most design system teams. Here is the full setup, the styling, the Figma embeds, and the AI-assisted automation.

Curated galleries for UI patterns, landing pages, design systems, brands, icons, fonts, and motion.

Most design system problems are not caused by lack of intention. They are caused by inconsistent execution. GitHub Actions fix that by running the boring parts every single time.

AI is good at generation. GitHub Actions are good at repeatable execution. Pair them and you get the reliability layer most AI-assisted design workflows are missing.

If you already use GitHub, Actions give you a way to say 'when this happens, automatically do this'. A step-by-step beginner guide for designers.

PRO

A formula-based approach to prompting AI for landing pages that convert, not just landing pages that look nice.

Good prompts produce good output once. Good context produces good output forever. A practical guide to structuring your projects so Claude Code, Codex, Cursor, or another AI assistant reads, understands, and acts consistently.

PRO

A lightweight folder structure that organizes your customer research so AI can use it for better copy, positioning, product ideas, and landing pages.

PRO

A six-lens rubric for catching polished mediocrity, surface-level UI, and the gap between 'looks good' and 'actually works' in AI-generated design.

PRO

A practical workflow for using AI to generate multiple distinct visual directions before committing to one, so you choose between strong alternatives instead of polishing a single idea too early.

Instead of one long review with six lenses, run four short reviews, each with one lens, in parallel. Learn the multi-lens pattern that cuts design review time in half and surfaces issues a single reviewer would miss.

PRO

Turn any interface screenshot into actionable UX and UI feedback using a structured critique prompt and a six-lens evaluation framework.

PRO

A Claude Code skill that audits every component in your library. Checks docs, props, accessibility, and token usage in one slash command.

PRO

A reusable Claude Code skill that checks every token in your design system against your naming convention. One slash command, instant audit.

PRO

A Claude Code skill that compares your tokens between Figma and code. Catches drift before it ships, with one slash command.

A visual regression testing service built for Storybook. Catches unintended UI changes before they ship.

A markdown file that teaches Claude Code about a project. Turns generic AI output into project-aware AI output.

GitHub's built-in CI/CD platform. Runs workflows in response to events like a push, a pull request, or a schedule.

A secret string that authenticates a user with a service like GitHub or Figma in place of a password.

A browser automation tool for end-to-end tests, visual regression, and automatic component screenshots.

A tool for developing, documenting, and testing UI components in isolation. The default home for design system component docs.

An open-source build system that transforms design tokens from JSON into any platform format (CSS, iOS, Android, and more).

A Figma plugin that manages design tokens inside Figma and syncs them to GitHub, GitLab, or other sources of truth.

Build a simple tracking system to measure component usage across products and prove your design system's impact.

Use Claude to generate a compelling pitch deck that gets leadership buy-in for your design system investment.

Export Figma variables and transform them into production-ready CSS custom properties your engineers can use immediately.

Use Claude Code, Codex, Cursor, or another repo-aware AI tool to scan your component library and generate specs, props tables, and usage guidelines in minutes.

Use AI to distill your design system vision, principles, priorities, and success metrics onto a single page that aligns your entire team.

Build an end-to-end pipeline from Figma to npm: Tokens Studio syncs to GitHub, Style Dictionary transforms, GitHub Actions publishes.

Use Claude Code, Codex, Cursor, or another repo-aware AI tool to scan your token files, flag naming inconsistencies, and generate a clean naming convention in minutes.

Catch visual regressions in your Storybook before they reach production. Every component change reviewed, approved, or flagged.

Programmatically access your Figma components, styles, and variables. Build audits, reports, and automations on real data.

Auto-publish your design tokens on every push. No more manual exports, no more out-of-sync code.

Screenshot every component automatically. Catch visual bugs before they ship, without clicking through pages manually.

Transform design tokens from JSON to CSS, iOS, Android in one command. One source of truth, every platform covered.

Version-control your design decisions. Every token change tracked, every update synced between Figma and code.

Every pull request gets a live URL. Share prototypes without staging servers, without deployments, without waiting.

A template for writing component descriptions that AI tools can parse and act on. The format behind writing 554 descriptions in one session.

A JSON template with when/where/why logic for 20 common design system components. Makes AI pick the right component for the right context.

What to check when AI generates code from your designs. Covers tokens, accessibility, responsiveness, and common AI mistakes.

Define what AI can auto-fix, what needs human review, and what's off-limits. Trust levels, approval rules, and escalation paths for design system automation.

Pre-configured .mcp.json files for connecting Claude Code to Figma, GitHub, and Playwright. Copy, paste your tokens, and connect.

5 ready-to-use prompts for a complete design system audit: naming, tokens, accessibility, component health, and drift detection. Run them every sprint.

A printable one-page reference comparing 7 design token naming conventions side by side. Pin it next to your monitor.

A JSON schema that tells AI tools what makes a valid design token. Prevents invented names, wrong formats, and duplicate tokens.

Adobe's generative AI app for images, video, and audio. Runs Adobe's commercially safe Firefly models plus partner models from Google, OpenAI, and others, and feeds straight into Photoshop and Illustrator.

AI search engine for peer-reviewed research. Ask a question, get a cited answer drawn from 250M+ papers.

A free, browser-based AI image generator (formerly DALL-E Mini) with quick generators for logos, posters, clipart, and simple edits. Ads and watermarks on the free tier.

OpenAI's image generation inside ChatGPT. DALL-E 3 has been retired and replaced by the GPT Image models, which handle text in images, multi-turn edits, and reference photos far better.

Turn text, scripts, and blog posts into videos with AI voices in 80+ languages.

Agentic video editor: describe edits in plain words and apply them on a real multitrack timeline.

AI workspace for data analysis: upload spreadsheets, ask questions in plain language, get charts, reports and presentations.

AI logo maker and brand kit generator for small businesses: logos, brand guidelines, social assets, and an AI-generated website. Free to explore, pay to download.

All-in-one AI assistant for chat, writing, translation, PDFs and images, available as a browser extension, desktop and mobile app.

Turn text, blogs, slides, and recordings into videos with AI voices, avatars, and captions.

AI code review and governance platform (formerly CodiumAI). Review agents check pull requests against your team's rules, in Git and in the IDE.

Research assistant with Smart Citations that show whether later papers support or contrast a study.

Stability AI's open-weight image model family. Download it and run it on your own hardware, fine-tune it, or use it through the API, with free commercial use for small teams.

AI video and avatar platform: turn docs, slides, or links into presenter-led videos in 140+ languages.

The AI code editor formerly called Windsurf, renamed Devin Desktop by Cognition in 2026. An agentic IDE plus a command center for running local and cloud coding agents side by side.