Basiiik

io.github.shubhankarsd由 GitHub 帳號 shubhankarsd 發布v0.8.0更新於 Nov 3, 2026

Design system for coding agents: component specs, rules, tokens, icons and checked React snippets.

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

概覽

AI 產生的概覽

Basiiik 為編碼助理提供設計系統參考：元件規格、使用規則、設計權杖、圖示，以及經過驗證的 React 程式碼片段。

可以做什麼
  • 讀取產生 UI 的設計系統規則，包含主題與無障礙要求
  • 依分類或狀態瀏覽、篩選並搜尋 88 個元件，並取得單一元件的完整規格
  • 產生 import 與 JSX 用法片段，屬性會依真實元件 API 驗證
  • 搜尋並取得圖示，包含 SVG、React 用法與無障礙說明
  • 列出並查詢設計權杖，含 CSS 變數與明暗主題取值
適用情境
適合助理依 Basiiik 設計系統撰寫 React UI 程式碼時使用，讓它選用實際存在的元件、權杖與圖示，而不是自行編造。在需要與設計系統保持一致的介面開發工作前加入最合適。
執行需求
以本機 stdio 程序執行，從 npm 套件 @basiiik/mcp 安裝，需要 Node.js。未宣告任何驗證、環境變數或標頭。僅支援桌面端，沒有網頁可執行版本。
安裝前請注意
僅提供唯讀的參考查詢，未描述憑證、付款或資料寫入行為。片段與規格皆針對 Basiiik 系統，產生的程式碼會與該元件庫綁定。

安裝

在 SourceWeft 中

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

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

工具

9

get_design_system_guide

Design system guide

The rules for generating UI with Basiiik: components first, tokens only, theming, accessibility. Read this before writing UI code.

無需輸入參數。

list_components

List components

List Basiiik components (88). Filter by category (actions, agents, data-display, feedback, inputs, navigation, overlays) or implementation status.

輸入參數statuscategory

search_components

Search components

Find the right component for a need, e.g. "confirm destructive action" or "show progress". Ranks by name, summary and when-to-use guidance.

輸入參數limitquery必填

get_component

Get component spec

Full spec for one component: when to use it, when not to, React props and their allowed values, accessibility rules, Figma variants and the tokens it uses. Accepts a slug, name or React component name.

輸入參數idnameslugcomponent

get_component_snippet

Get component snippet

Generate an import and JSX usage snippet. Props are validated against the real component API, so invalid props or values return an error listing what is allowed, and a required prop you leave out (such as aria-label on IconButton) is filled with its example value and listed in the notes, so you always get code to adapt.

輸入參數idnameslugpropschildrencomponent

search_icons

Search icons

Find an icon for a need or a word, e.g. "delete", "go back" or "warning" (52 icons, 16px outline). Matches names, synonyms and use text. Use this instead of drawing or inventing SVGs. Leave query empty and pass a category (actions, navigation, objects, status) to list one category.

輸入參數limitquerycategory

get_icon

Get icon

One icon: its SVG, React import and usage, when to use it and when not to, and accessibility notes. Accepts a name ("trash"), a component name ("TrashIcon") or a loose phrase.

輸入參數idiconnameslug

list_tokens

List design tokens

List tokens with their CSS variable and Light and Dark values. Filter by layer (semantic tokens are what product code should use), type, dotted-name prefix such as "color.text", or free-text search.

輸入參數typelayerlimitprefixsearch

get_token

Get one token

One token by dotted name ("color.text.primary") or CSS variable ("--color-text-primary" or "var(--color-text-primary)").

輸入參數idnameslugtoken

版本歷史

3
  1. v0.8.0最新Oct 29, 2026
  2. v0.6.0Oct 26, 2026
  3. v0.5.0Oct 25, 2026

評分

已滿足適用檢查項的 65%

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

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

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

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

    請宣告包含 README 的 GitHub 儲存庫，或在 OAuth 受保護資源後設資料中提供 resource_documentation。

  • 授權條款10 分

    請在儲存庫或註冊中心條目中宣告授權條款。