Quick Start

Introduction

Snapmark is a visual UI development tool that helps AI precisely understand your UI modification intent through visual selection and accurate DOM information, generating code that truly meets your expectations.

The Problem We Solve

When working with AI for UI development, developers often struggle with:

• Vague screenshots that AI can't properly interpret
• Text descriptions that fail to convey precise UI modification needs
• Generated code that doesn't match what you actually wanted
• Time wasted on back-and-forth clarifications with AI

Snapmark solves these pain points by providing AI with exact DOM information and visual context, ensuring accurate code generation from the start.

Core Components

How It Works

1. Visual Selection: Use the browser extension to select UI elements visually
2. Capture Context: Snapmark captures complete DOM information, styles, and structure
3. Describe Intent: Explain your modification needs in natural language
4. Generate Code: AI receives precise context and generates accurate code
5. Apply Changes: Code is sent directly to your IDE for immediate use

Quick Installation

Browser Extension

Manual Installation Steps

1. Download Extension Package
   Visit: https://res.snapmark.org/snapmark-prod-1.0.3.zip

2. Extract Files
   Extract the downloaded snapmark-prod-1.0.3.zip to a local folder

3. Open Extensions Page
   Chrome: Type chrome://extensions/ in address bar
   Edge: Type edge://extensions/ in address bar

4. Enable Developer Mode
   Toggle "Developer mode" switch in the top right corner

5. Load Extension
   Click "Load unpacked"
   Select the extracted folder

6. Pin Extension
   Click the extensions icon in browser toolbar
   Find Snapmark and click the pin icon

Firefox version coming soon
Please use Chrome or Edge browser for now

Safari version coming soon
Please use Chrome or Edge browser for now

Getting Started

1. Basic Usage

Once installed, using Snapmark is simple:

1. Activate Extension: Click the Snapmark icon in your browser toolbar
2. Select Elements: Hover and click to select UI elements
3. Capture Information: Snapmark captures DOM structure, styles, and context
4. Send to IDE: With one click, send the information to your IDE
5. Generate Code: AI uses the precise context to generate accurate code

2. Key Features

3. Common Use Cases

• UI Modifications: Select elements and describe changes in natural language
• Component Extraction: Convert existing UI into reusable components
• Style Updates: Modify styles with precise CSS property capture
• Responsive Design: Generate responsive code from desktop designs
• Accessibility: Check and improve ARIA attributes and compliance
• Performance: Analyze and optimize element rendering

4. Workflow Integration

Snapmark integrates with your existing development workflow:

• AI Models: Works with OpenAI GPT, Anthropic Claude, and custom LLMs
• Version Control: Track UI modifications with built-in history
• Team Collaboration: Share selections and modifications with team members

FAQ

Learn More

Explore Snapmark's features and capabilities:

Get Support

• Email Support: [email protected]