anima-design-agent_skill

Overview

This skill turns ideas, Figma designs, or live websites into full-stack, production-ready applications or code you can drop into an existing project. It provides design-aware code generation, an editable hosted playground, built-in database and authentication, and one-click publishing. Use three input paths—prompt-to-code, link-to-code, or Figma-to-code—to create live apps or generate files for integration. The skill acts as the design agent in an AI swarm, preserving brand consistency and pixel-aware implementation.

How this skill works

When given a description, website URL, or Figma URL the skill chooses one of two paths: Create & Publish (builds a full playground and hosted app) or Integrate into Codebase (exports code and assets for an existing repo). It generates design-aware code, design tokens, assets, and implementation guidance, then optionally publishes the playground to a live URL. For ambiguous requests the skill either asks clarifying questions or produces multiple parallel variants so you can pick the best direction. Timeouts and environment checks are required for long-running operations like full-app generation and publishing.

When to use it

• You want a live, shareable URL from a sketch, prompt, or Figma design.
• You need production-ready playgrounds quickly for prototyping or A/Bing visual directions.
• You have a Figma design and want code files to integrate into an existing project.
• You want to clone an existing website into an editable, deployable playground.
• You need parallel creative variants to compare different visual directions.

Best practices

• Decide first: do you want a hosted app (publish) or files for your repo (codegen)?
• Provide purpose, audience, and 3–5 key features in your prompt—avoid pixel-level CSS rules.
• Use a 10-minute timeout for playground-create and playground-publish calls to avoid failures.
• If unsure, request 3 parallel variants instead of many incremental clarifying questions.
• For Figma flows, supply the exact file key and node IDs (use ':' not '-') and ensure Figma auth is connected.

Example use cases

• Prototype a SaaS analytics dashboard from a brief prompt and get a live URL to share with stakeholders.
• Clone a competitor site URL into an editable playground to iterate on layout and copy.
• Turn a Figma landing page into a hosted site (f2c) or export components for your React repo (codegen).
• Generate three visually distinct playgrounds in parallel to evaluate different brand directions.
• Publish a generated design system as an npm package from a completed playground.