Browse Library

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.

A curated map of design skills, plugins, and prompt libraries for improving AI-generated product UI.

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 deep Supabase integration. 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.

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.

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.

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

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.

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 Claude Code skill that compares your tokens between Figma and code. Catches drift before it ships, with 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.

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.

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

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

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

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

Transforms text into vivid, diverse artistic images.

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.

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

Revolutionize hiring with AI-driven automated voice interviews.

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.

PRO

A designer-friendly walkthrough of the black screen, the commands you actually need, and why the most powerful AI tools live here.

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.