Skip to content
don’t make it ugly

Design resources for people building with coding agents

Don’t Make It Ugly.

Good design references for whatever you're building. Find inspiration, components, libraries, repos, prompts and more, and know exactly what to hand your agent.

Explore 64 resourcesStart with a pack

Start with a contract

Put the design in the repo before the agent starts.

A pack drops a DESIGN.md, a few reference screens and a design check into your project. Your agent reads the contract first, and “looks bad” becomes a failed check instead of another round of browsing.

  1. $ npx dontmakeitugly init less-generic-shadcn

    Pack: Less Generic shadcn from dontmakeitugly.com

    wrote DESIGN.md

    wrote dmiu.config.json

    wrote .dmiu/references/README.md

    wrote .dmiu/critic.md

    wrote AGENTS.md

    Next: build, then run the check.

    $

    01Install the contract

    One command writes DESIGN.md, a check config and a block in AGENTS.md into your repo.

  2. DESIGN.mdLess Generic shadcn

    Colours

    Type

    • Bricolage Grotesquedisplay · body
    • Figtreecode

    Shapes

    Radius 4px on controls. Hairlines, not shadows.

    Don’ts

    No purple gradients. No card soup. Nothing that isn’t in the palette.

    02The agent reads it first

    Tokens in the front matter, the reasoning in prose. It builds inside the lines instead of guessing.

  3. .dmiu/report.md/ · 1280×800
    • Fonts passedOnly contract typefaces in use
    • Palette failed3 colours off-palette · nearest ink-2
    • Contrast passedAll text meets WCAG AA
    • Gradients failedPurple gradient on .hero · remove it
    • Reduced motion passedAnimations collapse to nothing

    2 errors. The agent reads this and fixes them.

    03Check before you call it done

    Fonts, palette, contrast, gradients, glows, glass, card soup, motion, spacing and baselines. Errors fail the build.

Pick a pack

One contract per kind of project.

All packs

64 resources, 10 collections and 4 packs. Every one chosen by hand, every one readable by your agent. Nothing here is a default.

What do you need?

Featured

The good stuff

A few resources that earn their place on nearly every project.

All resources

Collections

Curated for a real goal

Several resources, chosen and ordered for one job. Start here when you know what you're trying to fix.

All collections

Why this isn’t another link list

Give your coding agent better references.

Every resource here says what it is, why it’s good, and whether your coding agent can actually read, install or use it. Then it gives you a prompt to paste. No jargon required.

See agent resources
Agent excellent
Public docs, public source or an installable package. An agent can read, install and implement this directly.
Agent good
Publicly accessible and useful to reference, but the agent will need to interpret it rather than install it.
Agent limited
Mainly a visual reference. Great for humans and for describing a direction, but there's little an agent can read or install.

Recently added

New on the shelf

See newest