anima-local-dev-loop

name	anima-local-dev-loop
description	Set up iterative design-to-code development loop with Anima SDK. Use when rapidly iterating on Figma-to-code output, comparing framework outputs, or building a local preview server for generated components. Trigger: "anima local dev", "anima dev loop", "anima preview", "anima iteration".
allowed-tools	Read, Write, Edit, Bash(npm:*), Grep
version	1.0.0
license	MIT
author	Jeremy Longshore <[e-mail]>
tags	["saas","design","figma","anima","development"]
compatible-with	claude-code

Anima Local Dev Loop

Overview

Iterative development workflow for Anima design-to-code: generate from Figma, preview in browser, tweak settings, regenerate. Includes side-by-side comparison of React vs Vue vs HTML output.

Instructions

Step 1: Project Setup

mkdir anima-dev && cd anima-dev
npm init -y
npm install @animaapp/anima-sdk dotenv
npm install -D vite @vitejs/plugin-react typescript

Step 2: Generate and Preview Script

// scripts/generate-preview.ts
import { Anima } from '@animaapp/anima-sdk';
import fs from 'fs';
import 'dotenv/config';

const anima = new Anima({ auth: { token: process.env.ANIMA_TOKEN! } });

const SETTINGS_PRESETS = {
  'react-tailwind': { language: 'typescript' as const, framework: 'react' as const, styling: 'tailwind' as const },
  'react-shadcn': { language: 'typescript' as const, framework: 'react' as const, styling:   , :    },
  : { :   , :   , :    },
  : { :   , :   , :    },
};

  () {
   settings = [preset];
   outputDir = ;
  fs.(outputDir, { :  });

   { files } =  anima.({
    : process..!,
    : process..!,
    : [nodeId],
    settings,
  });

   ( file  files) {
    fs.(, file.);
  }
  .();
}


  () {
   ( preset  .()  <keyof  >) {
     (preset, nodeId);
      ( (r, )); 
  }
  .();
}

 nodeId = process.[] || ;
(nodeId).(.);