# Don't Make It Ugly

> Good design references for whatever you're building.

A curated, hand-written directory of design resources for people building software with coding agents. Every entry says what it is, why it earns its place, and whether an agent can read, install or use it. Nothing here is vendor copy and nothing is auto-scraped.

If you are setting up a project, start with a Pack: it puts a DESIGN.md contract, reference screens and a design check into the repo before any UI is written. Every page below has a markdown twin at the same path with a .md suffix.

## Packs

- [Editorial Landing Page](https://dontmakeitugly.com/packs/editorial-landing-page.md): A marketing page that reads like a magazine. Type first, one warm accent, no blob.
- [First Vibe-Coded App](https://dontmakeitugly.com/packs/first-vibe-coded-app.md): Defaults that are hard to get wrong, for people who have never built software before.
- [Less Generic shadcn](https://dontmakeitugly.com/packs/less-generic-shadcn.md): Keep the components, lose the look. A theme, a typeface and a radius, in that order.
- [Restrained SaaS Dashboard](https://dontmakeitugly.com/packs/restrained-saas-dashboard.md): Dense, calm and aligned. The look of a product people use every day.

## Collections

- [Beautiful open-source React components](https://dontmakeitugly.com/collections/beautiful-open-source-components.md): Component libraries and single components that are free, well made, and easy for an agent to install.
- [Best resources for designing with Claude Code](https://dontmakeitugly.com/collections/building-with-claude-code.md): The MCP servers, skills and guidelines that make a coding agent produce better-looking work.
- [Best resources for first-time vibe coders](https://dontmakeitugly.com/collections/first-time-vibe-coders.md): If you've never built software before, start here. Nothing on this list needs design or coding knowledge.
- [Design systems every agent should know](https://dontmakeitugly.com/collections/design-systems-to-study.md): Public systems that document their reasoning, so you can borrow the thinking without the branding.
- [Give your agent a DESIGN.md](https://dontmakeitugly.com/collections/design-md-for-agents.md): The spec, the catalogues and the extractors behind the one file that stops your agent redesigning your product on every request.
- [Make your landing page better](https://dontmakeitugly.com/collections/better-landing-pages.md): References, sections and effects for a landing page that looks like someone cared.
- [Make your shadcn app look less generic](https://dontmakeitugly.com/collections/less-generic-shadcn.md): You used the defaults. Everyone used the defaults. Here's how to fix that in an afternoon.
- [Motion resources worth knowing](https://dontmakeitugly.com/collections/motion-worth-knowing.md): From a one-line list animation to full scroll-driven 3D, in order of effort.
- [Resources for beautiful SaaS dashboards](https://dontmakeitugly.com/collections/saas-dashboards.md): Charts, tables, dense layouts and the references that show how good products handle them.
- [Typography resources every builder should know](https://dontmakeitugly.com/collections/typography-every-builder-should-know.md): Where to find a good typeface, how to see it in use, and how to size it properly.

## Resources

### Inspiration

- [Best Designs on X](https://dontmakeitugly.com/resources/best-designs-on-x.md): The design work worth seeing on X, collected hourly so you don't have to scroll for it. (agent: limited)
- [Collect UI](https://dontmakeitugly.com/resources/collect-ui.md): Daily UI inspiration sorted by the exact screen you're designing. (agent: limited)
- [CTA Gallery](https://dontmakeitugly.com/resources/cta-gallery.md): Real calls to action, sorted into buttons, forms, modals, pricing and newsletters. (agent: limited)
- [Dark Mode Design](https://dontmakeitugly.com/resources/dark-mode-design.md): A gallery of websites that get dark interfaces right. (agent: limited)
- [Godly](https://dontmakeitugly.com/resources/godly.md): Astronomically good web design inspiration, hand-picked. (agent: limited)
- [Inspora](https://dontmakeitugly.com/resources/inspora.md): A design inspiration feed across web, branding, product, motion, illustration, 3D and print. (agent: limited)
- [Land-book](https://dontmakeitugly.com/resources/land-book.md): A big, searchable gallery of landing pages, filterable by style, colour and industry. (agent: limited)
- [Mobbin](https://dontmakeitugly.com/resources/mobbin.md): The biggest library of real app screens and user flows. (agent: limited)
- [Navbar Gallery](https://dontmakeitugly.com/resources/navbar-gallery.md): 550+ real website navbars, sorted by type: mega menus, sidebars, tabs and the rest. (agent: limited)
- [posts.design](https://dontmakeitugly.com/resources/posts-design.md): Social posts and OG images from 400+ brands, as they actually shipped. (agent: limited)
- [Recent](https://dontmakeitugly.com/resources/recent-design.md): A tight, hand-picked feed of design, websites and products. The successor to Godly. (agent: limited)
- [SaaS Landing Page](https://dontmakeitugly.com/resources/saas-landing-page.md): Landing page examples organised by the exact section you're stuck on. (agent: limited)
- [Supahero](https://dontmakeitugly.com/resources/supahero.md): Hundreds of website hero sections from real sites, nothing else. (agent: limited)
- [Typewolf](https://dontmakeitugly.com/resources/typewolf.md): What's trending in type, with real sites showing each font in use. (agent: limited)

### Components

- [Aceternity UI](https://dontmakeitugly.com/resources/aceternity-ui.md): Showy, copy-paste React components for landing pages that need a moment. (agent: good, CLI)
- [Liquid Glass JS](https://dontmakeitugly.com/resources/liquid-glass-js.md): Apple's Liquid Glass look on the web: real-time refraction, blur and masking in WebGL. (agent: excellent)
- [Magic UI](https://dontmakeitugly.com/resources/magic-ui.md): Animated React components and effects for landing pages, built to sit alongside shadcn/ui. (agent: excellent, CLI)
- [Origin UI](https://dontmakeitugly.com/resources/origin-ui.md): Hundreds of polished, practical components built on shadcn/ui conventions. (agent: excellent, CLI)
- [Tailwind Plus](https://dontmakeitugly.com/resources/tailwind-plus.md): The official paid Tailwind component and template catalogue (formerly Tailwind UI). (agent: limited)
- [Thinking Orbs](https://dontmakeitugly.com/resources/thinking-orbs.md): An animated orb that shows what your AI is doing: listening, thinking, searching, working. (agent: excellent, npm)
- [Tremor](https://dontmakeitugly.com/resources/tremor.md): Copy-paste React components for dashboards and charts. (agent: excellent)

### Design Systems

- [Apple Human Interface Guidelines](https://dontmakeitugly.com/resources/apple-hig.md): Apple's guidance on designing for iOS, macOS, watchOS and visionOS. (agent: good)
- [Material Design 3](https://dontmakeitugly.com/resources/material-design-3.md): Google's design system, documented in exhaustive, agent-readable detail. (agent: good)
- [Vercel Geist](https://dontmakeitugly.com/resources/geist-design-system.md): Vercel's design system: the reference for the modern developer-tool look. (agent: good)

### Motion

- [60fps](https://dontmakeitugly.com/resources/sixty-fps.md): Two thousand animation details from best-in-class apps, filtered by interaction. (agent: limited)
- [Anime.js](https://dontmakeitugly.com/resources/animejs.md): A lightweight, framework-free animation library with a beautiful API. (agent: excellent, npm)
- [AutoAnimate](https://dontmakeitugly.com/resources/autoanimate.md): One line of code that animates list changes for you. (agent: excellent, npm)
- [GSAP](https://dontmakeitugly.com/resources/gsap.md): The professional-grade animation toolkit, now free including all plugins. (agent: excellent, npm)
- [Lenis](https://dontmakeitugly.com/resources/lenis.md): Smooth scrolling that doesn't fight the browser. (agent: excellent, npm)
- [Liquid Logo](https://dontmakeitugly.com/resources/liquid-logo.md): Drop in your logo and get it back as flowing liquid metal, rendered live with shaders. (agent: good)
- [MetalForge](https://dontmakeitugly.com/resources/metalforge.md): Tweak sliders, get a real Metal shader for SwiftUI or a Skia shader for React Native. (agent: limited)
- [NumberFlow](https://dontmakeitugly.com/resources/number-flow.md): Animated number transitions that make counters, prices and stats feel expensive. (agent: excellent, npm)
- [React Three Fiber](https://dontmakeitugly.com/resources/react-three-fiber.md): Three.js as React components, with a huge helper ecosystem. (agent: excellent, npm)
- [ShaderGradient](https://dontmakeitugly.com/resources/shadergradient.md): Slow-moving 3D gradients for React, Framer and Figma that look like expensive motion design. (agent: excellent, npm)

### Assets

- [App Genie Icons](https://dontmakeitugly.com/resources/app-genie-icons.md): AI-generated app icons, each published with the full prompt that made it. (agent: good)
- [Fontsource](https://dontmakeitugly.com/resources/fontsource.md): Self-host any open-source font with an npm install. (agent: excellent, npm)
- [Iconify](https://dontmakeitugly.com/resources/iconify.md): One API and one component for two hundred thousand icons from every major set. (agent: excellent, npm, API)
- [Radix Colors](https://dontmakeitugly.com/resources/radix-colors.md): Colour scales designed for real UI, with light and dark modes that actually match. (agent: excellent, npm)
- [Simple Icons](https://dontmakeitugly.com/resources/simple-icons.md): SVG logos for thousands of brands, in one consistent style. (agent: excellent, npm)
- [SVGL](https://dontmakeitugly.com/resources/svgl.md): A beautiful library of full-colour SVG logos with light and dark variants. (agent: excellent, API)
- [unDraw](https://dontmakeitugly.com/resources/undraw.md): Open-source illustrations you can recolour to match your brand. (agent: good)

### Agent Resources

- [21st.dev Magic MCP](https://dontmakeitugly.com/resources/magic-mcp-21st.md): Describe a component in your agent and get a polished one generated from a large library. (agent: excellent, MCP)
- [Anthropic Skills](https://dontmakeitugly.com/resources/anthropic-skills.md): Anthropic's public skills repository, including skills for front-end and design work. (agent: excellent)
- [Chrome DevTools MCP](https://dontmakeitugly.com/resources/chrome-devtools-mcp.md): Let your agent inspect, debug and profile a live Chrome tab. (agent: excellent, MCP, npm)
- [DESIGN.md Specification](https://dontmakeitugly.com/resources/design-md-spec.md): Google Labs' open format for describing a visual identity to a coding agent. (agent: excellent, npm, CLI)
- [DesignMD](https://dontmakeitugly.com/resources/designmd.md): Point it at a URL and it extracts that site's design system as a DESIGN.md. (agent: excellent)
- [DESIGNMD by Hyperbrowser](https://dontmakeitugly.com/resources/hyperbrowser-designmd.md): A single-purpose tool that extracts a DESIGN.md from any URL you give it. (agent: good)
- [designmd.supply](https://dontmakeitugly.com/resources/designmd-supply.md): Pre-generated DESIGN.md style guides for the world's best-known brands, MIT licensed. (agent: excellent)
- [getdesign.md](https://dontmakeitugly.com/resources/getdesign-md.md): A 550-strong catalogue of DESIGN.md files, following Google's spec. (agent: excellent)
- [OpenDesign](https://dontmakeitugly.com/resources/open-design.md): An open-source desktop app that turns your existing coding agent into a design tool. (agent: excellent)
- [Playwright MCP](https://dontmakeitugly.com/resources/playwright-mcp.md): Give your agent a browser so it can see and test what it built. (agent: excellent, MCP, npm)
- [Refero Styles](https://dontmakeitugly.com/resources/refero-styles.md): DESIGN.md files extracted from 2,000+ real product websites, written for agents. (agent: excellent, MCP)
- [shadcn MCP server](https://dontmakeitugly.com/resources/shadcn-mcp.md): Let your agent browse, search and install components from any shadcn registry. (agent: excellent, MCP, CLI)
- [TypeUI](https://dontmakeitugly.com/resources/typeui.md): Design skills, UI prompts and a shared design system, handed to your agent over MCP. (agent: excellent, MCP)
- [UI/UX Pro Max](https://dontmakeitugly.com/resources/ui-ux-pro-max.md): A popular open-source design-intelligence skill with styles, palettes and font pairings for agents. (agent: excellent, CLI)
- [v0](https://dontmakeitugly.com/resources/v0.md): Vercel's generative UI tool: describe a screen, get a shadcn/ui implementation. (agent: good, API, CLI)
- [Vercel Agent Skills](https://dontmakeitugly.com/resources/vercel-agent-skills.md): Installable skills that teach agents React, Next.js and web design best practices. (agent: excellent, CLI)
- [Web Interface Guidelines](https://dontmakeitugly.com/resources/vercel-web-interface-guidelines.md): A concise, agent-readable checklist of what a well-built web interface must get right. (agent: excellent, CLI)

### Tools

- [Aura](https://dontmakeitugly.com/resources/aura-build.md): An AI landing page builder that exports to HTML and Figma, with the prompts included. (agent: good)
- [Checklist Design](https://dontmakeitugly.com/resources/checklist-design.md): Checklists of what every common screen and component should include. (agent: good)
- [Laws of UX](https://dontmakeitugly.com/resources/laws-of-ux.md): The psychology principles behind good interfaces, one page each. (agent: good)
- [tweakcn](https://dontmakeitugly.com/resources/tweakcn.md): A visual theme editor that makes a shadcn/ui app stop looking like every other shadcn/ui app. (agent: good, CLI)
- [UI Colors](https://dontmakeitugly.com/resources/uicolors.md): Turn one brand colour into a full Tailwind-style shade scale. (agent: good)

## Optional

- [Full index as JSON](https://dontmakeitugly.com/index.json): every resource, collection and pack with all fields
- [Everything as one file](https://dontmakeitugly.com/llms-full.txt): all markdown pages concatenated
- [About](https://dontmakeitugly.com/about): how resources get in and what "agent friendly" means