Systra Tools
Search and pull 500+ production-ready React + Tailwind sections and elements
Sollte ich dies verwenden
Qualität und Sicherheit
Befunde (1)
- LOWin get_recipe
Basierend auf einer automatisierten Analyse der Tool-Definitionen und der Einhaltung des Protokolls.
Kontextkosten
Dies ist die ungefähre Anzahl der Tokens, die jedes Mal verbraucht werden, wenn die Tools des Servers in den Kontext eines Modells geladen werden. Höhere Werte verringern die Aufmerksamkeit, die für andere Aufgaben verfügbar ist.
Installieren
Installation mit einem Klick
Fügen Sie dies Ihrer Datei `claude_desktop_config.json` hinzu:
{
"mcpServers": {
"systra-tools": {
"url": "https://systra.tools/api/mcp"
}
}
}Remote-Endpunkte
https://systra.tools/api/mcpstreamable-httpWas es kann
Tool-Inventar
Tools (13)
🟢list_categories
Lists every category of Systra Tools with the number of components in it.
Eingabe-Schema
{
"type": "object",
"properties": {},
"additionalProperties": false
}🟢list_components(category)
Lists components of the library. Optionally filtered by category slug ('heros', 'forms', 'cta').
Eingabe-Schema
{
"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.
Eingabe-Schema
{
"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.
Eingabe-Schema
{
"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.
Eingabe-Schema
{
"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.
Eingabe-Schema
{
"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.
Eingabe-Schema
{
"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.
Eingabe-Schema
{
"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.
Eingabe-Schema
{
"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.
Eingabe-Schema
{
"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.
Eingabe-Schema
{
"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).
Eingabe-Schema
{
"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.
Eingabe-Schema
{
"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
}Empfohlene Prompts
search_componentssearch_componentsget_componentget_componentlist_categoriesAufgezeichnete Aufrufbeispiele
list_stylesEingabeparameter
{}Ausgabeergebnis
{
"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
}Community
Nachweis