设计技能

Use when designing or building any screen, section or component that a user sees — visual hierarchy, typography, colour, spacing, states, forms and how to avoid the generic AI look.

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

Use on every UI change - semantic HTML, labels for controls, keyboard-navigable dialogs/menus, visible focus, and never color as the only signal

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

Use when adding or reusing Flutter UI - organize widgets as atoms, molecules, and organisms in a shared library and never hand-roll a component that already exists

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

Design efficient early signals to validate assumptions. Find the fastest way to learn if you're right.

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

Design audience-specific framing, drafts, and communication sequence for stakeholder updates.

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

Formulate clear, testable hypotheses for product experiments. Use when designing experiments to validate solutions.

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

Design implementation-ready frontend solutions with UX intent, component structure, responsive behavior, accessibility, and handoff criteria.

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

Design robust experiments to test product hypotheses. Define metrics, sample size, and success criteria.

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

Turn ideas into designs through collaborative dialogue. Use before any creative work - features, components, or modifications.

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

Design backend architecture for implementation with API contracts, data model changes, service boundaries, security, and observability.

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

Request a design review for all commits on the current branch and present the results

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

Request a design review for a commit and present the results

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

Inspect, stream, and explicitly adjust live Android UI tweak values or invoke app-owned actions through Snap-O. Use when a request mentions Snap-O Tweaks, tweak-enabled Android apps, runtime UI parameters, Compose tweak or action controls, tweak discovery, previously adjusted or currently inactive tweaks, applying all user-made tweak changes, typed values, defaults or resets, tweak batches, explicitly registered actions, the Tweaks REST/SSE API, or selecting between CLI, macOS tool, in-app overlay, and custom tweak interfaces.

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

Guide for the Kimix web frontend (src/app/) — vanilla TypeScript + Vite, SSE-based chat UI mirroring sse_cli.py. Use when modifying the frontend, adding new UI features, changing the API client, or understanding the message rendering pipeline.

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

Validate DESIGN.md files against the official Google specification using the `@google/design.md` CLI linter. Works with local files. Use when the user wants to lint a DESIGN.md, check spec compliance, find broken token references, verify WCAG contrast ratios, diff two versions, export tokens to Tailwind or DTCG format, or audit a design system file for structural correctness. Trigger on mentions of "validate DESIGN.md", "lint DESIGN.md", "check my design.md", "design.md spec compliance", "WCAG contrast check", "broken token references", "design token validation", "export design tokens", "diff design systems", "design.md audit", "@google/design.md", "npx design.md lint", "design system validation", "frontmatter tokens", or any request to verify a DESIGN.md file.

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

Create comprehensive design systems, brand identities, and UI component libraries. Use when the user says "create design system", "build brand identity", "design UI components", "generate design tokens", "create figma specs", "review my design", "analyze design trends", "audit accessibility", "convert design to code", or "create presentation deck". Covers 10 specialized roles from system architecture to executive presentations.

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

Revenue-Centric Design (RCD) — evidence-backed principles for making a SaaS or startup product convert, retain, and monetize. Use when the user works on a landing page or CRO ("my page isn't converting"), onboarding/activation ("users sign up but don't stick"), churn/retention ("customers keep canceling"), pricing/monetization ("how should I price this"), checkout/forms ("dropdowns kill conversion", "annotated checkout"), dashboards/data viz ("cognitive load", "KPI shortlists"), positioning/ICP/go-to-market, feature scope, A/B-test rigor, or AI-era differentiation — or asks for the behavioral-science mechanism behind a design choice. Also use when another skill needs the principle or evidence behind a conversion/retention/pricing/checkout move. Never apply to gambling, betting, or casino products.

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

Orchestrate a phased WinForms-to-Avalonia migration: behavior contracts, UI-independent application logic, platform adapters, MVVM shell, parity/cutover, evolution, and hardening. Use when the request explicitly involves moving a WinForms or .NET Framework desktop UI to Avalonia, or continuing that migration. Do not trigger for unrelated migrations, rewrites, ViewModel refactors, settings work, or command-line work without WinForms-to-Avalonia context. Load this orchestrator before one matching phase skill.

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

Phase B of a WinForms-to-Avalonia migration: extract UI-independent application behavior, state rules, use cases, and boundary contracts with TDD and no WinForms/Avalonia references. Use only when an explicit migration still has business behavior in Forms or UI helpers, or when the orchestrator routes here. Do not build Avalonia XAML in this phase.

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

Phase D of a WinForms-to-Avalonia migration: build the Avalonia UI shell with composition, MVVM state and commands, responsive XAML, accessibility, localization boundaries, and behavior-focused unit/Headless tests. Use only when an explicit migration is ready to port Forms or when the orchestrator routes here. Prefer this over control-by-control ports.

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

Propose a new change with all artifacts generated in one step. Use when the user wants to quickly describe what they want to build and get a complete proposal with design, specs, and tasks ready for implementation.

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

UI/UX design intelligence. 67 styles, 96 palettes, 57 font pairings, 25 charts, 13 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.

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

High-end visual design like a premium agency. Defines exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks common defaults that make AI designs look cheap or generic. Based on taste-skill by Leon Lin & blueemi, improved by shokunin.

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

Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows. Based on taste-skill by Leon Lin & blueemi, improved by shokunin.

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