Turn brand design rules into a format AI agents can read
Place a single file containing specific brand design rules in your project root, and an AI coding agent will build the UI following that brand's colors and layout. This repository provides design systems extracted from real websites as Markdown documents, based on the DESIGN.md format proposed by Google Stitch. You can use the text format directly without converting complex design tokens with separate tools.
The problem DESIGN.md solves
Previously, AI agents needed complex configurations like Figma exports or JSON schemas to generate consistent UIs. DESIGN.md removes these barriers by conveying the design language through a single plain-text Markdown file. Unlike AGENTS.md, which defines how a project should be built, this file defines how it should look. When an AI agent or Google Stitch reads this file, it immediately grasps the brand's visual identity and generates consistent screens.
Included brands and categories
The repository organizes design systems from popular brands across various industries by category.
- AI and LLM platforms Includes design systems for AI services such as Claude, Cohere, and ElevenLabs, reflecting each platform's unique color and layout styles.
- Developer tools and IDEs Features designs for developer-friendly tools like Cursor, Vercel, and Warp, characterized by dark themes and code-centric layouts.
- Fintech and cryptocurrency Contains trust-inspiring design systems for financial services such as Stripe, Coinbase, and Revolut, defining brand colors and data visualization styles.
- Retro web series Includes files recreating past web designs, such as Dell in 1996 and Nintendo.com in 2001, which are useful for generating UIs with a specific era's feel.
File structure and usage
Each DESIGN.md file consists of nine sections that define every aspect of the design, including visual theme, color palette, typography rules, component styles, layout principles, depth, prohibitions, responsive behavior, and agent prompt guides. Usage is simple: copy the desired site's DESIGN.md file to your project root and instruct the AI agent to build the page using that file as a reference. Each site folder also includes preview.html to display the design system and preview-dark.html for the dark mode version.
Things to check before use
Because this repository consists of documents created by extracting CSS values from public websites, it explicitly states that it does not own the visual identity of specific brands. Files are provided 'as is' without warranty, so you must verify the latest design guidelines and legal issues for the relevant brand before applying them to commercial projects. Additionally, these files are merely tools to help AI agents generate consistent UIs and are not the official design systems of the actual brands. If you wish to contribute, you can fix errors in existing files or supplement tokens, and it is recommended to discuss with maintainers via an issue before opening a PR.
