{ "schemaVersion": "1.0", "item": { "slug": "anima-design-agent", "name": "Anima", "source": "tencent", "type": "skill", "category": "开发工具", "sourceUrl": "https://clawhub.ai/dannyshmueli/anima-design-agent", "canonicalUrl": "https://clawhub.ai/dannyshmueli/anima-design-agent", "targetPlatform": "OpenClaw" }, "install": { "downloadMode": "redirect", "downloadUrl": "/downloads/anima-design-agent", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=anima-design-agent", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "installMethod": "Manual import", "extraction": "Extract archive", "prerequisites": [ "OpenClaw" ], "packageFormat": "ZIP package", "includedAssets": [ "SKILL.md" ], "primaryDoc": "SKILL.md", "quickSetup": [ "Download the package from Yavira.", "Extract the archive and review SKILL.md first.", "Import or place the package into your OpenClaw setup." ], "agentAssist": { "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.", "steps": [ "Download the package from Yavira.", "Extract it into a folder your agent can access.", "Paste one of the prompts below and point your agent at the extracted folder." ], "prompts": [ { "label": "New install", "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete." }, { "label": "Upgrade existing", "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run." } ] }, "sourceHealth": { "source": "tencent", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-04-23T16:43:11.935Z", "expiresAt": "2026-04-30T16:43:11.935Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard", "contentDisposition": "attachment; filename=\"4claw-imageboard-1.0.1.zip\"", "redirectLocation": null, "bodySnippet": null }, "scope": "source", "summary": "Source download looks usable.", "detail": "Yavira can redirect you to the upstream package for this source.", "primaryActionLabel": "Download for OpenClaw", "primaryActionHref": "/downloads/anima-design-agent" }, "validation": { "installChecklist": [ "Use the Yavira download entry.", "Review SKILL.md after the package is downloaded.", "Confirm the extracted package contains the expected setup assets." ], "postInstallChecks": [ "Confirm the extracted package includes the expected docs or setup files.", "Validate the skill or prompts are available in your target agent workspace.", "Capture any manual follow-up steps the agent could not complete." ] }, "downloadPageUrl": "https://openagent3.xyz/downloads/anima-design-agent", "agentPageUrl": "https://openagent3.xyz/skills/anima-design-agent/agent", "manifestUrl": "https://openagent3.xyz/skills/anima-design-agent/agent.json", "briefUrl": "https://openagent3.xyz/skills/anima-design-agent/agent.md" }, "agentAssist": { "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.", "steps": [ "Download the package from Yavira.", "Extract it into a folder your agent can access.", "Paste one of the prompts below and point your agent at the extracted folder." ], "prompts": [ { "label": "New install", "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete." }, { "label": "Upgrade existing", "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run." } ] }, "documentation": { "source": "clawhub", "primaryDoc": "SKILL.md", "sections": [ { "title": "Overview", "body": "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.\n\nThere are two distinct paths depending on what you're trying to do:" }, { "title": "Path A: Create & Publish (Full App Creation)", "body": "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.\n\nThis 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.\n\nCreate Anima Playgrounds by: Prompt, Clone URL, Figma URL\n\nWhat you get:\n\nA fully working application in an Anima Playground\nThe ability to generate multiple variants in parallel and compare them\nNo tokens wasted on file scanning, dependency resolution, or build tooling\nScalable database already connected\nScalable hosting when you publish" }, { "title": "Path B: Integrate into Codebase (Design-Aware Code Generation)", "body": "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.\n\nFlows: Figma URL to Code (codegen), Anima Playground to Code\n\nWhat you get:\n\nGenerated code from Anima playgrounds designs adapted to your stack\nPrecise design tokens, assets, and implementation guidelines" }, { "title": "Prerequisites", "body": "Anima MCP server must be connected and accessible\nUser must have an Anima account (free tier available)\nFor Figma flows: Figma account must be connected during Anima authentication\nFor headless environments: an Anima API token" }, { "title": "Important: Timeouts", "body": "Anima's playground-create tool generates full applications from scratch. This takes time:\n\np2c (prompt to code): Typically 3-7 minutes\nl2c (link to code): Typically 3-7 minutes\nf2c (Figma to code): Typically 2-5 minutes\nplayground-publish: Typically 1-3 minutes\n\nAlways use a 10-minute timeout (600000ms) for playground-create and playground-publish calls. Default timeouts will fail." }, { "title": "Setup", "body": "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." }, { "title": "Choosing the Right Path", "body": "Before diving into tools and parameters, decide which path fits the user's goal." }, { "title": "When to use Path A (Create & Publish)", "body": "User wants to build something new from a description, reference site, or Figma design\nUser wants a live URL they can share immediately\nNo existing codebase to integrate into\nGoal is prototyping, exploring visual directions, or shipping a standalone app" }, { "title": "When to use Path B (Integrate into Codebase)", "body": "User has an existing project and wants to add a component or page from Figma\nUser wants generated code files to drop into their repo, not a hosted app\nUser already built something in an Anima Playground and wants to pull the code locally" }, { "title": "Ambiguous cases", "body": "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\n\nWhen still unclear, ask: \"Do you want a live hosted app, or code files to add to your project?\"" }, { "title": "From Request to Prompt", "body": "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?" }, { "title": "When to ask vs when to build", "body": "Threshold rule: Can you write a prompt that includes purpose, audience, and 3-5 key features? Yes = build. No = ask.\n\nSignals to just build:\n\n\"Build a recipe sharing app where users can upload photos and rate each other's dishes\" (clear purpose, audience implied, features named)\n\"Clone stripe.com\" (unambiguous)\n\"Turn this Figma into a live site\" + Figma URL (clear intent and input)\n\nSignals to ask:\n\n\"Build me a website\" (what kind? for whom?)\n\"Make something for my business\" (what does the business do?)\n\"Create an app\" (what should it do?)\n\nWhen 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." }, { "title": "Crafting the prompt", "body": "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.\n\nInclude in prompts: purpose, audience, mood/style, 3-5 key features, content tone.\n\nLeave 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.\n\nBad (over-specified):\n\nCreate a dashboard. Use #1a1a2e background, #16213e sidebar at 280px width,\n#0f3460 cards with 16px padding, border-radius 12px. Header height 64px with\na flex row, justify-between. Font: Inter 14px for body, 24px bold for headings.\n\nGood (descriptive):\n\nSaaS analytics dashboard for a B2B product team. Clean, minimal feel.\nSidebar navigation, KPI cards for key metrics, a usage trend chart, and a\nrecent activity feed. Professional but approachable. Think Linear meets Stripe." }, { "title": "Step A1: Identify the Flow", "body": "Determine which flow to use based on what the user provides and what they want.\n\nUser has a text description or idea → p2c\n\nThe most flexible path. Anima designs everything from your description. Best for new apps, prototypes, and creative exploration.\n\nUser has a website URL → l2c\n\nUse l2c to clone the site. Anima recreates the full site into an editable playground.\n\nUser has a Figma URL → f2c (Path A) or codegen (Path B)\n\nTwo sub-cases:\n\n\"Turn this into a live app\" or \"Make this a working site\" → f2c (Path A). Creates a full playground from the Figma design\n\"Implement this in my project\" or \"Add this component to my codebase\" → codegen (Path B). Generates code files for integration\n\nQuick reference:\n\nUser providesIntentFlowToolText descriptionBuild something newp2cplayground-create type=\"p2c\"Website URLClone itl2cplayground-create type=\"l2c\"Figma URLMake it a live appf2cplayground-create type=\"f2c\"Figma URLImplement in my projectcodegencodegen-figma_to_code (Path B)" }, { "title": "Step A2: Create", "body": "Prompt to Code (p2c)\n\nDescribe what you want in plain language. Anima designs and generates a complete playground with brand-aware visuals.\n\nplayground-create(\n type: \"p2c\",\n 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.\",\n framework: \"react\",\n styling: \"tailwind\",\n guidelines: \"Dark mode, accessible contrast ratios\"\n)\n\nParameters specific to p2c:\n\nParameterRequiredDescriptionpromptYesText description of what to buildguidelinesNoAdditional coding guidelines or constraints\n\nStyling options: tailwind, css, inline_styles\n\nLink to Code (l2c)\n\nProvide a website URL. Anima recreates it as an editable playground with production-ready code.\n\nplayground-create(\n type: \"l2c\",\n url: \"https://stripe.com/payments\",\n framework: \"react\",\n styling: \"tailwind\",\n language: \"typescript\",\n uiLibrary: \"shadcn\"\n)\n\nParameters specific to l2c:\n\nParameterRequiredDescriptionurlYesWebsite URL to clone\n\nStyling options: tailwind, inline_styles\n\nUI Library options: shadcn only\n\nLanguage: Always typescript for l2c\n\nFigma to Playground (f2c)\n\nProvide a Figma URL. Anima implements the design into a full playground you can preview and iterate on.\n\nURL format: https://figma.com/design/:fileKey/:fileName?node-id=1-2\n\nExtract:\n\nFile key: The segment after /design/ (e.g., kL9xQn2VwM8pYrTb4ZcHjF)\nNode ID: The node-id query parameter value, replacing - with : (e.g., 42-15 becomes 42:15)\n\nplayground-create(\n type: \"f2c\",\n fileKey: \"kL9xQn2VwM8pYrTb4ZcHjF\",\n nodesId: [\"42:15\"],\n framework: \"react\",\n styling: \"tailwind\",\n language: \"typescript\",\n uiLibrary: \"shadcn\"\n)\n\nParameters specific to f2c:\n\nParameterRequiredDescriptionfileKeyYesFigma file key from URLnodesIdYesArray of Figma node IDs (use : not -)\n\nStyling options: tailwind, plain_css, css_modules, inline_styles\n\nUI Library options: mui, antd, shadcn, clean_react" }, { "title": "Step A3: Publish", "body": "After creating a playground, deploy it to a live URL or publish as an npm package.\n\nPublish as Web App\n\nplayground-publish(\n sessionId: \"abc123xyz\",\n mode: \"webapp\"\n)\n\nThe response includes the live URL for the published app.\n\nPublish as Design System (npm package)\n\nplayground-publish(\n sessionId: \"abc123xyz\",\n mode: \"designSystem\",\n packageName: \"@myorg/design-system\",\n packageVersion: \"1.0.0\"\n)" }, { "title": "Explore Mode: Parallel Variants", "body": "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.\n\nWorkflow:\n\nGenerate 3 prompt variants from the user's idea. Each takes a different creative angle:\n\nVariant 1: Faithful, straightforward interpretation\nVariant 2: A more creative or opinionated take\nVariant 3: A different visual style or layout approach\n\n\n\nLaunch all 3 playground-create calls in parallel (one per variant, type p2c)\n\n\nAs each one completes, immediately call playground-publish (mode webapp)\n\n\nReturn 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.\n\nTiming: 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.\n\nTips for good variant prompts:\n\nKeep the core idea identical across all three\nVary the visual approach: e.g., \"minimal and clean\", \"bold and colorful\", \"enterprise and professional\"\nAdd specific guidelines to each variant to differentiate them\nIf the user mentioned a reference site or style, incorporate it into one variant\nFollow the prompt crafting principles above: describe mood and purpose, not implementation details" }, { "title": "Step B1: Identify the Flow", "body": "User providesFlowToolFigma URL + wants code in their projectFigma to Codecodegen-figma_to_codeAnima Playground URL + wants code locallyDownloadproject-download_from_playground" }, { "title": "Step B2: Match Project Stack to Tool Parameters", "body": "Project stackParameterValueReactframework\"react\"No Reactframework\"html\"Tailwindstyling\"tailwind\"CSS Modulesstyling\"css_modules\"Plain CSSstyling\"plain_css\"TypeScriptlanguage\"typescript\"MUIuiLibrary\"mui\"Ant DesignuiLibrary\"antd\"shadcnuiLibrary\"shadcn\"" }, { "title": "Step B3: Generate Code", "body": "Figma to Code (direct implementation)\n\ncodegen-figma_to_code(\n fileKey: \"kL9xQn2VwM8pYrTb4ZcHjF\",\n nodesId: [\"42:15\"],\n framework: \"react\",\n styling: \"tailwind\",\n language: \"typescript\",\n uiLibrary: \"shadcn\",\n assetsBaseUrl: \"./assets\"\n)\n\nUse the response fields (snapshots, assets, guidelines) as design reference when implementing.\n\nYou can also use project-download_from_playground to pull code from an existing Anima Playground into your project." }, { "title": "Additional References", "body": "Setup guide\nMCP Tools Reference\nExamples\nTroubleshooting\nAnima MCP Documentation" } ], "body": "Design and Build with Anima\nOverview\n\nAnima 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.\n\nThere are two distinct paths depending on what you're trying to do:\n\nPath A: Create & Publish (Full App Creation)\n\nBuild 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.\n\nThis 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.\n\nCreate Anima Playgrounds by: Prompt, Clone URL, Figma URL\n\nWhat you get:\n\nA fully working application in an Anima Playground\nThe ability to generate multiple variants in parallel and compare them\nNo tokens wasted on file scanning, dependency resolution, or build tooling\nScalable database already connected\nScalable hosting when you publish\nPath B: Integrate into Codebase (Design-Aware Code Generation)\n\nPull 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.\n\nFlows: Figma URL to Code (codegen), Anima Playground to Code\n\nWhat you get:\n\nGenerated code from Anima playgrounds designs adapted to your stack\nPrecise design tokens, assets, and implementation guidelines\nPrerequisites\nAnima MCP server must be connected and accessible\nUser must have an Anima account (free tier available)\nFor Figma flows: Figma account must be connected during Anima authentication\nFor headless environments: an Anima API token\nImportant: Timeouts\n\nAnima's playground-create tool generates full applications from scratch. This takes time:\n\np2c (prompt to code): Typically 3-7 minutes\nl2c (link to code): Typically 3-7 minutes\nf2c (Figma to code): Typically 2-5 minutes\nplayground-publish: Typically 1-3 minutes\n\nAlways use a 10-minute timeout (600000ms) for playground-create and playground-publish calls. Default timeouts will fail.\n\nSetup\n\nBefore 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.\n\nChoosing the Right Path\n\nBefore diving into tools and parameters, decide which path fits the user's goal.\n\nWhen to use Path A (Create & Publish)\nUser wants to build something new from a description, reference site, or Figma design\nUser wants a live URL they can share immediately\nNo existing codebase to integrate into\nGoal is prototyping, exploring visual directions, or shipping a standalone app\nWhen to use Path B (Integrate into Codebase)\nUser has an existing project and wants to add a component or page from Figma\nUser wants generated code files to drop into their repo, not a hosted app\nUser already built something in an Anima Playground and wants to pull the code locally\nAmbiguous cases\nUser says\tLikely path\tWhy\n\"Implement this Figma design\"\tPath B\t\"Implement\" implies code in their project\n\"Turn this Figma into a live site\"\tPath A (f2c)\t\"Live site\" means they want hosting\n\"Build me an app like this\" + URL\tPath A (l2c)\tClone and rebuild from scratch\n\"Add this Figma component to my project\"\tPath B\t\"Add to my project\" = codebase integration\n\"Clone this website\"\tPath A (l2c)\tClone = capture and rebuild from scratch\n\"Download the playground code\"\tPath B\tWants files locally\n\nWhen still unclear, ask: \"Do you want a live hosted app, or code files to add to your project?\"\n\nFrom Request to Prompt\n\nBefore 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?\n\nWhen to ask vs when to build\n\nThreshold rule: Can you write a prompt that includes purpose, audience, and 3-5 key features? Yes = build. No = ask.\n\nSignals to just build:\n\n\"Build a recipe sharing app where users can upload photos and rate each other's dishes\" (clear purpose, audience implied, features named)\n\"Clone stripe.com\" (unambiguous)\n\"Turn this Figma into a live site\" + Figma URL (clear intent and input)\n\nSignals to ask:\n\n\"Build me a website\" (what kind? for whom?)\n\"Make something for my business\" (what does the business do?)\n\"Create an app\" (what should it do?)\n\nWhen 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.\n\nCrafting the prompt\n\nAnima 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.\n\nInclude in prompts: purpose, audience, mood/style, 3-5 key features, content tone.\n\nLeave 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.\n\nBad (over-specified):\n\nCreate a dashboard. Use #1a1a2e background, #16213e sidebar at 280px width,\n#0f3460 cards with 16px padding, border-radius 12px. Header height 64px with\na flex row, justify-between. Font: Inter 14px for body, 24px bold for headings.\n\n\nGood (descriptive):\n\nSaaS analytics dashboard for a B2B product team. Clean, minimal feel.\nSidebar navigation, KPI cards for key metrics, a usage trend chart, and a\nrecent activity feed. Professional but approachable. Think Linear meets Stripe.\n\nPath A: Create & Publish\nStep A1: Identify the Flow\n\nDetermine which flow to use based on what the user provides and what they want.\n\nUser has a text description or idea → p2c\n\nThe most flexible path. Anima designs everything from your description. Best for new apps, prototypes, and creative exploration.\n\nUser has a website URL → l2c\n\nUse l2c to clone the site. Anima recreates the full site into an editable playground.\n\nUser has a Figma URL → f2c (Path A) or codegen (Path B)\n\nTwo sub-cases:\n\n\"Turn this into a live app\" or \"Make this a working site\" → f2c (Path A). Creates a full playground from the Figma design\n\"Implement this in my project\" or \"Add this component to my codebase\" → codegen (Path B). Generates code files for integration\n\nQuick reference:\n\nUser provides\tIntent\tFlow\tTool\nText description\tBuild something new\tp2c\tplayground-create type=\"p2c\"\nWebsite URL\tClone it\tl2c\tplayground-create type=\"l2c\"\nFigma URL\tMake it a live app\tf2c\tplayground-create type=\"f2c\"\nFigma URL\tImplement in my project\tcodegen\tcodegen-figma_to_code (Path B)\nStep A2: Create\nPrompt to Code (p2c)\n\nDescribe what you want in plain language. Anima designs and generates a complete playground with brand-aware visuals.\n\nplayground-create(\n type: \"p2c\",\n 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.\",\n framework: \"react\",\n styling: \"tailwind\",\n guidelines: \"Dark mode, accessible contrast ratios\"\n)\n\n\nParameters specific to p2c:\n\nParameter\tRequired\tDescription\nprompt\tYes\tText description of what to build\nguidelines\tNo\tAdditional coding guidelines or constraints\n\nStyling options: tailwind, css, inline_styles\n\nLink to Code (l2c)\n\nProvide a website URL. Anima recreates it as an editable playground with production-ready code.\n\nplayground-create(\n type: \"l2c\",\n url: \"https://stripe.com/payments\",\n framework: \"react\",\n styling: \"tailwind\",\n language: \"typescript\",\n uiLibrary: \"shadcn\"\n)\n\n\nParameters specific to l2c:\n\nParameter\tRequired\tDescription\nurl\tYes\tWebsite URL to clone\n\nStyling options: tailwind, inline_styles\n\nUI Library options: shadcn only\n\nLanguage: Always typescript for l2c\n\nFigma to Playground (f2c)\n\nProvide a Figma URL. Anima implements the design into a full playground you can preview and iterate on.\n\nURL format: https://figma.com/design/:fileKey/:fileName?node-id=1-2\n\nExtract:\n\nFile key: The segment after /design/ (e.g., kL9xQn2VwM8pYrTb4ZcHjF)\nNode ID: The node-id query parameter value, replacing - with : (e.g., 42-15 becomes 42:15)\nplayground-create(\n type: \"f2c\",\n fileKey: \"kL9xQn2VwM8pYrTb4ZcHjF\",\n nodesId: [\"42:15\"],\n framework: \"react\",\n styling: \"tailwind\",\n language: \"typescript\",\n uiLibrary: \"shadcn\"\n)\n\n\nParameters specific to f2c:\n\nParameter\tRequired\tDescription\nfileKey\tYes\tFigma file key from URL\nnodesId\tYes\tArray of Figma node IDs (use : not -)\n\nStyling options: tailwind, plain_css, css_modules, inline_styles\n\nUI Library options: mui, antd, shadcn, clean_react\n\nStep A3: Publish\n\nAfter creating a playground, deploy it to a live URL or publish as an npm package.\n\nPublish as Web App\nplayground-publish(\n sessionId: \"abc123xyz\",\n mode: \"webapp\"\n)\n\n\nThe response includes the live URL for the published app.\n\nPublish as Design System (npm package)\nplayground-publish(\n sessionId: \"abc123xyz\",\n mode: \"designSystem\",\n packageName: \"@myorg/design-system\",\n packageVersion: \"1.0.0\"\n)\n\nExplore Mode: Parallel Variants\n\nThis 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.\n\nWorkflow:\n\nGenerate 3 prompt variants from the user's idea. Each takes a different creative angle:\n\nVariant 1: Faithful, straightforward interpretation\nVariant 2: A more creative or opinionated take\nVariant 3: A different visual style or layout approach\n\nLaunch all 3 playground-create calls in parallel (one per variant, type p2c)\n\nAs each one completes, immediately call playground-publish (mode webapp)\n\nReturn 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.\n\nTiming: 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.\n\nTips for good variant prompts:\n\nKeep the core idea identical across all three\nVary the visual approach: e.g., \"minimal and clean\", \"bold and colorful\", \"enterprise and professional\"\nAdd specific guidelines to each variant to differentiate them\nIf the user mentioned a reference site or style, incorporate it into one variant\nFollow the prompt crafting principles above: describe mood and purpose, not implementation details\nPath B: Integrate into Codebase\nStep B1: Identify the Flow\nUser provides\tFlow\tTool\nFigma URL + wants code in their project\tFigma to Code\tcodegen-figma_to_code\nAnima Playground URL + wants code locally\tDownload\tproject-download_from_playground\nStep B2: Match Project Stack to Tool Parameters\nProject stack\tParameter\tValue\nReact\tframework\t\"react\"\nNo React\tframework\t\"html\"\nTailwind\tstyling\t\"tailwind\"\nCSS Modules\tstyling\t\"css_modules\"\nPlain CSS\tstyling\t\"plain_css\"\nTypeScript\tlanguage\t\"typescript\"\nMUI\tuiLibrary\t\"mui\"\nAnt Design\tuiLibrary\t\"antd\"\nshadcn\tuiLibrary\t\"shadcn\"\nStep B3: Generate Code\nFigma to Code (direct implementation)\ncodegen-figma_to_code(\n fileKey: \"kL9xQn2VwM8pYrTb4ZcHjF\",\n nodesId: [\"42:15\"],\n framework: \"react\",\n styling: \"tailwind\",\n language: \"typescript\",\n uiLibrary: \"shadcn\",\n assetsBaseUrl: \"./assets\"\n)\n\n\nUse the response fields (snapshots, assets, guidelines) as design reference when implementing.\n\nYou can also use project-download_from_playground to pull code from an existing Anima Playground into your project.\n\nAdditional References\nSetup guide\nMCP Tools Reference\nExamples\nTroubleshooting\nAnima MCP Documentation" }, "trust": { "sourceLabel": "tencent", "provenanceUrl": "https://clawhub.ai/dannyshmueli/anima-design-agent", "publisherUrl": "https://clawhub.ai/dannyshmueli/anima-design-agent", "owner": "dannyshmueli", "version": "1.0.9", "license": null, "verificationStatus": "Indexed source record" }, "links": { "detailUrl": "https://openagent3.xyz/skills/anima-design-agent", "downloadUrl": "https://openagent3.xyz/downloads/anima-design-agent", "agentUrl": "https://openagent3.xyz/skills/anima-design-agent/agent", "manifestUrl": "https://openagent3.xyz/skills/anima-design-agent/agent.json", "briefUrl": "https://openagent3.xyz/skills/anima-design-agent/agent.md" } }