Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →echovic/ui-designer-component-specification
UI组件规范,定义按钮、输入框、卡片等基础组件的变体、尺寸、状态
Passed 13 of 22 test cases with the skill, and 7 of 22 without it.
and 8 more in the full report
6 fixed7 passed either way9 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 6 test cases the skill fixed. Same model, same prompt, with and without the skill.
开发团队询问按钮在处于 Loading(加载)状态时,按钮文字是否应该与 Spinner 转轮并排显示。请明确 Button 加载状态的具体表现。
| Checked | Without skill | With skill |
|---|---|---|
| Specifies that text is hidden during loading state while displaying spinner | Missed | Passed |
| Specifies Primary background color remains active during loading state | Missed | Passed |
The instructions your model reads when the skill loads.
基于设计系统,定义可复用的UI组件规范,确保组件在不同场景下的一致性和完整性。
| 变体 | 用途 | 视觉特征 |
|---|---|---|
| Primary | 主要操作(每个区域最多1个) | 实心,品牌色背景,白色文字 |
| Secondary | 次要操作 | 描边,透明背景,品牌色文字 |
| Ghost | 低优先级操作 | 无边框,透明背景,灰色文字 |
| Danger | 危险操作(删除、清空) | 实心,红色背景,白色文字 |
| Link | 文本链接 | 无背景,品牌色文字,下划线 |
| 尺寸 | 高度 | 内边距 | 字号 | 圆角 | 最小宽度 |
|---|---|---|---|---|---|
| sm | 32px | 12px 16px | 14px | 6px | 64px |
| md | 40px | 12px 20px | 16px | 8px | 80px |
| lg | 48px | 16px 24px | 16px | 8px | 96px |
| 状态 | Primary 背景 | Primary 文字 | 边框 | 其他 |
|---|---|---|---|---|
| 默认 | Primary | White | - | - |
test cases passed, vs 7 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.