设计技能

Develop visual effects with GLSL, a language for graphics programs called shaders. Apply ray marching, fluid simulation, particle systems, and rule-based generation to create hero visuals and still frames of motion.

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

• Creating hero visuals for a page
• Developing fluid simulation visuals
• Building particle effects

Turn a song, podcast, or personal introduction into a Spotify-style now-playing card. Generate a single HTML file with CSS-drawn cover art, a progress bar, and playback-style icons for video overlays or personal homepages.

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

• Adding a now-playing card to a video overlay
• Introducing a favorite song on a personal homepage
• Presenting a podcast title and creator

Audit and improve an existing website or app's interface while preserving its functionality and technology stack. Refine typography, colors, layout, and interaction states through focused changes, checking functionality after each update.

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

• Audit an existing website's visual design
• Replace repetitive, generic interface patterns
• Improve loading, empty, and error states

Create a Swiss-inspired presentation page as a single HTML file, using bold typography and geometric cards. The template includes slide navigation, light and dark themes, accent color cycling, and optional annotation overlays without external runtime dependencies.

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

• Build a presentation-style landing page
• Create a Swiss-inspired HTML slide deck
• Present a launch with interactive navigation

Review interface designs with a senior designer's perspective. It scores each design dimension from zero to ten, explains what a top score requires, and flags generic AI-generated design patterns before UI changes are merged.

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

• Reviewing UI work before merging changes
• Comparing design scores across review dimensions
• Identifying generic AI-generated design patterns

Guide SwiftUI interface design with rules against generic AI styling, advice on design direction, guidance for handling brand assets, and reviews across five dimensions. Use it to shape and assess native app interfaces.

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

• Choosing a design direction for a SwiftUI interface
• Reviewing an interface for generic AI styling
• Checking how brand assets are handled

Build polished web pages with explicit guidance for typography, spacing, colors, layered cards, and restrained animation. The skill provides layout options and mobile adaptation rules, producing React, Tailwind, or HTML code for a consistent visual direction.

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

• Creating a calm landing page with refined typography
• Designing an asymmetrical SaaS feature layout
• Building a portfolio with soft shadows and generous spacing

Design and build landing pages, portfolios, and website redesigns around the audience and brand. Choose suitable typography, colors, layouts, and motion, then check consistency, responsive behavior, and readable buttons and forms before delivery.

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

• Build a landing page around a brand brief
• Create a portfolio for its intended audience
• Redesign a site while retaining its identity

Guide an iterative review of a built interface against its design brief, using critique and adjustment to improve visual alignment. This catalogue entry points agents to the upstream workflow, which requires a separate installation.

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

• Review a built interface against its design brief
• Refine visual differences through repeated adjustments
• Plan a design-to-code review cycle

Use more than 300 design rules drawn from Apple HIG, Material Design 3, and WCAG 2.2 accessibility guidance. Apply them when planning a shared app design for iOS, Android, and the web.

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

• Planning an app design shared across iOS, Android, and the web
• Consulting Apple HIG and Material Design 3 rules
• Considering accessibility with WCAG 2.2 guidance

Apply font and color themes to slides, documents, reports, and HTML landing pages. Ten preset themes provide starting points for giving these materials a consistent visual style.

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

• Apply a preset theme to slides
• Style documents and reports consistently
• Set fonts and colors for an HTML landing page

Create project-specific rules for turning Figma designs into code. Bring design tokens, shared values such as colors and spacing, together with naming conventions and lint rules for automated checks in one reference.

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

• Defining rules for implementing Figma designs
• Documenting shared design values and naming conventions
• Consolidating automated checking rules in one reference

Create a single HTML file with a flowing, animated background and a prominent quote or headline. Use it for a video intro, a landing page's main visual, or a poster, with landscape and portrait layouts available.

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

• Creating a video intro with a short message
• Designing a landing page's main visual
• Making a poster with a flowing background

Generate visual assets through Google Gemini's image generation API, including interface mockups, icons, and illustrations. The supplied entry helps agents discover the skill; running the full workflow requires installing the upstream bundle.

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

• Creating visual mockups of an interface
• Generating icons for a design
• Creating illustrations for visual materials

Generate mobile app screen concepts and connected screen flows for iOS, Android, or cross-platform products. The skill emphasizes readable text, consistent colors and navigation, and clean phone mockups. It produces images rather than implementation code.

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

• Visualizing an app concept across several screens
• Designing a first-time user introduction flow
• Exploring sign-in and account recovery screens

Create landing pages, websites, and app interfaces with restrained composition and a clear visual presence. The skill draws on OpenAI's frontend production playbook to guide the appearance and arrangement of interface elements.

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

• Creating landing pages with restrained composition
• Designing visually composed websites
• Creating app user interfaces

Turn business metrics and findings into a magazine-style HTML report with a paper-like background, pastel cards, and a retention chart. Use the template to create a single-page board memo or a visually organized business report.

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

• Create a magazine-style business report
• Prepare a single-page board memo
• Present key metrics alongside findings

Generate website design references as separate horizontal images for each section. Keep a consistent palette while varying layouts, spacing, imagery, and calls to action, giving developers or coding agents concrete visual references for implementation.

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

• Create section-by-section landing page design references
• Explore different hero layouts
• Share visual references with developers

Builds or updates a Figma design system library from an existing codebase. Helps keep reusable design components aligned with the components already shipped in a product, giving design teams a reference that reflects the implementation.

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

• Creating a Figma library from an existing codebase
• Updating a design library to match shipped components
• Aligning design references with implementation

Create a macOS-style notification banner from an announcement or message, complete with an app icon, title, and body. The single-file HTML design supports video overlays, product teasers, and social images, with light and dark appearances.

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

• Adding a notification banner to a video
• Creating a teaser for a product release
• Presenting an announcement as a social image

Create an FAQ page with expandable answers, live text search, and category filters. The skill organizes realistic questions for a product or service into a single HTML file with a contact section.

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

• Creating a help page for a SaaS product
• Organizing billing and account questions
• Building a searchable online store FAQ

Design desktop landing page prototypes with varied layouts, large typography, dense grids, and GSAP animations tied to scrolling. Pages follow an attention-to-action structure, with explicit checks for heading length, grid completeness, and button text contrast.

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

• Prototyping a landing page with scroll animations
• Exploring varied hero layouts and typography
• Designing a compact grid without empty cells

Create HTML presentations with rich animations and visual style previews. Use the skill to build slides for online keynotes, embedded talks, or interactive briefs, with a preview of how the presentation will look.

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

• Creating slides for an online keynote
• Preparing a presentation to embed in a web page
• Building an interactive brief

Find images, logos, and screenshots already stored in OD Library and reuse them in the current project. Select assets by their metadata, copy them into the project, and connect the returned file paths to the page.

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

• Reuse a screenshot captured earlier
• Insert a stored logo into a page
• Find a hero image in an existing library