English | 简体中文

Curated collection of DESIGN.md files inspired by developer focused websites.

DESIGN.md

Reusable DESIGN.md files extracted from real websites for AI coding and design agents.

Copy a site's DESIGN.md into your project, tell your agent to follow it, and generate UI that stays visually consistent.

What It Is

DESIGN.md is a plain-text design system format for AI agents.

This repo collects:

• DESIGN.md
• preview.html
• preview-dark.html

This fork is maintained by iFurySt. Upstream public design pages remain available on getdesign.md.

Create New Files

Use the repo skill:

Use $design-md-creator to analyze https://example.com and create a new DESIGN.md.

The skill lives in skills/design-md-creator/SKILL.md and is designed to help AI agents turn a public website URL into:

• design-md/<slug>/DESIGN.md
• design-md/<slug>/preview.html
• design-md/<slug>/preview-dark.html
• design-md/<slug>/README.md

Collection

AI & LLM Platforms

• 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
• RunwayML - AI video generation. Cinematic dark UI, media-rich layout
• 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 CMS. Red accent, content-first editorial layout
• Sentry - Error monitoring. Dark dashboard, data-dense, pink-purple accent
• Supabase - Open-source Firebase alternative. Dark emerald theme, code-first

Productivity & SaaS

• 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 & Crypto

• 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
• 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

E-commerce & Retail

• 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

Media & Consumer Tech

• Apple - Consumer electronics. Premium white space, SF Pro, cinematic imagery
• 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
• SpaceX - Space technology. Stark black and white, full-bleed imagery, futuristic
• Spotify - Music streaming. Vibrant green on dark, bold type, album-art-driven
• Uber - Mobility platform. Bold black and white, tight type, urban energy

Automotive

• BMW - Luxury automotive. Dark premium surfaces, precise German engineering aesthetic
• 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

How to Use

1. Pick a site from the collection
2. Copy its DESIGN.md into your project root
3. Tell your AI agent to use that file as the visual system

Contributing

See CONTRIBUTING.md for guidelines.

• Create new files: We welcome new DESIGN.md submissions and improvements
• Improve existing files: Fix wrong colors, missing tokens, weak descriptions
• Report issues: Let us know if something looks off
• Open a PR: New design extractions and corrections are encouraged

License

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.