查找技能

Find code components that match Figma design components by comparing names, structure, and settings. Presents candidates for approval, then creates Code Connect mappings, explicit links between design components and their implementations.

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

• Link a Figma button to its code component
• Find unconnected components within a frame
• Compare similar implementation candidates

Build or update Figma screens from code or descriptions using an existing design system, a shared set of components and visual rules. Assemble sections with reusable components, colors, spacing, and styles, then check their appearance.

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

• Recreate an application page in Figma
• Build a landing page with shared components
• Update a Figma screen to match code

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

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

Turn a new feature into user stories: short descriptions of what people need and why. Each story includes a design reference and testable acceptance criteria, with scope intended to fit within one sprint.

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

• Breaking a new feature into backlog items
• Defining testable acceptance criteria
• Sharing user needs alongside design references

Compare five growth loops, mechanisms where user activity brings in more users, to find a suitable approach for a product. Develop an implementation roadmap, measurement plan, and growth estimates based on sharing, collaboration, content, or referrals.

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

• Designing product features that attract new users
• Planning growth with less reliance on paid acquisition
• Comparing sharing, collaboration, and referral mechanisms

Break a feature into job stories that describe the user's situation, motivation, and desired outcome. Add six to eight observable acceptance criteria per story, defining how success will be checked, and include links to designs or prototypes.

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

• Breaking a new feature into job stories
• Writing backlog items around user situations
• Defining acceptance criteria for desired outcomes

Turn feature ideas into backlog items, a team's planned units of work, using Why, What, and Acceptance Criteria. Connect each item to business goals and define observable outcomes in independent pieces sized for one sprint.

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

• Breaking a feature into independent work items
• Explaining the business purpose behind development work
• Writing observable acceptance criteria

Automate website tasks such as navigating pages, filling forms, clicking buttons, taking screenshots, and extracting data. The skill also supports web app testing, with specialized guides for Electron desktop apps, Slack, and cloud browsers.

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

• Automate form entry and page navigation
• Capture screenshots and extract page data
• Explore web apps for bugs

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.

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

• Improve a landing page within an existing app
• Design a dashboard using existing visual rules
• Sync a codebase with Claude Design

Design reusable Figma components, flexible layouts, and shared design systems. Get guidance on managing colors and spacing, supporting themes and screen sizes, and preparing clear specifications and assets for developers.

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

• Organizing reusable components and their variants
• Building layouts that adapt to different screen widths
• Managing shared colors, spacing, and light or dark themes

Create paper figures and LaTeX comparison tables from experiment data in JSON or CSV files. Save reproducible plotting scripts, use consistent styling, and check rendered figures for readability, fair comparisons, and captions supported by the data.

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

• Plotting training curves
• Comparing methods and ablation results
• Combining results across datasets into multiple panels

Create consistent paper figures and comparison tables from experiment data. The skill selects suitable chart types, saves reusable plotting scripts, prepares LaTeX insertion code, and checks rendered figures for readability and comparisons for consistency with the underlying data.

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

• Plot training curves from experiment results
• Create method comparison and ablation tables
• Combine results across datasets into multi-panel figures

Build HTML/CSS pages styled after a named brand using 54 design references. Templates provide colors, typography, spacing, component styles, responsive behavior, and font substitutes to guide a consistent visual result.

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

• Create a landing page with Stripe-inspired styling
• Style a content site after Notion
• Build a dark dashboard inspired by Linear

Turn a rough idea or an existing prompt into a ready-to-paste instruction for a specific AI tool. The skill clarifies the task, output format, constraints, and success criteria for writing, image generation, or coding agents.

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

• Turning a rough idea into an AI prompt
• Improving a prompt for a specific AI tool
• Defining scope and completion criteria for coding agents

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

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

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

Turn a Figma file or design image into a working interface using the project's existing components and design tokens, its shared visual settings. Compare the implementation with the design and report differences, missing states, and parts awaiting backend connections.

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

• Implement an interface from a Figma design
• Build a screen from a supplied design image
• Reuse existing components and shared visual settings

Choose a small validation experiment based on your hypothesis, risks, time, and resources. Compare five methods, from technical checks to user interaction tests, and define pass, fail, and learning criteria before investing in a larger build.

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

• Choosing a validation method for a risky idea
• Planning an AI feasibility check
• Selecting a test for onboarding task completion

Compares a prototype’s rendered screens with its source design to find differences in typography, spacing, colors, images, and text. Produces prioritized fixes and records visual evidence from follow-up checks before handoff.

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

• Check a prototype against its Figma source before handoff
• Compare an image-based build with the original visual
• Review visual differences across screen sizes and states

Route product design requests to focused skills for user research, experience reviews, visual exploration, prototype building, or sharing. This entry point selects the appropriate workflow rather than performing the design work itself.

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

• Finding the right workflow for a product design request
• Routing a product flow review to an audit
• Starting visual exploration for a new prototype

Save and manage product references and design preferences for future Product Design work. Keep product URLs, Figma files, screenshots, brand assets, and other context available, and review or update what has already been saved.

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

• Set up Product Design with initial references
• Save Figma files and product URLs for future work
• Keep screenshots and brand references available

Turn a product design brief and visual references into three distinct design images. Compare layouts, information priorities, and interaction approaches, then refine or combine ideas to choose a visual direction before implementation begins.

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

• Compare alternative layouts for an existing screen
• Explore three directions for a new product idea
• Refine a design using screenshots or Figma references