anima-local-dev-loop

# 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 ```bash 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 ```typescript // 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!, ...