57 个 · 按相关度排序
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.
中文简介正在准备中。当前显示英语简介。
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".
中文简介正在准备中。当前显示原文说明。
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".
中文简介正在准备中。当前显示原文说明。
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".
中文简介正在准备中。当前显示原文说明。
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".
中文简介正在准备中。当前显示原文说明。
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".
中文简介正在准备中。当前显示原文说明。
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.
中文简介正在准备中。当前显示原文说明。
Extract Lanhu design HTML, CSS, and assets through Lanhu MCP for Claude Code design-to-code workflows. Called by design-to-code.
中文简介正在准备中。当前显示原文说明。
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.
中文简介正在准备中。当前显示英语简介。
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 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, toggles, and nested components so code examples reflect the selected component's design settings.
中文简介正在准备中。当前显示英语简介。
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.
中文简介正在准备中。当前显示英语简介。
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.
中文简介正在准备中。当前显示英语简介。
Diagnose and fix common Anima SDK design-to-code errors. Use when encountering Figma token errors, code generation failures, node not found issues, or output quality problems. Trigger with: "anima error", "anima not working", "anima debug", "figma to code error".
中文简介正在准备中。当前显示原文说明。
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".
中文简介正在准备中。当前显示原文说明。
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".
中文简介正在准备中。当前显示原文说明。
Install the Anima SDK and configure authentication for Figma-to-code generation. Use when setting up design-to-code automation, configuring Figma token access, or initializing the @animaapp/anima-sdk for server-side code generation. Trigger with: "install anima", "setup anima", "anima auth", "anima figma token".
中文简介正在准备中。当前显示原文说明。
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".
中文简介正在准备中。当前显示原文说明。