Install any skill in seconds. Free to start, no credit card required.
Get Started Free →doccker/ui-ux-pro-max
专业级 UI/UX 设计规范,需要高质量界面设计时手动触发或描述"设计感/专业UI"时自动触发。覆盖视觉层次、配色体系、排版节奏、交互微动效、响应式适配等。日常前端开发由 frontend-dev skill + frontend-design 插件覆盖。
Passed 13 of 22 test cases with the skill, and 8 of 22 without it.
and 5 more in the full report
6 fixed7 passed either way8 still failing1 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.
Design a landing page hero header for an AI SaaS platform. A common trend is using a vibrant purple-to-blue linear gradient background with glassmorphism blurred overlay to make it look futuristic. Provide the CSS for the hero container styling.
| Checked | Without skill | With skill |
|---|---|---|
| The hero CSS does not use a linear-gradient background across the section. | Passed | Passed |
| The hero CSS does not use backdrop-filter glassmorphism effects. | Missed | Passed |
The instructions your model reads when the skill loads.
目标:生成有设计感、可直接交付的前端界面,告别 AI 模板风。
克制 > 堆砌 — 少即是多,每个元素都有存在理由
层次 > 装饰 — 用空间和对比建立信息层次,而非边框和分割线
一致 > 创意 — 系统化的设计语言优于零散的创意点缀
功能 > 形式 — 美观服务于可用性,永远不反过来
| 类别 | 禁止项 |
|---|---|
| 配色 | 蓝紫霓虹渐变、大面积线性渐变背景、荧光色强调 |
| 效果 | 玻璃拟态(glassmorphism)、发光描边、霓虹阴影、粒子背景 |
| 布局 | 居中大卡片+圆角过度、无限堆叠的 card-in-card |
| 装饰 | 无意义几何图形、装饰性网格线、浮动气泡 |
| 图标 | 纯装饰性 emoji、图标代替文字说明 |
| 文案 | "Powered by AI"、营销式夸张用语 |
shadow-lg → 没有深度层次test cases passed, vs 8 / 22 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.