Nostalgiaui

io.github.sylvesterworks由 GitHub 帳號 sylvesterworks 發布v0.1.3更新於 Nov 2, 2026

Design tokens, component source and WCAG checks for rendering any UI in a past design era.

已驗證STDIO僅桌面開發者工具媒體與設計

概覽

AI 產生的概覽

為編碼助理提供 NostalgiaUI 的設計年代、配色、設計權杖、元件原始碼與 WCAG 對比度檢查，用於復古風格介面。

可以做什麼
  • 列出可用的設計年代與配色方案，含明暗外觀與來源授權
  • 依年代與配色組合取得設計權杖，輸出 CSS 自訂屬性、Tailwind 預設或 W3C Design Tokens JSON
  • 取得某個年代下的元件原始碼：匯入語句、TSX 包裝、樣式規則、屬性表與結構化文件，也可只取單一章節
  • 把 VS Code 顏色主題 JSON 轉換為配色，並附上溯源報告與 CSS 變數
  • 對某個年代與配色組合進行 WCAG 2.1 對比度稽核並列出未達標項目
適用情境
適合讓助理依指定復古設計年代建立或改造介面時，以真實權杖和元件原始碼取代猜測。也適合檢查某年代與配色組合的對比度，或把現有 VS Code 主題轉成配色。
執行需求
以 stdio 在本機執行，通常透過 npx 啟動 npm 套件 @nostalgiaui/mcp，需要 Node.js 與下載該套件的網路存取。未宣告任何帳號、API 金鑰或環境變數。
安裝前請注意
回傳的程式碼與 CSS 可能被助理寫入你的專案，提交前應審閱產生的元件原始碼。匯入的 VS Code 主題在本機處理，配色清單會標示來源授權，重新散布衍生配色前請先確認。

安裝

在 SourceWeft 中

  1. 開啟 儀表板中的 Nostalgiaui，將其新增到工作區。
  2. 為需要使用其工具的對話啟用該服務。

Desktop only，透過 STDIO。 STDIO 服務會啟動本機處理程序，因此需要 SourceWeft 桌面主機。

其他 MCP 客戶端

參照 儲存庫 中的啟動說明。

README

@nostalgiaui/mcp

An MCP server that gives AI coding agents NostalgiaUI's eras, palettes, component source and contrast checks, so an agent asked for a settings page in Frutiger Aero with the Nord palette can get the real tokens rather than guess.

Tools: list_eras, list_palettes, get_tokens, get_component, import_vscode_theme, check_contrast.

Claude Code

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

Claude Desktop

In claude_desktop_config.json:

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

get_component returns more than source: the import line, the era-specific CSS, a props table for each part extracted from the TypeScript types, and the component's structured doc. The doc covers anatomy, patterns, do and don't pairs, accessibility, extensibility, notes for the requested era, and notes naming what is easy to get wrong. Pass section, for example accessibility, to receive only that part. The rules every component shares, such as rendering inside NostalgiaRoot, are sent once as the server's instructions rather than repeated in each answer.

Full documentation at nostalgiaui.sylvester.works. MIT, copyright Josh Sylvester and Sylvester Works LLC.

MCP Registry

Listed as io.github.sylvesterworks/nostalgiaui. The listing is server.json in this package and is published by the release workflow after each npm publish, authenticated through GitHub OIDC; nothing is done by hand.

來源：packages/mcp/README.md，提交 68614d8

工具

6

list_eras

List the design eras NostalgiaUI can render. An era controls shape and feel: radius, borders, bevels, shadows, typography, density and motion. It never controls colour.

無需輸入參數。

list_palettes

List the colour palettes, each drawn from a VS Code theme, with its light or dark appearance and source licence. A palette controls colour only and works in every era.

無需輸入參數。

get_tokens

Design tokens for one era and palette pairing. css returns the CSS custom properties scoped to data-era and data-palette attributes. tailwind returns a preset mapping utilities onto those variables. dtcg returns W3C Design Tokens JSON.

輸入參數era必填format必填palette必填

get_component

Source for one component styled for one era: the import lines, the TSX wrapper, the stylesheet rules that apply everywhere, the rules scoped to that era, and notes on what is easy to get wrong. The CSS is a filtered view of the stylesheet, not a verbatim copy: rules for other eras and section-divider comments are removed, while comments inside rules are kept. Components must render inside NostalgiaRoot.

輸入參數era必填name必填

import_vscode_theme

Turn a VS Code colour theme JSON into a NostalgiaUI palette. Returns the palette primitives, a provenance report saying which values came straight from the theme and which had to be inferred, and the resulting CSS variables.

輸入參數theme必填

check_contrast

Audit WCAG 2.1 contrast for one era and palette pairing. Returns every checked pairing with its ratio and the threshold it must meet, and lists any failures. Colours are derived per pairing, so contrast cannot be known from either axis alone.

輸入參數era必填palette必填

版本歷史

2
  1. v0.1.3最新Oct 26, 2026
  2. v0.1.2Oct 26, 2026

評分

已滿足適用檢查項的 90%

該評分衡量此收錄條目的完整程度，依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價，也不表示伺服器安全或目前可用：可連通性是帶日期的檢查結果，評分也不包含安裝量或使用者評價。

  • 近 30 天內可連通25 分
  • 已宣告認證方式10 分

    請在註冊中心條目中宣告憑證請求標頭，或保持端點能夠回應探測，以便判定其認證方式。

  • 已列出工具必需15 分
  • 描述必需15 分
  • 圖示10 分
  • 文件15 分
  • 授權條款10 分