Design Atlas

← Atlas

UX patterns ​

Principles, guidelines, checklists and pattern libraries for how interfaces should behave: component states, accessibility, interaction details and evidence for design decisions.

Start here ​

  • Laws of UX — 30 named psychology principles with takeaways and origins, served as llms.txt and markdown for agents.
  • Inclusive Components — Heydon Pickering's in-depth posts on building common components accessibly, each ending in a checklist.
  • UI Playbook (stale) — nine component "plays" listing the states, traps and ARIA rules each one needs.
  • Detail (detail.design) — about 130 curated interface details across interaction, copy, accessibility and motion, with an agent skill for polish passes.
  • User Interface Wiki — demo-rich articles on motion, sound and type, packaged as a 152-rule agent skill with citable rule IDs.

All sources ​

Showing 50 of 94 sites

Ship: reuse with the notice or credit the licence asks forConditional: read the terms before you reuse anythingLook only: no licence stated, so take ideas and nothing else

  • A11Y.mdAccessibility guidance for coding agents, presented as a concise visual guide with concrete interface examples and setup steps.Verdict UsefulShip licence, open source permissiveAgent channels llms-txtReviewed
  • abtest.designCurated index of A/B tests from real apps, each card naming the change, the company and the measured lift.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • AccessLint SkillsFive WCAG-EM accessibility skills (scan, inspect, audit, fix, diff) that grade every finding by evidence.Verdict UsefulShip licence, open source permissiveAgent channels mcp, cli, skillReviewed
  • AI UX PlaygroundA practical AI-interface reference with named patterns, live interaction demos, product teardowns, and agent skills.Verdict Very usefulLook only licence, not statedAgent channels llms-txt, skillReviewed
  • Angular NativeAlpha MIT framework for building native iOS and Android apps with Angular, Expo and React Native's rendering layer.Verdict NicheShip licence, open source permissiveAgent channels llms-txtReviewed
  • Anthropic Design PluginAnthropic's Apache-2.0 designer plugin: structured critique, UX copy, WCAG review and handoff templates.Verdict UsefulShip licence, open source permissiveAgent channels skillReviewed
  • antislop-uiPurpose-gated UI rules, honesty gates and an evidence-backed Delivery Gate, including dashboard tells.Verdict UsefulShip licence, open source permissiveAgent channels skillReviewed
  • AppllamaiOS app screen and flow archive with recorded walkthroughs, screen details and cross-app comparisons.Verdict Very usefulConditional licence, proprietary paidAgent channels mcpReviewed
  • Atlassian DesignAtlassian's design system: tokens, primitives, component guidelines and accessibility rules, with llms.txt files for agents.Verdict UsefulShip licence, open source permissiveAgent channels llms-txtReviewed
  • AURAI LABShanghai creative studio with a pearl-toned editorial homepage and a public CityWalk product demo.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • Auri (auri.ai)Interactive demos of an AI keyboard, visual chat and notes show how assistant features can fit into everyday writing flows.Verdict NicheConditional licence, proprietary paidAgent channels noneReviewed
  • BaseFrameA product designer's portfolio with detailed operational-software case studies, useful for studying dense workflows across desktop and mobile.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Baymard Ecommerce Design ExamplesEcommerce page gallery with desktop, mobile and app captures annotated with research-based UX findings.Verdict UsefulConditional licence, proprietary paidAgent channels noneReviewed
  • before.click361 App Store screenshot strips, paywalls and onboarding flows, plus an MIT ASO agent skill.Verdict UsefulConditional licence, mixedAgent channels skillReviewed
  • blocks.soFree MIT shadcn app blocks (dialogs, auth, onboarding, stats, sidebars) from the @blocks-so registry.Verdict UsefulShip licence, open source permissiveAgent channels registryReviewed
  • Checklist Design138 design checklists by screen, component and flow, plus an agent skill that reviews a screenshot against the matching list.Verdict Very usefulConditional licence, mixedAgent channels skillReviewed
  • closeit.fastAn e-signature product page with a clickable four-screen walkthrough and a step-by-step document lifecycle.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • ComprestoA media-compression product page with clear before-and-after demos and measured output changes for each format.Verdict UsefulConditional licence, proprietary paidAgent channels llms-txt, apiReviewed
  • coss uiCal.com's Base UI design system with composed particles and agent skills; mixed MIT/AGPL repo.Verdict Very usefulConditional licence, mixedAgent channels llms-txt, registry, skillReviewed
  • DesEngsDated feed of about 106 design-engineering links (tools, libraries, essays, jobs) plus site, minimal-site and designer galleries; MIT source.Verdict UsefulShip licence, open source permissiveAgent channels noneReviewed
  • Design LabInterviews you, mounts five code variants on a temporary route, then writes an implementation plan.Verdict UsefulShip licence, open source permissiveAgent channels skillReviewed
  • Design System Checklist230 items across language, foundations, 29 components and maintenance, with shareable progress links.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Designer Skills111 small design-practice skills in nine plugins, with a router that picks one entry point.Verdict UsefulShip licence, open source permissiveAgent channels skillReviewed
  • DesignMeStartup design studio portfolio with a detailed N3XT case study and a live fintech site to inspect.Verdict UsefulConditional licence, proprietary paidAgent channels noneReviewed
  • Detail (detail.design)About 130 curated interface details (interaction, copy, accessibility, motion) with an installable agent skill for polish.Verdict UsefulConditional licence, mixedAgent channels skillReviewed
  • devlSean Brydon's 158 SaaS screens and blocks built on coss-ui, each installable from a shadcn registry.Verdict UsefulLook only licence, not statedAgent channels registryReviewed
  • Devouring DetailsRauno Freiberg's paid interactive manual on interaction craft, with 23 chapters and downloadable React prototypes.Verdict Very usefulLook only licence, not statedAgent channels noneReviewed
  • editorcnTiptap toolbar and Notion-style block editors plus a read-only renderer, styled for shadcn apps.Verdict UsefulShip licence, open source permissiveAgent channels llms-txt, registry, api, skillReviewed
  • Emil Kowalski's skillsEmil Kowalski's 13 motion-first skills: when to animate, exact curves and durations, Apple-style springs, animation audits.Verdict Very usefulShip licence, open source permissiveAgent channels skillReviewed
  • Empty StatesAbout sixty shipped empty states, captioned by app and platform, on one static page with no filters or links.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • FilloutForm builder with unlimited forms and seats on every plan, 50+ field types, and AI or drag-and-drop authoring; now presented as "by Zite".Verdict UsefulConditional licence, proprietary paidAgent channels llms-txt, apiReviewed
  • Firefly BuildsA personal developer portfolio with a command-palette prompt, a pull-cord motif and separate serious and playful projects.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • FlitA polished macOS dictation product site with detailed interaction demos, feature explanations and a published voice-input workflow for coding agents.Verdict UsefulConditional licence, proprietary paidAgent channels noneReviewed
  • GlisseMIT React components that reproduce Apple's Liquid Glass in the browser — switch, slider, tab bar, menu, input and the glass surface itself.Verdict UsefulShip licence, open source permissiveAgent channels noneReviewed
  • Good UI141 conversion patterns backed by 642 shared A/B tests; the effect sizes are paywalled.Verdict UsefulConditional licence, proprietary paidAgent channels noneReviewed
  • GoodCartE-commerce gallery of real desktop and mobile home, collection and product pages, filterable by industry, style and UX pattern.Verdict UsefulConditional licence, proprietary freeAgent channels noneReviewed
  • Google Arts & CultureMuseum collections and interactive exhibits for studying editorial art storytelling, high-resolution viewing and playful cultural experiences.Verdict UsefulConditional licence, proprietary freeAgent channels noneReviewed
  • Great AppsA small, opinionated gallery of about 216 well-crafted indie iOS apps, from the curator of Sections.wtf.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • GummbleExplore app screenshots and complete mobile and web flows with filters for platform, category and interface pattern.Verdict UsefulConditional licence, proprietary paidAgent channels mcpReviewed
  • Harshit RaghuwanshiA developer portfolio mixing a pixel-art workstation banner, modular project cards and a compact command palette.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Headless UITailwind Labs' small set of unstyled accessible React components, styled through data attributes.Verdict UsefulShip licence, open source permissiveAgent channels noneReviewed
  • ibelick UI SkillsSeven short MIT skills: baseline-ui rules, motion-performance and accessibility fixes, and an evidence-gated improve-ui auditor.Verdict Very usefulShip licence, open source permissiveAgent channels mcp, cli, skillReviewed
  • ImpeccableApache-2.0 design skill with 24 commands, a deterministic slop detector for CI, and PRODUCT.md/DESIGN.md context.Verdict Very usefulShip licence, open source permissiveAgent channels llms-txt, cli, skillReviewed
  • Inclusive ComponentsHeydon Pickering's 11 in-depth posts on making common components accessible, each ending in a checklist.Verdict Very usefulLook only licence, not statedAgent channels noneReviewed
  • Interface DesignCraft skill for dashboards and SaaS UI that saves design decisions to system.md across sessions.Verdict Very usefulShip licence, open source permissiveAgent channels skillReviewed
  • InterfacesDesign-engineering magazine whose issues pair writing on type, motion and colour with interactive demos, source code and agent skills.Verdict Very usefulConditional licence, proprietary paidAgent channels llms-txt, skill, promptsReviewed
  • interior.dev54 carefully finished React micro-interactions with headless hooks, shadcn registry and llms-full.txt.Verdict Very usefulShip licence, open source permissiveAgent channels llms-txt, registryReviewed
  • Jakub Krehel's skillsEleven modular skills that review with evidence and polish UI, typography, colour, layout, accessibility and copy.Verdict Very usefulShip licence, open source permissiveAgent channels skillReviewed
  • KandoCross-platform pie menu whose page argues for radial selection, gesture memory and a dedicated menu per application.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Laws of UX30 psychology principles with takeaways and origins, served as llms.txt and markdown; CC BY-NC-ND.Verdict Very usefulConditional licence, cc noncommercialAgent channels llms-txtReviewed

Patterns worth reusing ​

  • Document every component under the same headings (purpose, states, responsive, implementation traps, accessibility) so missing pieces are easy to spot (UI Playbook).
  • Treat loading as a state that must not change a component's size, and lock a button's width before its label changes (UI Playbook, interior.dev).
  • Start from the obvious, broken version of a component, show how it fails for keyboard, screen-reader and zoom users, and fix it step by step; prefer native elements and add ARIA only when it changes what is announced (Inclusive Components).
  • Keep a toggle's label fixed and let only its state change (Inclusive Components).
  • Put accessibility items inside each component's checklist rather than in a separate section, and give every item a stable ID (Design System Checklist).
  • Give each rule a short prefixed ID and a priority so reviews can cite it and automated passes fix timing and physics before cosmetics (User Interface Wiki); give recurring problems short names people and agents can share (Impeccable).
  • Pair every rule with a wrong and a right example, and put a live demo next to any claim about motion (User Interface Wiki).
  • Tie design decisions to a named, sourced principle (Laws of UX) or to a pattern's test record (Good UI), so reviews argue about evidence rather than taste.
  • Split auditing from implementing: one pass writes a self-contained plan, another applies it (UI Skills).
  • Guard destructive actions with hold-to-confirm instead of a modal, and delay only the first tooltip in a group (interior.dev).
  • Remove motion from high-frequency interactions, and infer intent from pointer direction and speed before reacting (Devouring Details).
  • Use the wording the host platform uses for common actions, and test layouts against long translated strings (Detail).

Pitfalls ​

  • Several classics are dated: Inclusive Components was last updated in 2018 with WCAG 2.0 references, and UI Playbook's examples use React 16 and Reach UI. Take the reasoning and checklists, and check the current WAI-ARIA Authoring Practices.
  • Text licences limit reuse: Laws of UX is CC BY-NC-ND, The Shape of AI is CC BY-NC-SA, Good UI licenses its data per user, and Inclusive Components and Design System Checklist state no licence. Write your own takeaways instead of copying.
  • Principles are not patterns: Laws of UX says why, not what to build, and some entries are loose heuristics rather than tested findings.
  • Rule sets are opinionated and assume a stack: User Interface Wiki is built around React and Motion, baseline-ui assumes Tailwind and Base UI or Radix, and Impeccable's findings are prompts to look again, not verdicts. Record deliberate exceptions.
  • Coverage is narrow: nine plays, 11 components, 29 basic components, with no data tables, comboboxes or date pickers in several of them.
  • The deepest material is often paid or video-only: Devouring Details sits behind a login, Good UI's effect sizes need a plan, and most Detail entries are a recording and one sentence, with no code.