AI design tools & resources

AI-powered front-end code generator focused on building UI components quickly from prompts.

Branding study of 23 AI companies from a Berlin studio, mapping 14 visual identity trends and five brand archetypes. Full report available as a free PDF.

Open-source reference for AI UX with 100+ patterns, visual examples, and reusable components.

Community-sourced library of real-world AI UX patterns, annotated with context on when and why each pattern works.

Library of 200+ AI UX interactions curated from leading AI products, with pattern cheatsheets, case studies, and a weekly newsletter. Aimed at product teams shipping AI features.

Design-to-code agent that turns Figma files, live URLs, or prompts into production-ready React or HTML. Supports design system imports and DESIGN.md files; powers codegen inside Bolt and Replit.

Anthropic's free learning hub for building with Claude — courses and guides on prompting, the API, agents, and the Model Context Protocol, from beginner to advanced.

AI landing page and website builder that generates from a text prompt or a screenshot. Outputs real HTML, Tailwind, and vanilla JS, with export to Figma and a large template library.

Browser-based AI agent by StackBlitz that writes, runs, and deploys full-stack apps directly in the browser — no local setup needed.

Motion design platform bridging creative coding and AI generation. Build animations, 2D and 3D visuals, and text effects as reusable systems you can remix, export, and share.

IBM's design guidelines for building AI-powered products using the Carbon design system — patterns for chat, generation, and model transparency.

Open-source CLI tool that extracts a complete design token set from any live website — colours, typography, spacing, and shadows as W3C-compliant output.

Paste a URL to extract a DESIGN.md plus Tailwind v4 config and design tokens — colours, typography, spacing, and CSS variables for Claude, Cursor, and Stitch.

Browsable library of design-specific prompts for use with AI tools like ChatGPT and Claude.

Curated prompts and templates specifically crafted for designers working with generative AI tools.

Paste a URL and get a DESIGN.md spec: colour tokens, type scale, spacing, breakpoints, and interaction states. Measured live from the DOM and CSSOM rather than inferred from screenshots. CLI available.

AI-driven prompt-to-code tool that turns Figma designs into functional prototypes, web apps, and interactive UI.

Product-aware AI design agent for teams. Ingests your live product, analytics, and design system to generate flows, screens, and UX reviews in context.

Free collection of DESIGN.md files extracted from real sites — Stripe, Vercel, Linear, Uber and dozens more. Drop one into a project so your coding agent follows a specific visual language.

GitLab's design system guidance for AI features, structured around four dimensions: interaction type, agent source, mode, and task. Includes naming conventions and CTA rules.

Google's home for early AI experiments — hands-on access to projects like Flow, Whisk, and NotebookLM, and demos exploring where generative AI is heading.

Google's hub of free AI courses and certifications — practical training on generative AI, prompting, and applying AI tools across everyday work.

In-depth UX and ML guidance, principles, patterns, and workshops for creating helpful AI products.

Industry-standard JavaScript animation library used on 11M+ sites. Animates CSS, SVG, canvas, WebGL, and React. Now fully free including all plugins.

AI website builder by Hostinger — generates and deploys full websites from a text description.

Open-source React component library for voice and multimodal agent interfaces. Includes five audio visualiser styles, control bars, and chat transcripts, built on shadcn/ui.

AI tool that builds full-stack web applications (React, Supabase) from plain-language prompts — deployable prototypes for non-coders.

AI that converts prompts into high-fidelity UI mockups and component trees with HTML/CSS and React export.

18 research-backed guidelines for human-AI interaction across the interaction lifecycle, plus a design pattern library, workbook, and playbook. Synthesised from 20+ years of HCI research.

Turns your product's codebase into editable canvas frames. Design against real components, tokens, and live data, then hand off changes as a pull request instead of a mockup.

OpenAI's free learning platform — courses, workshops, and hands-on resources on using and building with AI, from foundational literacy to advanced developer skills.

Open standard for generative UI. Lets LLMs produce structured, streamable UI components with up to 67% fewer tokens than JSON. Includes a React SDK and playground.

Browser-based WebGL platform for generating and publishing 3D particle swarms with custom AI logic. 20,000+ particles driven by user-defined physics algorithms.

Open-source interactive library of browser-based physics simulations with real-time visualisations. Covers mechanics, waves, electromagnetism, and quantum.

ServiceNow's framework for human-centred AI design, built around transparency, traceability, and user control. Sits alongside their conversation design guidelines and Now Assist components.

Copy-paste shadcn components, blocks, and templates paired with an AI theme generator. Includes a Figma-to-code plugin, MCP server, and one-click handoff to v0, Bolt, or Lovable.

Open-source library of accessible, copy-paste React components built on Tailwind. You own the code rather than installing a package — the de facto base layer for AI-generated UI.

Pattern library of AI UX interactions — covers generation, error states, feedback loops, and transparency patterns used across leading AI products.

Shopify's design team site, covering their design principles, craft, and the work behind Polaris — the design system for the Shopify admin.

AI-powered UI builder that generates production-ready React components with a visual editor — bridges the gap between design and code.

Open-source component gallery for AI interfaces — charts, code blocks, diffs, data tables, and social post artifacts. Each component ships with a schema and example data. MIT licensed.

Open-source visual theme editor for shadcn/ui. Adjust colours, typography, and radii with live preview, then export Tailwind CSS variables. Built to stop every shadcn site looking identical.

Twilio's design system including components, tokens, and guidelines built for accessible, inclusive product experiences.

AI design assistant that generates wireframes, user flows, and UI screens from plain-text descriptions — works standalone and as a Figma plugin.

Vercel's AI UI generator that outputs production-ready React + Tailwind components from prompts.

List of buzzword prompts for generating trendy, expressive UI aesthetics — useful for rapid mood-boarding and style exploration.