25 lines
1.2 KiB
Markdown
25 lines
1.2 KiB
Markdown
# Claude Inspired Design System
|
|
|
|
[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
|
|
|
|
| File | Description |
|
|
|------|-------------|
|
|
| `DESIGN.md` | Complete design system documentation (9 sections) |
|
|
| `preview.html` | Interactive design token catalog (light) |
|
|
| `preview-dark.html` | Interactive design token catalog (dark) |
|
|
|
|
|
|
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
|
|
|
|
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
|
|
|
|
|
|
### Light Mode
|
|
|