Development · GitHub repo
Awesome DESIGN.md
Curated collection of plain-text design systems extracted from popular tech websites.
Awesome DESIGN.md is an open-source repository containing ready-to-use DESIGN.md files modeled after well-known brands and developer tools like Notion, Linear, and Stripe. Based on the Google Stitch specification, each markdown document captures color palettes, typography scales, layout rules, and component patterns. Developers can drop these files into their project roots so AI coding agents understand and replicate specific design languages.
What it's for
- Guide AI coding agents like Claude Code or Cursor to build matching frontend interfaces
- Incorporate established color palettes, typography scales, and tokens into a new app
- Maintain consistent visual styles across vibes-coded pages without Figma exports
- Study how modern tech brands structure their design tokens and layout hierarchies
Features
- Over 70 structured design system breakdowns following the Google Stitch DESIGN.md format
- Tokens covering semantic color roles, typography tables, spacing scales, and shadow elevations
- Component styling specifications including button states, cards, inputs, and navigation patterns
- Included preview.html and preview-dark.html files to inspect visual swatches and components
- Clear design rules including Do's, Don'ts, responsive behavior, and agent prompt guides
- Covers developer tools, AI platforms, fintech, e-commerce, and vintage retro-web styles
Pricing
Open source. Free and open source (MIT license)
Details
- Type
- GitHub repo
- Category
- Development
- Topic
- Design Systems
- Open source
- Yes
- Platforms
- Web, other
- For
- Developers, AI vibecoders, and designers building frontend UI with AI coding tools.
- Tags
- design system, design tokens, ai coding, vibe coding, markdown, ui design, claude code
Why it was saved
- @adam_ha_yes: Gives developers boilerplate code and structure to replicate complex, high-converting startup landing page designs.
- @adam_ha_yes: Breaks down brand aesthetics into structured components and guidelines you can feed directly to AI coding tools.
- @chase.h.ai: Gives AI agents accurate color palettes, typography scales, spacing, border radii, and component tokens modelled after successful products like Notion, Supabase, and Linear.
- @adrien.ninet: Allows developers to import structured brand design specs (from companies like Linear, Stripe, Raycast, and Notion) directly into AI coding agents like Claude Code to avoid generic AI-looking frontends.
Related
Quick typography, color palette, and iconography reference for clean product interfaces.
Open-source, token-driven design system and Figma UI kit by GR8 Tech.
AI-readable DESIGN.md style references extracted from popular websites.
Architectural framework categorizing LLM workflows and autonomous agent patterns
Curated UI and UX checklists for websites, apps, and user flows
A concise spec sheet of typography, colors, and radii for minimal UI
Updated