Design references for coding agents
An agent that starts from nothing builds the generic version.
Hand it real references first.
What the agent gets
- UI design rules for a web, mobile or desktop surface.
- Reference screenshots of real apps and sites.
- shadcn and Magic UI components, with the install command.
- Open-source icons as SVG, each with its set license.
One real call
The component search below ran against the live shadcn registry. The reply is trimmed to the first three of five matches and the fields a coding agent reads first.
ask
Find a login page block I can drop into a Next.js app.
call
{
"op": "search",
"registry": "shadcn",
"query": "login page",
"limit": 3
}reply
{
"results": [
{ "name": "login-01", "title": "Login 01", "description": "A simple login form.", "type": "registry:block" },
{ "name": "login-02", "title": "Login 02", "description": "A two column login page with a cover image.", "type": "registry:block" },
{ "name": "login-03", "title": "Login 03", "description": "A login page with a muted background color.", "type": "registry:block" }
],
"total": 5
}What it needs
- Account
- A superbot account. It needs no key and no connection.
- Install
- The MCP link for your client is on the install page.
Related
The registries are shadcn and Magic UI. Icons come from Iconify's open-source sets. Read on 2026-10-17.