Orshot 소셜 미디어 콘텐츠: 템플릿은 한 번 디자인하고, 영원히 게시하세요
Orshot의 소셜 미디어 콘텐츠는 디자인된 템플릿과 게시물마다 새로운 카피를 결합한 것으로, 매번 새로운 AI 이미지를 생성하는 방식이 아닙니다. 이 스킬은 Instagram 게시물, LinkedIn 게시물, TikTok 및 Reels, 스토리, 광고, 배너, 썸네일, 캐러셀을 위해 일반적인 중앙 정렬 텍스트 "AI" 룩이 아닌, 전문적으로 디자인된 Orshot 스튜디오 템플릿을 만듭니다. 이는 Orshot MCP 서버의 디자인 도구(orshot_create_template_design, orshot_update_template_design, orshot_patch_template_elements, orshot_get_brand_kit) 위의 지식 레이어입니다.
먼저 연결하세요
openclaw mcp add orshot --url https://mcp.orshot.com/mcp --transport streamable-http --auth oauth
openclaw mcp login orshot
디자인 도구는 인라인 썸네일과 디자인 체크를 반환하므로 MCP 전용입니다. 무료 플랜(월 100 크레딧, 카드 불필요)은 템플릿 생성 및 미리보기를 포함합니다. 렌더링을 위한 REST 폴백 및 세부 정보는 orshot 스킬에 있습니다.
플랫폼용 템플릿 생성
- 포맷을 선택하세요. 생성 및 렌더링 시
size로 프리셋을 전달하거나 너비와 높이를 지정하세요.
| 플랫폼 | 프리셋 | 픽셀 |
|---|---|---|
| Instagram 포스트 (세로, 2026년 기본값) | instagram-post-portrait | 1080x1350 |
| Instagram 정사각형 | instagram-post | 1080x1080 |
| Instagram 스토리, Reels 커버, TikTok, YouTube Short | instagram-story, tiktok-video, youtube-short | 1080x1920 |
| LinkedIn 포스트 | linkedin-post | 1200x627 |
| LinkedIn 캐러셀 (PDF 또는 이미지 페이지) | linkedin-carousel | 정사각형 또는 4:5 페이지 |
| X 포스트, X 헤더 | twitter-post, twitter-header | 1200x675, 1500x500 |
| Facebook 포스트, 스토리, 커버 | facebook-post, facebook-story, facebook-cover | 1200x630, 1080x1920, 851x315 |
| Pinterest 핀 | pinterest-pin | 1000x1500 |
| YouTube 썸네일 | youtube-thumbnail | 1280x720 |
전체 목록: orshot://formats MCP 리소스.
- 스펙과 브랜드를 읽으세요.
orshot://template-design-spec(요소 스키마, 애니메이션 주의사항), 그 다음 디자인이 브랜드에 맞아야 할 경우orshot_get_brand_kit. - 팩을 읽으세요
references/social-media.md(안전 영역, 원형, 레시피). 이 유형의 마지막 템플릿과 다른 원형을 선택하세요. - 생성하세요.
orshot_create_template_design을 사용하고,pages_data를 완성하며, 모든 텍스트 요소는textMode: "fit"과minFontSize를 설정하고, 동적 필드는parameterizable: true와 스네이크 케이스parameterId(headline,subtitle,product_image)로 표시하고,includeThumbnails: true를 설정하세요. - 비평하세요. 썸네일과 디자인 체크를 검토하고,
orshot_update_template_design또는orshot_patch_template_elements로 수정하세요. 첫 번째 버전을 검토 없이 내보내지 마세요. - 렌더링하세요. 실제 카피로 렌더링(
orshot_render_template)하고 사용자에게 결과를 보여주세요. 하나의 디자인, 모든 크기:extraSizes: ["instagram-story", "linkedin-post", "1080x1080"]. - 인계하세요. 게시, 스케줄링 및 분석은
orshot-social-media-scheduler스킬에 있습니다. 6슬라이드 캐러셀은orshot-carousel에 있습니다. 템플릿을 유지하세요. 모든 향후 게시물은 렌더링일 뿐, 재디자인이 아닙니다.
사용 시기
시각적 템플릿(소셜 게시물/스토리/캐러셀, 광고 크리에이티브, 배너, 썸네일, 런칭 그래픽)을 디자인하거나 개선할 때마다 사용하세요. 스튜디오 요소 스키마 및 렌더링 주의사항은 MCP 리소스 orshot://template-design-spec도 참조하세요.
경계
- 이는 디자인 지침이며, 스키마 스펙을 대체하지 않습니다. 스타일 값은 항상 단위가 포함된 문자열이고,
position/dimensions는 중첩 객체입니다. 아래 호환성 섹션을 참조하세요. orshot스킬(API/생성 메커니즘)과 함께 구성됩니다. 렌더링하려면 해당 스킬을 사용하세요.
운영 원칙
디자인은 작업을 위한 것입니다. 시청자가 반드시 가져가야 할 한 가지를 결정하고, 모든 것이 이를 지원하도록 만드세요. 일반적인 예쁨보다 브랜드와 플랫폼을 존중하세요. 주관적인 반복보다 아래의 결정론적 규칙을 선호하세요.
필수 워크플로우 (순서대로)
- 형태: 무언가를 배치하기 전에 목표, 대상 및 단일 핵심 메시지를 다시 정의하세요.
- 브랜드 상속 (브랜드 적용 시): 디자인이 사용자의 브랜드/제품과 일치해야 하는 경우(프롬프트가 암시하거나 "우리" 스타일을 요청하는 경우),
orshot_get_brand_kit을 호출하고(목적에 따라 태그 필터링) 브랜드 색상/폰트/로고를 시스템의 역할에 매핑하세요. 프롬프트가 일반/독립형 룩을 요청하는 경우 팩 기본값을 사용하고 브랜드를 강제로 적용하지 마세요. - 수직 팩 선택:
references/에서 해당 파일(예:references/social-media.md)을 읽어 포맷, 안전 영역, 원형 및 구체적인 레시피를 확인하세요. 이 유형의 최근 템플릿과 다른 원형을 선택하세요. - 빌드: 하나의 초점 요소를 설정한 다음 이를 지원하세요. 첫 번째 생성에서는 디자인을 단순하게 유지하고, 후속 업데이트에서 개선하세요.
- 비평:
includeThumbnails:true로 생성/업데이트하고, 썸네일을 읽고,orshot_update_template_design/orshot_patch_template_elements로 문제를 수정하세요. 첫 번째 버전을 검토 없이 내보내지 마세요. (생성 도구는 "🎨 디자인 체크"도 반환하므로, ⚠ 표시를 해결하세요.)
시스템
- 계층 구조: 크기, 굵기, 위치를 통한 하나의 명확한 초점. 모든 것이 중앙에 있지 않음.
- 타이포그래피: 정확히 2개의 폰트 패밀리(디스플레이 + 본문). 계층은 크기/굵기로 조정. 큰 디스플레이 타입은 좁은
lineHeight(1.0~1.15)와 약간 음수인letterSpacing. 가장 굵은 브랜드 폰트 → 디스플레이, 더 가벼운 폰트 → 본문. - 색상, 60-30-10: 60% 주조색, 30% 보조색, 10% 강조색. 응집력 있는 팔레트가 더 많은 색상보다 좋음. 명확한 WCAG AA 대비. 브랜드 색상을 "기본"이라는 라벨이 아닌 용도에 따라 역할에 매핑하세요.
- 구성 및 여백: 넉넉한 여백(모서리당 캔버스의 ≥ ~6%), 암시적 그리드에 정렬, 중앙 스택보다 중앙에서 벗어난 배치 선호.
- 이미지: 가장자리까지 채우거나 의도적으로 프레임 처리; 사진은
objectFit:"cover"; 복잡한 사진 위의 텍스트 아래에 그라데이션 스크림 추가.
브랜드 (상황에 따라, 필수 아님)
디자인이 브랜드에 맞아야 할 때(프롬프트가 사용자의 브랜드, 제품 또는 정체성을 언급하는 경우) 브랜드 키트를 사용하세요: 색상 → 60-30-10 역할, 폰트 → 디스플레이/본문, 로고 → 작은 모서리/바닥글 마크, 이미지 → 히어로/제품. 일반/탐색적/독립형 룩의 경우 팔레트로 충분하며, 브랜드 자산을 강제로 적용하지 마세요.
다양성
같은 콘텐츠 유형에 대해 레이아웃을 절대 반복하지 마세요. 같은 종류의 디자인 간에 원형, 초점 배치, 색상 강조를 다양화하세요.
호환성 (이것들을 올바르게 설정하지 않으면 렌더링이 조용히 깨집니다)
- 모든 스타일 값은 단위가 포함된 문자열입니다:
"48px","700","12px": 절대 숫자만 사용하지 마세요. position및dimensions는 중첩 객체입니다({x,y},{width,height}).- 모든 텍스트 요소에
textMode:"fit"+minFontSize를 설정하세요(최소값: 헤드라인 48, 서브타이틀 28, 본문 24, 키커 18, 캡션 14). 기본값인"overflow"는 축소되거나 재배치되지 않으므로 긴/파라미터화된 텍스트가 상자 밖으로 흘러나옵니다. - 줄 바꿈:
\n을 사용하고, 절대<br>을 사용하지 마세요; 여러<p>블록을 피하세요(겹칩니다). 한 줄에 강조 색상이 있는 여러 줄 헤드라인의 경우 줄당 하나의 텍스트 요소를 사용하세요. - 배경 강조
<span>(색상 채움 필)은 전체 요소를 한 줄로 강제합니다(white-space: nowrap) → 긴 텍스트에서 오버플로우 발생. 1~3단어만 강조하세요. 긴 헤드라인의 경우color강조(배경 없음)를 사용하거나 줄별로 분할하세요. - 파라미터화 가능한 필드는
parameterizable:true, 고유한 스네이크 케이스parameterId, 요소와 일치하는parameterType(텍스트→"text", 이미지→"imageUrl", 도형→"fill", 캔버스/컨테이너→"backgroundColor")이 필요합니다. - 투명한 채움 + 테두리가 있는 도형은 아무것도 렌더링하지 않습니다. SVG
content는 data-URI여야 합니다.
모션 및 오디오 (비디오 템플릿)
비디오가 생성된 것처럼 보이지 않고 디자인된 것처럼 보이게 만들기:
- 약 4~5초에 걸쳐 섹션별로 나타나기. 하나의 단위(아이콘+레이블, 스펙 행, 바닥글)를 구성하는 요소는 동일한
enter유형과showAt을 공유합니다. 읽기 순서에 따라 섹션 간에 약 0.3~0.5초 간격을 둡니다.showAt/hideAt은enter/exit의 형제입니다. 절대 내부에 중첩하지 마세요. - 모든 전체 채움 사진에는
kenBurns앰비언트(줌 1.08~1.15)가 있어야 합니다. 3초 동안 유지되는 정지 사진은 죽은 프레임으로 읽힙니다. 느린 푸시는 푸티지로 읽힙니다. 페이지 간에panX방향을 교대로 사용하세요. - 앰비언트는 미묘하고 느리게 유지: 0.5초 진입에 대해 6~10초 주기. 시청자가 모션을 이름 지을 수 있다면 의도적인 악센트(흔들리는 배지)가 아닌 한 너무 강한 것입니다.
shake/slowRotate는easing: "linear"가 필요하거나 루프 이음새가 보입니다. - 전체 비디오에 대해 하나의
pageTransition, 0.3~0.5초. 컷마다 다른 전환은 자동 생성 편집의 가장 명확한 신호입니다. - 사운드 기본값: 볼륨 1의 내레이션 트랙 + 절제된 생성 앰비언트 배경(
sfx, 볼륨 0.080.18, 루프) +3 사용). 내레이션은 약 2단어/초로 예산을 잡고 1초의 여유를 두세요. 생성된 오디오를 제작하기 전에page.subtitle { source: "auto-audio" }(자막 프리셋(karaoke/bold) 및 복잡한 푸티지 위에 strokeWidth 2orshot_get_audio_authoring_options를 호출하세요.tts.parameterId를 지정하여 음성 카피가 렌더링 파라미터로 유지되도록 하세요.
안티 패턴 (AI 쓰레기 신호, 피하세요)
- 모든 것이 중앙에 정렬되고 쌓여 있음; 초점 없음.
- 3개 이상의 폰트, 또는 계층 없는 임의의 크기.
- 스크림 없이 복잡한 사진 위의 저대비 텍스트.
- 프롬프트가 브랜드 적용 디자인을 요청하지 않았는데 브랜드 자산을 강제로 적용(또는 명확히 요청했는데 키트를 무시).
- 본문 카피 단락 위에 작은 헤드라인(템플릿은 문서가 아님).
- 같은 콘텐츠 유형에 대해 이전 레이아웃을 재사용.
수직 팩 (점진적 공개)
작업과 일치하는 것을 읽으세요. 각각 포맷/안전 영역, 원형 및 레시피를 추가합니다:
references/social-media.md: 게시물, 스토리, 캐러셀.- (향후 더 많은 수직 영역, 광고, 부동산, 전자상거래가 여기에 추가됩니다.)
예시
예시 1, "새로운 기능을 발표하는 Instagram 게시물을 만들어 줘"
orshot_get_brand_kit(태그: "social-media") → 브랜드 색상/폰트/로고.references/social-media.md읽기 → 기본 4:5 세로 1080×1350;type-hero원형 선택(마지막 게시물과 다름).- 큰 헤드라인에 브랜드 디스플레이 폰트, 배경에 브랜드 주조색, 한 단어에 강조색, 로고 + @핸들 바닥글,
includeThumbnails:true로orshot_create_template_design. - 썸네일 + "🎨 디자인 체크" 읽기; 필요에 따라 대비/간격 패치.
예시 2, "이 템플릿을 개선해 줘, 너무 평범해 보여"
orshot_get_studio_template으로 현재 디자인 검사.- 안티 패턴 진단(중앙 정렬? 3개 이상 폰트? 초점 없음? 브랜드 무시?).
orshot_patch_template_elements로 하나의 초점 헤드라인 설정, 2개 폰트로 축소, 브랜드 60-30-10 적용, 왼쪽/하단 정렬.includeThumbnails:true로 재렌더링하고 확인.
문제 해결
헤드라인이 한 줄로 표시됨 / <br> 무시됨. <br> 대신 \n을 사용하세요. 여러 줄 헤드라인에 색상이 있는 단어의 경우 줄당 하나의 텍스트 요소로 분할하세요.
색상/폰트가 브랜드와 다르게 보임. 2단계를 건너뛰었습니다. orshot_get_brand_kit을 호출하고 반환된 value(색상)와 name(폰트)를 디자인에 매핑하세요.
"🎨 디자인 체크"가 반복에 대해 경고함. 이 레이아웃이 최근 동일 유형 템플릿과 일치합니다. 원형을 전환하고 초점을 이동하세요.