Anima Core Workflow B

---
name: anima-core-workflow-b
description: 'Clone websites to React/HTML code and customize Anima output with AI.

  Use when converting live websites to code, customizing generated components,

  or building design-system-aware code from URL screenshots.

  Trigger: "anima website to code", "anima URL clone", "anima AI customization",

  "website to react", "clone website to code".

  '
allowed-tools: Read, Write, Edit, Bash(npm:*), Grep
version: 1.4.0
license: MIT
author: Jeremy Longshore <jeremy@intentsolutions.io>
tags:
- saas
- design
- figma
- anima
- website-cloning
compatibility: Designed for Claude Code
---
# Anima Core Workflow B — Website-to-Code & AI Customization

## Overview

Secondary workflow: use Anima to clone live websites into React/HTML code and customize generated output with AI-powered code modification. Anima supports URL-to-code conversion alongside Figma-to-code.

## Prerequisites

- Completed `anima-install-auth` setup
- Understanding of Anima's code generation settings

## Instructions

### Step 1: Website-to-Code Conversion

```typescript
// src/workflows/website-to-code.ts
// Anima can clone any public website and generate React or HTML code

import { Anima } from '@animaapp/anima-sdk';

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

// Note: URL-to-code may use a different API endpoint
// Check docs.animaapp.com for current availability
async function cloneWebsiteToReact(url: string, outputDir: string) {
  // Anima's website-to-code feature captures the page and generates code
  // This is available via the Anima Playground or API (partner access)

  // For Figma-based workflow, use the Figma plugin to import website screenshots
  // then generate code from the imported frames
  console.log(`Cloning ${url} to React components...`);

  // Process via Figma intermediary:
  // 1. Use Anima Figma plugin to capture website layout
  // 2. Generate code from the captured frames
  // 3. Customize with AI post-processing
}
```

### Step 2: Post-Generation Customization

```typescript
// src/workflows/customize-output.ts
import fs from 'fs';
import path from 'path';

interface CustomizationRule {
  pattern: RegExp;
  replacement: string;
  description: string;
}

// Apply project-specific customizations to Anima output
function customizeGeneratedCode(
  files: Array<{ fileName: string; content: string }>,
  rules: CustomizationRule[],
): Array<{ fileName: string; content: string }> {
  return files.map(file => {
    let content = file.content;
    for (const rule of rules) {
      content = content.replace(rule.pattern, rule.replacement);
    }
    return { ...file, content };
  });
}

// Common customization rules
const PROJECT_RULES: CustomizationRule[] = [
  {
    pattern: /className="([^"]+)"/g,
    replacement: 'className={cn("$1")}',
    description: 'Wrap Tailwind classes with cn() utility',
  },
  {
    pattern: /import React from 'react'/g,
    replacement: "import React from 'react';\nimport { cn } from '@/lib/utils'",
    description: 'Add cn import for className merging',
  },
  {
    pattern: /export default function (\w+)/g,
    replacement: 'export const $1: React.FC = function $1',
    description: 'Use React.FC type annotation',
  },
];
```

### Step 3: Design Token Mapper

```typescript
// src/workflows/token-mapper.ts
// Map Anima's raw Tailwind classes to your design system tokens

interface TokenMap {
  colors: Record<string, string>;     // Anima color → your token
  spacing: Record<string, string>;    // Anima spacing → your token
  typography: Record<string, string>; // Anima font → your token
}

const tokenMap: TokenMap = {
  colors: {
    'bg-\\[#1a1a2e\\]': 'bg-primary',
    'text-\\[#e94560\\]': 'text-accent',
    'bg-\\[#16213e\\]': 'bg-surface',
  },
  spacing: {
    'p-\\[24px\\]': 'p-6',
    'gap-\\[16px\\]': 'gap-4',
    'mt-\\[32px\\]': 'mt-8',
  },
  typography: {
    'text-\\[32px\\]': 'text-3xl',
    'font-\\[600\\]': 'font-semibold',
  },
};

function applyDesignTokens(content: string, map: TokenMap): string {
  let result = content;
  for (const category of Object.values(map)) {
    for (const [from, to] of Object.entries(category)) {
      result = result.replace(new RegExp(from, 'g'), to);
    }
  }
  return result;
}
```

### Step 4: Multi-Component Output Organizer

```typescript
// src/workflows/organizer.ts
import fs from 'fs';
import path from 'path';

function organizeGeneratedFiles(
  files: Array<{ fileName: string; content: string }>,
  baseDir: string,
): void {
  // Organize by component type
  const structure: Record<string, string> = {
    '.tsx': 'components',
    '.vue': 'components',
    '.css': 'styles',
    '.ts': 'types',
    '.html': 'pages',
  };

  for (const file of files) {
    const ext = path.extname(file.fileName);
    const subDir = structure[ext] || 'misc';
    const dir = path.join(baseDir, subDir);
    fs.mkdirSync(dir, { recursive: true });
    fs.writeFileSync(path.join(dir, file.fileName), file.content);
  }

  // Generate barrel export
  const components = files.filter(f => f.fileName.endsWith('.tsx'));
  if (components.length > 0) {
    const exports = components.map(f => {
      const name = path.basename(f.fileName, '.tsx');
      return `export { default as ${name} } from './${name}';`;
    });
    fs.writeFileSync(
      path.join(baseDir, 'components', 'index.ts'),
      exports.join('\n') + '\n'
    );
  }
}
```

## Output

- Website cloning to React/HTML via Figma intermediary
- Post-generation customization rules engine
- Design token mapper for project consistency
- File organizer with barrel exports

## Examples

Use a page you own or have written permission to reproduce, capture only the
approved layout into a staging Figma file, and generate a single React component
into an isolated output directory. Apply the project token map, then review the
result for brand assets, copy, accessibility, responsive behavior, and license
constraints before it enters the application. Treat generated markup as a
starting point rather than a faithful or authorized reproduction of a third
party’s product. If access is blocked, output contains unapproved material, or
the result fails visual/semantic review, stop and obtain the needed rights or
redesign from an original specification instead of bypassing site controls.

## Error Handling

| Error | Cause | Solution |
|-------|-------|----------|
| URL not accessible | Website blocks scraping | Use Figma plugin to capture manually |
| Output doesn't match design | Complex animations/interactions | Simplify to static layout first |
| Token mapping misses | New colors/spacing in design | Update token map after each generation |

## Resources

- [Anima API](https://docs.animaapp.com/docs/anima-api)
- [Anima Playground](https://www.animaapp.com)
- [Anima Blog: GenAI Customization](https://www.animaapp.com/blog/genai/genai-figma-to-code-6-examples-of-how-to-use-animas-new-ai-code-customization/)

## Next Steps

For common errors and debugging, see `anima-common-errors`.