提示词概览
给你的提示
尽早统一命名,确保设计与工程语言一致。| 记录数据捕获时的验证规则,加快后期 QA。| 优先使用变体,减少设计系统膨胀。| 捕捉可访问性状态,如聚焦顺序和 ARIA 角色提示。
来自运营团队NexusAi Technology解决的问题
意外组件晚期出现导致进度延误。此工具提前清点元素及其状态和数据需求。
状态覆盖矩阵
确保每个交互元素定义所有状态下的行为。
数据契约
列出字段、类型和验证,确保与工程对齐。
变体规范
通过合理分组变体减少设计系统膨胀。
可访问性钩子
提示聚焦顺序和 ARIA 提示,提升无障碍体验。
AI 提示词说明
角色定位:设计系统负责人,负责从粗略的 UI 草图中提取组件清单,并映射状态和数据契约。
任务重要性:完善的组件清单能防止重复开发,明确工程需求,保持设计稿一致性。
重要边界:
- 区分表现型组件与数据驱动组件。
- 捕捉所有状态(默认、悬停、聚焦、激活、禁用、加载、空状态、错误)。
- 定义每个数据绑定组件的最小数据字段和验证规则。
用户输入:
- 草图描述及草图中的任何标签。
- 已知数据源或 API(如有)。
- 可访问性和本地化限制。
目标:
1)列出组件并分类(原子、分子、有机体)。
2)定义所有交互状态和状态转换。
3)映射数据字段、验证和错误信息。
4)标记可复用模式及命名建议。
分析流程:
1)解析草图为候选组件。
2)统一命名规范。
3)将相似元素归为单一可复用组件并设变体。
4)记录交互元素的状态机。
5)识别依赖(认证、权限、网络)。
输出格式要求:
- 概要(目的、范围、假设)
- 组件表(名称、类型、状态、数据、验证、复用性、备注)
- 关键组件的状态图(文本形式)
- 风险与待解决问题
质量控制:
- 每个交互元素至少考虑聚焦和禁用状态。
- 验证规则具体且可测试。
- 数据字段包含类型及必填/选填信息。
核查清单:
- 组件名称唯一且一致。
- 无应为变体的重复组件。
- 所有错误状态包含文案指导。
最终指令:输出整洁、易浏览的清单,便于设计和工程交接。
预期结果
概要:入职及项目列表界面清单;假设使用邮箱优先认证。 组件表(节选): - TextInput.Email | 原子 | 状态:默认/聚焦/错误 | 数据:email:string | 验证:符合 RFC 5322 | 复用性:高 | 备注:字段下方内联错误提示 - Button.Primary | 原子 | 状态:默认/加载中/禁用 | 数据:无 | 验证:无 | 复用性:高 | 备注:左侧进度指示器 - ProjectCard | 分子 | 状态:默认/悬停/空状态 | 数据:name:string, tasks:int | 验证:名称不超过 60 字符 | 复用性:中 | 备注:徽章显示任务数量 风险与待解决问题: - 错误文案语气未定义。 - 需补充密码规则及本地化策略。
实施流程
在 Claude 中提取清单
打开 Claude,粘贴包含草图描述和限制条件的提示。请求生成组件表、状态和数据字段。预期得到结构化且命名规范的清单。
9 min在 ChatGPT 中交叉验证
将 Claude 输出粘贴到 ChatGPT,询问可访问性、验证和错误文案的缺漏。预期得到更完善的状态列表和具体验证规则。
6 min批准基线
让 ChatGPT 生成带唯一 ID 和变体命名的最终表格,供团队在设计稿开始前审阅。
5 min
