用途:当需要构建受 Lattice 美学启发的界面时使用该技能,为 AI 智能体提供一套有倾向性的约束,覆盖浅色模式界面、Lattice 风格设计系统,以及采用 Inter 字体和 4px 网格的 UI 实现。
主要能力:提供颜色语义令牌(surface-base #FEFDFC 用于页面背景、surface-raised #DDFCDA 用于卡片与模态、surface-overlay #EDFAF3 用于浮层与提示、text-primary #6B6F6E、text-secondary #969C9B、text-tertiary #5E9892、border-default #F5F4F2、accent #26B177、success 与 warning 等),并要求文本对比度至少 4.5:1、减少调色板。字体方面要求主字体使用 Inter、单一字族,标题 71px/700、正文 40px/700,标题用 text-balance、正文用 text-pretty,数字用 tabular-nums,除非明确要求否则不得修改字距。间距要求使用 4px 网格及 1px、2px、3px、4px、5px、6px、7px、8px 的尺度,默认元素间距 1px,禁止任意值。边框圆角需从给定尺度取值,默认 4px,胶囊元素用 56px 以上,边框宽度限制为 1px、2px、3px、4px。布局以 1920px 为基准视口,全屏高度用 h-dvh 而非 h-screen,固定元素尊重 safe-area-inset,方形元素用 size-*。交互上要求焦点使用 2px accent 色轮廓且 offset 2px、不得移除焦点指示,禁用态 opacity 0.5 加 cursor: not-allowed,破坏性操作使用 AlertDialog,加载使用结构性骨架屏,错误就近显示,禁止阻止粘贴,图标按钮加 aria-label。动画只允许 transform 与 opacity,入场用 ease-out,交互反馈不超过 200ms,尊重 prefers-reduced-motion;性能上禁止对大面积 blur 或 backdrop-filter 做动画,禁止在非动画期间使用 will-change,禁止在可用渲染逻辑表达时使用 useEffect。
使用方式:作为技能载入后,在构建 Lattice 风格界面时参照上述约束执行;具体安装与调用命令资料未提供。
适用场景:浅色模式产品界面、Lattice 风格设计系统实现、基于 Inter 与 4px 网格的前端开发。
限制:本技能为强约束型规范;资料未提供安装命令、价格、平台支持与效果数据,部分尺度与字体尺寸范围较广,应按具体项目取舍。