Field guide, 2026

Design references for the work in front of you

Design Atlas is a reviewed guide to websites, interface patterns, component libraries and creative tools. Find a useful reference, understand its tradeoffs, then inspect the live work before you borrow an idea.

Browse by topicStart from the kind of page, system or interaction you are building.Search all sitesFilter reviewed references by topic, verdict, agent channel or review date.

Reviewed references

790

Topic hubs

21

Shippable under licence

193

Latest review

2026-11-11

Latest reviews

The five most recent entries, carrying the same verdict, licence, agent channel and review date as every list in the atlas.

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

• ReferenceVerdictLicenceAgent channelsReviewed
• Admire The WebLong-running web design gallery with counted categories, a colour filter and an interactions section, running to 76 pages of indexed sites.Verdict UsefulLook only licence, not statedAgent channels noneReviewed 2026-11-11
• AnsphareFree gallery that pairs a design with its prompt, its DESIGN.md or a skill file you can drop into Claude or Cursor.Verdict UsefulConditional licence, proprietary paidAgent channels cli, skill, promptsReviewed 2026-11-11
• Babylon.jsApache-2.0 WebGL and WebGPU engine from Microsoft, with a playground, node editors, sandbox and inspector for building 3D in the browser.Verdict UsefulShip licence, open source permissiveAgent channels llms-txtReviewed 2026-11-11
• BoardUIReact and Tailwind design system for dashboards and agentic interfaces, with 103 components, 19 charts and an MCP server that installs source.Verdict Very usefulConditional licence, mixedAgent channels mcp, llms-txt, skill, registryReviewed 2026-11-11
• CTA GalleryCalls-to-action pulled from real sites and classified by business function, with copywriting tips alongside.Verdict NicheLook only licence, not statedAgent channels noneReviewed 2026-11-11

Choose a starting point

• Explore visual directionsGalleries and live sites to study before setting a style.
• Build a launch or marketing pagePage structures, examples and calls to action.
• Shape an interface or design systemComponent libraries, patterns and implementation details.
• Give a coding agent a design workflowSkills and tools for research, implementation and review.

Topics

Every hub, in the order the atlas reads them. Each one opens with a shortlist, then lists every source tagged with that topic.

1. 01Inspiration366 sites
2. 02Landing pages194 sites
3. 03Navigation16 sites
4. 04Footers6 sites
5. 05CTA12 sites
6. 06Error pages6 sites
7. 07UX patterns94 sites
8. 08Components236 sites
9. 09AI interfaces52 sites
10. 10Documentation57 sites
11. 11Motion240 sites
12. 123D and shaders78 sites
13. 13Typography and styles198 sites
14. 14Color54 sites
15. 15DESIGN.md files34 sites
16. 16Assets144 sites
17. 17Icons48 sites
18. 18Sound12 sites
19. 19Agents and prompts140 sites
20. 20Agent skills45 sites
21. 21Data viz27 sites

Install the agent skills

Design Atlas includes two skills: design-atlas finds references and design-atlas-ui turns them into a design direction and working interface. What each one does is on its own page.

Install both with npx skills for any supported coding agent:

npx skills add sthbryan/design-atlas

Use --agent codex to target Codex, or --skill design-atlas to install only the reference skill. Claude Code can also use its plugin marketplace:

/plugin marketplace add sthbryan/design-atlas
/plugin install design-atlas@design-atlas

Read how the skills work.

Use a reference well

Open a site page to check its verdict, licence and agent channels before using it. For visual work, visit a few individual sites and inspect their current pages; the atlas records what was reviewed, but the live site is the evidence.

Find the full README, contribution guide and website design system. Agents can start with the machine-readable llms.txt or sites.json.