mcpField
N
nostalgiaui

nostalgiaui

本地服务
nostalgiaui.sylvester.works开发工具01 天前更新
代码仓库访问官网

关于 nostalgiaui

nostalgiaui 是为 AI 编码 Agent 提供设计时代令牌、配色、组件源码和对比度检查的 MCP 服务。它让 Agent 依据具体设计数据渲染界面，而非自行猜测。

主要功能

  1. 01列出设计时代与配色
  2. 02获取设计令牌
  3. 03获取含导入语句和 CSS 的组件源码
  4. 04导入 VS Code 主题
  5. 05检查颜色对比度

适用场景

  1. 01按指定设计时代制作设置页面
  2. 02为界面组件应用配色
  3. 03创建 UI 时检查对比度

MCP 相关

MCP 服务向客户端提供列出设计时代和配色、获取令牌与组件、导入 VS Code 主题及检查对比度的工具。

配置

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

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

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

安装包
npm@nostalgiaui/mcp0.1.3

工具

6

收录的工具列表 · 更新于 3 天前

此工具无需参数。

详细介绍

@nostalgiaui/mcp

一个 MCP 服务，可向 AI 编码 Agent 提供 NostalgiaUI 的时代风格、调色板、组件源码和对比度检查，因此当 Agent 接到使用 Nord 调色板制作 Frutiger Aero 风格设置页面的任务时，可以获取真实的设计令牌，而不必猜测。

工具：list_eras、list_palettes、get_tokens、get_component、 import_vscode_theme、check_contrast。

Claude Code

claude mcp add --transport stdio nostalgiaui -- npx -y @nostalgiaui/mcp

Claude Desktop

在 claude_desktop_config.json 中：

{
  "mcpServers": {
    "nostalgiaui": {
      "command": "npx",
      "args": ["-y", "@nostalgiaui/mcp"]
    }
  }
}

get_component 返回的不仅仅是源码：还包括导入语句、特定时代风格的 CSS，以及说明哪些地方容易出错的备注，例如在 NostalgiaRoot 外渲染。这些备注对应的是构建该库时实际遇到的错误。

完整文档请见 nostalgiaui.sylvester.works。 MIT，版权所有：Josh Sylvester 和 Sylvester Works LLC。

MCP Registry

登记名称为 io.github.sylvesterworks/nostalgiaui。此包中的 server.json 即为登记信息，每次 npm 发布后，发布工作流都会通过 GitHub OIDC 进行身份验证并发布；整个过程无需手动操作。

评论

支持 Markdown

第一次接触 MCP？

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

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