# UIkit 设计系统

## UIkit 设计系统界面预览

在三个会话之间切换、展开准备详情、选择会话，并验证本地参会者计划。

## UIkit 设计系统设计参考

UIkit 3.25.25 Less 源码与编译后的默认 CSS。@ 名称是编译时 Less 变量，不是运行时 CSS 自定义属性。预览还加入了明确说明的屏幕专属覆盖样式。

### 排版

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| @global-font-family | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | 默认系统字体栈。 |
| @global-font-size | 16px | 基础字号。 |
| @global-line-height | 1.5 | 正文节奏。 |
| @global-large-font-size | 1.5rem | 大号文本辅助类。 |
| @global-medium-font-size | 1.25rem | 中号文本辅助类。 |
| @global-small-font-size | 0.875rem | 小号文本辅助类。 |
### 颜色角色

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| @global-color | #666 | 默认文本颜色。 |
| @global-emphasis-color | #333 | 较强调的文本与标题。 |
| @global-muted-color | #999 | 默认弱化文本；预览将元数据覆盖为 #65717a。 |
| @global-link-color | #1e87f0 | 默认链接样式。 |
| @global-background | #fff | 默认页面/表面背景。 |
| @global-muted-background | #f8f8f8 | 弱化的卡片/表面。 |
| @global-primary-background | #1e87f0 | 主要强调色表面。 |
| @global-secondary-background | #222 | 次级深色表面。 |
| @global-border | #e5e5e5 | 中性色边框。 |
### 间距与控件

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| @global-margin | 20px | 默认外边距节奏。 |
| @global-small-margin | 10px | 小外边距。 |
| @global-medium-margin | 40px | 中外边距。 |
| @global-large-margin | 70px | 大外边距。 |
| @global-gutter | 30px | 默认网格间距。 |
| @global-small-gutter | 15px | 小网格间距。 |
| @global-medium-gutter | 40px | 中网格间距。 |
| @global-control-height | 40px | 常规输入框/按钮高度。 |
| @global-control-small-height | 30px | 小型控件高度。 |
| @global-control-large-height | 55px | 大型控件高度。 |
### 响应式范围

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| @breakpoint-small | 640px | @s 宽度规则起始。 |
| @breakpoint-medium | 960px | @m 宽度规则起始；规划器采用两栏布局。 |
| @breakpoint-large | 1200px | @l 宽度规则起始。 |
| @breakpoint-xlarge | 1600px | @xl 宽度规则起始。 |
### 原始研讨会细节调整

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| Heading | 42px; 34px below 640px | 对 uk-heading-small 的明确本地覆盖。 |
| Card padding | 28px; 20px below 640px | 明确的本地紧凑布局。 |
| Metadata color | #65717a | 在浅色表面上使用更深的本地元数据文本。 |
| Focus outline | 3px solid #145ca5, offset 4px | 为标签页、手风琴标题和按钮添加键盘焦点强调。 |
## UIkit 设计系统完整指南

实用指南，介绍如何为真实界面选择、应用和评审此系统。

完整指导、实现起点和源代码链接。

## UIkit 设计系统 CSS 类与属性驱动的行为

### CSS 类与属性驱动的行为

> UIkit 将 CSS 框架与 JavaScript 组件层结合起来。uk-card 类用于设置表面样式；uk-switcher 属性用于初始化交互组件。研讨会示例清楚展示了两者的区别：仅使用 CSS 就能渲染卡片和表单控件，但会话切换和手风琴展开则依赖 UIkit JavaScript 捆绑包。

预览在本地加载实际的 3.25.25 编译样式表和运行时。三个会话的时长和布局各不相同，因此切换展示的是真实内容行为，而不是在其他方面完全相同的卡片中更改标签。本地参会者计划脚本独立于 UIkit 的运行时，并在此完整提供。

阅读配套规范

## UIkit 设计系统 Less 变量与运行时样式

### Less 变量与运行时样式

以 @ 开头的参考项是 Less 变量，会在编译期间解析；在普通浏览器样式表中设置 @global-primary-background 不会更改运行时主题。表格列出的是从已安装源码中核实的值，而预览使用的是软件包预编译的默认 CSS。

要构建品牌化的 UIkit 主题，请使用文档说明的 Less 导入与自定义流程，然后重新编译。若只需微调独立页面，可在官方样式表之后使用普通 CSS 针对某个类进行设置。本示例采用后一种方式调整标题字号、卡片内边距和元数据颜色。请注意，这些覆盖样式并非新的官方 UIkit 令牌。

阅读配套规范

## UIkit 设计系统中的文本、颜色与界面表面层级

### 文本、颜色与界面表面层级

默认全局字体为系统字体栈，字号为十六像素，行高为 1.5。默认主背景色为 #1e87f0，次要背景色为深色中性色，弱化背景层为 #f8f8f8。这些角色让主操作按钮与较为克制的说明卡片形成鲜明区分。提供的规格表包含文本和界面表面层的值，而非仅仅列出四种装饰色。

工作坊页面使用尺寸较大但有所限制的标题、较小的活动标签，以及每张场次卡片中的标题。元数据颜色在局部加深为 #65717a。准备事项卡片使用自定义的浅蓝色背景层和普通深色文本。不要默认采用反色：深色背景需要适当的 UIkit 反色处理，或明确匹配的文本样式。

阅读配套规范

## UIkit 设计系统：将场次导航连接到内容

### 将会话导航与内容关联

导航列表使用带有 connect: #sessions 和淡入淡出动画的 uk-switcher。内容列表带有 uk-switcher 类和匹配的 ID。列表顺序决定对应关系：第一个切换项控制第一个内容项，因此添加或调整场次顺序时，必须同时更新两侧。明确指定 connect 选择器，可避免依赖紧邻兄弟元素的位置关系。

导航使用 uk-tab 设置视觉样式。UIkit 负责处理当前项状态及相关的无障碍行为。原有的计划状态则保持独立：查看其他场次不会自动将其选为计划场次。只有点击“选择场次”，才会更新所选标签并将焦点移至参与者字段。

1. 打开“原型设计”，查看其专属内容。

2. 选择该场次，并查看下方更新后的标签。

3. 切换到“系统诊疗”，但不要选择它；本地计划仍显示“原型设计”。

阅读配套规范

## UIkit 设计系统中的响应式宽度与间距归属

### 响应式宽度与间距归属

场次内容在 uk-grid 中使用 uk-width-2-3@m 和 uk-width-1-3@m。在 960px 的中等断点处，内容和准备事项卡片横向排列；低于该断点时则改为纵向堆叠。计划和准备事项部分在同一断点处采用匹配的半宽规则，确保在较小屏幕上仍按合理的顺序排列。

UIkit 的网格间距逻辑由其网格类控制。本示例在主要内容区使用 uk-grid-medium，在页眉中使用 uk-grid-small。不要在网格子项上随意添加外边距，并假定其分数宽度仍能正确相加。外层容器和内边距负责边缘留白；局部移动端样式则会缩小卡片内边距和标题字号。

阅读配套规范

## UIkit 设计系统：使用原生组件状态呈现准备事项详情

### 使用原生组件状态呈现准备详情

uk-accordion-default 类提供默认样式。uk-accordion 属性将 multiple 设为 true，因此展开一个准备事项的答案时，另一个答案不会随之关闭。每个项目都包含 uk-accordion-title 和 uk-accordion-content。运行时负责控制展开状态和内容的显示；仅使用 CSS 类并不能实现这些行为。

这两个问题分别解答不同的实际需求：需要携带什么，以及本地计划工具是否会为参与者预留席位。明确说明第二个答案，可以避免界面给人一种会与外部活动系统进行事务处理的印象。这一边界也不只体现在手风琴内容中；应用后的状态同样明确表示未预留席位。

- multiple: true 允许同时展开两个答案。

- 标题和内容必须保留在同一个手风琴项目中。

- 每个标题的键盘焦点轮廓都会保持可见。

阅读配套规范

## UIkit 设计系统：区分库的外观与应用验证

### 区分库的外观与应用验证

参与者字段在 uk-form-controls 中使用 uk-input，并配有真实的标签和说明文本。浏览器的必填验证会阻止空值提交。应用还会检查是否仅输入空白字符，并在无效事件发生时应用 uk-form-danger 和 aria-invalid，使视觉状态与语义状态保持一致。编辑字段内容时会清除过期的错误状态。

选择场次会更新本地选择，并将焦点移至姓名输入框。提交后会显示一条状态消息，包含参与者和所选场次。文本通过 textContent 插入，因此输入的标记不会被执行。这是一个没有后端的本地规划工具；UIkit 不会为表单虚构报名、保存或通知功能。

阅读配套规范

## UIkit 设计系统的加载顺序：CSS、运行时，然后是应用代码

### 按顺序加载 CSS、Runtime 和应用代码

安装 uikit@3.25.25，并将编译后的 CSS 和 JavaScript 从 dist 复制到本地资源目录。在小型布局覆盖样式之前加载 CSS，并在 app.js 之前加载 uikit.min.js。两个脚本都可以使用 defer，这样解析完成后仍会按源代码中的顺序执行。body 示例提供了所有组件属性和内容。

此处不需要图标包，因为页面没有使用 uk-icon。以后如果添加图标，请加载匹配的图标运行时，并为仅含图标的控件提供有意义的标签。不要仅因文件名相同，就混用较新的 JavaScript 包和较旧的样式表：组件结构和样式应来自同一个固定版本的包。

阅读配套规范

## UIkit 设计系统：随着内容增长，保持切换器连接稳定

### 内容增多时保持切换器连接稳定

切换器按顺序将导航项映射到内容项。添加场次时，需在相同位置同时添加两侧内容，而 connect: #sessions 则用于指定明确的目标。同一页面上有多个互不相关的切换器时，请为每个目标指定唯一 ID，并在初始化属性中保留对应关系。

所选工作坊与当前活动面板彼此独立。浏览其他场次时，不应悄然覆盖规划工具中已作出的选择。添加较长的面板后，请检查新激活面板中的共享响应式网格和折叠面板内容；如果只调整初始面板的尺寸，用户切换后才会暴露布局问题。

阅读配套规范

## UIkit 设计系统组件示例

### 使用原生 UIkit 属性的工作坊页面

切换器连接到 #sessions；折叠面板允许同时展开多个分区；网格宽度在 @m 断点启用。

```
<main class="uk-container uk-container-small uk-padding"><div class="uk-grid-small uk-flex-middle" uk-grid><div class="uk-width-1-1 uk-width-expand@s"><p class="uk-text-meta uk-text-uppercase">UIkit / Workshop program</p><h1 class="uk-heading-small">One afternoon.<br>Three ways to learn.</h1></div><div><span class="uk-label">Local planner</span></div></div><ul class="uk-tab uk-margin-medium-top" uk-switcher="connect: #sessions; animation: uk-animation-fade"><li><a href="#">Design critique</a></li><li><a href="#">Prototyping</a></li><li><a href="#">Systems clinic</a></li></ul><ul class="uk-switcher" id="sessions"><li><div class="uk-card uk-card-default uk-card-body"><div class="uk-grid-medium" uk-grid><div class="uk-width-2-3@m"><p class="uk-text-meta">13:00–14:00 / STUDIO A</p><h2 class="uk-card-title">A useful critique starts with context.</h2><p>Bring one interface and a question you cannot resolve alone. Practice separating observation, interpretation, and a proposed change.</p><ul class="uk-list uk-list-bullet"><li>Frame the user’s task before discussing style.</li><li>Compare two alternatives against the same goal.</li><li>Leave with one specific next experiment.</li></ul></div><div class="uk-width-1-3@m"><div class="uk-tile uk-tile-muted uk-padding-small"><strong>Bring with you</strong><p>A screenshot, a short task description, and one unresolved decision.</p><button class="uk-button uk-button-primary uk-width-1-1 choose" data-session="Design critique">Choose session</button></div></div></div></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">14:15–15:15 / STUDIO B</p><h2 class="uk-card-title">Prototype the difficult transition.</h2><p>Build a small interaction that covers an empty state, an interrupted action, and recovery. The target is a useful decision, not a polished full product.</p><p>Bring a laptop and a flow with one state transition you need to test.</p><button class="uk-button uk-button-primary choose" data-session="Prototyping">Choose session</button></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">15:30–16:30 / STUDIO A</p><h2 class="uk-card-title">Make the exception explicit.</h2><p>Compare two components that almost match. Decide whether their difference belongs in a token, a variant, a composition, or a one-off exception.</p><p>Bring a component screenshot and its current implementation constraints.</p><button class="uk-button uk-button-primary choose" data-session="Systems clinic">Choose session</button></div></li></ul><div class="uk-grid-medium uk-margin-medium-top" uk-grid><section class="uk-width-1-2@m"><h2 class="uk-h3">Plan details</h2><form class="uk-form-stacked" id="planner"><div class="uk-margin"><label class="uk-form-label" for="attendee">Attendee name</label><div class="uk-form-controls"><input class="uk-input" id="attendee" required placeholder="Your name" aria-describedby="name-help"></div><p id="name-help" class="uk-text-small">Use a name to label this local plan.</p></div><p>Selected: <strong id="chosen">Design critique</strong></p><button class="uk-button uk-button-secondary" type="submit">Add to local plan</button><p id="result" role="status" class="uk-text-small">No plan recorded yet.</p></form></section><section class="uk-width-1-2@m"><h2 class="uk-h3">Before you arrive</h2><ul class="uk-accordion-default" uk-accordion="multiple: true"><li><a class="uk-accordion-title" href="#">What should I prepare?</a><div class="uk-accordion-content"><p>Pick one concrete design decision. A small, well-described example is more useful than a whole product tour.</p></div></li><li><a class="uk-accordion-title" href="#">Does this reserve a seat?</a><div class="uk-accordion-content"><p>No. This preview records a choice only in memory. It is not connected to an event or registration service.</p></div></li></ul></section></div><p class="uk-text-meta uk-margin-medium-top">Official UIkit 3.25.25 CSS and JavaScript. Session content and plan behavior are original.</p></main>
```

代码参考

- uk-switcher 属性用于初始化行为；uk-switcher 类用于标识其内容容器。

- 此布局不需要 UIkit 图标包。

### 原有的本地规划工具行为

场次选择和验证属于应用逻辑，与原生 UIkit 交互并存。

```
const name=document.getElementById('attendee');const chosen=document.getElementById('chosen');const result=document.getElementById('result');document.querySelectorAll('.choose').forEach(button=>button.addEventListener('click',()=>{chosen.textContent=button.dataset.session;result.textContent='Choice updated. Add it to the local plan when ready.';name.focus()}));name.addEventListener('input',()=>{name.setCustomValidity('');name.classList.remove('uk-form-danger');name.removeAttribute('aria-invalid')});name.addEventListener('invalid',()=>{name.classList.add('uk-form-danger');name.setAttribute('aria-invalid','true')});document.getElementById('planner').addEventListener('submit',event=>{event.preventDefault();if(!name.value.trim()){name.setCustomValidity('Enter a non-empty name.');name.reportValidity();return;}result.textContent=name.value.trim()+' — '+chosen.textContent+' added to this local plan. No seat was reserved.';});
```

代码参考

- 选择场次后，焦点会移至参与者输入框。

- 不会调用预订服务，也不会发送通知。

### 明确的屏幕级微调

保留 UIkit 组件，同时微调间距和焦点样式。

```
body{background:#fafafa}.uk-container-small{max-width:1040px}.uk-heading-small{font-size:42px}.uk-card-body{padding:28px}.uk-text-meta{color:#65717a}.uk-button{white-space:normal}.uk-tab{flex-wrap:wrap}.uk-card-title{font-size:24px;line-height:1.3}.uk-tile-muted{background:#edf3f8}.uk-button:focus-visible,.uk-tab a:focus-visible,.uk-accordion-title:focus-visible{outline:3px solid #145ca5;outline-offset:4px}@media(max-width:639px){.uk-padding{padding:20px}.uk-heading-small{font-size:34px}.uk-card-body{padding:20px}.uk-card-title{font-size:22px}}
```

代码参考

- 这些覆盖样式并非官方默认令牌值。

## UIkit 设计系统 AI Agent 设置

### 实现起点

将提供的屏幕微调样式保存为 style.css，并将本地规划工具行为保存为 app.js。UIkit 负责处理切换器和折叠面板。此布局不需要图标包。HTML 封装了完整的 body 标记；请将提供的交互示例和 CSS 示例保存为此处引用的文件名。

```
<!-- npm install uikit@3.25.25
mkdir -p assets
cp node_modules/uikit/dist/css/uikit.min.css assets/
cp node_modules/uikit/dist/js/uikit.min.js assets/ -->
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Workshop planner</title>
<link rel="stylesheet" href="assets/uikit.min.css">
<link rel="stylesheet" href="style.css">
<script src="assets/uikit.min.js" defer></script>
<script src="app.js" defer></script></head>
<body><main class="uk-container uk-container-small uk-padding"><div class="uk-grid-small uk-flex-middle" uk-grid><div class="uk-width-1-1 uk-width-expand@s"><p class="uk-text-meta uk-text-uppercase">UIkit / Workshop program</p><h1 class="uk-heading-small">One afternoon.<br>Three ways to learn.</h1></div><div><span class="uk-label">Local planner</span></div></div><ul class="uk-tab uk-margin-medium-top" uk-switcher="connect: #sessions; animation: uk-animation-fade"><li><a href="#">Design critique</a></li><li><a href="#">Prototyping</a></li><li><a href="#">Systems clinic</a></li></ul><ul class="uk-switcher" id="sessions"><li><div class="uk-card uk-card-default uk-card-body"><div class="uk-grid-medium" uk-grid><div class="uk-width-2-3@m"><p class="uk-text-meta">13:00–14:00 / STUDIO A</p><h2 class="uk-card-title">A useful critique starts with context.</h2><p>Bring one interface and a question you cannot resolve alone. Practice separating observation, interpretation, and a proposed change.</p><ul class="uk-list uk-list-bullet"><li>Frame the user’s task before discussing style.</li><li>Compare two alternatives against the same goal.</li><li>Leave with one specific next experiment.</li></ul></div><div class="uk-width-1-3@m"><div class="uk-tile uk-tile-muted uk-padding-small"><strong>Bring with you</strong><p>A screenshot, a short task description, and one unresolved decision.</p><button class="uk-button uk-button-primary uk-width-1-1 choose" data-session="Design critique">Choose session</button></div></div></div></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">14:15–15:15 / STUDIO B</p><h2 class="uk-card-title">Prototype the difficult transition.</h2><p>Build a small interaction that covers an empty state, an interrupted action, and recovery. The target is a useful decision, not a polished full product.</p><p>Bring a laptop and a flow with one state transition you need to test.</p><button class="uk-button uk-button-primary choose" data-session="Prototyping">Choose session</button></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">15:30–16:30 / STUDIO A</p><h2 class="uk-card-title">Make the exception explicit.</h2><p>Compare two components that almost match. Decide whether their difference belongs in a token, a variant, a composition, or a one-off exception.</p><p>Bring a component screenshot and its current implementation constraints.</p><button class="uk-button uk-button-primary choose" data-session="Systems clinic">Choose session</button></div></li></ul><div class="uk-grid-medium uk-margin-medium-top" uk-grid><section class="uk-width-1-2@m"><h2 class="uk-h3">Plan details</h2><form class="uk-form-stacked" id="planner"><div class="uk-margin"><label class="uk-form-label" for="attendee">Attendee name</label><div class="uk-form-controls"><input class="uk-input" id="attendee" required placeholder="Your name" aria-describedby="name-help"></div><p id="name-help" class="uk-text-small">Use a name to label this local plan.</p></div><p>Selected: <strong id="chosen">Design critique</strong></p><button class="uk-button uk-button-secondary" type="submit">Add to local plan</button><p id="result" role="status" class="uk-text-small">No plan recorded yet.</p></form></section><section class="uk-width-1-2@m"><h2 class="uk-h3">Before you arrive</h2><ul class="uk-accordion-default" uk-accordion="multiple: true"><li><a class="uk-accordion-title" href="#">What should I prepare?</a><div class="uk-accordion-content"><p>Pick one concrete design decision. A small, well-described example is more useful than a whole product tour.</p></div></li><li><a class="uk-accordion-title" href="#">Does this reserve a seat?</a><div class="uk-accordion-content"><p>No. This preview records a choice only in memory. It is not connected to an event or registration service.</p></div></li></ul></section></div><p class="uk-text-meta uk-margin-medium-top">Official UIkit 3.25.25 CSS and JavaScript. Session content and plan behavior are original.</p></main>
</body></html>
```

### 适用于你项目的提示词

```
使用 UIkit 3.25.25 扩展提供的工作坊规划工具。保留带有明确 #sessions 连接的 uk-switcher、匹配的导航与内容顺序、uk-grid 响应式比例，以及原生的多项展开折叠面板。查看场次与选择场次必须保持相互独立。选择场次后，焦点移至带标签的参与者输入框；如果提交内容只有空白字符，则必须显示 uk-form-danger 并设置 aria-invalid。状态消息应将所选场次和参与者描述为本地计划，不得声称已预订席位。在应用脚本之前加载匹配的 UIkit 运行时。
```

## UIkit 设计系统：来源与范围

UIkit 3.25.25 原生组件参考。Less 值是编译时定义；本地标题、内边距和焦点样式覆盖为原创内容。此处不执行任何活动预订。

- Less 编译时主题变量。

- 切换器 导航与内容联动行为。

- 手风琴 多项展开与组件结构。

- 网格 响应式宽度与间距。

- Form 输入框与验证类。

- 安装 运行时与样式加载。

## UIkit 设计系统相关资源

### Vant

使用 Vant 4 构建移动端地址选择流程：采用真实的 CSS 变量、受控的地址标识、字段验证、主题切换，以及明确的仅本地保存功能。

### Vuestic UI

原生 Vuestic 评价表，采用经来源核实的浅色和深色预设、无障碍评分标签、文本区域验证、自动计算的平均分，以及可保留已完成评估的保存状态。

### Web Awesome

检查 Web Awesome 在原生自定义元素中的实际语义令牌，包括作用域内的圆角和间距调整、Shadow DOM 样式、选择控件行为和输入验证。


- [实现参考](https://getuikit.com/docs/switcher)
- [来源](https://getuikit.com/docs/less)
- [来源](https://getuikit.com/docs/utility)
- [阅读配套规范](https://getuikit.com/docs/javascript)
- [阅读配套规范](https://getuikit.com/docs/less)
- [阅读配套规范](https://getuikit.com/docs/card)
- [阅读配套规范](https://getuikit.com/docs/switcher)
- [阅读配套规范](https://getuikit.com/docs/grid)
- [阅读配套规范](https://getuikit.com/docs/accordion)
- [阅读配套规范](https://getuikit.com/docs/form)
- [阅读配套规范](https://getuikit.com/docs/installation)
- [代码参考](https://getuikit.com/docs/switcher)
- [代码参考](https://getuikit.com/docs/form)
- [代码参考](https://getuikit.com/docs/utility)
- [Less 编译时主题变量。](https://getuikit.com/docs/less)
- [切换器 导航与内容联动行为。](https://getuikit.com/docs/switcher)
- [手风琴 多项展开与组件结构。](https://getuikit.com/docs/accordion)
- [网格 响应式宽度与间距。](https://getuikit.com/docs/grid)
- [Form 输入框与验证类。](https://getuikit.com/docs/form)
- [安装 运行时与样式加载。](https://getuikit.com/docs/installation)