设计技能

Intended to generate icons in multiple sizes with a consistent visual style for apps, websites, and user interfaces. The supplied description outlines this purpose, but the skill file is a placeholder without operational instructions.

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

• Prepare icons for an app
• Create icons for a website
• Plan a consistent icon set across multiple sizes

Build working web pages and interface components with a clear visual direction. The skill guides typography, color, spacing, layout, and animation choices, translating the intended audience, purpose, and technical constraints into cohesive frontend code.

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

• Build a webpage with a distinctive visual direction
• Design and implement cohesive application components
• Create an interface with coordinated animation and layout

Create static technical drawings from object descriptions, photographs, or CAD models. Produce consistent views that explain shape or assembly, plus a viewer with zoom, editable colors, and downloads in SVG, PNG, and PDF formats.

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

• Creating an exploded view to explain an assembly
• Drawing aligned views from supplied dimensions
• Illustrating an object's shape from photographs

Review an interface across accessibility, layout, writing, typography, color, and visual polish. It coordinates specialist skills, combines evidence from code and rendered screens, and produces one report with findings ranked by their impact on users.

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

• Reviewing a screen or complete user flow
• Checking loading, error, and narrow-screen states
• Prioritizing interface fixes by user impact

Refine interface surfaces, icons, and motion with specific values for corners, shadows, alignment, and transitions. Preserve the project's existing design conventions while identifying visual inconsistencies, touch interaction problems, and missing alternatives for reduced motion.

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

• Refining corners and shadows on nested cards
• Unifying icon appearance across interaction states
• Adjusting button feedback and entrance animations

Review and improve interface grouping, alignment, spacing, and responsive structure. Check whether content and actions remain accessible when screens resize, text grows in translation, zoom increases, or the layout switches to right-to-left reading.

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

• Checking clipping and overlap on narrow screens or at higher zoom
• Preparing layouts for longer translated text
• Reviewing right-to-left layouts

Set and review how interface text renders, including font loading, size hierarchy, line spacing, wrapping, truncation, and punctuation. Apply fixes within the existing styling system and check how realistic content behaves across different widths.

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

• Organize heading and body text sizes
• Fix wrapping and truncated text
• Keep changing numbers aligned

Build and review interface color systems with palettes, format conversions, and semantic tokens that name colors by purpose. Measure foreground and background contrast, and identify inconsistent themes, misused color roles, and colors outside the supported range.

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

• Build palettes around interface roles
• Organize color tokens by purpose
• Measure text and background contrast

Create three distinct versions of one interface component and compare them at full size on the actual page. Explore a chosen design dimension, review each option's tradeoffs, and integrate the selected version while removing the temporary comparison controls.

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

• Compare alternative structures for one component
• Explore different spacing and density levels
• Share links to individual design options

Create screen mockups at three levels: text wireframes, standalone HTML files, or working prototype pages. Use requirements, existing app styles, and real project data to show layouts and interactions for review or testing.

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

• Sketch screen layouts while writing requirements
• Deliver HTML mockups alongside requirements
• Test interactions with existing components

Build web pages and interface components with a clear visual direction suited to their purpose and audience. The skill guides typography, color, layout, and animation, turning design choices into working frontend code.

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

• Building a landing page with a distinctive visual style
• Designing a dashboard with a consistent look
• Refining the typography, spacing, and colors of an existing web UI

Create illustrated novel covers with the book title and pen name, tailored to the genre and publishing platform. Compare composition options, use reference images, export required dimensions, and refine colors, lettering, or layout.

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

• Creating a novel cover with a title and pen name
• Comparing cover compositions suited to a genre
• Generating a cover using a reference image

Create social image sets and short motion cards from articles, screenshots, photos, or supplied videos. Organize content into magazine or Swiss-style layouts, including Xiaohongshu carousels, Live Photo collages, and paired WeChat covers.

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

• Turning an article into a Xiaohongshu carousel
• Creating product posts with readable screenshots
• Making Live Photo collages from supplied videos

Create a six-frame storyboard showing a user's journey from a difficult situation to a better outcome. Develop the narrative, emotions, and visual descriptions to make product concepts concrete for pitches, concept reviews, and team discussions.

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

• Pitching a new product or feature concept
• Aligning a team on the intended user experience
• Exploring whether a concept resonates before development

Guide a workshop that maps a specific customer’s experience from start to finish. Capture stages, actions, thoughts, emotions, and pain points, then produce a customer journey map and a prioritized list of improvement opportunities.

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

• Mapping the onboarding experience for new customers
• Finding obstacles between trial signup and first value
• Reviewing support experiences for customers at risk of leaving

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

Review a product experience by walking through its steps and capturing screenshots. Produces an illustrated assessment of usability, design, and accessibility risks, with findings tied to specific screens and clear limits on what was checked.

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

• Review a registration or onboarding flow
• Inspect a checkout flow for usability issues
• Assess settings screens and navigation

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

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

Clarify what a product interface should be and what users should accomplish before design or prototyping begins. Ask only about missing information, summarize the brief and assumptions, then continue into the appropriate design workflow.

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

• Clarifying goals before designing a new interface
• Defining the purpose and scope of a redesign
• Organizing requirements before building from a screenshot

Find and inspect UI components in MagicPath, add them to an app, and adapt their behavior and styling. Apply themes or create and edit canvas components from code, including work based on an existing repository interface.

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

• Find UI components and add them to an app
• Apply a MagicPath theme to an interface
• Create or edit a component on the canvas

Design and implement browser game interfaces that keep the playfield visible. Create status displays, menus, and overlays with a consistent visual theme, responsive layouts for desktop and mobile, and clear interaction boundaries for 3D camera controls.

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

• Design status displays that keep the playfield visible
• Create menus that fit the game world
• Adapt game interfaces for desktop and mobile

Create and edit FigJam boards through Figma's use_figma tool. Organize meeting or brainstorming content with sections, sticky notes, shapes, connectors, and tables, and inspect existing board elements before updating their text, styling, or positions.

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

• Prepare a brainstorming board with sticky notes
• Build a retrospective or meeting board
• Draw diagrams with shapes and connectors

Add, edit, or inspect animation on Figma elements through use_figma. Work with keyframes, existing animation styles, color changes, easing that controls how movement accelerates, and timeline duration, with video frame checks when needed.

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

• Adding position or color animation to Figma elements
• Adjusting easing and animation timing
• Applying or removing existing animation styles