デザインのスキル

把设计交接给前端时使用。适用于设计完成后的交付、设计审查通过后的执行准备。优先使用 Figma DevMode 实践 + 交接清单 + 待确认问题。

日本語の概要は準備中です。原文の説明を表示しています。

建立设计令牌系统时使用。适用于设计系统建立、跨平台一致性、设计代码同步。优先使用 W3C DTCG 2025.10 标准 + 三层 Token + JSON 输出。

日本語の概要は準備中です。原文の説明を表示しています。

设计企业级 UI 模式时使用。适用于后台管理、SaaS 控制台、表格表单密集页面。优先使用表单/表格/导航/危险操作的成熟模式。

日本語の概要は準備中です。原文の説明を表示しています。

定义 UI 组件的所有状态时使用。适用于按钮、表单、列表、对话框等组件的状态完整覆盖。优先使用 8 种核心状态（默认/悬停/聚焦/禁用/加载/成功/错误/空/权限）。

日本語の概要は準備中です。原文の説明を表示しています。

对标参考成熟设计系统时使用。适用于复杂后台、SaaS、开发者工具的设计。优先参考 Material/HIG/Carbon/Ant Design/shadcn/Radix 等成熟系统，按本项目约束适配。

日本語の概要は準備中です。原文の説明を表示しています。

设计移动 App 或多平台产品时使用。适用于 iOS/Android/桌面应用的平台原则适配。优先使用 Apple HIG 四原则 + Material Design 3 原则 + 平台规范。

日本語の概要は準備中です。原文の説明を表示しています。

设计跨设备适配时使用。适用于桌面/平板/移动端的布局、断点策略、内容优先级。优先使用 Mobile-First + 5 个标准断点 + 内容优先级降级策略。

日本語の概要は準備中です。原文の説明を表示しています。

把界面组件按层级组织时使用。适用于设计系统建立、组件库设计、可复用性提升。优先使用 Brad Frost 的 Atomic Design 五层模型（原子→分子→有机体→模板→页面）。

日本語の概要は準備中です。原文の説明を表示しています。

选择和实现样式方案时使用。覆盖 Tailwind / CSS Modules / CSS-in-JS（styled-components / Emotion）/ vanilla-extract / UnoCSS / Sass。融合设计 Token + 主题 + 暗黑模式 + 响应式。

日本語の概要は準備中です。原文の説明を表示しています。

设计用户从认知到留存的完整旅程时使用。适用于新产品/新功能的全流程设计、识别痛点和机会、给 UI/UX 提供设计输入。优先使用 NNGroup 的用户旅程地图方法。

日本語の概要は準備中です。原文の説明を表示しています。

设计组件结构、拆分粒度和复用策略时使用。覆盖 React / Vue / Angular / Svelte。融合 Atomic Design + Container/Presentation + Compound Components + Headless 模式。

日本語の概要は準備中です。原文の説明を表示しています。

实现可访问性（无障碍）时使用。覆盖 WCAG 2.2 AA / ARIA / 键盘导航 / 屏幕阅读器 / 颜色对比 / 焦点管理。融合 React Aria / Radix UI / Headless UI 实践 + axe-core 自动化测试。

日本語の概要は準備中です。原文の説明を表示しています。

设计指标体系时使用。适用于北极星指标、AARRR 海盗模型、漏斗指标、GSM（Goals-Signals-Metrics）框架。帮助团队从业务目标出发，建立可量化、可追踪、可行动的指标体系。

日本語の概要は準備中です。原文の説明を表示しています。

微服务架构设计时使用。覆盖服务拆分、通信模式、网关、服务发现、配置中心、分布式事务。

日本語の概要は準備中です。原文の説明を表示しています。

设计具体 API 端点时使用。适用于资源建模后的下一步、列端点清单、HTTP 方法和状态码选择。优先使用 RFC 7231 HTTP 语义 + GitHub REST 命名规范。

日本語の概要は準備中です。原文の説明を表示しています。

设计数据库实体、表结构、字段类型和约束时使用。适用于新业务建模、API 契约落库、已有表结构重构和 ER 设计。融合 DDD 实体识别 + 关系范式 + 业务约束 + 演进策略。

日本語の概要は準備中です。原文の説明を表示しています。

Create polished single-file HTML artifacts for plans, reports, explainers, code reviews, lightweight dashboards, prototypes, and one-off editing tools. Use when the user asks for a standalone HTML file, single HTML, HTML artifact, interactive report, shareable local artifact, Alpine.js artifact, custom CSS artifact, copy/export UI, or a browser-openable deliverable instead of Markdown.

日本語の概要は準備中です。原文の説明を表示しています。

Helps implement coss UI components correctly. Use when building UIs with coss primitives (buttons, dialogs, selects, forms, menus, tabs, inputs, toasts, etc.), migrating from shadcn/Radix to coss/Base UI, composing trigger-based overlays, or troubleshooting coss component behavior. Covers imports, accessibility, Tailwind styling, and common pitfalls.

日本語の概要は準備中です。原文の説明を表示しています。

Index of all COSS UI particle examples. Use when implementing UI features to find copy-paste-ready component patterns built on coss primitives. Each particle has a description and a JSON URL for easy installation.

日本語の概要は準備中です。原文の説明を表示しています。

PencilPlaybook is the UI Skills / Taste-Skill for Pencil.dev + Claude Code — a design playbook that gives Claude real perceptual psychology and senior-level guardrails so it stops producing averaged-out AI slop.

日本語の概要は準備中です。原文の説明を表示しています。

Expert support operations guidance for customer service excellence. Use when designing ticket management systems, creating SLA policies, building support tier structures (L1/L2/L3), optimizing knowledge bases, defining severity levels and escalation procedures, implementing support metrics (CSAT, FRT, TTR, FCR), configuring support tool stacks, or building support-to-CS feedback loops. Covers Zendesk, Intercom, Freshdesk, and help desk best practices.

日本語の概要は準備中です。原文の説明を表示しています。

Expert customer lifecycle marketing guidance for retention, expansion, and advocacy. Use when designing onboarding programs, creating upsell strategies, preventing churn, building referral programs, or writing customer success content. Use for NPS programs, win-back campaigns, customer segmentation, and lifecycle email sequences.

日本語の概要は準備中です。原文の説明を表示しています。

Expert growth product management guidance for SaaS applications. Use when designing growth loops, optimizing activation and onboarding, building retention systems, creating referral mechanics, running growth experiments, defining north star metrics, or implementing PLG strategies. Covers the full growth lifecycle from acquisition to monetization.

日本語の概要は準備中です。原文の説明を表示しています。

Advanced motion designer with decades of After Effects and motion graphics experience, specialized in creating engaging video specifications for Remotion. Use when creating video specs, planning motion graphics, designing animations, or when asked to "create a video", "design motion graphics", "plan video content", or "spec out a video". Produces detailed scene-by-scene specifications with timing, audio, sound effects, and animation descriptions.

日本語の概要は準備中です。原文の説明を表示しています。