设计技能

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

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

Search a codebase or UI for places that don't animate but should, and reject everything that shouldn't. Read-only; it proposes motion with exact values, it does not implement it. Use when the user asks "what could be animated here?" or wants to "make this feel more alive". For fixing existing animations, use improve-animations or review-animations instead.

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

Pick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more. Only runs when explicitly invoked; it does not trigger on its own.

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

This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.

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

Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.

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

Develop an independent visual language and turn the human-chosen direction into a production-ready graphic, brand, campaign, publication, web, or product system. Use when originality and differentiation matter enough to escape generic AI and Big Tech aesthetics. Guides a minimum-evidence start, ten isolated typography-led HTML design directions made only from type, color, and space, visual-first human judgement, explicit commitment, and concrete Round 2 production. Do not use for routine UI fixes, small components, or applying an existing design system.

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

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics. Based on Anthropic's Frontend Designer Skill

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

Expert UI/UX design guidance for unique, accessible interfaces. Use for visual decisions, colors, typography, layouts. Always ask before making design decisions. Use this skill when the user asks to build web components, pages, or applications.

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

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

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

Playbook for Aceternity UI, Refero MCP, Mobbin MCP, and Godly when building or polishing web UI — what each source is for and how agents should use it.

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

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

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

Route technical planning and review between Decisions Mermaid viewer, BuilderIO visual-plan/recap skills, and Open Design when the work needs richer artifacts.

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

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.

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

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

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

Use when designing or improving a module interface, choosing a seam, reducing shallow modules, making code easier to test, or reviewing architecture for locality, leverage, adapters, and deep-module design.

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

Use when preparing hardest high-leverage work for a stronger or scarce model, building a ranked execution queue, asking for fable prep, frontier prep, round-collapse, wave queue, or model-upgrade readiness across code, design, copy, marketing, or architecture work.

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

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

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

Run before implementing UI — research real product patterns (Refero/Mobbin MCP), pick a design direction, and output tokens or a short DESIGN.md before writing code.

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

Use Open Design for agent-native UI prototypes, decks, motion, and hand-drawn diagrams — complementary to Decisions Mermaid viewer for technical charts.

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

Pick a design aesthetic from awesome-design-skills — bundled minimal/professional/enterprise/shadcn/bento; full catalog in reference for on-demand load.

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

Design, implement, and review XState v5 state machines and @xstate/react integrations in TypeScript. Use when modeling finite workflows, async actors, statecharts, guarded transitions, delayed transitions, actor systems, or machine-driven React behavior.

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

Use when working with Protocol Buffer (.proto) files, buf.yaml, buf.gen.yaml, or buf.lock. Covers proto design, buf CLI, gRPC/Connect services, protovalidate constraints, schema evolution, and troubleshooting lint/breaking errors.

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

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

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

Use for prioritization, or when there are more tasks than capacity: "what should we do first?", "rank this backlog", "cut scope for the MVP", "RICE score these". Picks a method (RICE, ICE, MoSCoW, impact-effort), scores items and sets a cut line. Skip for choosing between two designs.

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