design-system
Make frontend output look intentional, not AI-generated. Use for any UI work — components, pages, layouts.
来源信息
- 仓库
- Archive228/loopkit
- 最近来源活动
- 2026年6月29日 21:52
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 757
- Forks
- 124
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- name
- design-system
- description
- Make frontend output look intentional, not AI-generated. Use for any UI work — components, pages, layouts.
- when_to_use
- building UI, a component, a page, "make this look good"
# Design System
Default AI UI is gray, centered, and timid. Don't ship that.
- **Type** — one distinctive display face + one clean body face. Real scale (e.g. 12/14/16/20/28/40), not everything 16px.
- **Color** — one strong accent, a real neutral ramp, intentional contrast. No 5 competing brand colors.
- **Space** — a spacing scale (4/8/12/16/24/32...). Generous whitespace. Align to a grid.
- **Motion** — purposeful only: feedback on action, transitions on state. No decorative bounce.
- **Hierarchy** — one clear focal point per screen. Size, weight, and space do the work, not borders everywhere.
Before done: would a senior designer ship this, or does it look like a default Tailwind template? If the latter, push the contrast and the type.
在 GitHub 查看