@sparrowengg/twigs-mobile-ai-mcp

MCP server that converts Figma designs into production-ready React Native components using the twigs-mobile design system.

Features

• Figma-to-code in one step - pass a Figma URL, get back classified components, extracted tokens, resolved icons, and generated React Native code.

• Icon pipeline - detects icons in Figma, exports as SVG or PNG, and converts vectors into typed react-native-svg components with size/color props.

• Component classification - uses Figma's own component metadata to map instances to twigs-mobile equivalents with resolved props. Button/Primary/Large becomes <Button variant="solid" size="lg">.

• Design token extraction - extracts colors, fonts, spacing, and radii from every node and maps them to theme tokens (#00828D -> primary500).

• Project-aware - reads your structure, theme, and existing components. Skips duplicates, flags missing peer deps.

• Built-in React Native best practices - enforces SafeAreaView, useTheme(), Box/Flex over raw View, expo-image, FlashList, GPU-only animations, 250-line file limit, no hardcoded values.

Setup

{
  "mcpServers": {
    "twigs-mobile": {
      "command": "npx",
      "args": ["-y", "@sparrowengg/twigs-mobile-ai-mcp"],
      "env": {
        "FIGMA_API_KEY": "your-figma-api-key"
      }
    }
  }
}

Tools

| Tool | Purpose | | ---- | ------- | | get_figma_json | Structured layout/style data from a Figma node | | get_figma_screenshot | PNG screenshot of a Figma node | | download_figma_assets | Download icons/images as SVG or PNG to your project | | analyze_project | Project structure, dependencies, React Native version, theme | | find_similar_components | Find existing components to reuse | | check_version_compatibility | Validate versions against twigs-mobile requirements | | get_project_theme | Extract custom theme tokens | | generate_mobile_component | Generate a full React Native component from a Figma URL or description | | classify_figma_components | Map Figma instances to twigs-mobile components + props | | extract_design_tokens | Extract colors, fonts, spacing, radii mapped to theme tokens | | get_twigs_icon | Resolve a Figma icon name to a twigs-react-icons React Native component |

Writing Effective Prompts

A bare Figma URL is not enough. Call out layout specifics, spacing, and component behavior.

Bad

Build this Figma screen:
https://figma.com/design/abc123/MyApp?node-id=12-345

No guidance on positioning, spacing, or behavior. The AI will guess.

Good

Convert this Figma screen to React Native:
https://figma.com/design/abc123/MyApp?node-id=12-345

- The "Get Started" button overlaps the hero image - use absolute positioning.
- Outer horizontal padding should match the design exactly (24px).
- Card list scrolls horizontally with 12px gap.
- Follow the same pattern as our LoginScreen component.

Generate a component from this Figma frame:
https://figma.com/design/abc123/MyApp?node-id=88-102

- Pricing card with gradient background (LinearGradient, not flat color).
- CTA button stretches full-width with 16px horizontal margin.
- Checkmark icons next to each feature line.

Convert this settings screen:
https://figma.com/design/abc123/MyApp?node-id=44-200

- Sticky header with back button - use navigation header options, not custom header.
- Settings groups separated by 8px divider ($neutral100).
- Toggles use twigs Switch component.
- "Delete Account" button uses color="negative".
- Whole screen scrolls - ScrollView + SafeAreaView.

Workflow

Single component - just pass the Figma URL to generate_mobile_component. It handles classification, token extraction, icon export, and code generation.

Complex screen - run tools individually for more control:

1. classify_figma_components - see what maps to twigs-mobile and what needs custom UI.
2. extract_design_tokens - get exact values mapped to theme tokens.
3. generate_mobile_component - generate with specific layout/behavior notes.
4. get_figma_screenshot - compare output against the original design.

Tips & Tricks

• Select specific frames, not entire pages. Focused selections produce better results.
• Run classify_figma_components first on complex frames to preview what the AI will generate.
• Use extract_design_tokens when spacing and color accuracy matter - gives exact values instead of screenshot approximations.
• Add a DESIGN.md to your project root with recurring patterns (e.g., "all screens use 24px padding"). The MCP injects it into every generation.
• One screen at a time. Break multi-screen flows into individual generations.
• Call out absolute positioning explicitly. The AI defaults to flex layout and won't infer overlapping elements from Figma structure.
• Reference existing components in your prompt (e.g., "follow the pattern of ProfileCard"). The MCP finds them and includes them as context.
• Wrong icons? Usually an SVG vs PNG issue. Logos export as PNG, vectors as SVG. Override with download_figma_assets if needed.