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.

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.

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.

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.