120 lines
3.6 KiB
Markdown
120 lines
3.6 KiB
Markdown
# MK Design System
|
|
|
|
A Vue 3 + Tailwind CSS v4 design system derived from [Creative Tim's Vue Material Kit 2](https://github.com/creativetimofficial/vue-material-kit). Built to be handed off to another Claude instance for consistent UI work across projects.
|
|
|
|
**30+ components** · **Design tokens in CSS** · **Roboto variable font** · **Material Icons Round**
|
|
|
|
---
|
|
|
|
## Using in your project
|
|
|
|
### Option A — Copy components (simplest)
|
|
|
|
1. Copy `src/components/`, `src/composables/`, and `src/style.css` into your project.
|
|
|
|
2. Ensure your project has Tailwind CSS v4 with `@tailwindcss/vite`. Your `style.css` must contain the `@import "tailwindcss"` line and the full `@theme` block from this project's `src/style.css`.
|
|
|
|
3. Get the font files (4 woff2 files — see **Fonts** below) and place them in `public/fonts/`.
|
|
|
|
4. Import components directly:
|
|
```js
|
|
import MkButton from '@/components/MkButton.vue'
|
|
import MkInput from '@/components/MkInput.vue'
|
|
```
|
|
|
|
### Option B — Build as a library
|
|
|
|
```bash
|
|
pnpm build:lib
|
|
```
|
|
|
|
This outputs `dist/mk-design-system.es.js`, `dist/mk-design-system.cjs.js`, and `dist/style.css`.
|
|
|
|
In the consuming project:
|
|
|
|
```js
|
|
// main.js — global registration
|
|
import { MkDesignSystem } from './mk-design-system.es.js'
|
|
import './mk-design-system.css' // design tokens + @font-face
|
|
app.use(MkDesignSystem)
|
|
```
|
|
|
|
Or import components individually:
|
|
|
|
```js
|
|
import { MkButton, MkInput, MkNavbar } from './mk-design-system.es.js'
|
|
```
|
|
|
|
---
|
|
|
|
## Development
|
|
|
|
```bash
|
|
pnpm install
|
|
pnpm dev # dashboard + showcase at localhost:5173
|
|
pnpm build # production app build → dist/
|
|
pnpm build:lib # library build → dist/mk-design-system.*
|
|
```
|
|
|
|
---
|
|
|
|
## Fonts
|
|
|
|
Place these woff2 files in `public/fonts/` before running the dev server:
|
|
|
|
```
|
|
public/fonts/roboto/
|
|
Roboto-VariableFont_wdth-wght.woff2
|
|
Roboto-Italic-VariableFont_wdth-wght.woff2
|
|
|
|
public/fonts/roboto-slab/
|
|
RobotoSlab-VariableFont_wght.woff2
|
|
|
|
public/fonts/material-icons-round/
|
|
material-icons-round-latin-400-normal.woff2
|
|
```
|
|
|
|
Download script (run from `/app`):
|
|
|
|
```bash
|
|
# Roboto (official Google Fonts variable build)
|
|
curl -L "https://github.com/google/fonts/raw/main/apache/roboto/Roboto%5Bwdth%2Cwght%5D.ttf" \
|
|
-o public/fonts/roboto/Roboto-VariableFont_wdth-wght.woff2
|
|
|
|
# Material Icons Round
|
|
curl -L "https://cdn.jsdelivr.net/npm/@fontsource/material-icons-round@5/files/material-icons-round-latin-400-normal.woff2" \
|
|
-o public/fonts/material-icons-round/material-icons-round-latin-400-normal.woff2
|
|
```
|
|
|
|
---
|
|
|
|
## Design reference
|
|
|
|
| File | Purpose |
|
|
|------|---------|
|
|
| `design-system.md` | Token reference, component patterns, 12 quick-start rules |
|
|
| `conformity.md` | 17-rule checklist — feed this + generated code to Claude to score conformity |
|
|
| `tokens.json` | Machine-readable design token values |
|
|
| `src/style.css` | Live source of truth — `@theme` block defines all tokens |
|
|
|
|
---
|
|
|
|
## For Claude
|
|
|
|
When starting a new project using this design system, provide Claude with:
|
|
|
|
1. `design-system.md` — the rules to follow
|
|
2. `conformity.md` — to score and verify generated code
|
|
3. The component list from `src/index.js` — so it knows what's available
|
|
|
|
Prompt template:
|
|
> "Use the MK Design System (design-system.md attached). Available components are listed in src/index.js. Build [feature]. After generating, score it against conformity.md."
|
|
|
|
---
|
|
|
|
## Notes
|
|
|
|
- `MkSocialButton` renders Font Awesome brand icons (`fab fa-*`). Load Font Awesome Free 6 externally if social icons are needed.
|
|
- `MkRotatingCard` requires its parent to set an explicit height (e.g. `style="height: 22rem"`).
|
|
- `MkNavbar` scroll-blur is automatic in `transparent` mode — no JS required.
|