查找技能

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.

中文简介正在准备中。当前显示英语简介。

• Implementing a screen from a Figma design
• Reusing existing project components in a design implementation
• Applying designer notes and shared style values

Build or update a Figma design system to match a codebase. Organize reusable design values, light and dark themes, component variants, and documentation, then check component structure, appearance, and bindings to those values.

中文简介正在准备中。当前显示英语简介。

• Build a Figma component library from existing code
• Set up shared design values and light and dark themes
• Create components with variants and variable bindings

Turn Figma animations into runnable application code by combining design structure with motion data. Preserve timing, easing—the way movement accelerates—and coordinated animations while adapting to the project's existing libraries and reduced-motion accessibility preferences.

中文简介正在准备中。当前显示英语简介。

• Implement an animated component from a Figma URL
• Coordinate several elements on a shared animation timeline
• Reproduce animation along an SVG path

Choose a sales approach based on product price, complexity, and buyer needs. This skill helps plan self-service trials, human sales involvement, and experiences that let prospects recognize value before purchasing.

中文简介正在准备中。当前显示英语简介。

• Choosing between product-led and sales-led growth
• Improving conversion from free users to paying customers
• Reducing the time until users first experience value

Plan and build frontend interfaces through guided questions, visual references, and agreed design choices. Define colors, typography, and layout before coding, then implement small sections for review, with optional Google Stitch prototyping.

中文简介正在准备中。当前显示英语简介。

• Clarifying a visual direction before building a page
• Designing dashboards from references and brand guidelines
• Reviewing improvements to an existing interface

Turn Figma screens and components into code that follows an existing project's conventions. Retrieve design details, screenshots, and assets through Figma MCP, an agent connection, then reuse existing components and check the implementation against the design.

中文简介正在准备中。当前显示英语简介。

• Implement a button from a Figma design
• Build a dashboard layout from Figma
• Extend existing components to match a design

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.

中文简介正在准备中。当前显示英语简介。

• Inspecting a specific Figma frame or layer
• Fetching images and SVG assets for implementation
• Adapting a design to existing project components

Turn research results into figures and tables for papers using pubfig and pubtab. Choose an appropriate presentation, convert Excel tables to LaTeX, export assets, and check readability, labels, and consistency before submission.

中文简介正在准备中。当前显示英语简介。

• Choosing a chart that communicates research findings
• Converting an Excel table to LaTeX for a paper
• Preparing a summary figure with a companion table

Create HTML design artifacts, including interface mockups, interactive prototypes, and slide decks, then preview and verify them. The skill also guides importing design references and building reusable design systems with shared styles and components.

中文简介正在准备中。当前显示英语简介。

• Creating interface mockups
• Exploring user flows with interactive prototypes
• Creating slides and exporting them to PowerPoint

Extract colors, fonts, spacing, and other design choices from a website URL. Generate eight files for review and reuse, including framework themes, CSS variables, Figma variables, and an accessibility score against WCAG guidelines.

中文简介正在准备中。当前显示英语简介。

• Inspect a website's colors, fonts, and spacing
• Create themes for Tailwind CSS, React, or shadcn/ui
• Prepare Figma variables for design handoff

Plan a new interface using design reference searches, critique, and contrast checks. Produce colors, typography, reusable styling values, component specifications, layouts, and a style guide tailored to the product, audience, and selected technology.

中文简介正在准备中。当前显示英语简介。

• Planning a dashboard’s colors, typography, and spacing
• Preparing component states and keyboard interaction specs
• Defining responsive layouts and a style guide

Checks the visual quality of web pages, terminal interfaces, and paginated documents. Uses phone and desktop captures, light and dark themes, and an Apple design checklist to produce screenshot evidence and item-by-item verdicts.

中文简介正在准备中。当前显示英语简介。

• Checking a UI after implementation or changes
• Comparing a rendered page with its design reference
• Finding clipped Japanese text and broken wrapping

Builds and refines web pages and components using documented design rules. Covers layout, styling, animation, and reusable components, with browser-based checks for visual quality, performance, accessibility, and SEO.

中文简介正在准备中。当前显示英语简介。

• Building a landing page from a brief
• Redesigning an existing dashboard
• Implementing a supplied screenshot or mockup

Use when the user explicitly asks for a desktop or system screenshot (full screen, specific app or window, or a pixel region), or when tool-specific capture capabilities are unavailable and an OS-level capture is needed.

中文简介正在准备中。当前显示原文说明。

Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection.

中文简介正在准备中。当前显示原文说明。

Data-backed email marketing skill for AI agents. Use when building or running email automation, driving an ESP from an agent (MCP/connectors), diagnosing deliverability, writing or de-slopping email copy, directing AI email design, choosing a platform, or pulling benchmarks. Covers flows, segmentation, compliance, cold email, WhatsApp, SMS and RCS, and 19 industry playbooks.

中文简介正在准备中。当前显示原文说明。

Automate Figma tasks via Rube MCP (Composio): files, components, design tokens, comments, exports. Always search tools first for current schemas.

中文简介正在准备中。当前显示原文说明。

Review and create distinctive, production-grade frontend interfaces with high design quality and design system compliance. Evaluates using three pillars: frictionless insight-to-action, quality craft, and trustworthy building. USE FOR: PR reviews, design reviews, accessibility audits, design system compliance checks, creative frontend design, UI code review, component reviews, responsive design checks, theme testing, and creating memorable UI. DO NOT USE FOR: Backend API reviews, database schema reviews, infrastructure or DevOps work, pure business logic without UI, or non-frontend code.

中文简介正在准备中。当前显示原文说明。

Define how the system evolves — contribution model, versioning, deprecation, and change management. Use when multiple teams contribute. For driving uptake use `design-system-adoption` (designer-toolkit); for design file history use `version-control-strategy` (design-ops).

中文简介正在准备中。当前显示原文说明。

Fetch brand SVG logos and cloud architecture icons (AWS, Azure, GCP) from theSVG. Use when the user asks for a brand logo, company icon, framework mark, service icon, or any "icon/logo for X" where X is a real brand or cloud service. Returns ready-to-use CDN URLs or raw SVG markup.

中文简介正在准备中。当前显示原文说明。

Optimize Anima code generation performance with caching, parallelism, and output tuning. Use when reducing generation latency, optimizing batch component generation, or improving generated code quality for production use. Trigger with: "anima performance", "anima slow", "anima optimization", "anima caching".

中文简介正在准备中。当前显示原文说明。

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".

中文简介正在准备中。当前显示原文说明。

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".

中文简介正在准备中。当前显示原文说明。

Collect Anima SDK debug evidence for support tickets and troubleshooting. Use when filing Anima support requests, debugging code generation issues, or collecting diagnostic data for the Anima team. Trigger with: "anima debug bundle", "anima support ticket", "anima diagnostics".

中文简介正在准备中。当前显示原文说明。