用途：这是使用 SGDS Web Component 库构建新应用时的起步技能，要求在编写任何组件或页面代码前，按顺序完成四个初始化步骤。
主要能力与用法： 第一步设置字体。SGDS 基础样式默认使用 Inter 字体，需在 HTML 文档的 head 中、任何 SGDS CSS 之前加入 Google Fonts 引入，加载设计令牌定义的 300、400、600、700 四个字重（含正常与斜体）。 第二步导入基础与工具 CSS。在项目主 CSS 入口按顺序导入：先 @import "@govtechsg/sgds-web-component/themes/day.css"（主题令牌必须最先），可选 night.css 支持深色模式；再 @import "@govtechsg/sgds-web-component/css/sgds.css"；最后 @import "@govtechsg/sgds-web-component/css/utility.css"。utility.css 含 Tailwind v4 指令，必须由 Tailwind 管线处理，不能作为普通 JS 导入。 第三步注册组件。在应用入口 JS/TS 中执行 import "@govtechsg/sgds-web-component"，全局注册所有 sgds-* 自定义元素；除非明确做 tree-shaking，否则不要单独导入组件。 第四步使用应用布局。面向公众的通用应用用 Simple App 与 .sgds-container；内部工具、仪表盘、事务型应用用 Sidebar App 与 .sgds-container-sidebar。页面内容必须包在对应容器中，不要用原始 sgds:max-w-* 工具类模拟容器。
适用场景：新建 SGDS 项目、搭建页面骨架与布局时。
限制与注意：字体 link 标签必须放在 HTML head，不能放进 CSS 或 JS 导入；CSS 导入顺序不可颠倒；四步须全部完成后再生成组件或页面代码。构建 UI 前应先检查是否已有 SGDS 组件可用，无对应组件时才回退到自定义标记。React、Vue、Angular、Next.js 集成细节及主题定制、工具类完整说明暂未在资料中提供。