op-product-design-mcp
This MCP server lets AI assistants create, view, update, validate, preview, and export HTML prototypes following the Spark OP design spec.
get_brief: read the mandatory workflow, SKILL.md, and visual rules before generating or modifying a prototype.create_prototype: create a new prototype from a slug/title, with optional template scaffolding or example-based start, then open a live preview.get_prototype: read the current prototype HTML for incremental edits.update_prototype: overwrite a prototype and hot-reload the open preview.start_preview: start the local hot-reload HTTP server and return the browser URL.list_prototypes: list generated prototypes and their preview URLs.validate_prototype: statically check HTML or an existing slug against the skill's hard rules without writing files.export_prototype: export a self-contained single-file HTML (inline CSS, no hot-reload script) for developer handoff.get_bundled_css: get the concatenated tokens + theme + layout CSS that must be inlined in generated HTML.Multi-editor coordination: automatically elects a Leader/Follower to share the preview port across multiple AI IDEs.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@op-product-design-mcp按火花 OP 规范,做一个用户管理页原型"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
OP 原型 MCP
按火花 OP 设计规范生成可预览 HTML。Skill 负责触发和工作流,MCP 负责校验、落盘、预览和导出。
用户需求 → Skill → MCP → http://127.0.0.1:5179/<slug>/ → 修改仍走 MCP → 热更新 → 导出给开发MCP 不自己画页面。宿主 AI 读 Skill 写 HTML;MCP 是唯一出口。
flowchart LR
Agent1[AI_IDE_1] -->|stdio_MCP| Proc1[MCP_Process_1]
Agent2[AI_IDE_2] -->|stdio_MCP| Proc2[MCP_Process_2]
Proc1 -->|Election| Role1{Leader}
Proc2 -->|Election| Role2{Follower}
Role1 -->|HTTP_5179| Preview[Preview_Server]
Role2 -->|RPC_via_Leader| Role1多编辑器支持:多个 AI IDE(Cursor、Codex、Claude Code、Trae 等)可同时运行本 MCP。通过 Leader/Follower 选举,只有 Leader 占用 5179 端口,Follower 通过 Leader 协调预览。参见 多 IDE 协调。
完整接入说明(Codex / Cursor / Claude Code / Trae / Qoder / CodeBuddy / WorkBuddy): docs/usage.md
环境要求(先装 Node.js)
本工具跑在你自己的电脑上,预览是本机 127.0.0.1:5179,不是云端。
必须先安装 Node.js ≥ 18(会自带 npm / npx)。没装 Node 时,MCP 和 Skill 的安装命令都执行不了。
英文官网:https://nodejs.org/
macOS 也可用:
brew install node
装完新开终端检查:
node -v # 应 ≥ v18
npx -v用的人不必装 pnpm、也不必 clone 仓库。改本仓库才需要 pnpm。配置里不要钉死版本。
Related MCP server: @designjs/mcp-server
快速开始
先接 MCP,再装 Skill。Skill 两种安装方式都支持,选一种即可。
1. 接入 MCP(任选一)
Codex ~/.codex/config.toml:
[mcp_servers.op-prototype]
command = "npx"
args = ["-y", "op-product-design-mcp"]codex mcp add op-prototype -- npx -y op-product-design-mcpCursor / Trae / WorkBuddy / 多数编辑器,用户级或项目级 mcp.json:
{
"mcpServers": {
"op-prototype": {
"command": "npx",
"args": ["-y", "op-product-design-mcp"]
}
}
}平台 | 配置位置 |
Codex |
|
Cursor |
|
Claude Code |
|
Trae | Settings → MCP;或 |
Qoder | Settings → MCP → Add |
CodeBuddy | Settings → MCP |
WorkBuddy |
|
逐步说明见 docs/usage.md。
2. 安装 Skill(两种方式都支持)
效果相同:自动拷到 Codex 的 ~/.agents/skills,以及本机已有的 Cursor / Claude / Trae / CodeBuddy / WorkBuddy 目录。
方式一,npx:
npx -y op-product-design-mcp install方式二,curl 脚本(类似 brew / oh-my-zsh):
curl -fsSL https://raw.githubusercontent.com/ChinaCarlos/op-product-design-mcp/main/scripts/install.sh | bash只配 MCP、忘了跑上面两条时,服务启动也会静默注入一次。
指定目录:
npx -y op-product-design-mcp install .cursor/skills兼容旧命令:npx -y op-product-design-mcp install-skill。装完请新开一轮对话。
3. 使用
对 AI 说:「按火花 OP 规范,做/改 xxx 管理页原型」。
Skill 被选中,先
get_briefcreate_prototype/update_prototype内置浏览器打开
http://127.0.0.1:5179/<slug>/(不要file://)定稿
export_prototype,把out/<slug>/<slug>.html丢给开发
禁止绕开 MCP 改 hop src/,禁止 antd 5 / Tailwind / 真实接口。
工具
工具 | 作用 |
| Skill + 硬规则 + 工作流 |
| 创建并打开预览 |
| 读当前 HTML,供增量修改 |
| 覆盖写入并热更新 |
| 只启动/返回预览 URL |
| 已有原型 |
| 静态规范检查 |
| 导出可转发单文件 HTML 给开发 |
| 应内联的 tokens/theme/layout |
Resources:op-prototype://skill、visual、template、example、CSS。
预览默认只占 5179 一个端口,多页面用路径区分。写盘后按 slug 热更新。
工作稿:当前工作区 out/<slug>/preview.html。
交付件:out/<slug>/<slug>.html(无热更新脚本、无下载按钮)。
本仓库开发
pnpm install
pnpm build
node dist/cli.js # MCP stdio
npx -y op-product-design-mcp install
pnpm smoke
pnpm smoke:multi # 多进程 Leader/Follower规范包:skills/spark-op-prototype/SKILL.md、references/visual.md、styles/、templates/preview.html、examples/wall-manage.preview.html。
架构细节见 docs/architecture.md。
环境变量:OP_PROTOTYPE_OUT 覆盖工作区根目录;OP_PROTOTYPE_ROOT 覆盖包根(一般不用);OP_PROTOTYPE_SKIP_SKILL_INSTALL=1 关闭 MCP 启动时自动注入 Skill;OP_PROTOTYPE_PORT 覆盖预览端口。
多 IDE 协调(Leader / Follower)
当多个 AI IDE(Cursor、Codex、Claude Code、Trae、Qoder、CodeBuddy、WorkBuddy 等)同时安装并运行本 MCP 时,会自动进行 Leader/Follower 选举,避免端口冲突。
工作原理
sequenceDiagram
participant P1 as MCP_Process_A
participant P2 as MCP_Process_B
participant Port as localhost_5179
participant Browser as 预览浏览器
P1->>Port: 尝试监听
Note over P1: 成功 → 成为 Leader
P2->>Port: 尝试监听
Note over P2: 失败(端口被占)
P2->>P1: GET /__health
Note over P2: 确认是本服务 → 成为 Follower
Browser->>P1: 打开预览
P2->>P1: POST /__rpc(转发工具调用)
P1-->>P2: 返回结果Leader:绑定 5179 端口,提供 HTTP 预览服务,处理来自 Follower 的 RPC 请求
Follower:文件操作(创建/修改原型)在本地执行,预览相关操作通过 Leader 协调
故障转移:Leader 退出后,Follower 会尝试接管成为新 Leader(轮询间隔 3-5 秒)
单实例使用
单个 IDE 运行时,该进程自动成为 Leader,行为与之前完全一致。
验证多进程协调
# 终端 1:启动第一个 MCP(将成为 Leader)
node dist/cli.js
# 输出:[election] elected as leader
# 终端 2:启动第二个 MCP(将成为 Follower)
node dist/cli.js
# 输出:[election] following existing leader两个进程都能正常响应工具调用,但只有 Leader 占用端口 5179。
环境变量
变量 | 作用 |
| 覆盖默认端口 5179 |
更新记录
版本 | 说明 |
1.1.0 | 多 IDE 同时运行时自动 Leader/Follower 选举,共用 5179 预览口,Leader 退出后可接管 |
1.0.2 | 一条命令安装 Skill,改用 pnpm 管理依赖 |
1.0.0 | 首个 npm 包:MCP 落盘、预览、导出 |
License
MIT
Available Tools
9 toolscreate_prototype创建原型A
按 Skill 创建 out//preview.html,内联 CSS,校验硬规则,启动预览并返回内置浏览器 URL。html 省略时用模板脚手架。
| Name | Required | Description | Default |
|---|---|---|---|
| html | No | 完整 preview.html。必须含 antd 4.24.8、筛选卡、表卡、弹窗。省略则从模板脚手架。 | |
| slug | Yes | 短横线英文或拼音,例如 wall-manage | |
| title | Yes | 页面中文标题,例如 墙管理 | |
| from_example | No | true 时以墙管理示例为起点再改 |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden and does disclose real behavior: it writes a file at a fixed path, inlines CSS, enforces hard rules, launches a preview server and returns a browser URL. It does not say what happens when hard-rule validation fails, whether an existing preview.html is overwritten, or how the returned URL/port is determined, which keeps it short of a 5.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two dense sentences, front-loaded with the action and artifact path, followed by the bundled side effects and the fallback rule. Every clause conveys something actionable; nothing is padding.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a mutation tool with no annotations and no output schema, the description covers the essentials: what file is created, that validation runs, that a preview is started, and what is returned (the browser URL). It is only slightly incomplete on overwrite behavior and failure handling.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents all four parameters (html requirements, slug format, title, from_example). The description's note that omitting html falls back to template scaffolding merely repeats the html parameter's schema text, adding no syntax or format detail beyond the structured fields. Baseline 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb (创建/create) and resource (out/<slug>/preview.html) with an exact output path, plus the side effects (inline CSS, hard-rule validation, preview launch). An agent can distinguish it from update_prototype, validate_prototype and start_preview because the description names the file it produces and the bundled steps it performs.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Usage is implied by the create semantics and the file path, and the fallback rule ('html 省略时用模板脚手架') tells the agent when to omit html. However, there is no explicit statement of when to prefer this over update_prototype, validate_prototype or start_preview, nor any exclusion or prerequisite.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
export_prototype导出给开发A
把已生成的原型导出为可转发的单文件 HTML:CSS 内联、去掉热更新脚本。写入 out//.html,给开发打开即可,不依赖 MCP 预览服务。
| Name | Required | Description | Default |
|---|---|---|---|
| slug | Yes | 要导出的原型,例如 announcement-manage |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the burden and does disclose the key traits: it is a write operation producing inlined CSS and stripped hot-reload scripts, written to out/<slug>/<slug>.html, standalone from the preview service. It omits overwrite behavior, permission requirements, and failure modes, so it is strong but not complete.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two dense sentences, front-loaded with the action and output format. Every clause (inline CSS, strip hot-reload, write path, no preview dependency) carries distinct information with zero padding.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
No output schema exists, so the description must convey the result, and it does: a standalone single-file HTML at a stated path for developer handoff. It is sufficient for calling correctly, though it leaves secondary behaviors (e.g., re-export over an existing file) unaddressed.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% (baseline 3), but the description adds value by showing how the single slug parameter maps to the output path out/<slug>/<slug>.html, clarifying the naming contract beyond the schema's example.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb (导出/export) and resource (已生成的原型) and names the concrete output (可转发的单文件 HTML). It also indirectly differentiates itself from start_preview by noting it does not depend on the MCP preview service, though it never names that sibling explicitly.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Gives clear context for use: produce a shareable file that a developer can open directly, independent of the preview service. The implicit contrast with start_preview helps routing, but no explicit when-not statement or named alternative is provided.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_brief读取 Skill 与规则A
返回强制工作流、SKILL.md 全文和 visual 规则摘要。生成或修改原型前必须先调用。
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden and does disclose meaningful behavioral traits: it is a mandatory prerequisite call and it enumerates the three payloads returned. It omits output format and pagination details, but for a 0-param read-only getter this is solid disclosure.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, both earning their place: the first enumerates the return contents, the second states the mandatory call precondition. Front-loaded with zero filler.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
No output schema exists, so the description must summarize return values, and it does list all three returned artifacts plus the calling precondition. Adequately complete, though it could say more about how the rules should be applied.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema has zero parameters, so there is nothing to disambiguate; baseline 4 applies. The description correctly implies no argument is needed.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a specific verb and three concrete resources returned (强制工作流, SKILL.md 全文, visual 规则摘要), which is far more specific than the name 'get_brief' alone. It is clearly distinguishable from all prototype-manipulation siblings.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
It gives an explicit precondition: '生成或修改原型前必须先调用' (must be called before generating or modifying a prototype), which routes the agent relative to create_prototype/update_prototype. It does not name those siblings explicitly or state exclusions, so it stops short of a 5.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_bundled_css读取应内联的 CSSA
返回 tokens + theme + layout 拼接结果,生成 HTML 时必须按此顺序内联进 style。
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full behavioral burden. It does disclose the important behavioral trait that the three CSS layers must be inlined in a specific order, which an agent could not infer otherwise. It does not describe read-only nature, caching/freshness, or what the returned string looks like structurally beyond 'concatenated'.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single tightly written sentence with the return composition stated first and the consumption constraint second. Every clause earns its place and nothing is padded.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a zero-parameter read tool with no output schema, the description covers what is returned and the critical ordering constraint for consuming it. Minor gaps remain – expected format/type of the returned CSS and error behavior – but nothing an agent needs to call it correctly is missing.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool takes zero parameters, which is the baseline-4 case; there is nothing for the description to disambiguate. Schema coverage is also 100%, so no compensating detail is needed.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description names the exact resource and its composition – the concatenation of tokens + theme + layout CSS – so an agent knows precisely what this tool returns. It is unambiguous against the prototype-oriented siblings, though it never states the verb 'get' or 'read' explicitly, relying on the name instead.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description gives an implicit 'what to do with the result' rule (inline into <style> in this order when generating HTML), which is genuinely useful. However, it never states when to call this tool versus alternatives, nor any prerequisites or conditions for invoking it; usage must be inferred from the returned-content directive.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_prototype读取当前原型 HTMLC
修改前读取 out//preview.html,基于当前稿增量改,不要每次从空白重写。
| Name | Required | Description | Default |
|---|---|---|---|
| slug | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full behavioral burden. It never states that the call is a safe read-only fetch, what happens when out/<slug>/preview.html does not yet exist (a likely case before create_prototype), or what the response contains. The only behavioral content is the incremental-editing workflow hint, which is thin for a tool with zero annotation coverage.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single compact sentence with no filler, and the operational constraint (read first) is placed at the front. Slight loss for packing two ideas (read, then edit incrementally) into one clause.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no output schema and no annotations, the description should say what comes back (the HTML) and the missing-file case; it does neither, leaving the title to carry the return-value meaning. It is adequate for a trivial one-parameter read but not complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 0% and the single slug parameter is undocumented in the schema. The description partially compensates by embedding slug in the path template out/<slug>/preview.html, which hints it is a directory/identifier, but it never defines what a slug is or its format.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The title states the resource (current prototype HTML) and the description names the concrete artifact path out/<slug>/preview.html, so an agent can infer it retrieves the current prototype markup. However the description is framed as a workflow instruction ('before modifying, read...') rather than a statement of what the tool returns, and it does not distinguish itself from siblings like get_brief or list_prototypes.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
It gives a clear usage moment ('修改前读取' – read before modifying) and implicitly steers toward incremental edits over rewriting from scratch. But it names no alternative tools and gives no conditions for when not to call it, so the guidance is implied rather than explicit.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_prototypes列出原型B
列出 out/ 下已生成的原型及预览 URL。
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden. It usefully discloses the data source (the out/ directory) and that preview URLs are included, which is real behavioral content. It says nothing about ordering, emptiness, or whether results are filtered by user/session.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single short sentence that front-loads the action and scope with no filler. Every clause earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple zero-param list tool this covers the essentials, and with no output schema it correctly mentions the returned preview URLs. However it omits the shape of the returned items (identifiers/names) that an agent would need to chain into get_prototype or start_preview.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool takes zero parameters, so the baseline is 4. The schema is trivially empty and there is no parameter meaning for the description to add or omit.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb (列出/list) and resource (原型/prototypes) plus the scope ('out/ 下已生成的原型') and the payload (预览 URL). It is clearly distinguishable from get_prototype (single fetch), but it never names a sibling to sharpen the boundary.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No when-to-use guidance, prerequisites, or alternatives are given. The listing behavior implies discovery before operating on a prototype, but the description leaves that entirely to inference.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
start_preview打开预览服务B
启动 127.0.0.1 热更新 HTTP 服务,返回给 Codex 内置浏览器打开的 URL。
| Name | Required | Description | Default |
|---|---|---|---|
| slug | No | 指定原型;省略则返回列表页 |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It does disclose the key traits: localhost binding, hot-reload behavior, and that it returns a URL for the built-in browser. It omits server lifecycle details such as port persistence, blocking behavior, idempotency, or how the service is stopped.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single tight sentence that front-loads the action ('启动...服务') and ends with the return value. No filler or redundant clauses.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a side-effecting server-start tool with no annotations and no output schema, the description covers the essentials of what happens and what is returned. It remains silent on the operational details an agent would want (prerequisites, port conflicts, lifecycle), leaving a meaningful gap.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents the optional slug parameter and its fallback behavior. The prose adds nothing beyond what the schema states, so the baseline of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description gives a specific verb+resource: it starts a hot-reload HTTP server on 127.0.0.1 and returns a URL for the built-in browser. This is clearly distinguishable from siblings liked list_prototypes or export_prototype. However, it does not explicitly state what it is not, so it earns a 4 rather than a 5.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
There is no when-to-use guidance, no prerequisites (e.g. must a prototype exist first?), and no mention of alternatives or when not to call it. The agent must infer its place in the workflow purely from the name and the sibling list.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
update_prototype更新原型并热更新A
覆盖已有原型 HTML。校验通过后写入并通知已打开的预览页 reload。
| Name | Required | Description | Default |
|---|---|---|---|
| html | Yes | 完整 preview.html,不要只交片段 | |
| slug | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Discloses real side effects beyond what structured data carries: overwriting existing HTML, a validation gate, and notifying open preview pages to reload. With no annotations covering any of this, that's meaningful behavioral context. It stops short of saying what happens on validation failure or whether the write is reversible.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two short clauses, side effect and validation gate front-loaded ahead of the reload notification. No wasted words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
A mutation tool with no annotations and no output schema carries a high disclosure burden. The description covers overwrite, validation, and reload notification, but omits what happens on validation failure, the slug's role, and any notion of the return value.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 50%. The description says 'existing prototype HTML' and the schema documents html as '完整 preview.html,不要只交片段' (full file, no fragments), so html is well covered; slug remains undocumented in both description and schema. Baseline 3 given partial coverage.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb+resource (覆盖已有原型 HTML / overwrite existing prototype HTML) and distinguishes itself from the get/create siblings. It doesn't explicitly disambiguate against validate_prototype or start_preview beyond the reload mention.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The '校验通过后写入' phrasing implies the validation gate and the hot-reload behavior, giving some context for when this runs. But there's no explicit when-to-use vs when-not, nor any alternative tool named (e.g. create_prototype for new prototypes).
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
validate_prototype校验规范A
按 Skill 硬规则静态检查 HTML 或已有 slug,不写盘。
| Name | Required | Description | Default |
|---|---|---|---|
| html | No | ||
| slug | No |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden, and it does disclose two key traits: validation is static and nothing is written to disk. However, it omits how hard-rule violations are surfaced, whether both inputs may be passed together, and what the check returns.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single short sentence with the mode (静态检查) and the safety constraint (不写盘) front-loaded; nothing is padded or repeated from the title.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
There is no output schema and no annotations, so the description is the sole source of behavior, and it leaves the validation rule set, failure/return shape, and parameter interaction unspecified. It is adequate to identify the tool's role but not to invoke it confidently.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 0%, so the description must compensate, and it does add the crucial semantic that html and slug are alternative inputs ('HTML 或已有 slug'). It still gives no format, length, or mutual-exclusion rules for either parameter.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Names a specific action (静态检查/static validation) and the two accepted inputs (HTML 或已有 slug), which is more than the tool name alone conveys. It does not explicitly differentiate itself from siblings like create_prototype, but the '不写盘' clause hints at the distinction.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The phrase '按 Skill 硬规则' implies this is the pre-write gate, and '不写盘' contrasts implicitly with the create/update siblings, but the description never states when to call this versus create_prototype or update_prototype, nor any prerequisites.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
9 tool updates
v1.0.2- First observed
create_prototype - First observed
export_prototype - First observed
get_brief - First observed
get_bundled_css - First observed
get_prototype - First observed
list_prototypes - First observed
start_preview - First observed
update_prototype - First observed
validate_prototype
TDQS
Scored across 9 tools
Most tools have distinct roles: get_brief (mandatory preamble), get_bundled_css (style tokens), validate_prototype (read-only check), export_prototype (single-file output). However create_prototype overlaps with start_preview since it also launches preview and returns a URL, and create/update_prototype boundary is only clarified by the overwrite wording. Boundaries are mostly clear but one pair needs the description to disambiguate.
All nine tools follow a consistent snake_case verb_noun pattern (get_brief, create_prototype, update_prototype, get_prototype, start_preview, list_prototypes, validate_prototype, export_prototype) with only get_bundled_css deviating slightly in noun form. The convention is predictable and uniform.
Nine tools is well-scoped for a prototype authoring workflow, covering fetch/read/create/update/validate/preview/export/list with no redundant filler. Each tool earns its place in the lifecycle.
The surface covers the core lifecycle (read brief, get/read prototype, create, update, validate, preview, export, list) with no dead ends for the main flow. Minor gaps: no delete_prototype to remove stale drafts and no explicit preview-stop, but these are workable around.
Maintenance
Related MCP Connectors
Deploy AI-generated HTML/CSS/JS to instant public HTTPS URLs from any MCP-compatible agent.
Serves your design system and coding standards to coding agents, so they stop guessing.
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
Instant web publishing for AI agents. POST HTML, get a live URL. No account needed.
Related MCP Servers
- AlicenseNot gradedqualityCmaintenanceEnables AI to create interactive HTML-based software prototypes with navigation, markers, and annotations. Provides a complete prototyping environment without requiring tools like Figma or Axure.4 npm4Cryptographic Autonomy 1.0 (Combined Work Exception)
- AlicenseNot gradedqualityCmaintenanceMCP server that enables AI coding agents to read and write to a local-first HTML/CSS design canvas, bridging visual design and code generation.1MIT
- AlicenseAqualityCmaintenanceTurns AI coding hosts into a guided mobile-UI design tool with design interviews, token contracts, linters, and local browser preview.87 npmMIT
- AlicenseNot gradedqualityDmaintenanceMCP server that adapts, activates, and shares local Agent Skills for runtimes like OpenAI Agents SDK and Claude Code, enabling dynamic discovery and shareable HTML/image artifacts.36 npm2MIT