Connected Tools

PixelFrame integrates with five key tools in the design-to-development workflow:

Orchestration Flow

When all tools are connected, the platform coordinates your workflow — but you control each step:

Figma Plugin

Version Control

PixelFrame provides Git-like version control for Figma designs. Commits are user-curated — you review and approve before any version is created.

• Baseline Snapshots — Property hashes track the exact state of each screen
• User-Curated Commits — You review detected changes and choose which to include
• Named Versions — Add descriptions to each commit (e.g., "Login redesign")
• Rollback — Restore any previous version to see past states

Creating a Version

1. Open your project in the Library
2. Click "Check for Updates"
3. Review the detected changes — Added, modified, and removed screens are shown
4. Give your version a descriptive name
5. Click "Create Version" — Only then is the version committed

Change Detection

The diff engine detects three types of changes:

• Added Screens — Entirely new screens detected with full component extraction (layers, colors, fonts)
• Modified Screens — Property-level diffs with visual equivalence, token resolution, and causal grouping
• Removed Screens — Screens that existed in the baseline but are no longer present

For Modified Screens

Advanced analysis features:

• Visual Equivalence — Treats hex/rgb/hsl/rgba as identical when values match
• Token Resolution — Maps Figma variable IDs to actual token names and values
• Causal Grouping — Compresses 10-15 raw changes into 4-6 semantic groups
• Significance Scoring — Prioritizes high-impact, user-visible changes
• Visual Heatmaps — Before/after image comparison with changed regions highlighted

For Added Screens

Full component detection extracts:

• UI layers and component hierarchy
• Colors used in the design
• Fonts and typography
• Screenshot for AI-powered code generation

Figma-First Specs

The spec generation flow puts you in control:

1. Click "Create Spec" — AI generates a preview (no database writes)
2. Review and edit — Modify title, user story, acceptance criteria, and notes
3. Click "Save to Specs" — Only then is the spec persisted to your backlog

Unlike generic spec generators, PixelFrame specs are derived directly from design diffs:

Adaptive Titles

Title specificity adapts to change scope:

• 1 property change — "Update Button Background Color on Login"
• Multiple properties — "Update Button Styling on Login"
• Multiple elements — "Update Login Layout and Styling"
• New screen — "Implement Dashboard"
• Removed screen — "Remove Settings"

Specific User Stories

Stories reference actual property values:

• Yes: "...want the Button to display Background Color of #2B5CE6 instead of #3B82F6..."
• No: "...want the screen to match design specifications..."

Diff-Based Acceptance Criteria

One criterion per design change:

• Yes: "Button Background Color is #2B5CE6"
• No: "All visual changes match design specifications"
• No: "Screen maintains existing functionality"

What Each Spec Includes

• Title — Specific to the actual change scope
• Context — Screen and flow information
• User Story — References actual property values
• Acceptance Criteria — One per design change
• Technical Notes — Framework-specific guidance
• Screenshots — Before and after images
• Deep Links — Links to PixelFrame diff view and Figma

Export Destinations

Export specs to your project management tools or as documentation.

Supported Providers

• Jira — OAuth integration, project selection, automatic PR linking
• Linear — OAuth integration, team selection, automatic PR linking
• GitHub Issues — Creates issues in your linked repository
• Markdown — Export as .md file for documentation or manual workflows

Connecting Jira or Linear

1. Go to project settings
2. Click "Connect Jira" or "Connect Linear"
3. Authorize the PixelFrame app
4. Select your project/team

What Gets Exported

• Full spec content (title, story, acceptance criteria)
• Screenshots (before/after for modifications, current for added screens)
• Deep links back to PixelFrame
• Figma links to the design

Automatic PR Linking

When you generate a PR from a spec exported to Jira or Linear, the PR URL is automatically posted to the ticket. This keeps design, ticket, and code connected without manual copy-paste.

Connecting GitHub

AI Code Generation

PixelFrame uses semantic search (RAG) to find relevant files in your codebase before generating code. PRs are on-demand — nothing happens until you click "Generate PR".

How It Works

1. You click "Generate PR" — Opens the coding workflow modal
2. Indexing — Repository files are embedded using OpenAI (up to 200 files). AST-aware chunking extracts functions and classes.
3. Semantic Search — Spec text is embedded and matched against your codebase. Hybrid search (BM25 + semantic) with Voyage AI reranking finds the most relevant files.
4. Code Generation — Claude sees your existing code patterns and generates minimal, targeted changes (typically 3-20 lines).
5. Validation — File paths are validated against the repository structure. Hallucinated paths are filtered.
6. Pull Request — A feature branch is created, code is committed, and a PR is opened.
7. You review in GitHub — Add business logic, run tests, then merge like any other PR.

Supported Platforms

• Android — Kotlin / Java with Jetpack Compose
• iOS — Swift / SwiftUI
• React — Next.js, Remix, React Router (TypeScript / JavaScript)
• React Native — Expo Router, React Navigation
• Flutter — Dart with GoRouter or AutoRoute
• Vue — Vue 3 with Vue Router

What Gets Generated

For Added Screens (new screens):

• Complete new component/screen files
• Route/screen registration in config files
• UI layout matching the design screenshot
• Component structure using your existing patterns

For Modified Screens:

• Targeted changes to existing files (typically 3-20 lines)
• Styling updates with design tokens
• Property changes matching the diff

What Your Team Adds

• Business logic and state management
• API calls and data handling
• Form validation and error handling
• Tests and edge cases

PR Linking

When you generate a PR from a spec that was exported to Jira or Linear:

• The PR URL is automatically posted to the ticket
• PixelFrame tracks the PR status
• Design, ticket, and code remain connected

This means you can trace any PR back to its design change and ticket without manual linking.

Connecting Slack

Event Types

PixelFrame sends notifications for the following events (listed by priority):

Sample Notification

PR Created notifications include:

• PR title and status
• Repository name
• Direct link to GitHub PR
• Link to the PixelFrame spec
• Author username

Channel Routing

Route different events to different channels:

• PR events → #engineering
• Design updates → #design
• All events → #product-updates

Data Architecture

PixelFrame uses a privacy-first architecture inspired by modern AI code assistants:

Code Privacy Measures

Multiple layers protect your code during the indexing and generation process:

Before Indexing

• Secret Sanitization — API keys, tokens, passwords, and other sensitive patterns are automatically redacted before text is used for embedding generation. Patterns like API_KEY="sk-..." become API_KEY="***".
• Private Key Exclusion — Files with extensions .pem, .key, .keystore, .p12, and .pfx are never indexed at all — they're completely skipped.
• Build Artifacts Excluded — Directories like node_modules/, build/, dist/, .git/, and vendor/ are automatically excluded from indexing.
• File Size Limits — Only source files under 100KB are indexed. Large generated files and binaries are skipped.

What We Index

We index source code files for semantic search. For each file:

• AST-aware chunking — Code is split at semantic boundaries (functions, classes) rather than arbitrary character limits
• Embeddings generated — Mathematical vectors created using OpenAI or Voyage AI embedding models
• Metadata stored — File path, language, and line numbers are stored alongside embeddings

What we don't store: The actual source code content. Only the embeddings and metadata.

During Generation

• Latest code fetched — When generating a PR, we fetch current file contents directly from GitHub
• Used only for generation — Code is sent to the AI model (Claude) for generation, then discarded
• File path validation — Generated file paths are validated against your repository structure to prevent hallucinations

OAuth & Integration Security

All external integrations use industry-standard OAuth 2.0 flows with minimal permission scopes.

GitHub

• GitHub App authentication — No personal access tokens required
• You control access — Grant access to specific repositories only during installation
• Revocable anytime — Uninstall the GitHub App to revoke all access
• Permissions — Read access for indexing, write access for PR creation on branches you specify

Jira & Linear

• OAuth 2.0 flow — Standard authorization with your Atlassian/Linear account
• Minimal scopes — Only permissions needed for ticket creation and updates
• Disconnect anytime — Revoke access from PixelFrame or your Atlassian/Linear settings

Slack

• OAuth 2.0 flow — Standard Slack app authorization
• Minimal scopes — Only permissions to post messages to channels you select
• No message reading — We can only post notifications, not read your conversations

Figma

• Personal access token — You provide your own Figma token with access to your files
• File-level access — Token determines which files PixelFrame can read
• Read-only — We read design data but never modify your Figma files