设计技能

Cards, drawers, carousels and other patterns borrowed from the physical world. Use when designing layout patterns, gestures or navigation paradigms.

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

Few semantic colours, each meaning one thing, and errors with a way forward. Use when designing status indicators, validation, alerts or error states.

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

Match information density to platform and user type. Use when designing data tables, dashboards or toolbars, or adapting a desktop product for mobile.

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

Mobile, tablet and desktop are different paradigms, not one layout scaled. Use when designing responsive layouts or deciding what each breakpoint shows.

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

Currency, language, region and unit selectors live in a low-profile header or footer spot. Use when designing locale switchers or product-wide preference controls.

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

Toasts, inline errors, banners and recovery paths. Use when designing error states, success confirmations, async feedback or in-place editing.

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

Small purposeful animations — toggles, animated icons, success moments. Use when designing interactive feedback, success states or loaders.

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

Best practices for designing CosmWasm smart contract APIs. Use when defining message types, designing execute/query interfaces, or optimizing API ergonomics.

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

Build, maintain, and audit design systems — tokens, component libraries, style guides, and cross-project consistency. Use when asked to create a design system, define tokens, audit component consistency, generate a style guide, or sync design tokens with code.

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

Review UI designs and implementations for accessibility, consistency, usability, and visual quality. Use when asked to review a design, audit accessibility, check UI consistency, compare implementation against mockups, or evaluate a user interface.

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

Reverse-engineer a design system from a live website (public URL or localhost). Extracts colors, typography, spacing, shadows, radii, breakpoints, and component patterns using a headed Playwright browser. Captures screenshots of pages, components, and interactive states at real device resolutions. Produces structured design tokens and optionally seeds a Penpot project. **Triggers — use this skill when:** - User says "extract design system from [url]" - User asks to "reverse-engineer the styles from [site]" - User says "build a design system based on [website]" - User asks to "pull the design tokens from [url]" - User says "analyze the design of [site]" - User asks to "import styles from [website] into Penpot" - User points at a URL and asks about its colors, fonts, spacing, or components

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

3D Morph PPT — extends morph-ppt with GLB model insertion, cinematographic camera, model-content layout, and enriched visual design system.

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

Capture the before/after rendered PNGs a UI-affecting PR in this repository needs as visual evidence, including bringing an Android SDK up in a fresh sandbox. Use when a change touches a Compose @Preview, a catalog, the VS Code webview, an overlay, a theme, an icon or a fixture, and the PR body needs real pixels.

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

Audit and rewrite frontend UI to remove generic AI design patterns ("AI slop"), both the first-order defaults (purple gradients, Inter, a centered hero over three cards, untouched shadcn) and the second-order "tasteful AI" ones (cream with terracotta, near-black with acid green, all-caps mono chrome, one accented headline word, decorative 01/02/03). Use when asked to "de-slop a UI", "make a design look less AI-generated", "audit a page or component for AI design tells", "fix Claude/Codex-generated frontend that looks generic", or keep a multi-page site on one design system. Covers HTML/CSS and React/Tailwind/shadcn. Has a detection-only mode and a zero-dependency scanner (scripts/detect.mjs) for the code-certain tells.

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

Fetch up-to-date documentation for any library, framework, API, or service into context. Use when the user wants to look up API references, check function signatures or required fields, find feature-specific docs, or verify how an external tool actually works. Triggers for queries about third-party libraries like Stripe, SQLAlchemy, Tailwind, FastAPI, shadcn, Drizzle, Hono, Better Auth — any time the answer lives in official docs rather than in the project codebase. Use this instead of guessing from trained knowledge, which is stale.

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

Builds distinctive, production-grade UIs that avoid generic AI aesthetics. Use whenever the user wants to build, restyle, or give visual direction to any interface — pages, dashboards, landing pages, components, onboarding flows, mobile screens, or design systems — even without an explicit 'design' request. Also triggers for: picking an aesthetic direction, improving the look of a dull/generic existing page, adding visual personality, or choosing colors/typography. Includes a bundled design intelligence database for concrete guidance across web (React, Next.js, Vue, Tailwind) and mobile (React Native, Flutter, SwiftUI).

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

Design effective excitation signals (step tests) for system identification and parameter estimation in control systems.

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

Linearizing nonlinear dynamics around operating points for control design.

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

Adding integral action to MPC for offset-free tension tracking.

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

Analyze incoming user requests to detect intent, request type (design/validate/debug/document), complexity level, and identify vague requirements or buzzwords that need clarification. Use when cto-orchestrator receives new requests that need classification before routing to specialist agents.

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

Guidance for scaling systems from startup to enterprise scale. Use when planning for growth, diagnosing bottlenecks, or designing systems that need to handle 10x-1000x current load.

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

Use when a screen design needs variants - how many, one document per variant, what makes two variants genuinely different, recommending one, how the human's choice is read, and narrowing to the chosen one in revision

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

Use when you write any words a user reads in a mockup or a hand-off - content language and voice, buttons, labels, errors, empty states, confirmations, numbers and dates, and the longest-string check

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

Use when you derive, change or extend a design system - where tokens live per stack, the DTCG token tree, role-based names for both themes, base vs layer vs drift, the DESIGN.md section order, the inventory format, the contrast check and the lint every proposal returns

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