Browse Library

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.

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.

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 deep Supabase integration. Best-in-class at full-stack generation. Worst-in-class as an excuse to skip having a design system.

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.

A drop-in system prompt template for any Claude work that touches your design system. Cache it once, reuse it on every screen, audit, and component review.

A prefill technique that makes Claude return parseable JSON tokens with no preamble, no apology, and no markdown wrapper. Drop-in pattern for token extraction pipelines.

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

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.

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.

Streamlines content creation with AI-generated voices, images, videos.

Transform text into vibrant images and designs, boosting creativity effortlessly.

Unlock expert knowledge: AI-powered, ad-free research from 200M+ scientific papers.

Transforms text into vivid, diverse artistic images.

AI-driven tool for effortless, high-quality content generation.

Generate stunning images from text with advanced AI technology.

AI-driven platform for rapid website, brand, and invoice creation.

Transform text into captivating videos with lifelike AI voiceovers.

Boost content creation and SEO with AI-driven writing, analysis, and optimization.

Revolutionize content creation with diverse, intuitive AI generators.

Revolutionize hiring with AI-driven automated voice interviews.

Streamline, schedule, analyze, and engage on social media.

Unify marketing, sales, CRM; AI-driven insights to boost efficiency.

Effortlessly transform text into dynamic, full-length videos.

Transform text into stunning, royalty-free images instantly.

An AI-driven platform for efficient, high-quality content creation and marketing strategy enhancement.

Optimize tasks, automate alerts, and retrieve data seamlessly.

Unleash AI-driven data analysis with real-time insights and automated processing.

AI-driven branding: logos, websites, and full identity kits.

Effortlessly create personalized travel itineraries in seconds.

AI-powered tool delivers real-time market alerts and insights.

Unleash rapid app development with AI, NoCode, and MicroApps ecosystem.

Turns plain English tasks into instant, automated workflows.

AI assistant revolutionizing chat, writing, coding, and more.

AI-driven, generates memorable, brandable business names efficiently.

Transform text into polished videos effortlessly; edit with ease.

Automates code reviews, test generation, and quality assurance.

Generative AI to redesign any room in seconds.

Transform research with AI-driven Smart Citations and deep insights.

73,530 free book summaries in 40 languages (with paid audio).

Generate stunning images from text with this AI tool.

AI-powered platform for quick, multilingual video creation.

Unlock rapid, secure coding with AI-driven personalized suggestions across IDEs.

Effortlessly generate viral YouTube scripts and growth strategies.

Streamline coding with predictive AI, deployment, and integration.

Boost productivity with AI: content, visuals, insights, and real-time data.

Transforms searches into personalized, private experiences with AI-driven results.

Review a component or page for WCAG 2.1 compliance, covering contrast, keyboard navigation, screen readers, and motion.

Define meaningful adoption metrics for your design system, including what to measure, how to collect data, and target benchmarks.

Write clear, useful design system changelog entries that help consumers understand what changed and what to do about it.

Write a clear, actionable component deprecation notice with migration steps, timeline, and replacement guidance.

Map primitive color values to semantic design tokens with clear intent, usage rules, and accessibility notes.

Translate brand guidelines (PDF, style guide) into a structured set of design tokens with proper naming and hierarchy.

Generate a full component specification from just a component name, including props, variants, states, tokens, and accessibility requirements.

Identify missing variants, states, and edge cases for an existing component by analyzing common UI patterns.

Run a structured design critique session using a framework that covers usability, visual design, accessibility, and consistency.

Run a quick, structured health check on your design system covering tokens, components, documentation, adoption, and tooling.

Write a compelling design system proposal or RFP document to secure buy-in, budget, and headcount from leadership.

Review AI-generated or hand-written code against a Figma design to catch visual mismatches, missing states, and token drift.

Standardize icon naming across your design system with a consistent, predictable naming scheme.

Generate a step-by-step migration plan for moving between design system versions, tools, or architectures.

Generate responsive design tokens that adapt spacing, typography, and layout across breakpoints.

Create a consistent spacing scale from a base unit, with token names and usage guidelines for layout and component spacing.

Generate comprehensive Storybook stories for a component, covering all variants, states, and edge cases.

Generate dark mode token values from an existing light mode token set, with proper contrast and readability adjustments.

Generate clear, structured documentation for a set of design tokens, including usage examples, do's and don'ts, and visual references.

Audit your design token names against naming conventions and flag inconsistencies, typos, and structural issues.

AI meeting notes that actually work. Granola transcribes, summarizes, and organizes your design reviews, critiques, and stakeholder meetings automatically.

Prompt checklist for enforcing accessibility in AI-generated UI components.

Prompt templates for extracting, documenting, and sharing component metadata.

Prompts for generating components from Figma with MCP and documenting implementation.

Prompt templates for generating, auditing, and syncing design tokens.

Prompts for generating and maintaining component and design system documentation.

Prompt templates for building interactive prototypes and implementation-ready handoff artifacts.

Prompt templates for user research, competitive analysis, and design trend exploration.

A curated collection of resources on building and using AI agents.

Overview of the Figma tools in the library, with individual cards for every plugin and resource below.

Curated links for learning prompt engineering from basics to advanced techniques.

A curated list of AI coding, creative, productivity, and PM tools.

Annotate wireframes and designs for clearer handoff.

Create beautiful, uniform, accessible UI color palettes.

Find and fix style inconsistencies for better design-to-dev handoff.

Quickly check WCAG color contrast ratios.

Find missing styles in your designs before handoff.

Reorganize large design systems and copy styles between files.

Import/export Figma styles and variables to and from JSON.

Export Figma styles and custom tokens to JSON or GitHub.

Prompt to design and build concepts directly in Figma.

Access Font Awesome icons directly inside Figma.

Attach markdown documentation to components directly in Figma.

Annotate designs for accessibility handoff more efficiently.

Find all instances of a component used in your file.

Create, attach, clone, and move components without losing overrides.

Generate all possible component instances in a labeled table.

Keep your design system in sync, documented, and aligned.

Accessibility toolkit for contrast, focus order, alt text, and simulation.

Link and organize styles and variables across design files.

Manage, organize, and export design tokens in Figma.

Generate UI based on an existing component library.

Visualize complex Figma variable relationships clearly.

Document design system variables with clarity and structure.

Run AI-assisted user testing flows for prototypes.

Use this deck for accessibility workshops, audits, and team training.

Integrate accessibility checks directly into design workflows.

A monitoring dashboard that tracks the health of your design system. Measures token coverage, component adoption, accessibility, and design-code parity.

A .env file is a small text file that holds secrets like API keys outside your code. Your app reads from it at runtime. Never commit it to Git.

The difference between raw value tokens and purpose-driven tokens. Understanding this distinction is essential for scalable design systems.

A backend platform with database, auth, and storage features. A pre-built infrastructure kit for web applications.

A deployment and hosting platform for modern web applications. The 'publish to web' button with strong defaults.

A comprehensive checklist for auditing your design token system. Covers naming, structure, accessibility, and documentation.

Generate comprehensive component documentation including props, usage guidelines, do's and don'ts, and accessibility notes from a component's code.

PRO

Figma plugin that validates semantic token usage based on intent, not just appearance. Catches raw hex colors, primitive tokens in components, and intent mismatches.