Make unique UI with agents
When the agent is in charge of creative direction, it will generate the same exact UI for everyone. Now that all websites are looking similar, how can we make a unique UI?
A short prompt should be enough:
Create a dashboard UI for my app.
Use Blueprint MCP.Without Blueprint, this leaves every design decision to the LLM. The model falls back to patterns it already knows: a centered hero, a gradient, three cards, and the same layout it generates for everyone else.
To prevent that, the user must describe the page structure, content hierarchy, layout, creative direction, fonts, icons, colors, design tokens, components, responsive behavior, and accessibility rules. The prompt becomes a complete design specification.
That is prompt engineering. Not everyone wants to do it, and not everyone is good at it.
Why skills and instruction files get skipped
Skills, reference files, and AGENTS.md files are useful, but they do not control the agent's workflow. The LLM decides which file to open, how much of it to read, what is relevant, and what can be skipped.
As the instructions grow, setup rules, design principles, component docs, accessibility requirements, and examples all compete for attention. The model may skim a file, read only part of it, or decide it already has enough information. The instructions exist, but following them is optional from the model's point of view.
A large prompt has the same problem. It puts everything into context, but it does not enforce an order. The agent can start coding before it chooses a creative direction or plans the page. It can also review its own output without checking the requirements it ignored.
MCP controls the workflow
Blueprint MCP turns the design process into a sequence of required tool calls. The tools share a workflow ID, each step receives the decisions from earlier steps, and the server tells the agent which tool must run next. The agent cannot jump directly from the request to code or skip the final inspection.
The six-step workflow covers the complete UI process:
- Setup Expert reads the project and defines the correct framework setup, themes, colors, fonts, icons, and design tokens.
- Rules Enforcer provides the requirements for component code, responsive behavior, themes, accessibility, media, and quality.
- Creative Director chooses a coherent direction based on the product, audience, and content. It controls typography, color, composition, imagery, and motion instead of asking the LLM to "be creative."
- Page Architect selects a matching page architecture and defines the sections, hierarchy, layout, actions, states, edge cases, and required components.
- Component Syntax Expert supplies the current daisyUI classes, variants, and examples for only those components.
- Quality Inspector checks the generated source against the earlier rules and decisions. If it finds problems, the workflow requires the agent to fix them.
The LLM still writes the code. Blueprint controls the creative decisions, the context provided at each stage, and the checkpoints around the code.
This also solves the size problem of skill files. Instead of loading a large design manual and hoping the model reads it, Blueprint provides a small, relevant set of instructions at the exact step where they apply. Page architecture arrives before implementation. Component syntax arrives after the components are known. Inspection happens after the code exists.
Why the result is different
Blueprint does not make a UI unique by adding random decoration. It locks in a direction before code generation, then connects that direction to the page architecture, typography, design tokens, components, and content.
A server dashboard using a dense technical direction should not look like a food app using claymorphism, even if both use daisyUI. The difference comes from deliberate decisions made for each product, not from the LLM's default landing page.
The short prompt works because the workflow contains the detailed instructions. For the design process, no prompt engineering is needed. You can still provide product facts or preferences, but you do not need to specify every section, token, font, icon, component, or quality rule yourself.
That is the practical difference between giving an agent more instructions and using an MCP server that makes the agent follow them.
See the Blueprint workflow or follow the setup guide for Codex, Claude Code, or Cursor.