设计技能

Write clear design rationale connecting decisions to user needs, business goals, and principles.

中文简介正在准备中。当前显示原文说明。

Define a set of actionable design principles that guide decision-making and resolve trade-offs.

中文简介正在准备中。当前显示原文说明。

Advocate for design quality, scope, and time with cross-functional partners and leadership using evidence and shared goals.

中文简介正在准备中。当前显示原文说明。

Critique a screen's typography — scale usage, readability, consistency, and token compliance.

中文简介正在准备中。当前显示原文说明。

Conduct a structured competitive analysis comparing UX patterns, features, strengths, and gaps across rival products.

中文简介正在准备中。当前显示原文说明。

You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.

中文简介正在准备中。当前显示原文说明。

Write a comprehensive design brief that defines the problem space, constraints, audience, and success criteria.

中文简介正在准备中。当前显示原文说明。

Communicate design's contribution to business and user outcomes in terms that resonate with stakeholders.

中文简介正在准备中。当前显示原文说明。

Facilitate structured design critiques with clear feedback frameworks and actionable outcomes.

中文简介正在准备中。当前显示原文说明。

Design effective dark mode interfaces with proper color adaptation, contrast, and elevation.

中文简介正在准备中。当前显示原文说明。

Balance visual design with ATS compatibility for creative roles

中文简介正在准备中。当前显示原文说明。

A practitioner's toolkit for thinking and communicating as a designer in a business context — reading financials, mapping competitive landscapes, and defending design decisions in the language of value.

中文简介正在准备中。当前显示原文说明。

Analyze images, websites, and Figma files to extract their design and generate a `design.md` with token system, component inventory, and reconstruction notes. Use this skill whenever the user wants to understand, document, replicate, or audit the design of something visual: a screenshot, a URL, a Figma link, a Pinterest reference, a mockup, a competitor's site, a component, a dashboard, a landing page. Also when they ask 'extract the design system from X', 'document the style of Y', 'analyze this visually', 'convert this image into tokens', 'help me replicate this design', 'what palette does this site use', 'how is this built'. Also for single elements: 'copy this navbar', 'recreate this illustration', 'give me a prompt to regenerate this graphic' — element mode outputs a focused element.md, with token-grounded image-model prompts when the element is visual art. If the user brings any visual source and wants to understand it at a design level — this skill should activate.

中文简介正在准备中。当前显示原文说明。

Apply animation principles to UI motion for purposeful, polished interactions.

中文简介正在准备中。当前显示原文说明。

Use when asked about harness9 architecture, module design, or how components interact — explains the system design

中文简介正在准备中。当前显示原文说明。

Generates paste-ready Power Apps Canvas App YAML. Invoke when the user wants to replicate a UI mockup, improve an existing Canvas app screen, or build a new screen from a text description. Also invoke when the user asks to "improve", "redesign", or "generate YAML" for a Canvas app screen.

中文简介正在准备中。当前显示原文说明。

TRIGGER when: user asks to draw, illustrate, or visualize any process, structure, or concept — "画个流程图", "draw an architecture diagram", "帮我画个对比图", "visualize this process", "make a diagram for this doc", or mentions 流程图/架构图/示意图/对比图/时序图/泳道图/时间线. Also trigger when user provides a document/article and asks for illustrations or diagrams. DO NOT trigger for: chart/plot requests (bar charts, line graphs — those need a charting library, not draw.io), or artistic image requests (logos, mascots, drawings of objects/people — those need an image tool).

中文简介正在准备中。当前显示原文说明。

Migrates Vendure Admin UI extensions (legacy Angular-based) to the new React Dashboard.

中文简介正在准备中。当前显示原文说明。

Use when assessing the architectural health of a codebase — before a major refactor, when onboarding to an unfamiliar repo, after rapid growth, when planning a redesign, or to surface structural strengths and risks before they become expensive. Not for fixing what it finds, and not for reviewing a branch diff.

中文简介正在准备中。当前显示原文说明。

Use when verifying that requirements/specs/PRDs and their implementation plans match — before starting work, after a spec or plan update, or when suspecting coverage gaps, scope creep, or design drift between intent and action documents. Needs both documents; not for checking code against a spec.

中文简介正在准备中。当前显示原文说明。

Decision guide for antd 6.x, Ant Design Pro 5/ProComponents, Ant Design X v2, and the offline `@ant-design/cli`. Use for component selection, theming/tokens, SSR, a11y, performance, routing/access/CRUD, AI/chat UI patterns, local API lookup, debugging, migration, and usage analysis.

中文简介正在准备中。当前显示原文说明。

Use when the user's task involves Ant Design (antd) — writing antd components, debugging antd issues, querying antd APIs/props/tokens/demos, migrating between antd versions, or analyzing antd usage in a project. Triggers on antd-related code, imports from 'antd', or explicit antd questions.

中文简介正在准备中。当前显示原文说明。

Extract a design system from a screenshot (PNG/JPG/WEBP) or a live URL and produce a schema-compliant `design.v1.json` file plus a ready-to-use agent prompt for applying the design to any website/app. When run inside the sleek-ui repository, offers to add the extracted design to the public catalog as a PR — updating `public/designs/`, `src/data/designs/`, `src/data/designs.ts`, and generating a preview. Use when users ask to "extract a design from this screenshot", "clone this site's design", "reverse-engineer the design tokens", "reskin my app to look like {site}", "generate a sleek-ui design from this URL", or provide an image/URL and want a reusable design system.

中文简介正在准备中。当前显示原文说明。

Open Analytics' design language, extracted from the shipped product: an ink-derived neutral system, squircle surface anatomy, one small spring vocabulary, pixel-matched skeletons, and a plain-spoken copy voice, with type-checked component recipes. Use this whenever you build or restyle a dashboard, SaaS app, analytics UI, settings screen, onboarding flow, or marketing/landing page that should feel calm, dense and native, and whenever the user mentions Open Analytics' look, 'clean SaaS design', cards, dropdowns, tab bars, empty states, skeletons, or UI animation quality, even if they never say the words 'design system'.

中文简介正在准备中。当前显示原文说明。