设计技能

Create, implement, or review Paperclip capsule visuals that represent agents and their status. Apply the rules for each visual type, document settings for reproducible assets, and provide static alternatives for animated effects.

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

• Create capsule avatars for agents
• Implement heartbeat status indicators
• Prepare hero capsule graphics for marketing

Draft simple black-and-white screen layouts as standalone SVG files, with numbered explanations of each area. For multiple screens, create a flow overview and an optional static viewer page for browsing and zooming during review.

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

• Sketch a screen layout before implementation
• Review mobile and desktop screen structure
• Map a flow across multiple screens

Build and update Paperclip interfaces using shared rules for colors, typography, status indicators, layouts, and interactions. Reuse existing components and keep the component catalog and showcase page aligned with new or changed interface elements.

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

• Add pages that follow Paperclip UI conventions
• Create reusable interface components
• Standardize status colors and priority icons

Find and adapt animations for web pages and components using 160 examples with HTML, CSS, JavaScript, and adjustable parameters. Covers text, interaction, basic, and advanced effects, with guidance on accessibility and fitting code into existing projects.

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

• Adding a ripple effect to button clicks
• Giving a heading a typewriter animation
• Revealing elements as the page scrolls

Build a creative studio website with classical illustrations, cobalt colors, serif headings, and cinematic scrolling. Adapt the supplied HTML template to a brand while retaining chapter navigation, service sections, FAQs, and mobile layouts.

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

• Create an architecture studio website
• Build a classical art portfolio
• Present studio services and FAQs

Build a website prototype as a single HTML file using a supplied template and section layouts. Suitable for landing pages, pricing pages, and documentation indexes, with colors adapted to an existing design system.

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

• Prototyping a product landing page
• Creating a pricing comparison page
• Designing a documentation index

Choose one visual direction before building, using an existing design system, supplied brand references, or the project brief. Record the choice and define the colors, typography, and other visual settings that guide implementation.

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

• Set a visual direction before implementation
• Apply an existing design system to a new project
• Turn brand references into a clear design direction

Build a trading analysis dashboard as a single HTML file, with dense market panels and interactive charts. Include light and dark themes, Live/Demo controls, chart focus views, and a keyboard command menu for navigating the interface.

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

• Prototyping a financial analysis terminal
• Presenting a dashboard with dense market panels
• Demonstrating chart tooltips and focus views

Collect design tokens—reusable values for colors, typography, spacing, corners, and shadows—from source code, screenshots, or Figma exports. Organize them in a JSON file with source and usage references for later mapping to a design system.

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

• Collecting design values scattered across source files
• Preparing Figma design data for migration
• Extracting design settings from screenshots

Map a mobile app journey across three or four phone frames in one HTML board. Simple gray content blocks, dashed arrows, numbered actions, and short annotations show how users move between screens before detailed visual design.

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

• Mapping onboarding through the home screen
• Reviewing the path from item details to confirmation
• Discussing screen transitions before visual design

Create a hand-drawn HTML wireframe for exploring screen layouts before detailed design. Graph paper, sticky notes, sketch tabs, and rough chart placeholders present an early concept with annotations for discussion and review.

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

• Sketching an initial portal or dashboard layout
• Presenting layout options with labeled sketch tabs
• Adding review notes to an early screen concept

Create soft, polished web prototypes with silver or cream backgrounds, nested card borders, rounded surfaces, and carefully specified motion. The skill defines page sections, buttons, navigation, and mobile layouts for a consistent visual style.

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

• Prototyping a calm SaaS website
• Creating a soft visual style for a consumer product site
• Building a feature page with cards and prominent action buttons

Add a live adjustment panel to an HTML page so viewers can explore colors, text sizes, spacing, themes, and motion. Changes appear immediately and are saved in the browser for the next visit.

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

• Fine-tune a landing page’s colors and spacing
• Demonstrate brand or design system variations
• Add adjustable appearance controls to a standalone demo

Extract a Figma file into local project files containing its element hierarchy, reusable color and typography settings, and exportable assets. The structured snapshot supplies source data for later design mapping and implementation steps.

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

• Extract a Figma file's element hierarchy
• Collect color, typography, and spacing settings
• Prepare assets for later implementation steps

Design new web pages, review existing interfaces, or analyze references from URLs and screenshots. The skill guides page structure, colors, typography, and interaction states while respecting an existing project's design system and implementation boundaries.

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

• Designing a new landing page
• Prioritizing improvements to an existing interface
• Analyzing a reference page or screenshot

Create an HTML prototype of a social media analytics dashboard for creators. It uses consistent sample data to show platform metrics, follower growth, a top post, trending topics, and comments, with styling drawn from your design system.

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

• Prototyping a creator analytics dashboard
• Designing a screen for metrics across social platforms
• Displaying follower growth and a top post

Create a desktop landing page wireframe, a simple layout made of grey boxes, with numbered markers and a matching specification panel. The result shows page structure alongside short implementation and user experience notes.

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

• Planning a desktop landing page layout
• Sharing implementation notes with developers
• Reviewing navigation, hero, and feature placement

Create a single HTML wireframe for a desktop dashboard using grey blocks, placeholder text bars, and crossed image boxes. Review navigation, information hierarchy, and panel placement before choosing final colors, copy, or imagery.

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

• Reviewing a desktop dashboard layout
• Checking navigation and information hierarchy
• Planning KPI, chart, and table placement

Create an animated HTML scene for history or trivia explainers, combining pixel art, a prominent year, moving text, and a scrolling timeline. CSS loops provide motion, making the scene suitable for screen recording.

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

• Creating an animated scene for a history explainer
• Presenting trivia with pixel-art characters
• Preparing a retro animation for screen recording

Prototype a single-page website for SaaS, documentation, or knowledge products. Use warm off-white backgrounds, serif headings, fine dividers, generous spacing, and subtle motion to create a restrained layout with features and a signup or pricing section.

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

• Prototype a SaaS marketing page
• Explore a documentation page design
• Build an introduction page for a knowledge product

Create full-screen animated visuals with WebGL, a browser technology for GPU rendering. Combine shaders, 3D scenes, or particles with a text overlay, and deliver the result as one self-contained HTML file without external requests.

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

• Create a website hero animation
• Build generative art with a headline
• Prototype a 3D scene or particle field

Creates web prototypes inspired by Swiss industrial print, using newsprint backgrounds, oversized black type, fine grid lines, and red accents. It suits editorial pages, agency portfolios, and manifesto sites with a precise, assertive visual style.

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

• Prototyping a newspaper-style editorial page
• Designing an agency portfolio
• Building a manifesto site

Create an HTML pricing page with plan cards, a feature comparison table, expandable FAQs, and action buttons. The skill adapts the number of plans to the brief and follows the project's colors, typography, and component patterns.

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

• Prototyping a subscription pricing page
• Comparing features across service plans
• Presenting personal and business options

Review a design across five areas: visual execution, fit to the user's problem, brand consistency, accessibility, and wording. It guides the agent to fix concrete defects and explain any issues that remain unresolved.

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

• Reviewing a design before delivery
• Checking consistency with brand guidelines
• Checking keyboard access and readable contrast