用途:这是一套面向 AI 智能体的、带有明确约束的 Segment 风格界面构建指南。当需要构建浅色模式界面、创建 Segment 风格设计系统,或使用 Inter 字体与 4px 网格实现 UI 时,可参考本技能。
主要能力:提供颜色、语义令牌、排版、间距、边框、布局、组件与交互等方面的规则。颜色方面要求主表面使用浅色背景,页面背景(surface-base)使用 #0748D8,主操作与焦点状态(accent)使用 #94C2F0,文字对比度至少 4.5:1。语义令牌包括 surface-base、surface-raised、surface-overlay、text-primary、text-2、text-secondary、border-default、accent 等,均给出 HEX 与 RGB 值。排版要求以 Inter 为主字体,主标题 50px/700,正文 31px/500,标题用 text-balance、正文用 text-pretty,数字用 tabular-nums,且不得擅自修改字距。间距必须使用 4px 网格,默认元素间距 2px。边框圆角取自 6px、7px,默认 6px,边框宽度统一 1px。布局以 1920px 为基准视口,全屏高度用 h-dvh 而非 h-screen,固定元素需尊重 safe-area-inset。
使用方式:将本技能作为设计约束参考,在生成界面时遵循上述令牌与规则。交互上,焦点须用 2px accent 色描边并带 2px offset,禁用态用 opacity 0.5 与 cursor: not-allowed,破坏性操作须用 AlertDialog,图标按钮须加 aria-label。动画仅在明确要求时添加,只动 transform 与 opacity,交互反馈不超过 200ms,并尊重 prefers-reduced-motion。
适用场景:构建 Segment 美学风格的浅色界面、设计系统与组件库。
限制:资料未提供安装命令、收费、价格、平台或效果等信息,暂未提供。