Skip to main content
Glama

UI 截图转代码/规格

ui_to_artifact

Converts a UI screenshot or design into runnable code or a structured specification for frontend implementation.

Instructions

把一张 UI 截图/设计稿转成可运行代码或结构化规格。当宿主拿到界面图、需要据此生成或还原前端实现时使用。

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
imageYes图片:本地路径 / file:// / http(s):// / data: URI / 'clipboard'(读系统剪贴板,文本宿主推荐)/ 'latest'(VISION_DROP_DIR 里最新图)
regionNo可选:手动指定关注区域,命名如 'top-right' 或归一化 bbox 'x,y,w,h'(0~1)
targetNo产出 code(默认)或 spec
questionNo具体问题或额外要求
thinkingNo是否开启视觉模型深度推理(默认按工具/后端策略)
frameworkNo目标框架,如 react/vue/html
detail_levelNo细节级别:overview=单次快速;normal/fine/auto 触发由粗到细的自动缩放(auto 为默认,足够清晰则早退)

Output Schema

TableJSON Schema
NameRequiredDescriptionDefault
modelYes
roundsYes实际经历的视觉调用轮数
regionsNo缩放走过的区域轨迹(归一化 bbox)
markdownYes人类可读的结构化 markdown 正文(与 content 一致)
providerYes
warningsYes降级/截断/不确定等告警
confidenceNo模型对结果的置信度
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description must fully convey behavioral traits. It only states the conversion action without disclosing any side effects, authentication needs, rate limits, or other behavioral details beyond the input schema. This is insufficient for a tool with 7 parameters.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single sentence that is direct and efficient. Every word earns its place, and it is appropriately front-loaded with the core action.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Despite having an output schema and 7 parameters, the description is too brief. It does not explain how to combine parameters, what the output format is (though schema exists), or any advanced usage. A more complete description would aid understanding.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the baseline is 3. The description adds minimal meaning beyond the schema (e.g., 'convert' is implicit in the target parameter). It does not compensate with additional parameter context.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the verb 'Convert' and the resource 'UI screenshot/design draft into runnable code or structured specifications'. It is specific and distinguishes from sibling tools like 'image_analysis' or 'diagnose_error_screenshot' which have different purposes.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description explicitly says 'When the host has a UI image and needs to generate or restore frontend implementation', providing clear when-to-use context. However, it does not mention when not to use or offer alternatives, slightly reducing the score.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Install Server

Other Tools

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/Pelican0126/vision-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server