设计技能

Create a consistent UI design system from brand colors. Generate design tokens, reusable values for colors, typography, and spacing, and support component documentation, responsive layout calculations, accessibility considerations, and clear handoff materials for developers.

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

• Generate shared design values from brand colors
• Standardize typography and spacing across screens
• Plan layouts for different screen widths

Create original posters and static artwork by first defining a visual direction for color, shape, space, and typography. Receive a Markdown design philosophy alongside a PNG or PDF artwork that communicates primarily through visuals.

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

• Create an original poster
• Express a theme through abstract artwork
• Develop a visual direction and finished artwork

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

Create and refine draw.io diagrams by editing XML files, adjusting labels, arrows, and spacing, and using AWS icons. Export transparent PNG images for slides, with guidance for readable Japanese text and consistent layouts.

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

• Create an AWS architecture diagram
• Fix Japanese labels and overlapping arrows
• Export transparent PNG diagrams for slides

Create patent line drawings from text or reference images through the PatentFig AI API. Convert existing drawings into scalable vector files for CAD, increase image resolution, and export figures in formats used for patent filing.

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

• Creating patent figures from invention descriptions
• Generating drawings based on sketches or photos
• Converting existing drawings into SVG or DXF

Plan mobile app screens and interactions around touch, performance, offline use, and platform conventions. The skill guides design decisions and implementation checks for React Native, Flutter, and native iOS or Android apps.

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

• Planning screens for one-handed use
• Reviewing slow lists and animations
• Designing loading, error, and offline states

Plan a portfolio website that helps potential employers or clients understand your work and contact you. Covers site structure, project presentations, case studies explaining decisions and results, personal branding, and mobile usability.

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

• Planning a developer or designer portfolio
• Turning projects into detailed case studies
• Improving paths from project pages to contact

Turn user data and interviews into research-backed personas, or representative user profiles. The toolkit also supports mapping user journeys, planning usability tests, and combining research findings to guide and validate design decisions.

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

• Creating personas from user data and interviews
• Mapping the steps of a customer journey
• Planning usability tests to validate a design

Create Marp presentation slides, written in Markdown, using seven themes for business, technical, academic, and creative content. The skill organizes headings, bullet points, whitespace, and images into a consistent presentation saved as a Markdown file.

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

• Create slides for lectures and seminars
• Prepare proposals and business reports
• Build slides for technical presentations

Turn a written diagram request into a JSON specification and render a blueprint-style SVG. Create system architectures, request flows, state machines, or neural network diagrams as files for documentation, READMEs, posts, and slides.

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

• Adding a system architecture diagram to a README
• Illustrating request flows or data pipelines
• Creating a state machine diagram

Style materials with Anthropic's brand colors and typography. Apply distinct heading and body fonts, choose text colors for the background, and use coordinated accent colors for shapes, with fallback fonts when Poppins or Lora are unavailable.

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

• Styling slides with Anthropic's brand colors
• Applying consistent heading and body fonts
• Coordinating shape and accent colors

Build a PowerPoint presentation with Morph transitions, which smoothly transform shared shapes between slides. Plan how objects move, resize, rotate, appear, and exit across a slide sequence, then deliver a single .pptx file.

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

• Shrinking and moving a cover title onto the next slide
• Creating a continuous background across a slide sequence
• Explaining changing values with animated rectangle bars

Create PowerPoint presentations centered on GLB 3D models, with rotation, zoom, and Morph transitions that smoothly connect slides. The skill also guides model selection, color palettes, typography, and layouts that support the presentation’s subject.

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

• Presenting a product from several angles
• Explaining structures with a 3D model
• Finding a model that matches a presentation topic

Generate images from written descriptions through 9Router using a choice of image models. Check each model’s supported settings, request an image, and receive a URL, encoded image data, or image bytes for saving to a file.

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

• Creating a landscape image from a written description
• Checking supported image sizes and quality settings
• Saving generated images as files

Create animated HTML presentations from notes, a topic, or PowerPoint files. Compare three visual style previews, then build a browser-based deck with a fixed widescreen layout, editable text, and optional PDF export or web publishing.

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

• Create slides for a talk or pitch
• Convert PowerPoint slides to HTML
• Compare visual styles before choosing a design

Set brand styling from a website link or a plain-language description, preview it on a sample page, and save preferred delivery formats so future plugin pages and documents follow the chosen look and format.

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

• Set brand styling from a website link
• Update colors and logos after rebranding
• Preview report styling before saving

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

Write and review interface text, including button labels, error messages, empty screens, and onboarding instructions. Get recommended wording, alternatives, and explanations tailored to the user's situation, tone, and character limits.

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

• Choosing clear button labels
• Rewriting error messages with recovery steps
• Guiding users through empty screens

Review a design system for inconsistent names and hardcoded visual values, document component variants and accessibility behavior, or propose new interface patterns that follow existing rules. Produce structured audits, component references, and design proposals.

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

• Auditing component names and visual consistency
• Documenting component variants and states
• Recording keyboard and screen reader 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

Design new pages and components, audit existing interfaces, or redesign their visual structure. It emphasizes varied layouts, consistent colors and typography, mobile checks, and extracting reusable design characteristics from screenshots or readable web pages.

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

• Designing a new landing page
• Auditing an existing interface
• Redesigning a page within its existing structure

Build working web pages, application interfaces, and components with a clear visual direction. Shape typography, color, layout, and animation around the intended audience and purpose, producing coordinated design and code in HTML, CSS, JavaScript, React, or Vue.

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

• Building a landing page with a clear visual style
• Designing and implementing a dashboard
• Refining typography, colors, and spacing in an existing interface

Design charts, maps, and dashboards around the question readers need answered. Choose suitable chart forms, communicate findings through titles and labels, and check custom colors with a local palette validator to support clear visual distinctions.

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

• Choose a chart type for comparisons or trends
• Improve dashboard layout and number formatting
• Check a custom chart palette

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