Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →echovic/ui-designer-design-system
设计系统规范，包含颜色、字体、间距、圆角、阴影、动效等基础设计token
Passed 18 of 22 test cases with the skill, and 6 of 22 without it.
and 20 more in the full report
12 fixed6 passed either way4 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 12 test cases the skill fixed. Same model, same prompt, with and without the skill.
交互动画师建议 Hover 微交互用 100ms，状态切换用 200ms，页面动画用 300ms。请说明本 UI 规范中 duration-fast、duration-normal 和 duration-slow 的规定毫秒数。
| Checked | Without skill | With skill |
|---|---|---|
| Output defines duration-fast as 150ms | Missed | Passed |
| Output defines duration-normal as 250ms | Missed | Passed |
| Output defines duration-slow as 350ms | Missed | Passed |
The instructions your model reads when the skill loads.
在开始具体的页面和组件设计前，需要先建立统一的设计系统，确保整个产品的视觉和交互一致性。
| 名称 | 色值 | 用途 | 示例场景 |
|---|---|---|---|
| Primary | #3B82F6 | 主要操作、强调 | 主按钮、链接、选中状态 |
| Primary-hover | #2563EB | 主色悬停态 | 按钮悬停 |
| Primary-active | #1D4ED8 | 主色按下态 | 按钮按下 |
| Primary-light | #DBEAFE | 主色浅色背景 | 标签背景、高亮区域 |
| 名称 | 色值 | 用途 |
|---|---|---|
| Gray-900 | #111827 | 标题文字 |
| Gray-800 | #1F2937 | 重要文字 |
| Gray-700 | #374151 | 正文文字 |
| Gray-600 | #4B5563 | 次要文字 |
| Gray-500 | #6B7280 | 辅助文字 |
| Gray-400 | #9CA3AF | 占位文字 |
| Gray-300 | #D1D5DB | 边框、分割线 |
| Gray-200 | #E5E7EB | 浅边框 |
| Gray-100 | #F3F4F6 | 背景 |
| Gray-50 | #F9FAFB | 浅背景 |
test cases passed, vs 6 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.