Blueprint MCP new update - Introducing the six-step UI workflow

Blueprint MCP 1.5 comes with six required steps, to help coding agents follow instructions, use fewer tokens, avoid generic UI, and catch UI problems before calling a page finished.

The UI design fast fashion is doomed

AI can design a page and out of context, you can call it good enough. Until you realize the same UI with the same layout is being generated for everyone else at the same time!

Without any custom instructions, AI creates generic UI. The same hero section, same cards, the same gradient, same missing states, and a pile of classes that almost looks right.

Why?
Because models are trained on the same exact designs we can find on Dribbble. And when the models get good at a design, they repeat those same UI patterns over and over. For every project, and for every user around the world. This is the reason every UI trend nowadays is going out of fashion so fast.

The revision loop is not helping much, if you're not a designer

Now you have to customize it to make it look less like an ...AI slop. You ask for changes. You waste more time, the agent burns even more tokens, forgets an earlier instruction, fixes one problem, and creates a new one.

That revision loop is where it wastes all the time and effort. Especially for the engineers with less design experience.

Agents skip, forget or ignore the instructions when it's too much

Installing different agent skills sound good until you start reading the LLM logs and realizing how much the LLM ignores or forgets the rules and instructions.

You can put all the rules in an AGENTS.md file. You can install a carefully written skill. You can squeeze your design system, accessibility checklist, product brief, and preferred style into one big prompt.

More context = more likely for the LLM to partially ignore them and go back to factory settings!

That happens because we're asking the model to do too many jobs at once. It has to understand the repo, remember every constraint, choose a visual direction, plan the page, recall component syntax, write the code, and judge its own work. The easier instructions work. The difficult instructions quietly fall out of context.

What if we control the flow of providing the instructions to the LLM?

Blueprint MCP 1.5 improves the whole loop of UI design with a six-step UI workflow. It gives your coding agent the right context at the right time. Step by step. Blueprint MCP supplies creative directions, page context, rules and code snippets. Finally inspects the result to validate the design quality.

No prompt engineering needed.

You can ask for a complete UI without writing an article:

Make a landingpage for my food tracking app.  
Use Blueprint MCP.

Now six expert tools will guide the agent from 0 to 100:

1. How to install and config

The Setup Expert MCP tool checks the framework, dependencies, Tailwind CSS configuration, daisyUI setup, themes, colors, fonts, icons, and file structure.

This prevents a common first mistake: the agent guesses how the project works. It starts with the repo you have instead of adding conflicting configuration, replacing your theme, or following patterns from another setup.

2. The rules that cannot be skipped

The Rules Enforcer MCP tool explains all the rules for UI principles, component syntax, accessibility, responsive behavior, themes, media, content and code quality.

A long skill file is easy to ignore when coding has already started. Blueprint makes the rules their own required step and confirms the agent understood them before the workflow moves on. The instructions become part of the process, instead of a suggested resource the model can silently ignore.

3. Taste, creativity, and originality

The Creative Director MCP tool connects the product, audience, content, typography, color, imagery, composition, and motion into one direction. Creative director guides the LLM about creativity and authenticity. It introduces design principles that your agent is not allowed ignore.

This is prevents a generic UI. Blueprint understands the direction from the product and its context, then carries that idea through the page.

4. Plan the page context, layout and structure

The Page Architect MCP tool chooses from 211 page architectures. Each page architecture covers a specific UI's purpose, sections, content heirarchy, actions, navigation, behavior, interaction states, and edge cases.

Without a plan, agents tend to improvise one section at a time. That produces pages made of individually plausible blocks without a flow. The Page Architect MCP tool gives the agent a complete route through the page and includes the components where it's needed.

5. The accurate code syntax

This was the only tool Blueprint MCP had before version 1.5 update.

The Component Syntax Expert MCP tool provides the accurate code syntax, class names, variants, modifiers, snippets, and examples.

The agent does not need to load the entire documentation or guess from an outdated training data. It receives the correct and updated syntax for the components, when it needs them. No more guesses!

6. Quality check

The Quality Inspector MCP tool reviews the code for UI mistakes, visual hierarchy, class names misuse, accessibility, responsive behavior, theme colors, and missing states.

This tool compares the generated code agains the previously introduced rules and instructions. Prevents the LLM from ignoring the rules and if there's visual problem, the LLM is forced to go back and fix it.

This is where the time and tokens come back

Without Blueprint MCP, UI iteration were something like: "It doesn't look good. Try something else." And the LLM can't help much without an exact instruction.

Blueprint makes the important decisions before code generation and checks the result afterward. You spend fewer turns reminding the agent about ignored requirements. You also avoid loading every rule, page pattern, and component example into every prompt. Each stage requests the context it needs, when it needs it. A solid workflow.

You can still change the result. The difference is that your feedback can be about the product and the content, instead of trying to fix the Slop design.

See how it works

You may not believe this:
A prompt less than 7 words generates this unique design, made with daisyUI

Watch more videos here →

Use Blueprint 1.5 with your own coding agent

Blueprint MCP works with Claude Code, Codex, Grok Build, VS Code Copilot, Cursor, OpenCode, Antigravity, etc. Install the MCP server for your agent, add your license key, then mention Blueprint in your prompt.

Visit the Blueprint MCP page to see generated UI examples. Read Blueprint MCP installation guides here. You can also find Blueprint v1.5 changelog here.