设计技能

Design and review web interfaces using Apple’s principles for fluid interaction. Shape drags, swipes, and spring motion that can change direction mid-animation, alongside translucent layers, readable typography, and accessible alternatives to movement.

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

• Design drawers that follow the user's finger
• Carry swipe momentum into animations
• Refine translucent layers and typography

Build distinct, working versions of one interface component and compare them at full size using a visual picker. Explore differences in layout, interaction, or motion, then integrate the version you choose into the project.

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

• Compare different layouts for a pricing card
• Try several notification interaction designs
• Explore motion choices for a hold-to-delete button

Find places in an interface where animation would help, then filter suggestions by frequency, purpose, speed, and function. Get precise motion settings and reasons for rejected candidates, without changing source code.

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

• Find useful places to add motion to an existing interface
• Specify timing and movement for dialogs and notifications
• Decide which interactions should stay free of animation

Build interactive dashboards, forms, and visualizations over the QM web interface using HTML, CSS, and JavaScript. Panels can send input to the conversation, update in place, or remain visible across sessions when requested.

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

• Display an interactive dashboard over a conversation
• Collect input through forms and buttons
• Explore information through visualizations

Design browser-based pages, dashboards, prototypes, and decks using existing brand guidance and a clear visual process. Build local files, then check rendering, layout, links, and accessibility before handing over the finished artifact.

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

• Building a landing page that follows brand guidance
• Designing dashboards and admin interfaces
• Creating browser-based prototypes and decks

Build HTML/CSS pages styled after a named brand using 54 design references. Templates provide colors, typography, spacing, component styles, responsive behavior, and font substitutes to guide a consistent visual result.

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

• Create a landing page with Stripe-inspired styling
• Style a content site after Notion
• Build a dark dashboard inspired by Linear

Review an existing interface component and identify three visual or interaction problems. Get concrete layout, spacing, color, and code changes that follow the project’s existing design conventions, with short before-and-after examples.

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

• Polishing an existing component
• Reviewing spacing and visual hierarchy
• Improving a React and Tailwind interface

Create artwork, product visuals, diagrams, and other images using the desktop's configured image provider. It also edits or combines supplied images and generates variations, turning requests into detailed instructions for composition, style, colors, and text.

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

• Create illustrations or product visuals
• Generate diagrams with labels and connections
• Edit or combine supplied images

Create, migrate, refine, or debug CARLA vehicle assets with Blender and Unreal. Use real vehicle references to guide geometry and materials, configure wheels, lights, and physics, and deliver editable sources with evidence from runtime validation.

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

• Creating a CARLA vehicle from real vehicle references
• Refining tires, materials, or body geometry
• Migrating vehicles and debugging Unreal integration

Generates a cover image through KrillinAI CLI from a complete prompt describing the title, language, composition, and style. Also checks image-provider configuration, validates the output image, and confirms that the submitted prompt was saved accurately.

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

• Creating a cover image with specified title text and style
• Generating a cover at a chosen image size
• Keeping the submitted prompt alongside the generated image

Plan and generate illustrations for Chinese articles using the black character 小黑, white backgrounds, and sparse handwritten annotations. The skill identifies passages worth illustrating, proposes placements and visual metaphors, and guides image generation, revision, and delivery.

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

• Planning illustration placement in Chinese articles
• Explaining ideas and processes through visual metaphors
• Generating individual hand-drawn article illustrations

Creates SVG technical diagrams for system architecture, UML, cloud systems, agents, and workflows. It checks labels and connections, exports PNG or offline HTML, and can animate supported diagrams as GIFs for explaining how components interact.

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

• Illustrating system architecture and cloud components
• Mapping agent interactions and workflows
• Sharing diagrams as PNG or offline HTML

Build working web pages, components, and application interfaces with a clear visual direction. The skill guides typography, color, spacing, motion, and responsive layouts that adapt to different screen sizes.

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

• Build a web page with a distinctive visual style
• Create reusable interface components
• Adapt an application interface for mobile screens

Design dashboards, admin panels, and app interfaces around users’ tasks and data. Establish screen layouts, colors, typography, and interaction states, then document reusable patterns to keep future interface work consistent.

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

• Designing dashboard information layouts
• Unifying admin panel colors and typography
• Defining settings page interaction states

Turn visual requests into detailed image prompts for social posts, blog headers, thumbnails, and illustrations. Receive generated images when available, or ready-to-use prompts, with variations in composition, color, or style.

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

• Create social graphics that match a brand
• Prepare blog header images and thumbnails
• Compare variations in composition, color, or style

Create logos, illustrations, product images, and other visuals from text, or edit and combine reference images. The skill guides generation through Hive, waiting for results, and delivering saved images, with costs charged to Hive credits.

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

• Create a logo or illustration from a written brief
• Change the background of a product photo
• Place an existing logo on a mockup

Review an implemented frontend through a visual audit organized around six pillars. Get a Markdown report with a score from 1 to 4 for each pillar, covering a specified phase or the last completed phase.

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

• Reviewing the visual quality of an implemented frontend
• Recording a visual review for a specific phase
• Keeping a scored UI assessment as a Markdown report

Explore interface ideas with disposable HTML mockups before implementation. Generate two or three variants to compare, get suggestions for what to explore next, and preserve design findings for future project work.

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

• Compare interface directions before implementation
• Build mockups quickly when the design direction is clear
• Find the next design idea to explore from existing sketches

Create UI-SPEC.md, a document defining interface design decisions for a frontend phase. The skill coordinates UI research and specification checks, using a chosen phase or automatically selecting the next unplanned one.

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

• Preparing UI specifications for a frontend phase
• Researching UI before documenting design decisions
• Checking a UI specification after drafting it

Review a design system for inconsistent names and hardcoded visual values, document component variants and accessibility behavior, or propose new interface patterns that follow existing rules. Produce structured audits, component references, and design proposals.

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

• Auditing component names and visual consistency
• Documenting component variants and states
• Recording keyboard and screen reader behavior

Turn a design into a developer handoff document covering layout, shared design settings, component options, interactions, and screen-size behavior. Include loading and error states, animation details, and accessibility notes to clarify implementation requirements.

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

• Preparing a design for developer handoff
• Documenting layout changes across screen sizes
• Specifying loading, empty, and error states

Review a Figma design, screenshot, or written description for usability, visual hierarchy, consistency, and accessibility. Receive specific findings, explanations, and prioritized improvements, with feedback tailored to the design stage and intended users.

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

• Reviewing an early screen design
• Checking navigation and onboarding usability
• Finding inconsistent colors, spacing, and typography

Write and review interface text, including button labels, error messages, empty screens, and onboarding instructions. Get recommended wording, alternatives, and explanations tailored to the user's situation, tone, and character limits.

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

• Choosing clear button labels
• Rewriting error messages with recovery steps
• Guiding users through empty screens

Create editable draw.io diagrams from descriptions, code, infrastructure settings, or database schemas. Update existing diagrams while preserving manual layout, check their structure and architecture rules, and export them to image or document formats for sharing.

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

• Turn a written description into an editable diagram
• Generate architecture diagrams from code or infrastructure settings
• Update a diagram while preserving manual layout