设计规范文档怎么写：设计系统组件文档提示词（用途、变体、状态、用法规范、Do / Don't、无障碍与开发说明）
团队在建设计系统（Design System）或组件库、需要为按钮、输入框、弹窗、卡片等组件写使用文档时用：生成结构统一的组件文档，让设计师知道什么时候用、怎么用，让开发知道有哪些属性和状态，减少各页面「各做各的」。
通用大模型 对话模型通用
你是一名设计系统负责人，同时懂前端。你知道组件文档最重要的部分不是「它长什么样」，而是「什么时候用它、什么时候不要用它」。 组件名称：[组件名称] 组件的作用与使用场景：[组件作用] 现有的变体与样式（尺寸、类型、颜色层级）：[现有变体] 产品中已经出现的不一致用法（如有）：[不一致用法] 技术栈（如 React / Vue / 小程序）与已有的组件属性：[技术栈] 品牌与无障碍要求：[品牌与无障碍] 请写出组件文档： 1. 概述：一句话说明组件是什么、解决什么问题。 2. 何时使用 / 何时不用：各 3–5 条，并指出应该改用哪个组件（如「需要用户确认危险操作时使用对话框，不要用 Toast」）。 3. 结构（Anatomy）：组件由哪些部分组成，各部分是否必需。 4. 变体（Variants）：每种类型、尺寸的用途与选择规则（如一个页面最多一个主按钮）。 5. 状态（States）：默认、悬停、按下、聚焦、禁用、加载中、错误等，每个状态的表现与触发条件。 6. 用法规范：内容与文案规则（按钮文字用动词、长度限制）、布局与间距、与其他组件的组合方式。 7. Do / Don't：至少 4 组正反例，用文字描述。 8. 无障碍：键盘操作、焦点样式、读屏标签、对比度要求、点击区域大小。 9. 开发说明：属性（Props）表——属性名 | 类型 | 默认值 | 说明；事件；与设计稿变体的对应关系。 10. 变更记录模板。 约束：属性与技术细节以我提供的为准，不确定的标「待开发确认」；规范要具体到能判断对错，不写「保持美观」这类空话。
高亮处换成你自己的内容：[组件名称]、[组件作用]、[现有变体]、[不一致用法]、[技术栈]、[品牌与无障碍]
ChatGPT Plus 充值
已被复制 0 次
使用说明
怎么填变量：[不一致用法] 很有价值，比如「有的页面危险操作用红色按钮，有的用灰色」，文档会针对这些问题写出明确规则。[技术栈] 和 [现有变体] 写清楚，开发说明部分才会贴近实际代码。
常见坑：
- 文档只有组件截图和颜色值，没有「何时使用」，结果大家还是凭感觉用；
- 状态写得不全，尤其是加载中和禁用状态，开发只能自己发挥；
- 设计稿里的变体名称和代码里的属性名对不上，交接时互相猜。
迭代追问：「按同样的结构为输入框组件写一份文档」「检查我们现有的 10 个页面，找出不符合按钮规范的地方」「把这份文档整理成适合放进 Storybook 的说明」。
示例输出
示例，仅供参考（组件：按钮 Button）
何时不用
- 需要跳转到其他页面且不是主要操作时，用文字链接而不是按钮
- 一组互斥选项的切换，用分段控件（Segmented Control）
变体
| 类型 | 用途 | 规则 |
|---|---|---|
| 主按钮 | 页面最主要的操作 | 每个视图最多 1 个 |
| 次按钮 | 次要操作 | 可与主按钮并列，放在左侧 |
| 危险按钮 | 删除等不可逆操作 | 必须配合二次确认 |
Do / Don't：Do——「保存草稿」；Don't——「确定」「OK」（看不出点了会发生什么）
同款作品
用这条提示词做出来的作品；原作者会因此获得积分
还没有同款，来做第一个。
0 条评论
还没有评论，来抢沙发～