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.

Prerequisites

• A staging Figma file and allowlisted node IDs, with scoped credentials loaded from an ignored local environment file or development secret store.
• A disposable generated-output directory that is not imported by the production application until code and visual review pass.
• Agreed comparison criteria for accessibility, design-token use, responsive behavior, dependencies, and generation settings.

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: 'tailwind' as const, uiLibrary: 'shadcn' as const },
  'vue-tailwind': { language: 'typescript' as const, framework: 'vue' as const, styling: 'tailwind' as const },
  'html-css': { language: 'javascript' as const, framework: 'html' as const, styling: 'css' as const },
};

async function generateWithPreset(preset: keyof typeof SETTINGS_PRESETS, nodeId: string) {
  const settings = SETTINGS_PRESETS[preset];
  const outputDir = `./generated/${preset}`;
  fs.mkdirSync(outputDir, { recursive: true });

  const { files } = await anima.generateCode({
    fileKey: process.env.FIGMA_FILE_KEY!,
    figmaToken: process.env.FIGMA_TOKEN!,
    nodesId: [nodeId],
    settings,
  });

  for (const file of files) {
    fs.writeFileSync(`${outputDir}/${file.fileName}`, file.content);
  }
  console.log(`${preset}: ${files.length} files generated`);
}

// Compare all presets
async function compareOutputs(nodeId: string) {
  for (const preset of Object.keys(SETTINGS_PRESETS) as Array<keyof typeof SETTINGS_PRESETS>) {
    await generateWithPreset(preset, nodeId);
    await new Promise(r => setTimeout(r, 2000)); // Rate limit
  }
  console.log('\nAll presets generated in ./generated/');
}

const nodeId = process.argv[2] || '1:2';
compareOutputs(nodeId).catch(console.error);

Step 3: Development Scripts

{
  "scripts": {
    "generate": "tsx scripts/generate-preview.ts",
    "generate:node": "tsx scripts/generate-preview.ts",
    "preview": "vite",
    "dev": "npm run generate && npm run preview"
  }
}

Output

• Multi-preset code generation comparison
• Side-by-side React/Vue/HTML output for same design
• Vite preview server for instant component viewing
• Iterative generate-preview-tweak loop

Examples

Select one approved staging frame and run only the react-tailwind preset first. Preview the result locally, compare it to the design for semantics and responsive behavior, and run the project formatter/type check before trying a second preset. Store the Figma version and preset alongside the generated review artifact so the comparison is repeatable. If generation hits a rate limit, output changes unexpectedly, or an unapproved dependency appears, stop the loop, preserve the sanitized error, and correct the fixture or settings instead of continuously regenerating.

Error Handling

Error	Cause	Solution
Rate limited	Too many generations	Add 2s delay between calls
Different outputs each run	Anima AI variation	Pin settings; use consistent node IDs

Resources

• Anima SDK GitHub
• Vite

Next Steps

For SDK patterns and best practices, see anima-sdk-patterns.