设计技能

Refine interface components using Emil Kowalski's design engineering principles. Decide when animation helps, tune timing and interaction feedback, and review CSS choices with attention to performance, accessibility, and details such as tooltips and drag behavior.

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

• Deciding whether an interaction needs animation
• Refining buttons, tooltips, and notifications
• Reviewing UI code with before-and-after comparisons

Create horizontal slide decks with an editorial magazine and e-ink look. Ten layouts and five palettes organize narratives, quotations, images, and data into a paper-inspired presentation delivered as a single HTML file.

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

• Presenting ideas in a magazine-style deck
• Highlighting research findings and key numbers
• Organizing talks with chapter dividers

Turn product information, analysis, or methods into an HTML slide deck with a 16-column grid and one accent color. Use 22 fixed layouts for timelines, comparisons, diagrams, and charts based on supplied data.

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

• Presenting a product roadmap
• Reporting KPIs and ranking data
• Explaining before-and-after differences

Audit an implemented interface visually, then make code fixes in small, focused commits. Before-and-after screenshots document the changes, helping teams inspect and refine the interface as they prepare for launch.

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

• Checking an implemented interface before launch
• Fixing issues found in a visual audit
• Comparing screenshots before and after UI changes

Develop campaign concepts and guide design work from the brief to presentation. Combine structured idea generation, repeated self-assessment, and available design resources to define a direction, critique work, and plan improvements.

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

• Developing a campaign concept
• Defining a page's visual direction
• Reviewing a design and planning improvements

Create a brand overview image combining logo concepts, colors, typography, and examples across digital and physical materials. The skill bases the visual direction on the brand’s purpose and audience, arranging connected panels in a clear presentation grid.

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

• Presenting a new product’s visual identity
• Exploring logo concepts grounded in brand meaning
• Reviewing colors, typography, and application examples together

Find Apple interface design guidance for planning apps across iOS, macOS, visionOS, watchOS, and tvOS. This catalogue entry points to a bundle of 14 skills covering design foundations, interface components, interaction patterns, inputs, and technologies.

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

• Consult design guidance when planning an iOS app
• Reference interface components for macOS
• Explore interaction guidance for visionOS

Supports palette creation and contrast checks using color science references. It also covers color naming, pigment mixing, and historical color theory, helping you explore color choices for design and creative work.

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

• Creating a palette for a design
• Checking text and background contrast
• Choosing names for colors

Polish an existing web interface with subtle button feedback, state transitions, and page reveals. Preserve the layout and content, keep animation timing consistent, and provide alternatives for people who prefer reduced motion.

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

• Adding hover and press feedback to buttons
• Clarifying changes between interface states
• Introducing primary content with subtle motion

Build a design system, a shared set of design rules, from scratch and create realistic product mockups. Use it for kickoff workshops or new brand development, with room to explore bolder creative choices.

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

• Developing a new brand from scratch
• Running a design kickoff workshop
• Building a design system from the ground up

Apply Anthropic's official brand colors and typography to artifacts for a consistent visual identity. The guidance also provides a reference for developing your own brand rules; the full workflow requires the upstream skill bundle.

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

• Applying Anthropic brand colors to artifacts
• Aligning typography with official brand guidance
• Keeping visual identity consistent across artifacts

Review a design against Dieter Rams' ten principles using evidence from code, screenshots, copy, and measurements. Receive a scorecard, a verdict on whether to create, refine, or redesign, and a prompt for planning the next steps.

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

• Audit a UI against Dieter Rams' ten principles
• Decide whether to refine or redesign a screen
• Check interface wording and usability with evidence

Customize Ant Design colors, spacing, corners, and typography using design tokens, shared values that control appearance. Configure global styles, individual components, dark mode, and CSS variables through ConfigProvider, and extract computed theme values when needed.

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

• Matching interface colors and typography to a design
• Configuring a dark theme
• Adjusting the appearance of individual components

An older experimental skill for designing landing pages, portfolios, and redesigns around a brief and audience. Adjust layout variation, motion, and information density while applying contextual design rules, consistent styling, and accessible interaction states.

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

• Designing a landing page for a specific audience
• Creating a portfolio with controlled motion and density
• Redesigning a site around its existing brand

Generate a brand overview image that brings together logos, colors, typography, imagery, and application mockups. Develop a new visual identity or extend supplied brand assets into a coherent presentation board guided by the brand’s purpose and audience.

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

• Exploring the visual direction of a new brand
• Creating a presentation board from existing brand assets
• Comparing logo, color, and typography choices together

Build React or Next.js interfaces using adjustable layout variation, motion, and information density. This preserved v1 skill covers typography, color, responsive layouts, interaction states, and animation isolation for projects that require its original behavior.

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

• Maintaining the original v1 design behavior
• Building asymmetric React or Next.js interfaces
• Designing loading, empty, and error states

Audit and refine existing websites or apps while preserving their functionality and technology choices. Improve typography, colors, spacing, navigation, and interaction states, including loading, empty, and error screens, through focused changes rather than a full rebuild.

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

• Refining a website with a generic AI-generated look
• Improving typography, colors, and spacing
• Adding loading, empty, and error states

Generate separate horizontal design reference images for each section of a landing page or marketing website. It coordinates colors, typography, imagery, spacing, and action buttons while varying layouts to give developers a concrete visual guide.

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

• Creating visual references for every landing page section
• Exploring a minimalist or editorial hero design
• Coordinating colors and typography across website sections

Design web interfaces inspired by industrial print and old military terminals. Use rigid grids, contrasting type sizes, restrained color, and simulated analog textures to shape data-heavy dashboards, portfolios, or editorial sites.

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

• Designing a dashboard with an industrial blueprint look
• Creating a portfolio with bold typography
• Styling an editorial site like printed technical manuals

Create website interfaces with defined typography, spacing, layered cards, and animation rules. The skill guides React, Tailwind, and HTML output, combining asymmetric layouts with mobile adaptations and performance constraints for a consistent visual direction.

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

• Designing an asymmetric website layout
• Refining cards, buttons, and navigation
• Adding motion with mobile performance in mind

Design and code restrained web interfaces using warm whites, charcoal text, contrasting typefaces, and generous spacing. Flat grids, muted pastel accents, and subtle interactions create an editorial feel, with motion settings that respect user preferences.

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

• Designing a calm, document-style web interface
• Organizing features in an asymmetrical grid
• Unifying the appearance of buttons, FAQs, and shortcuts

Design, build, or refine public websites using researched layouts, typography, palettes, and imagery. It develops a concept from the subject, checks the page in a real browser at three widths, and guides revisions through screenshot reviews.

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

• Redesigning a landing page that looks generic
• Building a portfolio around a distinctive concept
• Checking typography and layout at three screen widths

Create website reference images, inspect their text, spacing, colors, and layout, then build the frontend to match. Section-specific images guide landing pages, portfolios, and redesigns, with attention to readable content and uncluttered first screens.

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

• Building a landing page from generated design references
• Redesigning a portfolio website
• Refining a hero section for small laptop screens

Generate mobile app screen images and connected screen flows for iOS, Android, or cross-platform concepts. The skill emphasizes readable text, consistent colors and components, logical navigation, and balanced phone mockup framing. It produces images only.

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

• Visualizing a mobile app concept across several screens
• Creating onboarding and authentication flow images
• Comparing mobile app redesign concepts