查找技能

Create navigable HyperFrames presentations with step-by-step reveals, clickable branches, and speaker notes. You can also turn an existing page into a deck while preserving its visual design, motion, and interactive behavior.

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

• Build a pitch deck with speaker notes
• Reveal key points one step at a time
• Open supporting slides through clickable areas

Create or edit custom HyperFrames videos, including multi-scene brand films, montages, title cards, and footage remixes. The workflow covers planning, design, media assembly, animation, checks, and a final preview for approval before rendering.

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

• Create a multi-scene brand video
• Reorder and trim existing footage
• Build a static title card or loop

Create and prepare marketing images for blogs, social posts, product showcases, and banners. Choose suitable generation or design tools, plan prompts and layouts, and optimize image dimensions, formats, and file sizes for web use.

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

• Creating blog headers and social sharing previews
• Preparing social graphics and profile banners
• Building product mockups from real screenshots

Plan image and graphic design workflows by matching tasks to available tools, from AI generation and photo editing to logos, interface mockups, diagrams, and publishing. Compare requirements, costs, and offline options before combining providers.

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

• Generate and compose social sharing images
• Create logos and export size variants
• Draft interface wireframes and user flows

Automate Electron desktop apps with agent-browser through CDP, a browser debugging connection. Click controls, enter text, extract content, and capture screenshots while switching between app windows or embedded pages for routine work and testing.

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

• Automating clicks and form entry in desktop apps
• Extracting text and screen information from apps
• Capturing screenshots for application testing

Set up a browser automation command-line tool for agents to navigate sites, fill forms, extract data, and capture screenshots. It also points to dedicated guides for app testing, Electron desktop apps, and cloud browsers.

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

• Automate form entry and navigation on websites
• Extract page data and capture screenshots
• Explore web apps to find bugs and quality issues

Build consistent interface foundations with design tokens, named values for colors, spacing, and typography. Covers light and dark themes, multiple brands, reusable components, and workflows that keep design definitions aligned with application code.

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

• Organizing shared colors, typography, and spacing
• Implementing light and dark theme switching
• Sharing interface components across multiple brands

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.

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

• Designing a native Mac app interface
• Reviewing screens with too many cards and borders
• Implementing a Figma design in SwiftUI

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.

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

• Implementing a screen from a Figma frame link
• Reusing existing components to match a design
• Retrieving images and SVG assets from Figma

Design visually distinctive websites, landing pages, and portfolios as React components, reusable pieces of a web page. Use industry references to guide typography, color, layout, motion, and relevant 3D visuals that fit the brand.

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

• Build a brand website with a distinctive visual identity
• Design a landing page around a product
• Create a portfolio with an original layout

Turns Figma screens and components into code that follows an existing project’s conventions. Uses design specifications, screenshots, and assets to guide implementation, reuse existing components, and check the finished interface against the design.

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

• Implement a button from a Figma design link
• Build a dashboard from Figma frames
• Adapt a design to existing project components

Turn feature requirements into test plans, step-by-step manual tests, regression suites for checking existing features, and reproducible bug reports. The skill also supports comparing implemented interfaces with Figma designs and documenting visual differences.

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

• Plan tests for a new feature
• Write manual checkout test cases
• Organize regression checks before a release

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.

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

• Build a React interface from a Figma design
• Organize component structure and input data
• Generate components while checking the design thumbnail

Uses Apollo to enrich a lead from a name, company, LinkedIn URL, or email address. Builds a contact card with available contact and company details, then offers actions such as saving the contact or finding colleagues.

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

• Look up a prospect's contact details from a name or URL
• Check a prospect's role and company information
• Save an enriched contact to Apollo

Find brand materials across connected workplace platforms, rank useful sources, and compile a structured discovery report. Surface brand elements, conflicting guidance, and unanswered questions to support a later review or brand voice guideline document.

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

• Finding scattered brand guidelines
• Taking inventory of brand materials
• Comparing conflicting style documents

Review a design or web page against WCAG 2.1 AA, an accessibility standard. Organize findings on contrast, keyboard access, forms, and screen reader behavior, with severity levels and practical recommendations for fixes.

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

• Review accessibility before design handoff
• Check text and interface color contrast
• Review keyboard navigation and focus behavior

Review a Figma design, screenshot, or written description for usability, visual hierarchy, consistency, and accessibility. Receive specific findings, explanations, and prioritized improvements, with feedback tailored to the design stage and intended users.

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

• Reviewing an early screen design
• Checking navigation and onboarding usability
• Finding inconsistent colors, spacing, and typography

Turn a design into a developer handoff document covering layout, shared design settings, component options, interactions, and screen-size behavior. Include loading and error states, animation details, and accessibility notes to clarify implementation requirements.

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

• Preparing a design for developer handoff
• Documenting layout changes across screen sizes
• Specifying loading, empty, and error states

Create shared UI design values from a brand color, including palettes, typography, and spacing. Export them as CSS, SCSS, or JSON, document component behavior, plan layouts for different screens, and prepare developer handoff materials.

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

• Generate shared design values from a brand color
• Document component variants and states
• Plan typography and spacing for different screens

Create project-specific rules for turning Figma designs into code. The skill examines existing components and styling, then saves conventions for naming, file locations, reusable design values, and implementation steps in the coding agent's rule file.

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

• Setting up Figma implementation rules for a new project
• Teaching an AI agent existing component conventions
• Standardizing Figma implementation across a team

Build or update a Figma design system from an existing codebase. Organize shared design values, light and dark themes, reusable components, and documentation through staged reviews, then check consistency, accessibility, and links between design and code.

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

• Creating shared color and spacing variables from code
• Setting up light and dark themes
• Building a reusable component library with documentation

Turn Figma screens and components into application code using design specifications, screenshots, and supplied assets. Reuse existing project components and shared style values, then check layout, typography, responsive behavior, and accessibility against the design.

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

• Implement a button from a Figma component
• Build a dashboard from a Figma frame
• Integrate designs with an existing component library

Create a blank Figma design or FigJam file in your drafts, with an optional name and a selected plan. Receive a direct link and file key to continue working with other Figma tools.

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

• Start a new Figma design file
• Create a named FigJam whiteboard
• Prepare a fresh file for use_figma

Inspect and edit Figma files through JavaScript using the Plugin API. Create shapes, text, reusable components, and design variables, then check structure and screenshots as changes are made in small steps.

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

• Inspect pages and existing components in a Figma file
• Create reusable components and variants
• Create and bind color or spacing variables