# Monday Vibe 设计系统

## Monday Vibe 设计系统界面预览

编辑行状态并完成所选项目；摘要计数会在本地更新。

## Monday Vibe 设计系统设计参考

Vibe 4 公共源码及 @vibe/core 集成。以下数值是经核实的浅色主题和样式定义；看板标签颜色与语义化成功/错误角色不同。原生示例在由应用控制的 HTML 表格中使用真正的 Vibe Button 控件。

### 当前间距变量

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --space-2 | 2px | 用于应用间距；数字型令牌名称沿用当前源码中的写法。 |
| --space-4 | 4px | 用于应用间距；数字型令牌名称沿用当前源码中的写法。 |
| --space-8 | 8px | 用于应用间距；数字型令牌名称沿用当前源码中的写法。 |
| --space-12 | 12px | 用于应用间距；数字型令牌名称沿用当前源码中的写法。 |
| --space-16 | 16px | 用于应用间距；数字型令牌名称沿用当前源码中的写法。 |
| --space-20 | 20px | 用于应用间距；数字型令牌名称沿用当前源码中的写法。 |
| --space-24 | 24px | 用于应用间距；数字型令牌名称沿用当前源码中的写法。 |
| --space-32 | 32px | 用于应用间距；数字型令牌名称沿用当前源码中的写法。 |
| --space-40 | 40px | 用于应用间距；数字型令牌名称沿用当前源码中的写法。 |
| --space-48 | 48px | 用于应用间距；数字型令牌名称沿用当前源码中的写法。 |
| --space-64 | 64px | 用于应用间距；数字型令牌名称沿用当前源码中的写法。 |
| --space-80 | 80px | 用于应用间距；数字型令牌名称沿用当前源码中的写法。 |
### 操作与界面表面颜色

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --primary-color | #0073ea | 主要操作。 |
| --primary-hover-color | #0060b9 | 悬停时的主要操作。 |
| --primary-selected-color | #cce5ff | 所选内容的背景。 |
| --primary-text-color | #323338 | 默认的易读文本。 |
| --secondary-text-color | #676879 | 次级标签。 |
| --primary-background-color | #ffffff | 主要界面表面。 |
| --allgrey-background-color | #f6f7fb | 应用背景。 |
| --ui-border-color | #c3c6d4 | 控件边界。 |
| --positive-color | #00854d | 语义化的正向操作。 |
| --negative-color | #d83a52 | 语义化的负向操作。 |
### 看板标签配色

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --color-done-green | #00c875 | 分类性的 Done 标签，不是语义化的正向颜色。 |
| --color-working_orange | #fdab3d | 分类性的 Working 标签；源码名称中包含下划线。 |
| --color-stuck-red | #df2f4a | 分类性的 Stuck 标签。 |
| --color-dark_purple | #784bd1 | 分组标识示例。 |
### 字体简写属性

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --font-family | Figtree, Roboto, Noto script fallbacks, sans-serif | 正文的字体系列；字体文件需单独安装。 |
| --title-font-family | Poppins, Roboto, Noto script fallbacks, sans-serif | 标题的字体系列。 |
| --font-h1-medium | 600 32px/40px; title family | 看板标题。 |
| --font-h2-medium | 600 24px/30px; title family | 分组标题。 |
| --font-h3-medium | 600 18px/24px; title family | 紧凑型小节。 |
| --font-text1-normal | 400 16px/22px; body family | 常规内容。 |
| --font-text2-normal | 400 14px/20px; body family | 密集型行内容。 |
| --font-text3-normal | 400 12px/16px; body family | 辅助说明。 |
### 圆角

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --border-radius-4 | 4px | 小型控件。 |
| --border-radius-8 | 8px | 中型容器。 |
| --border-radius-12 | 12px | 可用的数字型圆角档位。 |
| --border-radius-16 | 16px | 大型容器。 |
| --border-radius-small | var(--border-radius-4) | 命名的小号别名。 |
| --border-radius-medium | var(--border-radius-8) | 命名的中号别名。 |
| --border-radius-big | var(--border-radius-16) | 命名的大号别名。 |
### 按钮 API

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| kind | Default: primary | 视觉强调，包括本示例使用的三级操作。 |
| size | Default: medium | 紧凑型行操作使用小号圆角。 |
| type | Default: button | 表单提交时应显式设置 submit。 |
| disabled | boolean | 未选中任何行时，禁用批量操作。 |
| loading | boolean | 实际操作处于等待状态时显示加载指示器。 |
| active | boolean | 视觉上的激活状态；若用于切换控件，也应提供 aria-pressed。 |
| onClick | React mouse-event callback | 在此处更新应用状态。 |
| aria-pressed | ARIA pressed state | 若使用按钮切换控件，请传达行切换选择状态。 |
## Monday Vibe 设计系统完整指南

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

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

## Monday Vibe 设计系统：基于当前 Vibe 入口进行构建

### 核心组件与设计令牌 CSS 分别导入

> Vibe 4 通过 @vibe/core 提供具名的 React 组件，并通过 @vibe/core/tokens 提供 CSS 变量。在新的客户端应用中同时导入两者。组件可以注入自身样式，同时依赖令牌文件提供的变量。看板示例使用原生表格结构和真正的 Vibe Button 控件，行数据和选择状态由应用管理。

阅读配套规范

### 避免混用早期版本的程序包

较早的 monday-ui-react-core 程序包属于 Vibe 2。Vibe 3 仅维护关键问题修复，不再开发新功能。本指南使用当前的 Vibe 4 接口和编号间距变量。此集成不是 monday.com SDK 客户端，也未连接任何账户、工作区或项目 API。

阅读配套规范

## Monday Vibe 设计系统：操作颜色与看板标签用途不同

### 控件使用语义化角色

主要操作使用主色角色及其对应的悬停颜色。选中状态使用选中背景，常规文本则使用主要和次要文本角色。应将主题值作为相互关联的一组来使用，而不是单独更改正文背景。本地示例保持使用经核实的浅色主题。

阅读配套规范

### Done 单元格不是成功按钮

源码中既包含分类性的看板颜色，也包含语义化的反馈颜色。Done 绿色为 #00c875，而语义化的正向颜色为 #00854d。行状态单元格使用看板颜色并搭配对比度足够、易于阅读的文本，保留 Working、Stuck 和 Done 字样，绝不单靠颜色表达状态。

阅读配套规范

## Monday Vibe 设计系统：使用完整的字体简写属性

### 标题和工作行采用不同的字体风格

源码为标题指定 Poppins，为正文内容指定 Figtree，并提供适配文字脚本的后备字体。当前的 h1-medium 简写属性为 600 32px/40px，而 text2-normal 为 400 14px/20px。使用 CSS font 属性应用简写值，使字重、字号、行高和字体系列保持关联。源码还包含较早的标题别名；不要在不说明的情况下替换为尺寸不同的样式。

阅读配套规范

### 有计划地加载字体文件

Vibe 不会自动导入推荐的字体文件。请在应用 HTML 中添加文档所述的 Figtree/Poppins 样式表链接，或自行托管已获适当许可的字体文件。离线示例明确使用系统后备字体，因此其呈现是一种诠释，并不代表与 monday.com 的字体排印完全一致。

阅读配套规范

## Monday Vibe 设计系统：紧凑看板，不压缩控件

### 使用编号间距构建节奏

相邻工具栏操作之间使用 --space-8，面板内边距使用 --space-16，看板区域之间使用 --space-24。这些都是当前源码中的确切名称。这些具体用法是本应用的选择。间距比例中还包含用于精细对齐的 2px 档位，以及最高达 80px、适用于整体布局的更大数值。

阅读配套规范

### 圆角用于建立容器边界

small 对应 4 像素，medium 对应 8 像素，big 对应 16 像素。为看板外层设置 medium 圆角，同时让表格单元格保持方正并对齐。将每个彩色单元格都做成圆角徽标，会让密集的列关系更难浏览。

阅读配套规范

## Monday Vibe 设计系统：带批量工具栏的可编辑表格

### 明确数据结构

每个工作项都有稳定的 id、标题、负责人和状态。原生列标题说明这些值的含义。行复选框会将 id 添加到 Set；更改状态时，会替换匹配的对象，而不是直接修改数组。“完成所选项”操作会读取同一个 Set，并仅更新选中的行。完成情况摘要根据各行数据计算得出。

- 当选择 Set 为空时，批量主按钮处于禁用状态。

- 每行的三级操作会循环切换本地状态，仅用于演示。

- 重置操作会恢复初始行数据并清空选择。

阅读配套规范

## Monday Vibe 设计系统：通过实际的 Button 暴露状态 API

### 禁用、加载和按下是不同状态

原生示例会在批量操作不可用时使用 disabled。由于没有远程操作，因此不会显示加载或成功状态。如果要接入真实的持久化层，应将 loading 绑定到请求生命周期，并仅在确认后更新成功状态。Button 源码还提供用于控制外观的 active 属性，以及用于切换语义的 aria-pressed；两者不能互相替代。

阅读配套规范

### 不要将本地编辑说成已同步到服务

实时消息会说明有多少个本地项目发生了更改，不会声称 monday.com 看板已更新。重新加载后，会恢复初始示例数据。生产环境集成还需要在设计系统层之外明确处理工作区权限、错误和数据同步。

阅读配套规范

## Monday Vibe 设计系统：不同宽度下保持行的语义

### 合理调整演示布局

在窄屏上，离线看板会将每行重新排布为带标签的项目卡片。列名会作为可见标签重复显示，以便理解负责人和状态。此处展示的是一种应用布局方案，并不表示 Vibe 会自动转换所有表格。作为另一种适合较密集数据的方案，原生起始模板会在带标签的水平溢出区域中保留语义化表格。

阅读配套规范

### 全局盒模型设置是前提

使用该库之前，请先为元素和伪元素应用 border-box。否则，固定宽度的单元格加上内边距后可能超出预期尺寸，尤其是在密集列中嵌套按钮时。外层容器应保持灵活，并允许工具栏操作换行。

阅读配套规范

## Monday Vibe 设计系统：为选择控件和状态分别设置名称

### 为每行的控件添加标签

选择复选框的可访问名称中包含工作项标题。每个状态操作都包含项目名称和当前状态。礼貌提示消息会播报批量操作结果。键盘用户可以使用原生控件选择行、执行批量命令并重置看板；页面不会自行添加电子表格式的方向键行为。

1. 选择“设计交接”，并确认批量操作已启用。

2. 完成所选项目，并检查状态文本与计算得出的数量是否一致。

3. 重置并确认数据和复选框选择都已恢复到初始状态。

阅读配套规范

## Monday Vibe 设计系统：完整的客户端入口

### 安装、导入、挂载

以下设置是 main.jsx 入口文件，适用于包含根元素的 React 客户端项目。安装 react、react-dom 和 @vibe/core@4，只加载一次 token CSS，并应用所列的全局样式表。当前软件包使用 ES 模块导出。服务端样式提取仍作为实验功能记录在文档中；此起始模板有意采用客户端渲染。

阅读配套规范

## Monday Vibe 设计系统组件示例

### 完整的独立交互示例

将完整文档保存为 index.html 并在浏览器中打开。独立的 HTML/CSS 实现采用经核实的 Vibe 浅色主题配色、间距和字体排印尺寸；字体使用系统回退方案。

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Weekly delivery — Vibe study</title><style>*{box-sizing:border-box}body{margin:0;background:#f6f7fb;color:#323338;font:14px/20px Arial,sans-serif}button,input{font:inherit}button{cursor:pointer;border:0;border-radius:4px;padding:8px 16px;background:white;color:#323338}button:hover{background:#e7e9ef}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible{outline:3px solid #0073ea;outline-offset:2px}.shell{display:grid;grid-template-columns:180px minmax(0,1fr);min-height:600px}aside{padding:24px 16px;border-right:1px solid #d0d4e4;background:#fff}.brand{font-size:20px;font-weight:bold;margin-bottom:40px}.brand span{color:#0073ea}aside p{font-size:12px;color:#676879}aside strong{display:block;background:#cce5ff;padding:12px;border-radius:4px;color:#323338}main{padding:32px;min-width:0}h1{font-size:32px;line-height:40px;font-weight:600;margin:0 0 8px}.sub{color:#676879}.overview{margin:24px 0;display:grid;grid-template-columns:1fr 2fr;gap:24px;align-items:center}.count{font-size:32px;line-height:40px}.count small{font-size:14px;color:#676879}.bar{display:flex;border-radius:8px;overflow:hidden;height:16px;background:#e7e9ef}.bar span{transition:width .15s}.legend{display:flex;gap:16px;font-size:12px;margin-top:8px}.legend span:before{content:'●';color:var(--c);margin-right:4px}.tools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.primary{background:#0073ea;color:white}.primary:hover{background:#0060b9}h2{font-size:18px;line-height:24px;color:#784bd1;font-weight:600}.board{border-left:6px solid #784bd1;border-radius:8px;background:white;overflow:hidden}.row,.head{display:grid;grid-template-columns:36px minmax(180px,1fr) 90px 130px;align-items:center;min-height:52px;border-bottom:1px solid #d0d4e4}.head{color:#676879;min-height:36px;font-size:12px}.row>*{padding:12px}.head>*{padding:8px}.row label{display:flex;align-items:center;justify-content:center}.row input{accent-color:#0073ea}.row .status{border-radius:0;height:100%;font-weight:500}.status[data-status=Working]{background:#fdab3d}.status[data-status=Stuck]{background:#df2f4a;color:white}.status[data-status=Done]{background:#00c875}.person{display:inline-flex;align-items:center;gap:8px}.avatar{width:24px;height:24px;border-radius:50%;background:#eceff8;display:inline-grid;place-items:center;font-size:11px}.row.selected{background:#f0f7ff}#message{min-height:24px;margin-top:16px;color:#676879}.mobile-label{display:none}footer{padding:16px 24px;color:#676879;font-size:11px;border-top:1px solid #d0d4e4}@media(max-width:800px){.shell{grid-template-columns:1fr}aside{display:none}main{padding:24px}}@media(max-width:560px){main{padding:16px}.overview{grid-template-columns:1fr;gap:12px}.head{display:none}.row{grid-template-columns:36px 1fr}.row .person,.row .status{grid-column:2}.row .status{margin:0 12px 12px;width:calc(100% - 24px);border-radius:4px}.mobile-label{display:inline;color:#676879;margin-right:8px}.row{padding:8px 0}.legend{flex-wrap:wrap}}</style><div class="shell"><aside><div class="brand"><span>▰</span> workroom</div><p>TEAM WORKSPACE</p><strong>Weekly delivery</strong><p>Sample project<br>No external account</p></aside><main><h1>Weekly delivery</h1><div class="sub">A shared view of the work moving this week.</div><section class="overview" aria-label="Completion summary"><div class="count"><span id="done">1</span><small> / 3 completed</small></div><div><div class="bar" aria-hidden="true"><span id="working-bar" style="background:#fdab3d"></span><span id="stuck-bar" style="background:#df2f4a"></span><span id="done-bar" style="background:#00c875"></span></div><div class="legend"><span style="--c:#fdab3d">Working</span><span style="--c:#df2f4a">Stuck</span><span style="--c:#00c875">Done</span></div></div></section><div class="tools"><button class="primary" id="complete" disabled>Complete selected</button><button id="reset">Reset board</button><span id="selection" style="padding:8px;color:#676879">0 selected</span></div><h2>▼ This week</h2><div class="board"><div class="head" aria-hidden="true"><span></span><span>Item</span><span>Owner</span><span>Status</span></div><div id="rows"></div></div><p id="message" role="status">Select items or click a status to change it locally.</p></main></div><footer>Independent Vibe 4 HTML/CSS study. Published light-theme and board-label colors; system fallback fonts. No monday.com workspace connection.</footer><script>
const initial=[{id:1,title:'Design handoff',owner:'Maya',status:'Working'},{id:2,title:'Accessibility review',owner:'Theo',status:'Stuck'},{id:3,title:'Release notes',owner:'Sam',status:'Done'}],states=['Working','Stuck','Done'];let items=structuredClone(initial),selection=new Set();const $=id=>document.getElementById(id);function totals(){$('done').textContent=items.filter(x=>x.status==='Done').length;for(const state of states)$(state.toLowerCase()+'-bar').style.width=items.filter(x=>x.status===state).length/items.length*100+'%';$('complete').disabled=!selection.size;$('selection').textContent=selection.size+' selected'}function render(){$('rows').replaceChildren();for(const item of items){const row=document.createElement('div');row.className='row'+(selection.has(item.id)?' selected':'');const label=document.createElement('label'),check=document.createElement('input');check.type='checkbox';check.checked=selection.has(item.id);check.setAttribute('aria-label','Select '+item.title);check.onchange=()=>{check.checked?selection.add(item.id):selection.delete(item.id);row.classList.toggle('selected',check.checked);totals()};label.append(check);const name=document.createElement('span');name.textContent=item.title;const person=document.createElement('span');person.className='person';const av=document.createElement('span');av.className='avatar';av.setAttribute('aria-hidden','true');av.textContent=item.owner[0];const pl=document.createElement('span');pl.className='mobile-label';pl.textContent='Owner';person.append(pl,av,document.createTextNode(item.owner));const status=document.createElement('button');status.className='status';status.dataset.status=item.status;status.textContent=item.status;status.setAttribute('aria-label',item.title+': '+item.status+'. Change status');status.onclick=()=>{item.status=states[(states.indexOf(item.status)+1)%states.length];status.dataset.status=item.status;status.textContent=item.status;status.setAttribute('aria-label',item.title+': '+item.status+'. Change status');totals();$('message').textContent=item.title+' is now '+item.status+' locally.'};row.append(label,name,person,status);$('rows').append(row)}totals()}
$('complete').onclick=()=>{let n=selection.size;items.forEach(x=>{if(selection.has(x.id))x.status='Done'});selection.clear();render();$('message').textContent=n+' local items completed.'};$('reset').onclick=()=>{items=structuredClone(initial);selection.clear();render();$('message').textContent='Board reset.'};render();
</script></html>
```

代码参考

- 批量工具栏会更改示例任务的状态。标签颜色用于说明此看板的工作流，不能替代 Vibe 语义操作令牌。

### 完整的原生实现入口

此处汇总了从设置到完整实现的内容，并附有重点说明 API。请按照设置中的文档说明，满足软件包和构建前置条件。

```
// npm install react react-dom @vibe/core@4
// main.jsx in a client React project with <div id="root"></div>
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import { Button } from '@vibe/core';
import '@vibe/core/tokens';
import './board.css';
const initial=[{id:1,title:'Design handoff',owner:'Maya',status:'Working'},
{id:2,title:'Accessibility review',owner:'Theo',status:'Stuck'},
{id:3,title:'Release notes',owner:'Sam',status:'Done'}];
const states=['Working','Stuck','Done'];
function Board(){
 const [items,setItems]=useState(initial),[selected,setSelected]=useState(new Set()),[message,setMessage]=useState('');
 const toggle=id=>setSelected(old=>{const next=new Set(old);next.has(id)?next.delete(id):next.add(id);return next});
 const complete=()=>{setItems(old=>old.map(item=>selected.has(item.id)?{...item,status:'Done'}:item));setMessage(selected.size+' local items completed');setSelected(new Set())};
 return <main className="board"><h1>Weekly delivery</h1>
 <p>{items.filter(x=>x.status==='Done').length} of {items.length} items completed</p>
 <div className="toolbar"><Button disabled={!selected.size} onClick={complete}>Complete selected</Button>
 <Button kind="tertiary" onClick={()=>{setItems(initial);setSelected(new Set());setMessage('Board reset')}}>Reset</Button></div>
 <div className="table-scroll" role="region" aria-label="Delivery items" tabIndex={0}>
 <table><thead><tr><th>Select</th><th>Item</th><th>Owner</th><th>Status</th></tr></thead><tbody>
 {items.map(item=><tr key={item.id}><td><input type="checkbox" aria-label={'Select '+item.title} checked={selected.has(item.id)} onChange={()=>toggle(item.id)}/></td>
 <th scope="row">{item.title}</th><td>{item.owner}</td><td><Button kind="tertiary" size="small" aria-label={item.title+': '+item.status+'. Change status'} onClick={()=>setItems(old=>old.map(x=>x.id===item.id?{...x,status:states[(states.indexOf(x.status)+1)%states.length]}:x))}>{item.status}</Button></td></tr>)}
 </tbody></table></div><p role="status">{message}</p></main>
}
createRoot(document.getElementById('root')).render(<Board/>);
```

代码参考

- 完整的本地看板入口；请从组件示例中添加 board.css。字体不会自动打包。已依据官方源码检查原生软件包 API；此环境尚未编译软件包示例。

### 基于令牌的看板样式表

使用 tokens 导出项设置布局和字体排印。外层区域可确保语义化表格在窄屏上仍然可用。

```
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--allgrey-background-color);color:var(--primary-text-color);font:var(--font-text2-normal)}
.board{max-width:960px;margin:auto;padding:var(--space-24)}
h1{font:var(--font-h1-medium)}
.toolbar{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-bottom:var(--space-16)}
.table-scroll{overflow:auto;border:1px solid var(--layout-border-color);border-radius:var(--border-radius-medium)}
table{width:100%;min-width:560px;border-collapse:collapse;background:var(--primary-background-color)}
th,td{text-align:left;padding:var(--space-12);border-bottom:1px solid var(--layout-border-color)}
```

代码参考

- 这是使用实际 Vibe 变量的应用 CSS。

- 内嵌预览采用独立的响应式 HTML 实现。

### 应用 HTML 中的字体加载

明确加载建议使用的两种字体；导入 CSS 令牌不会下载字体文件。

```
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap">
```

代码参考

- 可以使用自托管的授权字体方案替换此外部样式表。

## Monday Vibe 设计系统 Agent 设置

### 实现起点

完整的本地看板入口；请从组件示例中添加 board.css。字体不会自动打包。已依据官方源码检查原生软件包 API；此环境尚未编译软件包示例。

```
// npm install react react-dom @vibe/core@4
// main.jsx in a client React project with <div id="root"></div>
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import { Button } from '@vibe/core';
import '@vibe/core/tokens';
import './board.css';
const initial=[{id:1,title:'Design handoff',owner:'Maya',status:'Working'},
{id:2,title:'Accessibility review',owner:'Theo',status:'Stuck'},
{id:3,title:'Release notes',owner:'Sam',status:'Done'}];
const states=['Working','Stuck','Done'];
function Board(){
 const [items,setItems]=useState(initial),[selected,setSelected]=useState(new Set()),[message,setMessage]=useState('');
 const toggle=id=>setSelected(old=>{const next=new Set(old);next.has(id)?next.delete(id):next.add(id);return next});
 const complete=()=>{setItems(old=>old.map(item=>selected.has(item.id)?{...item,status:'Done'}:item));setMessage(selected.size+' local items completed');setSelected(new Set())};
 return <main className="board"><h1>Weekly delivery</h1>
 <p>{items.filter(x=>x.status==='Done').length} of {items.length} items completed</p>
 <div className="toolbar"><Button disabled={!selected.size} onClick={complete}>Complete selected</Button>
 <Button kind="tertiary" onClick={()=>{setItems(initial);setSelected(new Set());setMessage('Board reset')}}>Reset</Button></div>
 <div className="table-scroll" role="region" aria-label="Delivery items" tabIndex={0}>
 <table><thead><tr><th>Select</th><th>Item</th><th>Owner</th><th>Status</th></tr></thead><tbody>
 {items.map(item=><tr key={item.id}><td><input type="checkbox" aria-label={'Select '+item.title} checked={selected.has(item.id)} onChange={()=>toggle(item.id)}/></td>
 <th scope="row">{item.title}</th><td>{item.owner}</td><td><Button kind="tertiary" size="small" aria-label={item.title+': '+item.status+'. Change status'} onClick={()=>setItems(old=>old.map(x=>x.id===item.id?{...x,status:states[(states.indexOf(x.status)+1)%states.length]}:x))}>{item.status}</Button></td></tr>)}
 </tbody></table></div><p role="status">{message}</p></main>
}
createRoot(document.getElementById('root')).render(<Board/>);
```

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

```
构建所提供的 Vibe 4 交付看板。导入 @vibe/core/tokens，使用当前带编号的间距变量和完整字体简写，并将语义反馈颜色与看板标签颜色区分开来。实现本地行选择、状态编辑和根据数据计算的完成数量。批量按钮使用 disabled；不要模拟远程保存。
```

## Monday Vibe 设计系统：来源与范围

独立的 Vibe 4 参考资料和本地看板演示。不涉及 monday.com 账户、工作区数据或 SDK 连接。原生起始模板使用实际的 Vibe Button 控件和由应用管理的表格标记。

- Vibe 4 概览 当前软件包、令牌入口及旧版本适用范围。

- 核心集成 根入口导入、全局盒模型设置和单独加载的字体。

- 浅色主题来源 语义颜色、看板标签颜色和阴影。

- 间距来源 当前带编号的间距变量。

- 字体排印来源 Figtree/Poppins 字体系列和简写样式。

- 圆角来源 数字型和命名型圆角令牌。

- Button 来源 受控操作、禁用、加载和按下状态语义。

- 软件包导出项 ES 模块入口和 tokens CSS 导出项。

## Monday Vibe 设计系统相关资源

### Morningstar 设计系统

构建一个让数字对齐、资产颜色保持原有含义、文字清晰易读的研究界面。探索 MDS 常量、Vue 3 集成、Morningstar Intrinsic 迁移，以及一个可排序的虚构资产配置记录簿。

### Mozilla Protocol

一份编辑式 Protocol 指南，包含真实的字体栈、间距和容器尺度、响应式图文阅读页面，以及完整的原生 CSS 表单示例。

### Nord 设计系统

通过房间请求草稿，查看 Nord 的 Therapy 主题令牌和 Web Component 契约：真实的颜色角色、响应式字段尺寸、明确的验证，以及在本地准备的结果。


- [实现参考](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss)
- [来源](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/spacing.scss)
- [来源](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss)
- [来源](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/typography.scss)
- [来源](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/border-radius.scss)
- [来源](https://github.com/mondaycom/vibe/blob/master/packages/components/button/src/Button/Button.tsx)
- [阅读配套规范](https://github.com/mondaycom/vibe)
- [阅读配套规范](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss)
- [阅读配套规范](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/typography.scss)
- [阅读配套规范](https://github.com/mondaycom/vibe/blob/master/packages/core/README.md)
- [阅读配套规范](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/spacing.scss)
- [阅读配套规范](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/border-radius.scss)
- [阅读配套规范](https://github.com/mondaycom/vibe/blob/master/packages/components/button/src/Button/Button.tsx)
- [阅读配套规范](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/core/package.json)
- [代码参考](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss)
- [代码参考](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/spacing.scss)
- [代码参考](https://github.com/mondaycom/vibe/blob/master/packages/core/README.md)
- [Vibe 4 概览 当前软件包、令牌入口及旧版本适用范围。](https://github.com/mondaycom/vibe)
- [核心集成 根入口导入、全局盒模型设置和单独加载的字体。](https://github.com/mondaycom/vibe/blob/master/packages/core/README.md)
- [浅色主题来源 语义颜色、看板标签颜色和阴影。](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss)
- [间距来源 当前带编号的间距变量。](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/spacing.scss)
- [字体排印来源 Figtree/Poppins 字体系列和简写样式。](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/typography.scss)
- [圆角来源 数字型和命名型圆角令牌。](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/border-radius.scss)
- [Button 来源 受控操作、禁用、加载和按下状态语义。](https://github.com/mondaycom/vibe/blob/master/packages/components/button/src/Button/Button.tsx)
- [软件包导出项 ES 模块入口和 tokens CSS 导出项。](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/core/package.json)