yaclty/awesome-design-md
1
0
Fork 0
mirror of https://github.com/VoltAgent/awesome-design-md.git synced 2026-05-14 13:06:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

update README

Browse Source
This commit is contained in:
necatiozmen 2026-04-09 12:29:30 +03:00
parent 3a39936d33
commit f0688a5a27
2 changed files with 39 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.github/ISSUE_TEMPLATE/design-md-request.yml vendored
View File

@ -1,6 +1,6 @@
name: Design MD Request name: Design MD Request
description: Request a DESIGN.md generated from a website description: Request a DESIGN.md generated from a website
title: "DESIGN.md for <your website>" title: "DESIGN.md request"
labels: ["design-md"] labels: ["design-md"]
body: body:
@ -27,13 +27,13 @@ body:
required: true required: true
- type: dropdown - type: dropdown
id: sponsor id: priority
attributes: attributes:
label: Do you want to prioritize your DESIGN.md generation request? label: Do you want to prioritize your DESIGN.md generation request?
description: We receive many requests to generate DESIGN.md. As we maintain multiple open-source projects with limited bandwidth, sponsor-backed requests are prioritized. Select the "Priority DESIGN.md generation (awesome-design-md)" tier on [GitHub Sponsors](https://github.com/sponsors/VoltAgent/sponsorships?tier_id=602879). description: We have limited bandwidth across our open-source projects. For same-day delivery, you can prioritize your request at [getdesign.md/request](https://getdesign.md/request).
options: options:
- "No, I am not a sponsor" - "No"
- "Yes, I am a GitHub Sponsor" - "Yes, I'll prioritize at getdesign.md/request"
validations: validations:
required: true required: true

66
README.md
View File

@ -41,43 +41,13 @@ It's just a markdown file. No Figma exports, no JSON schemas, no special tooling
**This repo provides ready-to-use DESIGN.md files** extracted from real websites. **This repo provides ready-to-use DESIGN.md files** extracted from real websites.
## What's Inside Each DESIGN.md
Every file follows the [Stitch DESIGN.md format](https://stitch.withgoogle.com/docs/design-md/format/) with extended sections:
| # | Section | What it captures |
|---|---------|-----------------|
| 1 | Visual Theme & Atmosphere | Mood, density, design philosophy |
| 2 | Color Palette & Roles | Semantic name + hex + functional role |
| 3 | Typography Rules | Font families, full hierarchy table |
| 4 | Component Stylings | Buttons, cards, inputs, navigation with states |
| 5 | Layout Principles | Spacing scale, grid, whitespace philosophy |
| 6 | Depth & Elevation | Shadow system, surface hierarchy |
| 7 | Do's and Don'ts | Design guardrails and anti-patterns |
| 8 | Responsive Behavior | Breakpoints, touch targets, collapsing strategy |
| 9 | Agent Prompt Guide | Quick color reference, ready-to-use prompts |
Each site includes:
| File | Purpose |
|------|---------|
| `DESIGN.md` | The design system (what agents read) |
| `preview.html` | Visual catalog showing color swatches, type scale, buttons, cards |
| `preview-dark.html` | Same catalog with dark surfaces |
### How to Use
1. Copy a site's `DESIGN.md` into your project root
2. Tell your AI agent to use it.
## Request a DESIGN.md ## Request a DESIGN.md
You can [request a DESIGN.md](https://getdesign.md/request) for specific website, including private requests delivered exclusively to you. You can [request a DESIGN.md](https://getdesign.md/request) for specific website, including private requests delivered exclusively to you.
## Sponsors ❤️
[Become a Sponsor](https://github.com/sponsors/VoltAgent/sponsorships?tier_id=605140) [1M+ view] — your logo here and get listed on [getdesign.md](https://getdesign.md/)
## Collection ## Collection
@ -161,6 +131,36 @@ You can [request a DESIGN.md](https://getdesign.md/request) for specific website
- [**Tesla**](https://getdesign.md/tesla/design-md) - Electric vehicles. Radical subtraction, cinematic full-viewport photography, Universal Sans - [**Tesla**](https://getdesign.md/tesla/design-md) - Electric vehicles. Radical subtraction, cinematic full-viewport photography, Universal Sans
## What's Inside Each DESIGN.md
Every file follows the [Stitch DESIGN.md format](https://stitch.withgoogle.com/docs/design-md/format/) with extended sections:
| # | Section | What it captures |
|---|---------|-----------------|
| 1 | Visual Theme & Atmosphere | Mood, density, design philosophy |
| 2 | Color Palette & Roles | Semantic name + hex + functional role |
| 3 | Typography Rules | Font families, full hierarchy table |
| 4 | Component Stylings | Buttons, cards, inputs, navigation with states |
| 5 | Layout Principles | Spacing scale, grid, whitespace philosophy |
| 6 | Depth & Elevation | Shadow system, surface hierarchy |
| 7 | Do's and Don'ts | Design guardrails and anti-patterns |
| 8 | Responsive Behavior | Breakpoints, touch targets, collapsing strategy |
| 9 | Agent Prompt Guide | Quick color reference, ready-to-use prompts |
Each site includes:
| File | Purpose |
|------|---------|
| `DESIGN.md` | The design system (what agents read) |
| `preview.html` | Visual catalog showing color swatches, type scale, buttons, cards |
| `preview-dark.html` | Same catalog with dark surfaces |
### How to Use
1. Copy a site's `DESIGN.md` into your project root
2. Tell your AI agent to use it.
## Contributing ## Contributing