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
}커뮤니티
증거