Building a Store Asset Production Environment in Antigravity — Stitch × Figma × MCP Workspace

Creating assets for app store listings—screenshots, icons, preview images, promo graphics—is one of the most time-consuming parts of mobile app development. Most teams juggle multiple tools, manage versions manually, and repeat work across different platforms and languages. What if you could automate all of this?

This article shows you how to build an integrated asset production environment by combining Antigravity (AI-powered image generation and editing), Stitch (automated UI extraction), Figma (design source of truth), and MCP (Model Context Protocol for specification management). The result: a single workflow that generates publication-ready assets for App Store, Google Play, and more—automatically.

Why an Integrated Workspace Matters

Let's face facts. Most app teams today operate something like this:

• Designers work in Figma
• Developers screenshot the UI in a simulator
• Marketing manually resizes images and adds text overlays
• Version control is a shared Dropbox folder with names like assets_FINAL_v3_actual.zip
• When the app updates, the whole process repeats

This fragmentation creates waste: duplicate work, version confusion, platform-specific mistakes, and manual overhead that steals time from actual product development.

An integrated workspace eliminates these friction points. Instead of five separate tools and four manual steps, you get one unified pipeline: Figma → Stitch → Antigravity → Done.

The Architecture: How Stitch, Figma, MCP, and Antigravity Work Together

Here's the flow:

Figma (Design Source)
    ↓ auto-exports frames & components
Stitch (UI Metadata Extraction)
    ↓ extracts colors, fonts, layout, structure
MCP Store Guide (Platform Specifications)
    ↓ defines App Store, Google Play, Windows Store requirements
Antigravity (AI-Powered Asset Generation)
    ↓ generates screenshots, applies text, creates variants
Platform-Ready Assets
    ↓ 1170×2532 for iOS, 1080×1920 for Android, etc.

Each layer feeds into the next. Figma is the source of truth. Stitch extracts semantic meaning from design. MCP codifies platform requirements. Antigravity orchestrates everything and applies AI-powered editing. The output is a complete, production-ready asset suite.

Step 1: Set Up Figma as Your Design Source

Your Figma file needs three key sections:

• Prototype frames: Full-screen mockups for each user journey (Onboarding, Main Flow, Settings, etc.)
• Component library: Reusable UI elements (buttons, cards, navigation bars)
• Slices for export: Marked regions that Stitch will extract

Create a config file that points to your Figma workspace:

{
  "figma": {
    "fileKey": "YOUR_FIGMA_FILE_KEY",
    "apiToken": "YOUR_FIGMA_API_TOKEN",
    "exportFrames": [
      "Onboarding",
      "MainFlow",
      "Settings",
      "Confirmation"
    ],
    "componentLibrary": "DesignSystem",
    "autoSync": true,
    "syncInterval": "1h"
  }
}

With autoSync enabled, any changes you make in Figma automatically trigger a re-extraction in Stitch and regeneration in Antigravity. This keeps your assets perpetually in sync with your latest design.

Step 2: Extract UI Metadata with Stitch

Stitch is the bridge between design and automation. It reads your Figma frames and extracts:

• Element hierarchy and positioning
• Typography (font family, size, weight, color)
• Color palette and gradients
• Spacing and layout relationships
• Component instances and overrides

This structured metadata becomes input for Antigravity. Instead of blindly generating generic images, Antigravity understands your design system and can apply it consistently across all generated assets.

For a deeper dive on Stitch integration, see our guide: "Stitch × Antigravity Workflow"

Step 3: Define Platform Requirements with MCP Store Guide

App stores have strict requirements. iOS wants 1170×2532 screenshots. Android wants 1080×1920. Icon sizes differ. Aspect ratios matter. Text overlay areas are limited.

MCP Store Guide codifies all of this. It's a structured document (JSON, YAML, or plain text) that specifies:

App Store (iOS):

• iPhone screenshots: 1170×2532px, up to 5
• iPad screenshots: 2048×2732px, up to 5
• App icon: 1024×1024px (required)

Google Play:

• Phone screenshots: 1080×1920px, up to 8
• Tablet screenshots: 1440×2560px, optional
• App icon: 512×512px

Windows Store:

• Screenshots: 1920×1080px, up to 9
• Tile image: 300×300px
• Store logo: 50×50px

By defining these specs once in MCP, Antigravity knows exactly what size and format to produce for each platform. Learn more in "Antigravity MCP Store Guide".

Step 4: Generate Assets with Antigravity

This is where the magic happens. Antigravity takes:

1. Your Figma frames (via Stitch metadata)
2. Platform specs (via MCP)
3. Content (text, language variants, version info)

And produces:

1. High-fidelity screenshots at platform-correct dimensions
2. Localized text overlays in multiple languages
3. Variant sets for A/B testing
4. Icon and preview asset files

Here's a simplified example of how this works in code:

from antigravity import StoreAssetGenerator
 
# Load MCP specifications
platform_specs = load_mcp_guide("store_specs.json")
 
# Initialize generator with Stitch metadata
generator = StoreAssetGenerator(
    figma_metadata="./stitch_output.json",
    platform_specs=platform_specs
)
 
# Generate screenshots for multiple languages
assets = generator.generate_assets(
    languages=["en", "ja", "zh"],
    platforms=["app_store", "google_play"],
    variants={"theme": ["light", "dark"], "density": ["compact", "regular"]}
)
 
# Export to cloud storage
for platform, asset_set in assets.items():
    export_to_platform(platform, asset_set)

In under a minute, you've generated dozens of production-ready images.

Step 5: Multi-Platform Export

The beauty of this approach is scalability. Once you've defined your spec in MCP, Antigravity handles platform differences automatically:

Each platform gets its own tailored asset set, all generated from a single source: your Figma file.

Real-World Example: From Design to Five App Stores in 30 Minutes

Imagine your app targets iOS, Android, and web. You need assets in both English and Japanese. You've got five different app stores to publish to.

The old way:

1. Screenshot the app in simulator (iOS) → Resize to 1170×2532 → Export
2. Screenshot again (Android) → Resize to 1080×1920 → Export
3. Add English text overlays in Photoshop
4. Repeat for Japanese
5. Crop and resize for each platform's unique requirements
6. Upload manually to each store Time: 2-3 days. Error rate: High.

The integrated workspace way:

1. Update Figma with your latest UI
2. Stitch auto-extracts metadata
3. Antigravity generates all assets (all languages, all platforms)
4. Auto-upload via MCP-configured pipelines Time: 30 minutes. Error rate: Near zero.

Getting Started

To implement this workspace for your own projects:

1. Start with "Figma × Antigravity Setup Guide" for step-by-step configuration
2. Read "Stitch × Antigravity Workflow" to understand metadata extraction
3. Reference "Antigravity MCP Store Guide" for platform-specific specs

The initial setup takes an afternoon. The payoff—hours saved on every app release, fewer manual errors, consistent branding across platforms—compounds over time. For teams shipping to app stores regularly, this integrated workspace isn't just convenient. It's essential.