设计技能

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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.

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

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.

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

Strategic Customer Success leadership guidance for CS org design, customer segmentation and tiering (tech touch, low touch, high touch), success metrics and KPIs (NRR, GRR, NPS, CSAT, CES), playbook development, executive stakeholder management, CS technology stack strategy, value realization frameworks, and customer journey mapping. Use when building CS teams, defining customer segments, designing playbooks, measuring success outcomes, or implementing CS platforms.

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

Expert event marketing guidance for conferences, webinars, and field programs. Use when planning event strategy, creating booth presence, running webinars, producing virtual events, writing event promotion copy, preparing speakers, designing follow-up sequences, or measuring event ROI. Use for conference sponsorships, trade shows, user conferences, meetups, field marketing, and hybrid events.

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

Expert sales proposal and pricing presentation strategist. Use when writing proposals, executive summaries, ROI business cases, pricing presentations, SOWs (Statement of Work), RFP responses, or competitive positioning documents. Covers proposal structure, terms positioning, design formatting, follow-up strategy, and win-rate optimization.

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