---
name: Checklist Design
slug: checklist-design
url: "https://dontmakeitugly.com/resources/checklist-design"
website: "https://www.checklist.design"
type: guide
categories:
  - tools
tags:
  - checklists
  - states
  - components
  - pages
  - completeness
  - beginner
frameworks:
  - agnostic
pricing: free
openSource: false
agentFriendly: good
agentAccessMethods:
  - public_web
  - copy_paste
difficulty: beginner
staffPick: true
dateAdded: "2026-09-02"
lastVerified: "2026-09-02"
---

# Checklist Design

Checklists of what every common screen and component should include.

- Type: Guide
- Categories: Tools
- Pricing: Free
- Open source: no
- Works with: Framework agnostic

## What it is

Checklist Design provides short, practical checklists for pages (sign-up, pricing, settings, 404) and components (buttons, forms, tables, modals), covering the states and details people forget: loading, empty, error, hover, focus, keyboard.

## Why it's here

Paste a checklist into your prompt and your agent stops forgetting the empty state and the focus ring. Cheap, effective, and a good way to learn what "complete" means.

## Best for

- making sure a screen is complete
- prompting for all states
- QA before shipping

## Links

- Website: https://www.checklist.design

## Can my agent use this?

Yes. Copy the relevant checklist into your prompt: "build the settings page and satisfy every item on this list".

Agent friendliness: Good. Publicly accessible and useful to reference, but the agent will need to interpret it rather than install it.
Access methods: Public website, Copy/paste.

## Prompt to hand your agent

```text
Use Checklist Design as a design and implementation reference for this project.

What it is: Checklists of what every common screen and component should include.

Website: https://www.checklist.design

Use it specifically for:
- making sure a screen is complete
- prompting for all states
- QA before shipping

How you can access it: Public website, Copy/paste.
Works with: Framework agnostic.

Study the relevant design and implementation patterns, but adapt them to this project's existing architecture, visual language, accessibility requirements and conventions. Do not blindly copy the entire resource.
```

## Related

- [Laws of UX](https://dontmakeitugly.com/resources/laws-of-ux.md): The psychology principles behind good interfaces, one page each.
- [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.
- [Chrome DevTools MCP](https://dontmakeitugly.com/resources/chrome-devtools-mcp.md): Let your agent inspect, debug and profile a live Chrome tab.
- [DesignMD](https://dontmakeitugly.com/resources/designmd.md): Point it at a URL and it extracts that site's design system as a DESIGN.md.

## In collections

- [Best resources for designing with Claude Code](https://dontmakeitugly.com/collections/building-with-claude-code.md)
- [Best resources for first-time vibe coders](https://dontmakeitugly.com/collections/first-time-vibe-coders.md)

Checklist Design is an independent resource listed by Don't Make It Ugly. We link to it; we aren't affiliated with it. Pricing and licence details are as understood at the time of listing; check the official site.