mcpField
T
tesserai

tesserai

本地服务
tesserai.design开发工具05 周前更新
代码仓库访问官网

关于 tesserai

@tesserai/cli 将设计系统安装到项目中，并可在命令行同步更新。它还通过 MCP 向编码 Agent 提供系统令牌、组件、对比度检查和设计指南。

主要功能

  1. 01安装设计系统组件与主题 CSS
  2. 02同步更新并保留已编辑文件
  3. 03扫描组件使用情况与系统覆盖
  4. 04将系统导出到其他技术栈
  5. 05生成含无障碍检查的组件 Storybook

适用场景

  1. 01将共享设计系统加入项目
  2. 02检查未使用组件和样式覆盖
  3. 03向编码 Agent 提供项目设计规则

MCP 相关

CLI 通过 stdio 向编码 Agent 提供已安装的设计系统，并可在初始化时注册服务。Agent 可读取令牌、组件、对比度检查和指南，并在系统范围内应用更改。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
  "mcpServers": {
    "design-tesserai-tesserai": {
      "command": "npx",
      "args": [
        "-y",
        "@tesserai/cli"
      ]
    }
  }
}
启动命令npx -y @tesserai/cli

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包
npm@tesserai/cli0.2.2

工具

17

收录的工具列表 · 更新于 2 周前

参数类型必填说明
intostring否之前导入的系统（其链接 /systems/<id>）：根据代码中的变更更新该系统，供用户审核，而不是创建新系统
namestring否系统名称（默认值：取自 package.json）
notesarray否需要了解的非值信息，例如“深色模式来自 antd 的 darkAlgorithm，因此已自动填充。”
dryRunboolean否仅报告将会导入的内容
tokensobject是你找到的设计外观对应的 DTCG 文档；每个 token 都带有 $extensions['tesserai.source'] = 'path:line'

详细介绍

@tesserai/cli

将 tesserai 设计系统安装到你的项目中，作为由你拥有的组件。通过终端让它保持最新。通过 MCP 为你的编码 Agent 提供相同的令牌、组件和规则。

需要 Node.js 22 或更高版本，以及 Tailwind CSS 4。React 可与 Base UI、Radix 或 React Aria 搭配使用，Vue 可与 Reka UI 搭配使用，Svelte 5 可与 Bits UI 搭配使用。

开始使用

在 tesserai.design 上设计一个系统并下载，无需账号。也可以从你的账号分享系统，然后通过链接安装；之后 sync 会跟随该链接：

npx @tesserai/cli init ./acme.tesserai.json
npx @tesserai/cli init https://tesserai.design/s/AbCdEf123456 --dir ./apps/web

init 会将组件、主题 CSS 和 tesserai/design-system.json 写入你的项目。它会将 CLI 添加为开发依赖项。它还会在 .mcp.json 中为 Claude Code 注册 MCP 服务；如果项目使用 Cursor，也会在 .cursor/mcp.json 中注册。

命令

命令功能
init <link or bundle>将系统安装到项目中
sync [link or bundle]获取最新版本并重新生成。保留你修改过的文件，并将新版本写在它们旁边。--dry-run 会显示计划
scan检查应用如何使用其系统：每个组件的使用情况和选项（按使用频率从高到低排列）、从未使用的组件和选项、覆盖项（通过哪些更改使用 className、style、sx 重新设置组件样式）、重复出现的相同覆盖项（需要在系统中进行的更改）、手动编辑过的生成文件、采用评分，以及绕过系统的值。--fix 会替换完全匹配的内容；--upload 会将扫描结果与其系统一同保存在构建器中（Pro）
doctor检查项目、系统、清单和源链接
export <format>将系统导出为其他技术栈格式：scss、ts、panda、stylex、mui、mantine、chakra、swift、kotlin、dart
storybook创建包含每个组件对应故事的 Storybook，提供浅色和深色模式，并执行无障碍检查
mcp通过 stdio 向编码 Agent 提供系统
login / logout登录或登出，以使用保存在账号中的私有系统

运行 npx @tesserai/cli <command> --help 查看选项。

面向编码 Agent

init 会为你注册服务。手动添加的方式如下：

claude mcp add tesserai -- npx -y @tesserai/cli mcp

之后，Agent 可以读取系统概览、令牌、组件、对比度检查和设计指南。它还可以应用符合系统规范的更改。

许可证

MIT。CLI 写入你项目中的组件和 CSS 均归你所有，可按任何方式使用。

评论

支持 Markdown

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。