ChatGPT 组件视觉规范技能：写卡片状态、尺寸和验收条件
EnglishChatGPT 安装步骤
- 从固定版本 GitHub 原文下载 src/process/resources/skills/design-director-pack/skills/design-component-visual-spec/SKILL.md。将它作为 design-component-visual-spec 的独立文本技能，保留名称、描述及正文。
- 在已启用技能和上传权限的 ChatGPT 工作区，打开「插件 → 技能 → 创建 → 从电脑上传」，选用文件选择器接受的技能包格式。也可在「使用编辑器创建」中录入原名称、描述和文本指令。
- 完成扫描后，确认 design-component-visual-spec 出现在已安装列表。在新对话输入 @ 并选择此技能，使用页面的虚构示例检查输出。
中文摘要
根据已确定的设计方向描述单个组件的组成、变体、视觉规则与状态。为前端交付补充响应式和可测条件。
SKILL.md 中文导读
可复现示例
虚构课程目录卡片含课程名、时长和收藏按钮。输入已有字号和颜色。写默认、已收藏、键盘聚焦和标题过长四种状态。工作步骤
- 写组件目的与组成。
- 登记尺寸、视觉变量和交互状态。
- 用长标题及键盘路径核对验收。
验收方法
规范应列卡片部件、标题占用空间与可访问按钮名称。写清超长时截断方式，确保焦点可见并给一项键盘验收。
GitHub 原文 · 更新日期
适用环境
需要有技能创建权限的合资格 ChatGPT 工作区，选择上传时还需相应权限。这份纯文本移植的安装路径按 OpenAI 文档核对，工作区运行待验证。
常见问题
尺寸规则需要精确到每个数值吗？
可引用现有设计 token 或批准的尺寸。没有值时写可验证的布局行为，再列待设计确认项。