Back to Details

anima

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Design and Build with Anima

借助Anima进行设计与开发

Overview

概述

Anima is the design agent in your AI coding swarm. This skill gives agents design awareness and the ability to turn visual ideas into production-ready code.
There are two distinct paths depending on what you're trying to do:
Anima是你的AI编码协作集群中的设计Agent。该工具能让Agent具备设计感知能力，将视觉创意转化为可投入生产的代码。
根据你的需求，有两种不同的使用路径：

Path A: Create & Publish (Full App Creation)

路径A：创建与发布（完整应用创建）

Build complete applications from scratch. No local codebase needed. Anima handles everything: design, code generation, scalable database, and hosting. You go from idea to live URL in minutes.
This path is powerful for parallel variant creation. Generate multiple versions of the same idea with different prompts, all at the same time. Pick the best one, then open the playground URL to keep refining. All without writing a line of code or managing infrastructure.
Create Anima Playgrounds by: Prompt, Clone URL, Figma URL
What you get:
  • A fully working application in an Anima Playground
  • The ability to generate multiple variants in parallel and compare them
  • No tokens wasted on file scanning, dependency resolution, or build tooling
  • Scalable database already connected
  • Scalable hosting when you publish
从零开始构建完整应用，无需本地代码库。Anima会处理所有环节：设计、代码生成、可扩展数据库及托管服务。你只需几分钟就能从创意得到可访问的在线URL。
该路径非常适合并行生成多个变体。通过不同的提示词生成同一创意的多个版本，同时进行。选择最佳版本后，打开Playground URL即可继续优化，全程无需编写代码或管理基础设施。
创建Anima Playground的方式： 提示词、克隆网址、Figma网址
你将获得：
  • 可在Anima Playground中运行的完整应用
  • 并行生成多个变体并进行对比的能力
  • 无需在文件扫描、依赖解析或构建工具上消耗令牌
  • 已连接好的可扩展数据库
  • 发布时提供可扩展的托管服务

Path B: Integrate into Codebase (Design-Aware Code Generation)

路径B：集成到现有代码库（具备设计感知的代码生成）

Pull design elements and experiences from Anima into your existing project. Use this when you have a codebase and want to implement specific components or pages from a Figma design url or an existing Anima Playground.
Flows: Figma URL to Code (codegen), Anima Playground to Code
What you get:
  • Generated code from Anima playgrounds designs adapted to your stack
  • Precise design tokens, assets, and implementation guidelines
将Anima中的设计元素和交互体验引入你的现有项目。当你已有代码库，且需要从Figma设计URL或现有Anima Playground中实现特定组件或页面时，可使用此路径。
流程： Figma URL转代码（代码生成）、Anima Playground转代码
你将获得：
  • 根据你的技术栈适配的、从Anima Playground设计生成的代码
  • 精准的设计令牌、资源及实现指南

Prerequisites

前置条件

  • Anima MCP server must be connected and accessible — OR use the CLI (
    npx @animaapp/cli
    )
  • User must have an Anima account (free tier available)
  • For Figma flows: Figma personal access token (stored via 
    auth --figma-token
    or connected during Anima authentication)
  • For headless environments: an Anima API token
  • 必须连接并可访问Anima MCP服务器 —— 或 使用CLI（
    npx @animaapp/cli
    ）
  • 用户需拥有Anima账户（提供免费层级）
  • 对于Figma流程：需Figma个人访问令牌（通过
    auth --figma-token
    存储或在Anima认证期间连接）
  • 对于无头环境：需Anima API令牌

Important: Timeouts

重要提示：超时设置

Anima's 
playground-create
tool generates full applications from scratch. This takes time:
  • p2c (prompt to code): Typically 3-7 minutes
  • l2c (link to code): Typically 3-7 minutes
  • f2c (Figma to code): Typically 2-5 minutes
  • playground-publish: Typically 1-3 minutes
Always use a 10-minute timeout (600000ms) for 
playground-create
, 
playground-publish
, and CLI calls. Default timeouts will fail.
Anima的
playground-create
工具从零开始生成完整应用，这需要一定时间：
  • p2c（提示词转代码）： 通常3-7分钟
  • l2c（网址转代码）： 通常3-7分钟
  • f2c（Figma转代码）： 通常2-5分钟
  • playground-publish： 通常1-3分钟
对于
playground-create
、
playground-publish
和CLI调用，务必设置10分钟超时（600000ms）。默认超时设置会导致失败。

Setup

配置步骤

There are two ways to use Anima:
使用Anima有两种方式：

Option 1: MCP Server (recommended for MCP-capable agents)

选项1：MCP服务器（推荐支持MCP的Agent使用）

Before attempting any Anima MCP call, verify the connection is already working. Try calling any Anima MCP tool. If it responds, you're connected. If it fails, the user needs to set up authentication. See the setup guide for details.
在尝试任何Anima MCP调用前，需验证连接是否正常。尝试调用任意Anima MCP工具，若响应正常则连接成功；若失败，用户需设置认证。详情请查看配置指南。

Option 2: CLI (recommended for shell-based agents)

选项2：CLI（推荐基于Shell的Agent使用）

No MCP setup needed. Just 
npx
and a token.
IMPORTANT: Before running any CLI command, you MUST set up authentication first. Without auth, all commands will fail.
Step 1 — Check if auth is already configured:
bash
npx @animaapp/cli auth --status
Step 2 — If not configured, ask the user for their Anima API token, then run:
bash
npx @animaapp/cli auth --token <anima-token>
The token is stored at 
~/.config/anima/credentials.json
and persists across sessions. The user gets their token from https://dev.animaapp.com > Settings > API Keys.
Step 3 (only for Figma flows) — Store Figma token:
bash
npx @animaapp/cli auth --figma-token <figma-token>
Alternative: Set environment variables instead of using the auth command:
bash
export ANIMA_API_TOKEN=<token>
export FIGMA_TOKEN=<token>
Do NOT try to pass tokens inline, construct auth headers manually, or write credentials files yourself. Always use 
npx @animaapp/cli auth --token
or environment variables.
The CLI outputs JSON when piped (for AI tools) and pretty text in terminals. All commands support 
--json
, 
--verbose
, and 
--timeout
.
无需MCP配置，只需
npx
和令牌即可。
重要提示：在运行任何CLI命令前，必须先完成认证设置。未认证情况下，所有命令都会失败。
步骤1 — 检查认证是否已配置：
bash
npx @animaapp/cli auth --status
步骤2 — 若未配置，向用户索要Anima API令牌，然后运行：
bash
npx @animaapp/cli auth --token <anima-token>
令牌将存储在
~/.config/anima/credentials.json
中，并在会话间持久化。用户可从https://dev.animaapp.com > 设置 > API密钥获取令牌。
步骤3（仅适用于Figma流程） — 存储Figma令牌：
bash
npx @animaapp/cli auth --figma-token <figma-token>
替代方案： 使用环境变量而非auth命令：
bash
export ANIMA_API_TOKEN=<token>
export FIGMA_TOKEN=<token>
请勿尝试直接内联传递令牌、手动构造认证头或自行编写凭据文件。请始终使用
npx @animaapp/cli auth --token
或环境变量。
CLI在管道输出时会返回JSON（供AI工具使用），在终端中则输出格式化文本。所有命令均支持
--json
、
--verbose
和
--timeout
参数。

Choosing the Right Path

选择合适的路径

Before diving into tools and parameters, decide which path fits the user's goal.
在深入了解工具和参数前，请先确定哪种路径符合用户的目标。

When to use Path A (Create & Publish)

何时使用路径A（创建与发布）

  • User wants to build something new from a description, reference site, or Figma design
  • User wants a live URL they can share immediately
  • No existing codebase to integrate into
  • Goal is prototyping, exploring visual directions, or shipping a standalone app
  • 用户希望从描述、参考网站或Figma设计构建新内容
  • 用户希望获得可立即分享的在线URL
  • 无需集成到现有代码库
  • 目标是原型制作、探索视觉方向或发布独立应用

When to use Path B (Integrate into Codebase)

何时使用路径B（集成到现有代码库）

  • User has an existing project and wants to add a component or page from Figma
  • User wants generated code files to drop into their repo, not a hosted app
  • User already built something in an Anima Playground and wants to pull the code locally
  • 用户已有现有项目，希望从Figma中添加组件或页面
  • 用户希望获得可直接放入仓库的生成代码文件，而非托管应用
  • 用户已在Anima Playground中完成内容构建，希望将代码拉取到本地

Ambiguous cases

模糊场景判断

User saysLikely pathWhy
"Implement this Figma design"Path B"Implement" implies code in their project
"Turn this Figma into a live site"Path A (f2c)"Live site" means they want hosting
"Build me an app like this" + URLPath A (l2c)Clone and rebuild from scratch
"Add this Figma component to my project"Path B"Add to my project" = codebase integration
"Clone this website"Path A (l2c)Clone = capture and rebuild from scratch
"Download the playground code"Path BWants files locally
When still unclear, ask: "Do you want a live hosted app, or code files to add to your project?"
用户表述对应路径原因
"实现这个Figma设计"路径B"实现"意味着要在他们的项目中生成代码
"把这个Figma转成在线网站"路径A（f2c）"在线网站"意味着用户需要托管服务
"帮我构建一个类似这样的应用" + URL路径A（l2c）克隆并从零开始重建
"把这个Figma组件添加到我的项目中"路径B"添加到我的项目" = 集成到代码库
"克隆这个网站"路径A（l2c）克隆意味着从零开始捕获并重建
"下载Playground代码"路径B用户希望将文件保存到本地
若仍不明确，可询问："你需要的是可托管的在线应用，还是可添加到项目中的代码文件？"

From Request to Prompt

从需求到提示词

Before calling any tool, the agent needs to decide: is this request ready to build, or does it need clarification? And if it's ready, how do you write a prompt that lets Anima shine?
在调用任何工具前，Agent需要判断：该请求是否已准备好构建，还是需要进一步澄清？若已准备好，如何编写能让Anima发挥最佳效果的提示词？

When to ask vs when to build

何时询问，何时直接构建

Threshold rule: Can you write a prompt that includes purpose, audience, and 3-5 key features? Yes = build. No = ask.
Signals to just build:
  • "Build a recipe sharing app where users can upload photos and rate each other's dishes" (clear purpose, audience implied, features named)
  • "Clone stripe.com" (unambiguous)
  • "Turn this into a live site" + Figma URL (clear intent and input)
Signals to ask:
  • "Build me a website" (what kind? for whom?)
  • "Make something for my business" (what does the business do?)
  • "Create an app" (what should it do?)
When you ask, ask everything in one message. Don't drip-feed questions. If the user is vague and doesn't want to answer, skip clarification and use Explore Mode to generate 3 variants instead. Showing beats asking.
判断标准： 你能否写出包含用途、受众和3-5个核心功能的提示词？是 = 直接构建；否 = 询问用户。
可直接构建的信号：
  • "构建一个菜谱分享应用，用户可上传照片并互相评分菜品"（用途明确，受众隐含，功能明确）
  • "克隆stripe.com"（含义明确）
  • "把这个转成在线网站" + Figma URL（意图和输入明确）
需要询问的信号：
  • "帮我做一个网站"（什么类型？面向谁？）
  • "为我的业务做些东西"（业务内容是什么？）
  • "创建一个应用"（功能是什么？）
询问时，请在一条消息中问完所有问题，不要分多次提问。若用户表述模糊且不愿回答，可跳过澄清步骤，使用探索模式生成3个变体。展示比询问更有效。

Crafting the prompt

编写提示词的技巧

Anima is a design-aware AI. Treat it like a creative collaborator, not a code compiler. Describe the feel of what you want, not the pixel-level implementation. Over-specifying with code and hex values overrides Anima's design intelligence and produces generic results.
Include in prompts: purpose, audience, mood/style, 3-5 key features, content tone.
Leave out of prompts: code snippets, CSS values, hex colors, pixel dimensions, font sizes, component library names (use the 
uiLibrary
parameter instead), implementation details, file structure.
Bad (over-specified):
Create a dashboard. Use #1a1a2e background, #16213e sidebar at 280px width,
#0f3460 cards with 16px padding, border-radius 12px. Header height 64px with
a flex row, justify-between. Font: Inter 14px for body, 24px bold for headings.
Good (descriptive):
SaaS analytics dashboard for a B2B product team. Clean, minimal feel.
Sidebar navigation, KPI cards for key metrics, a usage trend chart, and a
recent activity feed. Professional but approachable. Think Linear meets Stripe.
Anima是具备设计感知的AI，请将其视为创意合作者，而非代码编译器。描述你想要的整体感觉，而非像素级的实现细节。过度指定代码和十六进制颜色值会覆盖Anima的设计智能，导致生成通用化的结果。
提示词中应包含： 用途、受众、风格氛围、3-5个核心功能、内容语气。
提示词中应避免： 代码片段、CSS值、十六进制颜色、像素尺寸、字体大小、组件库名称（请使用
uiLibrary
参数替代）、实现细节、文件结构。
反面示例（过度指定）：
创建一个仪表盘。使用#1a1a2e背景色，侧边栏宽度280px，颜色#16213e，卡片颜色#0f3460，内边距16px，圆角12px。头部高度64px，使用flex布局，两端对齐。字体：正文使用Inter 14px，标题使用24px粗体。
正面示例（描述性）：
面向B2B产品团队的SaaS分析仪表盘。风格简洁、极简。包含侧边栏导航、关键指标KPI卡片、使用趋势图表和最近活动流。专业但不失亲和力，参考Linear和Stripe的风格。

Path A: Create & Publish

路径A：创建与发布

Step A1: Identify the Flow

步骤A1：确定流程

Determine which flow to use based on what the user provides and what they want.
User has a text description or idea → p2c
The most flexible path. Anima designs everything from your description. Best for new apps, prototypes, and creative exploration.
User has a website URL → l2c
Use l2c to clone the site. Anima recreates the full site into an editable playground.
User has a Figma URL → f2c (Path A) or codegen (Path B)
Two sub-cases:
  • "Turn this into a live app" or "Make this a working site" → f2c (Path A). Creates a full playground from the Figma design
  • "Implement this in my project" or "Add this component to my codebase" → codegen (Path B). Generates code files for integration
Quick reference:
User providesIntentFlowTool
Text descriptionBuild something newp2c
playground-create
type="p2c"
Website URLClone itl2c
playground-create
type="l2c"
Figma URLMake it a live appf2c
playground-create
type="f2c"
Figma URLImplement in my projectcodegen
codegen-figma_to_code
(Path B)
根据用户提供的内容和需求，确定使用哪种流程。
用户提供文字描述或创意 → p2c
这是最灵活的路径。Anima会根据你的描述完成所有设计。最适合新应用、原型制作和创意探索。
用户提供网站URL → l2c
使用l2c克隆网站。Anima会将其重建为可编辑的Playground，并生成可投入生产的代码。
用户提供Figma URL → f2c（路径A）或代码生成（路径B）
两种子场景：
  • "把这个转成在线应用" 或 "把这个做成可运行的网站" → f2c（路径A）。将Figma设计创建为完整的Playground
  • "在我的项目中实现这个" 或 "把这个Figma组件添加到我的项目中" → 代码生成（路径B）。生成可集成到代码库的代码文件
快速参考：
用户提供的内容意图流程工具
文字描述构建新内容p2c
playground-create
type="p2c"
网站URL克隆网站l2c
playground-create
type="l2c"
Figma URL制作在线应用f2c
playground-create
type="f2c"
Figma URL在项目中实现代码生成
codegen-figma_to_code
（路径B）

Step A2: Create

步骤A2：创建应用

Prompt to Code (p2c)

提示词转代码（p2c）

Describe what you want in plain language. Anima designs and generates a complete playground with brand-aware visuals.
MCP:
playground-create(
  type: "p2c",
  prompt: "SaaS analytics dashboard for a B2B product team. Clean, minimal feel. Sidebar navigation, KPI cards for key metrics, a usage trend chart, and a recent activity feed. Professional but approachable.",
  framework: "react",
  styling: "tailwind",
  guidelines: "Dark mode, accessible contrast ratios"
)
CLI:
bash
npx @animaapp/cli create -t p2c -p "SaaS analytics dashboard for a B2B product team. Clean, minimal feel. Sidebar navigation, KPI cards for key metrics, a usage trend chart, and a recent activity feed. Professional but approachable." --guidelines "Dark mode, accessible contrast ratios"
Only 
-t
and 
-p
are required. Defaults: 
--framework react
, 
--styling tailwind
, 
--language typescript
.
Parameters specific to p2c:
ParameterRequiredDescription
prompt
YesText description of what to build
guidelines
NoAdditional coding guidelines or constraints
Styling options: 
tailwind
, 
css
, 
inline_styles
用自然语言描述你的需求。Anima会设计并生成具备品牌感知视觉效果的完整Playground。
MCP调用：
playground-create(
  type: "p2c",
  prompt: "面向B2B产品团队的SaaS分析仪表盘。风格简洁、极简。包含侧边栏导航、关键指标KPI卡片、使用趋势图表和最近活动流。专业但不失亲和力。参考Linear和Stripe的风格。",
  framework: "react",
  styling: "tailwind",
  guidelines: "支持深色模式，符合可访问性对比度标准"
)
CLI调用：
bash
npx @animaapp/cli create -t p2c -p "面向B2B产品团队的SaaS分析仪表盘。风格简洁、极简。包含侧边栏导航、关键指标KPI卡片、使用趋势图表和最近活动流。专业但不失亲和力。参考Linear和Stripe的风格。" --guidelines "支持深色模式，符合可访问性对比度标准"
仅需
-t
和
-p
参数为必填项。默认值：
--framework react
、
--styling tailwind
、
--language typescript
。
p2c专属参数：
参数是否必填描述
prompt
是待构建内容的文字描述
guidelines
否额外的编码指南或约束条件
样式选项： 
tailwind
、
css
、
inline_styles

Link to Code (l2c)

网址转代码（l2c）

Provide a website URL. Anima recreates it as an editable playground with production-ready code.
MCP:
playground-create(
  type: "l2c",
  url: "https://stripe.com/payments",
  framework: "react",
  styling: "tailwind",
  language: "typescript",
  uiLibrary: "shadcn"
)
CLI:
bash
npx @animaapp/cli create -t l2c -u https://stripe.com/payments --ui-library shadcn
Only 
-t
and 
-u
are required. Defaults: 
--framework react
, 
--styling tailwind
, 
--language typescript
.
Parameters specific to l2c:
ParameterRequiredDescription
url
YesWebsite URL to clone
Styling options: 
tailwind
, 
inline_styles
UI Library options: 
shadcn
only
Language: Always 
typescript
for l2c
提供网站URL。Anima会将其重建为可编辑的Playground，并生成可投入生产的代码。
MCP调用：
playground-create(
  type: "l2c",
  url: "https://stripe.com/payments",
  framework: "react",
  styling: "tailwind",
  language: "typescript",
  uiLibrary: "shadcn"
)
CLI调用：
bash
npx @animaapp/cli create -t l2c -u https://stripe.com/payments --ui-library shadcn
仅需
-t
和
-u
参数为必填项。默认值：
--framework react
、
--styling tailwind
、
--language typescript
。
l2c专属参数：
参数是否必填描述
url
是待克隆的网站URL
样式选项： 
tailwind
、
inline_styles
UI库选项： 仅支持
shadcn
语言： l2c始终使用
typescript

Figma to Playground (f2c)

Figma转Playground（f2c）

Provide a Figma URL. Anima implements the design into a full playground you can preview and iterate on.
URL format: 
https://figma.com/design/:fileKey/:fileName?node-id=1-2
Extract:
  • File key: The segment after 
    /design/
    (e.g., 
    kL9xQn2VwM8pYrTb4ZcHjF
    )
  • Node ID: The 
    node-id
    query parameter value, replacing 
    -
    with 
    :
    (e.g., 
    42-15
    becomes 
    42:15
    )
MCP:
playground-create(
  type: "f2c",
  fileKey: "kL9xQn2VwM8pYrTb4ZcHjF",
  nodesId: ["42:15"],
  framework: "react",
  styling: "tailwind",
  language: "typescript",
  uiLibrary: "shadcn"
)
CLI (accepts full Figma URL — extracts file key and node IDs automatically):
bash
npx @animaapp/cli create -t f2c --file-key "https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/My-File?node-id=42-15" --ui-library shadcn
Only 
-t
and 
--file-key
are required. The CLI parses Figma URLs and normalizes node IDs automatically. Defaults: 
--framework react
, 
--styling tailwind
, 
--language typescript
.
Parameters specific to f2c:
ParameterRequiredDescription
fileKey
YesFigma file key from URL
nodesId
YesArray of Figma node IDs (use 
:
not 
-
)
Styling options: 
tailwind
, 
plain_css
, 
css_modules
, 
inline_styles
UI Library options: 
mui
, 
antd
, 
shadcn
, 
clean_react
提供Figma URL。Anima会将设计实现为可预览和迭代的完整Playground。
URL格式： 
https://figma.com/design/:fileKey/:fileName?node-id=1-2
提取信息：
  • 文件密钥： 
    /design/
    后的部分（例如：
    kL9xQn2VwM8pYrTb4ZcHjF
    ）
  • 节点ID： 
    node-id
    查询参数的值，将
    -
    替换为
    :
    （例如：
    42-15
    变为
    42:15
    ）
MCP调用：
playground-create(
  type: "f2c",
  fileKey: "kL9xQn2VwM8pYrTb4ZcHjF",
  nodesId: ["42:15"],
  framework: "react",
  styling: "tailwind",
  language: "typescript",
  uiLibrary: "shadcn"
)
CLI调用（支持完整Figma URL —— 自动提取文件密钥和节点ID）：
bash
npx @animaapp/cli create -t f2c --file-key "https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/My-File?node-id=42-15" --ui-library shadcn
仅需
-t
和
--file-key
参数为必填项。CLI会自动解析Figma URL并规范化节点ID。默认值：
--framework react
、
--styling tailwind
、
--language typescript
。
f2c专属参数：
参数是否必填描述
fileKey
是来自Figma URL的文件密钥
nodesId
是Figma节点ID数组（使用
:
而非
-
）
样式选项： 
tailwind
、
plain_css
、
css_modules
、
inline_styles
UI库选项： 
mui
、
antd
、
shadcn
、
clean_react

Step A3: Publish

步骤A3：发布

After creating a playground, deploy it to a live URL or publish as an npm package.
创建Playground后，可将其部署为在线URL或发布为npm包。

Publish as Web App

发布为Web应用

MCP:
playground-publish(
  sessionId: "abc123xyz",
  mode: "webapp"
)
CLI:
bash
npx @animaapp/cli publish abc123xyz
The response includes the live URL for the published app.
MCP调用：
playground-publish(
  sessionId: "abc123xyz",
  mode: "webapp"
)
CLI调用：
bash
npx @animaapp/cli publish abc123xyz
响应结果将包含已发布应用的在线URL。

Publish as Design System (npm package)

发布为设计系统（npm包）

MCP:
playground-publish(
  sessionId: "abc123xyz",
  mode: "designSystem",
  packageName: "@myorg/design-system",
  packageVersion: "1.0.0"
)
CLI:
bash
npx @animaapp/cli publish abc123xyz --mode designSystem --package-name @myorg/design-system
MCP调用：
playground-publish(
  sessionId: "abc123xyz",
  mode: "designSystem",
  packageName: "@myorg/design-system",
  packageVersion: "1.0.0"
)
CLI调用：
bash
npx @animaapp/cli publish abc123xyz --mode designSystem --package-name @myorg/design-system

Explore Mode: Parallel Variants

探索模式：并行生成变体

This is Path A's secret weapon. When a user says "build me X" or "prototype X", generate multiple interpretations in parallel, publish all of them, and return live URLs for comparison.
Workflow:
  1. Generate 3 prompt variants from the user's idea. Each takes a different creative angle:
    • Variant 1: Faithful, straightforward interpretation
    • Variant 2: A more creative or opinionated take
    • Variant 3: A different visual style or layout approach
  2. Launch all 3 
    playground-create
    calls in parallel     (one per variant, type p2c)
  3. As each one completes, immediately call 
    playground-publish
    (mode webapp)
  4. Return all 3 live URLs so the user can pick a favorite or ask for refinements. Optionally, if you have a screenshot tool available, capture each page to show in the chat.
Timing: All 3 variants generate in parallel, so total wall time is roughly the same as one (~5-7 minutes creation + 1-3 minutes publishing). Expect results within ~10 minutes.
Tips for good variant prompts:
  • Keep the core idea identical across all three
  • Vary the visual approach: e.g., "minimal and clean", "bold and colorful", "enterprise and professional"
  • Add specific guidelines to each variant to differentiate them
  • If the user mentioned a reference site or style, incorporate it into one variant
  • Follow the prompt crafting principles above: describe mood and purpose, not implementation details
这是路径A的核心优势。当用户说"帮我构建X"或"制作X原型"时，可并行生成多种不同的实现版本，全部发布后返回在线URL供用户对比。
工作流程：
  1. 根据用户的创意生成3个不同的提示词变体，每个变体采用不同的创意方向：
    • 变体1：忠实、直接的实现
    • 变体2：更具创意或个性化的版本
    • 变体3：不同的视觉风格或布局方式
  2. 并行启动3个
    playground-create
    调用    （每个变体对应一个调用，类型为p2c）
  3. 每个调用完成后，立即调用
    playground-publish
    （模式为webapp）
  4. 返回所有3个在线URL，让用户选择最喜欢的版本或提出优化需求。若有截图工具，可捕获每个页面的截图并展示在对话中。
时间预估： 3个变体并行生成，总耗时与单个变体大致相同（约5-7分钟创建 + 1-3分钟发布），预计10分钟内可得到结果。
编写优质变体提示词的技巧：
  • 所有变体的核心创意保持一致
  • 调整视觉风格：例如"极简干净"、"大胆多彩"、"企业级专业风格"
  • 为每个变体添加特定的指南以区分它们
  • 若用户提到参考网站或风格，可将其融入其中一个变体
  • 遵循上述提示词编写原则：描述氛围和用途，而非实现细节

Path B: Integrate into Codebase

路径B：集成到现有代码库

Step B1: Identify the Flow

步骤B1：确定流程

User providesFlowTool
Figma URL + wants code in their projectFigma to Code
codegen-figma_to_code
Anima Playground URL + wants code locallyDownload
project-download_from_playground
用户提供的内容流程工具
Figma URL + 希望在项目中生成代码Figma转代码
codegen-figma_to_code
Anima Playground URL + 希望将代码保存到本地下载代码
project-download_from_playground

Step B2: Match Project Stack to Tool Parameters

步骤B2：匹配项目技术栈与工具参数

Project stackParameterValue
React
framework
"react"
No React
framework
"html"
Tailwind
styling
"tailwind"
CSS Modules
styling
"css_modules"
Plain CSS
styling
"plain_css"
TypeScript
language
"typescript"
MUI
uiLibrary
"mui"
Ant Design
uiLibrary
"antd"
shadcn
uiLibrary
"shadcn"
项目技术栈参数值
React
framework
"react"
非React
framework
"html"
Tailwind
styling
"tailwind"
CSS Modules
styling
"css_modules"
纯CSS
styling
"plain_css"
TypeScript
language
"typescript"
MUI
uiLibrary
"mui"
Ant Design
uiLibrary
"antd"
shadcn
uiLibrary
"shadcn"

Step B3: Generate Code

步骤B3：生成代码

Figma to Code (direct implementation)

Figma转代码（直接实现）

MCP:
codegen-figma_to_code(
  fileKey: "kL9xQn2VwM8pYrTb4ZcHjF",
  nodesId: ["42:15"],
  framework: "react",
  styling: "tailwind",
  language: "typescript",
  uiLibrary: "shadcn",
  assetsBaseUrl: "./assets"
)
CLI (writes files directly to disk):
bash
npx @animaapp/cli codegen --file-key "https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/My-File?node-id=42-15" -o ./components --ui-library shadcn
Only 
--file-key
is required. Defaults: 
--framework react
, 
--styling tailwind
, 
--language typescript
, 
-o ./anima-codegen-output
.
Use the response fields (snapshots, assets, guidelines) as design reference when implementing.
MCP调用：
codegen-figma_to_code(
  fileKey: "kL9xQn2VwM8pYrTb4ZcHjF",
  nodesId: ["42:15"],
  framework: "react",
  styling: "tailwind",
  language: "typescript",
  uiLibrary: "shadcn",
  assetsBaseUrl: "./assets"
)
CLI调用（直接将文件写入磁盘）：
bash
npx @animaapp/cli codegen --file-key "https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/My-File?node-id=42-15" -o ./components --ui-library shadcn
仅需
--file-key
参数为必填项。默认值：
--framework react
、
--styling tailwind
、
--language typescript
、
-o ./anima-codegen-output
。
实现时，可将响应中的字段（截图、资源、指南）作为设计参考。

Download Playground to Local Files

将Playground代码下载到本地文件

MCP:
project-download_from_playground(sessionId: "abc123xyz")
CLI:
bash
npx @animaapp/cli download https://dev.animaapp.com/chat/abc123xyz -o ./my-project
The CLI accepts playground URLs directly and extracts the session ID automatically.
MCP调用：
project-download_from_playground(sessionId: "abc123xyz")
CLI调用：
bash
npx @animaapp/cli download https://dev.animaapp.com/chat/abc123xyz -o ./my-project
CLI支持直接传入Playground URL，并自动提取会话ID。

MCP vs CLI Quick Reference

MCP与CLI快速参考

ActionMCP ToolCLI Command
Prompt to Code
playground-create
type="p2c"
npx @animaapp/cli create -t p2c -p "..."
Link to Code
playground-create
type="l2c"
npx @animaapp/cli create -t l2c -u <url>
Figma to Playground
playground-create
type="f2c"
npx @animaapp/cli create -t f2c --file-key <key>
Publish
playground-publish
npx @animaapp/cli publish <sessionId>
Figma to Code
codegen-figma_to_code
npx @animaapp/cli codegen --file-key <key> -o ./out
Download
project-download_from_playground
npx @animaapp/cli download <url> -o ./out
When to use MCP vs CLI:
  • MCP: Agent has MCP support and Anima server is connected
  • CLI: Agent can run shell commands, no MCP setup needed, headless environments
CLI defaults (all optional): 
--framework react
, 
--styling tailwind
, 
--language typescript
(when react). Only the type flag and the type-specific input (prompt, url, or file-key) are required.
操作MCP工具CLI命令
提示词转代码
playground-create
type="p2c"
npx @animaapp/cli create -t p2c -p "..."
网址转代码
playground-create
type="l2c"
npx @animaapp/cli create -t l2c -u <url>
Figma转Playground
playground-create
type="f2c"
npx @animaapp/cli create -t f2c --file-key <key>
发布
playground-publish
npx @animaapp/cli publish <sessionId>
Figma转代码
codegen-figma_to_code
npx @animaapp/cli codegen --file-key <key> -o ./out
下载代码
project-download_from_playground
npx @animaapp/cli download <url> -o ./out
何时使用MCP vs CLI：
  • MCP：Agent支持MCP且已连接Anima服务器
  • CLI：Agent可运行Shell命令，无需MCP配置，适用于无头环境
CLI默认值（均为可选）：
--framework react
、
--styling tailwind
、
--language typescript
（使用React时）。仅需类型标识和对应类型的输入（提示词、网址或文件密钥）为必填项。

Additional References

更多参考资料