laowang/awesome-design-md
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update README's

Browse Source
This commit is contained in:
necatiozmen
2026-03-31 20:59:13 +03:00
parent 15caf5f40e
commit 3976d28923
31 changed files with 118 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
design-md/apple/README.md
View File

@@ -1,6 +1,6 @@
# Apple — Design System
# Apple Inspired Design System
> Design.md extracted from the public [apple](https://apple.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/apple/DESIGN.md) extracted from the public [apple](https://apple.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Apple design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/apple/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Apple design language.
## Preview

7
design-md/claude/README.md
View File

@@ -1,6 +1,6 @@
# Claude — Design System
# Claude Inspired Design System
> Design.md extracted from the public [claude](https://claude.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/claude/DESIGN.md) extracted from the public [claude](https://claude.ai/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Claude design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/claude/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Claude design language.
## Preview

11
design-md/clickhouse/README.md
View File

@@ -1,6 +1,6 @@
# Clickhouse — Design System
# ClickHouse Inspired Design System
> Design.md extracted from the public [clickhouse](https://clickhouse.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clickhouse/DESIGN.md) extracted from the public [clickhouse](https://clickhouse.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,16 +10,15 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Clickhouse design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clickhouse/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the ClickHouse design language.
## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Dark Mode
![Clickhouse Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/clickhouse/preview-dark-screenshot.png)
![ClickHouse Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/clickhouse/preview-dark-screenshot.png)
### Light Mode
![Clickhouse Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/clickhouse/preview-screenshot.png)
![ClickHouse Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/clickhouse/preview-screenshot.png)

7
design-md/cohere/README.md
View File

@@ -1,6 +1,6 @@
# Cohere — Design System
# Cohere Inspired Design System
> Design.md extracted from the public [cohere](https://cohere.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cohere/DESIGN.md) extracted from the public [cohere](https://cohere.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Cohere design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cohere/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Cohere design language.
## Preview

13
design-md/composio/README.md
View File

@@ -1,6 +1,6 @@
# Composio — Design System
# Composio Inspired Design System
> Design.md extracted from the public [composio.dev](https://composio.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/composio/DESIGN.md) extracted from the public [composio](https://composio.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,16 +10,15 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Composio design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/composio/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Composio design language.
## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Light Mode
![Composio Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/composio/preview-screenshot.png)
### Dark Mode
![Composio Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/composio/preview-dark-screenshot.png)
### Light Mode
![Composio Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/composio/preview-screenshot.png)

7
design-md/cursor/README.md
View File

@@ -1,6 +1,6 @@
# Cursor — Design System
# Cursor Inspired Design System
> Design.md extracted from the public [cursor](https://cursor.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cursor/DESIGN.md) extracted from the public [cursor](https://cursor.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Cursor design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cursor/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Cursor design language.
## Preview

7
design-md/expo/README.md
View File

@@ -1,6 +1,6 @@
# Expo — Design System
# Expo Inspired Design System
> Design.md extracted from the public [expo](https://expo.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/expo/DESIGN.md) extracted from the public [expo](https://expo.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Expo design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/expo/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Expo design language.
## Preview

7
design-md/figma/README.md
View File

@@ -1,6 +1,6 @@
# Figma — Design System
# Figma Inspired Design System
> Design.md extracted from the public [figma](https://figma.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/figma/DESIGN.md) extracted from the public [figma](https://figma.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Figma design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/figma/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Figma design language.
## Preview

11
design-md/hashicorp/README.md
View File

@@ -1,6 +1,6 @@
# Hashicorp — Design System
# HashiCorp Inspired Design System
> Design.md extracted from the public [hashicorp](https://hashicorp.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/hashicorp/DESIGN.md) extracted from the public [hashicorp](https://hashicorp.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,16 +10,15 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Hashicorp design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/hashicorp/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the HashiCorp design language.
## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Dark Mode
![Hashicorp Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/hashicorp/preview-dark-screenshot.png)
![HashiCorp Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/hashicorp/preview-dark-screenshot.png)
### Light Mode
![Hashicorp Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/hashicorp/preview-screenshot.png)
![HashiCorp Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/hashicorp/preview-screenshot.png)

11
design-md/ibm/README.md
View File

@@ -1,6 +1,6 @@
# Ibm — Design System
# IBM Inspired Design System
> Design.md extracted from the public [ibm](https://ibm.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/ibm/DESIGN.md) extracted from the public [ibm](https://ibm.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,16 +10,15 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Ibm design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/ibm/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the IBM design language.
## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Dark Mode
![Ibm Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/ibm/preview-dark-screenshot.png)
![IBM Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/ibm/preview-dark-screenshot.png)
### Light Mode
![Ibm Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/ibm/preview-screenshot.png)
![IBM Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/ibm/preview-screenshot.png)

11
design-md/linear.app/README.md
View File

@@ -1,6 +1,6 @@
# Linear.app — Design System
# Linear Inspired Design System
> Design.md extracted from the public [linear.app](https://linear.app.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/linear.app/DESIGN.md) extracted from the public [linear](https://linear.app/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,16 +10,15 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Linear.app design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/linear.app/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Linear design language.
## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Dark Mode
![Linear.app Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/linear.app/preview-dark-screenshot.png)
![Linear Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/linear.app/preview-dark-screenshot.png)
### Light Mode
![Linear.app Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/linear.app/preview-screenshot.png)
![Linear Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/linear.app/preview-screenshot.png)

7
design-md/lovable/README.md
View File

@@ -1,6 +1,6 @@
# Lovable — Design System
# Lovable Inspired Design System
> Design.md extracted from the public [lovable](https://lovable.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/lovable/DESIGN.md) extracted from the public [lovable](https://lovable.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Lovable design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/lovable/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Lovable design language.
## Preview

7
design-md/minimax/README.md
View File

@@ -1,6 +1,6 @@
# Minimax — Design System
# Minimax Inspired Design System
> Design.md extracted from the public [minimax](https://minimax.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/minimax/DESIGN.md) extracted from the public [minimax](https://minimax.io/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Minimax design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/minimax/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Minimax design language.
## Preview

7
design-md/mintlify/README.md
View File

@@ -1,6 +1,6 @@
# Mintlify — Design System
# Mintlify Inspired Design System
> Design.md extracted from the public [mintlify](https://mintlify.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/mintlify/DESIGN.md) extracted from the public [mintlify](https://mintlify.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Mintlify design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/mintlify/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Mintlify design language.
## Preview

11
design-md/mistral.ai/README.md
View File

@@ -1,6 +1,6 @@
# Mistral.ai — Design System
# Mistral AI Inspired Design System
> Design.md extracted from the public [mistral.ai](https://mistral.ai.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/mistral.ai/DESIGN.md) extracted from the public [mistral](https://mistral.ai/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,16 +10,15 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Mistral.ai design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/mistral.ai/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Mistral AI design language.
## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Dark Mode
![Mistral.ai Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/mistral.ai/preview-dark-screenshot.png)
![Mistral AI Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/mistral.ai/preview-dark-screenshot.png)
### Light Mode
![Mistral.ai Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/mistral.ai/preview-screenshot.png)
![Mistral AI Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/mistral.ai/preview-screenshot.png)

7
design-md/notion/README.md
View File

@@ -1,6 +1,6 @@
# Notion — Design System
# Notion Inspired Design System
> Design.md extracted from the public [notion](https://notion.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/notion/DESIGN.md) extracted from the public [notion](https://notion.so/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Notion design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/notion/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Notion design language.
## Preview

11
design-md/nvidia/README.md
View File

@@ -1,6 +1,6 @@
# Nvidia — Design System
# NVIDIA Inspired Design System
> Design.md extracted from the public [nvidia](https://nvidia.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/nvidia/DESIGN.md) extracted from the public [nvidia](https://nvidia.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,16 +10,15 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Nvidia design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/nvidia/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the NVIDIA design language.
## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Dark Mode
![Nvidia Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/nvidia/preview-dark-screenshot.png)
![NVIDIA Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/nvidia/preview-dark-screenshot.png)
### Light Mode
![Nvidia Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/nvidia/preview-screenshot.png)
![NVIDIA Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/nvidia/preview-screenshot.png)

7
design-md/ollama/README.md
View File

@@ -1,6 +1,6 @@
# Ollama — Design System
# Ollama Inspired Design System
> Design.md extracted from the public [ollama](https://ollama.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/ollama/DESIGN.md) extracted from the public [ollama](https://ollama.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Ollama design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/ollama/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Ollama design language.
## Preview

11
design-md/opencode.ai/README.md
View File

@@ -1,6 +1,6 @@
# Opencode.ai — Design System
# OpenCode AI Inspired Design System
> Design.md extracted from the public [opencode.ai](https://opencode.ai.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/opencode.ai/DESIGN.md) extracted from the public [opencode](https://opencode.ai/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,16 +10,15 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Opencode.ai design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/opencode.ai/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the OpenCode AI design language.
## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Dark Mode
![Opencode.ai Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/opencode.ai/preview-dark-screenshot.png)
![OpenCode AI Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/opencode.ai/preview-dark-screenshot.png)
### Light Mode
![Opencode.ai Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/opencode.ai/preview-screenshot.png)
![OpenCode AI Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/opencode.ai/preview-screenshot.png)

7
design-md/replicate/README.md
View File

@@ -1,6 +1,6 @@
# Replicate — Design System
# Replicate Inspired Design System
> Design.md extracted from the public [replicate](https://replicate.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/replicate/DESIGN.md) extracted from the public [replicate](https://replicate.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Replicate design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/replicate/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Replicate design language.
## Preview

11
design-md/runwayml/README.md
View File

@@ -1,6 +1,6 @@
# Runwayml — Design System
# RunwayML Inspired Design System
> Design.md extracted from the public [runwayml](https://runwayml.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/runwayml/DESIGN.md) extracted from the public [runwayml](https://runwayml.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,16 +10,15 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Runwayml design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/runwayml/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the RunwayML design language.
## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Dark Mode
![Runwayml Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/runwayml/preview-dark-screenshot.png)
![RunwayML Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/runwayml/preview-dark-screenshot.png)
### Light Mode
![Runwayml Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/runwayml/preview-screenshot.png)
![RunwayML Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/runwayml/preview-screenshot.png)

7
design-md/sanity/README.md
View File

@@ -1,6 +1,6 @@
# Sanity — Design System
# Sanity Inspired Design System
> Design.md extracted from the public [sanity](https://sanity.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/sanity/DESIGN.md) extracted from the public [sanity](https://sanity.io/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Sanity design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/sanity/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Sanity design language.
## Preview

7
design-md/sentry/README.md
View File

@@ -1,6 +1,6 @@
# Sentry — Design System
# Sentry Inspired Design System
> Design.md extracted from the public [sentry](https://sentry.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/sentry/DESIGN.md) extracted from the public [sentry](https://sentry.io/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Sentry design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/sentry/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Sentry design language.
## Preview

7
design-md/stripe/README.md
View File

@@ -1,6 +1,6 @@
# Stripe — Design System
# Stripe Inspired Design System
> Design.md extracted from the public [stripe](https://stripe.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/stripe/DESIGN.md) extracted from the public [stripe](https://stripe.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Stripe design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/stripe/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Stripe design language.
## Preview

7
design-md/supabase/README.md
View File

@@ -1,6 +1,6 @@
# Supabase — Design System
# Supabase Inspired Design System
> Design.md extracted from the public [supabase](https://supabase.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/supabase/DESIGN.md) extracted from the public [supabase](https://supabase.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Supabase design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/supabase/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Supabase design language.
## Preview

11
design-md/together.ai/README.md
View File

@@ -1,6 +1,6 @@
# Together.ai — Design System
# Together AI Inspired Design System
> Design.md extracted from the public [together.ai](https://together.ai.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/together.ai/DESIGN.md) extracted from the public [together](https://together.ai/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,16 +10,15 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Together.ai design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/together.ai/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Together AI design language.
## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Dark Mode
![Together.ai Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/together.ai/preview-dark-screenshot.png)
![Together AI Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/together.ai/preview-dark-screenshot.png)
### Light Mode
![Together.ai Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/together.ai/preview-screenshot.png)
![Together AI Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/together.ai/preview-screenshot.png)

7
design-md/uber/README.md
View File

@@ -1,6 +1,6 @@
# Uber — Design System
# Uber Inspired Design System
> Design.md extracted from the public [uber](https://uber.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/uber/DESIGN.md) extracted from the public [uber](https://uber.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Uber design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/uber/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Uber design language.
## Preview

7
design-md/vercel/README.md
View File

@@ -1,6 +1,6 @@
# Vercel — Design System
# Vercel Inspired Design System
> Design.md extracted from the public [vercel](https://vercel.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/vercel/DESIGN.md) extracted from the public [vercel](https://vercel.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Vercel design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/vercel/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Vercel design language.
## Preview

13
design-md/voltagent/README.md
View File

@@ -1,6 +1,6 @@
# Voltagent — Design System
# VoltAgent Inspired Design System
> Design.md extracted from the public [voltagent](https://voltagent.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/voltagent/DESIGN.md) extracted from the public [voltagent](https://voltagent.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,18 +10,15 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Voltagent design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/voltagent/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the VoltAgent design language.
## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Dark Mode
![Voltagent Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/voltagent/preview-dark-screenshot.png)
![VoltAgent Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/voltagent/preview-dark-screenshot.png)
### Light Mode
![Voltagent Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/voltagent/preview-screenshot.png)
![VoltAgent Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/voltagent/preview-screenshot.png)

11
design-md/x.ai/README.md
View File

@@ -1,6 +1,6 @@
# X.ai — Design System
# xAI Inspired Design System
> Design.md extracted from the public [x.ai](https://x.ai.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/x.ai/DESIGN.md) extracted from the public [xai](https://x.ai/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,16 +10,15 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the X.ai design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/x.ai/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the xAI design language.
## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Dark Mode
![X.ai Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/x.ai/preview-dark-screenshot.png)
![xAI Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/x.ai/preview-dark-screenshot.png)
### Light Mode
![X.ai Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/x.ai/preview-screenshot.png)
![xAI Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/x.ai/preview-screenshot.png)

7
design-md/zapier/README.md
View File

@@ -1,6 +1,6 @@
# Zapier — Design System
# Zapier Inspired Design System
> Design.md extracted from the public [zapier](https://zapier.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/zapier/DESIGN.md) extracted from the public [zapier](https://zapier.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Zapier design language.
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/zapier/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Zapier design language.
## Preview