Back to Details

design-systems-slds-apply

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Applying SLDS

应用SLDS

The Salesforce Lightning Design System (SLDS) is a CSS framework with thousands of artifacts. This skill teaches agents how to find and correctly use them.
Version: This skill targets SLDS v2. Legacy 
--lwc-*
tokens and 
slds-*--modifier
syntax are deprecated.
Audit scope: The companion 
design-systems-slds-validate
skill analyzer only scans 
.css
, 
.html
, and 
.js
files. Use it directly for LWC and similar HTML/CSS/JS components; treat it as a partial signal for JSX/TSX or other framework-specific template formats and supplement with manual review.
**Salesforce Lightning Design System（SLDS）**是一个包含数千种资源的CSS框架。本技能指导Agent如何查找并正确使用这些资源。
版本说明： 本技能针对SLDS v2。旧版的
--lwc-*
令牌和
slds-*--modifier
语法已被弃用。
审计范围： 配套的
design-systems-slds-validate
技能分析器仅扫描
.css
、
.html
和
.js
文件。可直接用于LWC及类似的HTML/CSS/JS组件；对于JSX/TSX或其他框架特定的模板格式，仅将其作为部分参考信号，需辅以人工审查。

What is SLDS?

什么是SLDS？

ArtifactCountDescription
Lightning Base Components~70Pre-built LWC components (LWC only)
SLDS Blueprints85CSS/HTML patterns for any framework
Styling Hooks523CSS custom properties (
--slds-g-*
) for theming
Utility Classes1,147Rapid styling classes for spacing, layout, visibility
Icons1,732SVG icons across 5 categories
资源类型数量说明
Lightning Base Components~70预构建的LWC组件（仅适用于LWC）
SLDS Blueprints85适用于任何框架的CSS/HTML模式
Styling Hooks523用于主题定制的CSS自定义属性（
--slds-g-*
）
Utility Classes1,147用于快速设置间距、布局、可见性的样式类
Icons1,732涵盖5个类别的SVG图标

Scope

适用范围

This skill covers:
  • Which blueprint to use for a given UI pattern
  • How to style with hooks (color, spacing, typography, shadows, borders)
  • Which utility classes to use for layout, spacing, visibility
  • Which icon to use and from which category
  • SLDS naming conventions, class structure, hook syntax
This skill includes basic accessibility reminders (icon alt text, focus outlines, color-not-sole-indicator) in the validation checklists. Full WCAG compliance requires a dedicated accessibility review.
This skill does NOT cover (use companion skills):
  • Design decisions -- visual hierarchy, composition, interaction patterns
  • LWC mechanics -- component structure, @wire, @api, lifecycle, events (not yet available)
  • Full accessibility -- WCAG conformance, ARIA patterns, keyboard navigation, focus management, contrast ratios (not yet available)
本技能涵盖：
  • 针对特定UI模式选择合适的蓝图
  • 如何使用钩子设置样式（颜色、间距、排版、阴影、边框）
  • 选择哪些工具类用于布局、间距、可见性设置
  • 选择合适的图标及其所属类别
  • SLDS命名规范、类结构、钩子语法
本技能包含基础的可访问性提示（图标替代文本、焦点轮廓、不单独依赖颜色传递信息），并纳入验证检查清单。完整的WCAG合规性需要专门的可访问性审查。
本技能不涵盖（请使用配套技能）：
  • 设计决策——视觉层次、布局、交互模式
  • LWC机制——组件结构、@wire、@api、生命周期、事件（暂未提供）
  • 完整可访问性——WCAG合规、ARIA模式、键盘导航、焦点管理、对比度（暂未提供）

Component Selection Hierarchy

组件选择优先级

Always follow this order:
1. Lightning Base Components (LWC only)    ← Check first
2. SLDS Blueprints (any framework)         ← Use exact SLDS classes
3. Custom with Styling Hooks               ← Use var(--slds-g-*)
4. Custom CSS (last resort)                ← Still use hooks for values
If building in LWC, check for an LBC first: Lightning Component Library
If no LBC exists (or not using LWC), select an SLDS Blueprint. See references/component-selection.md.
请始终遵循以下顺序：
1. Lightning Base Components（仅适用于LWC）    ← 优先检查
2. SLDS Blueprints（适用于任何框架）         ← 使用精确的SLDS类
3. 基于样式钩子的自定义组件               ← 使用var(--slds-g-*)
4. 自定义CSS（最后手段）                ← 仍需使用钩子获取值
如果在LWC中开发，请先检查是否有对应的LBC：Lightning Component Library
如果没有对应的LBC（或不使用LWC），请选择SLDS Blueprint。详见references/component-selection.md。

Core Rules

核心规则

Do

应当

  • Follow the selection hierarchy: LBC > Blueprint > Hooks > Custom CSS
  • Use 
    var(--slds-g-*, fallback)
    for all themeable values
  • Create custom classes (
    my-*
    , 
    c-*
    ) instead of overriding 
    .slds-*
  • Verify every hook, class, and utility exists before using it — run the search scripts; never assume an artifact exists based on naming patterns (see Verify Before You Use)
  • Pair surface colors with on-surface colors for text
  • Provide 
    alternative-text
    on every 
    <lightning-icon>
  • 遵循选择优先级：LBC > Blueprint > Hooks > 自定义CSS
  • 对所有可主题化的值使用
    var(--slds-g-*, fallback)
  • 创建自定义类（
    my-*
    、
    c-*
    ）而非覆盖
    .slds-*
  • 使用前务必验证每个钩子、类和工具类是否存在——运行搜索脚本；切勿根据命名模式假设资源存在（详见使用前验证）
  • 将表面颜色与表面文本颜色配对使用
  • 为每个
    <lightning-icon>
    提供
    alternative-text

Don't

不应当

  • Hard-code colors, spacing, or typography values
  • Override 
    .slds-*
    classes directly
  • Use deprecated 
    --lwc-*
    tokens as primary values
  • Use 
    --slds-s-*
    (shared) hooks -- they are private/internal
  • Reassign hook values -- only reference them with 
    var()
  • Use color alone to convey meaning
  • Invent hook names by interpolating patterns from other families (see Naming Traps below)
  • 硬编码颜色、间距或排版值
  • 直接覆盖
    .slds-*
    类
  • 将已弃用的
    --lwc-*
    令牌作为主要值使用
  • 使用
    --slds-s-*
    （共享）钩子——它们是私有/内部钩子
  • 重新赋值钩子——仅通过
    var()
    引用它们
  • 仅依赖颜色传递信息
  • 通过插值其他系列的模式来发明钩子名称（见下文命名陷阱）

Hook Naming Traps

钩子命名陷阱

SLDS hook families do NOT all follow the same naming pattern. Agents frequently invent hooks that don't exist by assuming 
{prefix}-{number}
works universally. Always verify a hook exists via the bundled 
search-hooks.cjs
script or 
metadata/hooks-index.json
before using it.
SLDS钩子系列并非都遵循相同的命名模式。Agent常因假设
{prefix}-{number}
通用而发明不存在的钩子。使用前务必通过捆绑的
search-hooks.cjs
脚本或
metadata/hooks-index.json
验证钩子是否存在。

Trap 1: Font size hooks are NOT numbered

陷阱1：字体大小钩子不带编号

Wrong (does not exist)CorrectNotes
--slds-g-font-size-3
--slds-g-font-scale-1
Font sizes use 
font-scale-*
, not 
font-size-*
--slds-g-font-size-4
--slds-g-font-scale-2
Only 
--slds-g-font-size-base
exists (base size)
--slds-g-font-size-8
--slds-g-font-scale-6
Scale goes: neg-4 through 10
Rule: For font sizes, use 
--slds-g-font-size-base
(the one base size) or 
--slds-g-font-scale-*
(the numbered scale). Never 
--slds-g-font-size-N
.
错误（不存在）正确写法说明
--slds-g-font-size-3
--slds-g-font-scale-1
字体大小使用
font-scale-*
，而非
font-size-*
--slds-g-font-size-4
--slds-g-font-scale-2
仅存在
--slds-g-font-size-base
（基础大小）
--slds-g-font-size-8
--slds-g-font-scale-6
缩放范围：neg-4至10
规则： 字体大小请使用
--slds-g-font-size-base
（唯一基础大小）或
--slds-g-font-scale-*
（带编号的缩放值）。切勿使用
--slds-g-font-size-N
。

Trap 2: Color hooks always require a number

陷阱2：颜色钩子必须带编号

Wrong (does not exist)CorrectNotes
--slds-g-color-on-surface
--slds-g-color-on-surface-2
All color hooks need a number
--slds-g-color-on-accent
--slds-g-color-on-accent-1
Pick 1/2/3 by emphasis level
--slds-g-color-surface
--slds-g-color-surface-1
No unnumbered base form
Rule: Every 
--slds-g-color-*
hook ends in a number. Pick by emphasis: 
-1
(low), 
-2
(medium), 
-3
(high).
错误（不存在）正确写法说明
--slds-g-color-on-surface
--slds-g-color-on-surface-2
所有颜色钩子都需要编号
--slds-g-color-on-accent
--slds-g-color-on-accent-1
根据强调级别选择1/2/3
--slds-g-color-surface
--slds-g-color-surface-1
无未编号的基础形式
规则： 每个
--slds-g-color-*
钩子都以数字结尾。根据强调级别选择：
-1
（低）、
-2
（中）、
-3
（高）。

Trap 3: Not all values have hook equivalents

陷阱3：并非所有值都有对应的钩子

Some CSS values (e.g., 
min-width: 7rem
for label alignment) have no SLDS hook. This is acceptable:
css
.c-field-label {
  /* No SLDS hook exists for this width; intentional custom value */
  min-width: 7rem;
}
Rule: When no hook exists, use the value directly with a comment explaining it's intentional. Prefer SLDS grid utilities (
slds-size_*
) as alternatives to hardcoded widths where possible.
部分CSS值（例如标签对齐的
min-width: 7rem
）没有对应的SLDS钩子。以下写法是可接受的：
css
.c-field-label {
  /* 此宽度无SLDS钩子；为有意设置的自定义值 */
  min-width: 7rem;
}
规则： 当没有对应的钩子时，直接使用该值并添加注释说明是有意设置的。尽可能使用SLDS网格工具类（
slds-size_*
）替代硬编码宽度。

Verify Before You Use

使用前验证

Rule: Never include an SLDS hook, utility class, blueprint class, or icon in generated code without first confirming it exists in the metadata. Guessing based on naming patterns is the primary source of invented artifacts.
Run the appropriate search command before emitting any SLDS artifact:
ArtifactVerification commandSource of truth
Styling hook (
--slds-g-*
)
node scripts/search-hooks.cjs --prefix "<hook-name>"
metadata/hooks-index.json
Utility class (
slds-*
)
node scripts/search-utilities.cjs --search "<class-name>"
metadata/utilities-index.json
Blueprint / CSS class
node scripts/search-blueprints.cjs --search "<pattern>"
then read the YAML
metadata/blueprints/components/*.yaml
Icon
node scripts/search-icons.cjs --query "<description>"
metadata/icon-metadata.json
If the search returns no match: do not use the artifact. Find an alternative from the search results or build custom with verified hooks.
规则： 在生成的代码中加入SLDS钩子、工具类、蓝图类或图标之前，务必先确认它们存在于元数据中。基于命名模式猜测是导致资源不存在的主要原因。
在输出任何SLDS资源之前，运行相应的搜索命令：
资源类型验证命令可信来源
样式钩子（
--slds-g-*
）
node scripts/search-hooks.cjs --prefix "<hook-name>"
metadata/hooks-index.json
工具类（
slds-*
）
node scripts/search-utilities.cjs --search "<class-name>"
metadata/utilities-index.json
蓝图/CSS类
node scripts/search-blueprints.cjs --search "<pattern>"
然后读取YAML文件
metadata/blueprints/components/*.yaml
图标
node scripts/search-icons.cjs --query "<description>"
metadata/icon-metadata.json
如果搜索无结果：请勿使用该资源。从搜索结果中寻找替代方案，或使用已验证的钩子构建自定义组件。

Naming Conventions

命名规范

Use a consistent prefix for custom classes to avoid collision with SLDS:
PatternUse CaseExample
my-*
General custom styling
my-card-header
c-*
LWC component-specific
c-accountList-row
[namespace]-*
Package/app namespace
acme-dashboard-widget
Avoid: generic names (
container
, 
wrapper
), SLDS-like names (
custom-slds-button
), BEM on SLDS classes (
slds-card__custom-header
).
Custom hook namespacing:
css
:root {
  --my-app-primary: var(--slds-g-color-accent-1);
  --my-app-card-padding: var(--slds-g-spacing-4);
}
为自定义类使用一致的前缀，避免与SLDS冲突：
模式使用场景示例
my-*
通用自定义样式
my-card-header
c-*
LWC组件专属
c-accountList-row
[namespace]-*
包/应用命名空间
acme-dashboard-widget
避免： 通用名称（
container
、
wrapper
）、类似SLDS的名称（
custom-slds-button
）、在SLDS类上使用BEM命名法（
slds-card__custom-header
）。
自定义钩子命名空间：
css
:root {
  --my-app-primary: var(--slds-g-color-accent-1);
  --my-app-card-padding: var(--slds-g-spacing-4);
}

Knowledge Map

知识图谱

This skill bundles comprehensive SLDS knowledge. Read files as needed -- don't read everything upfront.
本技能包含全面的SLDS知识。按需阅读文件——无需提前通读所有内容。

Decision Guides (start here for each task)

决策指南（每项任务从这里开始）

FileRead when
references/component-selection.mdChoosing a component or blueprint
references/styling-decision-guide.mdApplying colors, spacing, typography, shadows
references/icons-decision-guide.mdSelecting or implementing an icon
references/utilities-quick-ref.mdUsing utility classes for layout/spacing
文件阅读场景
references/component-selection.md选择组件或蓝图时
references/styling-decision-guide.md应用颜色、间距、排版、阴影时
references/icons-decision-guide.md选择或实现图标时
references/utilities-quick-ref.md使用工具类进行布局/间距设置时

Search Scripts (find specific artifacts)

搜索脚本（查找特定资源）

ScriptWhat it searchesExample
scripts/search-blueprints.cjs
85 blueprint YAMLs
--search "dialog"
scripts/search-hooks.cjs
523 styling hooks
--prefix "--slds-g-color-accent-"
scripts/search-icons.cjs
1,732 icons with synonyms
--query "save button"
scripts/search-utilities.cjs
1,147 utility classes
--category "grid"
脚本搜索内容示例
scripts/search-blueprints.cjs
85个蓝图YAML文件
--search "dialog"
scripts/search-hooks.cjs
523个样式钩子
--prefix "--slds-g-color-accent-"
scripts/search-icons.cjs
1,732个带同义词的图标
--query "save button"
scripts/search-utilities.cjs
1,147个工具类
--category "grid"

Deep-Dive Guidance (read for detailed rules)

深度指导（阅读以了解详细规则）

FolderContentIndex
guidance/overviews/
Foundational concepts (color, spacing, typography, etc.)guidance/README.md
guidance/styling-hooks/
Hook categories with detailed usageguidance/README.md
guidance/utilities/
27 utility class categoriesguidance/README.md
guidance/slds-development-guide.md
Full SLDS development guide--
文件夹内容索引
guidance/overviews/
基础概念（颜色、间距、排版等）guidance/README.md
guidance/styling-hooks/
钩子类别及详细用法guidance/README.md
guidance/utilities/
27个工具类类别guidance/README.md
guidance/slds-development-guide.md
完整的SLDS开发指南--

Raw Metadata (structured data for lookup)

原始元数据（用于查找的结构化数据）

Do not read metadata JSON files directly — they are too large for agent context (hooks-index.json is 6,000+ lines; icon-metadata.json is 38,000+ lines). Use the search scripts above to query them.
FileContentLines
metadata/blueprints/components/*.yaml
85 blueprint specs (classes, variants, a11y, HTML)~50-200 each
metadata/hooks-index.json
523 hooks with values and CSS properties~6,300
metadata/icon-metadata.json
1,732 icons with synonyms for search~38,500
metadata/utilities-index.json
1,147 utility classes with CSS rules~6,900
请勿直接阅读元数据JSON文件——它们过大，超出Agent上下文范围（hooks-index.json有6000多行；icon-metadata.json有38000多行）。请使用上述搜索脚本进行查询。
文件内容行数
metadata/blueprints/components/*.yaml
85个蓝图规范（类、变体、可访问性、HTML）每个约50-200行
metadata/hooks-index.json
523个钩子及其值和CSS属性~6,300行
metadata/icon-metadata.json
1,732个带搜索同义词的图标~38,500行
metadata/utilities-index.json
1,147个工具类及其CSS规则~6,900行

Authoring Workflow

创作流程

Phase 1: Understand the Need

阶段1：理解需求

Identify:
  • What UI pattern is needed? (form, table, modal, card, etc.)
  • What framework? (LWC, React, Vue, Angular, vanilla)
  • What data will it display?
  • What states does it need? (loading, empty, error, success)
确定：
  • 需要什么UI模式？（表单、表格、模态框、卡片等）
  • 使用什么框架？（LWC、React、Vue、Angular、原生JS）
  • 将显示什么数据？
  • 需要哪些状态？（加载、空状态、错误、成功）

Phase 2: Select the Artifact

阶段2：选择资源

  1. If LWC: Check the Lightning Component Library for an LBC
  2. Search blueprints: 
    node scripts/search-blueprints.cjs --search "<pattern>"
  3. Read the blueprint YAML: 
    metadata/blueprints/components/<name>.yaml
    for exact classes, modifiers, states, and accessibility requirements
  4. No match? Build custom with hooks (see Phase 3)
Details: references/component-selection.md
  1. 如果是LWC：查看Lightning Component Library是否有对应的LBC
  2. 搜索蓝图：
    node scripts/search-blueprints.cjs --search "<pattern>"
  3. 读取蓝图YAML文件：
    metadata/blueprints/components/<name>.yaml
    获取精确的类、修饰符、状态和可访问性要求
  4. 无匹配结果？ 使用钩子构建自定义组件（见阶段3）
详情：references/component-selection.md

Phase 3: Apply Styling

阶段3：应用样式

  1. Read: references/styling-decision-guide.md
  2. Colors: Classify role (surface, accent, feedback, border) then pick hook
  3. Spacing: Use utility classes (
    slds-p-*
    , 
    slds-m-*
    ) or hooks (
    --slds-g-spacing-*
    )
  4. Layout: Use grid utilities (
    slds-grid
    , 
    slds-col
    , 
    slds-size_*
    )
  5. Custom CSS: Use 
    var(--slds-g-*, fallback)
    , custom class prefixes only
  1. 阅读：references/styling-decision-guide.md
  2. 颜色：分类角色（表面、强调、反馈、边框）然后选择钩子
  3. 间距：使用工具类（
    slds-p-*
    、
    slds-m-*
    ）或钩子（
    --slds-g-spacing-*
    ）
  4. 布局：使用网格工具类（
    slds-grid
    、
    slds-col
    、
    slds-size_*
    ）
  5. 自定义CSS：仅使用
    var(--slds-g-*, fallback)
    和自定义类前缀

Phase 4: Add Icons

阶段4：添加图标

  1. Read: references/icons-decision-guide.md
  2. Search: 
    node scripts/search-icons.cjs --query "<description>"
  3. In LWC: Use 
    <lightning-icon>
    with 
    alternative-text
  4. In non-LWC: Use SVG with 
    slds-icon
    classes and 
    slds-assistive-text
  1. 阅读：references/icons-decision-guide.md
  2. 搜索：
    node scripts/search-icons.cjs --query "<description>"
  3. 在LWC中：使用
    <lightning-icon>
    并添加
    alternative-text
  4. 在非LWC中：使用SVG并添加
    slds-icon
    类和
    slds-assistive-text

Phase 5: Validate (Mandatory — Do Not Skip)

阶段5：验证（必填——请勿跳过）

Step 1: Run the SLDS linter. This is required. Zero violations is the target.
bash
npx @salesforce-ux/slds-linter@latest lint <component-path>
The linter catches hardcoded values, class overrides, and deprecated tokens. Fix all violations before proceeding. Do not rationalize violations as acceptable.
Step 2: Verify no invented hooks. Confirm every 
--slds-g-*
hook in the output exists in 
metadata/hooks-index.json
. Cross-reference against the T051 check in checklists.md.
Step 3: Run through checklists.md for the checks the linter cannot automate:
  • All 
    var(--slds-g-*)
    have fallback values (T002)
  • Surface/accent/feedback color hooks are properly paired (T010–T013)
  • Spacing uses hooks or utility classes — no magic 
    px
    values (T020–T021)
  • Font sizes use 
    --slds-g-font-scale-*
    , not 
    --slds-g-font-size-N
    (T031)
  • All icons have accessibility text (A004)
  • Custom classes use 
    my-*
    or 
    c-*
    prefix (Q010)
Step 4 (optional): Run the full quality audit using the 
design-systems-slds-validate
skill for a scored report before code review or deployment. Use it directly for LWC / HTML-CSS-JS components; for JSX/TSX outputs, treat the result as partial coverage only. Target a B grade (≥80) or higher before marking work complete.
步骤1：运行SLDS检查器。这是必填项。目标是零违规。
bash
npx @salesforce-ux/slds-linter@latest lint <component-path>
检查器会捕获硬编码值、类覆盖和已弃用令牌。修复所有违规后再继续。请勿将违规合理化。
步骤2：验证无虚构钩子。确认输出中每个
--slds-g-*
钩子都存在于
metadata/hooks-index.json
中。对照checklists.md中的T051检查项进行交叉验证。
步骤3：通读checklists.md，检查检查器无法自动检测的项：
  • 所有
    var(--slds-g-*)
    都有回退值（T002）
  • 表面/强调/反馈颜色钩子已正确配对（T010–T013）
  • 间距使用钩子或工具类——无魔法
    px
    值（T020–T021）
  • 字体大小使用
    --slds-g-font-scale-*
    ，而非
    --slds-g-font-size-N
    （T031）
  • 所有图标都有可访问性文本（A004）
  • 自定义类使用
    my-*
    或
    c-*
    前缀（Q010）
步骤4（可选）：运行全面质量审计 使用
design-systems-slds-validate
技能获取评分报告，然后再进行代码审查或部署。直接用于LWC/HTML-CSS-JS组件；对于JSX/TSX输出，仅将结果作为部分覆盖。目标达到B级（≥80分）或更高后再标记工作完成。

Quick Reference

快速参考

Common Hook Patterns

常见钩子模式

css
/* Surface + text pairing (always use numbered variants) */
background: var(--slds-g-color-surface-1, #ffffff);
color: var(--slds-g-color-on-surface-2, #181818);

/* Standard padding */
padding: var(--slds-g-spacing-4, 1rem);

/* Card-like container */
border-radius: var(--slds-g-radius-border-2, 0.25rem);
box-shadow: var(--slds-g-shadow-1, 0 2px 4px rgba(0,0,0,0.1));

/* Accent for primary actions */
background: var(--slds-g-color-accent-1, #0176d3);
color: var(--slds-g-color-on-accent-1, #ffffff);

/* Typography -- use font-scale-*, NOT font-size-* (only font-size-base exists) */
font-size: var(--slds-g-font-scale-2, 0.875rem);
css
/* 表面+文本配对（始终使用带编号的变体） */
background: var(--slds-g-color-surface-1, #ffffff);
color: var(--slds-g-color-on-surface-2, #181818);

/* 标准内边距 */
padding: var(--slds-g-spacing-4, 1rem);

/* 卡片式容器 */
border-radius: var(--slds-g-radius-border-2, 0.25rem);
box-shadow: var(--slds-g-shadow-1, 0 2px 4px rgba(0,0,0,0.1));

/* 主要操作的强调色 */
background: var(--slds-g-color-accent-1, #0176d3);
color: var(--slds-g-color-on-accent-1, #ffffff);

/* 排版——使用font-scale-*，而非font-size-*（仅存在font-size-base） */
font-size: var(--slds-g-font-scale-2, 0.875rem);

Common Utility Patterns

常见工具类模式

html
<!-- Responsive grid -->
<div class="slds-grid slds-wrap slds-gutters">
  <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2">...</div>
</div>

<!-- Spacing -->
<div class="slds-p-around_medium slds-m-bottom_small">...</div>

<!-- Truncation -->
<p class="slds-truncate" title="Full text here">Full text here</p>
html
<!-- 响应式网格 -->
<div class="slds-grid slds-wrap slds-gutters">
  <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2">...</div>
</div>

<!-- 间距设置 -->
<div class="slds-p-around_medium slds-m-bottom_small">...</div>

<!-- 文本截断 -->
<p class="slds-truncate" title="完整文本">完整文本</p>

Examples

示例

See examples.md for worked examples demonstrating the full workflow from intent to SLDS artifact selection.
详见examples.md，包含从需求到SLDS资源选择的完整流程示例。

Validation

验证

See checklists.md for validation checklists aligned with the design-systems-slds-validate skill.
详见checklists.md，包含与design-systems-slds-validate技能对齐的验证检查清单。

Resources

资源

ResourceURL
SLDS Websitehttps://www.lightningdesignsystem.com/
Lightning Component Libraryhttps://developer.salesforce.com/docs/component-library/overview/components
SLDS Linterhttps://developer.salesforce.com/docs/platform/slds-linter/guide
Styling Hooks Referencehttps://www.lightningdesignsystem.com/2e1ef8501/p/591960-global-styling-hooks
资源网址
SLDS官网https://www.lightningdesignsystem.com/
Lightning组件库https://developer.salesforce.com/docs/component-library/overview/components
SLDS检查器https://developer.salesforce.com/docs/platform/slds-linter/guide
样式钩子参考https://www.lightningdesignsystem.com/2e1ef8501/p/591960-global-styling-hooks