# Consulting Report
> Generate consulting-firm style HTML reports — quotes, proposals, analyses, progress reports. 4 themes (Swiss/Signal, Slate/Teal, Warm Serif, Ivory/Navy/Gold) with 60/30/10 color discipline. Self-contained single HTML file, no build step. 컨설팅펌 스타일 HTML 보고서 생성 (견적서·제안서·분석보고서).
- Skill: `wjb127/consulting-report` (Agent Skill)
- Install (CLI): `npx skillmds@latest add wjb127/consulting-report`
- Raw SKILL.md: https://api.skillmd.com/api/skills/wjb127/consulting-report/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: wjb127 (https://skillmd.com/u/wjb127)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/wjb127/consulting-report
---
# consulting-report — 컨설팅 보고서 생성기
사용자 입력을 기반으로 컨설팅펌 스타일의 HTML 보고서를 생성한다.
**4개 테마 중 선택** (기본값 G). 모든 테마는 60/30/10 색상 비율을 유지하되 색감·폰트·레이아웃 시그니처가 다르다.
## 테마 선택 (Theme)
### 파라미터 파싱
사용자 입력 맨 앞(또는 `--theme X`)에서 테마 식별자를 추출한다. 대소문자 무시.
- `/consulting-report A ...` 또는 `--theme A` → **테마 A (Swiss/Signal)**
- `/consulting-report B ...` → **테마 B (Slate/Teal)**
- `/consulting-report C ...` → **테마 C (Warm Serif)**
- 식별자 없음 → **테마 G (기본 — 아이보리/남색/골드)**
식별자는 보고서 내용에서 제외(테마 지정용일 뿐). 나머지 텍스트가 실제 보고서 주제.
### 테마별 적용 규칙
**컴포넌트 HTML 구조와 CSS 클래스명은 4개 테마 모두 동일.** 테마마다 바꾸는 것은 ① `:root` 토큰 ② 폰트 `` + 폰트 변수 ③ 아래 명시된 레이아웃 시그니처뿐. 컴포넌트 정의(아래 "사용 가능한 컴포넌트")는 그대로 쓰되, 색/폰트만 토큰으로 치환된다.
- 테마 **G**는 외부 CDN 없음(시스템 Pretendard 폴백). **A/B/C는 구글폰트 CDN 사용**(고유 타이포가 핵심이라 예외 허용). ``에 preconnect 2줄 + 폰트 link 포함.
- 등급 태그(SAFE/STANDARD/COMPLEX), 비교카드, direction 등 모든 컴포넌트의 색은 각 테마 토큰을 그대로 따른다.
---
### 테마 A — Swiss / Signal (순백·잉크블랙·시그널레드)
> 차갑고 날선 에디토리얼. 데이터·진단·날카로운 분석에 적합.
폰트 링크:
```html
```
```css
:root{
--bg:#FFFFFF; --surface:#FFFFFF; --surface-tint:#F3F3F0;
--ink:#141414; --ink-soft:#3A3A38; --ink-line:#DBDBD6;
--accent:#E5341E; --accent-soft:#F4A79B; --accent-tint:rgba(229,52,30,0.07);
--safe:#2E7D5B; --safe-bg:rgba(46,125,91,0.08);
--standard:#C08A2A; --standard-bg:rgba(192,138,42,0.08);
--complex:#C0392B; --complex-bg:rgba(192,57,43,0.08);
--text:#141414; --text-muted:#6E6E6B;
--font-sans:'Inter','Noto Sans KR',sans-serif;
--font-mono:'Space Mono',monospace; /* 섹션번호·라벨·숫자단위 */
--font-num:'Space Mono',monospace; /* mod-num·ci-num·price */
}
```
레이아웃 시그니처: 헤어라인 룰(1px) 위주, 둥근모서리 0, 섹션번호/라벨/단위는 `--font-mono` 대문자, 숫자 `font-variant-numeric:tabular-nums`, doc-title 40px/weight800/letter-spacing -1.6px, summary/cap 그리드는 셀 사이 1px 보더로 꽉 채움. accent는 작은 블록·언더라인으로만.
---
### 테마 B — Slate / Teal (쿨그레이·딥슬레이트·틸)
> 모던 테크 컨설팅(딜로이트/액센추어 톤). SaaS·기술·디지털전환 제안에 적합.
폰트 링크:
```html
```
```css
:root{
--bg:#F4F6F7; --surface:#FFFFFF; --surface-tint:#EAEEF0;
--ink:#1E2A32; --ink-soft:#3A4A54; --ink-line:#D8DEE2;
--accent:#0E8C7F; --accent-soft:#5FD0C4; --accent-tint:rgba(14,140,127,0.08);
--safe:#0E8C7F; --safe-bg:rgba(14,140,127,0.08);
--standard:#C08A2A; --standard-bg:rgba(192,138,42,0.08);
--complex:#B4533F; --complex-bg:rgba(180,83,63,0.10);
--text:#1E2A32; --text-muted:#697882;
--font-sans:'IBM Plex Sans KR',sans-serif;
--font-mono:'IBM Plex Mono',monospace; /* 섹션번호·라벨·숫자 */
--font-num:'IBM Plex Mono',monospace;
}
```
레이아웃 시그니처: 둥근모서리 6~8px, 카드 좌측 3~5px 컬러 레일(`::before`), 등급은 pill 태그(border-radius 999px), direction은 다크 슬레이트 + 우상단 원형 틸 글로우(`::after`), 비교카드 헤더에 컬러 도트, 리스트 불릿 `›`, 숫자 tabular-nums.
---
### 테마 C — Warm Serif (크림·에스프레소·테라코타)
> 지적인 싱크탱크/이코노미스트 톤. 전략·인사이트·"읽히는" 보고서(전자책류)에 적합.
폰트 링크:
```html
```
```css
:root{
--bg:#F7F3EC; --surface:#FFFCF6; --surface-tint:#EFE8DC;
--ink:#23201B; --ink-soft:#4A443B; --ink-line:#DAD1C2;
--accent:#C2562F; --accent-soft:#E0A07F; --accent-tint:rgba(194,86,47,0.08);
--safe:#5C6B3F; --safe-bg:rgba(92,107,63,0.08);
--standard:#B07A1E; --standard-bg:rgba(176,122,30,0.08);
--complex:#9E421F; --complex-bg:rgba(158,66,31,0.08);
--text:#23201B; --text-muted:#8A7F6E;
--font-serif:'Noto Serif KR',Georgia,serif; /* 제목·헤드라인·숫자값·축명 */
--font-sans:'Noto Sans KR',sans-serif; /* 본문 */
--font-ital:'Spectral',Georgia,serif; /* 섹션번호·라벨(이탤릭) */
--font-num:'Noto Serif KR',serif;
}
```
레이아웃 시그니처: **세리프 주도**(doc-title·sec-title·값·축명 = `--font-serif`), 컨테이너 폭 780px로 좁혀 매거진 느낌, 헤더 중앙정렬, 섹션번호/라벨은 `--font-ital` 이탤릭("— 01. Direction"), sec-title 하단 2px 잉크 룰, 구분선은 점선/얇은 라인, 여백·line-height 큼(1.75), direction 중앙정렬.
---
## 디자인 시스템 — 기본 테마 G (아이보리/남색/골드)
> 아래 토큰은 **테마 G** 기준. A/B/C 선택 시 위 테마 토큰·폰트·시그니처로 치환하되, 컴포넌트 구조는 동일. 컴포넌트 정의에서 `'Pretendard'`/`'Georgia'` 직접 표기는 각 테마의 `--font-sans`/`--font-num`(또는 serif/ital) 변수로 대체.
### 색상 토큰 (CSS Variables)
```css
:root {
--bg: #FAF8F3; /* 60% — 배경, 여백 */
--surface: #FFFFFF; /* 카드, 모듈 내부 */
--surface-tint: #F4F1EA; /* 카드 사이드 패널, 강조 배경 */
--ink: #1B2545; /* 30% — 제목, 헤더 바, 총합 바 */
--ink-soft: #2E3958; /* 본문 강조 */
--ink-line: #D5D0C4; /* 구분선, 보더 */
--accent: #B89048; /* 10% — 섹션 번호, 태그, 하이라이트 */
--accent-soft: #E8D9B5; /* 총합 숫자, 남색 배경 위 강조 */
--accent-tint: rgba(184,144,72,0.08); /* 틴트 배경 */
--safe: #4A7C59; /* SAFE 등급 텍스트 */
--safe-bg: rgba(74,124,89,0.08); /* SAFE 등급 배경 */
--standard: #B8860B; /* STANDARD 등급 텍스트 */
--standard-bg: rgba(184,134,11,0.08); /* STANDARD 등급 배경 */
--complex: #8B3A3A; /* COMPLEX 등급 텍스트 */
--complex-bg: rgba(139,58,58,0.08); /* COMPLEX 등급 배경 */
--text: #1B2545;
--text-muted: #6B7A99;
}
```
### 타이포그래피
- 폰트: `'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif`
- 넘버링/장식: `'Georgia', serif` (이탤릭)
- 본문: 15px, line-height 1.7
- 문서 제목: 36px, weight 800, letter-spacing -1px
- 섹션 제목: 24px, weight 700, letter-spacing -0.3px
- 섹션 번호: 11px, letter-spacing 2px, 골드색, 대문자
- 태그/라벨: 11px, letter-spacing 3px, 골드색, 대문자
### 레이아웃
- 컨테이너: max-width 920px, 양쪽 패딩 24px
- 섹션 간격: margin-bottom 56px
- body 패딩: 60px 24px
### 반응형 (max-width: 768px)
- body 패딩: 32px 16px
- 제목: 26px
- 그리드 → 단일 컬럼
- flow 가로 → 세로 (화살표 90도 회전)
---
## 사용 가능한 컴포넌트
### 1. 문서 헤더 (doc-header)
```html
```
- 상단 4px 남색 보더
- 하단 1px 라인
### 2. 요약 카드 그리드 (summary-row)
```html
```
- 3컬럼 그리드 (모바일: 1컬럼)
- 1px gap + 보더로 셀 구분
### 3. 방향 박스 (direction)
```html
LABEL
핵심 메시지 제목
상세 설명. 강조 가능.
```
- 남색(--ink) 배경
- 왼쪽 5px 골드 악센트 바
- strong 태그 → accent-soft 색상
### 4. 플로우 차트 (flow)
```html
```
- 가로 배치, flex
- step-num: 골드 원형 뱃지 (28px)
- 모바일: 세로 전환
### 5. 모듈 카드 (module)
```html
```
- 3컬럼 그리드: 60px(번호) / 1fr(본문) / 160px(가격)
- mod-num: Georgia italic, 골드색
- mod-tier-tag: 등급에 따라 색상 변경
- SAFE: `background: var(--safe-bg); color: var(--safe);`
- STANDARD: `background: var(--standard-bg); color: var(--standard);`
- COMPLEX: `background: var(--complex-bg); color: var(--complex);`
- mod-list li::before: 골드색 em dash (—)
- 모바일: 단일 컬럼
### 6. 총합 바 (total-bar)
```html
```
- 남색 배경, accent-soft 숫자
### 7. 처리 규모 카드 (capacity)
```html
```
### 8. 확인 사항 리스트 (confirm-list)
```html
```
### 9. 확장/추가 기능 리스트 (expand-section)
```html
```
### 10. 문서 푸터 (doc-footer)
```html
```
- 상단 2px 남색 보더
- 중앙 정렬
### 11. 일반 테이블 (data-table)
```html
```
CSS (보고서에 추가):
```css
.data-table {
width: 100%;
border-collapse: collapse;
background: var(--surface);
border: 1px solid var(--ink-line);
margin-bottom: 14px;
}
.data-table th {
background: var(--surface-tint);
border-bottom: 2px solid var(--ink-line);
padding: 14px 18px;
text-align: left;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 700;
}
.data-table td {
padding: 14px 18px;
border-bottom: 1px solid var(--ink-line);
font-size: 14px;
color: var(--text);
}
.data-table tr:last-child td { border-bottom: none; }
```
### 12. 인용/강조 블록 (quote-block)
```html
```
CSS:
```css
.quote-block {
background: var(--accent-tint);
border-left: 4px solid var(--accent);
padding: 24px 28px;
margin: 20px 0;
}
.quote-block p {
font-size: 15px;
color: var(--ink);
line-height: 1.7;
font-style: italic;
}
```
### 13. 진행 타임라인 (timeline)
```html
```
CSS:
```css
.timeline { position: relative; padding-left: 32px; }
.timeline::before {
content: "";
position: absolute;
left: 11px; top: 0; bottom: 0;
width: 2px;
background: var(--ink-line);
}
.tl-item { position: relative; margin-bottom: 32px; }
.tl-marker {
position: absolute;
left: -32px; top: 4px;
width: 24px; height: 24px;
border-radius: 50%;
background: var(--accent);
border: 3px solid var(--bg);
}
.tl-content {}
.tl-label {
font-size: 11px;
letter-spacing: 2px;
color: var(--accent);
font-weight: 700;
margin-bottom: 4px;
}
.tl-item h4 {
font-size: 16px;
font-weight: 700;
color: var(--ink);
margin-bottom: 8px;
}
.tl-item p {
font-size: 14px;
color: var(--text-muted);
line-height: 1.7;
}
```
### 14. 비교 카드 (compare-grid)
```html
```
CSS:
```css
.compare-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px;
}
.compare-card {
background: var(--surface);
border: 1px solid var(--ink-line);
}
.compare-card.recommended { border: 2px solid var(--accent); }
.cc-header {
background: var(--surface-tint);
padding: 16px 20px;
font-size: 16px;
font-weight: 700;
color: var(--ink);
border-bottom: 1px solid var(--ink-line);
}
.rec-badge {
display: inline-block;
background: var(--accent);
color: white;
font-size: 10px;
padding: 2px 8px;
font-weight: 700;
letter-spacing: 1px;
vertical-align: middle;
margin-left: 8px;
}
.cc-body { padding: 24px 20px; }
.cc-price {
font-size: 30px;
font-weight: 800;
color: var(--ink);
margin-bottom: 16px;
}
.cc-price .unit {
font-size: 14px;
color: var(--text-muted);
font-weight: 500;
}
.cc-list { list-style: none; padding: 0; }
.cc-list li {
font-size: 13.5px;
color: var(--text-muted);
padding: 4px 0 4px 16px;
position: relative;
}
.cc-list li::before {
content: "—";
position: absolute;
left: 0;
color: var(--accent);
}
```
---
## 생성 흐름
### Step 1 — 사용자 입력 파싱
사용자 메시지에서 다음을 추출:
- **테마**: 입력 맨 앞 `A`/`B`/`C`(대소문자 무시) 또는 `--theme X` → 해당 테마. 없으면 **G(기본)**. ("테마 선택" 섹션 참조). 식별자는 보고서 내용에서 제외.
- **보고서 유형**: 견적서, 제안서, 분석 보고서, 프로젝트 계획서, 비교 분석, 진행 보고 등
- **제목**: 문서 메인 제목
- **대상**: 클라이언트명 또는 프로젝트명
- **내용**: 섹션별 내용 (사용자가 구조를 지정하면 따르고, 아니면 유형에 맞게 자동 구성)
- **파일명**: 지정 없으면 `report-{주제요약}-{YYYYMMDD}.html` (테마 G 외엔 `report-{주제}-{테마}-{YYYYMMDD}.html` 권장)
정보가 부족하면 질문:
> "보고서 제목이랑 포함할 내용 알려줘. 견적서면 모듈/가격 정보, 제안서면 핵심 제안 내용."
### Step 2 — 섹션 구성
보고서 유형에 따라 적절한 컴포넌트 조합:
**견적서**: doc-header → summary-row → direction → module × N → total-bar → confirm-list → expand-section → doc-footer
**제안서**: doc-header → summary-row → direction → timeline → module × N → compare-grid → confirm-list → doc-footer
**분석 보고서**: doc-header → summary-row → quote-block → data-table × N → capacity → confirm-list → doc-footer
**진행 보고**: doc-header → summary-row → timeline → module(완료/진행중) → confirm-list → doc-footer
**비교 분석**: doc-header → summary-row → compare-grid → data-table → quote-block → doc-footer
유형에 맞지 않는 컴포넌트는 생략. 필요하면 컴포넌트 조합을 자유롭게 변경.
### Step 3 — HTML 생성
1. **선택 테마의 `:root` 토큰 + 폰트 변수**를 `