Install any skill in seconds. Free to start, no credit card required.
Get Started Free →echovic/ui-designer-interaction-specification
交互规范,定义加载状态、空状态、反馈机制、动效、无障碍等交互细节
Passed 18 of 22 test cases with the skill, and 14 of 22 without it.
and 2 more in the full report
4 fixed14 passed either way4 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 4 test cases the skill fixed. Same model, same prompt, with and without the skill.
A mobile UI designer wants to pack toolbar icons closely together at 24x24px hit areas with 2px spacing. What are the minimum and recommended touch target sizes for mobile touchscreens?
| Checked | Without skill | With skill |
|---|---|---|
| Defines minimum touch target size as 44x44px for mobile devices. | Missed | Passed |
| Defines recommended touch target size as 48x48px for mobile devices. | Missed | Passed |
The instructions your model reads when the skill loads.
定义用户与界面交互的细节,包括加载状态、空状态、反馈机制、动效、无障碍等,确保交互流畅、友好、可访问。
| 场景 | 处理方式 | 时机 | 视觉表现 |
|---|---|---|---|
| 页面首次加载 | 骨架屏 | 首次进入页面 | 灰色占位块,模拟内容结构 |
| 页面刷新 | 顶部进度条 | 刷新页面 | 蓝色进度条,从左到右 |
| 按钮提交 | 按钮内 spinner | 点击提交按钮后 | 按钮内显示旋转图标,文字隐藏 |
| 列表加载更多 | 底部 spinner | 滚动到底部 | 底部显示"加载中..." |
| 局部刷新 | 区域内 spinner | 刷新某个区域 | 区域内显示旋转图标 |
| 搜索 | 输入框内 spinner | 输入后延迟搜索 | 输入框右侧显示旋转图标 |
┌─────────────────────────────────────┐
│ ████████ │ ← 标题占位
│ ████████████ │ ← 描述占位
│ │
│ ████ ████████████████ │ ← 列表项占位
│ ████ ████████████████ │
│ ████ ████████████████ │
└─────────────────────────────────────┘
test cases passed, vs 14 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.