Systra Tools

tools.systra由 systra.tools 發布官方發布者v1.0.0更新於 Nov 2, 2026

Search and pull 500+ production-ready React + Tailwind sections and elements

已驗證Streamable HTTP可網頁執行開發者工具媒體與設計

概覽

AI 產生的概覽

遠端 MCP 伺服器，讓程式設計助理搜尋 React 與 Tailwind 區塊庫，並取得可直接複製的 TSX 原始碼、品牌樣式、圖片與頁面配方。

可以做什麼
  • 依分類或關鍵字瀏覽與搜尋元件庫，並取得區塊完整的 React/TSX 原始碼
  • 列出已擷取的品牌樣式及其設計權杖、CSS 變數與 DESIGN.md，或取得套用某樣式的元件
  • 列出並搜尋 AI 生成的圖片庫，回傳永久有效的網址
  • 列出 Instagram 貼文範本，並取得其 HTML 檔、匯出腳本與修改規則
  • 列出精選頁面配方，並取得區塊順序及每個區塊的完整原始碼，可選擇套用品牌樣式
適用情境
適合以 React 和 Tailwind 製作著陸頁或行銷網站時，讓助理直接插入現成區塊、套用真實品牌的配色與字型，或依精選配方拼出完整頁面。
執行需求
需要遠端 HTTP MCP 端點，不需本機安裝套件。宣告需要 Authorization bearer 權杖，但 README 表示金鑰為選用，未提供金鑰時只能取得免費範例元件。Premium 金鑰須在供應商網站建立，並以環境變數 SYSTRA_MCP_KEY 提供。
安裝前請注意
bearer 權杖屬於憑證，README 亦提醒不要提交到版本控制。Premium 金鑰為付費訂閱，用於解鎖完整元件庫、圖片與配方。取得的元件與配方原始碼屬第三方程式碼，加入專案前應先審查。

安裝

在 SourceWeft 中

  1. 開啟 儀表板中的 Systra Tools，將其新增到工作區。
  2. 連接 Authorization token 憑證。它們會被私密儲存，絕不會在公開頁面上展示。
  3. 為需要使用其工具的對話啟用該服務。

Web executable，透過 Streamable HTTP。 遠端服務在工作區中設定後即可從網頁執行環境執行。

交給代理程式安裝

把這段提示詞貼上到 Claude Code、Codex、Cursor 等代理程式，或 SourceWeft 對話中。代理程式會讀取該伺服器的安裝指南，先向你展示發布者、端點和登入方式，經你同意後再把它新增到你的客戶端。金鑰不會寫進任何命令。

閱讀 https://sourceweft.com/mcp/tools.systra%2Fsystra-tools/install.md，並按其中說明把這個 MCP 伺服器接入我的客戶端。修改任何設定之前，先告訴我它的發布者、端點和登入方式，等我確認。不要把 API 金鑰寫進命令或我會提交的檔案；問我金鑰應從哪裡取得。

檢視代理程式所依據的安裝指南

其他 MCP 客戶端

把它新增到你客戶端的 mcpServers 設定中。

{
  "mcpServers": {
    "systra-tools": {
      "type": "http",
      "url": "https://systra.tools/api/mcp",
      "headers": {
        "Authorization": "Bearer <YOUR_TOKEN>"
      }
    }
  }
}

README

[Systra Tools]

Systra Tools

620+ production-ready React + Tailwind sections and elements,
searchable by your coding agent over MCP.

[Add systra-tools to Cursor]

Systra Tools is a library of 620+ React and Tailwind sections and elements: heroes, pricing tables, bento grids, dashboards, footers and more. This repository connects it to your coding agent over MCP, so Claude, Cursor or VS Code can search the library and drop a section into your project as a single TSX file.

Every component imports only react, framer-motion and lucide-react and respects reduced motion. Six components can be pulled without a key. A Premium key from https://systra.tools/mcp opens the whole library, the image library and the page recipes.

Install

Cursor

Click the button above, or add the plugin from cursor.directory, or configure it by hand in ~/.cursor/mcp.json:

json
{  "mcpServers": {    "systra-tools": {      "url": "https://systra.tools/api/mcp",      "headers": { "Authorization": "Bearer ${env:SYSTRA_MCP_KEY}" }    }  }}

Claude Code

/plugin marketplace add systra-tools/systra-tools-plugin/plugin install systra-tools@systra

VS Code, Windsurf and anything else that speaks MCP

Point an HTTP MCP server at https://systra.tools/api/mcp and send your key as Authorization: Bearer <key>.

Your key

The key is optional. Without one the agent gets the free sample components. For the full library, create a Premium key at systra.tools/mcp and put it in the environment as SYSTRA_MCP_KEY. Do not commit the key.

What the agent gets

ToolWhat it does
list_categories25 categories with counts
list_components, search_componentsfind a section by intent
get_componentthe full source
list_recipes, get_recipean ordered page, 23 recipes
list_styles, get_style, get_component_styledthe same component in a real brand's colours and fonts
list_images, search_imagesimagery with permanent URLs
list_posts, get_postsocial post templates

Largest categories: elements (78), heroes (76), features (38), interaktiv (29), gallery (25), gsap (22), stats (22), trust (19), dashboard (18).

What is in this repository

A rule, two skills and the MCP configuration. That is all a plugin is. The component library itself lives behind the MCP server.

License

The configuration in this repository is MIT licensed. The components you pull through the MCP server are licensed separately, see https://systra.tools/terms.

來源：README.md，提交 32b7db7

工具

13

list_categories

Lists every category of Systra Tools with the number of components in it.

無需輸入參數。

list_components

Lists components of the library. Optionally filtered by category slug ('heros', 'forms', 'cta').

輸入參數category

search_components

Searches components by a keyword in the name or the category and returns the matches.

輸入參數query必填

get_component

Returns the complete, copy-ready React/TSX source of a component by its name.

輸入參數name必填

list_styles

Lists the brand styles extracted with the style extractor (colours and fonts of real websites) that can be applied to components.

無需輸入參數。

get_style

Returns every design token of an extracted brand style: colours, typography, CSS variables and the generated DESIGN.md.

輸入參數slug必填

get_component_styled

Returns a component together with the design tokens of a brand style and precise instructions for adapting it, so the component lands directly in your own brand look.

輸入參數name必填style必填

list_images

Lists the images of the Systra Tools media library (all AI-generated) with ready, permanently valid URLs to drop straight in. Optionally filtered by album and format, 100 per page.

輸入參數pagealbumformat

search_images

Searches the media library (all images AI-generated) by keywords in the title, the tags, the file name or the album and returns ready URLs, 100 per page.

輸入參數pagequery必填

list_posts

Lists the Instagram post templates of Systra Tools (1080 x 1350). Every template is a single HTML file that can be rebuilt and exported as an image or a video.

輸入參數family

get_post

Returns a post template as a complete set of working instructions: the HTML file, the export script and the rules on what may be changed. With it the post can be rebuilt and rendered directly.

輸入參數langslug必填

list_recipes

Lists curated page recipes: sensible sequences of sections for complete landing pages (SaaS, coaching, hotel and so on).

無需輸入參數。

get_recipe

Returns a page recipe: the sequence of sections with the purpose of each one and the complete source of every section. Optionally in the look of a brand style.

輸入參數name必填style

版本歷史

1
  1. v1.0.0最新Sep 16, 2026

評分

已滿足適用檢查項的 100%

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

  • 近 30 天內可連通必需25 分
  • 已宣告認證方式必需10 分
  • 已列出工具必需15 分
  • 描述必需15 分
  • 圖示10 分
  • 文件15 分
  • 授權條款10 分