anima

What This Skill Does

Anima is the design-centric agent within the OpenClaw AI swarm, serving as the bridge between creative vision and production-ready code. It specializes in 'Design-Aware' development, ensuring that user interfaces maintain strict brand consistency while being fully functional. Whether you are starting from a blank slate or iterating on an existing codebase, Anima handles the heavy lifting of layout, styling, and structural logic. The skill operates through two distinct paths: Path A (Create & Publish), which generates full-stack applications with integrated databases and hosting from prompts, website URLs, or Figma links; and Path B (Integrate), which translates Figma designs or Anima Playground elements into clean, stack-adapted code for your active development projects. By offloading design and UI boilerplate to Anima, developers can focus on core logic while maintaining pixel-perfect fidelity to their design specifications.

Installation

To integrate the Anima agent into your OpenClaw environment, execute the following command in your terminal: clawhub install openclaw/skills/skills/dannyshmueli/anima-design-agent Ensure your OpenClaw environment is configured to access the source repository openclaw/skills. Once installed, verify the connection by triggering a simple diagnostic check. Note that you must have an Anima account connected to your instance, and for Figma-based workflows, ensure your Figma account permissions are correctly mapped within the Anima MCP settings.

Use Cases

• Rapid Prototyping: Build a full-stack, live application from a text prompt to validate an idea in under 10 minutes.
• Design-to-Code Migration: Convert Figma prototypes directly into functional React or HTML/CSS code components for your existing codebase.
• Website Cloning: Reference an existing website URL to recreate its structure and design as a base for your own application.
• Brand Consistency: Utilize Anima to maintain style guides and design tokens across multiple sub-projects within a larger development team.

Example Prompts

1. "Anima, build a responsive task management dashboard with authentication and a database based on this Figma link: [Figma URL]"
2. "I need to clone the design of this landing page [Website URL] and convert it into a clean, modern React component for my project."
3. "Create a prototype for a new e-commerce storefront that has a product list, cart functionality, and a checkout page using the Anima playground."

Tips & Limitations

• Timeout Management: Anima tools require heavy processing. Always set a 10-minute timeout (600000ms) for playground creation and publishing tasks to prevent premature failures.
• Authentication First: Always verify your Anima and Figma authentication state before running large projects to avoid mid-process interruptions.
• Parallelism: When using Path A, generate multiple variants of the same prompt to compare UI/UX approaches, then select the best one to iterate on in the Anima Playground.
• Infrastructure: Remember that Anima manages hosting and database deployment; while this speeds up development, be mindful of resource usage during large-scale experimentation.