DESIGN.md:让AI生成一致UI的设计文档格式
Google Stitch提出的设计文档格式,Markdown纯文本定义设计系统规范,AI编程Agent可直接读取并生成风格一致的UI。
完整中文译文
将一个 DESIGN.md 复制到你的项目中,告诉你的 AI Agent「帮我构建一个看起来像这样的页面」,即可生成视觉上与设计语言高度一致的优质 UI。
Built with real design depth — including analyzed patterns, tokens, and rules — for high-quality UI generation, not surface-level outputs.
DESIGN.md 是 Google Stitch 引入的一个新概念。一份纯文本的设计系统文档,AI Agent 可以读取它来生成一致的 UI。
它就是一个 Markdown 文件。无需 Figma 导出、无需 JSON Schema、无需特殊工具。把它放到项目根目录,任何 AI 编码 Agent 或 Google Stitch 都能立即理解你的 UI 应该如何呈现。Markdown 是 LLM 阅读效果最好的格式,因此无需解析或配置。
本仓库提供了从真实网站提取的、可直接使用的 DESIGN.md 文件。
你可以为特定网站请求一个 DESIGN.md,包括仅为你提供的私有请求。
AI Design + Build Ecosystem Tools
你用 AI 开发产品,但每次发布都悄无声息地死去,因为没有人发帖分享。EveryFeed 将你的 AI 助手接入一个社交工作空间,自动撰写、排期并发布到 35+ 渠道——无需代理、无需营销人员。
不要从空白页面开始构建。LaunchKit 为你的 AI 编码助手提供一个完整的、可运行的产品作为起点——网站、创业项目和 Web 应用,上线第一天即可点击使用。
GitHub 全球排名第 150 位。一个面向开发者、设计师和 vibe coder 的社区资源。
Claude - Anthropic's AI assistant
Warm terracotta accent, clean editorial layout
Cohere - Enterprise AI platform
Vibrant gradients, data-rich dashboard aesthetic
ElevenLabs - AI voice platform
Dark cinematic UI, audio-waveform aesthetics
Minimax - AI model provider
Bold dark interface with neon accents
Mistral AI - Open-weight LLM provider
French-engineered minimalism, purple-toned
Ollama - Run LLMs locally
Terminal-first, monochrome simplicity
OpenCode AI - AI coding platform
Developer-centric dark theme
Replicate - Run ML models via API
Clean white canvas, code-forward
Runway - AI creative-tools platform
With an editorial film-festival aesthetic — cinematic dark heroes, paper-white reading bands, single proprietary sans, and pure black pill CTAs.
Together AI - Open-source AI infrastructure
Technical, blueprint-style design
VoltAgent - AI agent framework
Void-black canvas, emerald accent, terminal-native
xAI - Elon Musk's AI lab
Stark monochrome, futuristic minimalism
Developer Tools & IDEs
Cursor - AI-first code editor
Sleek dark interface, gradient accents
Expo - React Native platform
Dark theme, tight letter-spacing, code-centric
Lovable - AI full-stack builder
Playful gradients, friendly dev aesthetic
Raycast - Productivity launcher
Sleek dark chrome, vibrant gradient accents
Superhuman - Fast email client
Premium dark UI, keyboard-first, purple glow
Vercel - Frontend deployment platform
Black and white precision, Geist font
Warp - Modern terminal
Dark IDE-like interface, block-based command UI
Backend, Database & DevOps
ClickHouse - Fast analytics database
Yellow-accented, technical documentation style
Composio - Tool integration platform
Modern dark with colorful integration icons
HashiCorp - Infrastructure automation
Enterprise-clean, black and white
MongoDB - Document database
Green leaf branding, developer documentation focus
PostHog - Product analytics
Playful hedgehog branding, developer-friendly dark UI
Sanity - Headless content platform
With a dark-first editorial marketing surface — 112px display type, IBM Plex Mono technical eyebrows, and a single coral-red accent reserved for the highest-priority CTA.
Sentry - Error monitoring
Dark dashboard, data-dense, pink-purple accent
Supabase - Open-source Firebase alternative
Dark emerald theme, code-first
Cal.com - Open-source scheduling
Clean neutral UI, developer-oriented simplicity
Intercom - Customer messaging
Friendly blue palette, conversational UI patterns
Linear - Project management for engineers
Ultra-minimal, precise, purple accent
Mintlify - Documentation platform
Clean, green-accented, reading-optimized
Notion - All-in-one workspace
Warm minimalism, serif headings, soft surfaces
Resend - Email API for developers
Minimal dark theme, monospace accents
Zapier - Automation platform
Warm orange, friendly illustration-driven
Design & Creative Tools
Airtable - Spreadsheet-database hybrid
Colorful, friendly, structured data aesthetic
Clay - Creative agency
Organic shapes, soft gradients, art-directed layout
Figma - Collaborative design tool
Vibrant multi-color, playful yet professional
Framer - Website builder
Bold black and blue, motion-first, design-forward
Miro - Visual collaboration
Bright yellow accent, infinite canvas aesthetic
Webflow - Visual web builder
Blue-accented, polished marketing site aesthetic
Fintech & E-commerce
Binance - Crypto exchange
Bold Binance Yellow on monochrome, trading-floor urgency
Coinbase - Crypto exchange
Clean blue identity, trust-focused, institutional feel
Kraken - Crypto trading platform
Purple-accented dark UI, data-dense dashboards
Mastercard - Global payments network
Warm cream canvas, orbital pill shapes, editorial warmth
Revolut - Digital banking
Sleek dark interface, gradient cards, fintech precision
Stripe - Payment infrastructure
Signature purple gradients, weight-300 elegance
Wise - International money transfer
Bright green accent, friendly and clear
Airbnb - Travel marketplace
Warm coral accent, photography-driven, rounded UI
Meta - Tech retail store
Photography-first, binary light/dark surfaces, Meta Blue CTAs
Nike - Athletic retail
Monochrome UI, massive uppercase Futura, full-bleed photography
Shopify - E-commerce platform
Dark-first cinematic, neon green accent, ultra-light display type
Starbucks - Coffee retail flagship
Four-tier earth-green system, warm cream canvas, proprietary SoDoSans typography
Media & Consumer Tech
Apple - Consumer electronics
Premium white space, SF Pro, cinematic imagery
HP - PC and printer maker
Pure white canvas, HP Electric Blue signal CTA, geometric Forma DJR Micro, blue chevron decorations
IBM - Enterprise technology
Carbon design system, structured blue palette
NVIDIA - GPU computing
Green-black energy, technical power aesthetic
Pinterest - Visual discovery platform
Red accent, masonry grid, image-first
PlayStation - Gaming console retail
Three-surface channel layout, cyan hover-scale interaction
SpaceX - Space technology
Stark black and white, full-bleed imagery, futuristic
Spotify - Music streaming
Vibrant green on dark, bold type, album-art-driven
The Verge - Tech editorial media
Acid-mint and ultraviolet accents, Manuka display type
Uber - Mobility platform
Bold black and white, tight type, urban energy
Vodafone - Global telecom brand
Monumental uppercase display, Vodafone Red chapter bands
WIRED - Tech magazine
Paper-white broadsheet density, custom serif, ink-blue links
Automotive
BMW - Luxury automotive
Dark premium surfaces, precise German engineering aesthetic
BMW M - Performance automotive
Motorsport-inspired contrast, M color accents, precision-driven layout
Bugatti - Luxury hypercar
Cinema-black canvas, monochrome austerity, monumental display type
Ferrari - Luxury automotive
Chiaroscuro black-white editorial, Ferrari Red with extreme sparseness
Lamborghini - Luxury automotive
True black cathedral, gold accent, LamboType custom Neo-Grotesk
Renault - French automotive
Vivid aurora gradients, NouvelR proprietary typeface, zero-radius buttons
Tesla - Electric vehicles
Radical subtraction, cinematic full-viewport photography, Universal Sans
Retro Web · DESIGN.md Nostalgia
A Saturday series — DESIGN.md files extracted from the web of the 1990s. Drop one in and tell your AI agent to build a period-accurate vintage UI.
Dell (1996) - Catalog-era enterprise web
Literal black page frame, flat color-block "ribbon cards", chunky Helvetica-Black titles over Times Roman body, and hand-cut GIF stickers (NEW! bursts, award seals, beveled product photos).
Nintendo.com (2001) - Y2K "console chrome" web
Brushed-periwinkle beveled metal panels, a halftone-dotted carbon nav glowing amber, outlined Arial-Black box-art wordmarks over circuit-board hero fields, and a pixel Mario welcome bubble.
What's Inside Each DESIGN.md
Every file follows the Stitch DESIGN.md format with extended sections:
Copy a site's DESIGN.md into your project root
Tell your AI agent to use it.
See CONTRIBUTING.md for guidelines.
Improve existing files: Fix wrong colors, missing tokens, weak descriptions
Report issues: Let us know if something looks off
Before opening a PR, please open an issue first to discuss your idea and get feedback from maintainers.
MIT License - see LICENSE
This repository is a curated collection of design system documents extracted from public websites. All DESIGN.md files are provided "as is" without warranty. The extracted design tokens represent publicly visible CSS values. We do not claim ownership of any site's visual identity. These documents exist to help AI agents generate consistent UI.