截图转JSON蓝图，AI生成UI不再瞎猜

CropCode 深度拆解报告

【这是什么】 CropCode 是一个 Chrome 扩展，解决用视觉参考让 Claude、GPT、Cursor、Windsurf 生成 UI 组件时的日常摩擦。原始做法是把位图截图扔进多模态上下文窗口，每次提示消耗 数千个视觉 token；视觉模型按像素猜布局，容易输出嵌套 div 汤、错乱空间逻辑和近似 CSS，需要多轮清理。

CropCode 的工作流是：用 Alt+X 裁剪任意屏幕区域，扩展提取干净、带类型的 JSON 蓝图，表示空间层级、组件角色和 token 级布局规则；把结构化文本喂给 LLM，而不是喂图片。目标是第一次运行就得到确定性的、可直接用于生产的组件。隐私设计上，它完全在本地易失性内存中运行，零遥测，截图 零云端存储。帖子称第一条评论附 Chrome 网上应用店 链接和 15 秒 工作流演示。

【背景 / 谁做的】 提交者是 Reddit 用户 /u/carlos_travel_check。正文没有披露 GitHub 仓库、Star、语言、README、团队背景、公司信息或创始人身份。产品以 Chrome 扩展 形态分发，入口是 Chrome 网上应用店。它的定位不是通用截图工具，而是 AI 编码代理的“视觉参考转结构化输入”中间层。相关帖子均为其他主题，未提供 CropCode 的额外 GitHub 或收入数据。

【怎么获客】 核心渠道是 Reddit 发帖，并在第一条评论放 Chrome 网上应用店 链接和 15 秒 演示。文案策略很明确：

• 反直觉标题：“给你的 AI 它真正理解的语言：它用结构化模式和层级进行推理，而不是图像。切换到 JSON 会改变一切。”
• 点名高频工具：Claude、GPT、Cursor、Windsurf，直接锁定 AI 编码用户。
• 痛点具体化：token 消耗、布局幻觉、嵌套 div 汤、错乱空间逻辑、近似 CSS、多轮清理。
• 隐私卖点：本地易失性内存、零遥测、零云端存储。
• 降低行动门槛：15 秒 演示加商店链接放评论，不在正文里硬转化。

可复制动作：在 AI 编码社区做 before/after 对比，同一截图分别走多模态和 JSON 蓝图，量化 token 消耗、首轮生成质量、清理轮次。

【验证情况 / MRR】 帖子未披露 MRR、收入、用户量、转化率、留存、付费数据。也未提供 GitHub 仓库描述、Star、语言、README、提交历史、贡献者。唯一可验证的公开产品动作是：CropCode 以 Chrome 扩展 存在，Alt+X 区域裁剪，生成结构化 JSON，本地运行，零遥测、零云端存储，第一条评论有 Chrome 网上应用店 链接和 15 秒 演示。

商业验证程度：有可安装产品、有演示、有明确工作流；收入侧公开数据为零。对一人公司参考时，这是“产品已上线、社区找反馈”的阶段，不是已验证收入的案例。

【对一人公司的可复制性】 高。形态是 Chrome 扩展，核心可以用 Chrome Extension + JavaScript / TypeScript 实现；区域选择、页面 DOM 快照、样式和布局信息提取、生成 JSON schema，可全部本地完成，无需后端，成本低。关键不在截图，而在结构化中间表示：空间层级、组件角色、token 级布局规则。如果 schema 设计得足够确定，不同 LLM 和编码代理都能消费。

差异化点： - schema 准确率和覆盖范围； - 对 React、Vue、Tailwind、Svelte 等常见技术栈的适配； - token 节省量化； - 与 Cursor、Windsurf、Chrome 开发者工具、Figma、Storybook 的集成。

变现可走免费扩展 + Pro：复杂页面、批量处理、团队 schema、CI 集成、API。获客可复制 Reddit 发帖 + 第一条评论放商店链接 + 15 秒 演示。风险是仅做“截图转 JSON”容易被大模型原生能力或 IDE 内置功能覆盖，护城河在 schema 标准和深度集成。

【风险与机会】 风险： - 平台依赖 Chrome 网上应用店，审核、下架、权限变更影响分发。 - 多模态模型持续进步，视觉 token 成本和布局理解改善后，原始痛点强度下降。 - 结构化 JSON 识别错误会直接破坏“第一次就生成可用组件”的承诺。 - Cursor、Windsurf 等编码代理可能内置类似能力。 - 本地运行保护隐私，但限制复杂能力；云端方案更强，却与目标用户隐私诉求冲突。 - MRR、用户量、留存未披露，无法判断付费意愿。

机会： - 成为“视觉参考 -> 结构化代码输入”的标准中间层，开放 schema，让不同 LLM / 代理消费。 - 面向前端团队做设计稿 / 截图转组件的确定性管道，减少多轮清理。 - 做 token 成本计算器和 before/after 对比，直接展示从 数千个视觉 token 到结构化文本的节省。 - 与 Figma、Storybook、Chrome 开发者工具集成，进入设计到代码工作流。 - 一人公司可聚焦特定框架，如 React + Tailwind、Vue、Svelte，做深度优化，而不是通用工具。 - 隐私卖点：零遥测、零云端存储，适合对截图和代码敏感的企业开发者。

信息来源：Reddit 帖子正文。