Create an Anima playground from a prompt, website URL, or Figma design. Returns a playground URL where the generated code can be viewed and edited. **Input types (set via "type" field):** - "p2c": Generate from a text prompt. Requires: prompt. Styling: tailwind, css, inline_styles. - "l2c": Convert a website URL to code. Requires: url. Styling: tailwind, inline_styles. uiLibrary: shadcn only. - "f2c": Convert Figma frames to code. Requires: fileKey, nodesId (also requires X-Figma-Token header). Styling: tailwind, plain_css, css_modules, inline_styles. uiLibrary: mui, antd, shadcn, clean_react. **Common fields:** framework (react or html), styling (see per-type options above). **React-only fields:** language (typescript or javascript), uiLibrary (see per-type options above). **Returns:** { success, sessionId, playgroundUrl }

Convert a Figma design to production-ready code. This tool generates code from Figma designs, supporting multiple frameworks and styling options. **Authentication:** Requires X-Figma-Token header with your Figma personal access token. **Inputs:** - fileKey: Figma file key extracted from the URL. For example, from "https://figma.com/design/abc123XYZ/MyDesign", the fileKey is "abc123XYZ". - nodesId: Array of Figma node IDs to convert. Extract from the URL's node-id parameter, replacing "-" with ":". For example, from "?node-id=1-2", the nodeId is "1:2". - framework: Target framework (react, html). Detect from the user's project to match their existing stack. - styling: CSS approach (tailwind, plain_css). Detect from the user's project to match their existing styling system. - language: TypeScript or JavaScript. Detect from the user's project. - uiLibrary: Optional UI component library (mui, antd, shadcn). Detect from the user's project if they use one of the supported libraries. - assetsBaseUrl: Base path for assets in generated code **Returns:** - files: Generated code files as a record of {path: {content, isBinary}} - assets: Array of {name, url} for images/assets that need to be downloaded from Figma - tokenUsage: Approximate token count for the generation - snapshotsUrls: Record of {nodeId: url} with screenshot URLs for each requested node - guidelines: IMPORTANT Instructions for using the generated code effectively **CRITICAL - Implementation Workflow:** After calling this tool, you MUST: 1. Download the snapshot images from snapshotsUrls - these are the visual reference of the original Figma design 2. View/analyze the snapshot images to understand the exact visual appearance. Use BOTH the generated code AND the snapshots as inputs for your implementation 3. Parse `data-variant` attributes from generated components → map to your component props 4. Extract CSS variables from generated styles → use exact colors 5. IMPORTANT: Follow the detailed guidelines provided in the tool response for accurate implementation 6. Compare final implementation against snapshot for visual accuracy **Asset Handling:** The generated code references assets at the assetsBaseUrl path. You must download the assets from the returned URLs and place them at your assetsBaseUrl location. For example, if assetsBaseUrl is "./assets" and an asset is named "logo.png", the code will reference "./assets/logo.png".

Code review council. Senior Engineer, Security Reviewer, and Performance Analyst analyze your code and a moderator synthesizes their findings.

Code review council. Senior Engineer, Security Reviewer, and Performance Analyst analyze your code and a moderator synthesizes their findings.

Generate production-ready code in any language from a plain-English description.

Format source code using Prettier. Supports JS, TS, CSS, HTML, JSON, YAML, Markdown, GraphQL.