getSpec
检索 MCP-Prototype 规范，ai 助手可以参考此规范来创建 html 原型页面
LABSCO SUMMARY
Prototypes that explain themselves, out of plain HTML.
The decoupling is the idea: markers and annotations live in data attributes and sibling Markdown files rather than inside the mock, so the same pages stay a working prototype while carrying the explanation a reviewer needs. Because navigation comes from the folder structure, organising the files is organising the deck. Fetch the spec before generation rather than after — the attributes it defines are what the viewer reads, and a prototype written without them loses the navigation and the markers.
What it is
A prototyping harness for HTML pages an assistant writes. It supplies the conventions the pages should follow, then runs a local web server that presents them with navigation, element markers and page annotations layered on top.
What you get
- The spec the assistant needs before it writes anything: how navigation levels, page names, ordering, markers and page notes are declared
- A navigation tree derived from the prototype's own directory structure, with each page's name taken from its data-nav-name attribute and its position from data-nav-seq
- Markers on UI elements from a data-marker attribute — drawn automatically and revealed on hover, so an explanation rides on the element instead of sitting in a separate document
- Page annotations in Markdown, named after the page file, for what a static mock cannot show: interaction intent, drag behaviour, design reasoning
- Initialisation that takes the prototype root and the port, and installs whatever the web service needs — repeatable when either changes
- A background web server started and stopped on demand, viewed in the browser on the port you set
Requirements
Node.js and nothing to authorize; it runs as npx -y @llxxbb/mcp-prototype. The order matters: read the spec, write the prototype to it, initialise with the root path and port, then start. First initialisation installs the packages the web service needs, which can take a while. The server runs in the background once started, so calling start again spawns another instance rather than reusing it — stop it when you are done. Pages get a base href and an injection script added, so relative references in the HTML need to hold up under that base.
Setup effort
One command — npx -y @llxxbb/mcp-prototype
USE CASES
01
Getting a clickable prototype without a design tool
Read the conventions, have the pages written to them, initialise with the root and port, and open the result in a browser.
02
Explaining an element without cluttering the mock
Put the explanation in the element's marker attribute; the viewer draws it and shows the text on hover.
03
Recording what the screen cannot show
Write the interaction intent, drag behaviour or design reasoning into a Markdown note beside the page file, and it travels with the prototype.
04
Moving the prototype or the port
Re-initialise with the new root path or port — it can be called more than once — then restart the presentation.
5 tools
Counted once with only startup setup. Other versions, modes or optional credentials may expose a different list.
hello_world
Returns a greeting message
init
提供原型根路径和展示服务的端口号，可以多次调用。注意此过程需检测并安装运行 web 服务所需的包，可能时间较长
start
该工具将启动web服务并展示模型，启动后会后台运行，所以避免重复调用！
调用成功后，请在浏览器里输入本地地址和 init 中指定的端口号进行查看。
在调用此工具前，下面的事情需要就位，否则此工具可能无法正常工作：
- 遵循 getSpec 工具中的指示并进行了原型创造。
- 已经调用 init 工具进行了初始化。
stop
停止展示原型，并关闭web服务器
BEFORE YOU INSTALL
What to know first
Tools you get
5 tools when we connected. hello_world is a sample tool, not a capability.
Requires
npx on PATH
CONTEXT COST
Light Standing cost
Rated by the size of the 5 tool definitions that ride along on every turn, not by how many there are
INSTALLATION
Connect your client
Add the block to your client, or run the command directly.
Server setup
Configuration file
JSON
{
"mcpServers": {
"mcp-prototype": {
"command": "npx",
"args": [
"-y",
"@llxxbb/mcp-prototype"
]
}
}
}npx
TERMINAL
npx -y @llxxbb/mcp-prototype
