{"id":"d8576cd2-eb0e-4900-9fb8-f3af60777a55","slug":"clawhub-z-zihan-screenshot-to-prompt","name":"Screenshot To Prompt","description":"截图理解 + 页面结构抽取 + 实现 prompt 生成器。 输入页面截图，输出结构化识别结果和可直接发给 coding agent 的实现 prompt。 触发：用户发截图说\"帮我分析这个页面\"、\"生成实现 prompt\"、\"页面结构抽取\"、 \"把这个页面转成 prompt\"、\"screenshot to pr...","canonicalUrl":"https://www.xpersona.co/agent/clawhub-z-zihan-screenshot-to-prompt","sourceUrl":"https://clawhub.ai/z-zihan/screenshot-to-prompt","homepage":"https://clawhub.ai/z-zihan/skills/screenshot-to-prompt","source":"CLAWHUB","vendor":{"slug":"clawhub","label":"Clawhub","url":"https://clawhub.ai/z-zihan/skills/screenshot-to-prompt"},"protocols":["OPENCLEW"],"capabilities":[],"trustScore":null,"trustConfidence":"unknown","artifactCount":0,"benchmarkCount":0,"lastRelease":"2.0.0","freshnessAt":"2026-10-10T14:52:10.591Z","freshnessLabel":"Oct 10, 2026","securityReviewed":true,"openapiReady":false,"stats":[{"label":"Trust score","value":"Unknown"},{"label":"Compatibility","value":"OpenClaw"},{"label":"Freshness","value":"Oct 10, 2026"},{"label":"Vendor","value":"Clawhub"},{"label":"Artifacts","value":"0"},{"label":"Benchmarks","value":"0"},{"label":"Last release","value":"2.0.0"}],"factsPreview":[{"factKey":"vendor","category":"vendor","label":"Vendor","value":"Clawhub","href":"https://clawhub.ai/z-zihan/skills/screenshot-to-prompt","sourceUrl":"https://clawhub.ai/z-zihan/skills/screenshot-to-prompt","sourceType":"profile","confidence":"medium","observedAt":"2026-10-10T14:52:10.592Z","isPublic":true},{"factKey":"protocols","category":"compatibility","label":"Protocol compatibility","value":"OpenClaw","href":"https://www.xpersona.co/api/v1/agents/clawhub-z-zihan-screenshot-to-prompt/contract","sourceUrl":"https://www.xpersona.co/api/v1/agents/clawhub-z-zihan-screenshot-to-prompt/contract","sourceType":"contract","confidence":"medium","observedAt":"2026-10-10T14:52:10.592Z","isPublic":true},{"factKey":"traction","category":"adoption","label":"Adoption signal","value":"1.4K downloads","href":"https://clawhub.ai/z-zihan/screenshot-to-prompt","sourceUrl":"https://clawhub.ai/z-zihan/screenshot-to-prompt","sourceType":"profile","confidence":"medium","observedAt":"2026-10-10T14:52:10.592Z","isPublic":true},{"factKey":"latest_release","category":"release","label":"Latest release","value":"2.0.0","href":"https://clawhub.ai/z-zihan/screenshot-to-prompt","sourceUrl":"https://clawhub.ai/z-zihan/screenshot-to-prompt","sourceType":"release","confidence":"medium","observedAt":"2026-05-18T12:47:57.963Z","isPublic":true},{"factKey":"handshake_status","category":"security","label":"Handshake status","value":"UNKNOWN","href":"https://www.xpersona.co/api/v1/agents/clawhub-z-zihan-screenshot-to-prompt/trust","sourceUrl":"https://www.xpersona.co/api/v1/agents/clawhub-z-zihan-screenshot-to-prompt/trust","sourceType":"trust","confidence":"medium","observedAt":null,"isPublic":true}],"highlights":["1.4K downloads","Trust evidence available"],"agentCard":{"name":"Screenshot To Prompt","description":"截图理解 + 页面结构抽取 + 实现 prompt 生成器。 输入页面截图，输出结构化识别结果和可直接发给 coding agent 的实现 prompt。 触发：用户发截图说\"帮我分析这个页面\"、\"生成实现 prompt\"、\"页面结构抽取\"、 \"把这个页面转成 prompt\"、\"screenshot to pr...","source":"CLAWHUB","sourceId":"clawhub:s17bsrqjkb5zv8sm90kdv3zawn83g42h:screenshot-to-prompt","homepage":"https://clawhub.ai/z-zihan/skills/screenshot-to-prompt","repository":"https://clawhub.ai/z-zihan/screenshot-to-prompt","documentation":"https://www.xpersona.co/agent/clawhub-z-zihan-screenshot-to-prompt","protocols":["OPENCLEW"],"examples":[{"kind":"example","language":"md","snippet":"你需要根据截图实现一个页面/页面局部区域。\n\n### 实现目标\n\n请根据截图完成页面结构搭建，重点实现：\n\n- 页面布局\n- 区块层级\n- 组件结构\n- 基础状态\n- 基础交互\n\n不要扩展截图中未体现的复杂业务逻辑。\n\n---\n\n### 实现范围\n\n- 仅实现截图中出现的内容\n- 不扩展未出现的模块\n- 如果已有 layout/header/sidebar，请直接复用\n- 不重复实现公共结构\n- 重点实现当前截图区域\n\n---\n\n### 页面结构\n\n页面包含以下区域：\n\n1.\n2.\n3.\n\n---\n\n### 组件构成\n\n请使用以下组件完成页面：\n\n-\n-\n-\n\n---\n\n### 状态与交互\n\n页面需要支持：\n\n-\n-\n-\n\n包括：\n- 默认态\n- selected 态\n- disabled 态\n- loading 态\n- empty 态（如有）\n\n---\n\n### 布局要求\n\n注意：\n- 固定区域\n- 滚动区域\n- 自适应关系\n- 区块层级\n- 页面间距与留白\n\n---\n\n### 组件拆分建议\n\n建议拆分：\n\n-\n-\n-\n\n保证结构清晰，方便后续迭代。\n\n---\n\n### UI 策略\n\n<!-- 根据实际情况选择以下一种，删除其余两种 -->\n\n#### 骨架模式\n\n- 先搭页面骨架\n- 不做高保真 UI\n- 样式保持简洁\n- 后续再继续精修\n\n#### 自由发挥 UI\n\n- 在截图结构基础上优化视觉\n- 优先复用项目 UI 组件库\n- 保持现代、统一、简洁\n- 保证正式页面质量\n\n#### 设计稿还原\n\n- 尽量还原设计稿\n- 保持布局与间距一致\n- 优先复用设计系统\n- 保证视觉统一\n\n---\n\n### 输出要求\n\n- 使用项目现有技术栈\n- 优先复用已有 UI 组件\n- 没有接口可使用 mock 数据\n- 不实现复杂业务逻辑\n- 组件拆分合理\n- 保持代码可维护"},{"kind":"example","language":"md","snippet":"You need to implement a page (or page section) based on the provided screenshot.\n\n### Implementation Goal\n\nBuild the page structure based on the screenshot. Focus on：\n\n- Page layout\n- Block hierarchy\n- Component structure\n- Basic states\n- Basic interactions\n\nDo NOT expand into complex business logic not shown in the screenshot.\n\n---\n\n### Implementation Scope\n\n- Only implement content visible in the screenshot\n- Do NOT expand to modules not shown\n- If layout/header/sidebar already exists, reuse them directly\n- Do NOT re-implement common structures\n- Focus on the current screenshot area\n\n---\n\n### Page Structure\n\nThe page contains the following areas：\n\n1.\n2.\n3.\n\n---\n\n### Component Composition\n\nUse the following components to build the page：\n\n-\n-\n-\n\n---\n\n### States & Interactions\n\nThe page needs to support：\n\n-\n-\n-\n\nIncluding：\n- Default state\n- Selected state\n- Disabled state\n- Loading state\n- Empty state (if applicable)\n\n---\n\n### Layout Requirements\n\nNote：\n- Fixed areas\n- Scrollable areas\n- Adaptive relationships\n- Block hierarchy\n- Page spacing and whitespace\n\n---\n\n### Component Split Suggestions\n\nSuggested splits：\n\n-\n-\n-\n\nEnsure clear structure for future iteration.\n\n---\n\n### UI Strategy\n\n<!-- Select one based on the actual situation, delete the other two -->\n\n#### Skeleton Mode\n\n- Build page skeleton first\n- No high-fidelity UI\n- Keep styles simple\n- Refine later\n\n#### Free UI Design\n\n- Optimize visuals based on screenshot structure\n- Prefer project UI component library\n- Modern, unified, clean\n- Production-ready quality\n\n#### Design Restoration\n\n- Match design as closely as possible\n- Keep layout and spacing consistent\n- Prefer design system\n- Visual consistency\n\n---\n\n### Output Requirements\n\n- Use the project's existing tech stack\n- Prefer reusing existing UI components\n- Use mock data if no API is available\n- Do NOT implement complex business logic\n- Reasonable component splits\n- Maintainable code"}]}}