快速入门

简介

Snapmark 是一个可视化 UI 开发工具，通过可视化选择和精确的 DOM 信息传递，让 AI 完全理解你的 UI 修改意图，生成真正符合预期的代码。

我们解决的问题

在使用 AI 进行 UI 开发时，开发者经常遇到以下问题：

• AI 无法正确理解模糊的截图
• 文字描述无法准确传达 UI 修改需求
• 生成的代码与实际需求不符
• 浪费时间在与 AI 的反复沟通上

Snapmark 通过为 AI 提供精确的 DOM 信息和视觉上下文，从一开始就确保准确的代码生成，解决了这些痛点。

核心组件

工作原理

1. 可视化选择：使用浏览器扩展可视化选择 UI 元素
2. 捕获上下文：Snapmark 捕获完整的 DOM 信息、样式和结构
3. 描述意图：用自然语言说明你的修改需求
4. 生成代码：AI 接收精确的上下文并生成准确的代码
5. 应用更改：代码直接发送到 IDE 供立即使用

快速安装

浏览器扩展

手动安装步骤

1. 下载扩展包
   访问: https://res.snapmark.org/snapmark-prod-1.0.3.zip

2. 解压文件
   将下载的 snapmark-prod-1.0.3.zip 解压到本地文件夹

3. 打开扩展管理页面
   Chrome: 在地址栏输入 chrome://extensions/
   Edge: 在地址栏输入 edge://extensions/

4. 开启开发者模式
   在页面右上角打开"开发者模式"开关

5. 加载扩展
   点击"加载已解压的扩展程序"
   选择刚才解压的文件夹

6. 固定扩展
   点击浏览器工具栏的扩展图标
   找到 Snapmark 并点击"固定"图标

Firefox 版本即将推出
暂时请使用 Chrome 或 Edge 浏览器

Safari 版本即将推出
暂时请使用 Chrome 或 Edge 浏览器

开始使用

1. 基本用法

安装完成后，使用 Snapmark 非常简单：

1. 激活扩展：点击浏览器工具栏中的 Snapmark 图标
2. 选择元素：悬停并点击选择 UI 元素
3. 捕获信息：Snapmark 捕获 DOM 结构、样式和上下文
4. 发送到 IDE：一键将信息发送到您的 IDE
5. 生成代码：AI 使用精确的上下文生成准确的代码

2. 核心功能

3. 常见用例

• UI 修改：选择元素并用自然语言描述更改
• 组件提取：将现有 UI 转换为可重用组件
• 样式更新：通过精确的 CSS 属性捕获修改样式
• 响应式设计：从桌面设计生成响应式代码
• 无障碍性：检查和改进 ARIA 属性和合规性
• 性能：分析和优化元素渲染

4. 工作流集成

Snapmark 与您现有的开发工作流集成：

• AI 模型：支持 OpenAI GPT、Anthropic Claude 和自定义 LLM
• 版本控制：使用内置历史记录跟踪 UI 修改
• 团队协作：与团队成员共享选择和修改

常见问题

了解更多

探索 Snapmark 的功能和能力：

获取支持

• 电子邮件支持：[email protected]