---

name: anima-deploy-integration description: 'Deploy Anima design-to-code service as a backend API endpoint.

Use when building a design-to-code microservice, deploying Anima SDK

as a serverless function, or creating an internal design tool API.

Trigger with: "deploy anima", "anima service deploy", "anima serverless".

' allowed-tools: Read, Write, Edit, Bash(vercel:), Bash(gcloud:), Bash(docker:*) version: 2.0.0 argument-hint: "[deployment-target]" model: inherit effort: high license: MIT author: Jeremy Longshore jeremy@intentsolutions.io tags:

• saas
• design
• figma
• anima
• deployment compatibility: Requires Node.js 20+, approved Anima API access, current Anima SDK documentation, and authorized Figma or website source access

---

Anima Deploy Integration

Overview

Deploy the Anima SDK as a backend service. The SDK is server-side only, so deploy it behind an API endpoint that accepts Figma file/node references and returns generated code.

Prerequisites

• A private or authenticated service boundary with an allowlisted design-file registry; do not expose arbitrary fileKey and nodesId generation to the public internet.
• Managed Anima and Figma secrets, separate staging/production credentials, request limits, and an audit trail that excludes token values and design content.
• An approved generated-output path, validation pipeline, and rollback target for every deployment revision.

Instructions

Step 1: Express API Wrapper

// src/server.ts
import express from 'express';
import { Anima } from '@animaapp/anima-sdk';

const app = express();
app.use(express.json());

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

app.post('/api/generate', async (req, res) => {
  const { fileKey, nodesId, settings } = req.body;

  if (!fileKey || !nodesId?.length) {
    return res.status(400).json({ error: 'fileKey and nodesId required' });
  }

  try {
    const { files } = await anima.generateCode({
      fileKey,
      figmaToken: process.env.FIGMA_TOKEN!,
      nodesId,
      settings: settings || { language: 'typescript', framework: 'react', styling: 'tailwind' },
    });
    res.json({ files, count: Object.keys(files).length });
  } catch (err: any) {
    res.status(502).json({ error: 'Generation failed', requestId: req.id });
  }
});

app.get('/health', (_req, res) => res.json({ status: 'ok' }));
app.listen(3000, () => console.log('Anima service on :3000'));

Step 2: Vercel Serverless Function

// api/generate.ts
import { Anima } from '@animaapp/anima-sdk';

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

export default async function handler(req: any, res: any) {
  if (req.method !== 'POST') return res.status(405).end();

  const { fileKey, nodesId, settings } = req.body;
  const { files } = await anima.generateCode({
    fileKey, figmaToken: process.env.FIGMA_TOKEN!, nodesId,
    settings: settings || { language: 'typescript', framework: 'react', styling: 'tailwind' },
  });
  res.json({ files });
}

Step 3: Deploy Commands

# Vercel
vercel secrets add anima_token "$ANIMA_TOKEN"
vercel secrets add figma_token "$FIGMA_TOKEN"
vercel --prod

# Cloud Run
gcloud run deploy anima-service \
  --source . \
  --set-secrets=ANIM…[redacted]:latest,FIGMA_TOKEN=figma-token:latest \
  --region us-central1 --no-allow-unauthenticated

Tool Discipline

Use Read and Grep to inspect the existing integration and generated diff before changing anything. Use Write or Edit only inside the approved generated-code, test, or configuration paths. Use the declared Bash commands only for the explicit install, validation, or diagnostic steps in this workflow; never print tokens, source designs, generated source, or private website captures.

Output

• Express API wrapping Anima SDK for internal design tooling
• Vercel serverless function for lightweight deployment
• Cloud Run deployment with Secret Manager

Examples

Deploy the service to a staging environment behind the organization’s existing identity proxy and invoke /api/generate with one allowlisted file/node pair. Verify the request is authorized, output remains in the approved generated-code location, logs contain only request metadata, and generated files pass the downstream formatter and test gate before a human reviews them. If an unauthenticated caller, unknown node, or secret-binding error reaches the service, reject the request, alert the operator, and keep the prior revision active rather than opening broad access or embedding credentials in the client.

Error Handling

| Failure | Response | |---------|----------| | Caller is not authenticated or file/node is not allowlisted | Reject before contacting Anima or Figma. | | Managed secret is unavailable | Fail closed and repair the deployment binding; never use a plaintext fallback. | | Generation or validation fails | Return a sanitized failure, preserve the prior revision, and quarantine the output. | | Rate limit or repeated bad requests occur | Apply bounded throttling and alert the owning service team. |

Resources

• Anima API
• Anima SDK Example Server