UI Skillbook
  • Skills
  • Design.md
  • Learn
  • Agents
2

Design.md

DESIGN.md files that describe a brand's colors, type, spacing and components, so your coding agent can work in that style. We wrote them ourselves; the brands did not.

AllCommerce1Community1Consumer1Design tools1Developer tools3Education1Fintech1Marketplace1Media1Productivity3

Linear

Productivity

Dark-first, keyboard-driven product UI with crisp Inter type, low-contrast chrome and a restrained indigo accent.

Notion

Productivity

Document-first minimalism: warm off-black text, almost no chrome, and content blocks that do the layout.

Slack

Productivity

Work chat with an aubergine sidebar, a four-color brand and clear, friendly hierarchy.

UI Skillbook

The field guide for building interfaces with AI.

npx uiskillbook start

Discover

  • All skills
  • Playbook
  • Collections
  • Design.md
  • Authors
  • Agents

Developers

  • CLI
  • API
  • Design system
  • MCP server
  • Registry
  • llms.txt
  • RSS

Community

  • GitHub
  • X
  • Submit a skill
  • About

Topics

  • Layout
  • Visual
  • Interaction
  • Design Systems
  • Accessibility
  • Taste
  • All topics

Collections

  • Audit accessibility
  • Build a great dashboard
  • Fix an ugly AI-generated interface
  • Improve interface motion
  • Ship a polished landing page
  • Siteplane UI
  • All collections

Agents

  • Claude Code
  • Codex
  • Cursor
  • OpenCode
  • Copilot
  • Command Code
  • All agents

Popular skills

  • Accessible Focus States
  • Color Contrast for Taste, Not Just Compliance
  • Copy Editing
  • Copywriting
  • Dashboard Information Density
  • Data Table Scannability
  • All skills

Playbook

  • Making buttons feel right
  • Spacing that doesn't look AI-generated
  • Designing dense dashboards
  • Motion without annoying people
  • Prevent layout shifts with aspect ratio
  • Balance heading text
  • All guides
© 2026 UI SkillbookBuilt by Ali Arain/@realaliarain