Snapmark

Snapmark是什么？

Snapmark是一款面向前端开发者的可视化UI开发与AI辅助编码工具，你直接在浏览器上扩展安装 snapmark，在网页里精确点击，选择你要修改的UI元素，自动捕捉完整 DOM 元素及其上下文样式，，让 AI 能够真正理解你的修改意图，从而生成符合预期的高质量代码。

支持 Chrome、VS Code、Cursor IDE 等无缝整合，并可以调用各种已有的 AI 模型（比如 OpenAI GPT-4 / GPT-3.5，Anthropic Claude）等辅助你进行开发。针对 Next.js 和 Tailwind CSS 进行了专门优化，生成最佳实践组件，正确定义Typescript 类型，充分利用设计系统。

核心功能

• 精准UI元素选择：在浏览器上扩展安装Snapmark，选中的页面元素可以直接在网页上进行点击、选取。自动完整捕捉选取中的 DOM 元素以及上下文样式信息，无需截图、无需自然语言文字说明来解释想改什么，因为传统方法容易模糊不清晰，难使对方理解你想表达的具体含义。
• 自然语言修改说明：同时使用 Snapmark 选取的页面元素及你的具体语言文字描述、说明等修改要求，让 AI 知道你要改什么，怎么改。
• 无缝IDE集成：支持与 VS Code、Cursor IDE 等开发环境联动，可以把从浏览器选取并导出的 UI 页面元素或部件，以及你的具体的语言文字修改说明都送入 IDE 并自动分析，给出其 TypeScript / React / Next.js / Tailwind CSS 程序代码。
• 多模型支持：可调用 OpenAI GPT-4 / GPT-3.5、Anthropic Claude 等 AI 模型进行代码生成与优化。
• 团队协作（Team 版）：支持多人实时共享 UI 选择与标注、版本历史追踪、批量修改、组件自动生成等功能。

适用场景

• 前端UI调整：快速定位并修改页面元素样式或结构。
• 组件开发：从视觉选择直接生成高质量 React 组件。
• 团队协作：多人同步标注 UI 修改意图，减少沟通成本。
• AI辅助编码：让 AI 在有完整上下文的情况下生成更准确的代码。

Snapmark的产品价格方案

Snapmark官网及使用教程

官网网址：https://snapmark.org/

步骤 1：安装浏览器扩展

目前 Snapmark需要手动安装（Chrome / Edge），商店版本即将上线。

1. 下载扩展包：访问snapmark-prod-1.0.3.zip下载地址
2.  解压到本地文件夹
3. 打开扩展管理页面：Chrome地址栏输入chrome://extensions/， Edge 地址栏输入edge://extensions/。
4. 开启右上角 开发者模式
5. 点击 “加载已解压的扩展程序”，选择刚解压的文件夹
6. 固定扩展：点击浏览器工具栏的扩展图标，找到 Snapmark 并点击📌图标

步骤 2：激活扩展并选择元素

点击浏览器工具条 Snapmark 图标，将鼠标的光标悬停在要记录的网页元素上，单击该元素即对该元素进行选择，Snapmark 会自动记录选中元素的 DOM 结构、样式及上下文等信息。

步骤 3：描述修改意图

在弹出的 Snapmark 面板中，用自然语言描述你想要的修改，你也可以选择将这些信息直接发送到 IDE。

步骤 4：与 IDE 集成

Snapmark 可以支持 IDE，如 Visual Studio Code（VS Code）和 Cursor，然后在安装的 Snapmark IDE（由 Python 编写的运行器）中使用插件获取由浏览器返回的信息的描述、修改的描述，最终访问调用 AI（如 GPT-4 和 Claude），由 AI 结合全面的上下文给出用户期望的结果。

步骤 5：生成并应用代码

AI生成代码后，你可以在IDE中直接查看，复制或自动应用到项目中，运行项目验证效果。