Systra Tools
Search and pull 500+ production-ready React + Tailwind sections and elements
我該用這個嗎
品質與安全性
發現項目（1）
- LOWTool 'get_recipe' description lacks action verb在 get_recipe 中
根據工具定義與協定合規性的自動化分析。
上下文成本
這是每次將伺服器的工具載入模型上下文時所消耗的約略 token 數量。數量越高，可用於其他工作的注意力就越少。
安裝
一鍵安裝
將以下內容加入你的 `claude_desktop_config.json` 檔案：
{
"mcpServers": {
"systra-tools": {
"url": "https://systra.tools/api/mcp"
}
}
}遠端端點
https://systra.tools/api/mcpstreamable-http它能做什麼
工具清單
工具（13）
🟢list_categories
Lists every category of Systra Tools with the number of components in it.
輸入結構描述
{
"type": "object",
"properties": {},
"additionalProperties": false
}🟢list_components(category)
Lists components of the library. Optionally filtered by category slug ('heros', 'forms', 'cta').
輸入結構描述
{
"type": "object",
"properties": {
"category": {
"type": "string",
"description": "Category slug to filter by (optional)."
}
},
"additionalProperties": false
}🟢search_components(query)
Searches components by a keyword in the name or the category and returns the matches.
輸入結構描述
{
"type": "object",
"properties": {
"query": {
"type": "string",
"description": "Search term."
}
},
"required": [
"query"
],
"additionalProperties": false
}🟢get_component(name)
Returns the complete, copy-ready React/TSX source of a component by its name.
輸入結構描述
{
"type": "object",
"properties": {
"name": {
"type": "string",
"description": "Component name, e.g. 'OrbitGalleryHero'."
}
},
"required": [
"name"
],
"additionalProperties": false
}🟢list_styles
Lists the brand styles extracted with the style extractor (colours and fonts of real websites) that can be applied to components.
輸入結構描述
{
"type": "object",
"properties": {},
"additionalProperties": false
}🟢get_style(slug)
Returns every design token of an extracted brand style: colours, typography, CSS variables and the generated DESIGN.md.
輸入結構描述
{
"type": "object",
"properties": {
"slug": {
"type": "string",
"description": "Style slug from list_styles."
}
},
"required": [
"slug"
],
"additionalProperties": false
}🟢get_component_styled(name, style)
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.
輸入結構描述
{
"type": "object",
"properties": {
"name": {
"type": "string",
"description": "Component name, e.g. 'GradientHeroSection'."
},
"style": {
"type": "string",
"description": "Style slug from list_styles."
}
},
"required": [
"name",
"style"
],
"additionalProperties": false
}🔴list_images(album, format)
Lists the images of the Systra Tools media library with ready, permanently valid URLs to drop straight in. Optionally filtered by album and format.
輸入結構描述
{
"type": "object",
"properties": {
"album": {
"type": "string",
"description": "Album key to filter by (optional), e.g. 'natur', 'business', 'abstrakt'. Without one, every album is returned."
},
"format": {
"type": "string",
"enum": [
"landscape",
"portrait",
"square"
],
"description": "Image format to filter by (optional)."
}
},
"additionalProperties": false
}🟢search_images(query)
Searches the media library by a keyword in the title, the file name or the album and returns ready URLs.
輸入結構描述
{
"type": "object",
"properties": {
"query": {
"type": "string",
"description": "Search term, e.g. 'gradient', 'laptop', 'wald'."
}
},
"required": [
"query"
],
"additionalProperties": false
}🟡list_posts(family)
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.
輸入結構描述
{
"type": "object",
"properties": {
"family": {
"type": "string",
"enum": [
"klar",
"editorial"
],
"description": "Family to filter by (optional): 'klar' are calm informational posts, 'editorial' lives on the image and a serif face."
}
},
"additionalProperties": false
}🟡get_post(slug, lang)
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.
輸入結構描述
{
"type": "object",
"properties": {
"slug": {
"type": "string",
"description": "Slug of the template, see list_posts."
},
"lang": {
"type": "string",
"enum": [
"de",
"en"
],
"description": "Language of the instructions. English without one."
}
},
"required": [
"slug"
],
"additionalProperties": false
}🟢list_recipes
Lists curated page recipes: sensible sequences of sections for complete landing pages (SaaS, coaching, hotel and so on).
輸入結構描述
{
"type": "object",
"properties": {},
"additionalProperties": false
}🟢get_recipe(name, style)
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.
輸入結構描述
{
"type": "object",
"properties": {
"name": {
"type": "string",
"description": "Recipe slug from list_recipes, e.g. 'saas-landing'."
},
"style": {
"type": "string",
"description": "Optional style slug from list_styles."
}
},
"required": [
"name"
],
"additionalProperties": false
}建議的提示詞
search_componentssearch_componentsget_componentget_componentlist_categories已記錄的呼叫範例
list_styles輸入參數
{}輸出結果
{
"result": {
"content": [
{
"type": "text",
"text": "Extrahierte Marken-Stile (10):\n- systra-tools-stpm: Systra Tools | Primär #1C1C1C, Akzent #FF5C00, Font Albert Sans\n- superside-com-pfto: Superside | Primär #D8FE63, Akzent #5CF5A2, Font Inter Tight\n- vercel-com-u1js: Vercel | Primär #000000, Akzent #000000, Font GeistSans\n- anthropic-com-lna0: Home \\ Anthropic | Primär #1B1B1B, Akzent #1B1B1B, Font Anthropic Serif\n- antigravity-google-7kud: Google Antigravity | Primär #1C1C1C, Akzent #353535, Font Google Sans Flex\n- airbnb-de-ktd8: Airbnb | Primär #FF385C, Akzent #FF385C, Font Circular\n- systrastudios-de-7843: Systra Studios | Primär #4D8DF5, Akzent #FFB22B, Font Manrope\n- lovable-dev-km9h: Lovable | Primär #000000, Akzent #AE55EF, Font Camera Plain Variable\n- resend-com-1mnl: Resend | Primär #343537, Akzent #9146FF, Font ABCFavorit\n- thenerdstack-com-c1ma: Nerd Stack | Primär #FE7B3E, Akzent #6C3AEB, Font Geist\n\nget_style liefert alle Tokens, get_component_styled eine Komponente samt Stil-Anleitung."
}
],
"isError": false
},
"durationMs": 1446
}社群
證據