Collections
Curated for a real goal.
Several resources, hand-picked and ordered for one job. Read the intro, then work down the list.
- 9 resources
Beautiful open-source React components
Component libraries and single components that are free, well made, and easy for an agent to install.
Base UI · Origin UI · Tremor · Motion-Primitives · Magic UI · +4 more
- 9 resources
Best resources for designing with Claude Code
The MCP servers, skills and guidelines that make a coding agent produce better-looking work.
Web Interface Guidelines · Context7 · shadcn MCP server · Playwright MCP · Vercel Agent Skills · +4 more
- 9 resources
Best resources for first-time vibe coders
If you've never built software before, start here. Nothing on this list needs design or coding knowledge.
Refactoring UI · Godly · Realtime Colors · tweakcn · AutoAnimate · +4 more
- 9 resources
Design systems every agent should know
Public systems that document their reasoning, so you can borrow the thinking without the branding.
Vercel Geist · GitHub Primer · Shopify Polaris · GOV.UK Design System · Material Design 3 · +4 more
- 9 resources
Make your landing page better
References, sections and effects for a landing page that looks like someone cared.
Godly · SaaS Landing Page · Land-book · Magic UI · Aceternity UI · +4 more
- 7 resources
Make your shadcn app look less generic
You used the defaults. Everyone used the defaults. Here's how to fix that in an afternoon.
tweakcn · Fontshare · Radix Colors · Origin UI · Motion-Primitives · +2 more
- 11 resources
Motion resources worth knowing
From a one-line list animation to full scroll-driven 3D, in order of effort.
AutoAnimate · Motion-Primitives · NumberFlow · Animations on the Web · GSAP · +6 more
- 7 resources
Resources for beautiful SaaS dashboards
Charts, tables, dense layouts and the references that show how good products handle them.
Refero · Tremor · Origin UI · NumberFlow · Shopify Polaris · +2 more
- 6 resources
Typography resources every builder should know
Where to find a good typeface, how to see it in use, and how to size it properly.
Typewolf · Fontshare · Fonts In Use · Typescale · Fontsource · +1 more