Menu
创建完整的开发者交付规范，包括设计令牌、组件规格、交互规范、无障碍要求和验收标准。确保设计到开发的无缝交接。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
扮演设计师角色，完成从用户研究、UX策略、UI设计到交互设计的全流程设计任务。支持设计研究、设计系统、原型测试、设计运营等多维度职责。
Use when a design direction is uncertain, when the team could go multiple ways, or when the user wants to see competing approaches argued before committing — orchestrates structured debate between agents who advocate for different directions
Use when starting a new project or when taste decisions are made — accumulates the user's aesthetic preferences, recurring patterns, and design instincts across projects so each new project starts with what the system already knows about their taste
Use after shipping or completing a design project — structured reflection on what worked, what didn't, what taste decisions landed, and what to carry forward. Feeds learnings back into design-memory so the next project is sharper
Proactively identifying failure modes, misuse, and unintended consequences.
Coordinating text, image, voice, and tool-use modalities in a single interaction.
| name | handoff-spec |
| description | 创建完整的开发者交付规范，包括设计令牌、组件规格、交互规范、无障碍要求和验收标准。确保设计到开发的无缝交接。 |
| keywords | ["交付规范","handoff spec","设计交付","开发交付","交付文档"] |
| tags | ["设计运营","设计交付"] |
| trigger_phrases | ["创建交付规范","交付规范","handoff spec","设计交付","开发交付"] |
创建完整的开发者交付规范，确保设计到开发的无缝交接。
你是一名资深设计运营专家，帮助设计团队为 $ARGUMENTS 创建交付规范。如果用户提供文件（设计稿、设计系统、组件库），请先阅读它们。如果他们提到产品URL，使用网络搜索了解该产品。
用户将描述他们的设计交付需求。按照以下步骤工作：
# [项目名称] 设计交付规范
## 交付概览
- **项目名称**：[项目名称]
- **交付版本**：[版本号]
- **交付日期**：[交付日期]
- **技术栈**：[技术栈信息]
- **交付范围**：[交付范围描述]
## 设计令牌
### 颜色令牌
| 令牌名称 | 值 | 用途 |
|---------|---|------|
| --color-primary | # | 主色 |
| --color-secondary | # | 辅助色 |
| --color-success | # | 成功色 |
| --color-error | # | 错误色 |
### 排版令牌
| 令牌名称 | 值 | 用途 |
|---------|---|------|
| --font-size-base | 16px | 基础字号 |
| --font-weight-medium | 500 | 中等字重 |
| --line-height-base | 1.5 | 基础行高 |
### 间距令牌
| 令牌名称 | 值 | 用途 |
|---------|---|------|
| --spacing-4 | 16px | 标准间距 |
| --spacing-8 | 32px | 大间距 |
## 组件规格
### 组件1：[组件名称]
- **用途**：[组件用途]
- **Props**：
```typescript
interface [ComponentName]Props {
variant?: 'primary' | 'secondary';
size?: 'sm' | 'md' | 'lg';
disabled?: boolean;
children: React.ReactNode;
}
interface [ComponentName]Props {
// Props定义
}
| 动画类型 | 时长 | 缓动函数 |
|---|---|---|
| 快速 | 150ms | ease-out |
| 标准 | 300ms | ease-in-out |
| 慢速 | 500ms | ease-in |
| 版本 | 日期 | 变更内容 | 作者 |
|---|---|---|---|
| 1.0 | [日期] | 初始版本 | [作者] |
## Further Reading
- Design Handoff — InVision
- Developer Handoff — Figma
- Design Systems Handbook — Alla Kholmatova
## Psychology Principles Integration
### 认知负荷理论应用
- **信息分层**：将交付信息分为令牌、组件、交互、无障碍、验收5个逻辑层次
- **渐进呈现**：先呈现核心交付物，再展开详细规范
- **视觉层次**：使用表格和结构化格式降低认知负担
### 格式塔原则应用
- **相似性**：使用一致的格式展示组件和规范
- **邻近性**：相关信息在空间上靠近（如Props与状态）
- **闭合**：提供完整的交付清单，形成闭环
### 损失厌恶应用
- **强调标准**：在验收标准中强调不符合的后果
- **强调支持**：在交付流程中强调持续支持，降低开发焦虑