SuperAPI AI 工具集

sgds-utilities-overview

前端与建站

查看项目

更新于 10-15 21:55

技能介绍

用途:此技能为 SGDS(新加坡政府设计系统)工具类总览,说明其基础样式如何通过 Utilities API 暴露——一组由 Tailwind v4 驱动、以 sgds: 前缀限定作用域的原子类。开发者用该语法在标记中直接应用 SGDS 的设计决策,而无需编写自定义 CSS。

主要能力与分类:工具类按专门类别组织。sgds-utilities-setup 为起始步骤,用于导入工具类 CSS 与主题文件,所有工具类均需先完成设置;sgds-utilities-spacing 提供基于 4px 比例的 margin、padding、gap;sgds-utilities-color-semantics 定义各颜色技能共享的后缀修饰符(default、emphasis、muted、fixed-light、fixed-dark、inverse、surface 等);sgds-utilities-background-color、text-color、border-color 分别提供主题感知的背景色、文字色和边框色;border-width 与 border-radius 处理边框厚度、边选择与圆角;typography 提供字号、字重、行高与字距;opacity 提供透明度级别。

使用方式:所有类须带 sgds: 前缀,例如 div class="sgds:p-4 sgds:bg-primary-default sgds:text-white"。缺少前缀的写法(如 p-4 bg-primary-default)是错误的。间距基准为像素值 = 乘数 × 4px。部分类别需要主题文件(背景色、文字色、边框色),部分不需要(间距、边框宽度、圆角、排版、透明度)。按用例可查阅对应类别技能。

约束:应先完成 sgds-utilities-setup,再排查问题;颜色语义未确定时可查阅 sgds-utilities-color-semantics。本资料未提供价格、平台或效果等其它信息。