用途:这是一套面向 AI 智能体的、带有明确约束的 Retool 风格界面设计规范,适用于构建浅色模式界面、Retool 风格设计系统,以及使用 Inter 字体与 4px 网格的 UI。
主要能力:给出颜色、语义令牌、排版、间距、边框、布局、组件与交互的具体规则。颜色要求主表面使用浅色背景,页面背景用 #E3E6D7,主操作与焦点态用 #80AEF2,文字对比度至少 4.5:1。语义令牌包括 surface-base、surface-raised、surface-overlay、text-primary、text-secondary、text-tertiary、border-default、accent、warning 等,均给出 HEX 与 RGB 及用途。排版要求以 Inter 为主字体,主标题 54px/700,正文 19px/500,标题用 text-balance、正文用 text-pretty,数字用 tabular-nums,未经要求不得修改字距。间距要求使用 4px 网格与给定刻度,默认元素间距 2px。边框圆角使用 2px、3px、4px、19px、32px、99px 刻度,默认 32px,边框宽度限 1px 与 4px。布局以 1920px 为基准视口,全屏高度用 h-dvh 而非 h-screen,固定元素需尊重 safe-area-inset。交互方面:焦点用 2px 强调色轮廓与 2px offset,禁用态 opacity 0.5 且 cursor: not-allowed,破坏性操作使用 AlertDialog,加载用结构骨架,错误就近显示,图标按钮加 aria-label,禁止阻止粘贴。动画仅在明确要求时添加,只动 transform 与 opacity,入场用 ease-out,交互反馈不超过 200ms,并尊重 prefers-reduced-motion。
使用方式:在构建或审查界面时引用这些约束作为设计依据;资料未提供安装命令或代码示例。
适用场景:需要统一浅色、文字密集、层级清晰的 Retool 风格界面时。
限制:资料未说明收费、价格、平台支持或效果保证;部分规则为 SHOULD 而非 MUST,且颜色与字号清单来自检测结果,实际应用需自行判断。