mcpField
S
sgds-patterns

sgds-patterns

github.com/govtechsg设计与 UI18206 次安装2 天前更新
代码仓库

关于 sgds-patterns

sgds-patterns 是 SGDS 可复用 UI 模式目录，面向使用 SGDS 构建界面的开发者。它提供可查找的模式参考和 HTML 模板，涵盖排版、表单与页面布局等常见需求。

主要功能

  1. 01按类别检索可复用 UI 模式
  2. 02提供排版模式参考
  3. 03涵盖表单和页面布局
  4. 04提供模式对应的原始 HTML 模板
  5. 05列出模式文件与 GitHub 链接

适用场景

  1. 01实现页面标题与正文排版
  2. 02构建含验证的多字段表单
  3. 03创建登录页、空状态或搜索界面
  4. 04查找 SGDS 模式的 HTML 与工具类

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/govtechsg/sgds-web-component --skill sgds-patterns

安装后在 Claude Code 中输入/sgds-patterns确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/typography/
content.md
display.md
heading.md
list.md
paragraph.md

详细介绍

SGDS 模式

此技能汇总了 SGDS 中所有可复用的 UI 模式。模式是可用于生产环境的模板，结合 SGDS 组件和工具类来满足常见的 UI 需求。

何时使用此技能

在以下情况下使用此技能：

  • 实现排版模式（页面标题、内容标题、列表、具有特定尺寸／字重的段落）
  • 构建表单模式（多字段表单、验证模式、输入框分组）
  • 创建页面布局（登录页、空状态、数据表格、搜索界面）
  • 使用 SGDS 显示通知、评价或数据可视化
  • 查找 UI 模式对应的确切 HTML 标记和 SGDS 工具类

前置条件

实现任何模式之前，请确保已具备：

  1. sgds-getting-started：应用初始设置（Inter 字体、基础 CSS 导入、组件注册）
  2. sgds-utilities：了解 SGDS 工具类（间距、排版、颜色、网格等）
  3. sgds-components：了解模式中使用的 SGDS Web 组件

在询问如何实现模式之前，请先参阅这些技能。

当前模式：排版

排版模式为文本内容定义了语义化、可复用的布局。所有模式均使用 SGDS 工具类，以确保样式一致，并遵循设计令牌层级。

请使用下方的类别链接查找特定模式：

  • Heading - 页面和分区标题，可选择是否带眉题（6 种模式）
  • Display - 大号、醒目的展示排版（12 种模式）
  • Content - 卡片标题和子分区标题（6 种模式）
  • List - 三种尺寸的有序和无序列表（6 种模式）
  • Paragraph - 适用于较长内容的正文样式（3 种模式）

如何使用模式

  1. 使用上方的类别链接或特定模式参考文件，查找所需模式
  2. 从参考文件中的 GitHub URL 获取原始 HTML 模板
  3. 提取模板（const XxxTemplate = () => html\....`` 部分）——这是要实现的标记
  4. 根据内容调整——替换占位文本，并根据使用场景按需调整 SGDS 工具类
  5. 如果模式包含交互元素（按钮、表单、下拉菜单等），请与 sgds-components 结合使用

模式命名约定

模式文件遵循以下命名规则：

stories/patterns/[Category]/[Subcategory]/[PatternName]-[variant].stories.js

示例：

  • Typography/Heading/h1.stories.js → H1 模式（默认字重）
  • Typography/Heading/h1-light.stories.js → H1 模式（轻字重）
  • Typography/Display/display-lg-center.stories.js → 大号展示文本，居中对齐
  • Typography/List/ul-body-md.stories.js → 无序列表，正文中号

变体表示：

  • 字重：-light 后缀表示轻字重变体
  • 对齐方式：-center 后缀表示居中对齐变体
  • 尺寸：内置于名称中（例如，display-sm、body-md）

集成示例

以下是使用排版模式的简要示例：


<link rel="stylesheet" href="@govtechsg/sgds-web-component/lib/index.css" />
<script type="module" src="@govtechsg/sgds-web-component/lib/index.js"></script>


<div class="sgds:flex sgds:flex-col sgds:items-start sgds:text-left" style="max-width: var(--sgds-text-max-width);">
  <div class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs">
    Overline Label
  </div>
  <h1 class="sgds:text-heading-xl sgds:font-bold sgds:leading-xl sgds:tracking-tight sgds:text-heading-default">
    Page Heading Goes Here
  </h1>
  <p class="sgds:text-body-lg sgds:leading-md sgds:tracking-normal sgds:text-body-subtle">
    Supporting body text that provides context and detail for the page or section above.
  </p>
</div>

复制模板，替换为你的内容，即可使用该模式。

访问模式文件

所有模式均存储在代码库的 stories/patterns/ 中，也可在 GitHub 上获取。请使用上方的排版类别链接，查找任意模式对应的确切 URL：

https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/patterns/Typography/[Subcategory]/[PatternName].stories.js

每个类别参考文件都包含一个表格，其中列出了该类别所有模式的直接链接。

评论

支持 Markdown