设计技能

Build beautiful, responsive, accessible UIs using React, Tailwind CSS, Framer Motion, and the Vercel Web Interface Guidelines.

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

Provides advanced UI/UX design intelligence for portfolio and app work, including design system selection, palette and typography guidance, and implementation checks.

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

Design and implement webhooks for event-driven architecture.

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

Build native iOS apps with SwiftUI, UIKit, SnapKit, Apple HIG, accessibility, and platform UI patterns.

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

Build or modify production UI components, layouts, client state, responsive behavior, accessibility, or UX inside an app when that frontend surface is the primary deliverable; do not trigger for rich campaign/media pages, backend integration, every user-facing text change, delegated browser QA, or review alone.

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

Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, defining type contracts between modules, or establishing boundaries between frontend and backend.

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

Android native Kotlin/Compose app development, Material 3 UI, accessibility, and Gradle builds.

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

Review a Go design spec before implementation begins - dispatch a subagent that checks a design doc for completeness, consistency, and idiomatic Go (simplicity, small consumer-defined interfaces, explicit wrapped errors, context propagation) plus Cobra/Viper conventions where applicable. Use when a user has a Go spec to review, asks "is this spec ready?", or is about to implement from a written design. Distilled from spf13/go-skills and adapted to this repo's conventions.

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

Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.

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

Design, validate, and plan a startup from scratch. Covers market research, competitive analysis, business model, brand identity, product definition, financial projections, and validation experiments. Trigger when the user has a startup idea to explore, wants to validate a business concept, needs a business plan or lean canvas, asks for market sizing or competitive landscape, wants brand positioning or go-to-market strategy, or says anything like "I have an idea for..." or "is this idea worth pursuing". Also handles resuming from a previous checkpoint.

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

Build investor-ready pitch scripts in multiple formats (10-min, 5-min, 2-min, 1-min elevator, investor email). Produces pitch narratives, Q&A preparation, pitch scoring rubric, and optional investor roleplay practice. Use when the user wants to create a pitch, prepare for investor meetings, craft a startup pitch, write a fundraising narrative, or practice their pitch. Triggers for "pitch deck", "investor pitch", "pitch my startup", "fundraising deck", "seed deck", "how to pitch", "investor meeting", "demo day", "prepare pitch", "pitch script", "elevator pitch for investors", "pitch practice", "practice my pitch", "investor roleplay", or any request to present a startup to investors, accelerators, or partners. Works standalone — no prior startup-design session needed, but leverages its output if available.

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

Standardizes UX states for data fetching flows (loading, error, empty, success) and complex multi-view UI patterns. Provides state machine approach recommendations, loading skeletons, error boundaries, and empty state components. Use when implementing "loading states", "error handling", "empty states", or "state machines".

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

UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks.

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

Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.

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

Creates modern CSS gradients using Tailwind CSS including linear, radial, conic, mesh gradients, animated gradients, glassmorphism, and gradient text effects. Use when users request "gradient background", "tailwind gradient", "modern gradient", "mesh gradient", or "animated gradient".

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

Designs robust function/tool calling schemas for LLMs with JSON schemas, validation strategies, typed interfaces, and example calls. Use when implementing "function calling", "tool use", "LLM tools", or "agent actions".

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

Produces comprehensive system architecture plans for features and products including component breakdown, data flow diagrams, system boundaries, API contracts, and scaling considerations. Use for "system design", "architecture planning", "feature design", or "technical specs".

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

Build multiple genuinely different versions of a UI piece you describe, rendered behind a visual picker so you can flip through them live and promote the one that feels right. Only runs when explicitly invoked; it does not trigger on its own.

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

Implements responsive design systems with mobile-first breakpoints, container queries, fluid typography, and adaptive layouts using Tailwind CSS. Use when users request "responsive design", "mobile-first", "breakpoints", "fluid typography", or "adaptive layout".

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

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.

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

Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.

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

Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.

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

Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned.

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

Generates Request for Comments documents for technical proposals including problem statement, solution design, alternatives, risks, and rollout plans. Use for "RFC", "technical proposals", "design docs", or "architecture proposals".

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