8.0
热点
AI SCORE
编程提效2026-09-02 16:54
DESIGN.md：让AI生成一致UI的设计文档格式
GitHub Trending#AI编程#设计系统#Prompt技巧
Editor brief · 编辑速览
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 开发产品，但每次发布都悄无声息地死去，因为没有人发帖分享。EveryFeed 将你的 AI 助手接入一个社交工作空间，自动撰写、排期并发布到 35+ 渠道——无需代理、无需营销人员。
不要从空白页面开始构建。LaunchKit 为你的 AI 编码助手提供一个完整的、可运行的产品作为起点——网站、创业项目和 Web 应用，上线第一天即可点击使用。
GitHub 全球排名第 150 位。一个面向开发者、设计师和 vibe coder 的社区资源。
Warm terracotta accent, clean editorial layout
Vibrant gradients, data-rich dashboard aesthetic
Dark cinematic UI, audio-waveform aesthetics
Bold dark interface with neon accents
French-engineered minimalism, purple-toned
Terminal-first, monochrome simplicity
Developer-centric dark theme
Clean white canvas, code-forward
With an editorial film-festival aesthetic — cinematic dark heroes, paper-white reading bands, single proprietary sans, and pure black pill CTAs.
Technical, blueprint-style design
Void-black canvas, emerald accent, terminal-native
Stark monochrome, futuristic minimalism
Sleek dark interface, gradient accents
Dark theme, tight letter-spacing, code-centric
Playful gradients, friendly dev aesthetic
Sleek dark chrome, vibrant gradient accents
Premium dark UI, keyboard-first, purple glow
Black and white precision, Geist font
Dark IDE-like interface, block-based command UI
Yellow-accented, technical documentation style
Modern dark with colorful integration icons
Enterprise-clean, black and white
Green leaf branding, developer documentation focus
Playful hedgehog branding, developer-friendly dark UI
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.
Dark dashboard, data-dense, pink-purple accent
Dark emerald theme, code-first
Clean neutral UI, developer-oriented simplicity
Friendly blue palette, conversational UI patterns
Ultra-minimal, precise, purple accent
Clean, green-accented, reading-optimized
Warm minimalism, serif headings, soft surfaces
Minimal dark theme, monospace accents
Warm orange, friendly illustration-driven
Colorful, friendly, structured data aesthetic
Organic shapes, soft gradients, art-directed layout
Vibrant multi-color, playful yet professional
Bold black and blue, motion-first, design-forward
Bright yellow accent, infinite canvas aesthetic
Blue-accented, polished marketing site aesthetic
Bold Binance Yellow on monochrome, trading-floor urgency
Clean blue identity, trust-focused, institutional feel
Purple-accented dark UI, data-dense dashboards
Warm cream canvas, orbital pill shapes, editorial warmth
Sleek dark interface, gradient cards, fintech precision
Signature purple gradients, weight-300 elegance
Bright green accent, friendly and clear
Warm coral accent, photography-driven, rounded UI
Photography-first, binary light/dark surfaces, Meta Blue CTAs
Monochrome UI, massive uppercase Futura, full-bleed photography
Dark-first cinematic, neon green accent, ultra-light display type
Four-tier earth-green system, warm cream canvas, proprietary SoDoSans typography
Premium white space, SF Pro, cinematic imagery
Pure white canvas, HP Electric Blue signal CTA, geometric Forma DJR Micro, blue chevron decorations
Carbon design system, structured blue palette
Green-black energy, technical power aesthetic
Red accent, masonry grid, image-first
Three-surface channel layout, cyan hover-scale interaction
Stark black and white, full-bleed imagery, futuristic
Vibrant green on dark, bold type, album-art-driven
Acid-mint and ultraviolet accents, Manuka display type
Bold black and white, tight type, urban energy
Monumental uppercase display, Vodafone Red chapter bands
Paper-white broadsheet density, custom serif, ink-blue links
Dark premium surfaces, precise German engineering aesthetic
Motorsport-inspired contrast, M color accents, precision-driven layout
Cinema-black canvas, monochrome austerity, monumental display type
Chiaroscuro black-white editorial, Ferrari Red with extreme sparseness
True black cathedral, gold accent, LamboType custom Neo-Grotesk
Vivid aurora gradients, NouvelR proprietary typeface, zero-radius buttons
Radical subtraction, cinematic full-viewport photography, Universal Sans
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.
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).
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.
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.