update request
This commit is contained in:
necatiozmen
44
.github/ISSUE_TEMPLATE/design-md-request.yml
vendored
Normal file
44
.github/ISSUE_TEMPLATE/design-md-request.yml
vendored
Normal file
@@ -0,0 +1,44 @@
|
||||
name: Design MD Request
|
||||
description: Request a DESIGN.md generated from a website
|
||||
title: "DESIGN.md for <your website>"
|
||||
labels: ["design-md"]
|
||||
|
||||
body:
|
||||
- type: markdown
|
||||
attributes:
|
||||
value: |
|
||||
Fill out the form below to request a DESIGN.md generation for your website.
|
||||
- type: input
|
||||
id: website
|
||||
attributes:
|
||||
label: Website URL
|
||||
description: The website you want us to generate DESIGN.md for
|
||||
placeholder: https://example.com
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: input
|
||||
id: email
|
||||
attributes:
|
||||
label: Delivery Email
|
||||
description: Email address where we should send the generated DESIGN.md
|
||||
placeholder: you@example.com
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: checkboxes
|
||||
id: sponsor
|
||||
attributes:
|
||||
label: Sponsor Priority
|
||||
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.
|
||||
options:
|
||||
- label: I am a [GitHub Sponsor](https://github.com/sponsors/VoltAgent) and would like this request to be prioritized
|
||||
required: true
|
||||
|
||||
- type: textarea
|
||||
id: details
|
||||
attributes:
|
||||
label: Additional Details (optional)
|
||||
description: Anything else you'd like us to know about this request
|
||||
validations:
|
||||
required: false
|
||||
@@ -8,12 +8,9 @@ This repository is a curated collection of DESIGN.md files extracted from popula
|
||||
|
||||
### Request a New Site
|
||||
|
||||
The easiest way to contribute. [Open an issue](https://github.com/VoltAgent/awesome-design-md/issues) with:
|
||||
To request a DESIGN.md for a website, [open an issue](https://github.com/VoltAgent/awesome-design-md/issues/new?template=design-md-request.yml) with the website URL.
|
||||
|
||||
- The site URL
|
||||
- Why it's interesting (unique design language, popular brand, etc.)
|
||||
|
||||
We'll extract the DESIGN.md and add it to the collection.
|
||||
We receive many requests, and maintainer bandwidth is limited. Sponsor-backed requests are prioritized, consider supporting the project via [GitHub Sponsors](https://github.com/sponsors/VoltAgent) if you'd like faster turnaround.
|
||||
|
||||
### Improve an Existing DESIGN.md
|
||||
|
||||
@@ -25,79 +22,6 @@ If you notice issues with an existing file:
|
||||
4. Update the `preview.html` and `preview-dark.html` if your changes affect displayed tokens
|
||||
5. Open a PR with before/after rationale
|
||||
|
||||
### Submit a New DESIGN.md
|
||||
|
||||
If you've extracted a DESIGN.md yourself:
|
||||
|
||||
1. Create a directory named after the site (e.g., `x/`)
|
||||
2. Include at minimum:
|
||||
- `DESIGN.md`: The design system document
|
||||
- `preview.html`: Visual catalog (light)
|
||||
- `preview-dark.html`: Visual catalog (dark)
|
||||
3. Update `README.md`: Add the site to the correct category table
|
||||
4. Open a PR with the site name and a short description
|
||||
|
||||
## DESIGN.md Quality Bar
|
||||
|
||||
Every DESIGN.md must include all 9 sections:
|
||||
|
||||
1. Visual Theme & Atmosphere
|
||||
2. Color Palette & Roles
|
||||
3. Typography Rules
|
||||
4. Component Stylings
|
||||
5. Layout Principles
|
||||
6. Depth & Elevation
|
||||
7. Do's and Don'ts
|
||||
8. Responsive Behavior
|
||||
9. Agent Prompt Guide
|
||||
|
||||
### Writing Standards
|
||||
|
||||
- **Every color**: Semantic Name (`#hex`) + functional role
|
||||
- **Atmosphere**: Evocative and specific, never "clean and modern"
|
||||
- **Typography**: Full hierarchy table with size, weight, line-height, letter-spacing
|
||||
- **Components**: Include hover/focus states and transition timing
|
||||
- **Why, not just what**: Explain the reasoning behind design decisions
|
||||
|
||||
### Common Issues to Watch For
|
||||
|
||||
- Hex values that don't match the live site (token extraction isn't perfect)
|
||||
- Missing hover/focus states on buttons and links
|
||||
- Generic atmosphere descriptions that could apply to any site
|
||||
- Incomplete typography tables (missing code font, small labels, etc.)
|
||||
|
||||
## Preview HTML Standards
|
||||
|
||||
- Self-contained single HTML file (inline CSS, no external dependencies except Google Fonts)
|
||||
- Must display: color swatches, typography scale, button variants, card examples, form elements, spacing scale, border radius, elevation levels
|
||||
- No logo icons or emoji icons in the nav. Plain text site name only
|
||||
- No Do's and Don'ts section in the HTML preview
|
||||
- Responsive: must look reasonable on mobile
|
||||
|
||||
## Validation Checklist (Before PR)
|
||||
|
||||
- [ ] All 9 sections present in DESIGN.md
|
||||
- [ ] Every color has semantic name + hex + role
|
||||
- [ ] Typography table is complete with real values
|
||||
- [ ] Preview HTML files are self-contained and render correctly
|
||||
- [ ] Site added to correct category in README.md
|
||||
- [ ] Links in README resolve correctly
|
||||
|
||||
## Pull Request Checklist
|
||||
|
||||
- [ ] Added/updated DESIGN.md file
|
||||
- [ ] Added/updated preview HTML files
|
||||
- [ ] Updated main README.md
|
||||
- [ ] Included clear PR description
|
||||
- [ ] Verified against live site
|
||||
|
||||
## Style Notes
|
||||
|
||||
- Keep documentation in English.
|
||||
- Prefer precise, descriptive wording over marketing language.
|
||||
- Keep category descriptions short and factual.
|
||||
- Alphabetical ordering within categories.
|
||||
|
||||
## License
|
||||
|
||||
By contributing, you agree your contributions are provided under the repository license terms.
|
||||
|
||||
14
README.md
14
README.md
@@ -23,10 +23,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
# Awesome Design MD
|
||||
# Awesome DESIGN.md
|
||||
|
||||
Copy a DESIGN.md into your project, tell your AI agent "build me a page that looks like this" and get pixel-perfect UI that actually matches.
|
||||
|
||||
@@ -76,6 +73,12 @@ Each site includes:
|
||||
1. Copy a site's `DESIGN.md` into your project root
|
||||
2. Tell your AI agent to use it.
|
||||
|
||||
|
||||
## Request a DESIGN.md
|
||||
|
||||
[Open a request](https://github.com/VoltAgent/awesome-design-md/issues/new?template=design-md-request.yml) to get a DESIGN.md generated for a website.
|
||||
|
||||
|
||||
## Collection
|
||||
|
||||
### AI & Machine Learning
|
||||
@@ -154,9 +157,8 @@ Each site includes:
|
||||
|
||||
## Contributing
|
||||
|
||||
We welcome contributions! See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.
|
||||
See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.
|
||||
|
||||
- [**Request a site**](https://github.com/VoltAgent/awesome-design-md/issues): Open an issue with the URL
|
||||
- **Improve existing files**: Fix wrong colors, missing tokens, weak descriptions
|
||||
- **Report issues**: Let us know if something looks off
|
||||
|
||||
|
||||
Reference in New Issue
Block a user