本文へ移動
cccskills
無料GitHub で公開

visual-assets

시각 자료 관리 스킬. 제안서 스크립트에 이미지, 차트/그래프, 출처 인용을 추가하고 JSON으로 변환합니다. Gemini가 HTML 슬라이드에 시각 자료를 렌더링할 수 있도록 구조화된 데이터를 제공합니다. 트리거: 이미지, 차트, 그래프, 출처, 시각 자료, visual, 데이터 시각화, 인포그래픽

インストール方法を見る

含まれるファイル(1)

  • SKILL.md7.2 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

시각 자료 관리 스킬 (Visual Assets)

제안서 스크립트(proposal_script.md)에 이미지, 차트/그래프, 출처 인용을 추가하고, JSON 변환 시 Gemini가 렌더링할 수 있는 구조화된 데이터로 변환합니다.


3가지 시각 자료 유형

1. 이미지 (Images)

슬라이드에 삽입할 이미지 참조.

스크립트 작성법

### S15. 벤치마킹 사례 3선
- **이미지**: 서울시 관광 캠페인 키비주얼 | 크기: half | 출처: 서울관광재단 2025 보고서
- **이미지**: 부산시 숏폼 콘텐츠 예시 | 크기: quarter | 출처: 부산관광공사 인스타그램

필드 규격

필드필수설명예시
설명✅이미지 내용 설명 (Gemini가 플레이스홀더 생성 시 참조)서울시 관광 캠페인 키비주얼
크기❌full / half / quarter / icon (기본: half)half
출처✅이미지 출처서울관광재단 2025 보고서
URL❌실제 이미지 URL (있으면 Gemini가 <img> 태그 사용)https://...

JSON 변환 결과

{
  "visual_assets": {
    "images": [
      {
        "description": "서울시 관광 캠페인 키비주얼",
        "size": "half",
        "source": "서울관광재단 2025 보고서",
        "url": null
      }
    ]
  }
}

Gemini 렌더링 규칙

  • URL 있음: <img src="URL"> 태그로 실제 이미지 삽입
  • URL 없음: 설명 텍스트가 포함된 스타일링된 플레이스홀더 박스 생성
    • 배경: #E8E8E8 + 카메라 아이콘 + 설명 텍스트
    • 크기: full(100%), half(50%), quarter(25%), icon(64px)

2. 차트/그래프 (Charts)

데이터 기반 시각화 요소.

스크립트 작성법

### S08. 시장 규모 분석
- **차트**: bar_chart | 데이터: {"2023": 42, "2024": 51, "2025(E)": 63} | 단위: 조원 | 색상: primary
- **차트**: pie_donut | 데이터: {"SNS": 35, "검색": 28, "영상": 22, "기타": 15} | 단위: % | 색상: multi

차트 유형 (6종)

유형설명적용 장면
bar_chart세로/가로 막대연도별 비교, 점유율, 예산
pie_donut파이/도넛구성 비율, 예산 배분
line_trend라인/면적트렌드, 성장 추이
stacked_bar누적 막대카테고리별 구성 비교
radar방사형다차원 역량 비교
gauge게이지/진행률목표 달성률, KPI

필드 규격

필드필수설명예시
유형✅차트 유형 (6종 중 택1)bar_chart
데이터✅JSON 형식 키-값 쌍{"2023": 42, "2024": 51}
단위✅데이터 단위조원, %, 만명
색상❌primary / secondary / teal / accent / multi (기본: primary)multi
제목❌차트 제목 (없으면 Action Title 사용)연도별 시장 규모
방향❌vertical / horizontal (bar_chart 전용, 기본: vertical)horizontal

JSON 변환 결과

{
  "visual_assets": {
    "charts": [
      {
        "type": "bar_chart",
        "data": {"2023": 42, "2024": 51, "2025(E)": 63},
        "unit": "조원",
        "color": "primary",
        "title": null,
        "direction": "vertical"
      }
    ]
  }
}

Gemini 렌더링 규칙

  • SVG 또는 CSS 기반 차트 생성
  • 브랜드 컬러 팔레트 적용 (design_system.brand_colors 참조)
  • multi 색상: primary → secondary → teal → accent 순서 사용
  • 데이터 라벨 + 단위 표시
  • 반응형 크기 (슬라이드 영역 내 자동 조절)

3. 출처 인용 (Sources)

슬라이드 하단 각주 스타일 출처 표시.

스크립트 작성법

### S07. 국내 관광 시장 52조
- **출처**: 한국관광공사, 「2025 관광 동향 보고서」, 2025.03
- **출처**: 문화체육관광부, 관광 통계 DB, 2025.06 접근

필드 규격

필드필수설명예시
텍스트✅출처 전문한국관광공사, 「2025 관광 동향 보고서」, 2025.03
URL❌출처 URLhttps://...

참고: S-E-P의 Evidence 출처와 별도. Evidence 출처는 본문 내 인라인, 이 출처는 슬라이드 하단 각주.

JSON 변환 결과

{
  "visual_assets": {
    "sources": [
      {
        "text": "한국관광공사, 「2025 관광 동향 보고서」, 2025.03",
        "url": null
      }
    ]
  }
}

Gemini 렌더링 규칙

  • 슬라이드 하단 (y: 1040px 부근) 에 10pt 회색 텍스트로 표시
  • 여러 출처는 | 로 구분
  • URL이 있으면 밑줄 스타일 적용 (클릭 불가, 시각적 표시만)

스크립트 통합 예시

### S08. 시장 규모와 성장 기회
- **Action Title**: "관광 시장 52조, 디지털 전환이 핵심 성장 동력"
- **의도**: 시장 규모의 크기와 디지털 전환 트렌드를 데이터로 증명
- **내용**:
  - Story: 국내 관광 시장이 코로나 이후 빠르게 회복하며 52조원 규모에 도달
  - Evidence: 2025년 국내 관광 시장 52.3조원, 전년 대비 12% 성장 (한국관광공사, 2025)
  - Promise: 디지털 마케팅 강화로 이 성장세를 지역 관광에 연결
- **시각 의도**: 좌측에 연도별 시장 규모 바 차트, 우측에 핵심 수치 카드 3개
- **분위기**: white
- **Win Theme**: W1
- **차트**: bar_chart | 데이터: {"2021": 32, "2022": 38, "2023": 42, "2024": 47, "2025": 52} | 단위: 조원 | 색상: primary
- **이미지**: 관광 산업 인포그래픽 | 크기: quarter | 출처: 한국관광공사
- **출처**: 한국관광공사, 「2025 관광 동향 보고서」, 2025.03
- **출처**: 문화체육관광부, 관광 통계 DB, 2025.06 접근

시각 자료 품질 기준

권장 사항

  • 데이터 차트는 3~7개 데이터 포인트 적정 (너무 많으면 가독성 저하)
  • 이미지 플레이스홀더에는 구체적 설명 작성 (나중에 실제 이미지로 교체 가능)
  • 출처는 기관명 + 자료명 + 날짜 3요소 포함

주의 사항

  • ❌ 한 슬라이드에 차트 3개 이상 금지 (가독성)
  • ❌ full 크기 이미지 + 본문 텍스트 동시 배치 금지 (공간 부족)
  • ❌ 출처 없는 데이터를 차트로 시각화 금지
  • ❌ 차트 데이터에 실제 수치 대신 예시/가상 데이터 사용 금지 (리서치 데이터 활용)

절대 하지 말 것

  • ❌ 사용자가 제공하지 않은 이미지 URL을 임의 생성
  • ❌ 리서치 데이터 없이 차트 수치를 가공/날조
  • ❌ 출처를 생략하거나 "인터넷 자료" 등 모호한 출처 사용
  • ❌ 차트 유형을 데이터 성격에 맞지 않게 선택 (예: 시계열을 pie_donut으로)

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

analyst

無料

분석팀 에이전트. 입찰 제안서(RFP) 또는 마케팅 제안서(마케팅 플랜) 분석. PDF 분석 또는 사용자 브리핑 수집. 프로젝트 메타데이터, Pain Point, 평가기준 배점, 프로젝트 유형을 추출합니다. 트리거: RFP 분석, 제안요청서 분석, PDF 분석, Pain Point, 평가기준, 마케팅 분석, 마케팅 플랜

日本語の概要は準備中です。原文の説明を表示しています。

steveaimkt/proposal-agent-github312026年8月8日 更新

캠페인 브레인스토밍 에이전트. 3인 전문가 에이전트(전략가/크리에이터/데이터분석가)가 개별 브레인스토밍 후 크로스리뷰 토론으로 최적안을 도출합니다. campaign_brief.md 생성 → 제안서 파이프라인(Step 3)으로 연계. 트리거: 브레인스토밍, 캠페인 기획, 아이디어, brainstorm, 캠페인 전략, 크리에이티브

日本語の概要は準備中です。原文の説明を表示しています。

steveaimkt/proposal-agent-github312026年8月8日 更新

convert

無料

Converter 에이전트 v7.0. 승인된 proposal_script.md + visualization_strategy.md를 Gemini 슬라이드 디자인 요청용 proposal_slides.json (v2.0)으로 변환합니다. SPARK-6 구조, S-E-P, 40종 레이아웃, design_intent, gemini_instructions를 포함합니다. 트리거: JSON 변환, convert, proposal_slides.json, Gemini 디자인, 스크립트 변환, 제미나이

日本語の概要は準備中です。原文の説明を表示しています。

steveaimkt/proposal-agent-github312026年8月8日 更新

디자인 레퍼런스 분석 에이전트. 디자인 레퍼런스/ 폴더의 PDF, JPG, PPTX 파일을 분석하여 컬러 팔레트, 레이아웃 패턴, 도식 스타일, 분위기 리듬을 추출합니다. 출력: design_analysis.md. 트리거: 디자인 분석, 레퍼런스 분석, design analysis, 디자인 레퍼런스

日本語の概要は準備中です。原文の説明を表示しています。

steveaimkt/proposal-agent-github312026年8月8日 更新

designer

無料

제안서 디자인 에이전트. 승인된 proposal_script.md를 generate_제안서.py Python 코드로 변환합니다. slide_kit.py 함수 시그니처, VStack 레이아웃 계산, 7대 디자인 패턴, 겹침/넘침 방지, Dark-Light Rhythm을 적용합니다. 트리거: 디자인, 코드 생성, 레이아웃, VStack, slide_kit, 겹침, 넘침, COLS, GRID, FLOW, CHART, TABLE, HIGHLIGHT, KPIS, COMPARE, TIMELINE, PYRAMID, MATRIX, 그림자, 카드, Hero, Bento, Comparison

日本語の概要は準備中です。原文の説明を表示しています。

steveaimkt/proposal-agent-github312026年8月8日 更新

generate

無料

PM (총괄) 오케스트레이터 v9.0. 제안서 팀을 이끌어 8-Step 파이프라인을 실행합니다. 입찰 제안서(RFP) + 마케팅 제안서 + 캠페인 브레인스토밍 지원. Step 0 출력 형식 분기 + 4개 병렬 리서치 + 7개 전문 QA. 트리거: 제안서 생성, 제안서 제작, /p, /start, /pf, generate, 스크립트 작성

日本語の概要は準備中です。原文の説明を表示しています。

steveaimkt/proposal-agent-github312026年8月8日 更新

steveaimkt のスキルをすべて見る

このスキルの問題を報告する