Alloy: The First Prototyping Tool That Captures Your Real Product Design

Executive Summary

Alloy represents a fundamental breakthrough in product prototyping by solving a problem that has plagued product managers and designers for years: the disconnect between prototypes and production. Founded by Simon Kubica and backed by Y Combinator, Alloy is the world's first prototyping tool that captures your live product directly from the browser to create high-fidelity, on-brand prototypes that look exactly like your actual application—not generic mockups that vaguely resemble your design system.

Traditional prototyping workflows force teams into an impossible choice: spend weeks in Figma creating pixel-perfect designs that still don't match your production component library, or use generic app builders like Bubble or Retool that produce prototypes looking nothing like your brand. Both approaches create alignment problems when stakeholders see prototypes that don't reflect the actual user experience, leading to confusion, misaligned expectations, and wasted iteration cycles.

Alloy's revolutionary approach eliminates this friction by directly capturing your product's visual design system—fonts, colors, component styles, layouts, spacing—from any page of your live application via a browser extension. Once captured, Alloy's AI-powered editing interface lets you prototype new features using natural language prompts or visual editing, with every new screen automatically inheriting your production design system. The result: prototypes that are indistinguishable from your real product, enabling faster feedback, clearer communication, and confident decision-making.

The platform integrates seamlessly with product managers' existing workflows through 30+ integrations with tools like Linear, Jira, Notion, Slack, and Figma. Whether you're validating a feature concept with customers, aligning stakeholders on a roadmap, or providing specifications to engineering, Alloy ensures everyone sees exactly what the feature will look like in production—eliminating the translation gap between prototype and reality that has historically slowed product development.

For product teams frustrated by the weeks-long cycle of "write spec → wait for design → prototype in Figma → get feedback → repeat," Alloy offers a transformative alternative: capture your product once, prototype new features in minutes with AI assistance, and share realistic mockups immediately. The time saved and miscommunication avoided can compress feature validation cycles from weeks to days, fundamentally accelerating product velocity.

The Product Prototyping Challenge

Understanding the Problem

The traditional product development workflow is plagued by a critical disconnect that wastes time, creates confusion, and leads to poor product decisions:

The Off-Brand Prototype Problem: When product managers need to quickly prototype a feature idea to get customer or stakeholder feedback, they face limited options:

1. Wait for design resources (often weeks), then receive Figma mockups that, while beautiful, don't use your actual production components and may include subtle inconsistencies with your live productWait for design resources (often weeks), then receive Figma mockups that, while beautiful, don't use your actual production components and may include subtle inconsistencies with your live product
2. Use generic app builders (Bubble, Retool, Webflow) that produce functional prototypes but with completely different visual styling, making it impossible for reviewers to evaluate the feature in the context of the actual product experienceUse generic app builders (Bubble, Retool, Webflow) that produce functional prototypes but with completely different visual styling, making it impossible for reviewers to evaluate the feature in the context of the actual product experience
3. Hack together screenshots in PowerPoint or Keynote, manually editing images to simulate new features—a tedious process that produces static, low-fidelity resultsHack together screenshots in PowerPoint or Keynote, manually editing images to simulate new features—a tedious process that produces static, low-fidelity results

Each approach has fundamental problems:

Figma Prototypes: Even when designers meticulously maintain design system libraries, subtle inconsistencies accumulate. A button border radius is 6px in production but 8px in Figma. The heading font weight is 600 in the app but 700 in designs. Spacing uses an 8px grid system in production but designers eyeball it. These micro-inconsistencies add up, creating prototypes that look "close enough" but trigger uncanny valley reactions from reviewers who know the real product. More importantly, maintaining design-development parity requires constant manual synchronization—as the production design evolves, Figma libraries fall out of sync.

Generic App Builders: Tools like Bubble, Retool, or Framer can produce functional prototypes, but they use completely different component libraries, design tokens, and styling conventions. The result is a prototype that looks like a different product entirely. When you show this to customers or stakeholders, they're forced to perform a mental translation: "Imagine this feature, but with our actual navigation, colors, and styling." This cognitive load reduces feedback quality and creates alignment problems when people can't visualize the feature in the context of the real user experience.

Screenshot Hacking: The most pragmatic approach—taking screenshots of the existing product and manually editing them to add new UI elements—is intensely tedious and produces static images that can't demonstrate interactions or flows. Updating these mocks when feedback requires changes means repeating the entire manual editing process.

The Design-Development Feedback Loop Problem: The traditional workflow creates a multi-week cycle:

1. PM writes a spec (3-5 days)PM writes a spec (3-5 days)
2. Design backlog wait time (1-2 weeks)Design backlog wait time (1-2 weeks)
3. Designer creates mockups (2-5 days)Designer creates mockups (2-5 days)
4. Review and iteration (3-7 days)Review and iteration (3-7 days)
5. Finally share with stakeholders/customers (1-2 days to gather feedback)Finally share with stakeholders/customers (1-2 days to gather feedback)
6. Feedback requires changes → repeat cycleFeedback requires changes → repeat cycle

This 3-6 week cycle for a single feature validation makes rapid experimentation impossible. By the time you've validated one approach, market conditions or customer needs may have shifted.

The Specification Translation Problem: Even with beautiful Figma designs, translating those designs into engineering specifications remains ambiguous. Engineers must answer questions like: "What existing component should implement this?" "Which design tokens define these colors?" "How does this responsive behavior work?" Prototypes that don't use actual production components can't answer these questions, leading to implementation inconsistencies and back-and-forth during development.

Why Alloy Matters

Alloy eliminates the prototype-production disconnect by treating your live product as the source of truth for prototyping. The browser extension captures not just visual styling but the underlying design system: component patterns, color palettes, typography scales, spacing rhythms, and layout conventions. This capture becomes a living component library that Alloy uses to generate new screens.

When you prototype a new feature in Alloy, you're not creating mockups from scratch—you're composing variations of your existing product. The AI understands your component library: "This app uses a card pattern with white background, subtle shadow, 16px padding, and rounded corners." When you prompt "Add a settings section," Alloy generates that section using your established card pattern, not a generic rectangle with a border.

This fundamental shift delivers transformative benefits:

Instant Brand Consistency: Every prototype automatically inherits your production design system. Colors, typography, spacing, shadows, borders—everything matches precisely. Reviewers see the feature as it will actually appear, eliminating the mental translation burden and improving feedback quality.

10x Faster Prototyping: Capturing a page takes 30 seconds. Generating a new feature variation using AI takes 60-90 seconds. Sharing with stakeholders takes 10 seconds (send a link). What previously took weeks now takes minutes, enabling rapid iteration and experimentation.

Built-in Design QA: Since prototypes use your actual design system, they serve as implicit specifications for engineering. "Build it exactly as shown in the Alloy prototype" is an unambiguous instruction because the prototype already uses production-faithful components and styling.

Progressive Enhancement of Component Library: As you capture more pages from your product, Alloy builds a richer understanding of your component library. Results get faster and more accurate over time as the system learns patterns like "This app uses a three-column grid for dashboard layouts" or "Navigation items always include an icon on the left."

Democratized Prototyping: Product managers can create realistic prototypes without design resources or technical skills. This doesn't eliminate the need for designers—it shifts their focus from producing throwaway mockups to refining the actual production design system that Alloy captures and uses.

Key Features and Capabilities

Instant Product Capture

Browser Extension Workflow: Alloy operates through a lightweight browser extension (Chrome, Edge, Safari) that captures pages from your live product:

1. Install the Extension: Add Alloy from the Chrome Web Store or directly from alloy.appInstall the Extension: Add Alloy from the Chrome Web Store or directly from alloy.app
2. Navigate to Your Product: Open any page of your web applicationNavigate to Your Product: Open any page of your web application
3. Activate Capture: Click the Alloy extension icon, then "Capture page"Activate Capture: Click the Alloy extension icon, then "Capture page"
4. Automatic Processing: Alloy analyzes the page's DOM structure, computed styles, component patterns, and design tokensAutomatic Processing: Alloy analyzes the page's DOM structure, computed styles, component patterns, and design tokens
5. Instant Preview: Within seconds, see your captured page in the Alloy editor, ready for modificationInstant Preview: Within seconds, see your captured page in the Alloy editor, ready for modification

What Gets Captured:

•Visual Styling: Colors, typography (fonts, sizes, weights, line heights), spacing, shadows, borders, backgrounds
•Component Patterns: Buttons, input fields, cards, navigation elements, modals, forms, tables, lists
•Layout Structure: Grid systems, flexbox patterns, responsive breakpoints, spacing rhythms
•Design Tokens: Automatically inferred color palettes, typography scales, spacing units
•Interactive Elements: Hover states, focus styles, button variants (primary, secondary, destructive)

Privacy and Security: Alloy only captures pages when you explicitly click "Capture page" in the extension. Captured data is stored securely in your Alloy workspace and never shared with third parties. The extension doesn't monitor your browsing or capture pages automatically.

Multi-Page Capture: Capture multiple pages from your product to build a comprehensive component library:

Captured Pages: ├── Dashboard (homepage) ├── User Settings ├── Data Table View ├── Form Example ├── Modal Dialogs └── Mobile Navigation

→ Alloy learns: "This product uses these button styles, this card pattern, this navigation structure, etc."

The more pages you capture, the more accurate and comprehensive your component library becomes.

AI-Powered Prototype Editing

Once you've captured a page, Alloy provides two editing modes for prototyping new features:

Natural Language Prompting (Primary Mode): Describe changes in plain English, and Alloy's AI modifies the prototype while maintaining your design system:

Example Prompts: → "Add a settings section below the current content with options for notifications, privacy, and account management" → "Insert a data table showing recent transactions with columns for date, description, amount, and status" → "Create a modal dialog for confirming deletion with a warning icon, explanatory text, and cancel/confirm buttons" → "Redesign the navigation to include a search bar and user profile dropdown"

→ "Add an empty state illustration and message when there are no items"

The AI understands context from your component library:

•Component Reuse: "settings section" uses your existing card/panel pattern
•Style Consistency: New elements automatically match existing typography, colors, spacing
•Layout Intelligence: New sections are positioned logically within the existing layout structure
•Responsive Behavior: Added elements respect your product's responsive design patterns

Visual Editing Mode (Secondary Mode): For fine-grained control, switch to visual editing:

•Click elements to select and modify properties
•Drag to reposition components
•Adjust spacing, sizing, colors with visual controls
•Copy/paste components from captured pages
•Fine-tune responsive behavior at different breakpoints

The visual editor feels like Figma/Framer but operates on your actual component library, ensuring any manual edits still maintain design system consistency.

Iterative Refinement: Combine prompting and visual editing for rapid iteration:

Workflow: 1. Prompt: "Add a user profile section"Prompt: "Add a user profile section" → AI generates first version using your components 2. Review and refine with visual editor:Review and refine with visual editor: → Adjust spacing, reorder elements 3. Prompt: "Add social media links below the bio"Prompt: "Add social media links below the bio" → AI adds links using your button/icon patterns 4. Visual tweak: Fine-tune icon alignmentVisual tweak: Fine-tune icon alignment

Total time: 2-3 minutes for a complete new section

Progressive Component Library Learning

Alloy's AI doesn't just capture static styles—it learns your design patterns and improves over time:

Pattern Recognition: After capturing several pages, Alloy identifies recurring patterns:

Detected Patterns:
✓ Card Pattern: White background, 4px shadow, 12px border radius, 16px padding
✓ Button Hierarchy: Primary (blue fill), Secondary (blue outline), Destructive (red fill)
✓ Typography Scale: Heading 1 (32px/700), Heading 2 (24px/600), Body (16px/400)
✓ Spacing System: 4px base unit, multiples of 4 (4, 8, 12, 16, 24, 32, 48, 64)
✓ Color Palette: Primary #0066FF, Success #00C853, Error #FF3B30, Neutral #F5F5F5
✓ Grid System: 12-column grid, 24px gutters, max-width 1200px

Intelligent Defaults: When you request new components, Alloy uses learned patterns:

Prompt: "Add a success message" Alloy's reasoning: •Success messages use the Success color (#00C853) •Messages follow the Card Pattern for containers •Icons are positioned left-aligned with 8px margin •Text uses Body typography (16px/400) •Dismiss button uses Secondary button style

→ Generated component matches your product's existing success message pattern, even if you never captured a success message page

Context-Aware Suggestions: As you edit, Alloy suggests relevant components from your library:

When editing a form:
Suggestions:
•"Add a date picker" (detected date input pattern from captured pages)
•"Include validation messages" (learned error message styling)
•"Add a submit button" (uses your primary button style)

Version Tracking: Alloy maintains a history of how your component library evolves:

•Track when new patterns are captured
•See how your design system changes over time
•Revert to previous component versions if needed
•Export component library documentation

Seamless Workflow Integrations

Alloy integrates deeply with product managers' existing tools:

Linear Integration:

•Create prototypes directly from Linear issues
•Attach Alloy prototypes to issues for context
•Update prototypes as issue requirements evolve
•Link prototype screens to specific subtasks

Jira Integration:

•Associate prototypes with Jira tickets
•Add prototype links to ticket descriptions
•Track which prototypes are related to which epics
•Export prototype specs as ticket attachments

Notion Integration:

•Embed Alloy prototypes inline in Notion docs
•Link prototypes to product specs and roadmaps
•Maintain a prototype library in Notion databases
•Automatically update embedded prototypes when you make changes

Slack Integration:

•Share prototype links in Slack channels with auto-expanding previews
•Get notifications when team members comment on prototypes
•Quick-share prototypes during discussions without leaving Slack
•Set up channels to auto-post new prototypes for team awareness

Figma Integration:

•Export Alloy prototypes to Figma for design refinement
•Import Figma designs back into Alloy to maintain consistency
•Sync design tokens between Figma and Alloy
•Collaborate with designers: PM prototypes in Alloy, designer refines in Figma

Email/Calendar Integration:

•Send prototype links in meeting invites for context
•Schedule prototype reviews with stakeholders
•Automatically include relevant prototypes in status updates
•Track who has viewed prototypes sent via email

GitHub Integration:

•Link prototypes to pull requests as visual specifications
•Reference prototypes in issue discussions
•Track which prototypes correspond to which branches
•Automatically close prototype review tasks when code is merged

Customer Feedback Tools:

•Integrate with Intercom, Zendesk, or HubSpot
•Show prototypes to customers during support conversations
•Gather feedback directly on prototype screens
•Track which customer requests are addressed by which prototypes

Collaborative Review and Feedback

Share with One Click: Generate a shareable link for any prototype:

alloy.app/p/abc123xyz
Options:
•Public link (anyone with link can view)
•Password protected
•Restricted to specific email addresses
•Time-limited access (expires after 7 days, custom durations)

Comment and Annotation System: Reviewers can provide feedback directly on prototype screens:

•Pin Comments: Click anywhere on the prototype to add a comment anchored to that location
•Threaded Discussions: Reply to comments for back-and-forth conversations
•Tag Team Members: @mention colleagues to bring them into discussions
•Resolve Threads: Mark comments as resolved once addressed
•Filter Views: Show only unresolved comments, my comments, or all feedback

Version History and Branching:

Prototype: "New Checkout Flow"
Main Version (shared with stakeholders)
├── v1: Initial concept (Jan 5)
├── v2: Added payment options (Jan 7)
└── v3: Incorporated CEO feedback (Jan 10)
Experimental Branches:
├── express-checkout (exploring simplified flow)
└── guest-checkout (testing no-account option)
→ Iterate freely in branches without affecting
  the version stakeholders are reviewing

Approval Workflows: Set up formal approval processes:

Prototype Review Stages: 1. Draft → Internal PM ReviewDraft → Internal PM Review 2. Internal Approved → Design ReviewInternal Approved → Design Review 3. Design Approved → Stakeholder ReviewDesign Approved → Stakeholder Review 4. Stakeholder Approved → Customer ValidationStakeholder Approved → Customer Validation 5. Customer Validated → Ready for DevelopmentCustomer Validated → Ready for Development

Track status, required approvers, and approval history

Analytics and Engagement Tracking: Understand how prototypes are being reviewed:

•Who has viewed the prototype
•Time spent on each screen
•Which screens get the most attention
•Drop-off points in multi-screen flows
•Comment activity over time

This data helps identify screens that confuse reviewers or features that generate the most discussion.

Responsive Design and Multi-Device Prototyping

Automatic Responsive Capture: When you capture a page, Alloy automatically detects responsive behavior:

•Breakpoints (mobile, tablet, desktop)
•Layout shifts at different screen sizes
•Component reflow patterns
•Navigation transformations (desktop nav → mobile hamburger menu)

Multi-Device Preview: View and edit prototypes at different screen sizes:

Preview Modes:
•Mobile (375px) - iPhone SE/13/14
•Mobile Large (428px) - iPhone 14 Pro Max
•Tablet (768px) - iPad
•Desktop (1440px) - Standard laptop
•Desktop Large (1920px) - Full HD monitors
•Custom dimensions

Device-Specific Editing: Make changes that only affect specific breakpoints:

Example: Dashboard Layout Desktop (1440px): •3-column grid for stats cards •Sidebar navigation always visible •64px header height Tablet (768px): •2-column grid for stats cards •Collapsible sidebar navigation •56px header height Mobile (375px): •Single-column layout •Bottom navigation bar •48px header height

→ Alloy maintains these responsive behaviors automatically

Interaction States: Prototype interactive behaviors:

•Hover states for buttons and links
•Focus states for form inputs
•Loading states for async operations
•Error states for validation
•Success states for confirmations
•Disabled states for inactive elements

Handoff to Development

Alloy prototypes serve as unambiguous specifications for engineering:

Component Specifications: Click any element to see detailed specs:

Button: "Save Changes" Component Type: Button (Primary variant) Dimensions: width auto, height 40px Typography: font-family "Inter", size 14px, weight 600 Colors: background #0066FF, text #FFFFFF Spacing: padding 12px 24px Border: none, border-radius 6px Effects: box-shadow 0 2px 4px rgba(0,0,0,0.1) States: •Hover: background #0052CC •Active: background #003D99, transform scale(0.98) •Disabled: background #CCCCCC, cursor not-allowed

→ Engineers know exactly how to implement

CSS Export: Export CSS for any component:

.button-primary {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  background-color: #0066FF;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
}
.button-primary:hover {
  background-color: #0052CC;
}
.button-primary:active {
  background-color: #003D99;
  transform: scale(0.98);
}
.button-primary:disabled {
  background-color: #CCCCCC;
  cursor: not-allowed;
}

Design Token Export: Export your design system as structured tokens:

{
  "colors": {
    "primary": "#0066FF",
    "primary-hover": "#0052CC",
    "primary-active": "#003D99",
    "success": "#00C853",
    "error": "#FF3B30",
    "neutral-100": "#F5F5F5",
    "neutral-900": "#1A1A1A"
  },
  "typography": {
    "font-family": "Inter, sans-serif",
    "heading-1": { "size": "32px", "weight": 700, "line-height": 1.2 },
    "heading-2": { "size": "24px", "weight": 600, "line-height": 1.3 },
    "body": { "size": "16px", "weight": 400, "line-height": 1.5 }
  },
  "spacing": {
    "unit": "4px",
    "xs": "4px",
    "sm": "8px",
    "md": "16px",
    "lg": "24px",
    "xl": "32px",
    "2xl": "48px"
  }
}

Figma Export: Export prototypes to Figma for design refinement:

•All components exported as Figma components
•Design tokens mapped to Figma styles
•Responsive frames for different breakpoints
•Maintain edit history between Alloy and Figma

Code Snippets: Generate framework-specific code (React, Vue, Angular):

// React component example
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
export function SettingsSection() {
  return (
    
      
Account Settings

      

        Email Notifications
        
      

      

        
        
      
    
  );
}

Getting Started with Alloy

Installation and Setup

Step 1: Create an Account:

•Visit https://alloy.app
•Sign up with email or Google/GitHub SSO
•Verify email if required
•Complete onboarding survey (helps Alloy understand your use case)

Step 2: Install Browser Extension:

•From the Alloy dashboard, click "Install Extension"
•Choose your browser (Chrome, Edge, Safari, Firefox)
•Click "Add to Browser" in the extension store
•Authorize the extension to capture pages

Step 3: Set Up Your First Workspace:

Workspace Setup:
•Workspace Name: "Acme Inc Product"
•Product URL: https://app.acme.com
•Team Members: Invite PMs, designers, engineers
•Integrations: Connect Linear, Slack, Notion

Capturing Your First Page

Walkthrough:

1. Navigate to Your Product: Open your web application at any page you want to capture (e.g., dashboard, settings, data view)Navigate to Your Product: Open your web application at any page you want to capture (e.g., dashboard, settings, data view)
2. Open Alloy Extension: Click the Alloy icon in your browser toolbarOpen Alloy Extension: Click the Alloy icon in your browser toolbar
3. Capture Page: Click "Capture page" buttonCapture Page: Click "Capture page" button

- Alloy analyzes the DOM structure - Extracts styles and design tokens - Processes component patterns - Generates editable representation

4. Review Capture: Alloy automatically opens the captured page in the editorReview Capture: Alloy automatically opens the captured page in the editor

- Verify capture quality (should be pixel-perfect) - Check interactive elements (buttons, inputs) - Review component library updates

Tips for Best Captures:

•Capture pages in their typical state (not empty states initially)
•Ensure all interactive elements are visible (expand menus, open dropdowns)
•Capture different page types (list views, detail views, forms, modals)
•Log in to capture authenticated pages
•Capture responsive versions by resizing browser before capture

Creating Your First Prototype

Example: Adding a "Dark Mode" Settings Option

Scenario: You want to validate whether users would appreciate a dark mode toggle in settings.

Step 1: Capture Settings Page

Navigate to: https://yourapp.com/settings
Click Alloy extension → "Capture page"

Step 2: Add Dark Mode Toggle In the Alloy editor, use natural language prompting:

Prompt: "Add a new settings section called 'Appearance' with a
toggle switch for enabling dark mode. Place it below the current
notification settings section."

Alloy generates:

•New "Appearance" section using your existing settings section pattern
•Toggle switch matching your current toggle component style
•Label and description text using your typography system
•Proper spacing consistent with other sections

Step 3: Refine with Visual Editor (optional)

•Click the new section to adjust spacing
•Modify description text to be more specific
•Add a screenshot or mockup of what dark mode would look like

Step 4: Share for Feedback

Click "Share" → Generate link → Copy
Share with:
•Team Slack channel: "Thoughts on adding dark mode? Check out this mockup"
•Customer interviews: Show during user research sessions
•Stakeholders: Include in weekly product update

Step 5: Iterate Based on Feedback

Feedback received: "Can we also add font size controls?" Back in Alloy: Prompt: "Add font size controls below the dark mode toggle with options for Small, Medium, Large"

→ Alloy adds controls using your existing UI patterns → Update shared link (previous links automatically show updated version)

Total time from idea to shareable prototype: 5 minutes

Compare to traditional workflow:

•Write spec: 30 mins
•Wait for design: 3-5 days
•Figma mockup: 2-3 hours
•Iterations: 1-2 days
•Total: 1 week minimum

Advanced Prototyping Techniques

Multi-Screen Flows: Create complete user journeys across multiple screens:

Example: "New User Onboarding Flow" Screen 1: Welcome •Capture: Homepage •Modify: Add "Get Started" prominent CTA Screen 2: Account Setup •Start from: Captured signup page •Modify: Simplify form fields, add progress indicator Screen 3: Preferences •Start from: Captured settings page •Modify: Show only essential preferences, add skip option Screen 4: Dashboard with Welcome Guide •Start from: Captured dashboard •Modify: Add spotlight hints and guided tour overlay

→ Link screens with click interactions → Share flow link for walkthrough feedback

A/B Testing Concepts: Create multiple variations to test different approaches:

Feature: "Premium Upgrade Prompt" Variation A: Modal Dialog •Prominent modal overlay •Feature comparison table •"Upgrade Now" primary CTA Variation B: Inline Banner •Subtle banner at top of page •Brief feature highlight •"Learn More" secondary CTA Variation C: Empty State Suggestion •Show during feature-limited empty state •"Unlock this feature with Premium" •Contextual upgrade option

→ Share all three with stakeholders/customers → Gather preference feedback before building

Empty State Design: Prototype first-run and empty state experiences:

Prompt: "Convert this data table to show an empty state with an illustration, message 'No data yet', and a 'Import Data' button"

Use case: Validate empty state design before users encounter it

Error and Edge Cases: Prototype how the UI handles errors:

Prompt: "Show a validation error state for this form with error messages below each invalid field and a summary error message at the top"

Use case: Ensure error handling is clear before engineering implements

Real-World Use Cases

Product Validation with Customers

Scenario: A B2B SaaS company wants to validate a new "Team Analytics" dashboard before investing engineering resources.

Traditional Approach:

1. PM writes detailed spec (3 days)PM writes detailed spec (3 days)
2. Design creates Figma mockups (1 week, including wait time)Design creates Figma mockups (1 week, including wait time)
3. Mockups don't match production styling, confusing customers during interviewsMockups don't match production styling, confusing customers during interviews
4. Customer: "This looks different from our current dashboard. Will it actually look like this?"Customer: "This looks different from our current dashboard. Will it actually look like this?"
5. Iteration required after feedback (another 1-2 weeks)Iteration required after feedback (another 1-2 weeks)
6. By the time validation completes, 3-4 weeks have passedBy the time validation completes, 3-4 weeks have passed

Alloy Approach:

1. PM captures existing dashboard page (30 seconds)PM captures existing dashboard page (30 seconds)
2. Prompts: "Add a new 'Team Analytics' tab with charts showing team productivity metrics, top performers, and activity timeline" (2 minutes)Prompts: "Add a new 'Team Analytics' tab with charts showing team productivity metrics, top performers, and activity timeline" (2 minutes)
3. Refines with visual editor: adjust chart layout, update copy (3 minutes)Refines with visual editor: adjust chart layout, update copy (3 minutes)
4. Shares link with customers during interviews (10 seconds)Shares link with customers during interviews (10 seconds)
5. Customers see mockup that looks exactly like their current product: "Oh, this would fit perfectly next to our existing tabs!"Customers see mockup that looks exactly like their current product: "Oh, this would fit perfectly next to our existing tabs!"
6. Gathers clear feedback because customers can visualize the actual experienceGathers clear feedback because customers can visualize the actual experience
7. Iterates based on feedback: "Add a date range filter" → update prompt → reshare (2 minutes)Iterates based on feedback: "Add a date range filter" → update prompt → reshare (2 minutes)
8. Total time: 15 minutes across 1 dayTotal time: 15 minutes across 1 day

Outcome: Feature validated and refined in days instead of weeks, with higher-quality feedback because customers saw realistic mockups.

Roadmap Communication with Stakeholders

Scenario: Quarterly business review—the executive team wants to see what's coming in the next quarter.

Traditional Approach:

•PMs create PowerPoint slides with descriptions of planned features
•Executives struggle to visualize features from text descriptions
•Questions like "What will this actually look like?" go unanswered
•Misalignment on priorities because mental models differ

Alloy Approach:

•Each PM spends 30-60 minutes creating Alloy prototypes for their key features
•Embed prototypes directly in Notion roadmap page or presentation slides
•During QBR, click through interactive prototypes showing planned features
•Executives immediately understand what's being built
•Productive discussions about trade-offs because everyone sees the same vision
•Action items are clear: "Let's prioritize the search feature—I can see how valuable that will be"

Outcome: Roadmap meetings become high-bandwidth communication sessions instead of confusing abstract discussions.

Design-Development Handoff

Scenario: Engineering team needs specs for a new feature, but design resources are scarce.

Traditional Approach:

•PM writes spec, waits for design
•Design creates mockups eventually
•Engineers interpret mockups, make best-guess decisions on details
•Implementation doesn't quite match mockups due to ambiguity
•Design review finds discrepancies, rework required

Alloy Approach:

•PM creates prototype in Alloy using production design system
•Prototype automatically uses correct components, colors, spacing
•Engineers receive Alloy link as spec: "Build exactly as shown here"
•Click elements in Alloy to see exact CSS, spacing, component types
•Implementation matches prototype because prototype uses production patterns
•Design review: minor tweaks only, no major rework

Outcome: Reduced design-development cycle time, fewer implementation discrepancies, less rework.

Customer Support and Feature Education

Scenario: Support team receives questions about how to use a feature or requests for features that already exist.

Traditional Approach:

•Support writes text descriptions or creates screen-recorded videos
•Customers struggle to follow text instructions
•Support burden remains high for repetitive questions

Alloy Approach:

•Create interactive prototypes showing step-by-step feature usage
•Annotate prototypes with explanatory text and arrows
•Link to prototypes in help documentation and support responses
•Customers see exactly what to do in context of the actual UI
•Proactively share prototypes of new features in release announcements

Outcome: Reduced support burden, faster customer onboarding, clearer feature communication.

Competitive Feature Analysis

Scenario: Company wants to understand how competitors implement a feature and evaluate whether to adopt similar patterns.

Traditional Approach:

•Take screenshots of competitor products
•Annotate in PowerPoint or Figma
•Difficult to visualize how competitor patterns would look in your product
•Risk of blindly copying without considering brand fit

Alloy Approach:

•Capture your product's relevant pages
•Manually add elements inspired by competitor features using visual editor
•Alloy automatically adapts competitor-inspired patterns to your design system
•See immediately whether competitor patterns feel consistent with your brand
•Share with team: "Here's how [Competitor Feature X] would look in our product"

Outcome: Informed decisions about feature adoption, avoiding poor design decisions from blind copying.

Best Practices

When to Use Alloy

Ideal Use Cases: ✓ Feature Validation: Quickly prototype features to validate with customers or stakeholders before engineering ✓ UI Refinements: Iterate on layout, content, or flow improvements to existing screens ✓ Stakeholder Communication: Show executives, investors, or customers what you're building ✓ Onboarding and Help Content: Create annotated prototypes for user documentation ✓ A/B Testing Concepts: Visualize multiple approaches to a feature for feedback ✓ Design Handoff: When design resources are scarce, provide engineering with clear specifications

Less Ideal Use Cases: ✗ Complex Interactive Prototypes: For advanced interactions (drag-and-drop, complex animations), dedicated prototyping tools (Framer, ProtoPie) are better ✗ Completely New Products: If you don't have an existing product to capture, traditional design tools (Figma) are more appropriate for greenfield design ✗ High-Fidelity Visual Design Exploration: Designers exploring novel visual directions should use Figma, then capture the result in Alloy once decided ✗ Actual Development: Alloy generates prototypes, not production code. Don't try to use Alloy outputs directly as a development framework

Capturing Best Practices

Capture Strategically:

•Start with Core Pages: Dashboard, main navigation, primary workflows
•Capture Component Diversity: Different page types expose different component patterns
•Include Edge Cases: Error states, empty states, loading states
•Progressive Capture: Capture additional pages as your design system evolves

Quality Over Quantity:

•Better to capture 5 well-chosen pages than 20 random pages
•Prioritize pages that demonstrate your core component library
•Re-capture pages when your design system changes significantly

Organize Your Captures:

Alloy Workspace Organization:
├── Core Pages (Dashboard, Settings, Profile)
├── Data Views (Tables, Charts, Lists)
├── Forms (Inputs, Validation, Multi-Step)
├── Modals and Overlays
├── Navigation Patterns
└── Mobile Views

Prompting Best Practices

Be Specific and Contextual:

Weak Prompt: "Add a button" Strong Prompt: "Add a primary 'Save Changes' button in the bottom right of the form, aligned with the 'Cancel' button that's already there"

Weak Prompt: "Show analytics" Strong Prompt: "Add a three-column row of stat cards above the table showing Total Users (with growth %), Revenue This Month, and Active Sessions"

Reference Existing Patterns:

"Add a settings section using the same card pattern as the sections above"

"Include a data table similar to the one on the dashboard, but with columns for Name, Email, Status, and Actions"

Iterate Incrementally:

Step 1: "Add a notification preferences section"
Step 2: "Add a toggle for email notifications"
Step 3: "Add a toggle for push notifications below the email toggle"
Step 4: "Add explanatory text below each toggle describing what it controls"

Breaking changes into steps gives you more control and makes it easier to backtrack if needed.

Use Visual Editor for Fine-Tuning:

•Prompts for structural changes (adding sections, components)
•Visual editor for refinement (spacing, alignment, copy tweaks)

Collaboration Best Practices

Version Control Discipline:

•Create branches for experimental ideas
•Keep the main version stable for stakeholder sharing
•Use descriptive version names ("v2-with-ceo-feedback" not "v2")
•Document what changed in each version

Clear Feedback Expectations: When sharing prototypes, set context:

Bad: "Here's a prototype, let me know what you think"
Good: "Prototype for validation: New team analytics feature
Focus areas for feedback:
1. Is the information hierarchy clear?Is the information hierarchy clear?
2. Are these the right metrics to show?Are these the right metrics to show?
3. Does this fit naturally with the existing dashboard?Does this fit naturally with the existing dashboard?
Please comment directly on screens by clicking"

Review Cadence:

•Internal reviews: 24-48 hour turnaround
•Stakeholder reviews: Schedule dedicated time rather than async reviews
•Customer validation: Include prototypes in regular customer interview cycles

Integration into Rituals:

•Sprint planning: Share prototypes of upcoming work for team alignment
•Design reviews: Use Alloy for PM-initiated concepts, Figma for design-led explorations
•All-hands: Showcase prototypes of major features to build excitement

Comparison with Alternatives

Alloy vs. Figma

Figma Strengths:

•Industry-standard design tool with massive ecosystem
•Unlimited visual design freedom and creativity
•Advanced prototyping features (animations, complex interactions)
•Comprehensive design system management features
•Ideal for designers creating polished, production-ready designs

Figma Limitations:

•Requires design skills and significant learning curve
•Design-development parity requires constant manual maintenance
•Prototypes inevitably drift from production over time
•Time-consuming to create high-fidelity mockups
•PMs waiting on design resources creates bottlenecks

Alloy Advantages:

•Zero design skills required—PMs can create prototypes themselves
•Automatic production parity—always matches your live product
•10x faster for feature validation prototypes
•Progressive learning of your design system over time
•AI-assisted editing with natural language prompts

When to Use Each:

•Figma: Design-led feature development, design system creation, high-fidelity polish
•Alloy: PM-led feature validation, rapid prototyping, stakeholder communication

Best Together: PMs prototype concepts in Alloy → Designers refine in Figma → Capture Figma result back in Alloy for ongoing iteration

Alloy vs. Framer

Framer Strengths:

•Combines design and code for production-ready outputs
•Beautiful, smooth animations and transitions
•Can actually ship Framer sites as marketing pages

Framer Limitations:

•Steeper learning curve than Alloy
•Still requires starting from scratch or importing Figma
•Doesn't capture your existing product—you rebuild it
•More focused on building new sites than prototyping features

Alloy Advantages:

•Captures your existing product automatically
•Simpler, faster for feature prototyping (not full site building)
•AI-assisted editing requires less manual work
•Production parity without manual maintenance

Use Case Fit:

•Framer: Building marketing sites, landing pages, or new products from scratch
•Alloy: Prototyping features for existing products

Alloy vs. Generic App Builders (Bubble, Retool, Webflow)

Generic Builders Strengths:

•Can create fully functional, interactive prototypes
•Support complex logic and database connections
•Some can be used as production tools (Retool for internal tools)

Generic Builders Limitations:

•Completely off-brand—look nothing like your product
•High learning curve to use effectively
•Time-consuming to build realistic prototypes
•Not designed for product prototyping—designed for building full apps

Alloy Advantages:

•On-brand by default—captures your product's design system
•Faster for feature prototyping (minutes vs. hours/days)
•Lower learning curve for PMs
•Purpose-built for product validation, not app development

Use Case Fit:

•Generic Builders: Building functional internal tools, MVPs, or standalone apps
•Alloy: Prototyping features for existing products to validate before building

Alloy vs. Screenshot Editing (PowerPoint, Keynote, Photoshop)

Screenshot Approach Strengths:

•Uses tools people already know
•Complete control over visuals
•Can create anything you can imagine

Screenshot Approach Limitations:

•Extremely tedious and time-consuming
•Produces static images, not interactive prototypes
•Difficult to make changes after creation
•Can't share as clickable prototypes
•Hard to maintain consistency across screens

Alloy Advantages:

•Interactive prototypes, not static images
•AI-assisted editing 10x faster than manual image editing
•Easy to iterate—change prompts instead of re-editing images
•Share clickable links instead of image files
•Automatic design consistency

Use Case Fit:

•Screenshot Editing: Quick one-off mockups for emails or presentations
•Alloy: Serious prototyping requiring iterations and stakeholder reviews

Pricing and Plans

While specific pricing may vary, Alloy typically offers a tiered structure:

Free Plan:

•3 page captures
•Unlimited prototypes from captured pages
•AI-assisted editing with usage limits
•Link sharing with public links
•Individual use

Pro Plan (~$20-40/user/month):

•Unlimited page captures
•Unlimited AI-assisted editing
•Advanced sharing options (password protection, permissions)
•Version history and branching
•Basic integrations (Slack, Notion)
•Team collaboration (up to 10 users)

Team Plan (~$50-80/user/month):

•Everything in Pro
•Advanced integrations (Linear, Jira, Figma, GitHub)
•Unlimited team members
•Role-based access control
•Priority support
•Custom component libraries
•Export to code/Figma

Enterprise Plan (Custom pricing):

•Everything in Team
•SSO and advanced security
•Dedicated account manager
•Custom integrations
•On-premise deployment options
•SLA guarantees
•Training and onboarding support

Check alloy.app/pricing for current plans and pricing.

Conclusion

Alloy solves a problem that has plagued product development for years: the disconnect between prototypes and production reality. By capturing your live product as the foundation for prototyping, Alloy ensures that every prototype looks exactly like your actual application—eliminating confusion, improving feedback quality, and accelerating decision-making.

The platform's AI-powered editing interface empowers product managers to create sophisticated, on-brand prototypes in minutes without design resources or technical skills. This democratization of prototyping doesn't replace designers—it frees them from creating throwaway mockups so they can focus on refining the production design system that Alloy captures and uses.

For product teams struggling with slow validation cycles, misaligned stakeholder expectations, or the constant friction of translating between prototypes and production, Alloy offers a transformative solution. The ability to go from idea to shareable, realistic prototype in minutes instead of weeks fundamentally changes the pace at which products can evolve and improve.

As product development becomes increasingly fast-paced and customer-centric, tools like Alloy that compress feedback loops and improve communication clarity will become essential infrastructure for high-performing product teams. The future of product development is rapid experimentation with realistic prototypes—Alloy is building that future today.

Additional Resources

•Official Website: https://alloy.app/
•Chrome Extension: https://chromewebstore.google.com/detail/alloy
•Documentation: https://alloy.app/guide
•Quick Start Guide: https://alloy.app/guide/quick-start
•Video Tutorials: https://www.youtube.com/@alloyapp
•Blog: https://alloy.app/blog
•Twitter: https://twitter.com/alloy_app
•Simon Kubica (Founder): https://twitter.com/simon_kubica
•Y Combinator Profile: https://www.ycombinator.com/companies/index-1
•Product Hunt Launch: https://www.producthunt.com/posts/alloy
•Help Center: https://help.alloy.app/
•Integration Guides: https://alloy.app/guide/integrations

---

Article Metadata:

•ID: alloy-product-prototyping-tool
•Title: Alloy: The First Prototyping Tool That Captures Your Real Product Design
•URL: https://alloy.app/, https://twitter.com/alloy_app
•Category: Product Management Tools
•Tags: Product Management, Prototyping, Design Systems, AI-Powered Tools, UI/UX, Product Development, Design-to-Development, Component Libraries, Product Validation, Rapid Prototyping
•Key Features:

- Instant Product Capture: Browser extension captures your live product's design system, components, and styles in seconds - AI-Powered Editing: Create new features using natural language prompts while maintaining perfect brand consistency - Progressive Component Library: System learns your design patterns and improves accuracy over time as you capture more pages - Zero Design Skills Required: Product managers can create production-quality prototypes without Figma or design expertise - 30+ Workflow Integrations: Seamlessly connects with Linear, Jira, Notion, Slack, Figma, and GitHub for PM workflows - Pixel-Perfect Production Parity: Prototypes automatically match your live product, eliminating off-brand mockup problems - Collaborative Review Tools: Comment threads, version history, approval workflows, and one-click sharing for stakeholder feedback - Developer Handoff: Export CSS, design tokens, component specs, and framework code for unambiguous engineering specifications

•Author: Tech Blog Team
•Published: 2025-01-07
•Word Count: ~7,200

Key Features

▸Live Design Capture
Captures your actual product design system directly from the browser
▸Brand Consistency
Ensures prototypes perfectly match your existing product design
▸AI-Powered Editing
Natural language editing while maintaining brand consistency
▸Workflow Integrations
30+ integrations with Linear, Jira, Notion, Slack, Figma, GitHub

Alloy: The First Prototyping Tool That Captures Your Real Product Design

Executive Summary

The Product Prototyping Challenge

Understanding the Problem

The traditional product development workflow is plagued by a critical disconnect that wastes time, creates confusion, and leads to poor product decisions:

The Off-Brand Prototype Problem: When product managers need to quickly prototype a feature idea to get customer or stakeholder feedback, they face limited options:

1. Wait for design resources (often weeks), then receive Figma mockups that, while beautiful, don't use your actual production components and may include subtle inconsistencies with your live productWait for design resources (often weeks), then receive Figma mockups that, while beautiful, don't use your actual production components and may include subtle inconsistencies with your live product
2. Use generic app builders (Bubble, Retool, Webflow) that produce functional prototypes but with completely different visual styling, making it impossible for reviewers to evaluate the feature in the context of the actual product experienceUse generic app builders (Bubble, Retool, Webflow) that produce functional prototypes but with completely different visual styling, making it impossible for reviewers to evaluate the feature in the context of the actual product experience
3. Hack together screenshots in PowerPoint or Keynote, manually editing images to simulate new features—a tedious process that produces static, low-fidelity resultsHack together screenshots in PowerPoint or Keynote, manually editing images to simulate new features—a tedious process that produces static, low-fidelity results

Each approach has fundamental problems:

The Design-Development Feedback Loop Problem: The traditional workflow creates a multi-week cycle:

1. PM writes a spec (3-5 days)PM writes a spec (3-5 days)
2. Design backlog wait time (1-2 weeks)Design backlog wait time (1-2 weeks)
3. Designer creates mockups (2-5 days)Designer creates mockups (2-5 days)
4. Review and iteration (3-7 days)Review and iteration (3-7 days)
5. Finally share with stakeholders/customers (1-2 days to gather feedback)Finally share with stakeholders/customers (1-2 days to gather feedback)
6. Feedback requires changes → repeat cycleFeedback requires changes → repeat cycle

This 3-6 week cycle for a single feature validation makes rapid experimentation impossible. By the time you've validated one approach, market conditions or customer needs may have shifted.

Why Alloy Matters

This fundamental shift delivers transformative benefits:

Key Features and Capabilities

Instant Product Capture

Browser Extension Workflow: Alloy operates through a lightweight browser extension (Chrome, Edge, Safari) that captures pages from your live product:

1. Install the Extension: Add Alloy from the Chrome Web Store or directly from alloy.appInstall the Extension: Add Alloy from the Chrome Web Store or directly from alloy.app
2. Navigate to Your Product: Open any page of your web applicationNavigate to Your Product: Open any page of your web application
3. Activate Capture: Click the Alloy extension icon, then "Capture page"Activate Capture: Click the Alloy extension icon, then "Capture page"
4. Automatic Processing: Alloy analyzes the page's DOM structure, computed styles, component patterns, and design tokensAutomatic Processing: Alloy analyzes the page's DOM structure, computed styles, component patterns, and design tokens
5. Instant Preview: Within seconds, see your captured page in the Alloy editor, ready for modificationInstant Preview: Within seconds, see your captured page in the Alloy editor, ready for modification

What Gets Captured:

•Visual Styling: Colors, typography (fonts, sizes, weights, line heights), spacing, shadows, borders, backgrounds
•Component Patterns: Buttons, input fields, cards, navigation elements, modals, forms, tables, lists
•Layout Structure: Grid systems, flexbox patterns, responsive breakpoints, spacing rhythms
•Design Tokens: Automatically inferred color palettes, typography scales, spacing units
•Interactive Elements: Hover states, focus styles, button variants (primary, secondary, destructive)

Multi-Page Capture: Capture multiple pages from your product to build a comprehensive component library:

Captured Pages: ├── Dashboard (homepage) ├── User Settings ├── Data Table View ├── Form Example ├── Modal Dialogs └── Mobile Navigation

→ Alloy learns: "This product uses these button styles, this card pattern, this navigation structure, etc."

The more pages you capture, the more accurate and comprehensive your component library becomes.

AI-Powered Prototype Editing

Once you've captured a page, Alloy provides two editing modes for prototyping new features:

Natural Language Prompting (Primary Mode): Describe changes in plain English, and Alloy's AI modifies the prototype while maintaining your design system:

→ "Add an empty state illustration and message when there are no items"

The AI understands context from your component library:

•Component Reuse: "settings section" uses your existing card/panel pattern
•Style Consistency: New elements automatically match existing typography, colors, spacing
•Layout Intelligence: New sections are positioned logically within the existing layout structure
•Responsive Behavior: Added elements respect your product's responsive design patterns

Visual Editing Mode (Secondary Mode): For fine-grained control, switch to visual editing:

•Click elements to select and modify properties
•Drag to reposition components
•Adjust spacing, sizing, colors with visual controls
•Copy/paste components from captured pages
•Fine-tune responsive behavior at different breakpoints

The visual editor feels like Figma/Framer but operates on your actual component library, ensuring any manual edits still maintain design system consistency.

Iterative Refinement: Combine prompting and visual editing for rapid iteration:

Total time: 2-3 minutes for a complete new section

Progressive Component Library Learning

Alloy's AI doesn't just capture static styles—it learns your design patterns and improves over time:

Pattern Recognition: After capturing several pages, Alloy identifies recurring patterns:

Detected Patterns:
✓ Card Pattern: White background, 4px shadow, 12px border radius, 16px padding
✓ Button Hierarchy: Primary (blue fill), Secondary (blue outline), Destructive (red fill)
✓ Typography Scale: Heading 1 (32px/700), Heading 2 (24px/600), Body (16px/400)
✓ Spacing System: 4px base unit, multiples of 4 (4, 8, 12, 16, 24, 32, 48, 64)
✓ Color Palette: Primary #0066FF, Success #00C853, Error #FF3B30, Neutral #F5F5F5
✓ Grid System: 12-column grid, 24px gutters, max-width 1200px

Intelligent Defaults: When you request new components, Alloy uses learned patterns:

→ Generated component matches your product's existing success message pattern, even if you never captured a success message page

Context-Aware Suggestions: As you edit, Alloy suggests relevant components from your library:

When editing a form:
Suggestions:
•"Add a date picker" (detected date input pattern from captured pages)
•"Include validation messages" (learned error message styling)
•"Add a submit button" (uses your primary button style)

Version Tracking: Alloy maintains a history of how your component library evolves:

•Track when new patterns are captured
•See how your design system changes over time
•Revert to previous component versions if needed
•Export component library documentation

Seamless Workflow Integrations

Alloy integrates deeply with product managers' existing tools:

Linear Integration:

•Create prototypes directly from Linear issues
•Attach Alloy prototypes to issues for context
•Update prototypes as issue requirements evolve
•Link prototype screens to specific subtasks

Jira Integration:

•Associate prototypes with Jira tickets
•Add prototype links to ticket descriptions
•Track which prototypes are related to which epics
•Export prototype specs as ticket attachments

Notion Integration:

•Embed Alloy prototypes inline in Notion docs
•Link prototypes to product specs and roadmaps
•Maintain a prototype library in Notion databases
•Automatically update embedded prototypes when you make changes

Slack Integration:

•Share prototype links in Slack channels with auto-expanding previews
•Get notifications when team members comment on prototypes
•Quick-share prototypes during discussions without leaving Slack
•Set up channels to auto-post new prototypes for team awareness

Figma Integration:

•Export Alloy prototypes to Figma for design refinement
•Import Figma designs back into Alloy to maintain consistency
•Sync design tokens between Figma and Alloy
•Collaborate with designers: PM prototypes in Alloy, designer refines in Figma

Email/Calendar Integration:

•Send prototype links in meeting invites for context
•Schedule prototype reviews with stakeholders
•Automatically include relevant prototypes in status updates
•Track who has viewed prototypes sent via email

GitHub Integration:

•Link prototypes to pull requests as visual specifications
•Reference prototypes in issue discussions
•Track which prototypes correspond to which branches
•Automatically close prototype review tasks when code is merged

Customer Feedback Tools:

•Integrate with Intercom, Zendesk, or HubSpot
•Show prototypes to customers during support conversations
•Gather feedback directly on prototype screens
•Track which customer requests are addressed by which prototypes

Collaborative Review and Feedback

Share with One Click: Generate a shareable link for any prototype:

alloy.app/p/abc123xyz
Options:
•Public link (anyone with link can view)
•Password protected
•Restricted to specific email addresses
•Time-limited access (expires after 7 days, custom durations)

Comment and Annotation System: Reviewers can provide feedback directly on prototype screens:

•Pin Comments: Click anywhere on the prototype to add a comment anchored to that location
•Threaded Discussions: Reply to comments for back-and-forth conversations
•Tag Team Members: @mention colleagues to bring them into discussions
•Resolve Threads: Mark comments as resolved once addressed
•Filter Views: Show only unresolved comments, my comments, or all feedback

Version History and Branching:

Prototype: "New Checkout Flow"
Main Version (shared with stakeholders)
├── v1: Initial concept (Jan 5)
├── v2: Added payment options (Jan 7)
└── v3: Incorporated CEO feedback (Jan 10)
Experimental Branches:
├── express-checkout (exploring simplified flow)
└── guest-checkout (testing no-account option)
→ Iterate freely in branches without affecting
  the version stakeholders are reviewing

Approval Workflows: Set up formal approval processes:

Track status, required approvers, and approval history

Analytics and Engagement Tracking: Understand how prototypes are being reviewed:

•Who has viewed the prototype
•Time spent on each screen
•Which screens get the most attention
•Drop-off points in multi-screen flows
•Comment activity over time

This data helps identify screens that confuse reviewers or features that generate the most discussion.

Responsive Design and Multi-Device Prototyping

Automatic Responsive Capture: When you capture a page, Alloy automatically detects responsive behavior:

•Breakpoints (mobile, tablet, desktop)
•Layout shifts at different screen sizes
•Component reflow patterns
•Navigation transformations (desktop nav → mobile hamburger menu)

Multi-Device Preview: View and edit prototypes at different screen sizes:

Preview Modes:
•Mobile (375px) - iPhone SE/13/14
•Mobile Large (428px) - iPhone 14 Pro Max
•Tablet (768px) - iPad
•Desktop (1440px) - Standard laptop
•Desktop Large (1920px) - Full HD monitors
•Custom dimensions

Device-Specific Editing: Make changes that only affect specific breakpoints:

→ Alloy maintains these responsive behaviors automatically

Interaction States: Prototype interactive behaviors:

•Hover states for buttons and links
•Focus states for form inputs
•Loading states for async operations
•Error states for validation
•Success states for confirmations
•Disabled states for inactive elements

Handoff to Development

Alloy prototypes serve as unambiguous specifications for engineering:

Component Specifications: Click any element to see detailed specs:

→ Engineers know exactly how to implement

CSS Export: Export CSS for any component:

.button-primary {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  background-color: #0066FF;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
}
.button-primary:hover {
  background-color: #0052CC;
}
.button-primary:active {
  background-color: #003D99;
  transform: scale(0.98);
}
.button-primary:disabled {
  background-color: #CCCCCC;
  cursor: not-allowed;
}

Design Token Export: Export your design system as structured tokens:

{
  "colors": {
    "primary": "#0066FF",
    "primary-hover": "#0052CC",
    "primary-active": "#003D99",
    "success": "#00C853",
    "error": "#FF3B30",
    "neutral-100": "#F5F5F5",
    "neutral-900": "#1A1A1A"
  },
  "typography": {
    "font-family": "Inter, sans-serif",
    "heading-1": { "size": "32px", "weight": 700, "line-height": 1.2 },
    "heading-2": { "size": "24px", "weight": 600, "line-height": 1.3 },
    "body": { "size": "16px", "weight": 400, "line-height": 1.5 }
  },
  "spacing": {
    "unit": "4px",
    "xs": "4px",
    "sm": "8px",
    "md": "16px",
    "lg": "24px",
    "xl": "32px",
    "2xl": "48px"
  }
}

Figma Export: Export prototypes to Figma for design refinement:

•All components exported as Figma components
•Design tokens mapped to Figma styles
•Responsive frames for different breakpoints
•Maintain edit history between Alloy and Figma

Code Snippets: Generate framework-specific code (React, Vue, Angular):

// React component example
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
export function SettingsSection() {
  return (
    
      
Account Settings

      

        Email Notifications
        
      

      

        
        
      
    
  );
}

Getting Started with Alloy

Installation and Setup

Step 1: Create an Account:

•Visit https://alloy.app
•Sign up with email or Google/GitHub SSO
•Verify email if required
•Complete onboarding survey (helps Alloy understand your use case)

Step 2: Install Browser Extension:

•From the Alloy dashboard, click "Install Extension"
•Choose your browser (Chrome, Edge, Safari, Firefox)
•Click "Add to Browser" in the extension store
•Authorize the extension to capture pages

Step 3: Set Up Your First Workspace:

Workspace Setup:
•Workspace Name: "Acme Inc Product"
•Product URL: https://app.acme.com
•Team Members: Invite PMs, designers, engineers
•Integrations: Connect Linear, Slack, Notion

Capturing Your First Page

Walkthrough:

1. Navigate to Your Product: Open your web application at any page you want to capture (e.g., dashboard, settings, data view)Navigate to Your Product: Open your web application at any page you want to capture (e.g., dashboard, settings, data view)
2. Open Alloy Extension: Click the Alloy icon in your browser toolbarOpen Alloy Extension: Click the Alloy icon in your browser toolbar
3. Capture Page: Click "Capture page" buttonCapture Page: Click "Capture page" button

- Alloy analyzes the DOM structure - Extracts styles and design tokens - Processes component patterns - Generates editable representation

4. Review Capture: Alloy automatically opens the captured page in the editorReview Capture: Alloy automatically opens the captured page in the editor

- Verify capture quality (should be pixel-perfect) - Check interactive elements (buttons, inputs) - Review component library updates

Tips for Best Captures:

•Capture pages in their typical state (not empty states initially)
•Ensure all interactive elements are visible (expand menus, open dropdowns)
•Capture different page types (list views, detail views, forms, modals)
•Log in to capture authenticated pages
•Capture responsive versions by resizing browser before capture

Creating Your First Prototype

Example: Adding a "Dark Mode" Settings Option

Scenario: You want to validate whether users would appreciate a dark mode toggle in settings.

Step 1: Capture Settings Page

Navigate to: https://yourapp.com/settings
Click Alloy extension → "Capture page"

Step 2: Add Dark Mode Toggle In the Alloy editor, use natural language prompting:

Prompt: "Add a new settings section called 'Appearance' with a
toggle switch for enabling dark mode. Place it below the current
notification settings section."

Alloy generates:

•New "Appearance" section using your existing settings section pattern
•Toggle switch matching your current toggle component style
•Label and description text using your typography system
•Proper spacing consistent with other sections

Step 3: Refine with Visual Editor (optional)

•Click the new section to adjust spacing
•Modify description text to be more specific
•Add a screenshot or mockup of what dark mode would look like

Step 4: Share for Feedback

Click "Share" → Generate link → Copy
Share with:
•Team Slack channel: "Thoughts on adding dark mode? Check out this mockup"
•Customer interviews: Show during user research sessions
•Stakeholders: Include in weekly product update

Step 5: Iterate Based on Feedback

Feedback received: "Can we also add font size controls?" Back in Alloy: Prompt: "Add font size controls below the dark mode toggle with options for Small, Medium, Large"

→ Alloy adds controls using your existing UI patterns → Update shared link (previous links automatically show updated version)

Total time from idea to shareable prototype: 5 minutes

Compare to traditional workflow:

•Write spec: 30 mins
•Wait for design: 3-5 days
•Figma mockup: 2-3 hours
•Iterations: 1-2 days
•Total: 1 week minimum