mirror of
https://github.com/VoltAgent/awesome-design-md.git
synced 2026-05-14 13:06:57 +08:00
update README
This commit is contained in:
parent
3a39936d33
commit
f0688a5a27
10
.github/ISSUE_TEMPLATE/design-md-request.yml
vendored
10
.github/ISSUE_TEMPLATE/design-md-request.yml
vendored
@ -1,6 +1,6 @@
|
||||
name: Design MD Request
|
||||
description: Request a DESIGN.md generated from a website
|
||||
title: "DESIGN.md for <your website>"
|
||||
title: "DESIGN.md request"
|
||||
labels: ["design-md"]
|
||||
|
||||
body:
|
||||
@ -27,13 +27,13 @@ body:
|
||||
required: true
|
||||
|
||||
- type: dropdown
|
||||
id: sponsor
|
||||
id: priority
|
||||
attributes:
|
||||
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:
|
||||
- "No, I am not a sponsor"
|
||||
- "Yes, I am a GitHub Sponsor"
|
||||
- "No"
|
||||
- "Yes, I'll prioritize at getdesign.md/request"
|
||||
validations:
|
||||
required: true
|
||||
|
||||
|
||||
68
README.md
68
README.md
@ -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.
|
||||
|
||||
|
||||
|
||||
## 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
|
||||
|
||||
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
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
## 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
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user