OpenChecklist

Open-source design checklists for websites, web apps, mobile, design-system components and flows — for people in the browser and for AI agents over MCP.

Live site: https://syedhusain-max.github.io/openchecklist/

Inspired by checklist.design. All checklist content in this repo is original and MIT-licensed.

What's better

Related MCP server: AI-Canvas MCP Server

Quick start

npm start          # http://localhost:4321  (serves web/, syncs data)
npm test           # validates data + runs MCP server tests

The web app is plain HTML/CSS/JS in web/ — no build step. Deploy web/ to GitHub Pages, Netlify or any static host (run npm run sync first so web/checklists.json is current).

MCP server

git clone https://github.com/syedhusain-max/openchecklist.git
cd openchecklist/mcp && npm install

Claude Code

claude mcp add openchecklist -- node /absolute/path/to/openchecklist/mcp/index.js

Claude Desktop / Cursor / Windsurf / VS Code — add to the client's MCP config:

{
  "mcpServers": {
    "openchecklist": { "command": "node", "args": ["/absolute/path/to/openchecklist/mcp/index.js"] }
  }
}

Also: resources at checklist://{category}/{slug} and prompts design-review, build-with-checklist. Set OPENCHECKLIST_DATA=/path/to/checklists.json to point the server at your own fork's data.

Repo layout

data/checklists.json   single source of truth (categories, checklists, kits)
data/schema.json       JSON Schema for editors
scripts/validate.mjs   data validator (npm run validate)
scripts/serve.mjs      local static server
web/                   the site (index.html, styles.css, app.js)
web/previews.js        live preview template per checklist (data-check anchors)
web/preview-engine.js  shadow-DOM renderer: device scaling, highlights, X-ray
web/preview-styles.js  the preview design system
mcp/                   MCP server (index.js, lib.js, tests)

Live previews

Every checklist renders a working example UI built from a small preview design system. Each element that satisfies an item carries data-check="<item-id>". Hovering an item, pressing p, or clicking 👁 Preview highlights that element. Show all checks numbers every anchored element, and Expand opens a full-screen inspector. Mobile checklists render in a phone frame. Everything else can switch between desktop (1200px), tablet (768px) and phone (390px) widths, which the preview CSS responds to through container queries. npm run validate fails if any item lacks an anchor.

Contributing

See CONTRIBUTING.md. Adding a checklist is one JSON object and a pull request.

License

MIT