Systra Tools
Search and pull 500+ production-ready React + Tailwind sections and elements
使うべきか
品質と安全性
検出事項（1）
- LOWTool 'get_recipe' description lacks action verbget_recipe 内
ツール定義とプロトコルへの準拠に関する自動分析に基づいています。
コンテキストコスト
これは、サーバーのツールがモデルのコンテキストに読み込まれるたびに消費されるおおよそのトークン数です。数が多いほど、ほかのタスクに使える注意が減ります。
インストール
ワンクリックインストール
これを `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
}コミュニティ
エビデンス