How to Build an Automated Figma Weave Asset Pipeline with Claude 3.5 Sonnet and Python

Designing UI components and vector icons in modern tools is incredibly satisfying. Exporting them to actual code? Not so much. Standard vector exports are riddled with redundant nested groups, useless metadata, non-standard viewport declarations, and hardcoded fill colours that refuse to adapt to dark mode.

If you are using Figma Weave to build and wire up interface logic, you can automate this messy transition entirely. Instead of manually parsing XML tags and hand-crafting React wrappers, we can build a local Python asset pipeline that uses Claude 3.5 Sonnet to consume raw vector markup, strip out the visual cruft, and output semantic, fully customisable Tailwind-styled JSX assets.

Let’s set up a script that reads raw layout files, runs them through Claude, and writes out elegant, production-ready frontend components.

The Problem with Raw Vector Exports

When design engines export elements, they focus on absolute fidelity rather than clean code. A simple close icon might look like this under the hood:

`xml <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <g filter="url(#filter0_d_12_34)"> <path d="M18 6L6 18" stroke="#1E1E1E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6 6L18 18" stroke="#1E1E1E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g> </svg> `

If you drop this directly into a component library, you are stuck with static inline strokes, hardcoded dimensions, and unnecessary filter groups. What you actually want is a clean, reactive component that dynamically accepts Tailwind height, width, and color classes.

Step 1: Initialize Your Asset Pipeline

Create a clean workspace and install the necessary dependencies for running the script. We will need the Anthropic SDK to speak to Claude 3.5 Sonnet, and watchdog to optionally monitor our asset folders for immediate conversions.

`bash mkdir figma-pipeline cd figma-pipeline python3 -m venv venv source venv/bin/activate pip install anthropic watchdog `

Ensure your Anthropic API key is properly configured:

`bash export ANTHROPIC_API_KEY="your_key_here" `

Step 2: Write the Pipeline Code

Create a python file named pipeline.py. This script will monitor an input folder (where you drop raw Figma Weave SVG exports) and instantly convert them into clean React/Tailwind component files in an output folder.

`python import os import sys from anthropic import Anthropic

client = Anthropic()

INPUT_DIR = "./raw_assets" OUTPUT_DIR = "./components"

Ensure output directories exist os.makedirs(INPUT_DIR, exist_ok=True) os.makedirs(OUTPUT_DIR, exist_ok=True)

SYSTEM_INSTRUCTIONS = """ You are an elite frontend engineer obsessed with clean code and minimal bundle sizes. Your task is to convert raw SVG/XML strings into production-ready React typescript (.tsx) components using Tailwind CSS.

Follow these formatting rules: 1. Remove all editor metadata, empty <g> wrapper tags, and hardcoded dimension attributes (like width and height) on the root <svg>. 2. Add standard React props for scaling: allow custom className and size overrides (defaulting to size 24). 3. Replace hardcoded stroke and fill hexadecimal colors (e.g. #1E1E1E) with React-friendly 'currentColor' values, allowing Tailwind's text utilities (e.g., text-slate-800) to style the asset. 4. Output ONLY the raw component code. Do not wrap code in markdown ticks, and do not explain your changes. Begin directly with the imports. """

def optimize_svg(filename, raw_content): component_name = "".join([part.capitalize() for part in filename.replace(".svg", "").split("_")]) + "Icon" prompt = f""" Convert this raw vector into a clean React component named '{component_name}': {raw_content} """ try: response = client.messages.create( model="claude-3-5-sonnet-20241022", max_tokens=1000, system=SYSTEM_INSTRUCTIONS, messages=[{"role": "user", "content": prompt}] ) output_code = response.content[0].text.strip() # Remove markdown wraps if Claude ignored system prompt bounds if output_code.startswith("`"): output_code = "\n".join(output_code.split("\n")[1:-1]) target_path = os.path.join(OUTPUT_DIR, f"{component_name}.tsx") with open(target_path, "w", encoding="utf-8") as f: f.write(output_code) print(f"✔ Cleaned and compiled: {filename} -> {component_name}.tsx") except Exception as e: print(f"❌ Failed to optimize {filename}: {e}")

def process_pending_assets(): files = [f for f in os.listdir(INPUT_DIR) if f.endswith(".svg")] if not files: print("No new raw assets to convert. Drop your SVGs in the /raw_assets folder.") return for file in files: path = os.path.join(INPUT_DIR, file) with open(path, "r", encoding="utf-8") as f: content = f.read() optimize_svg(file, content) # Clean up input folder to avoid processing duplicate files os.remove(path)

if __name__ == "__main__": process_pending_assets() `

Step 3: Run the Compilation

Create a sample raw export file to test the automation system. Save this file to your system as raw_assets/close_btn.svg:

`xml <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <g opacity="0.8"> <path d="M18 6L6 18" stroke="#FF3366" stroke-width="2" stroke-linecap="round"/> <path d="M6 6L18 18" stroke="#FF3366" stroke-width="2" stroke-linecap="round"/> </g> </svg> `

Now execute your pipeline:

`bash python3 pipeline.py `

Within seconds, the raw vector markup is parsed, optimized, and saved inside your components/ directory as CloseBtnIcon.tsx. Open the file, and you will find an incredibly clean component:

`typescript import React from 'react';

interface IconProps extends React.SVGProps<SVGSVGElement> { size?: number; }

export const CloseBtnIcon: React.FC<IconProps> = ({ size = 24, className, ...props }) => { return ( <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props} > <g opacity="0.8"> <path d="M18 6L6 18" stroke="currentColor" strokeWidth={2} strokeLinecap="round"/> <path d="M6 6L18 18" stroke="currentColor" strokeWidth={2} strokeLinecap="round"/> </g> </svg> ); }; `

No manual refactoring, no regex replacement, and zero design debris left over.

Integrating Directly with Your Workflow

You can easily hook this Python script up to run automatically whenever you generate layout components or design mocks inside the Figma Weave workspace. Readers can explore live interactive examples of visual component design in the official Figma Weave gallery.

If you find your converted files are losing sub-path groupings or missing crucial visual attributes, you can troubleshoot the LLM's visual rendering processes on the Figma Weave platform hub.

No more copying XML nodes like a robot. Write the script, drop the vector, and let the pipeline do the grunt work.