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 ​

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

  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • LayersCommunity where designers post product and web work, with profiles, teams and a job board; Plus from $6/month.Verdict UsefulConditional licence, proprietary paidAgent channels noneReviewed
  • Luma EventsEvent platform with a Spanish-language landing page built around floating invitation cards, a centered headline and a clear create-event path.Verdict UsefulConditional licence, proprietary paidAgent channels noneReviewed
  • mblode Agent SkillsDesign audits with a ship verdict, Playwright probes, a 78-rule typography check, and motion curves fitted from recordings.Verdict Very usefulShip licence, open source permissiveAgent channels skillReviewed
  • MobbinThe biggest library of real app screens and flows, searchable by agents through its own MCP server; strict terms.Verdict Very usefulConditional licence, proprietary paidAgent channels mcp, llms-txt, apiReviewed
  • Motion Design Principles by ZajnoAn interactive lesson site that demonstrates easing, stagger, masking, parallax, zoom and other interface motion techniques.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • OssiumDark developer platform with a centered discovery hero, feature previews and a dashboard route for finding open-source contribution work.Verdict NicheConditional licence, proprietary paidAgent channels llms-txt, api, mcpReviewed
  • Oversight SupplyPaid library of Webflow and Framer templates plus standalone creative sections, with previews and prompt-based project handoff.Verdict UsefulConditional licence, proprietary paidAgent channels noneReviewed
  • Page FlowsRecorded web and app journeys with annotated steps, screen references and UI examples.Verdict Very usefulConditional licence, proprietary paidAgent channels noneReviewed
  • PairfectRelationship activity app landing page with a two-person demo, activity previews and a free-plus-paid pricing ladder.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • Rauno's Field Notes #5A video-backed interaction study of stacked sidebar cards, hover cues, hit areas and dismissal motion.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • ReeooSearchable references for websites, apps, store screenshots, event cards, icons and tools, with filters for industry, colour, style and layout.Verdict Very usefulConditional licence, proprietary freeAgent channels noneReviewed
  • ReferoSearch real web and app screens by page type, UX pattern, element, flow, company, colour or font.Verdict Very usefulConditional licence, proprietary paidAgent channels mcp, skillReviewed
  • SaaSFrameSaaS marketing pages, product screens, flows and emails tagged by page, section and UI pattern; most browsing and all Figma files are behind a Pro plan.Verdict UsefulConditional licence, proprietary paidAgent channels noneReviewed
  • ScreensDesignStudy real app onboarding, paywalls and product flows through searchable screens, chaptered videos and app breakdowns.Verdict UsefulLook only licence, not statedAgent channels mcpReviewed
  • Sona UISmall MIT set of accessible animated React components with an agent manifest, catalog, skill and read-only API through shadcn.Verdict UsefulShip licence, open source permissiveAgent channels llms-txt, registry, api, skillReviewed
  • StyleSeed23-skill engine that locks decisions in STYLESEED.md, builds OKLCH palettes from one colour, and scores UI to 80 or above.Verdict UsefulShip licence, open source permissiveAgent channels skillReviewed
  • SupasteA vivid product landing page that uses a simulated clipboard library to explain a native macOS utility.Verdict NicheConditional licence, proprietary paidAgent channels noneReviewed
  • Superfuture Design ReviewTen-area design critique ranked by severity with exact fixes; it sends a hidden usage ping.Verdict NicheShip licence, open source permissiveAgent channels skillReviewed
  • The Shape of AIEmily Campbell's 57 AI UX patterns in six groups, each with trade-offs and real product examples; CC BY-NC-SA.Verdict Very usefulConditional licence, cc noncommercialAgent channels noneReviewed
  • UI Playbook (stale)Rauno Freiberg's nine component "plays" listing the states, traps and ARIA rules each one needs.Verdict UsefulStaleShip licence, open source permissiveAgent channels noneReviewed
  • UI Skills306 design-engineering skills from 84 authors, with a routing skill, CLI, MCP and 18 real company DESIGN.md files.Verdict Very usefulConditional licence, mixedAgent channels mcp, llms-txt, cli, skillReviewed
  • UI Taste by UizzeShort product-first playbooks for web and iOS UI, with an optional paid MCP of real screens.Verdict NicheShip licence, open source permissiveAgent channels mcp, skillReviewed
  • UI UX Pro MaxSearchable local database of styles, palettes and font pairs, queried by a script; writes MASTER.md plus page overrides.Verdict Very usefulShip licence, open source permissiveAgent channels cli, skillReviewed
  • ui-design.studioA free interface gallery with credited shots, designer pages and tags for patterns such as settings, forms and navigation.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • UI-Patterns.comA reference library that explains recurring interface and persuasion patterns with usage notes and screenshot examples.Verdict UsefulConditional licence, cc noncommercialAgent channels noneReviewed
  • UIWTFRauno Freiberg's seven classic experiments (command menu, copy source, link preview, minimap), each with a rationale.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • User Interface WikiRaphael Salaja's nine demo-rich articles on motion, sound and type, installable as a 152-rule agent skill.Verdict Very usefulShip licence, open source permissiveAgent channels skillReviewed
  • UserOnboardAnnotated onboarding teardowns presented as navigable screen sequences, useful for studying flow, hierarchy and progressive disclosure.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • Vercel Web Design GuidelinesTiny review skill that fetches Vercel's live Web Interface Guidelines each run and reports terse file:line findings.Verdict Very usefulShip licence, open source permissiveAgent channels skillReviewed
  • Web Quality SkillsAddy Osmani's six measurement-first skills: audit with Lighthouse and DevTools, fix, then re-run the same WCAG 2.2 audit.Verdict Very usefulShip licence, open source permissiveAgent channels skillReviewed
  • WebsiteviceA website inspiration directory organized by industry and site purpose, with short notes on why each example is notable.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Wondel.ai SkillsRefactoring UI, Nielsen/Krug heuristics and web typography turned into scored audit skills.Verdict UsefulShip licence, open source permissiveAgent channels skillReviewed

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.