关于 sgds-templates
这是一组使用 SGDS 组件和工具类构建的整页模板，面向开发新加坡政府设计系统页面的开发者，涵盖仪表板、表单、目录、登录及内容页面，并提供统一的视觉指导。
主要功能
- 01运营应用外壳布局
- 02管理后台与仪表板布局
- 03带搜索和筛选的目录页
- 04登录与多字段表单页
- 05关于、落地页和博客模板
- 06SGDS 间距与视觉层级指南
适用场景
- 01搭建内部管理门户
- 02创建可搜索的公共目录
- 03制作登录或设置页面
- 04排版机构介绍或文章页面
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/sgds-templates确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
reference/about-us.mdapplication-management.mdblog.mdcatalogue.mddashboard.mdform.mdlanding.mdlogin.mdoperational.md详细介绍
SGDS 页面模板
可直接使用、基于 SGDS 组件和实用工具的整页模板，改编自 shadcn Blocks 的视觉模式。每个模板都能为你提供美观的起点，无需从头编写布局代码。
前置条件
每个页面都必须包含 Application Shell。 在生成任何页面之前，请先阅读 sgds-blocks → reference/application-shell.md。Shell 会为每个页面提供必需的
<sgds-masthead>、<sgds-mainnav>和<sgds-footer>，并提供容器类选择（.sgds-container与.sgds-container-sidebar）及粘性页头规范。切勿生成缺少这三个 Shell 组件的页面模板。
import "@govtechsg/sgds-web-component/themes/day.css";
import "@govtechsg/sgds-web-component/css/sgds.css";
import "@govtechsg/sgds-web-component/css/utility.css";
完整安装说明请参阅 sgds-getting-started 和 sgds-components。
有关这些模板中使用的容器宽度和最大宽度实用工具，请参阅 sgds-utilities。
快速选择指南
| 要构建的内容 | 使用的模板 |
|---|---|
| 运营应用 Shell（appnav + 覆盖式侧边栏） | Operational |
| 带筛选器和数据表的管理仪表板 | Application Management |
| 带搜索和筛选功能的公共目录 | Catalogue / Search & Filter |
| 内部工具、管理门户、分析仪表板 | Dashboard |
| 登录页面 | Login |
| 多字段设置或数据录入表单 | Form Page |
| 公司／机构简介、团队介绍、成就展示 | About Us |
| 产品或服务落地页 | Landing Page |
| 博客文章、新闻报道或案例研究 | Blog / Content Page |
→ 阅读 reference/operational.md
带有 <sgds-appnav> 和覆盖式侧边栏的运营应用 Shell。适用于不需要 <sgds-masthead> 的内部工具、管理门户和运营仪表板。
→ 阅读 reference/application-management.md
侧边栏筛选器 + 搜索 + 数据表 + 分页。适用于管理仪表板、应用注册表和管理门户。
→ 阅读 reference/catalogue.md
搜索 + 侧边栏多组筛选器 + 排序下拉菜单 + 结果网格 + 空状态。适用于产品目录、活动列表和内容浏览。
→ 阅读 reference/dashboard.md
侧边栏导航 + 统计卡片行 + 数据表。适用于包含指标的仪表板、管理门户和内部工具。
注意：仪表板模板使用
sgds-sidebar（RC 组件）。请在其他 SGDS 导入项之前加载 CDN 脚本；CDN 标签和框架设置请参阅 sgds-components sidebar reference。
→ 阅读 reference/login.md
包含电子邮件／密码表单的居中卡片。适用于身份验证、登录和注册页面。
→ 阅读 reference/form.md
带有标签表单分区的双栏设置布局。适用于设置页面、个人资料页面和多分区数据录入页面。
→ 阅读 reference/about-us.md
双栏标题 + 图片网格 + Logo 条 + 成就统计面板。适用于机构简介、产品介绍页面和团队介绍。
→ 阅读 reference/landing.md
主视觉区 + 功能卡片 + CTA 区块。适用于产品发布、服务介绍和活动页面。
→ 阅读 reference/blog.md
特色图片 + 文章标题区 + 正文内容 + 作者卡片。适用于博客文章、新闻报道、案例研究和客户评价。
原始内容链接——复制粘贴即可使用
stories/templates/ 目录中的所有页面模板都有可用的实现。使用以下 GitHub 原始链接获取完整源代码：
每个参考页面（例如 reference/dashboard.md）都包含对应模板的原始内容链接。
如何从 GitHub 原始链接提取 HTML
stories/templates/ 目录中的所有模板都有可用的 Story 实现。按照以下步骤提取 HTML 模板：
步骤 1：获取原始文件
从上表复制 GitHub 原始 URL 并获取文件：
curl https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/{FOLDER}/{FILE}.js
示例：
curl https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/AboutUs/basic.stories.js
步骤 2：从模板字面量中提取 HTML
Story 文件会导出一个返回 html 模板字面量的 Template 函数。找到类似以下内容的部分：
const Template = () => html`
<sgds-masthead></sgds-masthead>
...
<sgds-footer></sgds-footer>
`;
步骤 3：清理 HTML
- **移除
html\`` 包装**——删除开头的html`` 和结尾的反引号 - 移除 Lit 专用语法——删除所有
${variable}插值；如有需要，可替换为占位文本 - 移除
<style>块——如果 CSS 值得注意，将其移至参考文件的“自定义说明”部分 - 保留所有 SGDS 组件和实用类——完整保留每个
sgds-*元素和sgds:类 - 格式化 HTML——使用统一的缩进（每层 2 个空格）
步骤 4：组织参考文件
遵循 sgds-blocks 模式：
# [Template Name] Page Template
[1-2 sentence description of what this template is for]
## When to use
- Use case 1
- Use case 2
- Use case 3
## Block anatomy
\`\`\`
[ASCII diagram of the layout structure]
\`\`\`
---
## Complete template
\`\`\`html
[CLEANED HTML FROM STEP 3]
\`\`\`
## Customisation notes
- Update [element] to [purpose]
- Modify [component] by [how]
- [More notes...]
---
## Raw Content Link
| File | GitHub Raw URL |
|------|---|
| [Template Name] | [raw GitHub URL] |
示例：关于我们模板
原始文件位于：
https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/AboutUs/basic.stories.js
其中包含：
const Template = () => html`
<style>...</style>
<sgds-masthead></sgds-masthead>
...
`;
提取 → 移除 html\`` 和反引号 → 清理 ` → 得到 reference/about-us.md 中的 HTML。
视觉层次原则（适用于所有模板）
以下规则能让 SGDS UI 看起来更精致——shadcn/Mantine 也采用了相同的原则：
1. 叠加背景，营造层次感
- 页面背景：
sgds:bg-surface-default（基础画布） - 卡片 / 面板：
sgds:bg-surface-raised（让内容从页面上凸显出来） - 嵌套内容区域：谨慎使用
sgds:bg-surface-overlay
2. 使用语义化间距，而非原始数值
优先使用 sgds:p-layout-md、sgds:gap-layout-md、sgds:p-component-md，而不是 sgds:p-4。语义化令牌具有响应式特性，并体现了设计意图。始终在各个区块和元素之间留出空白——绝不要在没有间距的情况下渲染区块。 完整的默认值表请参阅 sgds-utilities-spacing。
3. 保持卡片结构一致
每张卡片都应包含：内部留白（sgds:p-component-lg）、卡片行间距（sgds:gap-layout-md）、圆角（sgds:rounded-lg）、柔和阴影（sgds:shadow-card）。
4. 表单中的操作层次
主要操作 → <sgds-button variant="primary">。次要操作 / 取消 → <sgds-button variant="outline">。破坏性操作 → <sgds-button variant="ghost" tone="danger">。
5. 标签低调，数值醒目
在统计卡片和描述列表中：标签使用 sgds:text-body-subtle sgds:text-sm，数值使用 sgds:text-default sgds:text-2xl sgds:font-semibold。