What makes Screenshot To Prompt notable?

1.4K downloads. Trust evidence available

How should Screenshot To Prompt be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

agentCLAWHUBUnverified

Screenshot To Prompt

截图理解 + 页面结构抽取 + 实现 prompt 生成器。输入页面截图，输出结构化识别结果和可直接发给 coding agent 的实现 prompt。触发：用户发截图说"帮我分析这个页面"、"生成实现 prompt"、"页面结构抽取"、 "把这个页面转成 prompt"、"screenshot to pr... Skill: Screenshot To Prompt Owner: z-zihan Summary: 截图理解 + 页面结构抽取 + 实现 prompt 生成器。输入页面截图，输出结构化识别结果和可直接发给 coding agent 的实现 prompt。触发：用户发截图说"帮我分析这个页面"、"生成实现 prompt"、"页面结构抽取"、 "把这个页面转成 prompt"、"screenshot to pr... Tags: latest:2.0.0 Version history: v2.0.0 | 2026-05-18T12:47:57.963Z | user Auto-publish from commit dc4421fe7970ce27a9e172af29c59ab38d8373a3 v0.3.0 | 2026-05-18T08:11:05.875Z | user Auto-publish from commi

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

1.4k

Updated

Oct 10, 2026

Version

2.0.0

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 1.4K downloads reported by the source. Last updated 10/10/2026.

Avoid when

Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor: Clawhubvendor · observed Oct 10, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 10, 2026
Adoption signal: 1.4K downloadsadoption · observed Oct 10, 2026
Latest release: 2.0.0release · observed May 18, 2026
Handshake status: UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s17bsrqjkb5zv8sm90kdv3zawn83g42h:screenshot-to-prompt

Setup complexity is classified as HIGH. You must provision dedicated cloud infrastructure or an isolated VM. Do not run this directly on your local workstation.
Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-z-zihan-screenshot-to-prompt/snapshot"

Documentation

CLAWHUB

144,144 characters of source documentation, loaded on request.

Extracted files

3 files captured from the source.

SKILL.md

---
name: screenshot-to-prompt
version: "2.0.0"
homepage: https://github.com/z-Zihan/awesome-skills
description: >
  截图理解 + 页面结构抽取 + 实现 prompt 生成器。
  输入页面截图，输出结构化识别结果和可直接发给 coding agent 的实现 prompt。
  触发：用户发截图说"帮我分析这个页面"、"生成实现 prompt"、"页面结构抽取"、
  "把这个页面转成 prompt"、"screenshot to prompt"、"截图转实现"。
  NOT for: 直接写代码（除非用户明确要求）、业务分析、产品方案撰写、设计稿评审。
---

# 技能：Screenshot → Coding Agent Prompt

## 语言规则

**检测用户使用的语言，全程使用同一语言输出。** 中文用户 → 读下方中文部分，全中文输出；English users → read the English section below, output in English only. 技术术语（UI、prompt、coding agent 等）保留原文即可。

---

# 中文版

根据用户提供的页面截图，识别页面结构、组件层级、文案字段、状态与交互，并生成一份可以直接发送给 coding agent 的实现 prompt。

核心链路：

截图理解 → 页面结构抽取 → 状态识别 → 实现 prompt 生成

这是一个：
- 截图理解助手
- 页面结构抽取器
- 实现 Prompt 生成器

不是：
- 产品方案生成器
- 业务分析器
- 完整代码生成器

---

# 核心目标

用户给一张图后，稳定输出：

1. 截图结构识别结果
2. 一份可直接发送给 coding agent 的实现 prompt

重点帮助 coding agent 理解：
- 页面怎么搭
- 区块怎么拆
- 状态怎么处理
- UI 应该做到什么程度

而不是扩展业务背景。

---

# 输入

用户可能提供：
- 单张页面截图
- 多张状态截图
- 局部区域截图
- 少量补充要求

例如：
- 只关注这个区域
- 只抽页面结构
- 公共结构已经有了
- 不要重复 layout
- 先只搭骨架
- 可以自由发挥 UI
- 有 Figma，需要尽量还原
- 优先使用项目 UI 库

---

# 异常处理

以下情况需要主动澄清或降级处理，而非盲目执行。

## 无截图

- 主动询问用户提供截图
- 不可凭文字描述编造页面结构
- 如果用户想用 URL 或描述代替截图，提示截图效果最佳

## 截图模糊 / 模糊请求

- 截图质量低导致关键细节不可辨时：识别可见部分，明确标注不确定区域
- 用户请求模糊（如"帮我搞一下"）且无截图时：要求补充截图和具体需求

## 矛盾请求

- 指出矛盾点并请求用户澄清
  - 例：用户同时要求"高保真还原"和"自由发挥 UI" → 提示两者冲突，请确认优先级

## 图像分析能力不可用

- 当前环境无 vision model 或图像分析工具不可用时：明确告知用户"当前环境不支持图像分析"
- 替代方案：建议用户将截图中的 UI 元素文字描述出来，基于文字描述生成 prompt

## 图片分析失败

- 如果无法识别截图内容：明确告知用户并建议提供更清晰的截图或补充文字描述
- 部分识别成功时：输出已识别部分，标注无法识别的区域

---

# 工作流程

收到截图后，自动完成以下步骤。

## 1. 页面结构识别

识别页面的信息架构与区块关系：
- 页面整体布局
- 左右 / 上下结构
- 卡片区块
- 栅格结构
- 内容分层
- 主次区域
- 区块嵌套关系

识别常见模块：
- 表单
- 表格
- 列表
- Tabs、Modal / Drawer
- 筛选区
- 上传区
- 统计区
- Footer Action Bar、Empty State、Stepper、Collapse

---

## 2. 组件识别

识别页面中的 UI 组件：
- input、select、checkbox、radio、switch
- date picker、table、pagination、upload
- button、dropdown、tooltip、tabs
- card、tag、badge、modal、drawer
- alert、progress、skeleton

需要识别：
- 组件类型
- 组件层级
- 主次关系
- 可复用区块

---

## 3. 文案与字段识别

提取截图中的：
- 页面标题
- tab 名称
- 表单字段
- 表格列名
- 按钮文案
- placeholder、tooltip
- 提示文案
- 标签文本
- 汇总信息
- 状态文本

不要凭空补全文案。

---

## 4. 状态与交互识别

识别：
- 当前激活项
- selected 状态
- disabled 状态
- loading 状态
- empty 状态
- error 状态
- success 状态
- 展开 / 收起
- 弹窗开启状态
- 行高亮
- 条件展示内容

允许轻度合理推断，详见下方「合理推断边界」表。**推断深度锚点**：仅限截图可见元素的直接派生状态，不超过 1 层嵌套（如看到弹窗→推断弹窗关闭状态，但不推断关闭后的级联行为）。

---

## 5. 多图状态归并

如果用户提供多张截图：

需要：
- 合并公共结构
- 抽取状态差异
- 识别状态切换关系
- 避免重复描述

统一整理：
- 默认态
- hover 态
- selected 态
- disabled 态
- loading 态
- empty 态
- error 态
- success 态
- 展开态
- 编辑态

重点关注：
- 哪些区域变化
- 哪些组件变化
- 哪些状态联动

---

## 6. 布局与视觉层级

识别：
- 主视觉区域
- 主操作区域
- 固定区域
- 滚动区域
- 自适应区域
- 内容伸缩关系
- 信息优先级
- 页面留白趋势

帮助 coding agent 即使没有设计稿，也能合理组织页面结构和视觉层级。

---

## 7. 可复用区块识别

识别适合组件化的区域：
- 筛选区
- 表格工具栏
- 列表项
- 统计卡片
- Footer Action Bar
- 空状态组件
- 上传区域
- 弹窗内容区

帮助 coding agent 做合理组件拆分。

---

## 8. 实现意图抽取

将截图翻译成实现导向描述：

✅ 好的描述：
- 数据查询列表页，顶部为筛选区，中间为表格区域，底部包含分页
- 多步骤编辑页面，左侧为步骤导航，右侧为表单内容区
- 带统计卡片和列表区域的仪表盘页面

❌ 不好的描述：
- 这是一个后台页面
- 这是一个管理系统
- 这是一个业务页面

重点：帮助 coding agent

_meta.json

{
  "ownerId": "kn76af6ccjftr7hsds21j60xnn82q1qd",
  "slug": "screenshot-to-prompt",
  "version": "2.0.0",
  "publishedAt": 1779108477963
}

skill-card.md

## Description:

Screenshot To Prompt helps agents analyze UI screenshots, extract page structure, states, text, and interactions, and produce implementation prompts for coding agents.

This skill is ready for commercial/non-commercial use.

## Publisher:

[z-zihan](https://clawhub.ai/user/z-zihan)

### License/Terms of Use:

MIT-0

## Use Case:

Developers and engineers use this skill to turn UI screenshots into structured page analysis and ready-to-send prompts for coding agents when building or recreating page layouts.

### Deployment Geography for Use:

Global

## Known Risks and Mitigations:

Risk: Screenshots may contain private UI text, internal product details, or sensitive interface data that can be reproduced in generated prompts.

Mitigation: Review and redact screenshots and generated prompts before sending them onward.

Risk: Low-quality or ambiguous screenshots can lead to uncertain page-structure analysis or misleading implementation guidance.

Mitigation: Use clearer screenshots when possible and verify any sections the skill marks as uncertain before implementation.

## Reference(s):

- [ClawHub skill page](https://clawhub.ai/z-zihan/skills/screenshot-to-prompt)
- [Project homepage](https://github.com/z-Zihan/awesome-skills)

## Skill Output:

**Output Type(s):** [Text, Markdown, Guidance]

**Output Format:** [Markdown response with structured screenshot analysis and a copyable coding-agent prompt]

**Output Parameters:** [1D]

**Other Properties Related to Output:** [Language follows the user's language; the skill guides prompt generation and does not produce code unless the user explicitly asks.]

## Skill Version(s):

2.0.0 (source: frontmatter and server release evidence)

## Ethical Considerations:

Users should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.

Github ReposUpdated 21h agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW

Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW

Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.

MCPOPENCLAW

Github ReposUpdated 7mo agoRank 70

CopilotKit

The Frontend for Agents & Generative UI. React + Angular