Version 1.0

B L U E P R I N T

Official daisyUI Code Generator Server

Provides on-demand, fine-tuned daisyUI design system resources to AI

daisyUI code generation with 10x code quality + 10x faster result and 90% less token cost

Generate unlimited and accurate daisyUI code, with any code editor, any LLM

Convert Image | Figma | Tailwind CSS | Bootstrap to daisyUI

Get the license

Compatible with

and more

Your text editor

Design System
Resources

(on-demand)

<body class="flex min-h-screen items-center justify-center bg-base-200">
    <div class="card w-96 bg-base-100 card-border">
      <div class="card-body">
        <h2 class="mb-4 card-title text-2xl font-bold">Login</h2>

        <form>
          <!-- Email Input -->
          <div class="mb-4">
            <label class="mb-2 block text-sm font-medium">Email</label>
            <input type="email" class="validator input input-md w-full"
              placeholder="[email protected]" required />
            <div class="validator-hint hidden text-sm">Please enter a valid email address</div>
          </div>

          <!-- Password Input -->
          <div class="mb-4">
            <label class="mb-2 block text-sm font-medium">Password</label>
            <input type="password" class="validator input input-md w-full" 
              placeholder="Enter your password" required minlength="8" />
            <div class="validator-hint hidden text-sm">Password must be at least 8 characters</div>
          </div>

          <!-- Remember Me & Forgot Password -->
          <div class="mb-6 flex items-center justify-between">
            <label class="flex cursor-pointer items-center gap-2">
              <input type="checkbox" class="checkbox checkbox-sm" />
              <span class="text-sm">Remember me</span>
            </label>
            <a href="#" class="link text-sm link-hover">Forgot password?</a>
          </div>

          <!-- Submit Button -->
          <div class="card-actions">
            <button type="submit" class="btn btn-block">Login</button>
          </div>
        </form>

        <!-- Sign up link -->
        <div class="mt-4 text-center">
          <span class="text-sm">Don't have an account? </span>
          <a href="#" class="link text-sm link-hover">Sign up</a>
        </div>
      </div>
    </div>
  </body>

Create a daisyUI login form with form validator, a remember me checkbox and a forgot password link

Thought for 1s

Fetching required daisyUI code snippets

Ran daisyUI Blueprint MCP tool

Received required components from MCP:

card, input, button, link, checkbox, validator

Reading specs, docs and examples.

Done.

Creating login form with daisyUI components with a remember me checkbox and a forgot password link

index.html +50 -1

index.html

Ask AI...

Agent

daisyUI Blueprint

Problem

Why AI sucks at UI?

If you open an LLM and simply ask for UI code, you're probably going to get broken, outdated or mediocre results. But why is that?

To generate a good looking UI, LLM needs:

Docs and tutorials
Design system resources
List of all available components and their specs
Code examples and syntax
Design tokens, colors, states, variants and variables
Modification guide and best practices

I see, let's put them all in a 600KB .md file and give it to LLM.

That should work!

Well... no.

Providing too much context won't work either.
LLM will ignore most of it, hallucinates the rest and lies to you about it.

Create a daisyUI login form with form validator, a remember me checkbox and a forgot password link

Thought for 5s

Let me guess how a daisyUI login form looks like...

Based on my 2023 coding knowledge, let me guess the syntax...

I'm not sure what's the correct way to put it together. Let me search the web...

I found 20 random pages that I'm not going to read anyway. But who cares... Here's a mediocre AI slop for you.

index.html +183 -29

Do you want me to add more purple gradients? I love purple.

index.html

Ask AI...

Agent

No MCP

Solution

Providing context to LLM
right time, right place

MCP (Model Context Protocol) is an API protocol for AI to get accurate, reliable context information on demand, instead of guessing or searching through irrelevant data everytime.

The official daisyUI Blueprint MCP server provide real-time context to the LLM, using MCP tools, MCP prompts and MCP resources.

No more guessworks, no hallucinations, no outdated syntax.

It increases code quality, because LLM gains access to the correct context right away instead of reading a big llms.txt file or searching the web for random pages, or guessing the results based on outdated info.

Providing the right context at the right time means fast, efficient, and accurate results. The LLM receives exactly what it needs, which means faster code generation and less token usage.

Create a daisyUI form for profile settings with form validator and a save button

Thought for 1s

Fetching daisyUI code snippets and design system resources...

Introducing

BLUEPRINT

MCP server

Design System
Resource Provider
for daisyUI

Blueprint MCP server provides curated resources to your LLM

daisyUI code snippets
Pictures of daisyUI components
Docs, specs, class names, variants, variables
Layout examples
Best practices

This will guarantee an accurate and efficient result, without guessworks or hallucinations.

Using daisyUI Blueprint MCP

Ran daisyUI Blueprint MCP tool

Received required components from MCP:

checkbox, toggle, radio, button, input, select, label, fieldset, validator, accordion

Reading specs, docs and examples.

Done.

Creating a daisyUI form for profile settings using the provided resources...

index.html +50 -1

Profile settings form made with daisyUI components has been added to index.html using daisyUI Blueprint MCP server.

index.html

Ask AI...

Agent

daisyUI Blueprint

daisyUI

BLUEPRINT

: The essential MCP server
for higher code quality, faster LLM results, and less token cost

MCP Tool

1.
On-demand code Snippets

Blueprint MCP server provides curated daisyUI code snippets to your LLM

Including:

Component examples
Page layouts
UI blocks
Useful combinations

It also provides actual picture of the components to help the LLM better understand the design system, and generate a more accurate code.

Using daisyUI Blueprint MCP

Received 4 components from MCP:

toggle filter modal drawer

Components preview:

Analyzed code snippets, layouts, UI blocks and usage examples.

index.html +50 -1

Page generated successfully with daisyUI code snippets.

index.html

Ask AI...

Agent

daisyUI Blueprint

MCP Resource

2.
Design system resources

Blueprint MCP server provides specific details about each component. Including dimensions spacing variants variables and more

This helps the LLM to better understand the design system and generate a higher quality UI. Knowing the exact size of components, their variants and how they they look like in practice, the LLM can make more informed decisions when generating code instead of guessing the styles just by looking at the name of the component.

Using daisyUI Blueprint MCP

Received checkbox component from daisyUI Blueprint MCP server.

Reading design system specs for daisyUI checkbox component.

According to daisyUI design system specs, the checkbox component is 24px by 24px. That's why the alignment looks off. Let's use checkbox-sm variant instead, so it fits better with the other form elements.

index.html +1 -1

Checkbox component updated to checkbox-sm variant successfully. Now the design looks perfect.

index.html

Ask AI...

Agent

daisyUI Blueprint

MCP Tool Experimental

3.
Convert Figma ➞ daisyUI

Blueprint MCP server can generate a daisyUI code based on a figma design.

This is done by processing the properties of the design elements, their styles, and layout from Figma API to LLM along with daisyUI component details so LLM can map the design to the closest daisyUI components.

This works with any UI made with Figma, whether if you used the official daisyUI Figma library or not. AI will understand the context of the elements and generate the closest possible daisyUI code.

For example if have a login form in Figma made with Material design, AI will still be able to generate the equivalent daisyUI code for it!

The accuracy of the generated code depends on the complexity of the design.
For best result, convert smaller pieces of the design at a time, instead of the whole page.

Convert this Figma frame to daisyUI

https://www.figma.com/file/ABCDEFG1234567/my-design?node-id=100%3A200

Thought for 1s

Using daisyUI Blueprint Figma to daisyUI MCP tool

Received Figma design nodes from Figma API.

The figma design contains a pricing table with a toggle to switch between monthly and yearly billing. There's a payment button at the bottom as well.

Using daisyUI Blueprint Get Snippet MCP tool to get required daisyUI components that match the Figma design.

Received 4 components from MCP server:

card toggle divider button

Perfect! Now we can generate the daisyUI code for the Figma design using these components.

index.html +1 -1

index.html file was updated successfully. The pricing table design from Figma is now implemented using daisyUI components.

index.html

Ask AI...

Agent

daisyUI Blueprint

MCP Prompt

4.
Convert Screenshot ➞ daisyUI

Attach a picture and receive daisyUI code!

This is a detailed prompt that generates daisyUI + Tailwind CSS code from a screenshot.

The prompt guides the AI to analyze the screenshot, identify UI components, and generate the corresponding daisyUI code using existing daisyUI components which will be received from daisyUI Blueprint MCP server.

This works with any screenshot of a web UI, whether it's from a design tool, a live website, or a mobile app. AI will understand the context of the elements and generate the closest daisyUI code.

The accuracy of the generated code depends on the clarity and complexity of the screenshot.
For best result, use smaller parts of the UI instead of a full-page screenshot.

Convert this image to daisyUI code

settings-screenshot.png

Using daisyUI Blueprint MCP prompt

Image to daisyUI conversion

You are analyzing a UI screenshot to recreate it using daisyUI components.
Follow below steps strictly. If you miss any step, your code will be rejected.

## Step By Step Instructions:
1. Carefully examine the screenshot provided...

The screenshot shows a settings page with a sidebar on the left and various settings options on the right. Now we need to identify the daisyUI components required to build this UI.

Using daisyUI Blueprint Get Snippet MCP tool to get required daisyUI components that match the UI from the screenshot.

Received 7 components from MCP server:

drawer navbar modal dropdown button toggle menu

Perfect! Now we can generate the daisyUI code using these components.

index.html +123 -1

index.html file was updated successfully.

index.html

Ask AI...

Agent

daisyUI Blueprint

MCP Prompt

5.
Convert Tailwind CSS ➞ daisyUI

Convert existing Tailwind CSS code to daisyUI components effortlessly!

This is a detailed prompt provided by Blueprint MCP server that helps AI to analyze existing Tailwind CSS code blocks, identify UI components, that can be replaced with daisyUI components, then it uses daisyUI MCP server to get the required components and finally generates the updated code with daisyUI components.

This works best with well-structured Tailwind CSS code and clear design specifications. For really complicated parts of your HTML, adding comments to the code can also help the AI understand the semantics better and produce more accurate results.

Convert this page from Tailwind CSS to daisyUI

+page.svelte

Using daisyUI Blueprint MCP prompt

Tailwind CSS to daisyUI conversion

You are analyzing a Tailwind CSS page to recreate it using daisyUI components.
Follow below steps strictly. If you miss any step, your code will be rejected.

## Step By Step Instructions:
1. Carefully examine the each section of the page...

+page.svelte includes a settings UI with a sidebar on the left and various settings options on the right. Now we need to identify the daisyUI components required to build this UI.

Using daisyUI Blueprint Get Snippet MCP tool to get required daisyUI components that match the UI from the screenshot.

Received 7 components from MCP server:

drawer navbar modal dropdown button toggle menu

Perfect! Now we can generate the daisyUI code using these components.

+page.svelte +123 -1

Done. All the the parts that could be converted to daisyUI components have been updated. Now the page is smaller and uses less class names.

index.html

Ask AI...

Agent

daisyUI Blueprint

MCP Prompt

6.
Convert Bootstrap ➞ daisyUI

Convert existing Bootstrap code to daisyUI components effortlessly!

This is a detailed prompt provided by Blueprint MCP server that helps AI to analyze existing Bootstrap code blocks, identify UI components, that can be replaced with daisyUI components, then it uses daisyUI MCP server to get the required components and finally generates the updated code with daisyUI components.

This works best with well-structured Bootstrap code and clear design specifications. For really complicated parts of your HTML, adding comments to the code can also help the AI understand the semantics better and produce more accurate results.

Convert this page from Bootstrap to daisyUI

index.php

Using daisyUI Blueprint MCP prompt

Bootstrap to daisyUI conversion

You are analyzing a Bootstrap page to recreate it using daisyUI components.
Follow below steps strictly. If you miss any step, your code will be rejected.

## Step By Step Instructions:
1. Carefully examine the each section of the page...

index.php includes a settings UI with a sidebar on the left and various settings options on the right. Now we need to identify the daisyUI components required to build this UI.

Using daisyUI Blueprint Get Snippet MCP tool to get required daisyUI components that match the UI from the screenshot.

Received 7 components from MCP server:

drawer navbar modal dropdown button toggle menu

Perfect! Now we can generate the daisyUI code using these components.

index.php +123 -1

Done. All the the parts that could be converted to daisyUI components have been updated. Now the page is smaller and uses less class names.

index.html

Ask AI...

Agent

daisyUI Blueprint

MCP Prompt

7.
Extract Color Palette from a picture to generate daisyUI Theme

Are you bad at color palettes? It was never easier to generate a custom daisyUI theme!

Attach any picture that you like its colors, and the AI will extract the color palette for you.

Then daisyUI MCP server will generate a custom daisyUI theme based on the extracted colors.

Generate a dark daisyUI theme based on the colors in this picture

my-cat.jpg

app.css

Using daisyUI Blueprint MCP prompt

Extract dominant colors from picture

You are analyzing a picture to create a color palette for a daisyUI theme based on provided syntax.
Follow below steps strictly. If you miss any step, your code will be rejected.

## Step By Step Instructions:
1. Carefully examine the picture provided...

20 colors were extracted from the picture based on the instructions. Now we need to map the colors to a daisyUI theme.

Using daisyUI Blueprint Get Snippet MCP tool to get required daisyUI examples.

Received 2 snippets from MCP server:

colors custom-theme

Perfect! Now we can generate a custom daisyUI theme with the extracted colors, based on the instructions.

app.css +27 -1

app.css file was updated successfully with a new custom daisyUI.

index.html

Ask AI...

Agent

daisyUI Blueprint

MCP Resource

8.
Layouts and code blocks

Blueprint MCP server includes layout examples and code blocks for useful design patterns.

For example if you're making a dashboard, Blueprint MCP will look into the possible layout structures and provide you the one that best fits your UI. And then it fills the layout with the appropriate daisyUI components.

Additonally, there are code blocks for combination of different UI pieces. For example, a responsive navbar with a button, a menu and a dropdown. It can be challenging to connect them all together, but Blueprint MCP provides ready-to-use code snippets to help you.

Create a collapsible daisyUI drawer sidebar. It should be icon only/or expanded on desktop. I should be off-canvas on mobile. Put a menu inside the sidebar with 4 items: Dashboard, Settings, Profile, Logout. Add proper icons. Also add a settings button at the bottom of the sidebar.

Thought for 1s

Using daisyUI Blueprint MCP

Ran daisyUI Blueprint MCP tool

Received required code snippets from MCP:

collapsible sidebar navbar menu button

Reading specs, docs and examples.

Done.

Perfect. Now let's combine these components into a cohesive layout, according to the instructions provided and the design specs.

index.html +27 -1

collapsible drawer sidebar was added to index.html

index.html

Ask AI...

Agent

daisyUI Blueprint

BLUEPRINT

vs. other tools
to generate daisyUI code

	daisyUI BLUEPRINT MCP	daisyUI llms.txt	Context7 MCP	GitMCP
daisyUI Official
Fine-tuned for daisyUI			Impossible to fine-tune	Impossible to fine-tune
Data source	Authored & verified	Authored & verified	AI generated	AI generated
Resource accuracy	100% accurate	100% accurate	Confuses random repos	Confuses random pages
Includes unwanted context	No	Depends on the LLM	Yes	Yes
daisyUI Design system specs
Converts Figma to daisyUI
Converts Tailwind CSS to daisyUI
Converts Bootstrap to daisyUI
Generates themes from an image
Provides component pictures to AI
Generates AI slop	Less likely	depends on the LLM	More likely	More likely
Updates	100% Synced with daisyUI	100% Synced with daisyUI	Depends on a crawler	Depends on a crawler
Token usage efficiency	Super efficient	Not efficient	Wastes token on useless context	Wastes token on useless context

Get Started with daisyUI

BLUEPRINT

Get a Licence
Generate daisyUI code

F.A.Q

If you have any questions before purchase
send me an email to [email protected]
I will do my best to help you.

Is this one time payment or a subscription?

Both are possible. You can purchase a monthly licence, yearly license or a lifetime license.

What happens after I pay?

You will receive an email address with a license key which you can use to activate the MCP server. If you don't see the email, check your spam folder.

Will I receive updates?

Yes, the package will be updated automatically with latest version of daisyUI. New MCP tools, MCP resources and MCP prompts will be added automatically.

Do I get customer support?

We offer support via Discord. You can join the server https://daisyui.com/discord and ask your questions there. We will do our best to help you.

Can I cancel my subscription?

Yes you can cancel your subscription at any time. If you cancel, you will still have access to the product until the end of your billing cycle.

Can I get a refund?

If there was an issue, send an email to [email protected] so I can help you. I will do my best to resolve the issue. We don't offer refunds for digital products, however if there was a mistake in payment, for example if you paid twice, send an email to [email protected].

I didn't receive the email

Please check your spam folder. If you still can't find it, send an email to [email protected] so I can help you.

I bought the wrong package

Send me an email at [email protected] and I will help you get the right package.

There was an issue with the payment

If the payment failed and you didn't receive the product, it usually means the payment didn't go through. Please try again. If the money was deducted from your account, it will be refunded automatically within a week or two. If the issue persists, send an email to [email protected] so I can help you.

Official daisyUI Code Generator MCP Server

BLUEPRINT

daisyUI Blueprint MCP server

Get the license

Cursor

1. Get a Blueprint License

2. Click this button to open the MCP server in Cursor settings

Install MCP Server

3. In the MCP settings page, add the following environment variables:

LICENSE: Your license key
EMAIL: Your email address

4. Now tell the LLM to use daisyUI Blueprint MCP to access the tools on demand.

Read Cursor docs for more info about using MCP.

VS Code

1. Get a Blueprint License

2. In VS Code press ⌘ CMD + ⇧ Shift + P ( Or Ctrl + Shift + P )

3. Search for MCP: Open User Configuration

4. Add this and put your license key + email address in it

{
    "servers": {
      "daisyui-blueprint": {
        "type": "stdio",
        "command": "npx",
        "args": ["-y", "daisyui-blueprint@latest"],
        "env": {
          "LICENSE": "",
          "EMAIL": ""
        }
      }
    }
  }

5. Now tell the LLM to use daisyUI Blueprint MCP to access the tools on demand.

Read VS Code docs for more info about using MCP.

Claude Code

1. Get a Blueprint License

2. Run this command
Figma API Key is optional - Only needed for Figma-to-code conversion

claude mcp add daisyui-blueprint -- npx -y daisyui-blueprint@latest
    --env LICENSE=YOUR_LICENSE_KEY
    --env EMAIL=YOUR_EMAIL
    --env FIGMA=YOUR_FIGMA_API_KEY

3. Now tell the Claude Code to use daisyUI Blueprint MCP to access the tools on demand.

Read Claude Code docs for more info about using MCP.

Manual Setup

1. Get a Blueprint License

2. Find and open MCP settings in your LLM tool or code editor

3. Add this MCP server and put your license key + email address in it

"daisyui-blueprint": {
    "type": "stdio",
    "command": "npx",
    "args": ["-y", "daisyui-blueprint@latest"],
    "env": {
      "LICENSE": "",
      "EMAIL": ""
    }
  }

4. Now tell the LLM to use daisyUI Blueprint MCP to access the tools on demand.

Figma API setup guide

How to Figma API and generate daisyUI code from a Figma design file

This is an experimental feature. If results are not accurate, try a smaller section of the design or simplify the design.

1. Get a Figma Access Token from
Settings > Security > Personal Access Tokens > Generate new token
Required permissions:

file_content:read
file_metadata:read
library_assets:read
library_content:read
team_library_content:read
file_dev_resources:read

2. Set the Figma API token inFIGMA environment variable for the Blueprint MCP server

"daisyui-blueprint": {
    "type": "stdio",
    "command": "npx",
    "env": {
      "LICENSE": "YOUR LICENSE KEY",
      "EMAIL": "YOUR EMAIL",
      "FIGMA": "YOUR FIGMA API KEY"
    }
  }

3. In Figma, right click on a section, choose Copy/Paste as > Copy link to selection

4. In your editor, paste the link and ask the LLM to generate daisyUI code for that design.

B L U E P R I N T

Why AI sucks at UI?

Providing context to LLM right time, right place

Design System Resource Provider for daisyUI

1. On-demand code Snippets

2. Design system resources

3. Convert Figma ➞ daisyUI

4. Convert Screenshot ➞ daisyUI

5. Convert Tailwind CSS ➞ daisyUI

6. Convert Bootstrap ➞ daisyUI

7. Extract Color Palette from a picture to generate daisyUI Theme

8. Layouts and code blocks

F.A.Q

BLUEPRINT

Providing context to LLM
right time, right place

Design System
Resource Provider
for daisyUI

1.
On-demand code Snippets

2.
Design system resources

3.
Convert Figma ➞ daisyUI

4.
Convert Screenshot ➞ daisyUI

5.
Convert Tailwind CSS ➞ daisyUI

6.
Convert Bootstrap ➞ daisyUI

7.
Extract Color Palette from a picture to generate daisyUI Theme

8.
Layouts and code blocks