SuperAPI AI 工具集

design-system

设计与创作

查看项目

更新于 10-16 01:26

技能介绍

用途:这是 snapcn(一个 shadcn 注册表)的设计系统约束文档,写给要往注册表组件里写颜色、边框、阴影、圆角或字体栈的开发者,确保组件装进他人 shadcn 项目后与 Input、Button 等原生组件协调一致。

主要能力与规则: 一、令牌即事实来源。registry/snap-cn-ui/core/theme.ts 是 SnapCnTheme,镜像 app/globals.css。运行 pnpm run check:tokens 可在两者不一致时失败。令牌改动先在 globals.css 落地。浅色为 background #faf9f6、card #ffffff、foreground #141414、mutedForeground #6e6a63、border/input #d9d9d9、ring/primary #3577e0、radius 10;深色为 #0a0a0b 页面、#141417 卡片、#26272b 细线,主色同为 #3577e0。通过 useSnapCnTheme(theme, mode) 解析,组件接收 theme?: Partial<SnapCnTheme> 与 mode?: "light" | "dark" 属性。 二、复用基础组件的表面样式,不要重新推导。可从 @/components/snap-cn/input 取 inputStyleContext(t),并在 registryDependencies 中声明 @snapcn/input、@snapcn/caret、@snapcn/snap-cn-ui。只取令牌,不必复刻其尺寸与状态机。 三、阴影默认不存在。shadcn 控件靠 1px 细线边框完成区分;渐变填充同理要避免。若确需高光表面,作为 surface="glass" 之类的可选项提供,并说明适用于哪种背景。 三b、令牌按控件尺度定义。在小控件上的 1px #d9d9d9 放到大尺寸控件会几乎消失,可按比例调整边框宽度,并用 mixOklch(ui.idleBorder, t.foreground, 0.28) 提升对比,不要自造灰色。 三c、烧录进视频的文字不属于应用界面,可用粗描边(paint-order: stroke fill,避免 -webkit-text-stroke 吃掉字形)、展示字重与字号,强调色作为属性暴露,不要用主题主色。应用外壳部分仍取系统中性色。 四、令牌必须能经受渲染器。动画颜色须为具体 oklch/hex/rgb 并用 mixOklch 插值,Remotion 无头渲染器无法解析 var(--token);字体应用 @remotion/google-fonts 加载。静态颜色可用 var()。 五、参考稿只量几何比例,不取其配色。若某表面值得保留,作为默认设计系统外的可选项提供并注明背景。

限制:文档未提供完整的令牌表变更流程细节、组件清单或安装命令说明以外内容,相关内容暂未提供。