设计技能

Design reading interfaces that resemble archival books, pairing serif text and aged paper surfaces with a dark catalog frame. Organize chapters, notes, and metadata through index navigation, with adjustable texture, page depth, and visual density.

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

• Design a book-like reader for literary content
• Create an archive or manuscript viewing interface
• Organize research material with indexes and annotations

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

Build subtle animated petals, snow, confetti, or other decorative particles within a single page section. Adjust their movement and density while preserving readable content, limiting device workload, and providing static alternatives for readers who reduce motion.

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

• Adding gentle petals or snow to a page section
• Animating small brand fragments behind content
• Limiting decorative animation on mobile devices

Review websites, apps, screenshots, or design code for redundant decoration, generic patterns, and usability defects. Receive prioritized findings tied to specific evidence, with removal or small corrections that preserve the interface’s existing design direction.

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

• Reviewing redundant decoration in a landing page
• Finding readability and usability issues in screenshots
• Prioritizing small fixes within the existing design

Create or integrate detailed 3D models with smooth outlines and believable edges for close-up views. Prepare lower-detail versions for distant viewing, prioritize loading, and measure rendering costs in the actual scene.

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

• Creating a detailed 3D model for close-up views
• Replacing visibly faceted curves with smoother geometry
• Preparing detailed architectural assets for rendering

Prepare detailed 3D materials that remain clear in close-up views. The skill guides texture resolution, physically based material maps, surface mapping, filtering, and progressive loading while checking download size and GPU memory use.

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

• Prepare wood, stone, and fabric materials for close-up views
• Fix texture seams, grain direction, and normal map orientation
• Preserve floor and foliage detail at oblique or distant views

Collect five UI references into a dated, article-ready bundle with local images, full-page and section captures, motion studies, and detailed AI-builder prompts. Check previous collections for duplicates and document fallback reasons when video capture is unavailable.

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

• Collecting daily landing-page design references
• Studying page animations and interactions
• Writing detailed prompts for AI website builders

Create original brand campaign visuals from a supplied reference. Adjust how closely concepts share its visual language, develop distinct brands within one family, and check names, composition, and differences from signature reference elements.

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

• Develop original campaign visuals from a reference image
• Create distinct brands with a shared visual direction
• Bring an existing concept closer to its reference

Turn HTML files or live reference pages into articles with reusable prompts for recreating animations and interactions. Includes source inspection, screenshots, optional video capture, and checks that article text and media render correctly.

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

• Extracting reusable interaction prompts from HTML
• Writing screenshot-backed articles about web animations
• Recording live page motion and collecting reference frames

Analyze a reference video's layout, typography, motion, and interactions to create a detailed prompt for rebuilding or adapting the experience. Include asset requirements, implementation choices, mobile behavior, and alternatives for users who prefer reduced motion.

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

• Turn a reference video into a detailed build prompt
• Describe scroll effects and transitions precisely
• Plan image and video assets for a recreation

Create realistic metal surfaces in Three.js by combining structured reflections, studio lighting, scratches, fingerprints, and beveled edges. Includes polished, brushed, and aged finishes for objects such as tools, rings, and metal product parts.

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

• Fixing metal that looks like gray plastic
• Creating polished or brushed metal finishes
• Adding patina and worn edges

Add underwater sunbeams to a Three.js scene, with rippling light patterns, a shimmering surface viewed from below, and matching illumination on fish. The beams shift against objects as the camera moves, giving the water depth.

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

• Add sunbeams to an underwater scene
• Render a rippling water surface from below
• Light swimming fish as they cross beams

Create wood surfaces in Three.js using a single material with code-generated grain, pores, end grain, and finishes. Coordinate color, roughness, and surface relief to improve close-up detail and reduce visible repetition across boards.

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

• Creating wood grain for furniture, floors, and tool handles
• Adding pores and end-grain detail for close-up views
• Adjusting oil, wax, and lacquer finishes

Build woven fabric in Three.js with visible threads, realistic sheen, seams, and thick hems. The skill covers folds that preserve texture proportions, light passing through thin cloth, and variations in dye and wear.

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

• Creating backlit curtains
• Differentiating linen, silk, and wool
• Adding hems and stitches for close-up views

Build detailed paper surfaces in Three.js for sheets, labels, cards, or shoji panels. Reproduce visible fibres, torn edges, layered thickness, curled corners, ink bleeding, aged edges, and backlit translucency, with additional detail for close-up views.

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

• Creating backlit washi shoji panels
• Adding torn edges and thickness to cards or labels
• Showing paper fibres in close-up views

Build or review website and app interfaces with choices grounded in the product’s identity and purpose. Covers colors, layouts, decoration, dashboard content, and working controls, with concrete guidance for replacing repetitive design patterns.

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

• Reviewing a landing page for repetitive layouts
• Choosing colors and decoration that fit a brand
• Reworking dashboard charts, tables, and empty states

Build and refine layouts that rearrange across phone, tablet, and desktop widths. The skill addresses grids, text sizes, spacing, overflow, touch controls, and navigation so content remains readable and controls remain usable as the screen changes.

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

• Fixing layouts that break on narrow screens
• Adjusting grids for tablet and small laptop widths
• Improving touch targets and tap interactions

Review and improve UI accessibility, including color contrast, keyboard operation, visible focus, and clear status messages. A contrast checker supports color checks, while guidance also covers text zoom and form fields obscured by mobile keyboards.

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

• Checking contrast between text and background colors
• Improving keyboard navigation and visible focus
• Clarifying empty, loading, and error states

Apply purpose-based checks while building an interface, or audit an existing project with prioritized findings. Reviews visual choices, content, working interactions, and evidence for claims while requiring a clear design direction.

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

• Applying design checks while building a new interface
• Auditing an existing site with prioritized findings
• Reviewing whether visual choices serve a clear purpose

Generate Preline theme CSS from a brand color or a desired mood using bundled local scripts. Preview output before saving, create light and dark themes, and review or fix theme tokens, the named values that define styling.

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

• Matching a Preline theme to a brand color
• Turning a visual mood into theme colors
• Previewing CSS before saving a file

Turn data into template-based HTML charts, HTML or PDF presentations, and full-page HTML reports. Selects chart structures to match the data and keeps colors, labels, and visual proportions consistent across each delivery.

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

• Creating charts for articles
• Visualizing business metrics for weekly updates
• Preparing HTML or PDF presentations

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

Create original generative art with p5.js, using code to produce patterns and motion. Receive a written artistic concept and an interactive HTML viewer with adjustable parameters, reproducible random variations, seed navigation, and PNG downloads.

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

• Create art from particle motion and flow fields
• Explore patterns by adjusting sliders
• Reproduce a favorite variation with the same seed

Turn content into AntV Infographic syntax, a text format for describing infographics. The skill organizes titles, items, relationships, and metrics, then selects a suitable template for sequences, lists, comparisons, hierarchies, or charts.

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

• Turn procedural text into sequence syntax
• Structure a two-sided comparison
• Describe hierarchical information