57 skills · sorted by relevance
Guide an iterative review of a built interface against its design brief, using critique and adjustment to improve visual alignment. This catalogue entry points agents to the upstream workflow, which requires a separate installation.
Implement reference architecture for Anima design-to-code automation. Use when designing a design system automation pipeline, structuring a Figma-to-React project, or planning team-scale design handoff. Trigger with: "anima architecture", "design-to-code architecture", "anima project structure", "figma automation architecture".
The English summary is being prepared. Showing the original description.
Production readiness checklist for Anima design-to-code pipelines. Use when deploying automated design-to-code services, preparing CI/CD Figma-to-code automation, or validating output quality before production. Trigger with: "anima production", "anima go-live", "anima prod checklist".
The English summary is being prepared. Showing the original description.
Apply production-ready patterns for the Anima SDK design-to-code pipeline. Use when building reusable Anima client wrappers, implementing output caching, or establishing team standards for design-to-code automation. Trigger with: "anima SDK patterns", "anima best practices", "anima code patterns".
The English summary is being prepared. Showing the original description.
Generate reviewable React or HTML code from a Figma design using the Anima SDK. Use when testing design-to-code conversion, learning Anima's code output format, or building your first automated design-to-code pipeline. Trigger with: "anima hello world", "anima example", "figma to react", "figma to code", "anima generate code".
The English summary is being prepared. Showing the original description.
Deploy Anima design-to-code service as a backend API endpoint. Use when building a design-to-code microservice, deploying Anima SDK as a serverless function, or creating an internal design tool API. Trigger with: "deploy anima", "anima service deploy", "anima serverless".
The English summary is being prepared. Showing the original description.
Use this skill whenever the user wants to use AI agents to work with Penpot design files via the Penpot MCP Server. Triggers include: using Penpot through an AI agent, design files, design systems, design tokens, Penpot MCP, design-to-code, generating UI from design, auditing a design system, creating components/variants, renaming layers, exporting assets from Penpot, adding flows, interactions, animations, overlays, or prototyping in Penpot, or prompting an AI agent to read/modify a Penpot file. Also triggers when the user wants to set up Penpot MCP, connect any MCP-compatible AI agent or IDE to Penpot, or produce production-ready HTML/CSS/React from a Penpot design. Use this skill for Penpot-agent workflows — design, code, audit, prototyping, or setup.
The English summary is being prepared. Showing the original description.
Extract Lanhu design HTML, CSS, and assets through Lanhu MCP for Claude Code design-to-code workflows. Called by design-to-code.
The English summary is being prepared. Showing the original description.
Clarify requests for visual output by adding design specifications and UI/UX vocabulary, the language of interfaces and user experience. Use it to refine prompts for screen design or workflows that turn designs into code.
Design, implement, or review native Mac interfaces using SwiftUI or AppKit. Organize panes, remove unnecessary containers, and apply restrained Liquid Glass effects while checking resizing, interaction states, and accessibility, including designs supplied through Figma.
Implement interfaces from Figma designs using the Figma MCP server. Retrieve design structure, screenshots, variables, and assets, then adapt the generated code to existing project components and styles and check it against the design.
Turn Figma designs into React and TypeScript components using coderio. The workflow uses design thumbnails to guide layout, extracts component structure and data, and generates code and assets for integration into an application.
Turn a linked Figma frame or layer into application code using the Figma MCP server, a connection for accessing design data. Retrieve design details, screenshots, and assets, reuse existing project components, and compare the implementation with the design.
Design web interfaces, build prototypes, and integrate changes into existing apps while respecting their visual rules and components. Choose direct code generation or Claude Code design commands, with an experimental browser canvas option for visual review.
Turn Figma designs into screen code that fits an existing project. The workflow reuses existing components and shared style values, follows design notes, and uses exported images and icons to preserve the design’s appearance.
Create and maintain Code Connect templates that link published Figma components to existing code components. Map text, variants, visibility settings, and nested components so the displayed code snippets reflect the selected design properties.
Turn a Figma design into code that fits an existing project. Reuse its components and shared style values, follow designer notes and component mappings, and adapt Figma's reference output to the project's framework and conventions.
Create and maintain Code Connect templates that link published Figma components to existing code components. Map text, variants, toggles, and nested components so code examples reflect the selected component's design settings.
Fetch design structure, screenshots, variables, and assets from Figma through MCP, a connection between the agent and Figma. Use these references to guide code implementation within an existing project and troubleshoot connection setup.
Set up iterative design-to-code development loop with Anima SDK. Use when rapidly iterating on Figma-to-code output, comparing framework outputs, or building a local preview server for generated components. Trigger with: "anima local dev", "anima dev loop", "anima preview", "anima iteration".
The English summary is being prepared. Showing the original description.
Configure CI/CD pipeline for automated Figma-to-code generation with Anima. Use when automating design-to-code in GitHub Actions, setting up PR-based component generation, or integrating Anima into design handoff workflows. Trigger with: "anima CI", "anima GitHub Actions", "anima automated generation".
The English summary is being prepared. Showing the original description.
Build automated Figma-to-React pipeline with the Anima SDK. Use when automating design handoff, building CI/CD design-to-code workflows, or creating a design system code generator from Figma components. Trigger with: "anima design pipeline", "figma to react pipeline", "automated design handoff", "anima component generator".
The English summary is being prepared. Showing the original description.
Audit and harden Anima and Figma tokens for design-to-code pipelines. Use when protecting API credentials, restricting Figma access scope, or hardening CI/CD design automation pipelines. Trigger with: "anima security", "anima token safety", "figma token security".
The English summary is being prepared. Showing the original description.
Use Figma webhooks to trigger automatic Anima code generation on design changes. Use when building event-driven design-to-code pipelines, auto-generating components when Figma files change, or integrating design updates into CI. Trigger with: "anima webhook", "figma webhook", "anima auto-generate on change".
The English summary is being prepared. Showing the original description.