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

// 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

// 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',
  },
];