设计技能

Design image-led pages with large photographs, visible grid guides, and carefully positioned text and buttons. Coordinate typography, transparent cards, shading, and subtle motion so the image remains prominent while supporting information stays readable.

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

• Designing a large photographic hero section
• Positioning headlines and buttons over images
• Coordinating cards and navigation around photography

Design portfolio websites that lead with project work, then introduce the studio and its services. Use distinct editorial chapters, project-specific colors, restrained animation, and a clear contact section to organize the visitor’s journey.

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

• Redesigning a creative studio’s portfolio
• Presenting photography or artwork through project chapters
• Connecting case studies to services and contact

Design interfaces that combine magazine-style composition with precise technology product details. Use asymmetrical columns, expressive headlines, wide image bands, fine dividers, and restrained accent colors to shape a consistent layout, navigation, and motion style.

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

• Combining editorial composition with a technology product interface
• Arranging large headlines and wide image bands
• Unifying navigation, labels, and information modules

Design enterprise AI and automation product pages that explain permissions, approvals, audit records, and recovery from failures. Organize verified metrics and case studies, accessible workflow details, and demo or waitlist forms that clarify what happens next.

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

• Redesigning an enterprise AI product page
• Explaining permissions and approval workflows
• Presenting verified security controls and case studies

Create agency, studio, architecture, or portfolio websites using oversized typography, black-and-white sections, and documentary photography. Arrange project stories and irregular image collages alongside menus and FAQs designed for keyboard, touch, and reduced-motion use.

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

• Redesigning an agency or architecture studio website
• Presenting project processes through photo collages
• Organizing work and philosophy into contrasting sections

Create a near-black animated canvas background with large square pixels and ordered dithering, a repeating pattern that represents shades. Broad waves and cloud-like forms provide atmosphere behind framed interfaces, hero text, or data displays.

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

• Adding monochrome atmosphere behind a dark interface
• Placing pixelated waves behind hero text
• Creating cloud-like backgrounds for data displays

Create fluid animations where rounded shapes merge as they approach and separate as they move apart. SVG filters combine blur with a cutoff effect to form soft, connected shapes for backgrounds, loaders, or cursor effects.

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

• Adding fluid shapes to a page background
• Creating a merging-blob loading indicator
• Building a soft cursor effect

Design SaaS interfaces with warm paper tones, orange accents, rounded forms, and layered product illustrations. Apply a consistent visual direction across onboarding, cards, buttons, and motion, with adjustable warmth, softness, and visual detail.

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

• Design a warm, paper-toned signup screen
• Unify forms, cards, and button styling
• Pair onboarding forms with product illustrations

Design a clean agency-style page using nested containers: a light outer frame, dark inset sections, and rounded inner cards. Coordinate pricing, service groups, and action areas through clear hierarchy, generous spacing, and restrained accent colors.

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

• Designing a clean agency or service introduction page
• Highlighting pricing inside a dark inset section
• Organizing service groups with nested cards

Design a cohesive dark navy interface with layered blue light, a framed hero area, compact navigation, floating network labels, and clear action buttons. Includes styling examples and guidance for slow animation that keeps text readable.

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

• Designing a futuristic page with layered blue light
• Unifying navigation, buttons, and section frames
• Adding subtle network labels and slow background motion

Build continuous scrolling rows for logos, testimonials, screenshots, or short tags. The skill explains how to duplicate content, stabilize item widths, soften edges, and accommodate people who prefer reduced motion.

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

• Build a continuously scrolling logo row
• Loop screenshots or testimonials
• Add a moving row of tags or feature chips

Create a dark interface built around fine gradient borders, asymmetrical panels, and precise labels. Apply a consistent visual system to page frames, typography, controls, and backgrounds, using restrained monochrome colors and subtle motion.

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

• Defining a consistent dark interface style
• Structuring panels with fine gradient borders
• Designing navigation and active list states

Add subtle two-digit number markers to process steps, feature groups, cards, or editorial sections. Use consistent placement, spacing, and understated typography to provide visual structure while keeping headings and calls to action prominent.

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

• Add subtle numbers to process steps
• Give feature cards consistent corner markers
• Place number markers beside section headings

Design a dark interface around frosted glass surfaces and a clock-like circular dial. Coordinate backgrounds, navigation, buttons, typography, and slow motion to create a consistent instrument-panel appearance with restrained monochrome highlights.

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

• Designing a dark instrument-panel interface
• Building a hero layout around a circular dial
• Coordinating glass navigation and buttons

Design a cohesive dark interface with near-black surfaces, subtle pixel or grain textures, and thin accent-colored laser light. Extend the visual direction across panels, navigation, controls, borders, spacing, and motion while keeping content readable.

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

• Unify a dashboard around a dark visual system
• Add texture and depth to a flat black interface
• Build a hero area around a thin laser motif

Build a globe-like 3D visual in Three.js, a library for browser graphics. Combine a dense sphere of glowing particles with a thin orbital ring, then adjust color, density, tilt, and gentle motion.

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

• Adding a planetary particle visual to a website
• Creating a data-globe effect for an infrastructure service
• Matching orbital ring colors to a brand

Create structured web layouts with thin borders, L-shaped corner marks, and subtle diagonal backgrounds. Align sections, headings, controls, and media to a shared grid, with consistent spacing and a single-column layout on narrow screens.

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

• Design a web page with clearly framed sections
• Align headings, controls, and media to a shared grid
• Add subtle diagonal textures and corner marks

Create a warm beige light-mode interface with layered neutral surfaces, thin borders, and orderly information grids. Apply a consistent style across page backgrounds, hero sections, cards, buttons, status indicators, and subtle motion.

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

• Creating a warm beige product presentation page
• Organizing process explanations into consistent grid sections
• Unifying the appearance of cards, buttons, and page backgrounds

Apply subtle gradient borders to cards, pricing panels, buttons, and other web surfaces. Choose layered CSS backgrounds or a masked border to suit existing designs, with guidance on Tailwind syntax, corner alignment, opacity, and light and dark themes.

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

• Adding subtle borders to cards and pricing panels
• Decorating edges without replacing a complex background
• Adding brand accents to hover and focus states

Create buttons, cards, and panels with diagonally cut corners. It provides CSS shapes, border treatments, and sizing guidance to keep the geometry consistent while preserving readable labels, usable touch targets, and visible keyboard focus.

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

• Creating sci-fi-style controls
• Unifying diagonal corners across cards and panels
• Adding gradient borders to clipped shapes

Create flat SVG illustrations of long-legged people in design and coding scenes. Large black shapes, bright colors, and consistent poses give onboarding screens, error pages, and marketing cards a shared visual style.

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

• Illustrations for onboarding screens
• Character art for error pages
• Cards showing design and coding work

Choose Unsplash images for avatars, portraits, website backgrounds, and wallpapers. Get links to the photo pages, recommended dimensions and aspect ratios, and guidance on cropping and resizing images for each intended use.

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

• Choosing square avatar images
• Finding portraits for profile cards
• Selecting wide website backgrounds

Find images in Aura Assets for design mockups and marketing, including backgrounds, architecture, and portraits. Get five direct image URLs per category, with guidance on resolution, aspect ratio, and cropping for different placements.

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

• Finding background images for website heroes
• Choosing portraits for design mockups
• Selecting abstract images for mobile wallpapers

Design minimal agency websites around a precise column grid, oversized headlines, generous whitespace, and restrained imagery. Establish a consistent visual direction for service listings, labels, buttons, and subtle motion across architecture, design, or strategy agency pages.

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

• Website design for architecture and design agencies
• Establishing a consistent visual system across pages
• Structuring service listings with a clear column grid