DESIGN SYSTEM
圆角体系Radius Scale
4/8/12/16/24/全圆的圆角刻度：小元素小圆角、大容器大圆角，全站统一。
效果预览
4
8
12
16
24
999
适合用在哪
所有项目。圆角随机（这个 6px 那个 13px）观感立刻业余。
容易踩的坑
- 嵌套元素内外圆角相同，内层四角与外框间距不等，看起来像没对齐。
- 按钮用 8px、输入框用 4px，同一行的表单控件圆角不一致显得拼凑。
- 大卡片 overflow 未设 hidden，内部图片的直角从圆角容器里戳出来。
设计提示词 · Prompt
圆角体系（Radius Scale）：刻度 sm 6-8px（输入框、小按钮）→ md 10-12px（卡片、菜单）→ lg 16-20px（大卡、弹窗）→ xl 24px+（Hero 容器）→ full 999px（胶囊、头像）。原则：元素越大圆角越大；嵌套圆角遵循"内圆角 = 外圆角 - 内边距"（外 16px 内边距 12px → 内 4px）。全站选一个圆角性格：全锐利（专业/工具）、全柔和（友好/消费）、或对比型（大容器极圆 + 内元素锐利）。胶囊只用于按钮/徽章/头像，容器别滥用 999px。
Radius Scale: sm 6-8px (inputs, small buttons) → md 10-12px (cards, menus) → lg 16-20px (large cards, dialogs) → xl 24px+ (Hero containers) → full 999px (pills, avatars). Principle: the larger the element, the larger the radius; nested radii follow "inner radius = outer radius - padding" (outer 16px with 12px padding → inner 4px). Pick one radius personality site-wide: all sharp (professional/tools), all soft (friendly/consumer), or contrasting (very round large containers + sharp inner elements). Pills are only for buttons/badges/avatars — don't overuse 999px on containers.
常见搭配
同一页面里经常和「圆角体系」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-radscale"> <span class="d-rad" style="border-radius:4px">4</span> <span class="d-rad" style="border-radius:8px">8</span> <span class="d-rad" style="border-radius:12px">12</span> <span class="d-rad" style="border-radius:16px">16</span> <span class="d-rad" style="border-radius:24px">24</span> <span class="d-rad" style="border-radius:999px">999</span> </div>