{"id":"d8576cd2-eb0e-4900-9fb8-f3af60777a55","entityType":"agent","slug":"clawhub-z-zihan-screenshot-to-prompt","name":"Screenshot To Prompt","canonicalUrl":"https://www.xpersona.co/agent/clawhub-z-zihan-screenshot-to-prompt","canonicalPath":"/agent/clawhub-z-zihan-screenshot-to-prompt","generatedAt":"2026-10-10T17:39:06.804Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-10T14:52:10.592Z","emptyReason":null},"description":"截图理解 + 页面结构抽取 + 实现 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","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1.4K downloads reported by the source. Last updated 10/10/2026.","installCommand":"clawhub skill install s17bsrqjkb5zv8sm90kdv3zawn83g42h:screenshot-to-prompt","sourceUrl":"https://clawhub.ai/z-zihan/screenshot-to-prompt","homepage":"https://clawhub.ai/z-zihan/skills/screenshot-to-prompt","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/z-zihan/screenshot-to-prompt","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/z-zihan/skills/screenshot-to-prompt","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":63,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"截图理解 + 页面结构抽取 + 实现 prompt 生成器。 输入页面截图，输出结构化识别结果和可直接发给 coding agent 的实现 prompt。 触发：用户发截图说\"帮我分析这个页面\"、\"生成实现 prompt\"、\"页面结构抽取\"、 \"把这个页面转成 prompt\"、\"screenshot to pr..."},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-10T14:52:10.592Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-10T14:52:10.592Z","emptyReason":null},"stars":null,"forks":null,"downloads":1375,"packageName":null,"latestVersion":"2.0.0","tractionLabel":"1.4K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-10T14:52:10.591Z","emptyReason":null},"lastUpdatedAt":"2026-10-10T14:52:10.592Z","lastCrawledAt":"2026-10-10T14:52:10.591Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-11T14:52:10.591Z","lastVerifiedAt":null,"highlights":[{"version":"2.0.0","createdAt":"2026-05-18T12:47:57.963Z","changelog":"Auto-publish from commit dc4421fe7970ce27a9e172af29c59ab38d8373a3","fileCount":3,"zipByteSize":9712},{"version":"0.3.0","createdAt":"2026-05-18T08:11:05.875Z","changelog":"Auto-publish from commit 5b27ac4957173e2b02bfd6ba2b7bec399aaa54be","fileCount":2,"zipByteSize":8605},{"version":"1.2.1","createdAt":"2026-05-18T07:46:07.430Z","changelog":"No file changes detected for version 1.2.1. - No updates or modifications were introduced in this version. - All features, behaviors, and documentation remain identical to version 1.2.0.","fileCount":2,"zipByteSize":8605},{"version":"1.2.0","createdAt":"2026-05-16T13:35:28.536Z","changelog":"Version 1.2.0 - Added edge case handling for unavailable vision model or image analysis tools, with fallback suggestions for users. - Clarified the reasoning scope: only directly visible elements and at most one level of derived state should be inferred from screenshots. - Updated exception handling and workflow sections to reflect new capability and fallback instructions. - No changes to core workflow or output format.","fileCount":2,"zipByteSize":8605},{"version":"1.1.0","createdAt":"2026-05-16T11:55:11.362Z","changelog":"Bilingual restructure","fileCount":2,"zipByteSize":8287},{"version":"0.1.99","createdAt":"2026-05-16T03:23:28.989Z","changelog":"Auto-publish from commit 926041209e8cad0642bea27605a45317279cea93","fileCount":2,"zipByteSize":7792},{"version":"0.1.92","createdAt":"2026-05-15T12:35:26.067Z","changelog":"Auto-publish from commit 4bfb02e060e62fd0cb5e7e60d863806baef1ac83","fileCount":2,"zipByteSize":7776},{"version":"0.1.16","createdAt":"2026-05-13T08:38:38.284Z","changelog":"Auto-publish from commit ab4c08dbf27766afc28cc96c70f33fb57cd3ab0f","fileCount":2,"zipByteSize":6758}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s17bsrqjkb5zv8sm90kdv3zawn83g42h:screenshot-to-prompt","setupComplexity":"low","setupSteps":["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":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-z-zihan-screenshot-to-prompt/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-z-zihan-screenshot-to-prompt/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-z-zihan-screenshot-to-prompt/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-z-zihan-screenshot-to-prompt/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-z-zihan-screenshot-to-prompt/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-z-zihan-screenshot-to-prompt/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-10T17:39:06.801Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-z-zihan-screenshot-to-prompt/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-z-zihan-screenshot-to-prompt/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-z-zihan-screenshot-to-prompt/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-z-zihan-screenshot-to-prompt/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-10T14:52:10.592Z","emptyReason":null},"readme":"Skill: Screenshot To Prompt\n\nOwner: z-zihan\n\nSummary: 截图理解 + 页面结构抽取 + 实现 prompt 生成器。 输入页面截图，输出结构化识别结果和可直接发给 coding agent 的实现 prompt。 触发：用户发截图说\"帮我分析这个页面\"、\"生成实现 prompt\"、\"页面结构抽取\"、 \"把这个页面转成 prompt\"、\"screenshot to pr...\n\nTags: latest:2.0.0\n\nVersion history:\n\nv2.0.0 | 2026-05-18T12:47:57.963Z | user\n\nAuto-publish from commit dc4421fe7970ce27a9e172af29c59ab38d8373a3\n\nv0.3.0 | 2026-05-18T08:11:05.875Z | user\n\nAuto-publish from commit 5b27ac4957173e2b02bfd6ba2b7bec399aaa54be\n\nv1.2.1 | 2026-05-18T07:46:07.430Z | auto\n\nNo file changes detected for version 1.2.1.\n\n- No updates or modifications were introduced in this version.\n- All features, behaviors, and documentation remain identical to version 1.2.0.\n\nv1.2.0 | 2026-05-16T13:35:28.536Z | auto\n\nVersion 1.2.0\n\n- Added edge case handling for unavailable vision model or image analysis tools, with fallback suggestions for users.\n- Clarified the reasoning scope: only directly visible elements and at most one level of derived state should be inferred from screenshots.\n- Updated exception handling and workflow sections to reflect new capability and fallback instructions.\n- No changes to core workflow or output format.\n\nv1.1.0 | 2026-05-16T11:55:11.362Z | user\n\nBilingual restructure\n\nv0.1.99 | 2026-05-16T03:23:28.989Z | user\n\nAuto-publish from commit 926041209e8cad0642bea27605a45317279cea93\n\nv0.1.92 | 2026-05-15T12:35:26.067Z | user\n\nAuto-publish from commit 4bfb02e060e62fd0cb5e7e60d863806baef1ac83\n\nv0.1.16 | 2026-05-13T08:38:38.284Z | user\n\nAuto-publish from commit ab4c08dbf27766afc28cc96c70f33fb57cd3ab0f\n\nv0.1.15 | 2026-05-13T08:34:54.147Z | user\n\nAuto-publish from commit a820cbbfef21254fde92463c892723b17525ea7d\n\nv0.1.14 | 2026-05-13T08:26:56.935Z | user\n\nAuto-publish from commit e89b017b44d4aecc7f3fcec49984326f8fb13b68\n\nv0.1.13 | 2026-05-13T08:21:28.865Z | user\n\nAuto-publish from commit 156bbd703a6695cc497d46b47995beeed7c270af\n\nv0.1.12 | 2026-05-13T08:18:33.008Z | user\n\nAuto-publish from commit 17c37ea9460b513eb588fd0e695ad04f2a3094d9\n\nv0.1.11 | 2026-05-13T07:58:39.153Z | user\n\nAuto-publish from commit cafe488469633ddc923de0af49ee309433a36210\n\nv0.1.0 | 2026-05-13T07:40:38.842Z | user\n\nAuto-publish from commit a2b54a9f3725f5e46f05a60b9da50e8fa6649432\n\nv0.1.9 | 2026-05-13T07:38:04.362Z | user\n\nAuto-publish from commit a2b54a9f3725f5e46f05a60b9da50e8fa6649432\n\nv0.1.8 | 2026-05-13T07:37:16.802Z | user\n\nAuto-publish from commit 5b23c3f741c7cbd93eea641ceffac859794cd51d\n\nv0.1.7 | 2026-05-13T07:26:11.096Z | user\n\nAuto-publish from commit 87b9b9b6150f5e87fad9f23e4328bdac8a477900\n\nv0.0.2 | 2026-05-13T03:27:45.652Z | user\n\nAuto-publish from commit 8ed7c3368b1d64ba80173d60f10671370750ae64\n\nv0.0.1 | 2026-05-13T02:51:13.864Z | user\n\nAuto-publish from commit 7b1724dfc3fcf2e7df4531c11f6e957d9cf59e37\n\nArchive index:\n\nArchive v2.0.0: 3 files, 9712 bytes\n\nFiles: skill-card.md (1989b), SKILL.md (20410b), _meta.json (139b)\n\nFile v2.0.0:SKILL.md\n\n---\nname: screenshot-to-prompt\nversion: \"2.0.0\"\nhomepage: https://github.com/z-Zihan/awesome-skills\ndescription: >\n  截图理解 + 页面结构抽取 + 实现 prompt 生成器。\n  输入页面截图，输出结构化识别结果和可直接发给 coding agent 的实现 prompt。\n  触发：用户发截图说\"帮我分析这个页面\"、\"生成实现 prompt\"、\"页面结构抽取\"、\n  \"把这个页面转成 prompt\"、\"screenshot to prompt\"、\"截图转实现\"。\n  NOT for: 直接写代码（除非用户明确要求）、业务分析、产品方案撰写、设计稿评审。\n---\n\n# 技能：Screenshot → Coding Agent Prompt\n\n## 语言规则\n\n**检测用户使用的语言，全程使用同一语言输出。** 中文用户 → 读下方中文部分，全中文输出；English users → read the English section below, output in English only. 技术术语（UI、prompt、coding agent 等）保留原文即可。\n\n---\n\n# 中文版\n\n根据用户提供的页面截图，识别页面结构、组件层级、文案字段、状态与交互，并生成一份可以直接发送给 coding agent 的实现 prompt。\n\n核心链路：\n\n截图理解 → 页面结构抽取 → 状态识别 → 实现 prompt 生成\n\n这是一个：\n- 截图理解助手\n- 页面结构抽取器\n- 实现 Prompt 生成器\n\n不是：\n- 产品方案生成器\n- 业务分析器\n- 完整代码生成器\n\n---\n\n# 核心目标\n\n用户给一张图后，稳定输出：\n\n1. 截图结构识别结果\n2. 一份可直接发送给 coding agent 的实现 prompt\n\n重点帮助 coding agent 理解：\n- 页面怎么搭\n- 区块怎么拆\n- 状态怎么处理\n- UI 应该做到什么程度\n\n而不是扩展业务背景。\n\n---\n\n# 输入\n\n用户可能提供：\n- 单张页面截图\n- 多张状态截图\n- 局部区域截图\n- 少量补充要求\n\n例如：\n- 只关注这个区域\n- 只抽页面结构\n- 公共结构已经有了\n- 不要重复 layout\n- 先只搭骨架\n- 可以自由发挥 UI\n- 有 Figma，需要尽量还原\n- 优先使用项目 UI 库\n\n---\n\n# 异常处理\n\n以下情况需要主动澄清或降级处理，而非盲目执行。\n\n## 无截图\n\n- 主动询问用户提供截图\n- 不可凭文字描述编造页面结构\n- 如果用户想用 URL 或描述代替截图，提示截图效果最佳\n\n## 截图模糊 / 模糊请求\n\n- 截图质量低导致关键细节不可辨时：识别可见部分，明确标注不确定区域\n- 用户请求模糊（如\"帮我搞一下\"）且无截图时：要求补充截图和具体需求\n\n## 矛盾请求\n\n- 指出矛盾点并请求用户澄清\n  - 例：用户同时要求\"高保真还原\"和\"自由发挥 UI\" → 提示两者冲突，请确认优先级\n\n## 图像分析能力不可用\n\n- 当前环境无 vision model 或图像分析工具不可用时：明确告知用户\"当前环境不支持图像分析\"\n- 替代方案：建议用户将截图中的 UI 元素文字描述出来，基于文字描述生成 prompt\n\n## 图片分析失败\n\n- 如果无法识别截图内容：明确告知用户并建议提供更清晰的截图或补充文字描述\n- 部分识别成功时：输出已识别部分，标注无法识别的区域\n\n---\n\n# 工作流程\n\n收到截图后，自动完成以下步骤。\n\n## 1. 页面结构识别\n\n识别页面的信息架构与区块关系：\n- 页面整体布局\n- 左右 / 上下结构\n- 卡片区块\n- 栅格结构\n- 内容分层\n- 主次区域\n- 区块嵌套关系\n\n识别常见模块：\n- 表单\n- 表格\n- 列表\n- Tabs、Modal / Drawer\n- 筛选区\n- 上传区\n- 统计区\n- Footer Action Bar、Empty State、Stepper、Collapse\n\n---\n\n## 2. 组件识别\n\n识别页面中的 UI 组件：\n- input、select、checkbox、radio、switch\n- date picker、table、pagination、upload\n- button、dropdown、tooltip、tabs\n- card、tag、badge、modal、drawer\n- alert、progress、skeleton\n\n需要识别：\n- 组件类型\n- 组件层级\n- 主次关系\n- 可复用区块\n\n---\n\n## 3. 文案与字段识别\n\n提取截图中的：\n- 页面标题\n- tab 名称\n- 表单字段\n- 表格列名\n- 按钮文案\n- placeholder、tooltip\n- 提示文案\n- 标签文本\n- 汇总信息\n- 状态文本\n\n不要凭空补全文案。\n\n---\n\n## 4. 状态与交互识别\n\n识别：\n- 当前激活项\n- selected 状态\n- disabled 状态\n- loading 状态\n- empty 状态\n- error 状态\n- success 状态\n- 展开 / 收起\n- 弹窗开启状态\n- 行高亮\n- 条件展示内容\n\n允许轻度合理推断，详见下方「合理推断边界」表。**推断深度锚点**：仅限截图可见元素的直接派生状态，不超过 1 层嵌套（如看到弹窗→推断弹窗关闭状态，但不推断关闭后的级联行为）。\n\n---\n\n## 5. 多图状态归并\n\n如果用户提供多张截图：\n\n需要：\n- 合并公共结构\n- 抽取状态差异\n- 识别状态切换关系\n- 避免重复描述\n\n统一整理：\n- 默认态\n- hover 态\n- selected 态\n- disabled 态\n- loading 态\n- empty 态\n- error 态\n- success 态\n- 展开态\n- 编辑态\n\n重点关注：\n- 哪些区域变化\n- 哪些组件变化\n- 哪些状态联动\n\n---\n\n## 6. 布局与视觉层级\n\n识别：\n- 主视觉区域\n- 主操作区域\n- 固定区域\n- 滚动区域\n- 自适应区域\n- 内容伸缩关系\n- 信息优先级\n- 页面留白趋势\n\n帮助 coding agent 即使没有设计稿，也能合理组织页面结构和视觉层级。\n\n---\n\n## 7. 可复用区块识别\n\n识别适合组件化的区域：\n- 筛选区\n- 表格工具栏\n- 列表项\n- 统计卡片\n- Footer Action Bar\n- 空状态组件\n- 上传区域\n- 弹窗内容区\n\n帮助 coding agent 做合理组件拆分。\n\n---\n\n## 8. 实现意图抽取\n\n将截图翻译成实现导向描述：\n\n✅ 好的描述：\n- 数据查询列表页，顶部为筛选区，中间为表格区域，底部包含分页\n- 多步骤编辑页面，左侧为步骤导航，右侧为表单内容区\n- 带统计卡片和列表区域的仪表盘页面\n\n❌ 不好的描述：\n- 这是一个后台页面\n- 这是一个管理系统\n- 这是一个业务页面\n\n重点：帮助 coding agent 理解\"页面应该怎么实现\"。\n\n---\n\n# UI 策略\n\n根据用户要求选择策略。用户未明确指定时，默认使用策略 A（骨架模式）。\n\n选择依据：\n- 用户提到\"先搭骨架\" / \"不要求精细\" → 策略 A\n- 用户提到\"自由发挥\" / \"优化视觉\" / \"可正式使用\" → 策略 B\n- 用户提到\"Figma\" / \"高还原\" / \"尽量还原\" → 策略 C\n\n---\n\n## 策略 A：骨架模式\n\n适用于：\n- 没有设计稿\n- 先搭结构\n- 不要求精细 UI\n\n要求：\n- 先实现页面骨架\n- 重点完成结构与区块划分\n- 完成基础交互\n- 样式保持简洁清晰\n- 不要求高保真\n- 后续可继续精修\n\n## 策略 B：自由发挥 UI\n\n适用于：\n- 没有设计稿\n- 允许优化视觉\n- 页面需要可正式使用\n\n要求：\n- 在截图结构基础上优化 UI\n- 不偏离截图结构\n- 优先复用项目 UI 组件库\n- 保持现代、统一、简洁\n- 状态完整\n- 留白与层级合理\n\n## 策略 C：设计稿还原\n\n适用于：\n- 用户提供 Figma\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\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-\n-\n\n---\n\n### 实现意图\n\n用 2~5 句话总结这个页面主要需要实现什么。\n\n---\n\n## 第二部分：可直接发给 coding agent 的 prompt\n\nprompt 必须：\n- 可直接复制\n- 偏工程实现\n- 面向页面搭建\n- 不空泛\n- 不扩展无关业务\n\n### Prompt 模板\n\n```md\n你需要根据截图实现一个页面/页面局部区域。\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- 保持代码可维护\n```\n\n---\n---\n\n# English Version\n\nGiven a user-provided page screenshot, recognize the page structure, component hierarchy, text content, states, and interactions, then generate a ready-to-use implementation prompt that can be sent directly to a coding agent.\n\nCore pipeline:\n\nScreenshot Understanding → Page Structure Extraction → State Recognition → Implementation Prompt Generation\n\nThis is a:\n- Screenshot understanding assistant\n- Page structure extractor\n- Implementation prompt generator\n\nNOT:\n- Product proposal generator\n- Business analyzer\n- Full code generator\n\n---\n\n# Core Objective\n\nAfter the user provides a screenshot, stably output:\n\n1. Screenshot structure recognition results\n2. A ready-to-use implementation prompt for coding agents\n\nFocus on helping the coding agent understand:\n- How to build the page\n- How to split sections\n- How to handle states\n- What level of UI polish is expected\n\nRather than expanding on business context.\n\n---\n\n# Input\n\nThe user may provide:\n- A single page screenshot\n- Multiple state screenshots\n- A partial area screenshot\n- A few supplementary requirements\n\nExamples:\n- Only focus on this area\n- Only extract the page structure\n- The common layout already exists\n- Don't repeat the layout\n- Just build the skeleton first\n- Feel free to design the UI\n- I have Figma, try to match it\n- Prefer the project's UI library\n\n---\n\n# Edge Cases\n\nThe following cases require proactive clarification or graceful degradation instead of blind execution.\n\n## No Screenshot Provided\n\n- Proactively ask the user to provide a screenshot\n- Do NOT fabricate page structure from text alone\n- If the user wants to use a URL or description instead, note that screenshots work best\n\n## Unclear Screenshot / Unclear Request\n\n- When image quality is too low to identify key details: recognize what's visible, explicitly mark uncertain areas\n- When the request is vague (e.g., \"just do it\") and no screenshot is provided: ask for a screenshot and specific requirements\n\n## Contradictory Requirements\n\n- Point out contradictions and ask the user to clarify\n  - E.g., user requests both \"high-fidelity restoration\" and \"free UI design\" → note the conflict and ask to confirm priority\n\n## Image Analysis Failure\n\n- If screenshot content cannot be recognized: inform the user and suggest providing a clearer screenshot or supplementary text description\n- When partially recognized: output recognized parts and mark unrecognized areas\n\n## Vision Model Unavailable\n\n- If current environment lacks vision model or image analysis tools: inform user \"Current environment does not support image analysis\"\n- Alternative: suggest user describe UI elements from screenshot in text, generate prompt based on text description\n\n---\n\n# Workflow\n\nAfter receiving a screenshot, automatically complete the following steps.\n\n## 1. Page Structure Recognition\n\nRecognize the information architecture and block relationships:\n- Overall page layout\n- Left-right / top-bottom structure\n- Card blocks\n- Grid structure\n- Content layering\n- Primary and secondary areas\n- Block nesting relationships\n\nRecognize common modules:\n- Forms\n- Tables\n- Lists\n- Tabs, Modal / Drawer\n- Filter area\n- Upload area\n- Statistics area\n- Footer Action Bar, Empty State, Stepper, Collapse\n\n---\n\n## 2. Component Recognition\n\nRecognize UI components in the screenshot:\n- input, select, checkbox, radio, switch\n- date picker, table, pagination, upload\n- button, dropdown, tooltip, tabs\n- card, tag, badge, modal, drawer\n- alert, progress, skeleton\n\nIdentify:\n- Component type\n- Component hierarchy\n- Primary/secondary relationships\n- Reusable blocks\n\n---\n\n## 3. Text & Field Recognition\n\nExtract from the screenshot:\n- Page title\n- Tab names\n- Form fields\n- Table column headers\n- Button text\n- placeholder, tooltip\n- Hint/description text\n- Label text\n- Summary information\n- Status text\n\nDo NOT fabricate text that isn't visible in the screenshot.\n\n---\n\n## 4. State & Interaction Recognition\n\nRecognize:\n- Active item\n- Selected state\n- Disabled state\n- Loading state\n- Empty state\n- Error state\n- Success state\n- Expanded/collapsed\n- Modal open state\n- Row highlight\n- Conditional content\n\nAllowed lightweight reasonable inference, see the \"Reasonable Inference Boundaries\" table below.\n\n---\n\n## 5. Multi-Image State Merging\n\nIf the user provides multiple screenshots:\n\nRequired:\n- Merge common structures\n- Extract state differences\n- Identify state transition relationships\n- Avoid duplicate descriptions\n\nConsolidate:\n- Default state\n- Hover state\n- Selected state\n- Disabled state\n- Loading state\n- Empty state\n- Error state\n- Success state\n- Expanded state\n- Edit state\n\nFocus on:\n- Which areas changed\n- Which components changed\n- Which states are linked\n\n---\n\n## 6. Layout & Visual Hierarchy\n\nRecognize:\n- Primary visual area\n- Primary action area\n- Fixed areas\n- Scrollable areas\n- Adaptive areas\n- Content stretch relationships\n- Information priority\n- Whitespace trends\n\nHelp the coding agent organize page structure and visual hierarchy reasonably, even without a design mockup.\n\n---\n\n## 7. Reusable Block Recognition\n\nIdentify areas suitable for componentization:\n- Filter area\n- Table toolbar\n- List item\n- Statistics card\n- Footer Action Bar\n- Empty state component\n- Upload area\n- Modal content area\n\nHelp the coding agent make reasonable component splits.\n\n---\n\n## 8. Implementation Intent Extraction\n\nTranslate the screenshot into implementation-oriented descriptions:\n\n✅ Good descriptions:\n- Data query list page, top is filter area, middle is table area, bottom includes pagination\n- Multi-step editing page, left is step navigation, right is form content area\n- Dashboard page with statistics cards and list area\n\n❌ Bad descriptions:\n- This is a backend page\n- This is a management system\n- This is a business page\n\nFocus: Help the coding agent understand \"how should this page be implemented\".\n\n---\n\n# UI Strategy\n\nSelect strategy based on user requirements. When user doesn't specify, default to Strategy A (Skeleton Mode).\n\nSelection criteria:\n- User mentions \"skeleton first\" / \"no need for fine UI\" → Strategy A\n- User mentions \"free design\" / \"optimize visuals\" / \"production-ready\" → Strategy B\n- User mentions \"Figma\" / \"high fidelity\" / \"match closely\" → Strategy C\n\n---\n\n## Strategy A: Skeleton Mode\n\nFor:\n- No design mockup\n- Build structure first\n- High-fidelity UI not required\n\nRequirements:\n- Implement the page skeleton first\n- Focus on structure and block division\n- Complete basic interactions\n- Keep styles clean and simple\n- High fidelity not required\n- Can be refined later\n\n## Strategy B: Free UI Design\n\nFor:\n- No design mockup\n- UI optimization allowed\n- Page needs to be production-ready\n\nRequirements:\n- Optimize UI based on the screenshot structure\n- Don't deviate from the screenshot structure\n- Prefer reusing the project's UI component library\n- Keep it modern, unified, and clean\n- Complete state support\n- Reasonable whitespace and hierarchy\n\n## Strategy C: Design Restoration\n\nFor:\n- User provides Figma\n- User requests high fidelity\n\nRequirements:\n- Match the design as closely as possible\n- Keep layout, spacing, and hierarchy consistent\n- Prefer reusing the design system\n- Keep component conventions unified\n- Prioritize visual consistency\n\n---\n\n# Reasonable Inference Boundaries\n\n| Allowed | NOT Allowed |\n|---|---|\n| Infer basic state transitions | Fabricate complex business rules |\n| Infer basic form validation | Add complete new modules without basis |\n| Infer list selection behavior | Define non-existent API logic |\n| Infer block priority relationships | Expand page beyond the screenshot |\n| Infer basic linkage relationships | Define system types without basis |\n\n---\n\n# Output Format\n\nOutput two parts by default.\n\n## Part 1: Screenshot Structure Recognition\n\nUse a structured, engineering-oriented format. Tables are recommended.\n\n### Page Overview\n\n| Item | Content |\n|---|---|\n| Page type | |\n| Layout method | |\n| Page hierarchy | |\n| Fixed areas | |\n| Scrollable areas | |\n\n---\n\n### Block Breakdown\n\n| Block | Components | Text/Fields | Current State | Inferred Interactions |\n|---|---|---|---|---|\n| | | | | |\n\n---\n\n### States & Interactions\n\n-\n-\n\n---\n\n### Implementation Intent\n\nSummarize in 2-5 sentences what this page needs to implement.\n\n---\n\n## Part 2: Prompt for Coding Agent\n\nThe prompt must:\n- Be directly copyable\n- Be implementation-oriented\n- Be focused on page construction\n- Not be vague\n- Not expand into unrelated business\n\n### Prompt Template\n\n```md\nYou 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\n```\n\nFile v2.0.0:_meta.json\n\n{\n  \"ownerId\": \"kn76af6ccjftr7hsds21j60xnn82q1qd\",\n  \"slug\": \"screenshot-to-prompt\",\n  \"version\": \"2.0.0\",\n  \"publishedAt\": 1779108477963\n}\n\nFile v2.0.0:skill-card.md\n\n## Description:\n\nScreenshot To Prompt helps agents analyze UI screenshots, extract page structure, states, text, and interactions, and produce implementation prompts for coding agents.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[z-zihan](https://clawhub.ai/user/z-zihan)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers 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.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Screenshots may contain private UI text, internal product details, or sensitive interface data that can be reproduced in generated prompts.\n\nMitigation: Review and redact screenshots and generated prompts before sending them onward.\n\nRisk: Low-quality or ambiguous screenshots can lead to uncertain page-structure analysis or misleading implementation guidance.\n\nMitigation: Use clearer screenshots when possible and verify any sections the skill marks as uncertain before implementation.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/z-zihan/skills/screenshot-to-prompt)\n- [Project homepage](https://github.com/z-Zihan/awesome-skills)\n\n## Skill Output:\n\n**Output Type(s):** [Text, Markdown, Guidance]\n\n**Output Format:** [Markdown response with structured screenshot analysis and a copyable coding-agent prompt]\n\n**Output Parameters:** [1D]\n\n**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.]\n\n## Skill Version(s):\n\n2.0.0 (source: frontmatter and server release evidence)\n\n## Ethical Considerations:\n\nUsers 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.\n\nArchive v0.3.0: 2 files, 8605 bytes\n\nFiles: SKILL.md (20410b), _meta.json (139b)\n\nFile v0.3.0:SKILL.md\n\n---\nname: screenshot-to-prompt\nversion: \"1.2.0\"\nhomepage: https://github.com/z-Zihan/awesome-skills\ndescription: >\n  截图理解 + 页面结构抽取 + 实现 prompt 生成器。\n  输入页面截图，输出结构化识别结果和可直接发给 coding agent 的实现 prompt。\n  触发：用户发截图说\"帮我分析这个页面\"、\"生成实现 prompt\"、\"页面结构抽取\"、\n  \"把这个页面转成 prompt\"、\"screenshot to prompt\"、\"截图转实现\"。\n  NOT for: 直接写代码（除非用户明确要求）、业务分析、产品方案撰写、设计稿评审。\n---\n\n# 技能：Screenshot → Coding Agent Prompt\n\n## 语言规则\n\n**检测用户使用的语言，全程使用同一语言输出。** 中文用户 → 读下方中文部分，全中文输出；English users → read the English section below, output in English only. 技术术语（UI、prompt、coding agent 等）保留原文即可。\n\n---\n\n# 中文版\n\n根据用户提供的页面截图，识别页面结构、组件层级、文案字段、状态与交互，并生成一份可以直接发送给 coding agent 的实现 prompt。\n\n核心链路：\n\n截图理解 → 页面结构抽取 → 状态识别 → 实现 prompt 生成\n\n这是一个：\n- 截图理解助手\n- 页面结构抽取器\n- 实现 Prompt 生成器\n\n不是：\n- 产品方案生成器\n- 业务分析器\n- 完整代码生成器\n\n---\n\n# 核心目标\n\n用户给一张图后，稳定输出：\n\n1. 截图结构识别结果\n2. 一份可直接发送给 coding agent 的实现 prompt\n\n重点帮助 coding agent 理解：\n- 页面怎么搭\n- 区块怎么拆\n- 状态怎么处理\n- UI 应该做到什么程度\n\n而不是扩展业务背景。\n\n---\n\n# 输入\n\n用户可能提供：\n- 单张页面截图\n- 多张状态截图\n- 局部区域截图\n- 少量补充要求\n\n例如：\n- 只关注这个区域\n- 只抽页面结构\n- 公共结构已经有了\n- 不要重复 layout\n- 先只搭骨架\n- 可以自由发挥 UI\n- 有 Figma，需要尽量还原\n- 优先使用项目 UI 库\n\n---\n\n# 异常处理\n\n以下情况需要主动澄清或降级处理，而非盲目执行。\n\n## 无截图\n\n- 主动询问用户提供截图\n- 不可凭文字描述编造页面结构\n- 如果用户想用 URL 或描述代替截图，提示截图效果最佳\n\n## 截图模糊 / 模糊请求\n\n- 截图质量低导致关键细节不可辨时：识别可见部分，明确标注不确定区域\n- 用户请求模糊（如\"帮我搞一下\"）且无截图时：要求补充截图和具体需求\n\n## 矛盾请求\n\n- 指出矛盾点并请求用户澄清\n  - 例：用户同时要求\"高保真还原\"和\"自由发挥 UI\" → 提示两者冲突，请确认优先级\n\n## 图像分析能力不可用\n\n- 当前环境无 vision model 或图像分析工具不可用时：明确告知用户\"当前环境不支持图像分析\"\n- 替代方案：建议用户将截图中的 UI 元素文字描述出来，基于文字描述生成 prompt\n\n## 图片分析失败\n\n- 如果无法识别截图内容：明确告知用户并建议提供更清晰的截图或补充文字描述\n- 部分识别成功时：输出已识别部分，标注无法识别的区域\n\n---\n\n# 工作流程\n\n收到截图后，自动完成以下步骤。\n\n## 1. 页面结构识别\n\n识别页面的信息架构与区块关系：\n- 页面整体布局\n- 左右 / 上下结构\n- 卡片区块\n- 栅格结构\n- 内容分层\n- 主次区域\n- 区块嵌套关系\n\n识别常见模块：\n- 表单\n- 表格\n- 列表\n- Tabs、Modal / Drawer\n- 筛选区\n- 上传区\n- 统计区\n- Footer Action Bar、Empty State、Stepper、Collapse\n\n---\n\n## 2. 组件识别\n\n识别页面中的 UI 组件：\n- input、select、checkbox、radio、switch\n- date picker、table、pagination、upload\n- button、dropdown、tooltip、tabs\n- card、tag、badge、modal、drawer\n- alert、progress、skeleton\n\n需要识别：\n- 组件类型\n- 组件层级\n- 主次关系\n- 可复用区块\n\n---\n\n## 3. 文案与字段识别\n\n提取截图中的：\n- 页面标题\n- tab 名称\n- 表单字段\n- 表格列名\n- 按钮文案\n- placeholder、tooltip\n- 提示文案\n- 标签文本\n- 汇总信息\n- 状态文本\n\n不要凭空补全文案。\n\n---\n\n## 4. 状态与交互识别\n\n识别：\n- 当前激活项\n- selected 状态\n- disabled 状态\n- loading 状态\n- empty 状态\n- error 状态\n- success 状态\n- 展开 / 收起\n- 弹窗开启状态\n- 行高亮\n- 条件展示内容\n\n允许轻度合理推断，详见下方「合理推断边界」表。**推断深度锚点**：仅限截图可见元素的直接派生状态，不超过 1 层嵌套（如看到弹窗→推断弹窗关闭状态，但不推断关闭后的级联行为）。\n\n---\n\n## 5. 多图状态归并\n\n如果用户提供多张截图：\n\n需要：\n- 合并公共结构\n- 抽取状态差异\n- 识别状态切换关系\n- 避免重复描述\n\n统一整理：\n- 默认态\n- hover 态\n- selected 态\n- disabled 态\n- loading 态\n- empty 态\n- error 态\n- success 态\n- 展开态\n- 编辑态\n\n重点关注：\n- 哪些区域变化\n- 哪些组件变化\n- 哪些状态联动\n\n---\n\n## 6. 布局与视觉层级\n\n识别：\n- 主视觉区域\n- 主操作区域\n- 固定区域\n- 滚动区域\n- 自适应区域\n- 内容伸缩关系\n- 信息优先级\n- 页面留白趋势\n\n帮助 coding agent 即使没有设计稿，也能合理组织页面结构和视觉层级。\n\n---\n\n## 7. 可复用区块识别\n\n识别适合组件化的区域：\n- 筛选区\n- 表格工具栏\n- 列表项\n- 统计卡片\n- Footer Action Bar\n- 空状态组件\n- 上传区域\n- 弹窗内容区\n\n帮助 coding agent 做合理组件拆分。\n\n---\n\n## 8. 实现意图抽取\n\n将截图翻译成实现导向描述：\n\n✅ 好的描述：\n- 数据查询列表页，顶部为筛选区，中间为表格区域，底部包含分页\n- 多步骤编辑页面，左侧为步骤导航，右侧为表单内容区\n- 带统计卡片和列表区域的仪表盘页面\n\n❌ 不好的描述：\n- 这是一个后台页面\n- 这是一个管理系统\n- 这是一个业务页面\n\n重点：帮助 coding agent 理解\"页面应该怎么实现\"。\n\n---\n\n# UI 策略\n\n根据用户要求选择策略。用户未明确指定时，默认使用策略 A（骨架模式）。\n\n选择依据：\n- 用户提到\"先搭骨架\" / \"不要求精细\" → 策略 A\n- 用户提到\"自由发挥\" / \"优化视觉\" / \"可正式使用\" → 策略 B\n- 用户提到\"Figma\" / \"高还原\" / \"尽量还原\" → 策略 C\n\n---\n\n## 策略 A：骨架模式\n\n适用于：\n- 没有设计稿\n- 先搭结构\n- 不要求精细 UI\n\n要求：\n- 先实现页面骨架\n- 重点完成结构与区块划分\n- 完成基础交互\n- 样式保持简洁清晰\n- 不要求高保真\n- 后续可继续精修\n\n## 策略 B：自由发挥 UI\n\n适用于：\n- 没有设计稿\n- 允许优化视觉\n- 页面需要可正式使用\n\n要求：\n- 在截图结构基础上优化 UI\n- 不偏离截图结构\n- 优先复用项目 UI 组件库\n- 保持现代、统一、简洁\n- 状态完整\n- 留白与层级合理\n\n## 策略 C：设计稿还原\n\n适用于：\n- 用户提供 Figma\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\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-\n-\n\n---\n\n### 实现意图\n\n用 2~5 句话总结这个页面主要需要实现什么。\n\n---\n\n## 第二部分：可直接发给 coding agent 的 prompt\n\nprompt 必须：\n- 可直接复制\n- 偏工程实现\n- 面向页面搭建\n- 不空泛\n- 不扩展无关业务\n\n### Prompt 模板\n\n```md\n你需要根据截图实现一个页面/页面局部区域。\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- 保持代码可维护\n```\n\n---\n---\n\n# English Version\n\nGiven a user-provided page screenshot, recognize the page structure, component hierarchy, text content, states, and interactions, then generate a ready-to-use implementation prompt that can be sent directly to a coding agent.\n\nCore pipeline:\n\nScreenshot Understanding → Page Structure Extraction → State Recognition → Implementation Prompt Generation\n\nThis is a:\n- Screenshot understanding assistant\n- Page structure extractor\n- Implementation prompt generator\n\nNOT:\n- Product proposal generator\n- Business analyzer\n- Full code generator\n\n---\n\n# Core Objective\n\nAfter the user provides a screenshot, stably output:\n\n1. Screenshot structure recognition results\n2. A ready-to-use implementation prompt for coding agents\n\nFocus on helping the coding agent understand:\n- How to build the page\n- How to split sections\n- How to handle states\n- What level of UI polish is expected\n\nRather than expanding on business context.\n\n---\n\n# Input\n\nThe user may provide:\n- A single page screenshot\n- Multiple state screenshots\n- A partial area screenshot\n- A few supplementary requirements\n\nExamples:\n- Only focus on this area\n- Only extract the page structure\n- The common layout already exists\n- Don't repeat the layout\n- Just build the skeleton first\n- Feel free to design the UI\n- I have Figma, try to match it\n- Prefer the project's UI library\n\n---\n\n# Edge Cases\n\nThe following cases require proactive clarification or graceful degradation instead of blind execution.\n\n## No Screenshot Provided\n\n- Proactively ask the user to provide a screenshot\n- Do NOT fabricate page structure from text alone\n- If the user wants to use a URL or description instead, note that screenshots work best\n\n## Unclear Screenshot / Unclear Request\n\n- When image quality is too low to identify key details: recognize what's visible, explicitly mark uncertain areas\n- When the request is vague (e.g., \"just do it\") and no screenshot is provided: ask for a screenshot and specific requirements\n\n## Contradictory Requirements\n\n- Point out contradictions and ask the user to clarify\n  - E.g., user requests both \"high-fidelity restoration\" and \"free UI design\" → note the conflict and ask to confirm priority\n\n## Image Analysis Failure\n\n- If screenshot content cannot be recognized: inform the user and suggest providing a clearer screenshot or supplementary text description\n- When partially recognized: output recognized parts and mark unrecognized areas\n\n## Vision Model Unavailable\n\n- If current environment lacks vision model or image analysis tools: inform user \"Current environment does not support image analysis\"\n- Alternative: suggest user describe UI elements from screenshot in text, generate prompt based on text description\n\n---\n\n# Workflow\n\nAfter receiving a screenshot, automatically complete the following steps.\n\n## 1. Page Structure Recognition\n\nRecognize the information architecture and block relationships:\n- Overall page layout\n- Left-right / top-bottom structure\n- Card blocks\n- Grid structure\n- Content layering\n- Primary and secondary areas\n- Block nesting relationships\n\nRecognize common modules:\n- Forms\n- Tables\n- Lists\n- Tabs, Modal / Drawer\n- Filter area\n- Upload area\n- Statistics area\n- Footer Action Bar, Empty State, Stepper, Collapse\n\n---\n\n## 2. Component Recognition\n\nRecognize UI components in the screenshot:\n- input, select, checkbox, radio, switch\n- date picker, table, pagination, upload\n- button, dropdown, tooltip, tabs\n- card, tag, badge, modal, drawer\n- alert, progress, skeleton\n\nIdentify:\n- Component type\n- Component hierarchy\n- Primary/secondary relationships\n- Reusable blocks\n\n---\n\n## 3. Text & Field Recognition\n\nExtract from the screenshot:\n- Page title\n- Tab names\n- Form fields\n- Table column headers\n- Button text\n- placeholder, tooltip\n- Hint/description text\n- Label text\n- Summary information\n- Status text\n\nDo NOT fabricate text that isn't visible in the screenshot.\n\n---\n\n## 4. State & Interaction Recognition\n\nRecognize:\n- Active item\n- Selected state\n- Disabled state\n- Loading state\n- Empty state\n- Error state\n- Success state\n- Expanded/collapsed\n- Modal open state\n- Row highlight\n- Conditional content\n\nAllowed lightweight reasonable inference, see the \"Reasonable Inference Boundaries\" table below.\n\n---\n\n## 5. Multi-Image State Merging\n\nIf the user provides multiple screenshots:\n\nRequired:\n- Merge common structures\n- Extract state differences\n- Identify state transition relationships\n- Avoid duplicate descriptions\n\nConsolidate:\n- Default state\n- Hover state\n- Selected state\n- Disabled state\n- Loading state\n- Empty state\n- Error state\n- Success state\n- Expanded state\n- Edit state\n\nFocus on:\n- Which areas changed\n- Which components changed\n- Which states are linked\n\n---\n\n## 6. Layout & Visual Hierarchy\n\nRecognize:\n- Primary visual area\n- Primary action area\n- Fixed areas\n- Scrollable areas\n- Adaptive areas\n- Content stretch relationships\n- Information priority\n- Whitespace trends\n\nHelp the coding agent organize page structure and visual hierarchy reasonably, even without a design mockup.\n\n---\n\n## 7. Reusable Block Recognition\n\nIdentify areas suitable for componentization:\n- Filter area\n- Table toolbar\n- List item\n- Statistics card\n- Footer Action Bar\n- Empty state component\n- Upload area\n- Modal content area\n\nHelp the coding agent make reasonable component splits.\n\n---\n\n## 8. Implementation Intent Extraction\n\nTranslate the screenshot into implementation-oriented descriptions:\n\n✅ Good descriptions:\n- Data query list page, top is filter area, middle is table area, bottom includes pagination\n- Multi-step editing page, left is step navigation, right is form content area\n- Dashboard page with statistics cards and list area\n\n❌ Bad descriptions:\n- This is a backend page\n- This is a management system\n- This is a business page\n\nFocus: Help the coding agent understand \"how should this page be implemented\".\n\n---\n\n# UI Strategy\n\nSelect strategy based on user requirements. When user doesn't specify, default to Strategy A (Skeleton Mode).\n\nSelection criteria:\n- User mentions \"skeleton first\" / \"no need for fine UI\" → Strategy A\n- User mentions \"free design\" / \"optimize visuals\" / \"production-ready\" → Strategy B\n- User mentions \"Figma\" / \"high fidelity\" / \"match closely\" → Strategy C\n\n---\n\n## Strategy A: Skeleton Mode\n\nFor:\n- No design mockup\n- Build structure first\n- High-fidelity UI not required\n\nRequirements:\n- Implement the page skeleton first\n- Focus on structure and block division\n- Complete basic interactions\n- Keep styles clean and simple\n- High fidelity not required\n- Can be refined later\n\n## Strategy B: Free UI Design\n\nFor:\n- No design mockup\n- UI optimization allowed\n- Page needs to be production-ready\n\nRequirements:\n- Optimize UI based on the screenshot structure\n- Don't deviate from the screenshot structure\n- Prefer reusing the project's UI component library\n- Keep it modern, unified, and clean\n- Complete state support\n- Reasonable whitespace and hierarchy\n\n## Strategy C: Design Restoration\n\nFor:\n- User provides Figma\n- User requests high fidelity\n\nRequirements:\n- Match the design as closely as possible\n- Keep layout, spacing, and hierarchy consistent\n- Prefer reusing the design system\n- Keep component conventions unified\n- Prioritize visual consistency\n\n---\n\n# Reasonable Inference Boundaries\n\n| Allowed | NOT Allowed |\n|---|---|\n| Infer basic state transitions | Fabricate complex business rules |\n| Infer basic form validation | Add complete new modules without basis |\n| Infer list selection behavior | Define non-existent API logic |\n| Infer block priority relationships | Expand page beyond the screenshot |\n| Infer basic linkage relationships | Define system types without basis |\n\n---\n\n# Output Format\n\nOutput two parts by default.\n\n## Part 1: Screenshot Structure Recognition\n\nUse a structured, engineering-oriented format. Tables are recommended.\n\n### Page Overview\n\n| Item | Content |\n|---|---|\n| Page type | |\n| Layout method | |\n| Page hierarchy | |\n| Fixed areas | |\n| Scrollable areas | |\n\n---\n\n### Block Breakdown\n\n| Block | Components | Text/Fields | Current State | Inferred Interactions |\n|---|---|---|---|---|\n| | | | | |\n\n---\n\n### States & Interactions\n\n-\n-\n\n---\n\n### Implementation Intent\n\nSummarize in 2-5 sentences what this page needs to implement.\n\n---\n\n## Part 2: Prompt for Coding Agent\n\nThe prompt must:\n- Be directly copyable\n- Be implementation-oriented\n- Be focused on page construction\n- Not be vague\n- Not expand into unrelated business\n\n### Prompt Template\n\n```md\nYou 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\n```\n\nFile v0.3.0:_meta.json\n\n{\n  \"ownerId\": \"kn76af6ccjftr7hsds21j60xnn82q1qd\",\n  \"slug\": \"screenshot-to-prompt\",\n  \"version\": \"0.3.0\",\n  \"publishedAt\": 1779091865875\n}\n\nArchive v1.2.1: 2 files, 8605 bytes\n\nFiles: SKILL.md (20410b), _meta.json (139b)\n\nFile v1.2.1:SKILL.md\n\n---\nname: screenshot-to-prompt\nversion: \"1.2.0\"\nhomepage: https://github.com/z-Zihan/awesome-skills\ndescription: >\n  截图理解 + 页面结构抽取 + 实现 prompt 生成器。\n  输入页面截图，输出结构化识别结果和可直接发给 coding agent 的实现 prompt。\n  触发：用户发截图说\"帮我分析这个页面\"、\"生成实现 prompt\"、\"页面结构抽取\"、\n  \"把这个页面转成 prompt\"、\"screenshot to prompt\"、\"截图转实现\"。\n  NOT for: 直接写代码（除非用户明确要求）、业务分析、产品方案撰写、设计稿评审。\n---\n\n# 技能：Screenshot → Coding Agent Prompt\n\n## 语言规则\n\n**检测用户使用的语言，全程使用同一语言输出。** 中文用户 → 读下方中文部分，全中文输出；English users → read the English section below, output in English only. 技术术语（UI、prompt、coding agent 等）保留原文即可。\n\n---\n\n# 中文版\n\n根据用户提供的页面截图，识别页面结构、组件层级、文案字段、状态与交互，并生成一份可以直接发送给 coding agent 的实现 prompt。\n\n核心链路：\n\n截图理解 → 页面结构抽取 → 状态识别 → 实现 prompt 生成\n\n这是一个：\n- 截图理解助手\n- 页面结构抽取器\n- 实现 Prompt 生成器\n\n不是：\n- 产品方案生成器\n- 业务分析器\n- 完整代码生成器\n\n---\n\n# 核心目标\n\n用户给一张图后，稳定输出：\n\n1. 截图结构识别结果\n2. 一份可直接发送给 coding agent 的实现 prompt\n\n重点帮助 coding agent 理解：\n- 页面怎么搭\n- 区块怎么拆\n- 状态怎么处理\n- UI 应该做到什么程度\n\n而不是扩展业务背景。\n\n---\n\n# 输入\n\n用户可能提供：\n- 单张页面截图\n- 多张状态截图\n- 局部区域截图\n- 少量补充要求\n\n例如：\n- 只关注这个区域\n- 只抽页面结构\n- 公共结构已经有了\n- 不要重复 layout\n- 先只搭骨架\n- 可以自由发挥 UI\n- 有 Figma，需要尽量还原\n- 优先使用项目 UI 库\n\n---\n\n# 异常处理\n\n以下情况需要主动澄清或降级处理，而非盲目执行。\n\n## 无截图\n\n- 主动询问用户提供截图\n- 不可凭文字描述编造页面结构\n- 如果用户想用 URL 或描述代替截图，提示截图效果最佳\n\n## 截图模糊 / 模糊请求\n\n- 截图质量低导致关键细节不可辨时：识别可见部分，明确标注不确定区域\n- 用户请求模糊（如\"帮我搞一下\"）且无截图时：要求补充截图和具体需求\n\n## 矛盾请求\n\n- 指出矛盾点并请求用户澄清\n  - 例：用户同时要求\"高保真还原\"和\"自由发挥 UI\" → 提示两者冲突，请确认优先级\n\n## 图像分析能力不可用\n\n- 当前环境无 vision model 或图像分析工具不可用时：明确告知用户\"当前环境不支持图像分析\"\n- 替代方案：建议用户将截图中的 UI 元素文字描述出来，基于文字描述生成 prompt\n\n## 图片分析失败\n\n- 如果无法识别截图内容：明确告知用户并建议提供更清晰的截图或补充文字描述\n- 部分识别成功时：输出已识别部分，标注无法识别的区域\n\n---\n\n# 工作流程\n\n收到截图后，自动完成以下步骤。\n\n## 1. 页面结构识别\n\n识别页面的信息架构与区块关系：\n- 页面整体布局\n- 左右 / 上下结构\n- 卡片区块\n- 栅格结构\n- 内容分层\n- 主次区域\n- 区块嵌套关系\n\n识别常见模块：\n- 表单\n- 表格\n- 列表\n- Tabs、Modal / Drawer\n- 筛选区\n- 上传区\n- 统计区\n- Footer Action Bar、Empty State、Stepper、Collapse\n\n---\n\n## 2. 组件识别\n\n识别页面中的 UI 组件：\n- input、select、checkbox、radio、switch\n- date picker、table、pagination、upload\n- button、dropdown、tooltip、tabs\n- card、tag、badge、modal、drawer\n- alert、progress、skeleton\n\n需要识别：\n- 组件类型\n- 组件层级\n- 主次关系\n- 可复用区块\n\n---\n\n## 3. 文案与字段识别\n\n提取截图中的：\n- 页面标题\n- tab 名称\n- 表单字段\n- 表格列名\n- 按钮文案\n- placeholder、tooltip\n- 提示文案\n- 标签文本\n- 汇总信息\n- 状态文本\n\n不要凭空补全文案。\n\n---\n\n## 4. 状态与交互识别\n\n识别：\n- 当前激活项\n- selected 状态\n- disabled 状态\n- loading 状态\n- empty 状态\n- error 状态\n- success 状态\n- 展开 / 收起\n- 弹窗开启状态\n- 行高亮\n- 条件展示内容\n\n允许轻度合理推断，详见下方「合理推断边界」表。**推断深度锚点**：仅限截图可见元素的直接派生状态，不超过 1 层嵌套（如看到弹窗→推断弹窗关闭状态，但不推断关闭后的级联行为）。\n\n---\n\n## 5. 多图状态归并\n\n如果用户提供多张截图：\n\n需要：\n- 合并公共结构\n- 抽取状态差异\n- 识别状态切换关系\n- 避免重复描述\n\n统一整理：\n- 默认态\n- hover 态\n- selected 态\n- disabled 态\n- loading 态\n- empty 态\n- error 态\n- success 态\n- 展开态\n- 编辑态\n\n重点关注：\n- 哪些区域变化\n- 哪些组件变化\n- 哪些状态联动\n\n---\n\n## 6. 布局与视觉层级\n\n识别：\n- 主视觉区域\n- 主操作区域\n- 固定区域\n- 滚动区域\n- 自适应区域\n- 内容伸缩关系\n- 信息优先级\n- 页面留白趋势\n\n帮助 coding agent 即使没有设计稿，也能合理组织页面结构和视觉层级。\n\n---\n\n## 7. 可复用区块识别\n\n识别适合组件化的区域：\n- 筛选区\n- 表格工具栏\n- 列表项\n- 统计卡片\n- Footer Action Bar\n- 空状态组件\n- 上传区域\n- 弹窗内容区\n\n帮助 coding agent 做合理组件拆分。\n\n---\n\n## 8. 实现意图抽取\n\n将截图翻译成实现导向描述：\n\n✅ 好的描述：\n- 数据查询列表页，顶部为筛选区，中间为表格区域，底部包含分页\n- 多步骤编辑页面，左侧为步骤导航，右侧为表单内容区\n- 带统计卡片和列表区域的仪表盘页面\n\n❌ 不好的描述：\n- 这是一个后台页面\n- 这是一个管理系统\n- 这是一个业务页面\n\n重点：帮助 coding agent 理解\"页面应该怎么实现\"。\n\n---\n\n# UI 策略\n\n根据用户要求选择策略。用户未明确指定时，默认使用策略 A（骨架模式）。\n\n选择依据：\n- 用户提到\"先搭骨架\" / \"不要求精细\" → 策略 A\n- 用户提到\"自由发挥\" / \"优化视觉\" / \"可正式使用\" → 策略 B\n- 用户提到\"Figma\" / \"高还原\" / \"尽量还原\" → 策略 C\n\n---\n\n## 策略 A：骨架模式\n\n适用于：\n- 没有设计稿\n- 先搭结构\n- 不要求精细 UI\n\n要求：\n- 先实现页面骨架\n- 重点完成结构与区块划分\n- 完成基础交互\n- 样式保持简洁清晰\n- 不要求高保真\n- 后续可继续精修\n\n## 策略 B：自由发挥 UI\n\n适用于：\n- 没有设计稿\n- 允许优化视觉\n- 页面需要可正式使用\n\n要求：\n- 在截图结构基础上优化 UI\n- 不偏离截图结构\n- 优先复用项目 UI 组件库\n- 保持现代、统一、简洁\n- 状态完整\n- 留白与层级合理\n\n## 策略 C：设计稿还原\n\n适用于：\n- 用户提供 Figma\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\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-\n-\n\n---\n\n### 实现意图\n\n用 2~5 句话总结这个页面主要需要实现什么。\n\n---\n\n## 第二部分：可直接发给 coding agent 的 prompt\n\nprompt 必须：\n- 可直接复制\n- 偏工程实现\n- 面向页面搭建\n- 不空泛\n- 不扩展无关业务\n\n### Prompt 模板\n\n```md\n你需要根据截图实现一个页面/页面局部区域。\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- 保持代码可维护\n```\n\n---\n---\n\n# English Version\n\nGiven a user-provided page screenshot, recognize the page structure, component hierarchy, text content, states, and interactions, then generate a ready-to-use implementation prompt that can be sent directly to a coding agent.\n\nCore pipeline:\n\nScreenshot Understanding → Page Structure Extraction → State Recognition → Implementation Prompt Generation\n\nThis is a:\n- Screenshot understanding assistant\n- Page structure extractor\n- Implementation prompt generator\n\nNOT:\n- Product proposal generator\n- Business analyzer\n- Full code generator\n\n---\n\n# Core Objective\n\nAfter the user provides a screenshot, stably output:\n\n1. Screenshot structure recognition results\n2. A ready-to-use implementation prompt for coding agents\n\nFocus on helping the coding agent understand:\n- How to build the page\n- How to split sections\n- How to handle states\n- What level of UI polish is expected\n\nRather than expanding on business context.\n\n---\n\n# Input\n\nThe user may provide:\n- A single page screenshot\n- Multiple state screenshots\n- A partial area screenshot\n- A few supplementary requirements\n\nExamples:\n- Only focus on this area\n- Only extract the page structure\n- The common layout already exists\n- Don't repeat the layout\n- Just build the skeleton first\n- Feel free to design the UI\n- I have Figma, try to match it\n- Prefer the project's UI library\n\n---\n\n# Edge Cases\n\nThe following cases require proactive clarification or graceful degradation instead of blind execution.\n\n## No Screenshot Provided\n\n- Proactively ask the user to provide a screenshot\n- Do NOT fabricate page structure from text alone\n- If the user wants to use a URL or description instead, note that screenshots work best\n\n## Unclear Screenshot / Unclear Request\n\n- When image quality is too low to identify key details: recognize what's visible, explicitly mark uncertain areas\n- When the request is vague (e.g., \"just do it\") and no screenshot is provided: ask for a screenshot and specific requirements\n\n## Contradictory Requirements\n\n- Point out contradictions and ask the user to clarify\n  - E.g., user requests both \"high-fidelity restoration\" and \"free UI design\" → note the conflict and ask to confirm priority\n\n## Image Analysis Failure\n\n- If screenshot content cannot be recognized: inform the user and suggest providing a clearer screenshot or supplementary text description\n- When partially recognized: output recognized parts and mark unrecognized areas\n\n## Vision Model Unavailable\n\n- If current environment lacks vision model or image analysis tools: inform user \"Current environment does not support image analysis\"\n- Alternative: suggest user describe UI elements from screenshot in text, generate prompt based on text description\n\n---\n\n# Workflow\n\nAfter receiving a screenshot, automatically complete the following steps.\n\n## 1. Page Structure Recognition\n\nRecognize the information architecture and block relationships:\n- Overall page layout\n- Left-right / top-bottom structure\n- Card blocks\n- Grid structure\n- Content layering\n- Primary and secondary areas\n- Block nesting relationships\n\nRecognize common modules:\n- Forms\n- Tables\n- Lists\n- Tabs, Modal / Drawer\n- Filter area\n- Upload area\n- Statistics area\n- Footer Action Bar, Empty State, Stepper, Collapse\n\n---\n\n## 2. Component Recognition\n\nRecognize UI components in the screenshot:\n- input, select, checkbox, radio, switch\n- date picker, table, pagination, upload\n- button, dropdown, tooltip, tabs\n- card, tag, badge, modal, drawer\n- alert, progress, skeleton\n\nIdentify:\n- Component type\n- Component hierarchy\n- Primary/secondary relationships\n- Reusable blocks\n\n---\n\n## 3. Text & Field Recognition\n\nExtract from the screenshot:\n- Page title\n- Tab names\n- Form fields\n- Table column headers\n- Button text\n- placeholder, tooltip\n- Hint/description text\n- Label text\n- Summary information\n- Status text\n\nDo NOT fabricate text that isn't visible in the screenshot.\n\n---\n\n## 4. State & Interaction Recognition\n\nRecognize:\n- Active item\n- Selected state\n- Disabled state\n- Loading state\n- Empty state\n- Error state\n- Success state\n- Expanded/collapsed\n- Modal open state\n- Row highlight\n- Conditional content\n\nAllowed lightweight reasonable inference, see the \"Reasonable Inference Boundaries\" table below.\n\n---\n\n## 5. Multi-Image State Merging\n\nIf the user provides multiple screenshots:\n\nRequired:\n- Merge common structures\n- Extract state differences\n- Identify state transition relationships\n- Avoid duplicate descriptions\n\nConsolidate:\n- Default state\n- Hover state\n- Selected state\n- Disabled state\n- Loading state\n- Empty state\n- Error state\n- Success state\n- Expanded state\n- Edit state\n\nFocus on:\n- Which areas changed\n- Which components changed\n- Which states are linked\n\n---\n\n## 6. Layout & Visual Hierarchy\n\nRecognize:\n- Primary visual area\n- Primary action area\n- Fixed areas\n- Scrollable areas\n- Adaptive areas\n- Content stretch relationships\n- Information priority\n- Whitespace trends\n\nHelp the coding agent organize page structure and visual hierarchy reasonably, even without a design mockup.\n\n---\n\n## 7. Reusable Block Recognition\n\nIdentify areas suitable for componentization:\n- Filter area\n- Table toolbar\n- List item\n- Statistics card\n- Footer Action Bar\n- Empty state component\n- Upload area\n- Modal content area\n\nHelp the coding agent make reasonable component splits.\n\n---\n\n## 8. Implementation Intent Extraction\n\nTranslate the screenshot into implementation-oriented descriptions:\n\n✅ Good descriptions:\n- Data query list page, top is filter area, middle is table area, bottom includes pagination\n- Multi-step editing page, left is step navigation, right is form content area\n- Dashboard page with statistics cards and list area\n\n❌ Bad descriptions:\n- This is a backend page\n- This is a management system\n- This is a business page\n\nFocus: Help the coding agent understand \"how should this page be implemented\".\n\n---\n\n# UI Strategy\n\nSelect strategy based on user requirements. When user doesn't specify, default to Strategy A (Skeleton Mode).\n\nSelection criteria:\n- User mentions \"skeleton first\" / \"no need for fine UI\" → Strategy A\n- User mentions \"free design\" / \"optimize visuals\" / \"production-ready\" → Strategy B\n- User mentions \"Figma\" / \"high fidelity\" / \"match closely\" → Strategy C\n\n---\n\n## Strategy A: Skeleton Mode\n\nFor:\n- No design mockup\n- Build structure first\n- High-fidelity UI not required\n\nRequirements:\n- Implement the page skeleton first\n- Focus on structure and block division\n- Complete basic interactions\n- Keep styles clean and simple\n- High fidelity not required\n- Can be refined later\n\n## Strategy B: Free UI Design\n\nFor:\n- No design mockup\n- UI optimization allowed\n- Page needs to be production-ready\n\nRequirements:\n- Optimize UI based on the screenshot structure\n- Don't deviate from the screenshot structure\n- Prefer reusing the project's UI component library\n- Keep it modern, unified, and clean\n- Complete state support\n- Reasonable whitespace and hierarchy\n\n## Strategy C: Design Restoration\n\nFor:\n- User provides Figma\n- User requests high fidelity\n\nRequirements:\n- Match the design as closely as possible\n- Keep layout, spacing, and hierarchy consistent\n- Prefer reusing the design system\n- Keep component conventions unified\n- Prioritize visual consistency\n\n---\n\n# Reasonable Inference Boundaries\n\n| Allowed | NOT Allowed |\n|---|---|\n| Infer basic state transitions | Fabricate complex business rules |\n| Infer basic form validation | Add complete new modules without basis |\n| Infer list selection behavior | Define non-existent API logic |\n| Infer block priority relationships | Expand page beyond the screenshot |\n| Infer basic linkage relationships | Define system types without basis |\n\n---\n\n# Output Format\n\nOutput two parts by default.\n\n## Part 1: Screenshot Structure Recognition\n\nUse a structured, engineering-oriented format. Tables are recommended.\n\n### Page Overview\n\n| Item | Content |\n|---|---|\n| Page type | |\n| Layout method | |\n| Page hierarchy | |\n| Fixed areas | |\n| Scrollable areas | |\n\n---\n\n### Block Breakdown\n\n| Block | Components | Text/Fields | Current State | Inferred Interactions |\n|---|---|---|---|---|\n| | | | | |\n\n---\n\n### States & Interactions\n\n-\n-\n\n---\n\n### Implementation Intent\n\nSummarize in 2-5 sentences what this page needs to implement.\n\n---\n\n## Part 2: Prompt for Coding Agent\n\nThe prompt must:\n- Be directly copyable\n- Be implementation-oriented\n- Be focused on page construction\n- Not be vague\n- Not expand into unrelated business\n\n### Prompt Template\n\n```md\nYou 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\n```\n\nFile v1.2.1:_meta.json\n\n{\n  \"ownerId\": \"kn76af6ccjftr7hsds21j60xnn82q1qd\",\n  \"slug\": \"screenshot-to-prompt\",\n  \"version\": \"1.2.1\",\n  \"publishedAt\": 1779090367430\n}\n\nArchive v1.2.0: 2 files, 8605 bytes\n\nFiles: SKILL.md (20410b), _meta.json (139b)\n\nFile v1.2.0:SKILL.md\n\n---\nname: screenshot-to-prompt\nversion: \"1.2.0\"\nhomepage: https://github.com/z-Zihan/awesome-skills\ndescription: >\n  截图理解 + 页面结构抽取 + 实现 prompt 生成器。\n  输入页面截图，输出结构化识别结果和可直接发给 coding agent 的实现 prompt。\n  触发：用户发截图说\"帮我分析这个页面\"、\"生成实现 prompt\"、\"页面结构抽取\"、\n  \"把这个页面转成 prompt\"、\"screenshot to prompt\"、\"截图转实现\"。\n  NOT for: 直接写代码（除非用户明确要求）、业务分析、产品方案撰写、设计稿评审。\n---\n\n# 技能：Screenshot → Coding Agent Prompt\n\n## 语言规则\n\n**检测用户使用的语言，全程使用同一语言输出。** 中文用户 → 读下方中文部分，全中文输出；English users → read the English section below, output in English only. 技术术语（UI、prompt、coding agent 等）保留原文即可。\n\n---\n\n# 中文版\n\n根据用户提供的页面截图，识别页面结构、组件层级、文案字段、状态与交互，并生成一份可以直接发送给 coding agent 的实现 prompt。\n\n核心链路：\n\n截图理解 → 页面结构抽取 → 状态识别 → 实现 prompt 生成\n\n这是一个：\n- 截图理解助手\n- 页面结构抽取器\n- 实现 Prompt 生成器\n\n不是：\n- 产品方案生成器\n- 业务分析器\n- 完整代码生成器\n\n---\n\n# 核心目标\n\n用户给一张图后，稳定输出：\n\n1. 截图结构识别结果\n2. 一份可直接发送给 coding agent 的实现 prompt\n\n重点帮助 coding agent 理解：\n- 页面怎么搭\n- 区块怎么拆\n- 状态怎么处理\n- UI 应该做到什么程度\n\n而不是扩展业务背景。\n\n---\n\n# 输入\n\n用户可能提供：\n- 单张页面截图\n- 多张状态截图\n- 局部区域截图\n- 少量补充要求\n\n例如：\n- 只关注这个区域\n- 只抽页面结构\n- 公共结构已经有了\n- 不要重复 layout\n- 先只搭骨架\n- 可以自由发挥 UI\n- 有 Figma，需要尽量还原\n- 优先使用项目 UI 库\n\n---\n\n# 异常处理\n\n以下情况需要主动澄清或降级处理，而非盲目执行。\n\n## 无截图\n\n- 主动询问用户提供截图\n- 不可凭文字描述编造页面结构\n- 如果用户想用 URL 或描述代替截图，提示截图效果最佳\n\n## 截图模糊 / 模糊请求\n\n- 截图质量低导致关键细节不可辨时：识别可见部分，明确标注不确定区域\n- 用户请求模糊（如\"帮我搞一下\"）且无截图时：要求补充截图和具体需求\n\n## 矛盾请求\n\n- 指出矛盾点并请求用户澄清\n  - 例：用户同时要求\"高保真还原\"和\"自由发挥 UI\" → 提示两者冲突，请确认优先级\n\n## 图像分析能力不可用\n\n- 当前环境无 vision model 或图像分析工具不可用时：明确告知用户\"当前环境不支持图像分析\"\n- 替代方案：建议用户将截图中的 UI 元素文字描述出来，基于文字描述生成 prompt\n\n## 图片分析失败\n\n- 如果无法识别截图内容：明确告知用户并建议提供更清晰的截图或补充文字描述\n- 部分识别成功时：输出已识别部分，标注无法识别的区域\n\n---\n\n# 工作流程\n\n收到截图后，自动完成以下步骤。\n\n## 1. 页面结构识别\n\n识别页面的信息架构与区块关系：\n- 页面整体布局\n- 左右 / 上下结构\n- 卡片区块\n- 栅格结构\n- 内容分层\n- 主次区域\n- 区块嵌套关系\n\n识别常见模块：\n- 表单\n- 表格\n- 列表\n- Tabs、Modal / Drawer\n- 筛选区\n- 上传区\n- 统计区\n- Footer Action Bar、Empty State、Stepper、Collapse\n\n---\n\n## 2. 组件识别\n\n识别页面中的 UI 组件：\n- input、select、checkbox、radio、switch\n- date picker、table、pagination、upload\n- button、dropdown、tooltip、tabs\n- card、tag、badge、modal、drawer\n- alert、progress、skeleton\n\n需要识别：\n- 组件类型\n- 组件层级\n- 主次关系\n- 可复用区块\n\n---\n\n## 3. 文案与字段识别\n\n提取截图中的：\n- 页面标题\n- tab 名称\n- 表单字段\n- 表格列名\n- 按钮文案\n- placeholder、tooltip\n- 提示文案\n- 标签文本\n- 汇总信息\n- 状态文本\n\n不要凭空补全文案。\n\n---\n\n## 4. 状态与交互识别\n\n识别：\n- 当前激活项\n- selected 状态\n- disabled 状态\n- loading 状态\n- empty 状态\n- error 状态\n- success 状态\n- 展开 / 收起\n- 弹窗开启状态\n- 行高亮\n- 条件展示内容\n\n允许轻度合理推断，详见下方「合理推断边界」表。**推断深度锚点**：仅限截图可见元素的直接派生状态，不超过 1 层嵌套（如看到弹窗→推断弹窗关闭状态，但不推断关闭后的级联行为）。\n\n---\n\n## 5. 多图状态归并\n\n如果用户提供多张截图：\n\n需要：\n- 合并公共结构\n- 抽取状态差异\n- 识别状态切换关系\n- 避免重复描述\n\n统一整理：\n- 默认态\n- hover 态\n- selected 态\n- disabled 态\n- loading 态\n- empty 态\n- error 态\n- success 态\n- 展开态\n- 编辑态\n\n重点关注：\n- 哪些区域变化\n- 哪些组件变化\n- 哪些状态联动\n\n---\n\n## 6. 布局与视觉层级\n\n识别：\n- 主视觉区域\n- 主操作区域\n- 固定区域\n- 滚动区域\n- 自适应区域\n- 内容伸缩关系\n- 信息优先级\n- 页面留白趋势\n\n帮助 coding agent 即使没有设计稿，也能合理组织页面结构和视觉层级。\n\n---\n\n## 7. 可复用区块识别\n\n识别适合组件化的区域：\n- 筛选区\n- 表格工具栏\n- 列表项\n- 统计卡片\n- Footer Action Bar\n- 空状态组件\n- 上传区域\n- 弹窗内容区\n\n帮助 coding agent 做合理组件拆分。\n\n---\n\n## 8. 实现意图抽取\n\n将截图翻译成实现导向描述：\n\n✅ 好的描述：\n- 数据查询列表页，顶部为筛选区，中间为表格区域，底部包含分页\n- 多步骤编辑页面，左侧为步骤导航，右侧为表单内容区\n- 带统计卡片和列表区域的仪表盘页面\n\n❌ 不好的描述：\n- 这是一个后台页面\n- 这是一个管理系统\n- 这是一个业务页面\n\n重点：帮助 coding agent 理解\"页面应该怎么实现\"。\n\n---\n\n# UI 策略\n\n根据用户要求选择策略。用户未明确指定时，默认使用策略 A（骨架模式）。\n\n选择依据：\n- 用户提到\"先搭骨架\" / \"不要求精细\" → 策略 A\n- 用户提到\"自由发挥\" / \"优化视觉\" / \"可正式使用\" → 策略 B\n- 用户提到\"Figma\" / \"高还原\" / \"尽量还原\" → 策略 C\n\n---\n\n## 策略 A：骨架模式\n\n适用于：\n- 没有设计稿\n- 先搭结构\n- 不要求精细 UI\n\n要求：\n- 先实现页面骨架\n- 重点完成结构与区块划分\n- 完成基础交互\n- 样式保持简洁清晰\n- 不要求高保真\n- 后续可继续精修\n\n## 策略 B：自由发挥 UI\n\n适用于：\n- 没有设计稿\n- 允许优化视觉\n- 页面需要可正式使用\n\n要求：\n- 在截图结构基础上优化 UI\n- 不偏离截图结构\n- 优先复用项目 UI 组件库\n- 保持现代、统一、简洁\n- 状态完整\n- 留白与层级合理\n\n## 策略 C：设计稿还原\n\n适用于：\n- 用户提供 Figma\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\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-\n-\n\n---\n\n### 实现意图\n\n用 2~5 句话总结这个页面主要需要实现什么。\n\n---\n\n## 第二部分：可直接发给 coding agent 的 prompt\n\nprompt 必须：\n- 可直接复制\n- 偏工程实现\n- 面向页面搭建\n- 不空泛\n- 不扩展无关业务\n\n### Prompt 模板\n\n```md\n你需要根据截图实现一个页面/页面局部区域。\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- 保持代码可维护\n```\n\n---\n---\n\n# English Version\n\nGiven a user-provided page screenshot, recognize the page structure, component hierarchy, text content, states, and interactions, then generate a ready-to-use implementation prompt that can be sent directly to a coding agent.\n\nCore pipeline:\n\nScreenshot Understanding → Page Structure Extraction → State Recognition → Implementation Prompt Generation\n\nThis is a:\n- Screenshot understanding assistant\n- Page structure extractor\n- Implementation prompt generator\n\nNOT:\n- Product proposal generator\n- Business analyzer\n- Full code generator\n\n---\n\n# Core Objective\n\nAfter the user provides a screenshot, stably output:\n\n1. Screenshot structure recognition results\n2. A ready-to-use implementation prompt for coding agents\n\nFocus on helping the coding agent understand:\n- How to build the page\n- How to split sections\n- How to handle states\n- What level of UI polish is expected\n\nRather than expanding on business context.\n\n---\n\n# Input\n\nThe user may provide:\n- A single page screenshot\n- Multiple state screenshots\n- A partial area screenshot\n- A few supplementary requirements\n\nExamples:\n- Only focus on this area\n- Only extract the page structure\n- The common layout already exists\n- Don't repeat the layout\n- Just build the skeleton first\n- Feel free to design the UI\n- I have Figma, try to match it\n- Prefer the project's UI library\n\n---\n\n# Edge Cases\n\nThe following cases require proactive clarification or graceful degradation instead of blind execution.\n\n## No Screenshot Provided\n\n- Proactively ask the user to provide a screenshot\n- Do NOT fabricate page structure from text alone\n- If the user wants to use a URL or description instead, note that screenshots work best\n\n## Unclear Screenshot / Unclear Request\n\n- When image quality is too low to identify key details: recognize what's visible, explicitly mark uncertain areas\n- When the request is vague (e.g., \"just do it\") and no screenshot is provided: ask for a screenshot and specific requirements\n\n## Contradictory Requirements\n\n- Point out contradictions and ask the user to clarify\n  - E.g., user requests both \"high-fidelity restoration\" and \"free UI design\" → note the conflict and ask to confirm priority\n\n## Image Analysis Failure\n\n- If screenshot content cannot be recognized: inform the user and suggest providing a clearer screenshot or supplementary text description\n- When partially recognized: output recognized parts and mark unrecognized areas\n\n## Vision Model Unavailable\n\n- If current environment lacks vision model or image analysis tools: inform user \"Current environment does not support image analysis\"\n- Alternative: suggest user describe UI elements from screenshot in text, generate prompt based on text description\n\n---\n\n# Workflow\n\nAfter receiving a screenshot, automatically complete the following steps.\n\n## 1. Page Structure Recognition\n\nRecognize the information architecture and block relationships:\n- Overall page layout\n- Left-right / top-bottom structure\n- Card blocks\n- Grid structure\n- Content layering\n- Primary and secondary areas\n- Block nesting relationships\n\nRecognize common modules:\n- Forms\n- Tables\n- Lists\n- Tabs, Modal / Drawer\n- Filter area\n- Upload area\n- Statistics area\n- Footer Action Bar, Empty State, Stepper, Collapse\n\n---\n\n## 2. Component Recognition\n\nRecognize UI components in the screenshot:\n- input, select, checkbox, radio, switch\n- date picker, table, pagination, upload\n- button, dropdown, tooltip, tabs\n- card, tag, badge, modal, drawer\n- alert, progress, skeleton\n\nIdentify:\n- Component type\n- Component hierarchy\n- Primary/secondary relationships\n- Reusable blocks\n\n---\n\n## 3. Text & Field Recognition\n\nExtract from the screenshot:\n- Page title\n- Tab names\n- Form fields\n- Table column headers\n- Button text\n- placeholder, tooltip\n- Hint/description text\n- Label text\n- Summary information\n- Status text\n\nDo NOT fabricate text that isn't visible in the screenshot.\n\n---\n\n## 4. State & Interaction Recognition\n\nRecognize:\n- Active item\n- Selected state\n- Disabled state\n- Loading state\n- Empty state\n- Error state\n- Success state\n- Expanded/collapsed\n- Modal open state\n- Row highlight\n- Conditional content\n\nAllowed lightweight reasonable inference, see the \"Reasonable Inference Boundaries\" table below.\n\n---\n\n## 5. Multi-Image State Merging\n\nIf the user provides multiple screenshots:\n\nRequired:\n- Merge common structures\n- Extract state differences\n- Identify state transition relationships\n- Avoid duplicate descriptions\n\nConsolidate:\n- Default state\n- Hover state\n- Selected state\n- Disabled state\n- Loading state\n- Empty state\n- Error state\n- Success state\n- Expanded state\n- Edit state\n\nFocus on:\n- Which areas changed\n- Which components changed\n- Which states are linked\n\n---\n\n## 6. Layout & Visual Hierarchy\n\nRecognize:\n- Primary visual area\n- Primary action area\n- Fixed areas\n- Scrollable areas\n- Adaptive areas\n- Content stretch relationships\n- Information priority\n- Whitespace trends\n\nHelp the coding agent organize page structure and visual hierarchy reasonably, even without a design mockup.\n\n---\n\n## 7. Reusable Block Recognition\n\nIdentify areas suitable for componentization:\n- Filter area\n- Table toolbar\n- List item\n- Statistics card\n- Footer Action Bar\n- Empty state component\n- Upload area\n- Modal content area\n\nHelp the coding agent make reasonable component splits.\n\n---\n\n## 8. Implementation Intent Extraction\n\nTranslate the screenshot into implementation-oriented descriptions:\n\n✅ Good descriptions:\n- Data query list page, top is filter area, middle is table area, bottom includes pagination\n- Multi-step editing page, left is step navigation, right is form content area\n- Dashboard page with statistics cards and list area\n\n❌ Bad descriptions:\n- This is a backend page\n- This is a management system\n- This is a business page\n\nFocus: Help the coding agent understand \"how should this page be implemented\".\n\n---\n\n# UI Strategy\n\nSelect strategy based on user requirements. When user doesn't specify, default to Strategy A (Skeleton Mode).\n\nSelection criteria:\n- User mentions \"skeleton first\" / \"no need for fine UI\" → Strategy A\n- User mentions \"free design\" / \"optimize visuals\" / \"production-ready\" → Strategy B\n- User mentions \"Figma\" / \"high fidelity\" / \"match closely\" → Strategy C\n\n---\n\n## Strategy A: Skeleton Mode\n\nFor:\n- No design mockup\n- Build structure first\n- High-fidelity UI not required\n\nRequirements:\n- Implement the page skeleton first\n- Focus on structure and block division\n- Complete basic interactions\n- Keep styles clean and simple\n- High fidelity not required\n- Can be refined later\n\n## Strategy B: Free UI Design\n\nFor:\n- No design mockup\n- UI optimization allowed\n- Page needs to be production-ready\n\nRequirements:\n- Optimize UI based on the screenshot structure\n- Don't deviate from the screenshot structure\n- Prefer reusing the project's UI component library\n- Keep it modern, unified, and clean\n- Complete state support\n- Reasonable whitespace and hierarchy\n\n## Strategy C: Design Restoration\n\nFor:\n- User provides Figma\n- User requests high fidelity\n\nRequirements:\n- Match the design as closely as possible\n- Keep layout, spacing, and hierarchy consistent\n- Prefer reusing the design system\n- Keep component conventions unified\n- Prioritize visual consistency\n\n---\n\n# Reasonable Inference Boundaries\n\n| Allowed | NOT Allowed |\n|---|---|\n| Infer basic state transitions | Fabricate complex business rules |\n| Infer basic form validation | Add complete new modules without basis |\n| Infer list selection behavior | Define non-existent API logic |\n| Infer block priority relationships | Expand page beyond the screenshot |\n| Infer basic linkage relationships | Define system types without basis |\n\n---\n\n# Output Format\n\nOutput two parts by default.\n\n## Part 1: Screenshot Structure Recognition\n\nUse a structured, engineering-oriented format. Tables are recommended.\n\n### Page Overview\n\n| Item | Content |\n|---|---|\n| Page type | |\n| Layout method | |\n| Page hierarchy | |\n| Fixed areas | |\n| Scrollable areas | |\n\n---\n\n### Block Breakdown\n\n| Block | Components | Text/Fields | Current State | Inferred Interactions |\n|---|---|---|---|---|\n| | | | | |\n\n---\n\n### States & Interactions\n\n-\n-\n\n---\n\n### Implementation Intent\n\nSummarize in 2-5 sentences what this page needs to implement.\n\n---\n\n## Part 2: Prompt for Coding Agent\n\nThe prompt must:\n- Be directly copyable\n- Be implementation-oriented\n- Be focused on page construction\n- Not be vague\n- Not expand into unrelated business\n\n### Prompt Template\n\n```md\nYou 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\n```\n\nFile v1.2.0:_meta.json\n\n{\n  \"ownerId\": \"kn76af6ccjftr7hsds21j60xnn82q1qd\",\n  \"slug\": \"screenshot-to-prompt\",\n  \"version\": \"1.2.0\",\n  \"publishedAt\": 1778938528536\n}\n\nArchive v1.1.0: 2 files, 8287 bytes\n\nFiles: SKILL.md (19684b), _meta.json (139b)\n\nFile v1.1.0:SKILL.md\n\n---\nname: screenshot-to-prompt\nversion: \"1.1.0\"\nhomepage: https://github.com/z-Zihan/awesome-skills\ndescription: >\n  截图理解 + 页面结构抽取 + 实现 prompt 生成器。\n  输入页面截图，输出结构化识别结果和可直接发给 coding agent 的实现 prompt。\n  触发：用户发截图说\"帮我分析这个页面\"、\"生成实现 prompt\"、\"页面结构抽取\"、\n  \"把这个页面转成 prompt\"、\"screenshot to prompt\"、\"截图转实现\"。\n  NOT for: 直接写代码（除非用户明确要求）、业务分析、产品方案撰写、设计稿评审。\n---\n\n# 技能：Screenshot → Coding Agent Prompt\n\n## 语言规则\n\n**检测用户使用的语言，全程使用同一语言输出。** 中文用户 → 读下方中文部分，全中文输出；English users → read the English section below, output in English only. 技术术语（UI、prompt、coding agent 等）保留原文即可。\n\n---\n\n# 中文版\n\n根据用户提供的页面截图，识别页面结构、组件层级、文案字段、状态与交互，并生成一份可以直接发送给 coding agent 的实现 prompt。\n\n核心链路：\n\n截图理解 → 页面结构抽取 → 状态识别 → 实现 prompt 生成\n\n这是一个：\n- 截图理解助手\n- 页面结构抽取器\n- 实现 Prompt 生成器\n\n不是：\n- 产品方案生成器\n- 业务分析器\n- 完整代码生成器\n\n---\n\n# 核心目标\n\n用户给一张图后，稳定输出：\n\n1. 截图结构识别结果\n2. 一份可直接发送给 coding agent 的实现 prompt\n\n重点帮助 coding agent 理解：\n- 页面怎么搭\n- 区块怎么拆\n- 状态怎么处理\n- UI 应该做到什么程度\n\n而不是扩展业务背景。\n\n---\n\n# 输入\n\n用户可能提供：\n- 单张页面截图\n- 多张状态截图\n- 局部区域截图\n- 少量补充要求\n\n例如：\n- 只关注这个区域\n- 只抽页面结构\n- 公共结构已经有了\n- 不要重复 layout\n- 先只搭骨架\n- 可以自由发挥 UI\n- 有 Figma，需要尽量还原\n- 优先使用项目 UI 库\n\n---\n\n# 异常处理\n\n以下情况需要主动澄清或降级处理，而非盲目执行。\n\n## 无截图\n\n- 主动询问用户提供截图\n- 不可凭文字描述编造页面结构\n- 如果用户想用 URL 或描述代替截图，提示截图效果最佳\n\n## 截图模糊 / 模糊请求\n\n- 截图质量低导致关键细节不可辨时：识别可见部分，明确标注不确定区域\n- 用户请求模糊（如\"帮我搞一下\"）且无截图时：要求补充截图和具体需求\n\n## 矛盾请求\n\n- 指出矛盾点并请求用户澄清\n  - 例：用户同时要求\"高保真还原\"和\"自由发挥 UI\" → 提示两者冲突，请确认优先级\n\n## 图片分析失败\n\n- 如果无法识别截图内容：明确告知用户并建议提供更清晰的截图或补充文字描述\n- 部分识别成功时：输出已识别部分，标注无法识别的区域\n\n---\n\n# 工作流程\n\n收到截图后，自动完成以下步骤。\n\n## 1. 页面结构识别\n\n识别页面的信息架构与区块关系：\n- 页面整体布局\n- 左右 / 上下结构\n- 卡片区块\n- 栅格结构\n- 内容分层\n- 主次区域\n- 区块嵌套关系\n\n识别常见模块：\n- 表单\n- 表格\n- 列表\n- Tabs、Modal / Drawer\n- 筛选区\n- 上传区\n- 统计区\n- Footer Action Bar、Empty State、Stepper、Collapse\n\n---\n\n## 2. 组件识别\n\n识别页面中的 UI 组件：\n- input、select、checkbox、radio、switch\n- date picker、table、pagination、upload\n- button、dropdown、tooltip、tabs\n- card、tag、badge、modal、drawer\n- alert、progress、skeleton\n\n需要识别：\n- 组件类型\n- 组件层级\n- 主次关系\n- 可复用区块\n\n---\n\n## 3. 文案与字段识别\n\n提取截图中的：\n- 页面标题\n- tab 名称\n- 表单字段\n- 表格列名\n- 按钮文案\n- placeholder、tooltip\n- 提示文案\n- 标签文本\n- 汇总信息\n- 状态文本\n\n不要凭空补全文案。\n\n---\n\n## 4. 状态与交互识别\n\n识别：\n- 当前激活项\n- selected 状态\n- disabled 状态\n- loading 状态\n- empty 状态\n- error 状态\n- success 状态\n- 展开 / 收起\n- 弹窗开启状态\n- 行高亮\n- 条件展示内容\n\n允许轻度合理推断，详见下方「合理推断边界」表。\n\n---\n\n## 5. 多图状态归并\n\n如果用户提供多张截图：\n\n需要：\n- 合并公共结构\n- 抽取状态差异\n- 识别状态切换关系\n- 避免重复描述\n\n统一整理：\n- 默认态\n- hover 态\n- selected 态\n- disabled 态\n- loading 态\n- empty 态\n- error 态\n- success 态\n- 展开态\n- 编辑态\n\n重点关注：\n- 哪些区域变化\n- 哪些组件变化\n- 哪些状态联动\n\n---\n\n## 6. 布局与视觉层级\n\n识别：\n- 主视觉区域\n- 主操作区域\n- 固定区域\n- 滚动区域\n- 自适应区域\n- 内容伸缩关系\n- 信息优先级\n- 页面留白趋势\n\n帮助 coding agent 即使没有设计稿，也能合理组织页面结构和视觉层级。\n\n---\n\n## 7. 可复用区块识别\n\n识别适合组件化的区域：\n- 筛选区\n- 表格工具栏\n- 列表项\n- 统计卡片\n- Footer Action Bar\n- 空状态组件\n- 上传区域\n- 弹窗内容区\n\n帮助 coding agent 做合理组件拆分。\n\n---\n\n## 8. 实现意图抽取\n\n将截图翻译成实现导向描述：\n\n✅ 好的描述：\n- 数据查询列表页，顶部为筛选区，中间为表格区域，底部包含分页\n- 多步骤编辑页面，左侧为步骤导航，右侧为表单内容区\n- 带统计卡片和列表区域的仪表盘页面\n\n❌ 不好的描述：\n- 这是一个后台页面\n- 这是一个管理系统\n- 这是一个业务页面\n\n重点：帮助 coding agent 理解\"页面应该怎么实现\"。\n\n---\n\n# UI 策略\n\n根据用户要求选择策略。用户未明确指定时，默认使用策略 A（骨架模式）。\n\n选择依据：\n- 用户提到\"先搭骨架\" / \"不要求精细\" → 策略 A\n- 用户提到\"自由发挥\" / \"优化视觉\" / \"可正式使用\" → 策略 B\n- 用户提到\"Figma\" / \"高还原\" / \"尽量还原\" → 策略 C\n\n---\n\n## 策略 A：骨架模式\n\n适用于：\n- 没有设计稿\n- 先搭结构\n- 不要求精细 UI\n\n要求：\n- 先实现页面骨架\n- 重点完成结构与区块划分\n- 完成基础交互\n- 样式保持简洁清晰\n- 不要求高保真\n- 后续可继续精修\n\n## 策略 B：自由发挥 UI\n\n适用于：\n- 没有设计稿\n- 允许优化视觉\n- 页面需要可正式使用\n\n要求：\n- 在截图结构基础上优化 UI\n- 不偏离截图结构\n- 优先复用项目 UI 组件库\n- 保持现代、统一、简洁\n- 状态完整\n- 留白与层级合理\n\n## 策略 C：设计稿还原\n\n适用于：\n- 用户提供 Figma\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\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-\n-\n\n---\n\n### 实现意图\n\n用 2~5 句话总结这个页面主要需要实现什么。\n\n---\n\n## 第二部分：可直接发给 coding agent 的 prompt\n\nprompt 必须：\n- 可直接复制\n- 偏工程实现\n- 面向页面搭建\n- 不空泛\n- 不扩展无关业务\n\n### Prompt 模板\n\n```md\n你需要根据截图实现一个页面/页面局部区域。\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- 保持代码可维护\n```\n\n---\n---\n\n# English Version\n\nGiven a user-provided page screenshot, recognize the page structure, component hierarchy, text content, states, and interactions, then generate a ready-to-use implementation prompt that can be sent directly to a coding agent.\n\nCore pipeline:\n\nScreenshot Understanding → Page Structure Extraction → State Recognition → Implementation Prompt Generation\n\nThis is a:\n- Screenshot understanding assistant\n- Page structure extractor\n- Implementation prompt generator\n\nNOT:\n- Product proposal generator\n- Business analyzer\n- Full code generator\n\n---\n\n# Core Objective\n\nAfter the user provides a screenshot, stably output:\n\n1. Screenshot structure recognition results\n2. A ready-to-use implementation prompt for coding agents\n\nFocus on helping the coding agent understand:\n- How to build the page\n- How to split sections\n- How to handle states\n- What level of UI polish is expected\n\nRather than expanding on business context.\n\n---\n\n# Input\n\nThe user may provide:\n- A single page screenshot\n- Multiple state screenshots\n- A partial area screenshot\n- A few supplementary requirements\n\nExamples:\n- Only focus on this area\n- Only extract the page structure\n- The common layout already exists\n- Don't repeat the layout\n- Just build the skeleton first\n- Feel free to design the UI\n- I have Figma, try to match it\n- Prefer the project's UI library\n\n---\n\n# Edge Cases\n\nThe following cases require proactive clarification or graceful degradation instead of blind execution.\n\n## No Screenshot Provided\n\n- Proactively ask the user to provide a screenshot\n- Do NOT fabricate page structure from text alone\n- If the user wants to use a URL or description instead, note that screenshots work best\n\n## Unclear Screenshot / Unclear Request\n\n- When image quality is too low to identify key details: recognize what's visible, explicitly mark uncertain areas\n- When the request is vague (e.g., \"just do it\") and no screenshot is provided: ask for a screenshot and specific requirements\n\n## Contradictory Requirements\n\n- Point out contradictions and ask the user to clarify\n  - E.g., user requests both \"high-fidelity restoration\" and \"free UI design\" → note the conflict and ask to confirm priority\n\n## Image Analysis Failure\n\n- If screenshot content cannot be recognized: inform the user and suggest providing a clearer screenshot or supplementary text description\n- When partially recognized: output recognized parts and mark unrecognized areas\n\n---\n\n# Workflow\n\nAfter receiving a screenshot, automatically complete the following steps.\n\n## 1. Page Structure Recognition\n\nRecognize the information architecture and block relationships:\n- Overall page layout\n- Left-right / top-bottom structure\n- Card blocks\n- Grid structure\n- Content layering\n- Primary and secondary areas\n- Block nesting relationships\n\nRecognize common modules:\n- Forms\n- Tables\n- Lists\n- Tabs, Modal / Drawer\n- Filter area\n- Upload area\n- Statistics area\n- Footer Action Bar, Empty State, Stepper, Collapse\n\n---\n\n## 2. Component Recognition\n\nRecognize UI components in the screenshot:\n- input, select, checkbox, radio, switch\n- date picker, table, pagination, upload\n- button, dropdown, tooltip, tabs\n- card, tag, badge, modal, drawer\n- alert, progress, skeleton\n\nIdentify:\n- Component type\n- Component hierarchy\n- Primary/secondary relationships\n- Reusable blocks\n\n---\n\n## 3. Text & Field Recognition\n\nExtract from the screenshot:\n- Page title\n- Tab names\n- Form fields\n- Table column headers\n- Button text\n- placeholder, tooltip\n- Hint/description text\n- Label text\n- Summary information\n- Status text\n\nDo NOT fabricate text that isn't visible in the screenshot.\n\n---\n\n## 4. State & Interaction Recognition\n\nRecognize:\n- Active item\n- Selected state\n- Disabled state\n- Loading state\n- Empty state\n- Error state\n- Success state\n- Expanded/collapsed\n- Modal open state\n- Row highlight\n- Conditional content\n\nAllowed lightweight reasonable inference, see the \"Reasonable Inference Boundaries\" table below.\n\n---\n\n## 5. Multi-Image State Merging\n\nIf the user provides multiple screenshots:\n\nRequired:\n- Merge common structures\n- Extract state differences\n- Identify state transition relationships\n- Avoid duplicate descriptions\n\nConsolidate:\n- Default state\n- Hover state\n- Selected state\n- Disabled state\n- Loading state\n- Empty state\n- Error state\n- Success state\n- Expanded state\n- Edit state\n\nFocus on:\n- Which areas changed\n- Which components changed\n- Which states are linked\n\n---\n\n## 6. Layout & Visual Hierarchy\n\nRecognize:\n- Primary visual area\n- Primary action area\n- Fixed areas\n- Scrollable areas\n- Adaptive areas\n- Content stretch relationships\n- Information priority\n- Whitespace trends\n\nHelp the coding agent organize page structure and visual hierarchy reasonably, even without a design mockup.\n\n---\n\n## 7. Reusable Block Recognition\n\nIdentify areas suitable for componentization:\n- Filter area\n- Table toolbar\n- List item\n- Statistics card\n- Footer Action Bar\n- Empty state component\n- Upload area\n- Modal content area\n\nHelp the coding agent make reasonable component splits.\n\n---\n\n## 8. Implementation Intent Extraction\n\nTranslate the screenshot into implementation-oriented descriptions:\n\n✅ Good descriptions:\n- Data query list page, top is filter area, middle is table area, bottom includes pagination\n- Multi-step editing page, left is step navigation, right is form content area\n- Dashboard page with statistics cards and list area\n\n❌ Bad descriptions:\n- This is a backend page\n- This is a management system\n- This is a business page\n\nFocus: Help the coding agent understand \"how should this page be implemented\".\n\n---\n\n# UI Strategy\n\nSelect strategy based on user requirements. When user doesn't specify, default to Strategy A (Skeleton Mode).\n\nSelection criteria:\n- User mentions \"skeleton first\" / \"no need for fine UI\" → Strategy A\n- User mentions \"free design\" / \"optimize visuals\" / \"production-ready\" → Strategy B\n- User mentions \"Figma\" / \"high fidelity\" / \"match closely\" → Strategy C\n\n---\n\n## Strategy A: Skeleton Mode\n\nFor:\n- No design mockup\n- Build structure first\n- High-fidelity UI not required\n\nRequirements:\n- Implement the page skeleton first\n- Focus on structure and block division\n- Complete basic interactions\n- Keep styles clean and simple\n- High fidelity not required\n- Can be refined later\n\n## Strategy B: Free UI Design\n\nFor:\n- No design mockup\n- UI optimization allowed\n- Page needs to be production-ready\n\nRequirements:\n- Optimize UI based on the screenshot structure\n- Don't deviate from the screenshot structure\n- Prefer reusing the project's UI component library\n- Keep it modern, unified, and clean\n- Complete state support\n- Reasonable whitespace and hierarchy\n\n## Strategy C: Design Restoration\n\nFor:\n- User provides Figma\n- User requests high fidelity\n\nRequirements:\n- Match the design as closely as possible\n- Keep layout, spacing, and hierarchy consistent\n- Prefer reusing the design system\n- Keep component conventions unified\n- Prioritize visual consistency\n\n---\n\n# Reasonable Inference Boundaries\n\n| Allowed | NOT Allowed |\n|---|---|\n| Infer basic state transitions | Fabricate complex business rules |\n| Infer basic form validation | Add complete new modules without basis |\n| Infer list selection behavior | Define non-existent API logic |\n| Infer block priority relationships | Expand page beyond the screenshot |\n| Infer basic linkage relationships | Define system types without basis |\n\n---\n\n# Output Format\n\nOutput two parts by default.\n\n## Part 1: Screenshot Structure Recognition\n\nUse a structured, engineering-oriented format. Tables are recommended.\n\n### Page Overview\n\n| Item | Content |\n|---|---|\n| Page type | |\n| Layout method | |\n| Page hierarchy | |\n| Fixed areas | |\n| Scrollable areas | |\n\n---\n\n### Block Breakdown\n\n| Block | Components | Text/Fields | Current State | Inferred Interactions |\n|---|---|---|---|---|\n| | | | | |\n\n---\n\n### States & Interactions\n\n-\n-\n\n---\n\n### Implementation Intent\n\nSummarize in 2-5 sentences what this page needs to implement.\n\n---\n\n## Part 2: Prompt for Coding Agent\n\nThe prompt must:\n- Be directly copyable\n- Be implementation-oriented\n- Be focused on page construction\n- Not be vague\n- Not expand into unrelated business\n\n### Prompt Template\n\n```md\nYou 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\n```\n\nFile v1.1.0:_meta.json\n\n{\n  \"ownerId\": \"kn76af6ccjftr7hsds21j60xnn82q1qd\",\n  \"slug\": \"screenshot-to-prompt\",\n  \"version\": \"1.1.0\",\n  \"publishedAt\": 1778932511362\n}\n\nArchive v0.1.99: 2 files, 7792 bytes\n\nFiles: SKILL.md (17914b), _meta.json (140b)\n\nFile v0.1.99:SKILL.md\n\n---\nname: screenshot-to-prompt\nversion: \"1.0.0\"\nhomepage: https://github.com/z-Zihan/awesome-skills\ndescription: >\n  截图理解 + 页面结构抽取 + 实现 prompt 生成器。\n  输入页面截图，输出结构化识别结果和可直接发给 coding agent 的实现 prompt。\n  触发：用户发截图说\"帮我分析这个页面\"、\"生成实现 prompt\"、\"页面结构抽取\"、\n  \"把这个页面转成 prompt\"、\"screenshot to prompt\"、\"截图转实现\"。\n  NOT for: 直接写代码（除非用户明确要求）、业务分析、产品方案撰写、设计稿评审。\n---\n\n# 技能：Screenshot → Coding Agent Prompt\n\n## 技能定位 / Skill Positioning\n\n根据用户提供的页面截图，识别页面结构、组件层级、文案字段、状态与交互，并生成一份可以直接发送给 coding agent 的实现 prompt。\nGiven a user-provided page screenshot, recognize the page structure, component hierarchy, text content, states, and interactions, then generate a ready-to-use implementation prompt that can be sent directly to a coding agent.\n\n核心链路 / Core pipeline：\n\n截图理解 → 页面结构抽取 → 状态识别 → 实现 prompt 生成\nScreenshot Understanding → Page Structure Extraction → State Recognition → Implementation Prompt Generation\n\n这是一个 / This is a：\n- 截图理解助手 / Screenshot understanding assistant\n- 页面结构抽取器 / Page structure extractor\n- 实现 Prompt 生成器 / Implementation prompt generator\n\n不是 / NOT：\n- 产品方案生成器 / Product proposal generator\n- 业务分析器 / Business analyzer\n- 完整代码生成器 / Full code generator\n\n---\n\n# 核心目标 / Core Objective\n\n用户给一张图后，稳定输出 / After the user provides a screenshot, stably output：\n\n1. 截图结构识别结果 / Screenshot structure recognition results\n2. 一份可直接发送给 coding agent 的实现 prompt / A ready-to-use implementation prompt for coding agents\n\n重点帮助 coding agent 理解 / Focus on helping the coding agent understand：\n- 页面怎么搭 / How to build the page\n- 区块怎么拆 / How to split sections\n- 状态怎么处理 / How to handle states\n- UI 应该做到什么程度 / What level of UI polish is expected\n\n而不是扩展业务背景 / Rather than expanding on business context。\n\n---\n\n# 输入 / Input\n\n用户可能提供 / The user may provide：\n- 单张页面截图 / A single page screenshot\n- 多张状态截图 / Multiple state screenshots\n- 局部区域截图 / A partial area screenshot\n- 少量补充要求 / A few supplementary requirements\n\n例如 / Examples：\n- 只关注这个区域 / Only focus on this area\n- 只抽页面结构 / Only extract the page structure\n- 公共结构已经有了 / The common layout already exists\n- 不要重复 layout / Don't repeat the layout\n- 先只搭骨架 / Just build the skeleton first\n- 可以自由发挥 UI / Feel free to design the UI\n- 有 Figma，需要尽量还原 / I have Figma, try to match it\n- 优先使用项目 UI 库 / Prefer the project's UI library\n\n---\n\n# 异常处理 / Edge Cases\n\n以下情况需要主动澄清或降级处理，而非盲目执行。\nThe following cases require proactive clarification or graceful degradation instead of blind execution.\n\n## 无截图 / No Screenshot Provided\n\n- 主动询问用户提供截图 / Proactively ask the user to provide a screenshot\n- 不可凭文字描述编造页面结构 / Do NOT fabricate page structure from text alone\n- 如果用户想用 URL 或描述代替截图，提示截图效果最佳 / If the user wants to use a URL or description instead, note that screenshots work best\n\n## 截图模糊 / 模糊请求 / Unclear Request\n\n- 截图质量低导致关键细节不可辨时：识别可见部分，明确标注不确定区域\n  When image quality is too low to identify key details: recognize what's visible, explicitly mark uncertain areas\n- 用户请求模糊（如\"帮我搞一下\"）且无截图时：要求补充截图和具体需求\n  When the request is vague (e.g., \"just do it\") and no screenshot is provided: ask for a screenshot and specific requirements\n\n## 矛盾请求 / Contradictory Requirements\n\n- 指出矛盾点并请求用户澄清 / Point out contradictions and ask the user to clarify\n  - 例：用户同时要求\"高保真还原\"和\"自由发挥 UI\" → 提示两者冲突，请确认优先级\n    E.g., user requests both \"high-fidelity restoration\" and \"free UI design\" → note the conflict and ask to confirm priority\n\n## 图片分析失败 / Image Analysis Failure\n\n- 如果无法识别截图内容：明确告知用户并建议提供更清晰的截图或补充文字描述\n  If screenshot content cannot be recognized: inform the user and suggest providing a clearer screenshot or supplementary text description\n- 部分识别成功时：输出已识别部分，标注无法识别的区域\n  When partially recognized: output recognized parts and mark unrecognized areas\n\n---\n\n# 工作流程 / Workflow\n\n收到截图后，自动完成以下步骤。\nAfter receiving a screenshot, automatically complete the following steps.\n\n## 1. 页面结构识别 / Page Structure Recognition\n\n识别页面的信息架构与区块关系 / Recognize the information architecture and block relationships：\n- 页面整体布局 / Overall page layout\n- 左右 / 上下结构 / Left-right / top-bottom structure\n- 卡片区块 / Card blocks\n- 栅格结构 / Grid structure\n- 内容分层 / Content layering\n- 主次区域 / Primary and secondary areas\n- 区块嵌套关系 / Block nesting relationships\n\n识别常见模块 / Recognize common modules：\n- 表单 / Forms\n- 表格 / Tables\n- 列表 / Lists\n- Tabs、Modal / Drawer\n- 筛选区 / Filter area\n- 上传区 / Upload area\n- 统计区 / Statistics area\n- Footer Action Bar、Empty State、Stepper、Collapse\n\n---\n\n## 2. 组件识别 / Component Recognition\n\n识别页面中的 UI 组件 / Recognize UI components in the screenshot：\n- input、select、checkbox、radio、switch\n- date picker、table、pagination、upload\n- button、dropdown、tooltip、tabs\n- card、tag、badge、modal、drawer\n- alert、progress、skeleton\n\n需要识别 / Identify：\n- 组件类型 / Component type\n- 组件层级 / Component hierarchy\n- 主次关系 / Primary/secondary relationships\n- 可复用区块 / Reusable blocks\n\n---\n\n## 3. 文案与字段识别 / Text & Field Recognition\n\n提取截图中的 / Extract from the screenshot：\n- 页面标题 / Page title\n- tab 名称 / Tab names\n- 表单字段 / Form fields\n- 表格列名 / Table column headers\n- 按钮文案 / Button text\n- placeholder、tooltip\n- 提示文案 / Hint/description text\n- 标签文本 / Label text\n- 汇总信息 / Summary information\n- 状态文本 / Status text\n\n不要凭空补全文案 / Do NOT fabricate text that isn't visible in the screenshot。\n\n---\n\n## 4. 状态与交互识别 / State & Interaction Recognition\n\n识别 / Recognize：\n- 当前激活项 / Active item\n- selected 状态 / Selected state\n- disabled 状态 / Disabled state\n- loading 状态 / Loading state\n- empty 状态 / Empty state\n- error 状态 / Error state\n- success 状态 / Success state\n- 展开 / 收起 / Expanded/collapsed\n- 弹窗开启状态 / Modal open state\n- 行高亮 / Row highlight\n- 条件展示内容 / Conditional content\n\n允许轻度合理推断，详见下方「合理推断边界」表 / Allowed lightweight reasonable inference, see the \"Reasonable Inference Boundaries\" table below。\n\n---\n\n## 5. 多图状态归并 / Multi-Image State Merging\n\n如果用户提供多张截图 / If the user provides multiple screenshots：\n\n需要 / Required：\n- 合并公共结构 / Merge common structures\n- 抽取状态差异 / Extract state differences\n- 识别状态切换关系 / Identify state transition relationships\n- 避免重复描述 / Avoid duplicate descriptions\n\n统一整理 / Consolidate：\n- 默认态 / Default state\n- hover 态 / Hover state\n- selected 态 / Selected state\n- disabled 态 / Disabled state\n- loading 态 / Loading state\n- empty 态 / Empty state\n- error 态 / Error state\n- success 态 / Success state\n- 展开态 / Expanded state\n- 编辑态 / Edit state\n\n重点关注 / Focus on：\n- 哪些区域变化 / Which areas changed\n- 哪些组件变化 / Which components changed\n- 哪些状态联动 / Which states are linked\n\n---\n\n## 6. 布局与视觉层级 / Layout & Visual Hierarchy\n\n识别 / Recognize：\n- 主视觉区域 / Primary visual area\n- 主操作区域 / Primary action area\n- 固定区域 / Fixed areas\n- 滚动区域 / Scrollable areas\n- 自适应区域 / Adaptive areas\n- 内容伸缩关系 / Content stretch relationships\n- 信息优先级 / Information priority\n- 页面留白趋势 / Whitespace trends\n\n帮助 coding agent 即使没有设计稿，也能合理组织页面结构和视觉层级。\nHelp the coding agent organize page structure and visual hierarchy reasonably, even without a design mockup.\n\n---\n\n## 7. 可复用区块识别 / Reusable Block Recognition\n\n识别适合组件化的区域 / Identify areas suitable for componentization：\n- 筛选区 / Filter area\n- 表格工具栏 / Table toolbar\n- 列表项 / List item\n- 统计卡片 / Statistics card\n- Footer Action Bar\n- 空状态组件 / Empty state component\n- 上传区域 / Upload area\n- 弹窗内容区 / Modal content area\n\n帮助 coding agent 做合理组件拆分。\nHelp the coding agent make reasonable component splits.\n\n---\n\n## 8. 实现意图抽取 / Implementation Intent Extraction\n\n将截图翻译成实现导向描述 / Translate the screenshot into implementation-oriented descriptions：\n\n✅ 好的描述 / Good descriptions：\n- 数据查询列表页，顶部为筛选区，中间为表格区域，底部包含分页\n- 多步骤编辑页面，左侧为步骤导航，右侧为表单内容区\n- 带统计卡片和列表区域的仪表盘页面\n\n❌ 不好的描述 / Bad descriptions：\n- 这是一个后台页面\n- 这是一个管理系统\n- 这是一个业务页面\n\n重点：帮助 coding agent 理解\"页面应该怎么实现\"。\nFocus: Help the coding agent understand \"how should this page be implemented\".\n\n---\n\n# UI 策略 / UI Strategy\n\n根据用户要求选择策略。用户未明确指定时，默认使用策略 A（骨架模式）/ Select strategy based on user requirements. When user doesn't specify, default to Strategy A (Skeleton Mode).\n\n选择依据 / Selection criteria：\n- 用户提到\"先搭骨架\" / \"不要求精细\" → 策略 A\n- 用户提到\"自由发挥\" / \"优化视觉\" / \"可正式使用\" → 策略 B\n- 用户提到\"Figma\" / \"高还原\" / \"尽量还原\" → 策略 C\n\n---\n\n## 策略 A：骨架模式 / Strategy A: Skeleton Mode\n\n适用于 / For：\n- 没有设计稿 / No design mockup\n- 先搭结构 / Build structure first\n- 不要求精细 UI / High-fidelity UI not required\n\n要求 / Requirements：\n- 先实现页面骨架 / Implement the page skeleton first\n- 重点完成结构与区块划分 / Focus on structure and block division\n- 完成基础交互 / Complete basic interactions\n- 样式保持简洁清晰 / Keep styles clean and simple\n- 不要求高保真 / High fidelity not required\n- 后续可继续精修 / Can be refined later\n\n## 策略 B：自由发挥 UI / Strategy B: Free UI Design\n\n适用于 / For：\n- 没有设计稿 / No design mockup\n- 允许优化视觉 / UI optimization allowed\n- 页面需要可正式使用 / Page needs to be production-ready\n\n要求 / Requirements：\n- 在截图结构基础上优化 UI / Optimize UI based on the screenshot structure\n- 不偏离截图结构 / Don't deviate from the screenshot structure\n- 优先复用项目 UI 组件库 / Prefer reusing the project's UI component library\n- 保持现代、统一、简洁 / Keep it modern, unified, and clean\n- 状态完整 / Complete state support\n- 留白与层级合理 / Reasonable whitespace and hierarchy\n\n## 策略 C：设计稿还原 / Strategy C: Design Restoration\n\n适用于 / For：\n- 用户提供 Figma / User provides Figma\n- 用户要求高还原 / User requests high fidelity\n\n要求 / Requirements：\n- 尽量还原设计稿 / Match the design as closely as possible\n- 保持布局、间距、层级一致 / Keep layout, spacing, and hierarchy consistent\n- 尽量复用设计系统 / Prefer reusing the design system\n- 保持组件规范统一 / Keep component conventions unified\n- 优先保证视觉一致性 / Prioritize visual consistency\n\n---\n\n# 合理推断边界 / Reasonable Inference Boundaries\n\n| 允许 / Allowed | 不允许 / NOT Allowed |\n|---|---|\n| 推断基础状态切换 | 编造复杂业务规则 |\n| 推断表单基础校验 | 擅自新增完整模块 |\n| 推断列表选择行为 | 定义不存在的接口逻辑 |\n| 推断区块主次关系 | 脱离截图扩展页面 |\n| 推断基础联动关系 | 擅自定义系统类型 |\n\n---\n\n# 输出格式 / Output Format\n\n默认输出两部分 / Output two parts by default。\n\n## 第一部分：截图结构识别结果 / Part 1: Screenshot Structure Recognition\n\n使用结构化、工程化方式输出 / Use a structured, engineering-oriented format。\n建议使用表格 / Tables are recommended。\n\n### 页面整体结构 / Page Overview\n\n| 项 / Item | 内容 / Content |\n|---|---|\n| 页面类型 / Page type | |\n| 布局方式 / Layout method | |\n| 页面层级 / Page hierarchy | |\n| 固定区域 / Fixed areas | |\n| 滚动区域 / Scrollable areas | |\n\n---\n\n### 区块拆解 / Block Breakdown\n\n| 区块 / Block | 组件 / Components | 文案/字段 / Text/Fields | 当前状态 / Current State | 可推断交互 / Inferred Interactions |\n|---|---|---|---|---|\n| | | | | |\n\n---\n\n### 状态与交互 / States & Interactions\n\n-\n-\n\n---\n\n### 实现意图 / Implementation Intent\n\n用 2~5 句话总结这个页面主要需要实现什么。\nSummarize in 2-5 sentences what this page needs to implement.\n\n---\n\n## 第二部分：可直接发给 coding agent 的 prompt / Part 2: Prompt for Coding Agent\n\nprompt 必须 / The prompt must：\n- 可直接复制 / Be directly copyable\n- 偏工程实现 / Be implementation-oriented\n- 面向页面搭建 / Be focused on page construction\n- 不空泛 / Not be vague\n- 不扩展无关业务 / Not expand into unrelated business\n\n### Prompt 模板 / Prompt Template\n\n```md\n你需要根据截图实现一个页面/页面局部区域。\nYou need to implement a page (or page section) based on the provided screenshot.\n\n### 实现目标 / Implementation Goal\n\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\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- 如果已有 layout/header/sidebar，请直接复用 / 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\n页面包含以下区域 / The page contains the following areas：\n\n1.\n2.\n3.\n\n---\n\n### 组件构成 / Component Composition\n\n请使用以下组件完成页面 / Use the following components to build the page：\n\n-\n-\n-\n\n---\n\n### 状态与交互 / States & Interactions\n\n页面需要支持 / The page needs to support：\n\n-\n-\n-\n\n包括 / Including：\n- 默认态 / Default state\n- selected 态 / Selected state\n- disabled 态 / Disabled state\n- loading 态 / Loading state\n- empty 态（如有）/ Empty state (if applicable)\n\n---\n\n### 布局要求 / Layout Requirements\n\n注意 / Note：\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\n建议拆分 / Suggested splits：\n\n-\n-\n-\n\n保证结构清晰，方便后续迭代 / Ensure clear structure for future iteration。\n\n---\n\n### UI 策略 / UI Strategy\n\n根据上述策略选择结果，在 prompt 中仅包含对应的策略说明，不要同时列出三个策略。\nBased on the strategy selection result, include only the corresponding strategy description in the prompt. Do NOT list all three.\n\n<!-- 根据实际情况选择以下一种，删除其余两种 -->\n\n#### 骨架模式 / Skeleton Mode\n\n- 先搭页面骨架 / Build page skeleton first\n- 不做高保真 UI / No high-fidelity UI\n- 样式保持简洁 / Keep styles simple\n- 后续再继续精修 / Refine later\n\n#### 自由发挥 UI / Free UI Design\n\n- 在截图结构基础上优化视觉 / Optimize visuals based on screenshot structure\n- 优先复用项目 UI 组件库 / 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- 优先复用已有 UI 组件 / Prefer reusing existing UI components\n- 没有接口可使用 mock 数据 / Use mock data if no API is available\n- 不实现复杂业务逻辑 / Do NOT implement complex business logic\n- 组件拆分合理 / Reasonable component splits\n- 保持代码可维护 / Maintainable code```\n\nFile v0.1.99:_meta.json\n\n{\n  \"ownerId\": \"kn76af6ccjftr7hsds21j60xnn82q1qd\",\n  \"slug\": \"screenshot-to-prompt\",\n  \"version\": \"0.1.99\",\n  \"publishedAt\": 1778901808989\n}\n\nArchive v0.1.92: 2 files, 7776 bytes\n\nFiles: SKILL.md (17897b), _meta.json (140b)\n\nFile v0.1.92:SKILL.md\n\n---\nname: screenshot-to-prompt\nhomepage: https://github.com/z-Zihan/awesome-skills\ndescription: >\n  截图理解 + 页面结构抽取 + 实现 prompt 生成器。\n  输入页面截图，输出结构化识别结果和可直接发给 coding agent 的实现 prompt。\n  触发：用户发截图说\"帮我分析这个页面\"、\"生成实现 prompt\"、\"页面结构抽取\"、\n  \"把这个页面转成 prompt\"、\"screenshot to prompt\"、\"截图转实现\"。\n  NOT for: 直接写代码（除非用户明确要求）、业务分析、产品方案撰写、设计稿评审。\n---\n\n# 技能：Screenshot → Coding Agent Prompt\n\n## 技能定位 / Skill Positioning\n\n根据用户提供的页面截图，识别页面结构、组件层级、文案字段、状态与交互，并生成一份可以直接发送给 coding agent 的实现 prompt。\nGiven a user-provided page screenshot, recognize the page structure, component hierarchy, text content, states, and interactions, then generate a ready-to-use implementation prompt that can be sent directly to a coding agent.\n\n核心链路 / Core pipeline：\n\n截图理解 → 页面结构抽取 → 状态识别 → 实现 prompt 生成\nScreenshot Understanding → Page Structure Extraction → State Recognition → Implementation Prompt Generation\n\n这是一个 / This is a：\n- 截图理解助手 / Screenshot understanding assistant\n- 页面结构抽取器 / Page structure extractor\n- 实现 Prompt 生成器 / Implementation prompt generator\n\n不是 / NOT：\n- 产品方案生成器 / Product proposal generator\n- 业务分析器 / Business analyzer\n- 完整代码生成器 / Full code generator\n\n---\n\n# 核心目标 / Core Objective\n\n用户给一张图后，稳定输出 / After the user provides a screenshot, stably output：\n\n1. 截图结构识别结果 / Screenshot structure recognition results\n2. 一份可直接发送给 coding agent 的实现 prompt / A ready-to-use implementation prompt for coding agents\n\n重点帮助 coding agent 理解 / Focus on helping the coding agent understand：\n- 页面怎么搭 / How to build the page\n- 区块怎么拆 / How to split sections\n- 状态怎么处理 / How to handle states\n- UI 应该做到什么程度 / What level of UI polish is expected\n\n而不是扩展业务背景 / Rather than expanding on business context。\n\n---\n\n# 输入 / Input\n\n用户可能提供 / The user may provide：\n- 单张页面截图 / A single page screenshot\n- 多张状态截图 / Multiple state screenshots\n- 局部区域截图 / A partial area screenshot\n- 少量补充要求 / A few supplementary requirements\n\n例如 / Examples：\n- 只关注这个区域 / Only focus on this area\n- 只抽页面结构 / Only extract the page structure\n- 公共结构已经有了 / The common layout already exists\n- 不要重复 layout / Don't repeat the layout\n- 先只搭骨架 / Just build the skeleton first\n- 可以自由发挥 UI / Feel free to design the UI\n- 有 Figma，需要尽量还原 / I have Figma, try to match it\n- 优先使用项目 UI 库 / Prefer the project's UI library\n\n---\n\n# 异常处理 / Edge Cases\n\n以下情况需要主动澄清或降级处理，而非盲目执行。\nThe following cases require proactive clarification or graceful degradation instead of blind execution.\n\n## 无截图 / No Screenshot Provided\n\n- 主动询问用户提供截图 / Proactively ask the user to provide a screenshot\n- 不可凭文字描述编造页面结构 / Do NOT fabricate page structure from text alone\n- 如果用户想用 URL 或描述代替截图，提示截图效果最佳 / If the user wants to use a URL or description instead, note that screenshots work best\n\n## 截图模糊 / 模糊请求 / Unclear Request\n\n- 截图质量低导致关键细节不可辨时：识别可见部分，明确标注不确定区域\n  When image quality is too low to identify key details: recognize what's visible, explicitly mark uncertain areas\n- 用户请求模糊（如\"帮我搞一下\"）且无截图时：要求补充截图和具体需求\n  When the request is vague (e.g., \"just do it\") and no screenshot is provided: ask for a screenshot and specific requirements\n\n## 矛盾请求 / Contradictory Requirements\n\n- 指出矛盾点并请求用户澄清 / Point out contradictions and ask the user to clarify\n  - 例：用户同时要求\"高保真还原\"和\"自由发挥 UI\" → 提示两者冲突，请确认优先级\n    E.g., user requests both \"high-fidelity restoration\" and \"free UI design\" → note the conflict and ask to confirm priority\n\n## 图片分析失败 / Image Analysis Failure\n\n- 如果无法识别截图内容：明确告知用户并建议提供更清晰的截图或补充文字描述\n  If screenshot content cannot be recognized: inform the user and suggest providing a clearer screenshot or supplementary text description\n- 部分识别成功时：输出已识别部分，标注无法识别的区域\n  When partially recognized: output recognized parts and mark unrecognized areas\n\n---\n\n# 工作流程 / Workflow\n\n收到截图后，自动完成以下步骤。\nAfter receiving a screenshot, automatically complete the following steps.\n\n## 1. 页面结构识别 / Page Structure Recognition\n\n识别页面的信息架构与区块关系 / Recognize the information architecture and block relationships：\n- 页面整体布局 / Overall page layout\n- 左右 / 上下结构 / Left-right / top-bottom structure\n- 卡片区块 / Card blocks\n- 栅格结构 / Grid structure\n- 内容分层 / Content layering\n- 主次区域 / Primary and secondary areas\n- 区块嵌套关系 / Block nesting relationships\n\n识别常见模块 / Recognize common modules：\n- 表单 / Forms\n- 表格 / Tables\n- 列表 / Lists\n- Tabs、Modal / Drawer\n- 筛选区 / Filter area\n- 上传区 / Upload area\n- 统计区 / Statistics area\n- Footer Action Bar、Empty State、Stepper、Collapse\n\n---\n\n## 2. 组件识别 / Component Recognition\n\n识别页面中的 UI 组件 / Recognize UI components in the screenshot：\n- input、select、checkbox、radio、switch\n- date picker、table、pagination、upload\n- button、dropdown、tooltip、tabs\n- card、tag、badge、modal、drawer\n- alert、progress、skeleton\n\n需要识别 / Identify：\n- 组件类型 / Component type\n- 组件层级 / Component hierarchy\n- 主次关系 / Primary/secondary relationships\n- 可复用区块 / Reusable blocks\n\n---\n\n## 3. 文案与字段识别 / Text & Field Recognition\n\n提取截图中的 / Extract from the screenshot：\n- 页面标题 / Page title\n- tab 名称 / Tab names\n- 表单字段 / Form fields\n- 表格列名 / Table column headers\n- 按钮文案 / Button text\n- placeholder、tooltip\n- 提示文案 / Hint/description text\n- 标签文本 / Label text\n- 汇总信息 / Summary information\n- 状态文本 / Status text\n\n不要凭空补全文案 / Do NOT fabricate text that isn't visible in the screenshot。\n\n---\n\n## 4. 状态与交互识别 / State & Interaction Recognition\n\n识别 / Recognize：\n- 当前激活项 / Active item\n- selected 状态 / Selected state\n- disabled 状态 / Disabled state\n- loading 状态 / Loading state\n- empty 状态 / Empty state\n- error 状态 / Error state\n- success 状态 / Success state\n- 展开 / 收起 / Expanded/collapsed\n- 弹窗开启状态 / Modal open state\n- 行高亮 / Row highlight\n- 条件展示内容 / Conditional content\n\n允许轻度合理推断，详见下方「合理推断边界」表 / Allowed lightweight reasonable inference, see the \"Reasonable Inference Boundaries\" table below。\n\n---\n\n## 5. 多图状态归并 / Multi-Image State Merging\n\n如果用户提供多张截图 / If the user provides multiple screenshots：\n\n需要 / Required：\n- 合并公共结构 / Merge common structures\n- 抽取状态差异 / Extract state differences\n- 识别状态切换关系 / Identify state transition relationships\n- 避免重复描述 / Avoid duplicate descriptions\n\n统一整理 / Consolidate：\n- 默认态 / Default state\n- hover 态 / Hover state\n- selected 态 / Selected state\n- disabled 态 / Disabled state\n- loading 态 / Loading state\n- empty 态 / Empty state\n- error 态 / Error state\n- success 态 / Success state\n- 展开态 / Expanded state\n- 编辑态 / Edit state\n\n重点关注 / Focus on：\n- 哪些区域变化 / Which areas changed\n- 哪些组件变化 / Which components changed\n- 哪些状态联动 / Which states are linked\n\n---\n\n## 6. 布局与视觉层级 / Layout & Visual Hierarchy\n\n识别 / Recognize：\n- 主视觉区域 / Primary visual area\n- 主操作区域 / Primary action area\n- 固定区域 / Fixed areas\n- 滚动区域 / Scrollable areas\n- 自适应区域 / Adaptive areas\n- 内容伸缩关系 / Content stretch relationships\n- 信息优先级 / Information priority\n- 页面留白趋势 / Whitespace trends\n\n帮助 coding agent 即使没有设计稿，也能合理组织页面结构和视觉层级。\nHelp the coding agent organize page structure and visual hierarchy reasonably, even without a design mockup.\n\n---\n\n## 7. 可复用区块识别 / Reusable Block Recognition\n\n识别适合组件化的区域 / Identify areas suitable for componentization：\n- 筛选区 / Filter area\n- 表格工具栏 / Table toolbar\n- 列表项 / List item\n- 统计卡片 / Statistics card\n- Footer Action Bar\n- 空状态组件 / Empty state component\n- 上传区域 / Upload area\n- 弹窗内容区 / Modal content area\n\n帮助 coding agent 做合理组件拆分。\nHelp the coding agent make reasonable component splits.\n\n---\n\n## 8. 实现意图抽取 / Implementation Intent Extraction\n\n将截图翻译成实现导向描述 / Translate the screenshot into implementation-oriented descriptions：\n\n✅ 好的描述 / Good descriptions：\n- 数据查询列表页，顶部为筛选区，中间为表格区域，底部包含分页\n- 多步骤编辑页面，左侧为步骤导航，右侧为表单内容区\n- 带统计卡片和列表区域的仪表盘页面\n\n❌ 不好的描述 / Bad descriptions：\n- 这是一个后台页面\n- 这是一个管理系统\n- 这是一个业务页面\n\n重点：帮助 coding agent 理解\"页面应该怎么实现\"。\nFocus: Help the coding agent understand \"how should this page be implemented\".\n\n---\n\n# UI 策略 / UI Strategy\n\n根据用户要求选择策略。用户未明确指定时，默认使用策略 A（骨架模式）/ Select strategy based on user requirements. When user doesn't specify, default to Strategy A (Skeleton Mode).\n\n选择依据 / Selection criteria：\n- 用户提到\"先搭骨架\" / \"不要求精细\" → 策略 A\n- 用户提到\"自由发挥\" / \"优化视觉\" / \"可正式使用\" → 策略 B\n- 用户提到\"Figma\" / \"高还原\" / \"尽量还原\" → 策略 C\n\n---\n\n## 策略 A：骨架模式 / Strategy A: Skeleton Mode\n\n适用于 / For：\n- 没有设计稿 / No design mockup\n- 先搭结构 / Build structure first\n- 不要求精细 UI / High-fidelity UI not required\n\n要求 / Requirements：\n- 先实现页面骨架 / Implement the page skeleton first\n- 重点完成结构与区块划分 / Focus on structure and block division\n- 完成基础交互 / Complete basic interactions\n- 样式保持简洁清晰 / Keep styles clean and simple\n- 不要求高保真 / High fidelity not required\n- 后续可继续精修 / Can be refined later\n\n## 策略 B：自由发挥 UI / Strategy B: Free UI Design\n\n适用于 / For：\n- 没有设计稿 / No design mockup\n- 允许优化视觉 / UI optimization allowed\n- 页面需要可正式使用 / Page needs to be production-ready\n\n要求 / Requirements：\n- 在截图结构基础上优化 UI / Optimize UI based on the screenshot structure\n- 不偏离截图结构 / Don't deviate from the screenshot structure\n- 优先复用项目 UI 组件库 / Prefer reusing the project's UI component library\n- 保持现代、统一、简洁 / Keep it modern, unified, and clean\n- 状态完整 / Complete state support\n- 留白与层级合理 / Reasonable whitespace and hierarchy\n\n## 策略 C：设计稿还原 / Strategy C: Design Restoration\n\n适用于 / For：\n- 用户提供 Figma / User provides Figma\n- 用户要求高还原 / User requests high fidelity\n\n要求 / Requirements：\n- 尽量还原设计稿 / Match the design as closely as possible\n- 保持布局、间距、层级一致 / Keep layout, spacing, and hierarchy consistent\n- 尽量复用设计系统 / Prefer reusing the design system\n- 保持组件规范统一 / Keep component conventions unified\n- 优先保证视觉一致性 / Prioritize visual consistency\n\n---\n\n# 合理推断边界 / Reasonable Inference Boundaries\n\n| 允许 / Allowed | 不允许 / NOT Allowed |\n|---|---|\n| 推断基础状态切换 | 编造复杂业务规则 |\n| 推断表单基础校验 | 擅自新增完整模块 |\n| 推断列表选择行为 | 定义不存在的接口逻辑 |\n| 推断区块主次关系 | 脱离截图扩展页面 |\n| 推断基础联动关系 | 擅自定义系统类型 |\n\n---\n\n# 输出格式 / Output Format\n\n默认输出两部分 / Output two parts by default。\n\n## 第一部分：截图结构识别结果 / Part 1: Screenshot Structure Recognition\n\n使用结构化、工程化方式输出 / Use a structured, engineering-oriented format。\n建议使用表格 / Tables are recommended。\n\n### 页面整体结构 / Page Overview\n\n| 项 / Item | 内容 / Content |\n|---|---|\n| 页面类型 / Page type | |\n| 布局方式 / Layout method | |\n| 页面层级 / Page hierarchy | |\n| 固定区域 / Fixed areas | |\n| 滚动区域 / Scrollable areas | |\n\n---\n\n### 区块拆解 / Block Breakdown\n\n| 区块 / Block | 组件 / Components | 文案/字段 / Text/Fields | 当前状态 / Current State | 可推断交互 / Inferred Interactions |\n|---|---|---|---|---|\n| | | | | |\n\n---\n\n### 状态与交互 / States & Interactions\n\n-\n-\n\n---\n\n### 实现意图 / Implementation Intent\n\n用 2~5 句话总结这个页面主要需要实现什么。\nSummarize in 2-5 sentences what this page needs to implement.\n\n---\n\n## 第二部分：可直接发给 coding agent 的 prompt / Part 2: Prompt for Coding Agent\n\nprompt 必须 / The prompt must：\n- 可直接复制 / Be directly copyable\n- 偏工程实现 / Be implementation-oriented\n- 面向页面搭建 / Be focused on page construction\n- 不空泛 / Not be vague\n- 不扩展无关业务 / Not expand into unrelated business\n\n### Prompt 模板 / Prompt Template\n\n```md\n你需要根据截图实现一个页面/页面局部区域。\nYou need to implement a page (or page section) based on the provided screenshot.\n\n### 实现目标 / Implementation Goal\n\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\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- 如果已有 layout/header/sidebar，请直接复用 / 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\n页面包含以下区域 / The page contains the following areas：\n\n1.\n2.\n3.\n\n---\n\n### 组件构成 / Component Composition\n\n请使用以下组件完成页面 / Use the following components to build the page：\n\n-\n-\n-\n\n---\n\n### 状态与交互 / States & Interactions\n\n页面需要支持 / The page needs to support：\n\n-\n-\n-\n\n包括 / Including：\n- 默认态 / Default state\n- selected 态 / Selected state\n- disabled 态 / Disabled state\n- loading 态 / Loading state\n- empty 态（如有）/ Empty state (if applicable)\n\n---\n\n### 布局要求 / Layout Requirements\n\n注意 / Note：\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\n建议拆分 / Suggested splits：\n\n-\n-\n-\n\n保证结构清晰，方便后续迭代 / Ensure clear structure for future iteration。\n\n---\n\n### UI 策略 / UI Strategy\n\n根据上述策略选择结果，在 prompt 中仅包含对应的策略说明，不要同时列出三个策略。\nBased on the strategy selection result, include only the corresponding strategy description in the prompt. Do NOT list all three.\n\n<!-- 根据实际情况选择以下一种，删除其余两种 -->\n\n#### 骨架模式 / Skeleton Mode\n\n- 先搭页面骨架 / Build page skeleton first\n- 不做高保真 UI / No high-fidelity UI\n- 样式保持简洁 / Keep styles simple\n- 后续再继续精修 / Refine later\n\n#### 自由发挥 UI / Free UI Design\n\n- 在截图结构基础上优化视觉 / Optimize visuals based on screenshot structure\n- 优先复用项目 UI 组件库 / 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- 优先复用已有 UI 组件 / Prefer reusing existing UI components\n- 没有接口可使用 mock 数据 / Use mock data if no API is available\n- 不实现复杂业务逻辑 / Do NOT implement complex business logic\n- 组件拆分合理 / Reasonable component splits\n- 保持代码可维护 / Maintainable code```\n\nFile v0.1.92:_meta.json\n\n{\n  \"ownerId\": \"kn76af6ccjftr7hsds21j60xnn82q1qd\",\n  \"slug\": \"screenshot-to-prompt\",\n  \"version\": \"0.1.92\",\n  \"publishedAt\": 1778848526067\n}\n\nArchive v0.1.16: 2 files, 6758 bytes\n\nFiles: SKILL.md (15752b), _meta.json (140b)\n\nFile v0.1.16:SKILL.md\n\n---\nname: screenshot-to-prompt\nhomepage: https://github.com/z-Zihan/awesome-skills\ndescription: >\n  截图理解 + 页面结构抽取 + 实现 prompt 生成器。\n  输入页面截图，输出结构化识别结果和可直接发给 coding agent 的实现 prompt。\n  触发：用户发截图说\"帮我分析这个页面\"、\"生成实现 prompt\"、\"页面结构抽取\"、\n  \"把这个页面转成 prompt\"、\"screenshot to prompt\"、\"截图转实现\"。\n  NOT for: 直接写代码（除非用户明确要求）、业务分析、产品方案撰写、设计稿评审。\n---\n\n# 技能：Screenshot → Coding Agent Prompt\n\n## 技能定位 / Skill Positioning\n\n根据用户提供的页面截图，识别页面结构、组件层级、文案字段、状态与交互，并生成一份可以直接发送给 coding agent 的实现 prompt。\nGiven a user-provided page screenshot, recognize the page structure, component hierarchy, text content, states, and interactions, then generate a ready-to-use implementation prompt that can be sent directly to a coding agent.\n\n核心链路 / Core pipeline：\n\n截图理解 → 页面结构抽取 → 状态识别 → 实现 prompt 生成\nScreenshot Understanding → Page Structure Extraction → State Recognition → Implementation Prompt Generation\n\n这是一个 / This is a：\n- 截图理解助手 / Screenshot understanding assistant\n- 页面结构抽取器 / Page structure extractor\n- 实现 Prompt 生成器 / Implementation prompt generator\n\n不是 / NOT：\n- 产品方案生成器 / Product proposal generator\n- 业务分析器 / Business analyzer\n- 完整代码生成器 / Full code generator\n\n---\n\n# 核心目标 / Core Objective\n\n用户给一张图后，稳定输出 / After the user provides a screenshot, stably output：\n\n1. 截图结构识别结果 / Screenshot structure recognition results\n2. 一份可直接发送给 coding agent 的实现 prompt / A ready-to-use implementation prompt for coding agents\n\n重点帮助 coding agent 理解 / Focus on helping the coding agent understand：\n- 页面怎么搭 / How to build the page\n- 区块怎么拆 / How to split sections\n- 状态怎么处理 / How to handle states\n- UI 应该做到什么程度 / What level of UI polish is expected\n\n而不是扩展业务背景 / Rather than expanding on business context。\n\n---\n\n# 输入 / Input\n\n用户可能提供 / The user may provide：\n- 单张页面截图 / A single page screenshot\n- 多张状态截图 / Multiple state screenshots\n- 局部区域截图 / A partial area screenshot\n- 少量补充要求 / A few supplementary requirements\n\n例如 / Examples：\n- 只关注这个区域 / Only focus on this area\n- 只抽页面结构 / Only extract the page structure\n- 公共结构已经有了 / The common layout already exists\n- 不要重复 layout / Don't repeat the layout\n- 先只搭骨架 / Just build the skeleton first\n- 可以自由发挥 UI / Feel free to design the UI\n- 有 Figma，需要尽量还原 / I have Figma, try to match it\n- 优先使用项目 UI 库 / Prefer the project's UI library\n\n---\n\n# 工作流程 / Workflow\n\n收到截图后，自动完成以下步骤。\nAfter receiving a screenshot, automatically complete the following steps.\n\n---\n\n# 1. 页面结构识别 / Page Structure Recognition\n\n识别页面的信息架构与区块关系 / Recognize the information architecture and block relationships：\n- 页面整体布局 / Overall page layout\n- 左右 / 上下结构 / Left-right / top-bottom structure\n- 卡片区块 / Card blocks\n- 栅格结构 / Grid structure\n- 内容分层 / Content layering\n- 主次区域 / Primary and secondary areas\n- 区块嵌套关系 / Block nesting relationships\n\n识别常见模块 / Recognize common modules：\n- 表单 / Forms\n- 表格 / Tables\n- 列表 / Lists\n- Tabs、Modal / Drawer\n- 筛选区 / Filter area\n- 上传区 / Upload area\n- 统计区 / Statistics area\n- Footer Action Bar、Empty State、Stepper、Collapse\n\n---\n\n# 2. 组件识别 / Component Recognition\n\n识别页面中的 UI 组件 / Recognize UI components in the screenshot：\n- input、select、checkbox、radio、switch\n- date picker、table、pagination、upload\n- button、dropdown、tooltip、tabs\n- card、tag、badge、modal、drawer\n- alert、progress、skeleton\n\n需要识别 / Identify：\n- 组件类型 / Component type\n- 组件层级 / Component hierarchy\n- 主次关系 / Primary/secondary relationships\n- 可复用区块 / Reusable blocks\n\n---\n\n# 3. 文案与字段识别 / Text & Field Recognition\n\n提取截图中的 / Extract from the screenshot：\n- 页面标题 / Page title\n- tab 名称 / Tab names\n- 表单字段 / Form fields\n- 表格列名 / Table column headers\n- 按钮文案 / Button text\n- placeholder、tooltip\n- 提示文案 / Hint/description text\n- 标签文本 / Label text\n- 汇总信息 / Summary information\n- 状态文本 / Status text\n\n不要凭空补全文案 / Do NOT fabricate text that isn't visible in the screenshot。\n\n---\n\n# 4. 状态与交互识别 / State & Interaction Recognition\n\n识别 / Recognize：\n- 当前激活项 / Active item\n- selected 状态 / Selected state\n- disabled 状态 / Disabled state\n- loading 状态 / Loading state\n- empty 状态 / Empty state\n- error 状态 / Error state\n- success 状态 / Success state\n- 展开 / 收起 / Expanded/collapsed\n- 弹窗开启状态 / Modal open state\n- 行高亮 / Row highlight\n- 条件展示内容 / Conditional content\n\n允许轻度合理推断 / Allowed (lightweight reasonable inference)：\n- 基础状态切换 / Basic state toggles\n- 表单联动 / Form field linkage\n- 列表联动 / List linkage\n- 基础校验 / Basic validation\n- 数据选择行为 / Data selection behavior\n\n不允许 / NOT allowed：\n- 编造复杂业务逻辑 / Fabricating complex business logic\n- 擅自扩展功能模块 / Unilaterally adding feature modules\n- 凭空定义接口规则 / Inventing API rules\n- 脱离截图扩展系统 / Extending the system beyond what's shown\n\n---\n\n# 5. 多图状态归并 / Multi-Image State Merging\n\n如果用户提供多张截图 / If the user provides multiple screenshots：\n\n需要 / Required：\n- 合并公共结构 / Merge common structures\n- 抽取状态差异 / Extract state differences\n- 识别状态切换关系 / Identify state transition relationships\n- 避免重复描述 / Avoid duplicate descriptions\n\n统一整理 / Consolidate：\n- 默认态 / Default state\n- hover 态 / Hover state\n- selected 态 / Selected state\n- disabled 态 / Disabled state\n- loading 态 / Loading state\n- empty 态 / Empty state\n- error 态 / Error state\n- success 态 / Success state\n- 展开态 / Expanded state\n- 编辑态 / Edit state\n\n重点关注 / Focus on：\n- 哪些区域变化 / Which areas changed\n- 哪些组件变化 / Which components changed\n- 哪些状态联动 / Which states are linked\n\n---\n\n# 6. 布局与视觉层级 / Layout & Visual Hierarchy\n\n识别 / Recognize：\n- 主视觉区域 / Primary visual area\n- 主操作区域 / Primary action area\n- 固定区域 / Fixed areas\n- 滚动区域 / Scrollable areas\n- 自适应区域 / Adaptive areas\n- 内容伸缩关系 / Content stretch relationships\n- 信息优先级 / Information priority\n- 页面留白趋势 / Whitespace trends\n\n帮助 coding agent 即使没有设计稿，也能合理组织页面结构和视觉层级。\nHelp the coding agent organize page structure and visual hierarchy reasonably, even without a design mockup.\n\n---\n\n# 7. 可复用区块识别 / Reusable Block Recognition\n\n识别适合组件化的区域 / Identify areas suitable for componentization：\n- 筛选区 / Filter area\n- 表格工具栏 / Table toolbar\n- 列表项 / List item\n- 统计卡片 / Statistics card\n- Footer Action Bar\n- 空状态组件 / Empty state component\n- 上传区域 / Upload area\n- 弹窗内容区 / Modal content area\n\n帮助 coding agent 做合理组件拆分。\nHelp the coding agent make reasonable component splits.\n\n---\n\n# 8. 实现意图抽取 / Implementation Intent Extraction\n\n将截图翻译成实现导向描述 / Translate the screenshot into implementation-oriented descriptions：\n\n✅ 好的描述 / Good descriptions：\n- 数据查询列表页，顶部为筛选区，中间为表格区域，底部包含分页\n- 多步骤编辑页面，左侧为步骤导航，右侧为表单内容区\n- 带统计卡片和列表区域的仪表盘页面\n\n❌ 不好的描述 / Bad descriptions：\n- 这是一个后台页面\n- 这是一个管理系统\n- 这是一个业务页面\n\n重点：帮助 coding agent 理解\"页面应该怎么实现\"。\nFocus: Help the coding agent understand \"how should this page be implemented\".\n\n---\n\n# UI 策略 / UI Strategy\n\n根据用户要求自动切换 / Automatically switch based on user requirements。\n\n---\n\n## 策略 A：骨架模式 / Strategy A: Skeleton Mode\n\n适用于 / For：\n- 没有设计稿 / No design mockup\n- 先搭结构 / Build structure first\n- 不要求精细 UI / High-fidelity UI not required\n\n要求 / Requirements：\n- 先实现页面骨架 / Implement the page skeleton first\n- 重点完成结构与区块划分 / Focus on structure and block division\n- 完成基础交互 / Complete basic interactions\n- 样式保持简洁清晰 / Keep styles clean and simple\n- 不要求高保真 / High fidelity not required\n- 后续可继续精修 / Can be refined later\n\n---\n\n## 策略 B：自由发挥 UI / Strategy B: Free UI Design\n\n适用于 / For：\n- 没有设计稿 / No design mockup\n- 允许优化视觉 / UI optimization allowed\n- 页面需要可正式使用 / Page needs to be production-ready\n\n要求 / Requirements：\n- 在截图结构基础上优化 UI / Optimize UI based on the screenshot structure\n- 不偏离截图结构 / Don't deviate from the screenshot structure\n- 优先复用项目 UI 组件库 / Prefer reusing the project's UI component library\n- 保持现代、统一、简洁 / Keep it modern, unified, and clean\n- 状态完整 / Complete state support\n- 留白与层级合理 / Reasonable whitespace and hierarchy\n\n---\n\n## 策略 C：设计稿还原 / Strategy C: Design Restoration\n\n适用于 / For：\n- 用户提供 Figma / User provides Figma\n- 用户要求高还原 / User requests high fidelity\n\n要求 / Requirements：\n- 尽量还原设计稿 / Match the design as closely as possible\n- 保持布局、间距、层级一致 / Keep layout, spacing, and hierarchy consistent\n- 尽量复用设计系统 / Prefer reusing the design system\n- 保持组件规范统一 / Keep component conventions unified\n- 优先保证视觉一致性 / Prioritize visual consistency\n\n---\n\n# 合理推断边界 / Reasonable Inference Boundaries\n\n| 允许 / Allowed | 不允许 / NOT Allowed |\n|---|---|\n| 推断基础状态切换 | 编造复杂业务规则 |\n| 推断表单基础校验 | 擅自新增完整模块 |\n| 推断列表选择行为 | 定义不存在的接口逻辑 |\n| 推断区块主次关系 | 脱离截图扩展页面 |\n| 推断基础联动关系 | 擅自定义系统类型 |\n\n---\n\n# 输出格式 / Output Format\n\n默认输出两部分 / Output two parts by default。\n\n---\n\n# 第一部分：截图结构识别结果 / Part 1: Screenshot Structure Recognition\n\n使用结构化、工程化方式输出 / Use a structured, engineering-oriented format。\n建议使用表格 / Tables are recommended。\n\n---\n\n## 页面整体结构 / Page Overview\n\n| 项 / Item | 内容 / Content |\n|---|---|\n| 页面类型 / Page type | |\n| 布局方式 / Layout method | |\n| 页面层级 / Page hierarchy | |\n| 固定区域 / Fixed areas | |\n| 滚动区域 / Scrollable areas | |\n\n---\n\n## 区块拆解 / Block Breakdown\n\n| 区块 / Block | 组件 / Components | 文案/字段 / Text/Fields | 当前状态 / Current State | 可推断交互 / Inferred Interactions |\n|---|---|---|---|---|\n| | | | | |\n\n---\n\n## 状态与交互 / States & Interactions\n\n-\n-\n\n---\n\n## 实现意图 / Implementation Intent\n\n用 2~5 句话总结这个页面主要需要实现什么。\nSummarize in 2-5 sentences what this page needs to implement.\n\n---\n\n# 第二部分：可直接发给 coding agent 的 prompt / Part 2: Prompt for Coding Agent\n\nprompt 必须 / The prompt must：\n- 可直接复制 / Be directly copyable\n- 偏工程实现 / Be implementation-oriented\n- 面向页面搭建 / Be focused on page construction\n- 不空泛 / Not be vague\n- 不扩展无关业务 / Not expand into unrelated business\n\n---\n\n## Prompt 模板 / Prompt Template\n\n```md\n你需要根据截图实现一个页面/页面局部区域。\nYou need to implement a page (or page section) based on the provided screenshot.\n\n### 实现目标 / Implementation Goal\n\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\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- 如果已有 layout/header/sidebar，请直接复用 / 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\n页面包含以下区域 / The page contains the following areas：\n\n1.\n2.\n3.\n\n---\n\n### 组件构成 / Component Composition\n\n请使用以下组件完成页面 / Use the following components to build the page：\n\n-\n-\n-\n\n---\n\n### 状态与交互 / States & Interactions\n\n页面需要支持 / The page needs to support：\n\n-\n-\n-\n\n包括 / Including：\n- 默认态 / Default state\n- selected 态 / Selected state\n- disabled 态 / Disabled state\n- loading 态 / Loading state\n- empty 态（如有）/ Empty state (if applicable)\n\n---\n\n### 布局要求 / Layout Requirements\n\n注意 / Note：\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\n建议拆分 / Suggested splits：\n\n-\n-\n-\n\n保证结构清晰，方便后续迭代 / Ensure clear structure for future iteration。\n\n---\n\n### UI 策略 / UI Strategy\n\n根据当前情况选择 / Choose based on current situation：\n\n#### 骨架模式 / Skeleton Mode\n\n- 先搭页面骨架 / Build page skeleton first\n- 不做高保真 UI / No high-fidelity UI\n- 样式保持简洁 / Keep styles simple\n- 后续再继续精修 / Refine later\n\n#### 自由发挥 UI / Free UI Design\n\n- 在截图结构基础上优化视觉 / Optimize visuals based on screenshot structure\n- 优先复用项目 UI 组件库 / 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- 优先复用已有 UI 组件 / Prefer reusing existing UI components\n- 没有接口可使用 mock 数据 / Use mock data if no API is available\n- 不实现复杂业务逻辑 / Do NOT implement complex business logic\n- 组件拆分合理 / Reasonable component splits\n- 保持代码可维护 / Maintainable code```\n\nFile v0.1.16:_meta.json\n\n{\n  \"ownerId\": \"kn76af6ccjftr7hsds21j60xnn82q1qd\",\n  \"slug\": \"screenshot-to-prompt\",\n  \"version\": \"0.1.16\",\n  \"publishedAt\": 1778661518284\n}\n\nArchive v0.1.15: 2 files, 6759 bytes\n\nFiles: SKILL.md (15752b), _meta.json (140b)\n\nFile v0.1.15:SKILL.md\n\n---\nname: screenshot-to-prompt\nhomepage: https://github.com/z-Zihan/awesome-skills\ndescription: >\n  截图理解 + 页面结构抽取 + 实现 prompt 生成器。\n  输入页面截图，输出结构化识别结果和可直接发给 coding agent 的实现 prompt。\n  触发：用户发截图说\"帮我分析这个页面\"、\"生成实现 prompt\"、\"页面结构抽取\"、\n  \"把这个页面转成 prompt\"、\"screenshot to prompt\"、\"截图转实现\"。\n  NOT for: 直接写代码（除非用户明确要求）、业务分析、产品方案撰写、设计稿评审。\n---\n\n# 技能：Screenshot → Coding Agent Prompt\n\n## 技能定位 / Skill Positioning\n\n根据用户提供的页面截图，识别页面结构、组件层级、文案字段、状态与交互，并生成一份可以直接发送给 coding agent 的实现 prompt。\nGiven a user-provided page screenshot, recognize the page structure, component hierarchy, text content, states, and interactions, then generate a ready-to-use implementation prompt that can be sent directly to a coding agent.\n\n核心链路 / Core pipeline：\n\n截图理解 → 页面结构抽取 → 状态识别 → 实现 prompt 生成\nScreenshot Understanding → Page Structure Extraction → State Recognition → Implementation Prompt Generation\n\n这是一个 / This is a：\n- 截图理解助手 / Screenshot understanding assistant\n- 页面结构抽取器 / Page structure extractor\n- 实现 Prompt 生成器 / Implementation prompt generator\n\n不是 / NOT：\n- 产品方案生成器 / Product proposal generator\n- 业务分析器 / Business analyzer\n- 完整代码生成器 / Full code generator\n\n---\n\n# 核心目标 / Core Objective\n\n用户给一张图后，稳定输出 / After the user provides a screenshot, stably output：\n\n1. 截图结构识别结果 / Screenshot structure recognition results\n2. 一份可直接发送给 coding agent 的实现 prompt / A ready-to-use implementation prompt for coding agents\n\n重点帮助 coding agent 理解 / Focus on helping the coding agent understand：\n- 页面怎么搭 / How to build the page\n- 区块怎么拆 / How to split sections\n- 状态怎么处理 / How to handle states\n- UI 应该做到什么程度 / What level of UI polish is expected\n\n而不是扩展业务背景 / Rather than expanding on business context。\n\n---\n\n# 输入 / Input\n\n用户可能提供 / The user may provide：\n- 单张页面截图 / A single page screenshot\n- 多张状态截图 / Multiple state screenshots\n- 局部区域截图 / A partial area screenshot\n- 少量补充要求 / A few supplementary requirements\n\n例如 / Examples：\n- 只关注这个区域 / Only focus on this area\n- 只抽页面结构 / Only extract the page structure\n- 公共结构已经有了 / The common layout already exists\n- 不要重复 layout / Don't repeat the layout\n- 先只搭骨架 / Just build the skeleton first\n- 可以自由发挥 UI / Feel free to design the UI\n- 有 Figma，需要尽量还原 / I have Figma, try to match it\n- 优先使用项目 UI 库 / Prefer the project's UI library\n\n---\n\n# 工作流程 / Workflow\n\n收到截图后，自动完成以下步骤。\nAfter receiving a screenshot, automatically complete the following steps.\n\n---\n\n# 1. 页面结构识别 / Page Structure Recognition\n\n识别页面的信息架构与区块关系 / Recognize the information architecture and block relationships：\n- 页面整体布局 / Overall page layout\n- 左右 / 上下结构 / Left-right / top-bottom structure\n- 卡片区块 / Card blocks\n- 栅格结构 / Grid structure\n- 内容分层 / Content layering\n- 主次区域 / Primary and secondary areas\n- 区块嵌套关系 / Block nesting relationships\n\n识别常见模块 / Recognize common modules：\n- 表单 / Forms\n- 表格 / Tables\n- 列表 / Lists\n- Tabs、Modal / Drawer\n- 筛选区 / Filter area\n- 上传区 / Upload area\n- 统计区 / Statistics area\n- Footer Action Bar、Empty State、Stepper、Collapse\n\n---\n\n# 2. 组件识别 / Component Recognition\n\n识别页面中的 UI 组件 / Recognize UI components in the screenshot：\n- input、select、checkbox、radio、switch\n- date picker、table、pagination、upload\n- button、dropdown、tooltip、tabs\n- card、tag、badge、modal、drawer\n- alert、progress、skeleton\n\n需要识别 / Identify：\n- 组件类型 / Component type\n- 组件层级 / Component hierarchy\n- 主次关系 / Primary/secondary relationships\n- 可复用区块 / Reusable blocks\n\n---\n\n# 3. 文案与字段识别 / Text & Field Recognition\n\n提取截图中的 / Extract from the screenshot：\n- 页面标题 / Page title\n- tab 名称 / Tab names\n- 表单字段 / Form fields\n- 表格列名 / Table column headers\n- 按钮文案 / Button text\n- placeholder、tooltip\n- 提示文案 / Hint/description text\n- 标签文本 / Label text\n- 汇总信息 / Summary information\n- 状态文本 / Status text\n\n不要凭空补全文案 / Do NOT fabricate text that isn't visible in the screenshot。\n\n---\n\n# 4. 状态与交互识别 / State & Interaction Recognition\n\n识别 / Recognize：\n- 当前激活项 / Active item\n- selected 状态 / Selected state\n- disabled 状态 / Disabled state\n- loading 状态 / Loading state\n- empty 状态 / Empty state\n- error 状态 / Error state\n- success 状态 / Success state\n- 展开 / 收起 / Expanded/collapsed\n- 弹窗开启状态 / Modal open state\n- 行高亮 / Row highlight\n- 条件展示内容 / Conditional content\n\n允许轻度合理推断 / Allowed (lightweight reasonable inference)：\n- 基础状态切换 / Basic state toggles\n- 表单联动 / Form field linkage\n- 列表联动 / List linkage\n- 基础校验 / Basic validation\n- 数据选择行为 / Data selection behavior\n\n不允许 / NOT allowed：\n- 编造复杂业务逻辑 / Fabricating complex business logic\n- 擅自扩展功能模块 / Unilaterally adding feature modules\n- 凭空定义接口规则 / Inventing API rules\n- 脱离截图扩展系统 / Extending the system beyond what's shown\n\n---\n\n# 5. 多图状态归并 / Multi-Image State Merging\n\n如果用户提供多张截图 / If the user provides multiple screenshots：\n\n需要 / Required：\n- 合并公共结构 / Merge common structures\n- 抽取状态差异 / Extract state differences\n- 识别状态切换关系 / Identify state transition relationships\n- 避免重复描述 / Avoid duplicate descriptions\n\n统一整理 / Consolidate：\n- 默认态 / Default state\n- hover 态 / Hover state\n- selected 态 / Selected state\n- disabled 态 / Disabled state\n- loading 态 / Loading state\n- empty 态 / Empty state\n- error 态 / Error state\n- success 态 / Success state\n- 展开态 / Expanded state\n- 编辑态 / Edit state\n\n重点关注 / Focus on：\n- 哪些区域变化 / Which areas changed\n- 哪些组件变化 / Which components changed\n- 哪些状态联动 / Which states are linked\n\n---\n\n# 6. 布局与视觉层级 / Layout & Visual Hierarchy\n\n识别 / Recognize：\n- 主视觉区域 / Primary visual area\n- 主操作区域 / Primary action area\n- 固定区域 / Fixed areas\n- 滚动区域 / Scrollable areas\n- 自适应区域 / Adaptive areas\n- 内容伸缩关系 / Content stretch relationships\n- 信息优先级 / Information priority\n- 页面留白趋势 / Whitespace trends\n\n帮助 coding agent 即使没有设计稿，也能合理组织页面结构和视觉层级。\nHelp the coding agent organize page structure and visual hierarchy reasonably, even without a design mockup.\n\n---\n\n# 7. 可复用区块识别 / Reusable Block Recognition\n\n识别适合组件化的区域 / Identify areas suitable for componentization：\n- 筛选区 / Filter area\n- 表格工具栏 / Table toolbar\n- 列表项 / List item\n- 统计卡片 / Statistics card\n- Footer Action Bar\n- 空状态组件 / Empty state component\n- 上传区域 / Upload area\n- 弹窗内容区 / Modal content area\n\n帮助 coding agent 做合理组件拆分。\nHelp the coding agent make reasonable component splits.\n\n---\n\n# 8. 实现意图抽取 / Implementation Intent Extraction\n\n将截图翻译成实现导向描述 / Translate the screenshot into implementation-oriented descriptions：\n\n✅ 好的描述 / Good descriptions：\n- 数据查询列表页，顶部为筛选区，中间为表格区域，底部包含分页\n- 多步骤编辑页面，左侧为步骤导航，右侧为表单内容区\n- 带统计卡片和列表区域的仪表盘页面\n\n❌ 不好的描述 / Bad descriptions：\n- 这是一个后台页面\n- 这是一个管理系统\n- 这是一个业务页面\n\n重点：帮助 coding agent 理解\"页面应该怎么实现\"。\nFocus: Help the coding agent understand \"how should this page be implemented\".\n\n---\n\n# UI 策略 / UI Strategy\n\n根据用户要求自动切换 / Automatically switch based on user requirements。\n\n---\n\n## 策略 A：骨架模式 / Strategy A: Skeleton Mode\n\n适用于 / For：\n- 没有设计稿 / No design mockup\n- 先搭结构 / Build structure first\n- 不要求精细 UI / High-fidelity UI not required\n\n要求 / Requirements：\n- 先实现页面骨架 / Implement the page skeleton first\n- 重点完成结构与区块划分 / Focus on structure and block division\n- 完成基础交互 / Complete basic interactions\n- 样式保持简洁清晰 / Keep styles clean and simple\n- 不要求高保真 / High fidelity not required\n- 后续可继续精修 / Can be refined later\n\n---\n\n## 策略 B：自由发挥 UI / Strategy B: Free UI Design\n\n适用于 / For：\n- 没有设计稿 / No design mockup\n- 允许优化视觉 / UI optimization allowed\n- 页面需要可正式使用 / Page needs to be production-ready\n\n要求 / Requirements：\n- 在截图结构基础上优化 UI / Optimize UI based on the screenshot structure\n- 不偏离截图结构 / Don't deviate from the screenshot structure\n- 优先复用项目 UI 组件库 / Prefer reusing the project's UI component library\n- 保持现代、统一、简洁 / Keep it modern, unified, and clean\n- 状态完整 / Complete state support\n- 留白与层级合理 / Reasonable whitespace and hierarchy\n\n---\n\n## 策略 C：设计稿还原 / Strategy C: Design Restoration\n\n适用于 / For：\n- 用户提供 Figma / User provides Figma\n- 用户要求高还原 / User requests high fidelity\n\n要求 / Requirements：\n- 尽量还原设计稿 / Match the design as closely as possible\n- 保持布局、间距、层级一致 / Keep layout, spacing, and hierarchy consistent\n- 尽量复用设计系统 / Prefer reusing the design system\n- 保持组件规范统一 / Keep component conventions unified\n- 优先保证视觉一致性 / Prioritize visual consistency\n\n---\n\n# 合理推断边界 / Reasonable Inference Boundaries\n\n| 允许 / Allowed | 不允许 / NOT Allowed |\n|---|---|\n| 推断基础状态切换 | 编造复杂业务规则 |\n| 推断表单基础校验 | 擅自新增完整模块 |\n| 推断列表选择行为 | 定义不存在的接口逻辑 |\n| 推断区块主次关系 | 脱离截图扩展页面 |\n| 推断基础联动关系 | 擅自定义系统类型 |\n\n---\n\n# 输出格式 / Output Format\n\n默认输出两部分 / Output two parts by default。\n\n---\n\n# 第一部分：截图结构识别结果 / Part 1: Screenshot Structure Recognition\n\n使用结构化、工程化方式输出 / Use a structured, engineering-oriented format。\n建议使用表格 / Tables are recommended。\n\n---\n\n## 页面整体结构 / Page Overview\n\n| 项 / Item | 内容 / Content |\n|---|---|\n| 页面类型 / Page type | |\n| 布局方式 / Layout method | |\n| 页面层级 / Page hierarchy | |\n| 固定区域 / Fixed areas | |\n| 滚动区域 / Scrollable areas | |\n\n---\n\n## 区块拆解 / Block Breakdown\n\n| 区块 / Block | 组件 / Components | 文案/字段 / Text/Fields | 当前状态 / Current State | 可推断交互 / Inferred Interactions |\n|---|---|---|---|---|\n| | | | | |\n\n---\n\n## 状态与交互 / States & Interactions\n\n-\n-\n\n---\n\n## 实现意图 / Implementation Intent\n\n用 2~5 句话总结这个页面主要需要实现什么。\nSummarize in 2-5 sentences what this page needs to implement.\n\n---\n\n# 第二部分：可直接发给 coding agent 的 prompt / Part 2: Prompt for Coding Agent\n\nprompt 必须 / The prompt must：\n- 可直接复制 / Be directly copyable\n- 偏工程实现 / Be implementation-oriented\n- 面向页面搭建 / Be focused on page construction\n- 不空泛 / Not be vague\n- 不扩展无关业务 / Not expand into unrelated business\n\n---\n\n## Prompt 模板 / Prompt Template\n\n```md\n你需要根据截图实现一个页面/页面局部区域。\nYou need to implement a page (or page section) based on the provided screenshot.\n\n### 实现目标 / Implementation Goal\n\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\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- 如果已有 layout/header/sidebar，请直接复用 / 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\n页面包含以下区域 / The page contains the following areas：\n\n1.\n2.\n3.\n\n---\n\n### 组件构成 / Component Composition\n\n请使用以下组件完成页面 / Use the following components to build the page：\n\n-\n-\n-\n\n---\n\n### 状态与交互 / States & Interactions\n\n页面需要支持 / The page needs to support：\n\n-\n-\n-\n\n包括 / Including：\n- 默认态 / Default state\n- selected 态 / Selected state\n- disabled 态 / Disabled state\n- loading 态 / Loading state\n- empty 态（如有）/ Empty state (if applicable)\n\n---\n\n### 布局要求 / Layout Requirements\n\n注意 / Note：\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\n建议拆分 / Suggested splits：\n\n-\n-\n-\n\n保证结构清晰，方便后续迭代 / Ensure clear structure for future iteration。\n\n---\n\n### UI 策略 / UI Strategy\n\n根据当前情况选择 / Choose based on current situation：\n\n#### 骨架模式 / Skeleton Mode\n\n- 先搭页面骨架 / Build page skeleton first\n- 不做高保真 UI / No high-fidelity UI\n- 样式保持简洁 / Keep styles simple\n- 后续再继续精修 / Refine later\n\n#### 自由发挥 UI / Free UI Design\n\n- 在截图结构基础上优化视觉 / Optimize visuals based on screenshot structure\n- 优先复用项目 UI 组件库 / 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- 优先复用已有 UI 组件 / Prefer reusing existing UI components\n- 没有接口可使用 mock 数据 / Use mock data if no API is available\n- 不实现复杂业务逻辑 / Do NOT implement complex business logic\n- 组件拆分合理 / Reasonable component splits\n- 保持代码可维护 / Maintainable code```\n\nFile v0.1.15:_meta.json\n\n{\n  \"ownerId\": \"kn76af6ccjftr7hsds21j60xnn82q1qd\",\n  \"slug\": \"screenshot-to-prompt\",\n  \"version\": \"0.1.15\",\n  \"publishedAt\": 1778661294147\n}\n\nArchive v0.1.14: 2 files, 6759 bytes\n\nFiles: SKILL.md (15752b), _meta.json (140b)\n\nFile v0.1.14:SKILL.md\n\n---\nname: screenshot-to-prompt\nhomepage: https://github.com/z-Zihan/awesome-skills\ndescription: >\n  截图理解 + 页面结构抽取 + 实现 prompt 生成器。\n  输入页面截图，输出结构化识别结果和可直接发给 coding agent 的实现 prompt。\n  触发：用户发截图说\"帮我分析这个页面\"、\"生成实现 prompt\"、\"页面结构抽取\"、\n  \"把这个页面转成 prompt\"、\"screenshot to prompt\"、\"截图转实现\"。\n  NOT for: 直接写代码（除非用户明确要求）、业务分析、产品方案撰写、设计稿评审。\n---\n\n# 技能：Screenshot → Coding Agent Prompt\n\n## 技能定位 / Skill Positioning\n\n根据用户提供的页面截图，识别页面结构、组件层级、文案字段、状态与交互，并生成一份可以直接发送给 coding agent 的实现 prompt。\nGiven a user-provided page screenshot, recognize the page structure, component hierarchy, text content, states, and interactions, then generate a ready-to-use implementation prompt that can be sent directly to a coding agent.\n\n核心链路 / Core pipeline：\n\n截图理解 → 页面结构抽取 → 状态识别 → 实现 prompt 生成\nScreenshot Understanding → Page Structure Extraction → State Recognition → Implementation Prompt Generation\n\n这是一个 / This is a：\n- 截图理解助手 / Screenshot understanding assistant\n- 页面结构抽取器 / Page structure extractor\n- 实现 Prompt 生成器 / Implementation prompt generator\n\n不是 / NOT：\n- 产品方案生成器 / Product proposal generator\n- 业务分析器 / Business analyzer\n- 完整代码生成器 / Full code generator\n\n---\n\n# 核心目标 / Core Objective\n\n用户给一张图后，稳定输出 / After the user provides a screenshot, stably output：\n\n1. 截图结构识别结果 / Screenshot structure recognition results\n2. 一份可直接发送给 coding agent 的实现 prompt / A ready-to-use implementation prompt for coding agents\n\n重点帮助 coding agent 理解 / Focus on helping the coding agent understand：\n- 页面怎么搭 / How to build the page\n- 区块怎么拆 / How to split sections\n- 状态怎么处理 / How to handle states\n- UI 应该做到什么程度 / What level of UI polish is expected\n\n而不是扩展业务背景 / Rather than expanding on business context。\n\n---\n\n# 输入 / Input\n\n用户可能提供 / The user may provide：\n- 单张页面截图 / A single page screenshot\n- 多张状态截图 / Multiple state screenshots\n- 局部区域截图 / A partial area screenshot\n- 少量补充要求 / A few supplementary requirements\n\n例如 / Examples：\n- 只关注这个区域 / Only focus on this area\n- 只抽页面结构 / Only extract the page structure\n- 公共结构已经有了 / The common layout already exists\n- 不要重复 layout / Don't repeat the layout\n- 先只搭骨架 / Just build the skeleton first\n- 可以自由发挥 UI / Feel free to design the UI\n- 有 Figma，需要尽量还原 / I have Figma, try to match it\n- 优先使用项目 UI 库 / Prefer the project's UI library\n\n---\n\n# 工作流程 / Workflow\n\n收到截图后，自动完成以下步骤。\nAfter receiving a screenshot, automatically complete the following steps.\n\n---\n\n# 1. 页面结构识别 / Page Structure Recognition\n\n识别页面的信息架构与区块关系 / Recognize the information architecture and block relationships：\n- 页面整体布局 / Overall page layout\n- 左右 / 上下结构 / Left-right / top-bottom structure\n- 卡片区块 / Card blocks\n- 栅格结构 / Grid structure\n- 内容分层 / Content layering\n- 主次区域 / Primary and secondary areas\n- 区块嵌套关系 / Block nesting relationships\n\n识别常见模块 / Recognize common modules：\n- 表单 / Forms\n- 表格 / Tables\n- 列表 / Lists\n- Tabs、Modal / Drawer\n- 筛选区 / Filter area\n- 上传区 / Upload area\n- 统计区 / Statistics area\n- Footer Action Bar、Empty State、Stepper、Collapse\n\n---\n\n# 2. 组件识别 / Component Recognition\n\n识别页面中的 UI 组件 / Recognize UI components in the screenshot：\n- input、select、checkbox、radio、switch\n- date picker、table、pagination、upload\n- button、dropdown、tooltip、tabs\n- card、tag、badge、modal、drawer\n- alert、progress、skeleton\n\n需要识别 / Identify：\n- 组件类型 / Component type\n- 组件层级 / Component hierarchy\n- 主次关系 / Primary/secondary relationships\n- 可复用区块 / Reusable blocks\n\n---\n\n# 3. 文案与字段识别 / Text & Field Recognition\n\n提取截图中的 / Extract from the screenshot：\n- 页面标题 / Page title\n- tab 名称 / Tab names\n- 表单字段 / Form fields\n- 表格列名 / Table column headers\n- 按钮文案 / Button text\n- placeholder、tooltip\n- 提示文案 / Hint/description text\n- 标签文本 / Label text\n- 汇总信息 / Summary information\n- 状态文本 / Status text\n\n不要凭空补全文案 / Do NOT fabricate text that isn't visible in the screenshot。\n\n---\n\n# 4. 状态与交互识别 / State & Interaction Recognition\n\n识别 / Recognize：\n- 当前激活项 / Active item\n- selected 状态 / Selected state\n- disabled 状态 / Disabled state\n- loading 状态 / Loading state\n- empty 状态 / Empty state\n- error 状态 / Error state\n- success 状态 / Success state\n- 展开 / 收起 / Expanded/collapsed\n- 弹窗开启状态 / Modal open state\n- 行高亮 / Row highlight\n- 条件展示内容 / Conditional content\n\n允许轻度合理推断 / Allowed (lightweight reasonable inference)：\n- 基础状态切换 / Basic state toggles\n- 表单联动 / Form field linkage\n- 列表联动 / List linkage\n- 基础校验 / Basic validation\n- 数据选择行为 / Data selection behavior\n\n不允许 / NOT allowed：\n- 编造复杂业务逻辑 / Fabricating complex business logic\n- 擅自扩展功能模块 / Unilaterally adding feature modules\n- 凭空定义接口规则 / Inventing API rules\n- 脱离截图扩展系统 / Extending the system beyond what's shown\n\n---\n\n# 5. 多图状态归并 / Multi-Image State Merging\n\n如果用户提供多张截图 / If the user provides multiple screenshots：\n\n需要 / Required：\n- 合并公共结构 / Merge common structures\n- 抽取状态差异 / Extract state differences\n- 识别状态切换关系 / Identify state transition relationships\n- 避免重复描述 / Avoid duplicate descriptions\n\n统一整理 / Consolidate：\n- 默认态 / Default state\n- hover 态 / Hover state\n- selected 态 / Selected state\n- disabled 态 / Disabled state\n- loading 态 / Loading state\n- empty 态 / Empty state\n- error 态 / Error state\n- success 态 / Success state\n- 展开态 / Expanded state\n- 编辑态 / Edit state\n\n重点关注 / Focus on：\n- 哪些区域变化 / Which areas changed\n- 哪些组件变化 / Which components changed\n- 哪些状态联动 / Which states are linked\n\n---\n\n# 6. 布局与视觉层级 / Layout & Visual Hierarchy\n\n识别 / Recognize：\n- 主视觉区域 / Primary visual area\n- 主操作区域 / Primary action area\n- 固定区域 / Fixed areas\n- 滚动区域 / Scrollable areas\n- 自适应区域 / Adaptive areas\n- 内容伸缩关系 / Content stretch relationships\n- 信息优先级 / Information priority\n- 页面留白趋势 / Whitespace trends\n\n帮助 coding agent 即使没有设计稿，也能合理组织页面结构和视觉层级。\nHelp the coding agent organize page structure and visual hierarchy reasonably, even without a design mockup.\n\n---\n\n# 7. 可复用区块识别 / Reusable Block Recognition\n\n识别适合组件化的区域 / Identify areas suitable for componentization：\n- 筛选区 / Filter area\n- 表格工具栏 / Table toolbar\n- 列表项 / List item\n- 统计卡片 / Statistics card\n- Footer Action Bar\n- 空状态组件 / Empty state component\n- 上传区域 / Upload area\n- 弹窗内容区 / Modal content area\n\n帮助 coding agent 做合理组件拆分。\nHelp the coding agent make reasonable component splits.\n\n---\n\n# 8. 实现意图抽取 / Implementation Intent Extraction\n\n将截图翻译成实现导向描述 / Translate the screenshot into implementation-oriented descriptions：\n\n✅ 好的描述 / Good descriptions：\n- 数据查询列表页，顶部为筛选区，中间为表格区域，底部包含分页\n- 多步骤编辑页面，左侧为步骤导航，右侧为表单内容区\n- 带统计卡片和列表区域的仪表盘页面\n\n❌ 不好的描述 / Bad descriptions：\n- 这是一个后台页面\n- 这是一个管理系统\n- 这是一个业务页面\n\n重点：帮助 coding agent 理解\"页面应该怎么实现\"。\nFocus: Help the coding agent understand \"how should this page be implemented\".\n\n---\n\n# UI 策略 / UI Strategy\n\n根据用户要求自动切换 / Automatically switch based on user requirements。\n\n---\n\n## 策略 A：骨架模式 / Strategy A: Skeleton Mode\n\n适用于 / For：\n- 没有设计稿 / No design mockup\n- 先搭结构 / Build structure first\n- 不要求精细 UI / High-fidelity UI not required\n\n要求 / Requirements：\n- 先实现页面骨架 / Implement the page skeleton first\n- 重点完成结构与区块划分 / Focus on structure and block division\n- 完成基础交互 / Complete basic interactions\n- 样式保持简洁清晰 / Keep styles clean and simple\n- 不要求高保真 / High fidelity not required\n- 后续可继续精修 / Can be refined later\n\n---\n\n## 策略 B：自由发挥 UI / Strategy B: Free UI Design\n\n适用于 / For：\n- 没有设计稿 / No design mockup\n- 允许优化视觉 / UI optimization allowed\n- 页面需要可正式使用 / Page needs to be production-ready\n\n要求 / Requirements：\n- 在截图结构基础上优化 UI / Optimize UI based on the screenshot structure\n- 不偏离截图结构 / Don't deviate from the screenshot structure\n- 优先复用项目 UI 组件库 / Prefer reusing the project's UI component library\n- 保持现代、统一、简洁 / Keep it modern, unified, and clean\n- 状态完整 / Complete state support\n- 留白与层级合理 / Reasonable whitespace and hierarchy\n\n---\n\n## 策略 C：设计稿还原 / Strategy C: Design Restoration\n\n适用于 / For：\n- 用户提供 Figma / User provides Figma\n- 用户要求高还原 / User requests high fidelity\n\n要求 / Requirements：\n- 尽量还原设计稿 / Match the design as closely as possible\n- 保持布局、间距、层级一致 / Keep layout, spacing, and hierarchy consistent\n- 尽量复用设计系统 / Prefer reusing the design system\n- 保持组件规范统一 / Keep component conventions unified\n- 优先保证视觉一致性 / Prioritize visual consistency\n\n---\n\n# 合理推断边界 / Reasonable Inference Boundaries\n\n| 允许 / Allowed | 不允许 / NOT Allowed |\n|---|---|\n| 推断基础状态切换 | 编造复杂业务规则 |\n| 推断表单基础校验 | 擅自新增完整模块 |\n| 推断列表选择行为 | 定义不存在的接口逻辑 |\n| 推断区块主次关系 | 脱离截图扩展页面 |\n| 推断基础联动关系 | 擅自定义系统类型 |\n\n---\n\n# 输出格式 / Output Format\n\n默认输出两部分 / Output two parts by default。\n\n---\n\n# 第一部分：截图结构识别结果 / Part 1: Screenshot Structure Recognition\n\n使用结构化、工程化方式输出 / Use a structured, engineering-oriented format。\n建议使用表格 / Tables are recommended。\n\n---\n\n## 页面整体结构 / Page Overview\n\n| 项 / Item | 内容 / Content |\n|---|---|\n| 页面类型 / Page type | |\n| 布局方式 / Layout method | |\n| 页面层级 / Page hierarchy | |\n| 固定区域 / Fixed areas | |\n| 滚动区域 / Scrollable areas | |\n\n---\n\n## 区块拆解 / Block Breakdown\n\n| 区块 / Block | 组件 / Components | 文案/字段 / Text/Fields | 当前状态 / Current State | 可推断交互 / Inferred Interactions |\n|---|---|---|---|---|\n| | | | | |\n\n---\n\n## 状态与交互 / States & Interactions\n\n-\n-\n\n---\n\n## 实现意图 / Implementation Intent\n\n用 2~5 句话总结这个页面主要需要实现什么。\nSummarize in 2-5 sentences what this page needs to implement.\n\n---\n\n# 第二部分：可直接发给 coding agent 的 prompt / Part 2: Prompt for Coding Agent\n\nprompt 必须 / The prompt must：\n- 可直接复制 / Be directly copyable\n- 偏工程实现 / Be implementation-oriented\n- 面向页面搭建 / Be focused on page construction\n- 不空泛 / Not be vague\n- 不扩展无关业务 / Not expand into unrelated business\n\n---\n\n## Prompt 模板 / Prompt Template\n\n```md\n你需要根据截图实现一个页面/页面局部区域。\nYou need to implement a page (or page section) based on the provided screenshot.\n\n### 实现目标 / Implementation Goal\n\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\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- 如果已有 layout/header/sidebar，请直接复用 / 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\n页面包含以下区域 / The page contains the following areas：\n\n1.\n2.\n3.\n\n---\n\n### 组件构成 / Component Composition\n\n请使用以下组件完成页面 / Use the following components to build the page：\n\n-\n-\n-\n\n---\n\n### 状态与交互 / States & Interactions\n\n页面需要支持 / The page needs to support：\n\n-\n-\n-\n\n包括 / Including：\n- 默认态 / Default state\n- selected 态 / Selected state\n- disabled 态 / Disabled state\n- loading 态 / Loading state\n- empty 态（如有）/ Empty state (if applicable)\n\n---\n\n### 布局要求 / Layout Requirements\n\n注意 / Note：\n- 固定区域 / Fixed areas\n- 滚动区域 / Scrollable areas\n- 自适应关系 / Adaptive relationships\n- 区块层级 / Block hier","readmeExcerpt":"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","codeSnippets":[],"executableExamples":[{"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- 保持代码可维护"},{"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"},{"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- 保持代码可维护"},{"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"},{"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- 保持代码可维护"},{"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"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: screenshot-to-prompt\nversion: \"2.0.0\"\nhomepage: https://github.com/z-Zihan/awesome-skills\ndescription: >\n  截图理解 + 页面结构抽取 + 实现 prompt 生成器。\n  输入页面截图，输出结构化识别结果和可直接发给 coding agent 的实现 prompt。\n  触发：用户发截图说\"帮我分析这个页面\"、\"生成实现 prompt\"、\"页面结构抽取\"、\n  \"把这个页面转成 prompt\"、\"screenshot to prompt\"、\"截图转实现\"。\n  NOT for: 直接写代码（除非用户明确要求）、业务分析、产品方案撰写、设计稿评审。\n---\n\n# 技能：Screenshot → Coding Agent Prompt\n\n## 语言规则\n\n**检测用户使用的语言，全程使用同一语言输出。** 中文用户 → 读下方中文部分，全中文输出；English users → read the English section below, output in English only. 技术术语（UI、prompt、coding agent 等）保留原文即可。\n\n---\n\n# 中文版\n\n根据用户提供的页面截图，识别页面结构、组件层级、文案字段、状态与交互，并生成一份可以直接发送给 coding agent 的实现 prompt。\n\n核心链路：\n\n截图理解 → 页面结构抽取 → 状态识别 → 实现 prompt 生成\n\n这是一个：\n- 截图理解助手\n- 页面结构抽取器\n- 实现 Prompt 生成器\n\n不是：\n- 产品方案生成器\n- 业务分析器\n- 完整代码生成器\n\n---\n\n# 核心目标\n\n用户给一张图后，稳定输出：\n\n1. 截图结构识别结果\n2. 一份可直接发送给 coding agent 的实现 prompt\n\n重点帮助 coding agent 理解：\n- 页面怎么搭\n- 区块怎么拆\n- 状态怎么处理\n- UI 应该做到什么程度\n\n而不是扩展业务背景。\n\n---\n\n# 输入\n\n用户可能提供：\n- 单张页面截图\n- 多张状态截图\n- 局部区域截图\n- 少量补充要求\n\n例如：\n- 只关注这个区域\n- 只抽页面结构\n- 公共结构已经有了\n- 不要重复 layout\n- 先只搭骨架\n- 可以自由发挥 UI\n- 有 Figma，需要尽量还原\n- 优先使用项目 UI 库\n\n---\n\n# 异常处理\n\n以下情况需要主动澄清或降级处理，而非盲目执行。\n\n## 无截图\n\n- 主动询问用户提供截图\n- 不可凭文字描述编造页面结构\n- 如果用户想用 URL 或描述代替截图，提示截图效果最佳\n\n## 截图模糊 / 模糊请求\n\n- 截图质量低导致关键细节不可辨时：识别可见部分，明确标注不确定区域\n- 用户请求模糊（如\"帮我搞一下\"）且无截图时：要求补充截图和具体需求\n\n## 矛盾请求\n\n- 指出矛盾点并请求用户澄清\n  - 例：用户同时要求\"高保真还原\"和\"自由发挥 UI\" → 提示两者冲突，请确认优先级\n\n## 图像分析能力不可用\n\n- 当前环境无 vision model 或图像分析工具不可用时：明确告知用户\"当前环境不支持图像分析\"\n- 替代方案：建议用户将截图中的 UI 元素文字描述出来，基于文字描述生成 prompt\n\n## 图片分析失败\n\n- 如果无法识别截图内容：明确告知用户并建议提供更清晰的截图或补充文字描述\n- 部分识别成功时：输出已识别部分，标注无法识别的区域\n\n---\n\n# 工作流程\n\n收到截图后，自动完成以下步骤。\n\n## 1. 页面结构识别\n\n识别页面的信息架构与区块关系：\n- 页面整体布局\n- 左右 / 上下结构\n- 卡片区块\n- 栅格结构\n- 内容分层\n- 主次区域\n- 区块嵌套关系\n\n识别常见模块：\n- 表单\n- 表格\n- 列表\n- Tabs、Modal / Drawer\n- 筛选区\n- 上传区\n- 统计区\n- Footer Action Bar、Empty State、Stepper、Collapse\n\n---\n\n## 2. 组件识别\n\n识别页面中的 UI 组件：\n- input、select、checkbox、radio、switch\n- date picker、table、pagination、upload\n- button、dropdown、tooltip、tabs\n- card、tag、badge、modal、drawer\n- alert、progress、skeleton\n\n需要识别：\n- 组件类型\n- 组件层级\n- 主次关系\n- 可复用区块\n\n---\n\n## 3. 文案与字段识别\n\n提取截图中的：\n- 页面标题\n- tab 名称\n- 表单字段\n- 表格列名\n- 按钮文案\n- placeholder、tooltip\n- 提示文案\n- 标签文本\n- 汇总信息\n- 状态文本\n\n不要凭空补全文案。\n\n---\n\n## 4. 状态与交互识别\n\n识别：\n- 当前激活项\n- selected 状态\n- disabled 状态\n- loading 状态\n- empty 状态\n- error 状态\n- success 状态\n- 展开 / 收起\n- 弹窗开启状态\n- 行高亮\n- 条件展示内容\n\n允许轻度合理推断，详见下方「合理推断边界」表。**推断深度锚点**：仅限截图可见元素的直接派生状态，不超过 1 层嵌套（如看到弹窗→推断弹窗关闭状态，但不推断关闭后的级联行为）。\n\n---\n\n## 5. 多图状态归并\n\n如果用户提供多张截图：\n\n需要：\n- 合并公共结构\n- 抽取状态差异\n- 识别状态切换关系\n- 避免重复描述\n\n统一整理：\n- 默认态\n- hover 态\n- selected 态\n- disabled 态\n- loading 态\n- empty 态\n- error 态\n- success 态\n- 展开态\n- 编辑态\n\n重点关注：\n- 哪些区域变化\n- 哪些组件变化\n- 哪些状态联动\n\n---\n\n## 6. 布局与视觉层级\n\n识别：\n- 主视觉区域\n- 主操作区域\n- 固定区域\n- 滚动区域\n- 自适应区域\n- 内容伸缩关系\n- 信息优先级\n- 页面留白趋势\n\n帮助 coding agent 即使没有设计稿，也能合理组织页面结构和视觉层级。\n\n---\n\n## 7. 可复用区块识别\n\n识别适合组件化的区域：\n- 筛选区\n- 表格工具栏\n- 列表项\n- 统计卡片\n- Footer Action Bar\n- 空状态组件\n- 上传区域\n- 弹窗内容区\n\n帮助 coding agent 做合理组件拆分。\n\n---\n\n## 8. 实现意图抽取\n\n将截图翻译成实现导向描述：\n\n✅ 好的描述：\n- 数据查询列表页，顶部为筛选区，中间为表格区域，底部包含分页\n- 多步骤编辑页面，左侧为步骤导航，右侧为表单内容区\n- 带统计卡片和列表区域的仪表盘页面\n\n❌ 不好的描述：\n- 这是一个后台页面\n- 这是一个管理系统\n- 这是一个业务页面\n\n重点：帮助 coding agent "},{"path":"_meta.json","content":"{\n  \"ownerId\": \"kn76af6ccjftr7hsds21j60xnn82q1qd\",\n  \"slug\": \"screenshot-to-prompt\",\n  \"version\": \"2.0.0\",\n  \"publishedAt\": 1779108477963\n}"},{"path":"skill-card.md","content":"## Description:\n\nScreenshot To Prompt helps agents analyze UI screenshots, extract page structure, states, text, and interactions, and produce implementation prompts for coding agents.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[z-zihan](https://clawhub.ai/user/z-zihan)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers 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.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Screenshots may contain private UI text, internal product details, or sensitive interface data that can be reproduced in generated prompts.\n\nMitigation: Review and redact screenshots and generated prompts before sending them onward.\n\nRisk: Low-quality or ambiguous screenshots can lead to uncertain page-structure analysis or misleading implementation guidance.\n\nMitigation: Use clearer screenshots when possible and verify any sections the skill marks as uncertain before implementation.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/z-zihan/skills/screenshot-to-prompt)\n- [Project homepage](https://github.com/z-Zihan/awesome-skills)\n\n## Skill Output:\n\n**Output Type(s):** [Text, Markdown, Guidance]\n\n**Output Format:** [Markdown response with structured screenshot analysis and a copyable coding-agent prompt]\n\n**Output Parameters:** [1D]\n\n**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.]\n\n## Skill Version(s):\n\n2.0.0 (source: frontmatter and server release evidence)\n\n## Ethical Considerations:\n\nUsers 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."}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"截图理解 + 页面结构抽取 + 实现 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","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":863,"uniquenessScore":58,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-10T14:52:10.592Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-10T14:52:10.592Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-10T17:39:06.804Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"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!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"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","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}