daisyui-blueprint 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +119 -0
- package/package.json +1 -1
- package/server.js +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
# daisyUI Blueprint
|
|
2
|
+
|
|
3
|
+
An MCP (Model Context Protocol) server that provides AI assistants with daisyUI component snippets, conversion prompts, and Figma design integration.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **70+ daisyUI Component Snippets** - Ready-to-use code for all daisyUI components, layouts, and templates
|
|
8
|
+
- **AI Conversion Prompts** - Convert Bootstrap to daisyUI, screenshots to code, Tailwind to daisyUI, and images to themes
|
|
9
|
+
- **Figma Integration** - Extract design data from Figma files and convert them to daisyUI code
|
|
10
|
+
- **Theme Generation** - Create custom daisyUI themes from image color palettes
|
|
11
|
+
|
|
12
|
+
## Setup
|
|
13
|
+
|
|
14
|
+
### Prerequisites
|
|
15
|
+
|
|
16
|
+
- [Bun](https://bun.sh) runtime installed
|
|
17
|
+
- A valid daisyUI Blueprint license from [daisyui.com](https://daisyui.com)
|
|
18
|
+
- (Optional) Figma API token for Figma integration
|
|
19
|
+
|
|
20
|
+
### Installation
|
|
21
|
+
|
|
22
|
+
Set environment variables for the MCP server:
|
|
23
|
+
|
|
24
|
+
- **`LICENSE`** (required) - Your daisyUI Blueprint license key
|
|
25
|
+
- **`EMAIL`** (required) - Email associated with your license
|
|
26
|
+
- **`FIGMA`** (optional) - Your Figma API token for Figma integration
|
|
27
|
+
- **`IMAGES`** (optional) - Set to `"false"` to disable image fetching (default: `"true"`)
|
|
28
|
+
|
|
29
|
+
Add this MCP server to your code editor or AI assistant client:
|
|
30
|
+
|
|
31
|
+
```json
|
|
32
|
+
{
|
|
33
|
+
"mcpServers": {
|
|
34
|
+
"daisyui-blueprint": {
|
|
35
|
+
"command": "npx",
|
|
36
|
+
"args": ["-y", "daisyui-blueprint@beta"],
|
|
37
|
+
"env": {
|
|
38
|
+
"LICENSE": "your-license-key",
|
|
39
|
+
"EMAIL": "your-email@example.com",
|
|
40
|
+
"FIGMA": "your-figma-token"
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## Usage
|
|
48
|
+
|
|
49
|
+
### 1. daisyUI Component Snippets
|
|
50
|
+
|
|
51
|
+
Request component code snippets from your AI assistant. The server provides 70+ components, layouts, and templates.
|
|
52
|
+
|
|
53
|
+
**Available Categories:**
|
|
54
|
+
- **Components** - Button, Card, Modal, Navbar, Dropdown, Table, Form inputs, and 50+ more
|
|
55
|
+
- **Layouts** - Responsive sidebars, top navbar, drawer layouts
|
|
56
|
+
- **Templates** - Dashboard, login form, and more
|
|
57
|
+
- **Themes** - Built-in themes, color utilities, custom theme creation
|
|
58
|
+
|
|
59
|
+
**Example requests:**
|
|
60
|
+
- "What's the XL button size in daisyUI?"
|
|
61
|
+
- "Make a login page with daisyUI"
|
|
62
|
+
- "Make a pricing card with daisyUI"
|
|
63
|
+
- "Create a daisyUI dashboard layout with sidebar and navbar"
|
|
64
|
+
|
|
65
|
+
The server will return the exact daisyUI code with examples and best practices.
|
|
66
|
+
|
|
67
|
+
### 2. Conversion Prompts
|
|
68
|
+
|
|
69
|
+
Use built-in prompts to convert existing code or designs to daisyUI:
|
|
70
|
+
|
|
71
|
+
#### **Screenshot to daisyUI**
|
|
72
|
+
Convert any UI screenshot to daisyUI code:
|
|
73
|
+
1. Provide a screenshot to your AI assistant
|
|
74
|
+
2. Ask to "recreate this using daisyUI"
|
|
75
|
+
3. The AI will analyze the design and generate daisyUI code matching the screenshot
|
|
76
|
+
|
|
77
|
+
#### **Bootstrap to daisyUI**
|
|
78
|
+
Convert Bootstrap code to daisyUI:
|
|
79
|
+
1. Provide your Bootstrap HTML code
|
|
80
|
+
2. Ask to "convert this Bootstrap code to daisyUI"
|
|
81
|
+
3. Bootstrap classes will be replaced with daisyUI components and Tailwind utilities
|
|
82
|
+
|
|
83
|
+
#### **Tailwind to daisyUI**
|
|
84
|
+
Optimize Tailwind code by replacing component patterns with daisyUI:
|
|
85
|
+
1. Share your Tailwind CSS code
|
|
86
|
+
2. Ask to "convert this to use daisyUI components"
|
|
87
|
+
3. Component-like patterns will be replaced with semantic daisyUI classes
|
|
88
|
+
|
|
89
|
+
#### **Picture to Theme**
|
|
90
|
+
Generate a custom daisyUI theme from any image:
|
|
91
|
+
1. Upload an image with colors you like
|
|
92
|
+
2. Ask to "create a daisyUI theme from this image"
|
|
93
|
+
3. A custom theme CSS will be generated matching the image's color palette
|
|
94
|
+
|
|
95
|
+
### 3. Figma Integration
|
|
96
|
+
|
|
97
|
+
Extract design data from Figma files and convert to daisyUI code.
|
|
98
|
+
|
|
99
|
+
**Setup:**
|
|
100
|
+
1. Get a Figma API token from [Figma Account Settings](https://www.figma.com/developers/api#access-tokens)
|
|
101
|
+
2. Add it to your environment configuration as `FIGMA`
|
|
102
|
+
|
|
103
|
+
**Usage:**
|
|
104
|
+
1. Copy a Figma file or node URL (e.g., `https://www.figma.com/design/abc123/My-Design?node-id=1-2`)
|
|
105
|
+
2. Ask your AI assistant to "convert this Figma design to daisyUI"
|
|
106
|
+
3. The server will fetch the design structure and help generate matching daisyUI code
|
|
107
|
+
|
|
108
|
+
**Options:**
|
|
109
|
+
- Adjust `depth` parameter to control how deep the node tree is traversed (default: 10)
|
|
110
|
+
- Enable `includeImages` to fetch preview images of designs
|
|
111
|
+
|
|
112
|
+
## License
|
|
113
|
+
|
|
114
|
+
Commercial license required. Get yours at [daisyui.com](https://daisyui.com)
|
|
115
|
+
|
|
116
|
+
## Docs
|
|
117
|
+
|
|
118
|
+
- Documentation: [daisyui.com/blueprint](https://daisyui.com/blueprint/)
|
|
119
|
+
- daisyUI: [daisyui.com](https://daisyui.com/)
|