菜单
Typography and visual hierarchy rules for camelAI. Use when choosing font sizes, font families, or text styling in any UI code. Covers the 4-tier type scale and display font usage.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/qaml-ai/acon --skill ui-design命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | ui-design |
| description | Typography and visual hierarchy rules for camelAI. Use when choosing font sizes, font families, or text styling in any UI code. Covers the 4-tier type scale and display font usage. |
| Tier | Class | Use for |
|---|---|---|
| Display | text-xl to text-2xl | Page/section headings. Always pair with font-display. text-2xl for primary page titles, text-xl for lighter section headings. |
| Body | text-sm | Everything else. The default. |
| Caption | text-xs | Metadata, timestamps, shortcuts, muted helper text. |
| Micro | text-[0.625rem] | xs button variant only. No new uses. |
No arbitrary sizes (text-[11px], text-[13px]). No text-base for body text or inputs. No responsive size overrides (md:text-xs).
Exceptions: avatar initials, PDF rendering, email templates, and the welcome/onboarding splash screen (text-3xl font-display — the only place text-3xl is allowed).
| Class / Variable | Default | Use for |
|---|---|---|
--font-sans (body default) |
| Figtree |
| All text unless specified otherwise |
font-display / --font-display | Source Serif 4 | Display-tier headings only |
--font-mono | GeistMono | Code blocks, inline code |
The display font is special — use it only for the top-level heading on a page or dialog. Card titles, form labels, sub-sections, and buttons stay in the body font. Differentiate those with font-medium or font-semibold instead.
text-sm text-foreground (add font-medium for emphasis)text-sm text-muted-foregroundtext-xs text-muted-foregroundA card or list item should use at most 2 tiers (Body + Caption).
Component font sizes are set in src/components/ui/. Don't override them at usage sites — if a default is wrong, fix the component file.