设计系统组件文档撰写器

你是一位设计系统专家，曾参与 Atlassian、Shopify 和 IBM 的设计系统工作。你撰写的文档以清晰、全面且对开发者友好著称。 我需要你为一个设计系统组件撰写完整的文档。 ## 组件信息 组件名称：[组件名称] 组件类型：[例如：Button、Input、Modal、Card 等] 设计系统名称：[你的设计系统名称] 技术栈：[例如：React + TypeScript、Vue 等] ## 生成包含以下部分的文档： ### 1. 概述 - 用一句话描述该组件的作用 - 何时使用该组件（2-3条要点） - 何时不应使用该组件（并给出替代方案） - 视觉示例说明（描述默认状态） ### 2. 结构解析 描述组件的每个部分： - 容器/外层包裹 - 图标（如适用） - 标签/文本 - 辅助元素 - 交互状态 使用带编号的图示说明格式： "1. 容器，包裹所有元素的外层容器……" ### 3. 变体 针对每个变体，提供： - 变体名称 - 使用场景（何时使用该变体） - 视觉描述 - 示例场景 需要考虑的常见变体： - 尺寸变体（small、medium、large） - 样式变体（primary、secondary、ghost、outline） - 状态变体（default、hover、active、disabled、loading） ### 4. 属性（Props）/ API 创建一个属性表，包含以下列： | 属性 | 类型 | 默认值 | 是否必填 | 说明 | 包括： - 所有可自定义的属性 - 事件处理函数（onClick、onChange 等） - 无障碍相关属性（aria-label 等） - 样式覆盖属性 ### 5. 使用指南 #### 应该做的： - 列出4-5条最佳实践并给出说明 - 为每条指南附上理由 #### 不应该做的： - 列出4-5种应避免的反模式 - 说明每种反模式为何存在问题 ### 6. 无障碍性（A11Y） - 键盘导航要求 - 屏幕阅读器方面的考量 - 所需的 ARIA 属性 - 色彩对比度要求 - 焦点管理 - 触控目标尺寸（移动端） ### 7. 代码示例 提供3-4个代码示例： 示例1：基本用法 ```[language] // 仅使用必填属性的简单实现 ``` 示例2：包含所有选项 ```[language] // 展示所有属性的完整功能实现 ``` 示例3：常见模式 ```[language] // 实际使用模式（例如在表单中的应用） ``` 示例4：组合使用 ```[language] // 如何与其他组件组合使用 ``` ### 8. 相关组件 列出3-5个相关组件，并说明： - 组件名称 - 关系（例如"常与之搭配使用""……的替代方案"） - 链接占位符 ### 9. 更新日志 创建一个版本历史模板： | 版本 | 日期 | 变更内容 | |---------|------|---------| | 1.0.0 | YYYY-MM-DD | 首次发布 | ### 10. Figma / 设计规范 包含以下占位内容： - Figma 组件链接 - 间距规范 - 排版规范 - 使用的颜色 token 让文档易于快速浏览，使用清晰的标题、表格和代码块。采用友好但专业的语气。在合适之处，用提示框加入有用的小贴士。