关于 specify
Specify 是用于设计自适应行为的设计技能，帮助团队将用户偏好、屏幕条件和认知需求纳入界面规范。它产出涵盖偏好响应、响应式布局、排版、颜色和视图密度的规格。
主要功能
- 01定义系统偏好的界面响应
- 02规划断点、缩放与方向适配
- 03规定弹性排版行为
- 04审查颜色信息的替代编码
- 05指定简化视图与信息密度
适用场景
- 01编写无障碍界面设计规范
- 02规划 200% 缩放下的布局与文字
- 03为颜色状态设计非颜色提示
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/specify确认已加载。
详细介绍
指定自适应行为
将界面如何适应不同用户的需求——偏好、屏幕条件和认知要求——纳入设计规范，而不是事后补救。
流程
步骤 1：定义偏好响应
使用 user-preference-respect，指定界面对每项系统偏好的响应：
- prefers-reduced-motion：有哪些变化
- prefers-contrast：有哪些变化
- prefers-color-scheme：有哪些变化
- forced-colors：有哪些变化
- prefers-reduced-transparency：有哪些变化
步骤 2：定义响应式行为
使用 responsive-accessibility，指定：
- 断点及每个断点下的重排方式
- 200% 缩放时的行为
- 方向支持
- 每个断点下的触摸目标尺寸
步骤 3：定义字体行为
使用 flexible-typography，指定：
- 使用相对单位的字号比例
- 行高和间距数值
- 用户将文本缩放至 200% 时的行为
- 深色模式下的字体调整
步骤 4：定义颜色策略
使用 colour-independence，指定：
- 每种以颜色编码的含义如何采用第二种编码方式
- 状态指示器设计（颜色 + 图标 + 文本）
- 图表和数据可视化的颜色策略
- 灰度测试结果
步骤 5：定义视图选项
使用 simplified-views 和 information-density，指定：
- 简化视图和完整视图分别包含哪些内容
- 用户如何在不同视图间切换
- 可用的信息密度级别
- 不同视口和情境下的默认密度
输出
提交一份自适应行为规范：
- 偏好响应表——列出每项系统偏好及界面的响应
- 响应式行为图——列出每个断点和缩放级别下的变化
- 字体规范——字号比例、单位、间距和缩放行为
- 颜色独立性审查——列出每个依赖颜色的元素及其第二种编码方式
- 视图和密度选项——列出可用选项及用户控制方式
评论
支持 Markdown