mcpField
D
design-handoff

design-handoff

github.com/aj-geddes设计与 UI374445 次安装34 周前更新
代码仓库

关于 design-handoff

供设计与开发团队使用的设计交接指南，帮助整理可供实现的规范、资源和组件状态，并强调交接后的协作与迭代。

主要功能

  1. 01面向开发者的文档
  2. 02交接检查清单
  3. 03组件状态与响应式变体
  4. 04设计与开发协作
  5. 05实现审查与迭代

适用场景

  1. 01在开发开始前准备设计
  2. 02交接已完成的功能设计
  3. 03传达组件库更新
  4. 04协调设计系统变更

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill design-handoff

安装后在 Claude Code 中输入/design-handoff确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
design-dev-collaboration.md
developer-friendly-documentation.md
handoff-checklist.md
templates/
component-template.tsx

详细介绍

设计交接

目录

概述

设计交接连接设计与开发，确保开发者获得准确、高效地实现设计所需的全部信息。

适用场景

  • 开始开发之前
  • 设计中的功能完成时
  • 更新组件库时
  • 更改设计系统时
  • 迭代优化交接时

快速入门

最小可用示例：

Design Handoff Package:

Overview:
  - Feature description
  - User flows
  - Key interactions
  - Platform (web, iOS, Android)

Screens & Components:
  - All screen designs
  - Responsive variants (mobile, tablet, desktop)
  - All component states (default, hover, focus, disabled, error)
  - Dark mode variants (if applicable)

Specifications:
  - Typography (font, size, weight, line-height)
  - Spacing & layout (padding, margin, gaps)
  - Colors (hex values, opacity)
  - Shadows & elevations
  - Border radius
  - Animations & transitions

Interactions:
  - Click/tap behaviors
  - Hover states
// ... (see reference guides for full implementation)

参考指南

references/ 目录中的详细实现：

指南内容
便于开发者阅读的文档便于开发者阅读的文档
交接清单交接清单
设计与开发协作设计与开发协作

最佳实践

✅ 应该做
  • 编写全面的文档
  • 导出所有资源和规格说明
  • 记录每个组件的所有状态
  • 包含响应式变体
  • 说明设计决策
  • 提供便于开发者使用的规格说明
  • 使用共享的设计工具
  • 安排启动会议
  • 随时解答问题
  • 审查实现并进行迭代
❌ 不应该做
  • 指望开发者猜测
  • 将响应式设计交给运气
  • 跳过边缘情况的文档说明
  • 使用含糊不清的规格说明
  • 交接后就不再参与
  • 未通知就于开发期间更改设计
  • 提供图像而非矢量文件
  • 忽略技术限制
  • 忽略性能考量
  • 在交接中跳过无障碍设计

评论

支持 Markdown