用途:为构建 Warp 美学风格界面提供带有强制性约束的 UI 设计规范,适用于浅色模式界面、Warp 风格设计系统,以及使用 Inter 字体与 4px 网格的 UI 实现。
主要能力: 颜色:页面背景必须使用 #FFFFFF(surface-base),卡片与弹窗使用 #222222(surface-raised),浮层使用 #D2D1CE(surface-overlay);文字主色 #AAAAAA、次色 #6C6C6C、辅助色 #393939;边框默认 #DCDBD7。文字对比度需至少 4.5:1。 字体:主字体必须为 Inter;主标题使用 74px / 700,正文使用 24px / 700;标题用 text-balance,正文用 text-pretty,数值用 tabular-nums;不擅自修改字间距。 间距与圆角:必须使用 4px 网格;默认元素间距 5px;圆角取自 3px、9px、16px、18px,默认 18px;边框宽度限 1px、2px。 布局:按 1920px 基准视口设计;全屏高度使用 h-dvh 而非 h-screen;固定元素需尊重 safe-area-inset。 交互与动效:焦点必须使用 2px 强调色轮廓(#5E6AD2)与 2px outline-offset,不得移除焦点指示;破坏性操作使用 AlertDialog;加载用骨架屏;加载动画只动 transform 和 opacity,入场用 ease-out,交互反馈不超过 200ms,并遵循 prefers-reduced-motion。 使用方式:本技能为约束规则集,配套同源 DESIGN.md(来自 awesome-design-md 的 warp 目录)提供视觉氛围和附加颜色令牌,漂移扫描器读取两者动态提取令牌,不硬编码数值。 限制:具体安装命令、运行命令、收费方式及平台信息暂未提供。