harness/index.html
ythong c25e55b64b feat: harness + zio-harness Claude Code 플러그인 초기 배포
- harness: 도메인 한 줄 → 에이전트 팀 자동 생성 메타 스킬 (v1.2.0)
- zio-harness: React + Spring Boot + Mobile 풀스택 개발 에이전트 팀 (v1.0.0)
- 에이전트 4종: orchestrator / analyst / bot / agent
- PROJECT_MAP.md 폴더 구조 메모리 시스템
- references/: react, spring-boot, mobile, playwright, database, folder-map

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-17 13:48:56 +09:00

1419 lines
99 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Harness — Agent Team & Skill Architect for Claude Code</title>
<style>
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
--bg:#0a0a0f;
--surface:#12121a;
--surface2:#1a1a26;
--border:#2a2a3a;
--text:#e4e4ef;
--text-dim:#8888a0;
--accent:#7c6bf0;
--accent2:#a78bfa;
--accent-glow:rgba(124,107,240,.25);
--green:#34d399;
--amber:#fbbf24;
--radius:16px;
}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);line-height:1.7;overflow-x:hidden}
/* ── Canvas background ── */
#bg-canvas{position:fixed;inset:0;z-index:0;pointer-events:none}
/* ── Typography ── */
h1,h2,h3{font-weight:700;letter-spacing:-.02em;line-height:1.2}
h1{font-size:clamp(2.8rem,6vw,5rem)}
h2{font-size:clamp(1.8rem,3.5vw,2.8rem);margin-bottom:1rem}
h3{font-size:1.3rem}
p{color:var(--text-dim);max-width:640px}
a{color:var(--accent2);text-decoration:none;transition:color .2s}
a:hover{color:#c4b5fd}
/* ── Layout ── */
.container{max-width:1200px;margin:0 auto;padding:0 2rem;position:relative;z-index:1}
section{padding:7rem 0}
/* ── Language Toggle ── */
.lang-toggle{position:fixed;top:1.2rem;right:1.5rem;z-index:100;display:flex;gap:2px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:3px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.lang-btn{padding:.3rem .7rem;border:none;border-radius:7px;font-size:.75rem;font-weight:600;color:var(--text-dim);background:transparent;cursor:pointer;transition:all .2s;font-family:inherit;letter-spacing:.03em}
.lang-btn:hover{color:var(--text)}
.lang-btn.active{background:var(--accent);color:#fff;box-shadow:0 0 12px var(--accent-glow)}
/* ── Hero ── */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;position:relative}
.hero-inner{max-width:820px}
.badge{display:inline-block;padding:.4rem 1.2rem;border-radius:100px;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--accent-glow);color:var(--accent2);border:1px solid rgba(124,107,240,.3);margin-bottom:2rem}
.hero h1 span{background:linear-gradient(135deg,var(--accent2),var(--green));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{margin:.8rem auto 0;font-size:1.2rem;max-width:580px}
.hero-actions{display:flex;gap:1rem;justify-content:center;margin-top:2.5rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 2rem;border-radius:12px;font-weight:600;font-size:.95rem;transition:all .25s;cursor:pointer;border:none}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 0 30px var(--accent-glow)}
.btn-primary:hover{background:var(--accent2);transform:translateY(-2px);box-shadow:0 0 50px var(--accent-glow)}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent2);background:rgba(124,107,240,.06)}
.scroll-hint{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);animation:bounce 2s infinite}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(10px)}}
.scroll-hint svg{width:24px;height:24px;stroke:var(--text-dim);stroke-width:2;fill:none}
/* ── Stats bar ── */
.stats{padding:3rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
.stat-num{font-size:2.6rem;font-weight:800;background:linear-gradient(135deg,var(--accent2),var(--green));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-label{font-size:.85rem;color:var(--text-dim);margin-top:.3rem}
/* ── Feature cards ── */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;margin-top:3rem}
.feature-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;transition:all .3s;position:relative;overflow:hidden}
.feature-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(124,107,240,.06),transparent);opacity:0;transition:opacity .3s}
.feature-card:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,.3)}
.feature-card:hover::before{opacity:1}
.feature-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:1.2rem;background:var(--accent-glow);position:relative;z-index:1}
.feature-card h3{margin-bottom:.6rem;position:relative;z-index:1}
.feature-card p{font-size:.9rem;position:relative;z-index:1}
/* ── Use Cases ── */
.usecases-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:3rem}
.usecase-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;cursor:pointer;transition:all .4s;overflow:hidden}
.usecase-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.usecase-card[data-active="true"]{border-color:var(--accent);box-shadow:0 0 30px var(--accent-glow);background:var(--surface2)}
.uc-icon{font-size:2rem;margin-bottom:.8rem}
.usecase-card h3{font-size:1rem;margin-bottom:.3rem}
.uc-short{font-size:.8rem;color:var(--text-dim);margin:0}
.uc-detail{max-height:0;opacity:0;overflow:hidden;transition:all .4s ease;margin-top:0}
.usecase-card[data-active="true"] .uc-detail{max-height:300px;opacity:1;margin-top:1rem}
.usecase-card[data-active="true"] .uc-short{display:none}
.uc-agents{font-size:.85rem;color:var(--text);margin-bottom:.5rem}
.uc-pattern{margin-bottom:.6rem}
.uc-badge{display:inline-block;padding:.2rem .7rem;border-radius:100px;font-size:.7rem;font-weight:600;background:var(--accent-glow);color:var(--accent2);border:1px solid rgba(124,107,240,.3)}
.uc-detail>p{font-size:.85rem;color:var(--text-dim);margin:0}
.uc-prompt{font-family:'JetBrains Mono','Fira Code',monospace;font-size:.8rem;line-height:1.6;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:1rem;margin-top:.6rem;cursor:pointer;transition:all .2s;position:relative}
.uc-prompt:hover{border-color:var(--accent);box-shadow:0 0 15px var(--accent-glow)}
.uc-prompt.copied{border-color:var(--green)}
.uc-copy-hint{display:block;margin-top:.5rem;font-size:.7rem;color:var(--text-dim);font-family:Inter,-apple-system,sans-serif;transition:color .2s}
.uc-prompt.copied .uc-copy-hint{color:var(--green)}
@media(max-width:768px){.usecases-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.usecases-grid{grid-template-columns:1fr}}
/* ── Workflow (interactive timeline) ── */
.workflow-track{display:flex;flex-direction:column;gap:0;margin-top:3rem;position:relative}
.workflow-track::before{content:'';position:absolute;left:28px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--accent),var(--green));opacity:.3}
.phase{display:flex;gap:1.5rem;align-items:flex-start;padding:1.5rem 0;opacity:.4;transform:translateX(-20px);transition:all .5s ease}
.phase.active{opacity:1;transform:translateX(0)}
.phase-dot{width:58px;min-width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;background:var(--surface);border:2px solid var(--border);transition:all .4s;position:relative;z-index:1}
.phase.active .phase-dot{border-color:var(--accent);background:var(--accent-glow);box-shadow:0 0 25px var(--accent-glow)}
.phase-content h3{margin-bottom:.3rem}
.phase-content p{font-size:.9rem}
/* ── Patterns (interactive cards) ── */
.patterns-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:3rem}
.pattern-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;cursor:pointer;transition:all .3s;text-align:center}
.pattern-card:hover,.pattern-card.selected{border-color:var(--accent);background:var(--surface2)}
.pattern-card.selected{box-shadow:0 0 30px var(--accent-glow)}
.pattern-icon{font-size:2rem;margin-bottom:.8rem}
.pattern-card h3{font-size:1rem;margin-bottom:.3rem}
.pattern-card p{font-size:.8rem;margin:0 auto}
.pattern-detail{margin-top:2rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;min-height:120px;transition:all .3s}
.pattern-detail.glow{border-color:var(--accent);box-shadow:0 0 30px var(--accent-glow)}
/* ── Research section ── */
.research{background:var(--surface)}
.research-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;margin-top:3rem}
.bar-chart{display:flex;flex-direction:column;gap:1.5rem}
.bar-row{display:flex;align-items:center;gap:1rem}
.bar-label{width:80px;font-size:.85rem;color:var(--text-dim);text-align:right;flex-shrink:0}
.bar-track{flex:1;height:36px;background:var(--surface2);border-radius:8px;overflow:hidden;position:relative}
.bar-fill{height:100%;border-radius:8px;display:flex;align-items:center;padding:0 .8rem;font-size:.8rem;font-weight:700;color:#fff;width:0;transition:width 1.5s cubic-bezier(.22,1,.36,1)}
.bar-fill.without{background:linear-gradient(90deg,#444,#555)}
.bar-fill.with{background:linear-gradient(90deg,var(--accent),var(--green))}
.research-text .big-num{font-size:5rem;font-weight:800;background:linear-gradient(135deg,var(--accent2),var(--green));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.research-text .big-label{font-size:1.1rem;color:var(--text-dim);margin-bottom:1.5rem}
.finding{display:flex;gap:.8rem;align-items:flex-start;margin-bottom:1rem}
.finding-dot{width:8px;height:8px;border-radius:50%;background:var(--green);margin-top:.5rem;flex-shrink:0}
.finding p{font-size:.95rem;color:var(--text);max-width:none}
/* ── Harness 100 ── */
.domains-orbit{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:2.5rem}
.domain-tag{padding:.6rem 1.4rem;border-radius:100px;font-size:.85rem;font-weight:500;background:var(--surface);border:1px solid var(--border);transition:all .3s;cursor:default}
.domain-tag:hover{border-color:var(--accent);transform:scale(1.06);box-shadow:0 0 20px var(--accent-glow)}
/* ── Install section ── */
.install{text-align:center}
.code-block{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem 2rem;margin:1rem auto;max-width:520px;font-family:'JetBrains Mono','Fira Code',monospace;font-size:.9rem;text-align:left;position:relative;cursor:pointer;transition:all .3s}
.code-block:hover{border-color:var(--accent)}
.code-block .prompt{color:var(--green)}
.code-block .cmd{color:var(--text)}
.code-block .copy-btn{position:absolute;top:.8rem;right:.8rem;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:.4rem .7rem;font-size:.75rem;color:var(--text-dim);cursor:pointer;transition:all .2s}
.code-block .copy-btn:hover{color:var(--accent2);border-color:var(--accent)}
.code-block .copy-btn.copied{color:var(--green);border-color:var(--green)}
.install-steps{display:flex;gap:1rem;justify-content:center;margin:2rem 0;flex-wrap:wrap}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--accent-glow);color:var(--accent2);font-size:.8rem;font-weight:700;margin-right:.5rem}
/* ── Footer ── */
footer{padding:3rem 0;border-top:1px solid var(--border);text-align:center}
footer p{margin:0 auto;font-size:.85rem}
footer .links{display:flex;gap:2rem;justify-content:center;margin-bottom:1rem}
/* ── Scroll reveal ── */
.reveal{opacity:0;transform:translateY(30px);transition:all .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
/* ── Responsive ── */
@media(max-width:768px){
.stats-grid{grid-template-columns:repeat(2,1fr)}
.patterns-grid{grid-template-columns:repeat(2,1fr)}
.research-grid{grid-template-columns:1fr}
section{padding:4rem 0}
.lang-toggle{top:.8rem;right:.8rem}
}
@media(max-width:480px){
.patterns-grid{grid-template-columns:1fr}
.hero-actions{flex-direction:column;align-items:center}
}
</style>
</head>
<body>
<!-- ── Language Toggle ── -->
<div class="lang-toggle">
<button class="lang-btn" data-lang="en" onclick="setLang('en')">EN</button>
<button class="lang-btn" data-lang="ko" onclick="setLang('ko')">KO</button>
<button class="lang-btn" data-lang="ja" onclick="setLang('ja')">JA</button>
</div>
<!-- ── Background canvas ── -->
<canvas id="bg-canvas"></canvas>
<!-- ── Hero ── -->
<section class="hero">
<div class="hero-inner">
<div class="badge" data-i18n="hero.badge">Claude Code Plugin</div>
<h1 data-i18n="hero.title" data-i18n-html="true">Build <span>Agent Teams</span><br>That Actually Work</h1>
<p data-i18n="hero.desc">Harness is a meta-skill that designs domain-specific agent teams, defines specialized agents, and generates the skills they use &mdash; all from a single prompt.</p>
<div class="hero-actions">
<a href="#install" class="btn btn-primary" data-i18n="hero.btn_start">Get Started</a>
<a href="https://github.com/revfactory/harness" class="btn btn-outline" target="_blank">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
<span data-i18n="hero.btn_github">GitHub</span>
</a>
</div>
</div>
<div class="scroll-hint">
<svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>
</div>
</section>
<!-- ── Stats ── -->
<div class="stats">
<div class="container">
<div class="stats-grid">
<div class="stat">
<div class="stat-num" data-target="60" data-suffix="%">0</div>
<div class="stat-label" data-i18n="stats.quality_label">Quality Improvement</div>
</div>
<div class="stat">
<div class="stat-num" data-target="100" data-suffix="%">0</div>
<div class="stat-label" data-i18n="stats.winrate_label">Win Rate (15/15 tasks)</div>
</div>
<div class="stat">
<div class="stat-num" data-target="1808" data-suffix="">0</div>
<div class="stat-label" data-i18n="stats.files_label">Generated Files in Harness&nbsp;100</div>
</div>
<div class="stat">
<div class="stat-num" data-target="6" data-suffix="">0</div>
<div class="stat-label" data-i18n="stats.patterns_label">Architecture Patterns</div>
</div>
</div>
</div>
</div>
<!-- ── Features ── -->
<section id="features">
<div class="container">
<h2 class="reveal" data-i18n="features.title" data-i18n-html="true">Everything You Need to<br>Orchestrate Agent Teams</h2>
<p class="reveal" data-i18n="features.desc">From domain analysis to validation, Harness automates the entire lifecycle of building multi-agent systems.</p>
<div class="features-grid">
<div class="feature-card reveal">
<div class="feature-icon">&#9881;</div>
<h3 data-i18n="features.agent_title">Agent Team Design</h3>
<p data-i18n="features.agent_desc">6 battle-tested patterns &mdash; Pipeline, Fan-out/Fan-in, Expert Pool, Producer-Reviewer, Supervisor, and Hierarchical Delegation.</p>
</div>
<div class="feature-card reveal">
<div class="feature-icon">&#9733;</div>
<h3 data-i18n="features.skill_title">Skill Generation</h3>
<p data-i18n="features.skill_desc">Auto-generates skills with Progressive Disclosure, keeping context lean and loading details only when needed.</p>
</div>
<div class="feature-card reveal">
<div class="feature-icon">&#8644;</div>
<h3 data-i18n="features.orch_title">Orchestration</h3>
<p data-i18n="features.orch_desc">Message-based, task-based, and file-based data passing between agents with built-in error handling and fallback strategies.</p>
</div>
<div class="feature-card reveal">
<div class="feature-icon">&#10003;</div>
<h3 data-i18n="features.valid_title">Validation</h3>
<p data-i18n="features.valid_desc">Trigger verification, dry-run testing, and with-skill vs without-skill A/B comparison tests to prove quality gains.</p>
</div>
</div>
</div>
</section>
<!-- ── Use Cases ── -->
<section id="usecases">
<div class="container">
<h2 class="reveal" data-i18n="usecases.title">Try These Prompts</h2>
<p class="reveal" data-i18n="usecases.desc">Copy any prompt into Claude Code after installing Harness. Click to expand.</p>
<div class="usecases-grid reveal">
<div class="usecase-card" data-active="false">
<div class="uc-icon">&#128270;</div>
<h3 data-i18n="usecases.research.title">Deep Research</h3>
<p class="uc-short" data-i18n="usecases.research.short">Multi-agent investigation teams</p>
<div class="uc-detail">
<div class="uc-pattern"><span class="uc-badge">Fan-out/Fan-in</span></div>
<div class="uc-prompt" onclick="event.stopPropagation();copyPrompt(this)" data-i18n-prompt="usecases.research.prompt">Build a harness for deep research. I need an agent team that can investigate any topic from multiple angles &mdash; web search, academic sources, community sentiment &mdash; then cross-validate findings and produce a comprehensive report.<span class="uc-copy-hint" data-i18n="common.click_to_copy">Click to copy</span></div>
</div>
</div>
<div class="usecase-card" data-active="false">
<div class="uc-icon">&#127760;</div>
<h3 data-i18n="usecases.website.title">Website Development</h3>
<p class="uc-short" data-i18n="usecases.website.short">Full-stack build pipeline</p>
<div class="uc-detail">
<div class="uc-pattern"><span class="uc-badge">Pipeline</span></div>
<div class="uc-prompt" onclick="event.stopPropagation();copyPrompt(this)" data-i18n-prompt="usecases.website.prompt">Build a harness for full-stack website development. The team should handle design, frontend (React/Next.js), backend (API), and QA testing in a coordinated pipeline from wireframe to deployment.<span class="uc-copy-hint" data-i18n="common.click_to_copy">Click to copy</span></div>
</div>
</div>
<div class="usecase-card" data-active="false">
<div class="uc-icon">&#127912;</div>
<h3 data-i18n="usecases.webtoon.title">Webtoon Production</h3>
<p class="uc-short" data-i18n="usecases.webtoon.short">Creative team for episodic content</p>
<div class="uc-detail">
<div class="uc-pattern"><span class="uc-badge">Producer-Reviewer</span></div>
<div class="uc-prompt" onclick="event.stopPropagation();copyPrompt(this)" data-i18n-prompt="usecases.webtoon.prompt">Build a harness for webtoon episode production. I need agents for story writing, character design prompts, panel layout planning, and dialogue editing. They should review each other's work for style consistency.<span class="uc-copy-hint" data-i18n="common.click_to_copy">Click to copy</span></div>
</div>
</div>
<div class="usecase-card" data-active="false">
<div class="uc-icon">&#127909;</div>
<h3 data-i18n="usecases.youtube.title">YouTube Content</h3>
<p class="uc-short" data-i18n="usecases.youtube.short">End-to-end video planning</p>
<div class="uc-detail">
<div class="uc-pattern"><span class="uc-badge">Supervisor</span></div>
<div class="uc-prompt" onclick="event.stopPropagation();copyPrompt(this)" data-i18n-prompt="usecases.youtube.prompt">Build a harness for YouTube content creation. The team should research trending topics, write scripts, optimize titles/tags for SEO, and plan thumbnail concepts &mdash; all coordinated by a supervisor agent.<span class="uc-copy-hint" data-i18n="common.click_to_copy">Click to copy</span></div>
</div>
</div>
<div class="usecase-card" data-active="false">
<div class="uc-icon">&#128269;</div>
<h3 data-i18n="usecases.codereview.title">Code Review</h3>
<p class="uc-short" data-i18n="usecases.codereview.short">Parallel multi-dimension audit</p>
<div class="uc-detail">
<div class="uc-pattern"><span class="uc-badge">Fan-out/Fan-in</span></div>
<div class="uc-prompt" onclick="event.stopPropagation();copyPrompt(this)" data-i18n-prompt="usecases.codereview.prompt">Build a harness for comprehensive code review. I want parallel agents checking architecture, security vulnerabilities, performance bottlenecks, and code style &mdash; then merging all findings into a single report.<span class="uc-copy-hint" data-i18n="common.click_to_copy">Click to copy</span></div>
</div>
</div>
<div class="usecase-card" data-active="false">
<div class="uc-icon">&#128218;</div>
<h3 data-i18n="usecases.techdocs.title">Technical Docs</h3>
<p class="uc-short" data-i18n="usecases.techdocs.short">Docs from codebase analysis</p>
<div class="uc-detail">
<div class="uc-pattern"><span class="uc-badge">Pipeline</span></div>
<div class="uc-prompt" onclick="event.stopPropagation();copyPrompt(this)" data-i18n-prompt="usecases.techdocs.prompt">Build a harness that generates API documentation from this codebase. Agents should analyze endpoints, write descriptions, generate usage examples, and review for completeness.<span class="uc-copy-hint" data-i18n="common.click_to_copy">Click to copy</span></div>
</div>
</div>
<div class="usecase-card" data-active="false">
<div class="uc-icon">&#128202;</div>
<h3 data-i18n="usecases.datapipeline.title">Data Pipelines</h3>
<p class="uc-short" data-i18n="usecases.datapipeline.short">End-to-end data workflows</p>
<div class="uc-detail">
<div class="uc-pattern"><span class="uc-badge">Hierarchical Delegation</span></div>
<div class="uc-prompt" onclick="event.stopPropagation();copyPrompt(this)" data-i18n-prompt="usecases.datapipeline.prompt">Build a harness for designing data pipelines. I need agents for schema design, ETL logic, data validation rules, and monitoring setup that delegate sub-tasks hierarchically.<span class="uc-copy-hint" data-i18n="common.click_to_copy">Click to copy</span></div>
</div>
</div>
<div class="usecase-card" data-active="false">
<div class="uc-icon">&#128640;</div>
<h3 data-i18n="usecases.marketing.title">Marketing Campaign</h3>
<p class="uc-short" data-i18n="usecases.marketing.short">Campaign asset creation &amp; testing</p>
<div class="uc-detail">
<div class="uc-pattern"><span class="uc-badge">Producer-Reviewer</span></div>
<div class="uc-prompt" onclick="event.stopPropagation();copyPrompt(this)" data-i18n-prompt="usecases.marketing.prompt">Build a harness for marketing campaign creation. The team should research the target market, write ad copy, design visual concepts, and set up A/B test plans with iterative quality review.<span class="uc-copy-hint" data-i18n="common.click_to_copy">Click to copy</span></div>
</div>
</div>
</div>
</div>
</section>
<!-- ── Workflow ── -->
<section id="workflow">
<div class="container">
<h2 class="reveal" data-i18n="workflow.title">6-Phase Workflow</h2>
<p class="reveal" data-i18n="workflow.desc" data-i18n-html="true">Say &ldquo;build a harness&rdquo; and Harness runs a structured 6-phase pipeline to produce production-ready agent teams.</p>
<div class="workflow-track">
<div class="phase" data-phase="1">
<div class="phase-dot">01</div>
<div class="phase-content">
<h3 data-i18n="workflow.phase1.title">Domain Analysis</h3>
<p data-i18n="workflow.phase1.desc">Analyze your codebase, identify task types, detect user expertise, and prevent conflicts with existing agents.</p>
</div>
</div>
<div class="phase" data-phase="2">
<div class="phase-dot">02</div>
<div class="phase-content">
<h3 data-i18n="workflow.phase2.title">Team Architecture Design</h3>
<p data-i18n="workflow.phase2.desc">Choose between Agent Teams and Subagents, select from 6 architectural patterns, and define agent separation criteria.</p>
</div>
</div>
<div class="phase" data-phase="3">
<div class="phase-dot">03</div>
<div class="phase-content">
<h3 data-i18n="workflow.phase3.title">Agent Definition Generation</h3>
<p data-i18n="workflow.phase3.desc">Generate <code>.claude/agents/*.md</code> files with roles, principles, I/O protocols, and team communication contracts.</p>
</div>
</div>
<div class="phase" data-phase="4">
<div class="phase-dot">04</div>
<div class="phase-content">
<h3 data-i18n="workflow.phase4.title">Skill Generation</h3>
<p data-i18n="workflow.phase4.desc">Create skills with YAML frontmatter, pushy trigger descriptions, and Progressive Disclosure (metadata &rarr; body &rarr; references).</p>
</div>
</div>
<div class="phase" data-phase="5">
<div class="phase-dot">05</div>
<div class="phase-content">
<h3 data-i18n="workflow.phase5.title">Integration &amp; Orchestration</h3>
<p data-i18n="workflow.phase5.desc">Wire agents together with orchestrator skills, data-passing protocols, error handling, and team size guidelines.</p>
</div>
</div>
<div class="phase" data-phase="6">
<div class="phase-dot">06</div>
<div class="phase-content">
<h3 data-i18n="workflow.phase6.title">Validation &amp; Testing</h3>
<p data-i18n="workflow.phase6.desc">Structure checks, trigger verification, dry-run tests, with/without-skill comparison, and iterative refinement.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ── Architecture Patterns ── -->
<section id="patterns">
<div class="container">
<h2 class="reveal" data-i18n="patterns.title">6 Architecture Patterns</h2>
<p class="reveal" data-i18n="patterns.desc">Pick the right coordination strategy for your workload. Click a pattern to learn more.</p>
<div class="patterns-grid reveal">
<div class="pattern-card selected" data-pattern="pipeline">
<div class="pattern-icon">&#8594;</div>
<h3 data-i18n="patterns.pipeline.title">Pipeline</h3>
<p data-i18n="patterns.pipeline.short">Sequential dependent tasks</p>
</div>
<div class="pattern-card" data-pattern="fanout">
<div class="pattern-icon">&#10023;</div>
<h3 data-i18n="patterns.fanout.title">Fan-out / Fan-in</h3>
<p data-i18n="patterns.fanout.short">Parallel independent tasks</p>
</div>
<div class="pattern-card" data-pattern="expert">
<div class="pattern-icon">&#9824;</div>
<h3 data-i18n="patterns.expert.title">Expert Pool</h3>
<p data-i18n="patterns.expert.short">Context-dependent selection</p>
</div>
<div class="pattern-card" data-pattern="review">
<div class="pattern-icon">&#8651;</div>
<h3 data-i18n="patterns.review.title">Producer-Reviewer</h3>
<p data-i18n="patterns.review.short">Generate then verify</p>
</div>
<div class="pattern-card" data-pattern="supervisor">
<div class="pattern-icon">&#9670;</div>
<h3 data-i18n="patterns.supervisor.title">Supervisor</h3>
<p data-i18n="patterns.supervisor.short">Central dynamic dispatch</p>
</div>
<div class="pattern-card" data-pattern="hierarchy">
<div class="pattern-icon">&#9651;</div>
<h3 data-i18n="patterns.hierarchy.title">Hierarchical Delegation</h3>
<p data-i18n="patterns.hierarchy.short">Top-down recursive split</p>
</div>
</div>
<div class="pattern-detail glow" id="pattern-detail">
<h3 id="detail-title">Pipeline</h3>
<p id="detail-desc" style="max-width:none;color:var(--text-dim);margin-top:.5rem">Each agent's output feeds directly into the next. Ideal for workflows where steps are strictly ordered &mdash; code generation &rarr; review &rarr; testing &rarr; deployment. Simple to reason about, but the chain is only as fast as the slowest link.</p>
</div>
</div>
</section>
<!-- ── Research ── -->
<section class="research" id="research">
<div class="container">
<h2 class="reveal" data-i18n="research.title">Proven by Research</h2>
<p class="reveal" data-i18n="research.desc">A controlled A/B experiment across 15 software engineering tasks at 3 difficulty levels.</p>
<div class="research-grid">
<div class="bar-chart reveal" id="bar-chart">
<div class="bar-row">
<div class="bar-label">Basic</div>
<div class="bar-track">
<div class="bar-fill without" data-width="55" style="width:0">55.4</div>
</div>
<div class="bar-track">
<div class="bar-fill with" data-width="79" style="width:0">79.2</div>
</div>
</div>
<div class="bar-row">
<div class="bar-label">Advanced</div>
<div class="bar-track">
<div class="bar-fill without" data-width="49" style="width:0">49.0</div>
</div>
<div class="bar-track">
<div class="bar-fill with" data-width="79" style="width:0">78.6</div>
</div>
</div>
<div class="bar-row">
<div class="bar-label">Expert</div>
<div class="bar-track">
<div class="bar-fill without" data-width="44" style="width:0">44.0</div>
</div>
<div class="bar-track">
<div class="bar-fill with" data-width="80" style="width:0">80.2</div>
</div>
</div>
<div style="display:flex;gap:1.5rem;margin-top:1rem;font-size:.8rem;color:var(--text-dim)">
<span><span style="display:inline-block;width:12px;height:12px;border-radius:3px;background:#555;margin-right:.4rem;vertical-align:middle"></span><span data-i18n="research.bar_without">Without Harness</span></span>
<span><span style="display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--accent);margin-right:.4rem;vertical-align:middle"></span><span data-i18n="research.bar_with">With Harness</span></span>
</div>
</div>
<div class="research-text reveal">
<div class="big-num">+60%</div>
<div class="big-label" data-i18n="research.big_label">Average quality improvement</div>
<div class="finding"><div class="finding-dot"></div><p data-i18n="research.finding1" data-i18n-html="true"><strong>100% win rate</strong> across all 15 test cases</p></div>
<div class="finding"><div class="finding-dot"></div><p data-i18n="research.finding2" data-i18n-html="true"><strong>32% less variance</strong> &mdash; more consistent, predictable output</p></div>
<div class="finding"><div class="finding-dot"></div><p data-i18n="research.finding3" data-i18n-html="true"><strong>Scales with complexity</strong> &mdash; the harder the task, the bigger the gain</p></div>
<a href="https://github.com/revfactory/claude-code-harness" target="_blank" class="btn btn-outline" style="margin-top:1.5rem" data-i18n="research.btn" data-i18n-html="true">Read the Paper &rarr;</a>
</div>
</div>
</div>
</section>
<!-- ── Harness 100 ── -->
<section id="harness100">
<div class="container" style="text-align:center">
<h2 class="reveal" data-i18n="harness100.title">100 Ready-Made Harnesses</h2>
<p class="reveal" style="margin:0 auto" data-i18n="harness100.desc">Production-ready agent teams across 10 domains. 200 packages (EN + KO). 1,808 files. All generated by this plugin.</p>
<div class="domains-orbit reveal">
<div class="domain-tag" data-i18n="harness100.domain_content">Content Creation</div>
<div class="domain-tag" data-i18n="harness100.domain_software">Software Dev</div>
<div class="domain-tag" data-i18n="harness100.domain_data">Data &amp; AI/ML</div>
<div class="domain-tag" data-i18n="harness100.domain_business">Business Strategy</div>
<div class="domain-tag" data-i18n="harness100.domain_education">Education</div>
<div class="domain-tag" data-i18n="harness100.domain_legal">Legal &amp; Compliance</div>
<div class="domain-tag" data-i18n="harness100.domain_health">Health &amp; Lifestyle</div>
<div class="domain-tag" data-i18n="harness100.domain_communication">Communication</div>
<div class="domain-tag" data-i18n="harness100.domain_operations">Operations</div>
<div class="domain-tag" data-i18n="harness100.domain_specialized">Specialized Domains</div>
</div>
<a href="https://github.com/revfactory/harness-100" target="_blank" class="btn btn-outline" style="margin-top:2.5rem" data-i18n="harness100.btn" data-i18n-html="true">Explore Harness 100 &rarr;</a>
</div>
</section>
<!-- ── Install ── -->
<section class="install" id="install">
<div class="container">
<h2 class="reveal" data-i18n="install.title">Get Started in Seconds</h2>
<p class="reveal" style="margin:0 auto 2rem" data-i18n="install.desc" data-i18n-html="true">Two commands. That&rsquo;s it.</p>
<div class="reveal">
<div style="display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:.5rem">
<span class="step-num">1</span><span style="font-size:.9rem;color:var(--text-dim)" data-i18n="install.step1">Add the marketplace</span>
</div>
<div class="code-block" onclick="copyCode(this)">
<span class="prompt">&gt; </span><span class="cmd">/plugin marketplace add revfactory/harness</span>
<button class="copy-btn" data-i18n="install.copy_btn">Copy</button>
</div>
<div style="display:flex;align-items:center;justify-content:center;gap:.5rem;margin:1.5rem 0 .5rem">
<span class="step-num">2</span><span style="font-size:.9rem;color:var(--text-dim)" data-i18n="install.step2">Install the plugin</span>
</div>
<div class="code-block" onclick="copyCode(this)">
<span class="prompt">&gt; </span><span class="cmd">/plugin install harness@harness</span>
<button class="copy-btn" data-i18n="install.copy_btn">Copy</button>
</div>
<p style="margin:2rem auto 0;font-size:.9rem" data-i18n="install.hint" data-i18n-html="true">Then just say: <strong style="color:var(--accent2)">&ldquo;Build a harness for this project&rdquo;</strong></p>
</div>
</div>
</section>
<!-- ── Footer ── -->
<footer>
<div class="container">
<div class="links">
<a href="https://github.com/revfactory/harness" target="_blank" data-i18n="footer.github">GitHub</a>
<a href="https://github.com/revfactory/harness-100" target="_blank" data-i18n="footer.harness100">Harness 100</a>
<a href="https://github.com/revfactory/claude-code-harness" target="_blank" data-i18n="footer.research">Research Paper</a>
<a href="privacy.html" data-i18n="footer.privacy">Privacy Policy</a>
</div>
<p data-i18n="footer.copyright" data-i18n-html="true">Apache 2.0 &mdash; Built by <a href="https://github.com/revfactory" target="_blank">revfactory</a></p>
</div>
</footer>
<script>
// ── i18n Translation System ──
const i18n = {
"hero.badge": {
"en": "Claude Code Plugin",
"ko": "Claude Code \ud50c\ub7ec\uadf8\uc778",
"ja": "Claude Code \u30d7\u30e9\u30b0\u30a4\u30f3"
},
"hero.title": {
"en": "Build <span>Agent Teams</span><br>That Actually Work",
"ko": "\uc9c4\uc9dc \uc791\ub3d9\ud558\ub294 <span>\uc5d0\uc774\uc804\ud2b8 \ud300</span>\uc744<br>\uad6c\ucd95\ud558\uc138\uc694",
"ja": "\u672c\u5f53\u306b\u6a5f\u80fd\u3059\u308b<span>\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u30c1\u30fc\u30e0</span>\u3092<br>\u69cb\u7bc9\u3057\u3088\u3046"
},
"hero.desc": {
"en": "Harness is a meta-skill that designs domain-specific agent teams, defines specialized agents, and generates the skills they use \u2014 all from a single prompt.",
"ko": "Harness\ub294 \ub3c4\uba54\uc778\uc5d0 \ub9de\ub294 \uc5d0\uc774\uc804\ud2b8 \ud300\uc744 \uc124\uacc4\ud558\uace0, \uc804\ubb38 \uc5d0\uc774\uc804\ud2b8\ub97c \uc815\uc758\ud558\uba70, \uc5d0\uc774\uc804\ud2b8\uac00 \uc0ac\uc6a9\ud560 \uc2a4\ud0ac\uc744 \uc0dd\uc131\ud558\ub294 \uba54\ud0c0 \uc2a4\ud0ac\uc785\ub2c8\ub2e4 \u2014 \ub2e8 \ud558\ub098\uc758 \ud504\ub86c\ud504\ud2b8\ub85c.",
"ja": "Harness\u306f\u30c9\u30e1\u30a4\u30f3\u7279\u5316\u306e\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u30c1\u30fc\u30e0\u3092\u8a2d\u8a08\u3057\u3001\u5c02\u9580\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u3092\u5b9a\u7fa9\u3057\u3001\u5f7c\u3089\u304c\u4f7f\u3046\u30b9\u30ad\u30eb\u3092\u751f\u6210\u3059\u308b\u30e1\u30bf\u30b9\u30ad\u30eb\u3067\u3059 \u2014 \u305f\u3063\u305f\u4e00\u3064\u306e\u30d7\u30ed\u30f3\u30d7\u30c8\u3067\u3002"
},
"hero.btn_start": {
"en": "Get Started",
"ko": "\uc2dc\uc791\ud558\uae30",
"ja": "\u59cb\u3081\u307e\u3057\u3087\u3046"
},
"hero.btn_github": {
"en": "GitHub",
"ko": "GitHub",
"ja": "GitHub"
},
"stats.quality_label": {
"en": "Quality Improvement",
"ko": "\ud488\uc9c8 \uac1c\uc120",
"ja": "\u54c1\u8cea\u5411\u4e0a"
},
"stats.winrate_label": {
"en": "Win Rate (15/15 tasks)",
"ko": "\uc2b9\ub960 (15/15 \uacfc\uc81c)",
"ja": "\u52dd\u7387\uff0815/15\u30bf\u30b9\u30af\uff09"
},
"stats.files_label": {
"en": "Generated Files in Harness&nbsp;100",
"ko": "Harness 100\uc5d0\uc11c \uc0dd\uc131\ub41c \ud30c\uc77c",
"ja": "Harness 100\u3067\u751f\u6210\u3055\u308c\u305f\u30d5\u30a1\u30a4\u30eb"
},
"stats.patterns_label": {
"en": "Architecture Patterns",
"ko": "\uc544\ud0a4\ud14d\ucc98 \ud328\ud134",
"ja": "\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u30d1\u30bf\u30fc\u30f3"
},
"features.title": {
"en": "Everything You Need to<br>Orchestrate Agent Teams",
"ko": "\uc5d0\uc774\uc804\ud2b8 \ud300 \uc624\ucf00\uc2a4\ud2b8\ub808\uc774\uc158\uc5d0<br>\ud544\uc694\ud55c \ubaa8\ub4e0 \uac83",
"ja": "\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u30c1\u30fc\u30e0\u306e\u30aa\u30fc\u30b1\u30b9\u30c8\u30ec\u30fc\u30b7\u30e7\u30f3\u306b<br>\u5fc5\u8981\u306a\u3059\u3079\u3066"
},
"features.desc": {
"en": "From domain analysis to validation, Harness automates the entire lifecycle of building multi-agent systems.",
"ko": "\ub3c4\uba54\uc778 \ubd84\uc11d\ubd80\ud130 \uac80\uc99d\uae4c\uc9c0, Harness\uac00 \uba40\ud2f0 \uc5d0\uc774\uc804\ud2b8 \uc2dc\uc2a4\ud15c \uad6c\ucd95\uc758 \uc804 \uacfc\uc815\uc744 \uc790\ub3d9\ud654\ud569\ub2c8\ub2e4.",
"ja": "\u30c9\u30e1\u30a4\u30f3\u5206\u6790\u304b\u3089\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u307e\u3067\u3001Harness\u304c\u30de\u30eb\u30c1\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u30b7\u30b9\u30c6\u30e0\u69cb\u7bc9\u306e\u5168\u30e9\u30a4\u30d5\u30b5\u30a4\u30af\u30eb\u3092\u81ea\u52d5\u5316\u3057\u307e\u3059\u3002"
},
"features.agent_title": {
"en": "Agent Team Design",
"ko": "\uc5d0\uc774\uc804\ud2b8 \ud300 \uc124\uacc4",
"ja": "\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u30c1\u30fc\u30e0\u8a2d\u8a08"
},
"features.agent_desc": {
"en": "6 battle-tested patterns \u2014 Pipeline, Fan-out/Fan-in, Expert Pool, Producer-Reviewer, Supervisor, and Hierarchical Delegation.",
"ko": "\uc2e4\uc804 \uac80\uc99d\ub41c 6\uac00\uc9c0 \ud328\ud134 \u2014 Pipeline, Fan-out/Fan-in, \uc804\ubb38\uac00 \ud480, \uc0dd\uc131-\uac80\uc99d, \uac10\ub3c5\uc790, \uacc4\uce35\uc801 \uc704\uc784.",
"ja": "\u5b9f\u6226\u691c\u8a3c\u6e08\u307f\u306e6\u30d1\u30bf\u30fc\u30f3 \u2014 Pipeline\u3001Fan-out/Fan-in\u3001\u30a8\u30ad\u30b9\u30d1\u30fc\u30c8\u30d7\u30fc\u30eb\u3001\u30d7\u30ed\u30c7\u30e5\u30fc\u30b5\u30fc\u30fb\u30ec\u30d3\u30e5\u30ef\u30fc\u3001\u30b9\u30fc\u30d1\u30fc\u30d0\u30a4\u30b6\u30fc\u3001\u968e\u5c64\u7684\u59d4\u4efb\u3002"
},
"features.skill_title": {
"en": "Skill Generation",
"ko": "\uc2a4\ud0ac \uc0dd\uc131",
"ja": "\u30b9\u30ad\u30eb\u751f\u6210"
},
"features.skill_desc": {
"en": "Auto-generates skills with Progressive Disclosure, keeping context lean and loading details only when needed.",
"ko": "Progressive Disclosure \ud328\ud134\uc73c\ub85c \ucee8\ud14d\uc2a4\ud2b8\ub97c \ud6a8\uc728\uc801\uc73c\ub85c \uad00\ub9ac\ud558\uba70, \ud544\uc694\ud560 \ub54c\ub9cc \uc138\ubd80\uc0ac\ud56d\uc744 \ub85c\ub4dc\ud558\ub294 \uc2a4\ud0ac\uc744 \uc790\ub3d9 \uc0dd\uc131\ud569\ub2c8\ub2e4.",
"ja": "Progressive Disclosure\u3067\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u3092\u52b9\u7387\u7684\u306b\u7ba1\u7406\u3057\u3001\u5fc5\u8981\u306a\u6642\u3060\u3051\u8a73\u7d30\u3092\u8aad\u307f\u8fbc\u3080\u30b9\u30ad\u30eb\u3092\u81ea\u52d5\u751f\u6210\u3057\u307e\u3059\u3002"
},
"features.orch_title": {
"en": "Orchestration",
"ko": "\uc624\ucf00\uc2a4\ud2b8\ub808\uc774\uc158",
"ja": "\u30aa\u30fc\u30b1\u30b9\u30c8\u30ec\u30fc\u30b7\u30e7\u30f3"
},
"features.orch_desc": {
"en": "Message-based, task-based, and file-based data passing between agents with built-in error handling and fallback strategies.",
"ko": "\uba54\uc2dc\uc9c0, \ud0dc\uc2a4\ud06c, \ud30c\uc77c \uae30\ubc18\uc758 \uc5d0\uc774\uc804\ud2b8 \uac04 \ub370\uc774\ud130 \uc804\ub2ec\uacfc \ub0b4\uc7a5\ub41c \uc5d0\ub7ec \ud578\ub4e4\ub9c1 \ubc0f \ud3f4\ubc31 \uc804\ub7b5\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4.",
"ja": "\u30e1\u30c3\u30bb\u30fc\u30b8\u3001\u30bf\u30b9\u30af\u3001\u30d5\u30a1\u30a4\u30eb\u30d9\u30fc\u30b9\u306e\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u9593\u30c7\u30fc\u30bf\u53d7\u3051\u6e21\u3057\u3068\u3001\u7d44\u307f\u8fbc\u307f\u306e\u30a8\u30e9\u30fc\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\u30fb\u30d5\u30a9\u30fc\u30eb\u30d0\u30c3\u30af\u6226\u7565\u3002"
},
"features.valid_title": {
"en": "Validation",
"ko": "\uac80\uc99d \uccb4\uacc4",
"ja": "\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3"
},
"features.valid_desc": {
"en": "Trigger verification, dry-run testing, and with-skill vs without-skill A/B comparison tests to prove quality gains.",
"ko": "\ud2b8\ub9ac\uac70 \uac80\uc99d, \ub4dc\ub77c\uc774\ub7f0 \ud14c\uc2a4\ud2b8, With-skill vs Without-skill A/B \ube44\uad50 \ud14c\uc2a4\ud2b8\ub85c \ud488\uc9c8 \ud5a5\uc0c1\uc744 \uc785\uc99d\ud569\ub2c8\ub2e4.",
"ja": "\u30c8\u30ea\u30ac\u30fc\u691c\u8a3c\u3001\u30c9\u30e9\u30a4\u30e9\u30f3\u30c6\u30b9\u30c8\u3001With-skill vs Without-skill\u306eA/B\u6bd4\u8f03\u30c6\u30b9\u30c8\u3067\u54c1\u8cea\u5411\u4e0a\u3092\u5b9f\u8a3c\u3057\u307e\u3059\u3002"
},
"usecases.title": {
"en": "Try These Prompts",
"ko": "\uc774 \ud504\ub86c\ud504\ud2b8\ub97c \uc0ac\uc6a9\ud574\ubcf4\uc138\uc694",
"ja": "\u3053\u306e\u30d7\u30ed\u30f3\u30d7\u30c8\u3092\u8a66\u3057\u3066\u307f\u3088\u3046"
},
"usecases.desc": {
"en": "Copy any prompt into Claude Code after installing Harness. Click to expand.",
"ko": "Harness \uc124\uce58 \ud6c4 \uc544\ubb34 \ud504\ub86c\ud504\ud2b8\ub098 Claude Code\uc5d0 \ubcf5\uc0ac\ud574\uc11c \uc0ac\uc6a9\ud558\uc138\uc694. \ud074\ub9ad\ud558\uc5ec \ud3bc\uce58\uae30.",
"ja": "Harness\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u5f8c\u3001\u4efb\u610f\u306e\u30d7\u30ed\u30f3\u30d7\u30c8\u3092Claude Code\u306b\u30b3\u30d4\u30fc\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u30af\u30ea\u30c3\u30af\u3067\u5c55\u958b\u3002"
},
"usecases.research.title": {
"en": "Deep Research",
"ko": "\ub525 \ub9ac\uc11c\uce58",
"ja": "\u30c7\u30a3\u30fc\u30d7\u30ea\u30b5\u30fc\u30c1"
},
"usecases.research.short": {
"en": "Multi-agent investigation teams",
"ko": "\uba40\ud2f0 \uc5d0\uc774\uc804\ud2b8 \uc870\uc0ac \ud300",
"ja": "\u30de\u30eb\u30c1\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u8abf\u67fb\u30c1\u30fc\u30e0"
},
"usecases.research.prompt": {
"en": "Build a harness for deep research. I need an agent team that can investigate any topic from multiple angles \u2014 web search, academic sources, community sentiment \u2014 then cross-validate findings and produce a comprehensive report.",
"ko": "\ub9ac\uc11c\uce58 \ud558\ub124\uc2a4\ub97c \uad6c\uc131\ud574\uc918. \uc5b4\ub5a4 \uc8fc\uc81c\ub4e0 \uc5ec\ub7ec \uac01\ub3c4\uc5d0\uc11c \uc870\uc0ac\ud560 \uc218 \uc788\ub294 \uc5d0\uc774\uc804\ud2b8 \ud300\uc774 \ud544\uc694\ud574 \u2014 \uc6f9 \uac80\uc0c9, \ud559\uc220 \uc790\ub8cc, \ucee4\ubba4\ub2c8\ud2f0 \ubc18\uc751 \u2014 \uad50\ucc28 \uac80\uc99d \ud6c4 \uc885\ud569 \ubcf4\uace0\uc11c\ub97c \uc791\uc131\ud558\ub294 \ud300.",
"ja": "\u30c7\u30a3\u30fc\u30d7\u30ea\u30b5\u30fc\u30c1\u7528\u306e\u30cf\u30fc\u30cd\u30b9\u3092\u69cb\u6210\u3057\u3066\u3002\u3042\u3089\u3086\u308b\u30c6\u30fc\u30de\u3092\u8907\u6570\u306e\u89d2\u5ea6\u304b\u3089\u8abf\u67fb\u3067\u304d\u308b\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u30c1\u30fc\u30e0\u304c\u5fc5\u8981 \u2014 \u30a6\u30a7\u30d6\u691c\u7d22\u3001\u5b66\u8853\u8cc7\u6599\u3001\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u306e\u53cd\u5fdc \u2014 \u4ea4\u5dee\u691c\u8a3c\u3057\u3066\u7dcf\u5408\u30ec\u30dd\u30fc\u30c8\u3092\u4f5c\u6210\u3059\u308b\u30c1\u30fc\u30e0\u3002"
},
"usecases.website.title": {
"en": "Website Development",
"ko": "\uc6f9\uc0ac\uc774\ud2b8 \uc81c\uc791",
"ja": "\u30a6\u30a7\u30d6\u30b5\u30a4\u30c8\u958b\u767a"
},
"usecases.website.short": {
"en": "Full-stack build pipeline",
"ko": "\ud480\uc2a4\ud0dd \ube4c\ub4dc \ud30c\uc774\ud504\ub77c\uc778",
"ja": "\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u30d3\u30eb\u30c9\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3"
},
"usecases.website.prompt": {
"en": "Build a harness for full-stack website development. The team should handle design, frontend (React/Next.js), backend (API), and QA testing in a coordinated pipeline from wireframe to deployment.",
"ko": "\ud480\uc2a4\ud0dd \uc6f9\uc0ac\uc774\ud2b8 \uac1c\ubc1c \ud558\ub124\uc2a4\ub97c \uad6c\uc131\ud574\uc918. \ub514\uc790\uc778, \ud504\ub860\ud2b8\uc5d4\ub4dc(React/Next.js), \ubc31\uc5d4\ub4dc(API), QA \ud14c\uc2a4\ud2b8\ub97c \uc640\uc774\uc5b4\ud504\ub808\uc784\ubd80\ud130 \ubc30\ud3ec\uae4c\uc9c0 \ud30c\uc774\ud504\ub77c\uc778\uc73c\ub85c \uc870\uc728\ud558\ub294 \ud300.",
"ja": "\u30d5\u30eb\u30b9\u30bf\u30c3\u30afWeb\u30b5\u30a4\u30c8\u958b\u767a\u306e\u30cf\u30fc\u30cd\u30b9\u3092\u69cb\u6210\u3057\u3066\u3002\u30c7\u30b6\u30a4\u30f3\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\uff08React/Next.js\uff09\u3001\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\uff08API\uff09\u3001QA\u30c6\u30b9\u30c8\u3092\u30ef\u30a4\u30e4\u30fc\u30d5\u30ec\u30fc\u30e0\u304b\u3089\u30c7\u30d7\u30ed\u30a4\u307e\u3067\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u3067\u8abf\u6574\u3059\u308b\u30c1\u30fc\u30e0\u3002"
},
"usecases.webtoon.title": {
"en": "Webtoon Production",
"ko": "\uc6f9\ud230 \uc81c\uc791",
"ja": "\u30a6\u30a7\u30d6\u30c8\u30a5\u30fc\u30f3\u5236\u4f5c"
},
"usecases.webtoon.short": {
"en": "Creative team for episodic content",
"ko": "\uc5d0\ud53c\uc18c\ub4dc \ucf58\ud150\uce20 \ud06c\ub9ac\uc5d0\uc774\ud2f0\ube0c \ud300",
"ja": "\u30a8\u30d4\u30bd\u30fc\u30c9\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u30af\u30ea\u30a8\u30a4\u30c6\u30a3\u30d6\u30c1\u30fc\u30e0"
},
"usecases.webtoon.prompt": {
"en": "Build a harness for webtoon episode production. I need agents for story writing, character design prompts, panel layout planning, and dialogue editing. They should review each other\u2019s work for style consistency.",
"ko": "\uc6f9\ud230 \uc5d0\ud53c\uc18c\ub4dc \uc81c\uc791 \ud558\ub124\uc2a4\ub97c \uad6c\uc131\ud574\uc918. \uc2a4\ud1a0\ub9ac \uc791\uc131, \uce90\ub9ad\ud130 \ub514\uc790\uc778 \ud504\ub86c\ud504\ud2b8, \ud328\ub110 \ub808\uc774\uc544\uc6c3 \uae30\ud68d, \ub300\uc0ac \ud3b8\uc9d1 \uc5d0\uc774\uc804\ud2b8\uac00 \ud544\uc694\ud558\uace0 \uc11c\ub85c\uc758 \uc791\uc5c5\ubb3c\uc744 \uc2a4\ud0c0\uc77c \uc77c\uad00\uc131 \uad00\uc810\uc5d0\uc11c \ub9ac\ubdf0\ud574\uc57c \ud574.",
"ja": "\u30a6\u30a7\u30d6\u30c8\u30a5\u30fc\u30f3\u306e\u30a8\u30d4\u30bd\u30fc\u30c9\u5236\u4f5c\u7528\u30cf\u30fc\u30cd\u30b9\u3092\u69cb\u6210\u3057\u3066\u3002\u30b9\u30c8\u30fc\u30ea\u30fc\u57f7\u7b46\u3001\u30ad\u30e3\u30e9\u30af\u30bf\u30fc\u30c7\u30b6\u30a4\u30f3\u30d7\u30ed\u30f3\u30d7\u30c8\u3001\u30d1\u30cd\u30eb\u30ec\u30a4\u30a2\u30a6\u30c8\u4f01\u753b\u3001\u30bb\u30ea\u30d5\u7de8\u96c6\u306e\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u304c\u5fc5\u8981\u3067\u3001\u4e92\u3044\u306e\u6210\u679c\u7269\u3092\u30b9\u30bf\u30a4\u30eb\u306e\u4e00\u8cab\u6027\u3067\u30ec\u30d3\u30e5\u30fc\u3059\u308b\u3053\u3068\u3002"
},
"usecases.youtube.title": {
"en": "YouTube Content",
"ko": "\uc720\ud29c\ube0c \ucf58\ud150\uce20 \uae30\ud68d",
"ja": "YouTube\u30b3\u30f3\u30c6\u30f3\u30c4"
},
"usecases.youtube.short": {
"en": "End-to-end video planning",
"ko": "\uc5d4\ub4dc\ud22c\uc5d4\ub4dc \uc601\uc0c1 \uae30\ud68d",
"ja": "\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u306e\u52d5\u753b\u4f01\u753b"
},
"usecases.youtube.prompt": {
"en": "Build a harness for YouTube content creation. The team should research trending topics, write scripts, optimize titles/tags for SEO, and plan thumbnail concepts \u2014 all coordinated by a supervisor agent.",
"ko": "\uc720\ud29c\ube0c \ucf58\ud150\uce20 \uc81c\uc791 \ud558\ub124\uc2a4\ub97c \uad6c\uc131\ud574\uc918. \ud2b8\ub80c\ub4dc \uc870\uc0ac, \ub300\ubcf8 \uc791\uc131, \uc81c\ubaa9/\ud0dc\uadf8 SEO \ucd5c\uc801\ud654, \uc378\ub124\uc77c \ucee8\uc149 \uae30\ud68d\uc744 \uac10\ub3c5\uc790 \uc5d0\uc774\uc804\ud2b8\uac00 \uc870\uc728\ud558\ub294 \ud300.",
"ja": "YouTube\u30b3\u30f3\u30c6\u30f3\u30c4\u5236\u4f5c\u7528\u306e\u30cf\u30fc\u30cd\u30b9\u3092\u69cb\u6210\u3057\u3066\u3002\u30c8\u30ec\u30f3\u30c9\u8abf\u67fb\u3001\u53f0\u672c\u57f7\u7b46\u3001\u30bf\u30a4\u30c8\u30eb/\u30bf\u30b0\u306eSEO\u6700\u9069\u5316\u3001\u30b5\u30e0\u30cd\u30a4\u30eb\u30b3\u30f3\u30bb\u30d7\u30c8\u4f01\u753b\u3092\u30b9\u30fc\u30d1\u30fc\u30d0\u30a4\u30b6\u30fc\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u304c\u8abf\u6574\u3059\u308b\u30c1\u30fc\u30e0\u3002"
},
"usecases.codereview.title": {
"en": "Code Review",
"ko": "\ucf54\ub4dc \ub9ac\ubdf0",
"ja": "\u30b3\u30fc\u30c9\u30ec\u30d3\u30e5\u30fc"
},
"usecases.codereview.short": {
"en": "Parallel multi-dimension audit",
"ko": "\ubcd1\ub82c \ub2e4\ucc28\uc6d0 \uac10\uc0ac",
"ja": "\u4e26\u5217\u30de\u30eb\u30c1\u30c7\u30a3\u30e1\u30f3\u30b7\u30e7\u30f3\u76e3\u67fb"
},
"usecases.codereview.prompt": {
"en": "Build a harness for comprehensive code review. I want parallel agents checking architecture, security vulnerabilities, performance bottlenecks, and code style \u2014 then merging all findings into a single report.",
"ko": "\uc885\ud569 \ucf54\ub4dc \ub9ac\ubdf0 \ud558\ub124\uc2a4\ub97c \uad6c\uc131\ud574\uc918. \uc544\ud0a4\ud14d\ucc98, \ubcf4\uc548 \ucde8\uc57d\uc810, \uc131\ub2a5 \ubcd1\ubaa9, \ucf54\ub4dc \uc2a4\ud0c0\uc77c\uc744 \ubcd1\ub82c\ub85c \uac10\uc0ac\ud558\ub294 \uc5d0\uc774\uc804\ud2b8\ub4e4\uc774 \uacb0\uacfc\ub97c \ud558\ub098\uc758 \ub9ac\ud3ec\ud2b8\ub85c \ud1b5\ud569\ud558\ub294 \ud300.",
"ja": "\u5305\u62ec\u7684\u306a\u30b3\u30fc\u30c9\u30ec\u30d3\u30e5\u30fc\u7528\u30cf\u30fc\u30cd\u30b9\u3092\u69cb\u6210\u3057\u3066\u3002\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u3001\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u8106\u5f31\u6027\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30dc\u30c8\u30eb\u30cd\u30c3\u30af\u3001\u30b3\u30fc\u30c9\u30b9\u30bf\u30a4\u30eb\u3092\u4e26\u5217\u306b\u76e3\u67fb\u3059\u308b\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u304c\u7d50\u679c\u3092\u4e00\u3064\u306e\u30ec\u30dd\u30fc\u30c8\u306b\u7d71\u5408\u3059\u308b\u30c1\u30fc\u30e0\u3002"
},
"usecases.techdocs.title": {
"en": "Technical Docs",
"ko": "\uae30\uc220 \ubb38\uc11c \uc791\uc131",
"ja": "\u6280\u8853\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8"
},
"usecases.techdocs.short": {
"en": "Docs from codebase analysis",
"ko": "\ucf54\ub4dc\ubca0\uc774\uc2a4 \ubd84\uc11d \uae30\ubc18 \ubb38\uc11c\ud654",
"ja": "\u30b3\u30fc\u30c9\u30d9\u30fc\u30b9\u5206\u6790\u304b\u3089\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u751f\u6210"
},
"usecases.techdocs.prompt": {
"en": "Build a harness that generates API documentation from this codebase. Agents should analyze endpoints, write descriptions, generate usage examples, and review for completeness.",
"ko": "\uc774 \ucf54\ub4dc\ubca0\uc774\uc2a4\uc5d0\uc11c API \ubb38\uc11c\ub97c \uc790\ub3d9 \uc0dd\uc131\ud558\ub294 \ud558\ub124\uc2a4\ub97c \uad6c\uc131\ud574\uc918. \uc5d4\ub4dc\ud3ec\uc778\ud2b8 \ubd84\uc11d, \uc124\uba85 \uc791\uc131, \uc0ac\uc6a9 \uc608\uc81c \uc0dd\uc131, \uc644\uc131\ub3c4 \ub9ac\ubdf0\ub97c \ud30c\uc774\ud504\ub77c\uc778\uc73c\ub85c \ucc98\ub9ac\ud558\ub294 \ud300.",
"ja": "\u3053\u306e\u30b3\u30fc\u30c9\u30d9\u30fc\u30b9\u304b\u3089API\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u81ea\u52d5\u751f\u6210\u3059\u308b\u30cf\u30fc\u30cd\u30b9\u3092\u69cb\u6210\u3057\u3066\u3002\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u5206\u6790\u3001\u8aac\u660e\u306e\u4f5c\u6210\u3001\u4f7f\u7528\u4f8b\u306e\u751f\u6210\u3001\u5b8c\u5168\u6027\u306e\u30ec\u30d3\u30e5\u30fc\u3092\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u3067\u51e6\u7406\u3059\u308b\u30c1\u30fc\u30e0\u3002"
},
"usecases.datapipeline.title": {
"en": "Data Pipelines",
"ko": "\ub370\uc774\ud130 \ud30c\uc774\ud504\ub77c\uc778 \uc124\uacc4",
"ja": "\u30c7\u30fc\u30bf\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3"
},
"usecases.datapipeline.short": {
"en": "End-to-end data workflows",
"ko": "\uc5d4\ub4dc\ud22c\uc5d4\ub4dc \ub370\uc774\ud130 \uc6cc\ud06c\ud50c\ub85c\uc6b0",
"ja": "\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u306e\u30c7\u30fc\u30bf\u30ef\u30fc\u30af\u30d5\u30ed\u30fc"
},
"usecases.datapipeline.prompt": {
"en": "Build a harness for designing data pipelines. I need agents for schema design, ETL logic, data validation rules, and monitoring setup that delegate sub-tasks hierarchically.",
"ko": "\ub370\uc774\ud130 \ud30c\uc774\ud504\ub77c\uc778 \uc124\uacc4 \ud558\ub124\uc2a4\ub97c \uad6c\uc131\ud574\uc918. \uc2a4\ud0a4\ub9c8 \uc124\uacc4, ETL \ub85c\uc9c1, \ub370\uc774\ud130 \uac80\uc99d \uaddc\uce59, \ubaa8\ub2c8\ud130\ub9c1 \uc124\uc815\uc744 \uacc4\uce35\uc801\uc73c\ub85c \uc704\uc784\ud558\ub294 \uc5d0\uc774\uc804\ud2b8 \ud300.",
"ja": "\u30c7\u30fc\u30bf\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u8a2d\u8a08\u7528\u306e\u30cf\u30fc\u30cd\u30b9\u3092\u69cb\u6210\u3057\u3066\u3002\u30b9\u30ad\u30fc\u30de\u8a2d\u8a08\u3001ETL\u30ed\u30b8\u30c3\u30af\u3001\u30c7\u30fc\u30bf\u691c\u8a3c\u30eb\u30fc\u30eb\u3001\u30e2\u30cb\u30bf\u30ea\u30f3\u30b0\u8a2d\u5b9a\u3092\u968e\u5c64\u7684\u306b\u59d4\u4efb\u3059\u308b\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u30c1\u30fc\u30e0\u3002"
},
"usecases.marketing.title": {
"en": "Marketing Campaign",
"ko": "\ub9c8\ucf00\ud305 \uce60\ud398\uc778",
"ja": "\u30de\u30fc\u30b1\u30c6\u30a3\u30f3\u30b0\u30ad\u30e3\u30f3\u30da\u30fc\u30f3"
},
"usecases.marketing.short": {
"en": "Campaign asset creation & testing",
"ko": "\uce60\ud398\uc778 \uc5d0\uc14b \uc81c\uc791 \ubc0f \ud14c\uc2a4\ud2b8",
"ja": "\u30ad\u30e3\u30f3\u30da\u30fc\u30f3\u30a2\u30bb\u30c3\u30c8\u5236\u4f5c\u3068\u30c6\u30b9\u30c8"
},
"usecases.marketing.prompt": {
"en": "Build a harness for marketing campaign creation. The team should research the target market, write ad copy, design visual concepts, and set up A/B test plans with iterative quality review.",
"ko": "\ub9c8\ucf00\ud305 \uce60\ud398\uc778 \uc81c\uc791 \ud558\ub124\uc2a4\ub97c \uad6c\uc131\ud574\uc918. \ud0c0\uac9f \uc2dc\uc7a5 \uc870\uc0ac, \uad11\uace0 \uce74\ud53c \uc791\uc131, \ube44\uc8fc\uc5bc \ucee8\uc149 \ub514\uc790\uc778, A/B \ud14c\uc2a4\ud2b8 \uacc4\ud68d\uc744 \ubc18\ubcf5\uc801 \ud488\uc9c8 \ub9ac\ubdf0\uc640 \ud568\uaed8 \uc9c4\ud589\ud558\ub294 \ud300.",
"ja": "\u30de\u30fc\u30b1\u30c6\u30a3\u30f3\u30b0\u30ad\u30e3\u30f3\u30da\u30fc\u30f3\u5236\u4f5c\u7528\u306e\u30cf\u30fc\u30cd\u30b9\u3092\u69cb\u6210\u3057\u3066\u3002\u30bf\u30fc\u30b2\u30c3\u30c8\u5e02\u5834\u8abf\u67fb\u3001\u5e83\u544a\u30b3\u30d4\u30fc\u4f5c\u6210\u3001\u30d3\u30b8\u30e5\u30a2\u30eb\u30b3\u30f3\u30bb\u30d7\u30c8\u30c7\u30b6\u30a4\u30f3\u3001A/B\u30c6\u30b9\u30c8\u8a08\u753b\u3092\u53cd\u5fa9\u7684\u306a\u54c1\u8cea\u30ec\u30d3\u30e5\u30fc\u3068\u5171\u306b\u9032\u3081\u308b\u30c1\u30fc\u30e0\u3002"
},
"workflow.title": {
"en": "6-Phase Workflow",
"ko": "6\ub2e8\uacc4 \uc6cc\ud06c\ud50c\ub85c\uc6b0",
"ja": "6\u30d5\u30a7\u30fc\u30ba\u30ef\u30fc\u30af\u30d5\u30ed\u30fc"
},
"workflow.desc": {
"en": "Say &ldquo;build a harness&rdquo; and Harness runs a structured 6-phase pipeline to produce production-ready agent teams.",
"ko": "&ldquo;\ud558\ub124\uc2a4 \uad6c\uc131\ud574\uc918&rdquo;\ub77c\uace0 \ub9d0\ud558\uba74, Harness\uac00 6\ub2e8\uacc4 \ud30c\uc774\ud504\ub77c\uc778\uc744 \uc2e4\ud589\ud558\uc5ec \ud504\ub85c\ub355\uc158 \ub808\ub514 \uc5d0\uc774\uc804\ud2b8 \ud300\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.",
"ja": "\u300c\u30cf\u30fc\u30cd\u30b9\u3092\u69cb\u6210\u3057\u3066\u300d\u3068\u8a00\u3048\u3070\u3001Harness\u304c\u69cb\u9020\u5316\u3055\u308c\u305f6\u30d5\u30a7\u30fc\u30ba\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u3067\u30d7\u30ed\u30c0\u30af\u30b7\u30e7\u30f3\u30ec\u30c7\u30a3\u306a\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u30c1\u30fc\u30e0\u3092\u751f\u6210\u3057\u307e\u3059\u3002"
},
"workflow.phase1.title": {
"en": "Domain Analysis",
"ko": "\ub3c4\uba54\uc778 \ubd84\uc11d",
"ja": "\u30c9\u30e1\u30a4\u30f3\u5206\u6790"
},
"workflow.phase1.desc": {
"en": "Analyze your codebase, identify task types, detect user expertise, and prevent conflicts with existing agents.",
"ko": "\ucf54\ub4dc\ubca0\uc774\uc2a4\ub97c \ubd84\uc11d\ud558\uace0, \uc791\uc5c5 \uc720\ud615\uc744 \ud30c\uc545\ud558\uba70, \uc0ac\uc6a9\uc790 \uc804\ubb38\uc131\uc744 \uac10\uc9c0\ud558\uace0, \uae30\uc874 \uc5d0\uc774\uc804\ud2b8\uc640\uc758 \ucda9\ub3cc\uc744 \ubc29\uc9c0\ud569\ub2c8\ub2e4.",
"ja": "\u30b3\u30fc\u30c9\u30d9\u30fc\u30b9\u3092\u5206\u6790\u3057\u3001\u30bf\u30b9\u30af\u306e\u7a2e\u985e\u3092\u7279\u5b9a\u3057\u3001\u30e6\u30fc\u30b6\u30fc\u306e\u5c02\u9580\u6027\u3092\u691c\u51fa\u3057\u3001\u65e2\u5b58\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u3068\u306e\u7af6\u5408\u3092\u9632\u6b62\u3057\u307e\u3059\u3002"
},
"workflow.phase2.title": {
"en": "Team Architecture Design",
"ko": "\ud300 \uc544\ud0a4\ud14d\ucc98 \uc124\uacc4",
"ja": "\u30c1\u30fc\u30e0\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u8a2d\u8a08"
},
"workflow.phase2.desc": {
"en": "Choose between Agent Teams and Subagents, select from 6 architectural patterns, and define agent separation criteria.",
"ko": "\uc5d0\uc774\uc804\ud2b8 \ud300\uacfc \uc11c\ube0c\uc5d0\uc774\uc804\ud2b8 \uc911 \uc120\ud0dd\ud558\uace0, 6\uac00\uc9c0 \uc544\ud0a4\ud14d\ucc98 \ud328\ud134\uc5d0\uc11c \uace0\ub974\uba70, \uc5d0\uc774\uc804\ud2b8 \ubd84\ub9ac \uae30\uc900\uc744 \uc815\uc758\ud569\ub2c8\ub2e4.",
"ja": "\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u30c1\u30fc\u30e0\u3068\u30b5\u30d6\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u304b\u3089\u9078\u629e\u3057\u30016\u3064\u306e\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u30d1\u30bf\u30fc\u30f3\u304b\u3089\u9078\u3073\u3001\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u5206\u96e2\u57fa\u6e96\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002"
},
"workflow.phase3.title": {
"en": "Agent Definition Generation",
"ko": "\uc5d0\uc774\uc804\ud2b8 \uc815\uc758 \uc0dd\uc131",
"ja": "\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u5b9a\u7fa9\u751f\u6210"
},
"workflow.phase3.desc": {
"en": "Generate <code>.claude/agents/*.md</code> files with roles, principles, I/O protocols, and team communication contracts.",
"ko": "<code>.claude/agents/*.md</code> \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uba70, \uc5ed\ud560, \uc6d0\uce59, \uc785\ucd9c\ub825 \ud504\ub85c\ud1a0\ucf5c, \ud300 \ucee4\ubba4\ub2c8\ucf00\uc774\uc158 \uacc4\uc57d\uc744 \ud3ec\ud568\ud569\ub2c8\ub2e4.",
"ja": "<code>.claude/agents/*.md</code>\u30d5\u30a1\u30a4\u30eb\u3092\u751f\u6210\u3057\u3001\u5f79\u5272\u3001\u539f\u5247\u3001\u5165\u51fa\u529b\u30d7\u30ed\u30c8\u30b3\u30eb\u3001\u30c1\u30fc\u30e0\u30b3\u30df\u30e5\u30cb\u30b1\u30fc\u30b7\u30e7\u30f3\u898f\u7d04\u3092\u542b\u3081\u307e\u3059\u3002"
},
"workflow.phase4.title": {
"en": "Skill Generation",
"ko": "\uc2a4\ud0ac \uc0dd\uc131",
"ja": "\u30b9\u30ad\u30eb\u751f\u6210"
},
"workflow.phase4.desc": {
"en": "Create skills with YAML frontmatter, pushy trigger descriptions, and Progressive Disclosure (metadata &rarr; body &rarr; references).",
"ko": "YAML \ud504\ub860\ud2b8\ub9e4\ud130, \uc801\uadf9\uc801\uc778 \ud2b8\ub9ac\uac70 \uc124\uba85, Progressive Disclosure(\uba54\ud0c0\ub370\uc774\ud130 &rarr; \ubcf8\ubb38 &rarr; \ucc38\uc870) \uad6c\uc870\uc758 \uc2a4\ud0ac\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.",
"ja": "YAML\u30d5\u30ed\u30f3\u30c8\u30de\u30bf\u30fc\u3001\u7a4d\u6975\u7684\u306a\u30c8\u30ea\u30ac\u30fc\u8a18\u8ff0\u3001Progressive Disclosure\uff08\u30e1\u30bf\u30c7\u30fc\u30bf &rarr; \u672c\u6587 &rarr; \u53c2\u7167\uff09\u69cb\u9020\u306e\u30b9\u30ad\u30eb\u3092\u751f\u6210\u3057\u307e\u3059\u3002"
},
"workflow.phase5.title": {
"en": "Integration &amp; Orchestration",
"ko": "\ud1b5\ud569 \ubc0f \uc624\ucf00\uc2a4\ud2b8\ub808\uc774\uc158",
"ja": "\u7d71\u5408\u3068\u30aa\u30fc\u30b1\u30b9\u30c8\u30ec\u30fc\u30b7\u30e7\u30f3"
},
"workflow.phase5.desc": {
"en": "Wire agents together with orchestrator skills, data-passing protocols, error handling, and team size guidelines.",
"ko": "\uc624\ucf00\uc2a4\ud2b8\ub808\uc774\ud130 \uc2a4\ud0ac, \ub370\uc774\ud130 \uc804\ub2ec \ud504\ub85c\ud1a0\ucf5c, \uc5d0\ub7ec \ud578\ub4e4\ub9c1, \ud300 \uaddc\ubaa8 \uac00\uc774\ub4dc\ub77c\uc778\uc73c\ub85c \uc5d0\uc774\uc804\ud2b8\ub97c \uc5f0\uacb0\ud569\ub2c8\ub2e4.",
"ja": "\u30aa\u30fc\u30b1\u30b9\u30c8\u30ec\u30fc\u30bf\u30fc\u30b9\u30ad\u30eb\u3001\u30c7\u30fc\u30bf\u53d7\u3051\u6e21\u3057\u30d7\u30ed\u30c8\u30b3\u30eb\u3001\u30a8\u30e9\u30fc\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\u3001\u30c1\u30fc\u30e0\u30b5\u30a4\u30ba\u30ac\u30a4\u30c9\u30e9\u30a4\u30f3\u3067\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u3092\u63a5\u7d9a\u3057\u307e\u3059\u3002"
},
"workflow.phase6.title": {
"en": "Validation &amp; Testing",
"ko": "\uac80\uc99d \ubc0f \ud14c\uc2a4\ud2b8",
"ja": "\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u3068\u30c6\u30b9\u30c8"
},
"workflow.phase6.desc": {
"en": "Structure checks, trigger verification, dry-run tests, with/without-skill comparison, and iterative refinement.",
"ko": "\uad6c\uc870 \uac80\uc0ac, \ud2b8\ub9ac\uac70 \uac80\uc99d, \ub4dc\ub77c\uc774\ub7f0 \ud14c\uc2a4\ud2b8, With/Without-skill \ube44\uad50, \ubc18\ubcf5\uc801 \uac1c\uc120\uc744 \uc218\ud589\ud569\ub2c8\ub2e4.",
"ja": "\u69cb\u9020\u30c1\u30a7\u30c3\u30af\u3001\u30c8\u30ea\u30ac\u30fc\u691c\u8a3c\u3001\u30c9\u30e9\u30a4\u30e9\u30f3\u30c6\u30b9\u30c8\u3001With/Without-skill\u6bd4\u8f03\u3001\u53cd\u5fa9\u7684\u306a\u6539\u5584\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002"
},
"patterns.title": {
"en": "6 Architecture Patterns",
"ko": "6\uac00\uc9c0 \uc544\ud0a4\ud14d\ucc98 \ud328\ud134",
"ja": "6\u3064\u306e\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u30d1\u30bf\u30fc\u30f3"
},
"patterns.desc": {
"en": "Pick the right coordination strategy for your workload. Click a pattern to learn more.",
"ko": "\uc6cc\ud06c\ub85c\ub4dc\uc5d0 \ub9de\ub294 \uc870\uc728 \uc804\ub7b5\uc744 \uc120\ud0dd\ud558\uc138\uc694. \ud328\ud134\uc744 \ud074\ub9ad\ud558\uba74 \uc790\uc138\ud788 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.",
"ja": "\u30ef\u30fc\u30af\u30ed\u30fc\u30c9\u306b\u5408\u3063\u305f\u8abf\u6574\u6226\u7565\u3092\u9078\u3073\u307e\u3057\u3087\u3046\u3002\u30d1\u30bf\u30fc\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u8a73\u7d30\u3092\u78ba\u8a8d\u3002"
},
"patterns.pipeline.title": {
"en": "Pipeline",
"ko": "\ud30c\uc774\ud504\ub77c\uc778",
"ja": "\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3"
},
"patterns.pipeline.short": {
"en": "Sequential dependent tasks",
"ko": "\uc21c\ucc28 \uc758\uc874 \uc791\uc5c5",
"ja": "\u9010\u6b21\u4f9d\u5b58\u30bf\u30b9\u30af"
},
"patterns.pipeline.detail": {
"en": "Each agent's output feeds directly into the next. Ideal for workflows where steps are strictly ordered \u2014 code generation \u2192 review \u2192 testing \u2192 deployment. Simple to reason about, but the chain is only as fast as the slowest link.",
"ko": "\uac01 \uc5d0\uc774\uc804\ud2b8\uc758 \ucd9c\ub825\uc774 \ub2e4\uc74c \uc5d0\uc774\uc804\ud2b8\uc758 \uc785\ub825\uc73c\ub85c \uc9c1\uc811 \uc804\ub2ec\ub429\ub2c8\ub2e4. \ub2e8\uacc4\uac00 \uc5c4\uaca9\ud788 \uc21c\uc11c\ud654\ub41c \uc6cc\ud06c\ud50c\ub85c\uc6b0\uc5d0 \uc774\uc0c1\uc801 \u2014 \ucf54\ub4dc \uc0dd\uc131 \u2192 \ub9ac\ubdf0 \u2192 \ud14c\uc2a4\ud2b8 \u2192 \ubc30\ud3ec. \uc774\ud574\ud558\uae30 \uc27d\uc9c0\ub9cc, \uac00\uc7a5 \ub290\ub9b0 \ub2e8\uacc4\uac00 \uc804\uccb4 \uc18d\ub3c4\ub97c \uacb0\uc815\ud569\ub2c8\ub2e4.",
"ja": "\u5404\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u306e\u51fa\u529b\u304c\u6b21\u306e\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u306b\u76f4\u63a5\u6e21\u3055\u308c\u307e\u3059\u3002\u30b9\u30c6\u30c3\u30d7\u304c\u53b3\u5bc6\u306b\u9806\u5e8f\u5316\u3055\u308c\u305f\u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u306b\u6700\u9069 \u2014 \u30b3\u30fc\u30c9\u751f\u6210\u2192\u30ec\u30d3\u30e5\u30fc\u2192\u30c6\u30b9\u30c8\u2192\u30c7\u30d7\u30ed\u30a4\u3002\u7406\u89e3\u3057\u3084\u3059\u3044\u3067\u3059\u304c\u3001\u6700\u3082\u9045\u3044\u30ea\u30f3\u30af\u304c\u5168\u4f53\u306e\u901f\u5ea6\u3092\u6c7a\u3081\u307e\u3059\u3002"
},
"patterns.fanout.title": {
"en": "Fan-out / Fan-in",
"ko": "Fan-out / Fan-in",
"ja": "Fan-out / Fan-in"
},
"patterns.fanout.short": {
"en": "Parallel independent tasks",
"ko": "\ubcd1\ub82c \ub3c5\ub9bd \uc791\uc5c5",
"ja": "\u4e26\u5217\u72ec\u7acb\u30bf\u30b9\u30af"
},
"patterns.fanout.detail": {
"en": "Dispatch independent subtasks to multiple agents in parallel, then merge their results. Perfect for research, multi-file analysis, or any workload where throughput matters more than order.",
"ko": "\ub3c5\ub9bd\uc801\uc778 \ud558\uc704 \uc791\uc5c5\uc744 \uc5ec\ub7ec \uc5d0\uc774\uc804\ud2b8\uc5d0 \ubcd1\ub82c \ubd84\ubc30\ud55c \ub4a4 \uacb0\uacfc\ub97c \ubcd1\ud569\ud569\ub2c8\ub2e4. \ub9ac\uc11c\uce58, \uba40\ud2f0\ud30c\uc77c \ubd84\uc11d, \uc21c\uc11c\ubcf4\ub2e4 \ucc98\ub9ac\ub7c9\uc774 \uc911\uc694\ud55c \ubaa8\ub4e0 \uc6cc\ud06c\ub85c\ub4dc\uc5d0 \uc801\ud569\ud569\ub2c8\ub2e4.",
"ja": "\u72ec\u7acb\u3057\u305f\u30b5\u30d6\u30bf\u30b9\u30af\u3092\u8907\u6570\u306e\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u306b\u4e26\u5217\u3067\u5206\u914d\u3057\u3001\u7d50\u679c\u3092\u30de\u30fc\u30b8\u3057\u307e\u3059\u3002\u30ea\u30b5\u30fc\u30c1\u3001\u30de\u30eb\u30c1\u30d5\u30a1\u30a4\u30eb\u5206\u6790\u3001\u9806\u5e8f\u3088\u308a\u51e6\u7406\u91cf\u304c\u91cd\u8981\u306a\u30ef\u30fc\u30af\u30ed\u30fc\u30c9\u306b\u6700\u9069\u3067\u3059\u3002"
},
"patterns.expert.title": {
"en": "Expert Pool",
"ko": "\uc804\ubb38\uac00 \ud480",
"ja": "\u30a8\u30ad\u30b9\u30d1\u30fc\u30c8\u30d7\u30fc\u30eb"
},
"patterns.expert.short": {
"en": "Context-dependent selection",
"ko": "\uc0c1\ud669\ubcc4 \uc120\ud0dd \ud638\ucd9c",
"ja": "\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u4f9d\u5b58\u306e\u9078\u629e"
},
"patterns.expert.detail": {
"en": "A router agent selects the best specialist for each incoming request. The pool grows as new domains emerge. Great for help desks, multi-language codebases, or domain-specific Q&A.",
"ko": "\ub77c\uc6b0\ud130 \uc5d0\uc774\uc804\ud2b8\uac00 \uac01 \uc694\uccad\uc5d0 \ucd5c\uc801\uc758 \uc804\ubb38\uac00\ub97c \uc120\ud0dd\ud569\ub2c8\ub2e4. \uc0c8\ub85c\uc6b4 \ub3c4\uba54\uc778\uc774 \ub4f1\uc7a5\ud558\uba74 \ud480\uc774 \ud655\uc7a5\ub429\ub2c8\ub2e4. \ud5ec\ud504 \ub370\uc2a4\ud06c, \ub2e4\uad6d\uc5b4 \ucf54\ub4dc\ubca0\uc774\uc2a4, \ub3c4\uba54\uc778\ubcc4 Q&A\uc5d0 \uc801\ud569\ud569\ub2c8\ub2e4.",
"ja": "\u30eb\u30fc\u30bf\u30fc\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u304c\u5404\u30ea\u30af\u30a8\u30b9\u30c8\u306b\u6700\u9069\u306a\u30b9\u30da\u30b7\u30e3\u30ea\u30b9\u30c8\u3092\u9078\u629e\u3057\u307e\u3059\u3002\u65b0\u3057\u3044\u30c9\u30e1\u30a4\u30f3\u306e\u51fa\u73fe\u306b\u5fdc\u3058\u3066\u30d7\u30fc\u30eb\u304c\u62e1\u5f35\u3055\u308c\u307e\u3059\u3002\u30d8\u30eb\u30d7\u30c7\u30b9\u30af\u3001\u591a\u8a00\u8a9e\u30b3\u30fc\u30c9\u30d9\u30fc\u30b9\u3001\u30c9\u30e1\u30a4\u30f3\u7279\u5316Q&A\u306b\u6700\u9069\u3067\u3059\u3002"
},
"patterns.review.title": {
"en": "Producer-Reviewer",
"ko": "\uc0dd\uc131-\uac80\uc99d",
"ja": "\u30d7\u30ed\u30c7\u30e5\u30fc\u30b5\u30fc\u30fb\u30ec\u30d3\u30e5\u30ef\u30fc"
},
"patterns.review.short": {
"en": "Generate then verify",
"ko": "\uc0dd\uc131 \ud6c4 \ud488\uc9c8 \uac80\uc218",
"ja": "\u751f\u6210\u3057\u3066\u304b\u3089\u691c\u8a3c"
},
"patterns.review.detail": {
"en": "One agent generates, another critiques. The feedback loop continues until quality gates pass. Essential for code generation, content writing, and any task where a second opinion catches blind spots.",
"ko": "\ud558\ub098\uc758 \uc5d0\uc774\uc804\ud2b8\uac00 \uc0dd\uc131\ud558\uace0, \ub2e4\ub978 \uc5d0\uc774\uc804\ud2b8\uac00 \uac80\uc99d\ud569\ub2c8\ub2e4. \ud488\uc9c8 \uae30\uc900\uc744 \ud1b5\uacfc\ud560 \ub54c\uae4c\uc9c0 \ud53c\ub4dc\ubc31 \ub8e8\ud504\uac00 \ubc18\ubcf5\ub429\ub2c8\ub2e4. \ucf54\ub4dc \uc0dd\uc131, \ucf58\ud150\uce20 \uc791\uc131, \uc81c2\uc758 \uc2dc\uac01\uc774 \uc0ac\uac01\uc9c0\ub300\ub97c \ubc1c\uacac\ud558\ub294 \ubaa8\ub4e0 \uc791\uc5c5\uc5d0 \ud544\uc218\uc801\uc785\ub2c8\ub2e4.",
"ja": "\u4e00\u65b9\u306e\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u304c\u751f\u6210\u3057\u3001\u3082\u3046\u4e00\u65b9\u304c\u6279\u8a55\u3057\u307e\u3059\u3002\u54c1\u8cea\u30b2\u30fc\u30c8\u3092\u901a\u904e\u3059\u308b\u307e\u3067\u30d5\u30a3\u30fc\u30c9\u30d0\u30c3\u30af\u30eb\u30fc\u30d7\u304c\u7d99\u7d9a\u3057\u307e\u3059\u3002\u30b3\u30fc\u30c9\u751f\u6210\u3001\u30b3\u30f3\u30c6\u30f3\u30c4\u57f7\u7b46\u3001\u30bb\u30ab\u30f3\u30c9\u30aa\u30d4\u30cb\u30aa\u30f3\u304c\u76f2\u70b9\u3092\u767a\u898b\u3059\u308b\u3042\u3089\u3086\u308b\u30bf\u30b9\u30af\u306b\u4e0d\u53ef\u6b20\u3067\u3059\u3002"
},
"patterns.supervisor.title": {
"en": "Supervisor",
"ko": "\uac10\ub3c5\uc790",
"ja": "\u30b9\u30fc\u30d1\u30fc\u30d0\u30a4\u30b6\u30fc"
},
"patterns.supervisor.short": {
"en": "Central dynamic dispatch",
"ko": "\uc911\uc559 \uc5d0\uc774\uc804\ud2b8\uac00 \ub3d9\uc801 \ubd84\ubc30",
"ja": "\u4e2d\u592e\u52d5\u7684\u30c7\u30a3\u30b9\u30d1\u30c3\u30c1"
},
"patterns.supervisor.detail": {
"en": "A central agent maintains global state and dynamically assigns work based on progress and priority. Ideal when the plan evolves \u2014 incident response, complex refactors, or exploratory research.",
"ko": "\uc911\uc559 \uc5d0\uc774\uc804\ud2b8\uac00 \uc804\uc5ed \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud558\uace0 \uc9c4\ud589 \uc0c1\ud669\uacfc \uc6b0\uc120\uc21c\uc704\uc5d0 \ub530\ub77c \ub3d9\uc801\uc73c\ub85c \uc791\uc5c5\uc744 \ubd84\ubc30\ud569\ub2c8\ub2e4. \uacc4\ud68d\uc774 \ubcc0\ud654\ud558\ub294 \uc0c1\ud669\uc5d0 \uc774\uc0c1\uc801 \u2014 \uc778\uc2dc\ub358\ud2b8 \ub300\uc751, \ubcf5\uc7a1\ud55c \ub9ac\ud329\ud130\ub9c1, \ud0d0\uc0c9\uc801 \ub9ac\uc11c\uce58.",
"ja": "\u4e2d\u592e\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u304c\u30b0\u30ed\u30fc\u30d0\u30eb\u72b6\u614b\u3092\u7ba1\u7406\u3057\u3001\u9032\u6357\u3068\u512a\u5148\u5ea6\u306b\u57fa\u3065\u3044\u3066\u52d5\u7684\u306b\u30bf\u30b9\u30af\u3092\u5272\u308a\u5f53\u3066\u307e\u3059\u3002\u8a08\u753b\u304c\u5909\u5316\u3059\u308b\u72b6\u6cc1\u306b\u6700\u9069 \u2014 \u30a4\u30f3\u30b7\u30c7\u30f3\u30c8\u5bfe\u5fdc\u3001\u8907\u96d1\u306a\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0\u3001\u63a2\u7d22\u7684\u30ea\u30b5\u30fc\u30c1\u3002"
},
"patterns.hierarchy.title": {
"en": "Hierarchical Delegation",
"ko": "\uacc4\uce35\uc801 \uc704\uc784",
"ja": "\u968e\u5c64\u7684\u59d4\u4efb"
},
"patterns.hierarchy.short": {
"en": "Top-down recursive split",
"ko": "\uc0c1\uc704\u2192\ud558\uc704 \uc7ac\uadc0\uc801 \uc704\uc784",
"ja": "\u30c8\u30c3\u30d7\u30c0\u30a6\u30f3\u518d\u5e30\u7684\u5206\u5272"
},
"patterns.hierarchy.detail": {
"en": "A top-level agent breaks a goal into subgoals and delegates recursively. Each level adds specificity. Best for large-scale projects where a single prompt is too vague but a flat team is too chaotic.",
"ko": "\ucd5c\uc0c1\uc704 \uc5d0\uc774\uc804\ud2b8\uac00 \ubaa9\ud45c\ub97c \ud558\uc704 \ubaa9\ud45c\ub85c \ubd84\ud574\ud558\uace0 \uc7ac\uadc0\uc801\uc73c\ub85c \uc704\uc784\ud569\ub2c8\ub2e4. \uac01 \ub808\ubca8\uc774 \uad6c\uccb4\uc131\uc744 \ub354\ud569\ub2c8\ub2e4. \ub2e8\uc77c \ud504\ub86c\ud504\ud2b8\ub85c\ub294 \ubaa8\ud638\ud558\uc9c0\ub9cc \ud3c9\uba74\uc801 \ud300\uc73c\ub85c\ub294 \ud63c\ub780\uc2a4\ub7ec\uc6b4 \ub300\uaddc\ubaa8 \ud504\ub85c\uc81d\ud2b8\uc5d0 \ucd5c\uc801\uc785\ub2c8\ub2e4.",
"ja": "\u30c8\u30c3\u30d7\u30ec\u30d9\u30eb\u306e\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u304c\u30b4\u30fc\u30eb\u3092\u30b5\u30d6\u30b4\u30fc\u30eb\u306b\u5206\u89e3\u3057\u3001\u518d\u5e30\u7684\u306b\u59d4\u4efb\u3057\u307e\u3059\u3002\u5404\u30ec\u30d9\u30eb\u304c\u5177\u4f53\u6027\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002\u5358\u4e00\u30d7\u30ed\u30f3\u30d7\u30c8\u3067\u306f\u66d6\u6627\u3060\u304c\u30d5\u30e9\u30c3\u30c8\u306a\u30c1\u30fc\u30e0\u3067\u306f\u6df7\u4e71\u3059\u308b\u5927\u898f\u6a21\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u6700\u9069\u3067\u3059\u3002"
},
"research.title": {
"en": "Proven by Research",
"ko": "\uc5f0\uad6c\ub85c \uc785\uc99d\ub428",
"ja": "\u7814\u7a76\u3067\u5b9f\u8a3c\u6e08\u307f"
},
"research.desc": {
"en": "A controlled A/B experiment across 15 software engineering tasks at 3 difficulty levels.",
"ko": "3\uac00\uc9c0 \ub09c\uc774\ub3c4, 15\uac1c \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uc5d4\uc9c0\ub2c8\uc5b4\ub9c1 \uacfc\uc81c\uc5d0 \ub300\ud55c \ud1b5\uc81c\ub41c A/B \uc2e4\ud5d8.",
"ja": "3\u3064\u306e\u96e3\u6613\u5ea6\u300115\u306e\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u30a8\u30f3\u30b8\u30cb\u30a2\u30ea\u30f3\u30b0\u30bf\u30b9\u30af\u306b\u308f\u305f\u308b\u7d71\u5236\u3055\u308c\u305fA/B\u5b9f\u9a13\u3002"
},
"research.big_label": {
"en": "Average quality improvement",
"ko": "\ud3c9\uade0 \ud488\uc9c8 \uac1c\uc120",
"ja": "\u5e73\u5747\u54c1\u8cea\u5411\u4e0a"
},
"research.finding1": {
"en": "<strong>100% win rate</strong> across all 15 test cases",
"ko": "15\uac1c \uc804\uccb4 \ud14c\uc2a4\ud2b8 \ucf00\uc774\uc2a4\uc5d0\uc11c <strong>100% \uc2b9\ub960</strong>",
"ja": "\u516815\u30c6\u30b9\u30c8\u30b1\u30fc\u30b9\u3067<strong>100%\u52dd\u7387</strong>"
},
"research.finding2": {
"en": "<strong>32% less variance</strong> &mdash; more consistent, predictable output",
"ko": "<strong>32% \ub0ae\uc740 \ubd84\uc0b0</strong> &mdash; \ub354 \uc77c\uad00\ub418\uace0 \uc608\uce21 \uac00\ub2a5\ud55c \ucd9c\ub825",
"ja": "<strong>32%\u4f4e\u3044\u5206\u6563</strong> &mdash; \u3088\u308a\u4e00\u8cab\u6027\u304c\u3042\u308a\u4e88\u6e2c\u53ef\u80fd\u306a\u51fa\u529b"
},
"research.finding3": {
"en": "<strong>Scales with complexity</strong> &mdash; the harder the task, the bigger the gain",
"ko": "<strong>\ubcf5\uc7a1\ub3c4\uc5d0 \ube44\ub840\ud558\uc5ec \ud6a8\uacfc \uc99d\ub300</strong> &mdash; \uacfc\uc81c\uac00 \uc5b4\ub824\uc6b8\uc218\ub85d \uac1c\uc120 \ud3ed\uc774 \ucee4\uc9d0",
"ja": "<strong>\u8907\u96d1\u3055\u306b\u6bd4\u4f8b\u3057\u3066\u52b9\u679c\u304c\u5897\u5927</strong> &mdash; \u30bf\u30b9\u30af\u304c\u96e3\u3057\u3044\u307b\u3069\u6539\u5584\u5e45\u304c\u5927\u304d\u3044"
},
"research.btn": {
"en": "Read the Paper &rarr;",
"ko": "\ub17c\ubb38 \uc77d\uae30 &rarr;",
"ja": "\u8ad6\u6587\u3092\u8aad\u3080 &rarr;"
},
"research.bar_without": {
"en": "Without Harness",
"ko": "Harness \ubbf8\uc801\uc6a9",
"ja": "Harness\u306a\u3057"
},
"research.bar_with": {
"en": "With Harness",
"ko": "Harness \uc801\uc6a9",
"ja": "Harness\u3042\u308a"
},
"harness100.title": {
"en": "100 Ready-Made Harnesses",
"ko": "100\uac1c\uc758 \ud504\ub85c\ub355\uc158 \ub808\ub514 \ud558\ub124\uc2a4",
"ja": "100\u306e\u3059\u3050\u4f7f\u3048\u308b\u30cf\u30fc\u30cd\u30b9"
},
"harness100.desc": {
"en": "Production-ready agent teams across 10 domains. 200 packages (EN + KO). 1,808 files. All generated by this plugin.",
"ko": "10\uac1c \ub3c4\uba54\uc778\uc758 \ud504\ub85c\ub355\uc158 \ub808\ub514 \uc5d0\uc774\uc804\ud2b8 \ud300. 200\uac1c \ud328\ud0a4\uc9c0 (EN + KO). 1,808\uac1c \ud30c\uc77c. \ubaa8\ub450 \uc774 \ud50c\ub7ec\uadf8\uc778\uc73c\ub85c \uc0dd\uc131.",
"ja": "10\u30c9\u30e1\u30a4\u30f3\u306b\u308f\u305f\u308b\u30d7\u30ed\u30c0\u30af\u30b7\u30e7\u30f3\u30ec\u30c7\u30a3\u306a\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u30c1\u30fc\u30e0\u3002200\u30d1\u30c3\u30b1\u30fc\u30b8\uff08EN + KO\uff09\u30021,808\u30d5\u30a1\u30a4\u30eb\u3002\u3059\u3079\u3066\u3053\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u3067\u751f\u6210\u3002"
},
"harness100.domain_content": {
"en": "Content Creation",
"ko": "\ucf58\ud150\uce20 \uc81c\uc791",
"ja": "\u30b3\u30f3\u30c6\u30f3\u30c4\u5236\u4f5c"
},
"harness100.domain_software": {
"en": "Software Dev",
"ko": "\uc18c\ud504\ud2b8\uc6e8\uc5b4 \uac1c\ubc1c",
"ja": "\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u958b\u767a"
},
"harness100.domain_data": {
"en": "Data & AI/ML",
"ko": "\ub370\uc774\ud130 & AI/ML",
"ja": "\u30c7\u30fc\u30bf & AI/ML"
},
"harness100.domain_business": {
"en": "Business Strategy",
"ko": "\ube44\uc988\ub2c8\uc2a4 \uc804\ub7b5",
"ja": "\u30d3\u30b8\u30cd\u30b9\u6226\u7565"
},
"harness100.domain_education": {
"en": "Education",
"ko": "\uad50\uc721",
"ja": "\u6559\u80b2"
},
"harness100.domain_legal": {
"en": "Legal & Compliance",
"ko": "\ubc95\ub960 & \ucef4\ud50c\ub77c\uc774\uc5b8\uc2a4",
"ja": "\u6cd5\u52d9 & \u30b3\u30f3\u30d7\u30e9\u30a4\u30a2\u30f3\u30b9"
},
"harness100.domain_health": {
"en": "Health & Lifestyle",
"ko": "\ud5ec\uc2a4 & \ub77c\uc774\ud504\uc2a4\ud0c0\uc77c",
"ja": "\u30d8\u30eb\u30b9 & \u30e9\u30a4\u30d5\u30b9\u30bf\u30a4\u30eb"
},
"harness100.domain_communication": {
"en": "Communication",
"ko": "\ucee4\ubba4\ub2c8\ucf00\uc774\uc158",
"ja": "\u30b3\u30df\u30e5\u30cb\u30b1\u30fc\u30b7\u30e7\u30f3"
},
"harness100.domain_operations": {
"en": "Operations",
"ko": "\uc6b4\uc601",
"ja": "\u30aa\u30da\u30ec\u30fc\u30b7\u30e7\u30f3"
},
"harness100.domain_specialized": {
"en": "Specialized Domains",
"ko": "\uc804\ubb38 \ub3c4\uba54\uc778",
"ja": "\u7279\u5316\u30c9\u30e1\u30a4\u30f3"
},
"harness100.btn": {
"en": "Explore Harness 100 &rarr;",
"ko": "Harness 100 \ub458\ub7ec\ubcf4\uae30 &rarr;",
"ja": "Harness 100\u3092\u898b\u308b &rarr;"
},
"install.title": {
"en": "Get Started in Seconds",
"ko": "\uba87 \ucd08\uba74 \uc2dc\uc791\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4",
"ja": "\u6570\u79d2\u3067\u59cb\u3081\u3089\u308c\u307e\u3059"
},
"install.desc": {
"en": "Two commands. That\u2019s it.",
"ko": "\uba85\ub839\uc5b4 \ub450 \uc904\uc774\uba74 \ub05d.",
"ja": "\u30b3\u30de\u30f3\u30c92\u3064\u3060\u3051\u3002\u305d\u308c\u3060\u3051\u3067\u3059\u3002"
},
"install.step1": {
"en": "Add the marketplace",
"ko": "\ub9c8\ucf13\ud50c\ub808\uc774\uc2a4 \ucd94\uac00",
"ja": "\u30de\u30fc\u30b1\u30c3\u30c8\u30d7\u30ec\u30a4\u30b9\u3092\u8ffd\u52a0"
},
"install.step2": {
"en": "Install the plugin",
"ko": "\ud50c\ub7ec\uadf8\uc778 \uc124\uce58",
"ja": "\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb"
},
"install.hint": {
"en": "Then just say: <strong style=\"color:var(--accent2)\">&ldquo;Build a harness for this project&rdquo;</strong>",
"ko": "\uadf8\ub9ac\uace0 \uc774\ub807\uac8c \ub9d0\ud558\uc138\uc694: <strong style=\"color:var(--accent2)\">&ldquo;\uc774 \ud504\ub85c\uc81d\ud2b8\uc5d0 \ud558\ub124\uc2a4 \uad6c\uc131\ud574\uc918&rdquo;</strong>",
"ja": "\u3042\u3068\u306f\u4e00\u8a00: <strong style=\"color:var(--accent2)\">\u300c\u3053\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30cf\u30fc\u30cd\u30b9\u3092\u69cb\u6210\u3057\u3066\u300d</strong>"
},
"install.copy_btn": {
"en": "Copy",
"ko": "\ubcf5\uc0ac",
"ja": "\u30b3\u30d4\u30fc"
},
"footer.github": {
"en": "GitHub",
"ko": "GitHub",
"ja": "GitHub"
},
"footer.harness100": {
"en": "Harness 100",
"ko": "Harness 100",
"ja": "Harness 100"
},
"footer.research": {
"en": "Research Paper",
"ko": "\uc5f0\uad6c \ub17c\ubb38",
"ja": "\u7814\u7a76\u8ad6\u6587"
},
"footer.privacy": {
"en": "Privacy Policy",
"ko": "\uac1c\uc778\uc815\ubcf4 \ubcf4\ud638\uc815\ucc45",
"ja": "\u30d7\u30e9\u30a4\u30d0\u30b7\u30fc\u30dd\u30ea\u30b7\u30fc"
},
"footer.copyright": {
"en": "Apache 2.0 &mdash; Built by <a href=\"https://github.com/revfactory\" target=\"_blank\">revfactory</a>",
"ko": "Apache 2.0 &mdash; <a href=\"https://github.com/revfactory\" target=\"_blank\">revfactory</a> \uc81c\uc791",
"ja": "Apache 2.0 &mdash; <a href=\"https://github.com/revfactory\" target=\"_blank\">revfactory</a> \u5236\u4f5c"
},
"common.click_to_copy": {
"en": "Click to copy",
"ko": "\ud074\ub9ad\ud558\uc5ec \ubcf5\uc0ac",
"ja": "\u30af\u30ea\u30c3\u30af\u3067\u30b3\u30d4\u30fc"
},
"common.copied": {
"en": "Copied!",
"ko": "\ubcf5\uc0ac\ub428!",
"ja": "\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\uff01"
},
"common.copy": {
"en": "Copy",
"ko": "\ubcf5\uc0ac",
"ja": "\u30b3\u30d4\u30fc"
}
};
// Language-specific patternData
const patternDataI18n = {
en: {
pipeline: { title: 'Pipeline', desc: 'Each agent\'s output feeds directly into the next. Ideal for workflows where steps are strictly ordered \u2014 code generation \u2192 review \u2192 testing \u2192 deployment. Simple to reason about, but the chain is only as fast as the slowest link.' },
fanout: { title: 'Fan-out / Fan-in', desc: 'Dispatch independent subtasks to multiple agents in parallel, then merge their results. Perfect for research, multi-file analysis, or any workload where throughput matters more than order.' },
expert: { title: 'Expert Pool', desc: 'A router agent selects the best specialist for each incoming request. The pool grows as new domains emerge. Great for help desks, multi-language codebases, or domain-specific Q&A.' },
review: { title: 'Producer-Reviewer', desc: 'One agent generates, another critiques. The feedback loop continues until quality gates pass. Essential for code generation, content writing, and any task where a second opinion catches blind spots.' },
supervisor: { title: 'Supervisor', desc: 'A central agent maintains global state and dynamically assigns work based on progress and priority. Ideal when the plan evolves \u2014 incident response, complex refactors, or exploratory research.' },
hierarchy: { title: 'Hierarchical Delegation', desc: 'A top-level agent breaks a goal into subgoals and delegates recursively. Each level adds specificity. Best for large-scale projects where a single prompt is too vague but a flat team is too chaotic.' }
},
ko: {
pipeline: { title: '\ud30c\uc774\ud504\ub77c\uc778', desc: '\uac01 \uc5d0\uc774\uc804\ud2b8\uc758 \ucd9c\ub825\uc774 \ub2e4\uc74c \uc5d0\uc774\uc804\ud2b8\uc758 \uc785\ub825\uc73c\ub85c \uc9c1\uc811 \uc804\ub2ec\ub429\ub2c8\ub2e4. \ub2e8\uacc4\uac00 \uc5c4\uaca9\ud788 \uc21c\uc11c\ud654\ub41c \uc6cc\ud06c\ud50c\ub85c\uc6b0\uc5d0 \uc774\uc0c1\uc801 \u2014 \ucf54\ub4dc \uc0dd\uc131 \u2192 \ub9ac\ubdf0 \u2192 \ud14c\uc2a4\ud2b8 \u2192 \ubc30\ud3ec. \uc774\ud574\ud558\uae30 \uc27d\uc9c0\ub9cc, \uac00\uc7a5 \ub290\ub9b0 \ub2e8\uacc4\uac00 \uc804\uccb4 \uc18d\ub3c4\ub97c \uacb0\uc815\ud569\ub2c8\ub2e4.' },
fanout: { title: 'Fan-out / Fan-in', desc: '\ub3c5\ub9bd\uc801\uc778 \ud558\uc704 \uc791\uc5c5\uc744 \uc5ec\ub7ec \uc5d0\uc774\uc804\ud2b8\uc5d0 \ubcd1\ub82c \ubd84\ubc30\ud55c \ub4a4 \uacb0\uacfc\ub97c \ubcd1\ud569\ud569\ub2c8\ub2e4. \ub9ac\uc11c\uce58, \uba40\ud2f0\ud30c\uc77c \ubd84\uc11d, \uc21c\uc11c\ubcf4\ub2e4 \ucc98\ub9ac\ub7c9\uc774 \uc911\uc694\ud55c \ubaa8\ub4e0 \uc6cc\ud06c\ub85c\ub4dc\uc5d0 \uc801\ud569\ud569\ub2c8\ub2e4.' },
expert: { title: '\uc804\ubb38\uac00 \ud480', desc: '\ub77c\uc6b0\ud130 \uc5d0\uc774\uc804\ud2b8\uac00 \uac01 \uc694\uccad\uc5d0 \ucd5c\uc801\uc758 \uc804\ubb38\uac00\ub97c \uc120\ud0dd\ud569\ub2c8\ub2e4. \uc0c8\ub85c\uc6b4 \ub3c4\uba54\uc778\uc774 \ub4f1\uc7a5\ud558\uba74 \ud480\uc774 \ud655\uc7a5\ub429\ub2c8\ub2e4. \ud5ec\ud504 \ub370\uc2a4\ud06c, \ub2e4\uad6d\uc5b4 \ucf54\ub4dc\ubca0\uc774\uc2a4, \ub3c4\uba54\uc778\ubcc4 Q&A\uc5d0 \uc801\ud569\ud569\ub2c8\ub2e4.' },
review: { title: '\uc0dd\uc131-\uac80\uc99d', desc: '\ud558\ub098\uc758 \uc5d0\uc774\uc804\ud2b8\uac00 \uc0dd\uc131\ud558\uace0, \ub2e4\ub978 \uc5d0\uc774\uc804\ud2b8\uac00 \uac80\uc99d\ud569\ub2c8\ub2e4. \ud488\uc9c8 \uae30\uc900\uc744 \ud1b5\uacfc\ud560 \ub54c\uae4c\uc9c0 \ud53c\ub4dc\ubc31 \ub8e8\ud504\uac00 \ubc18\ubcf5\ub429\ub2c8\ub2e4. \ucf54\ub4dc \uc0dd\uc131, \ucf58\ud150\uce20 \uc791\uc131, \uc81c2\uc758 \uc2dc\uac01\uc774 \uc0ac\uac01\uc9c0\ub300\ub97c \ubc1c\uacac\ud558\ub294 \ubaa8\ub4e0 \uc791\uc5c5\uc5d0 \ud544\uc218\uc801\uc785\ub2c8\ub2e4.' },
supervisor: { title: '\uac10\ub3c5\uc790', desc: '\uc911\uc559 \uc5d0\uc774\uc804\ud2b8\uac00 \uc804\uc5ed \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud558\uace0 \uc9c4\ud589 \uc0c1\ud669\uacfc \uc6b0\uc120\uc21c\uc704\uc5d0 \ub530\ub77c \ub3d9\uc801\uc73c\ub85c \uc791\uc5c5\uc744 \ubd84\ubc30\ud569\ub2c8\ub2e4. \uacc4\ud68d\uc774 \ubcc0\ud654\ud558\ub294 \uc0c1\ud669\uc5d0 \uc774\uc0c1\uc801 \u2014 \uc778\uc2dc\ub358\ud2b8 \ub300\uc751, \ubcf5\uc7a1\ud55c \ub9ac\ud329\ud130\ub9c1, \ud0d0\uc0c9\uc801 \ub9ac\uc11c\uce58.' },
hierarchy: { title: '\uacc4\uce35\uc801 \uc704\uc784', desc: '\ucd5c\uc0c1\uc704 \uc5d0\uc774\uc804\ud2b8\uac00 \ubaa9\ud45c\ub97c \ud558\uc704 \ubaa9\ud45c\ub85c \ubd84\ud574\ud558\uace0 \uc7ac\uadc0\uc801\uc73c\ub85c \uc704\uc784\ud569\ub2c8\ub2e4. \uac01 \ub808\ubca8\uc774 \uad6c\uccb4\uc131\uc744 \ub354\ud569\ub2c8\ub2e4. \ub2e8\uc77c \ud504\ub86c\ud504\ud2b8\ub85c\ub294 \ubaa8\ud638\ud558\uc9c0\ub9cc \ud3c9\uba74\uc801 \ud300\uc73c\ub85c\ub294 \ud63c\ub780\uc2a4\ub7ec\uc6b4 \ub300\uaddc\ubaa8 \ud504\ub85c\uc81d\ud2b8\uc5d0 \ucd5c\uc801\uc785\ub2c8\ub2e4.' }
},
ja: {
pipeline: { title: '\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3', desc: '\u5404\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u306e\u51fa\u529b\u304c\u6b21\u306e\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u306b\u76f4\u63a5\u6e21\u3055\u308c\u307e\u3059\u3002\u30b9\u30c6\u30c3\u30d7\u304c\u53b3\u5bc6\u306b\u9806\u5e8f\u5316\u3055\u308c\u305f\u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u306b\u6700\u9069 \u2014 \u30b3\u30fc\u30c9\u751f\u6210\u2192\u30ec\u30d3\u30e5\u30fc\u2192\u30c6\u30b9\u30c8\u2192\u30c7\u30d7\u30ed\u30a4\u3002\u7406\u89e3\u3057\u3084\u3059\u3044\u3067\u3059\u304c\u3001\u6700\u3082\u9045\u3044\u30ea\u30f3\u30af\u304c\u5168\u4f53\u306e\u901f\u5ea6\u3092\u6c7a\u3081\u307e\u3059\u3002' },
fanout: { title: 'Fan-out / Fan-in', desc: '\u72ec\u7acb\u3057\u305f\u30b5\u30d6\u30bf\u30b9\u30af\u3092\u8907\u6570\u306e\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u306b\u4e26\u5217\u3067\u5206\u914d\u3057\u3001\u7d50\u679c\u3092\u30de\u30fc\u30b8\u3057\u307e\u3059\u3002\u30ea\u30b5\u30fc\u30c1\u3001\u30de\u30eb\u30c1\u30d5\u30a1\u30a4\u30eb\u5206\u6790\u3001\u9806\u5e8f\u3088\u308a\u51e6\u7406\u91cf\u304c\u91cd\u8981\u306a\u30ef\u30fc\u30af\u30ed\u30fc\u30c9\u306b\u6700\u9069\u3067\u3059\u3002' },
expert: { title: '\u30a8\u30ad\u30b9\u30d1\u30fc\u30c8\u30d7\u30fc\u30eb', desc: '\u30eb\u30fc\u30bf\u30fc\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u304c\u5404\u30ea\u30af\u30a8\u30b9\u30c8\u306b\u6700\u9069\u306a\u30b9\u30da\u30b7\u30e3\u30ea\u30b9\u30c8\u3092\u9078\u629e\u3057\u307e\u3059\u3002\u65b0\u3057\u3044\u30c9\u30e1\u30a4\u30f3\u306e\u51fa\u73fe\u306b\u5fdc\u3058\u3066\u30d7\u30fc\u30eb\u304c\u62e1\u5f35\u3055\u308c\u307e\u3059\u3002\u30d8\u30eb\u30d7\u30c7\u30b9\u30af\u3001\u591a\u8a00\u8a9e\u30b3\u30fc\u30c9\u30d9\u30fc\u30b9\u3001\u30c9\u30e1\u30a4\u30f3\u7279\u5316Q&A\u306b\u6700\u9069\u3067\u3059\u3002' },
review: { title: '\u30d7\u30ed\u30c7\u30e5\u30fc\u30b5\u30fc\u30fb\u30ec\u30d3\u30e5\u30ef\u30fc', desc: '\u4e00\u65b9\u306e\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u304c\u751f\u6210\u3057\u3001\u3082\u3046\u4e00\u65b9\u304c\u6279\u8a55\u3057\u307e\u3059\u3002\u54c1\u8cea\u30b2\u30fc\u30c8\u3092\u901a\u904e\u3059\u308b\u307e\u3067\u30d5\u30a3\u30fc\u30c9\u30d0\u30c3\u30af\u30eb\u30fc\u30d7\u304c\u7d99\u7d9a\u3057\u307e\u3059\u3002\u30b3\u30fc\u30c9\u751f\u6210\u3001\u30b3\u30f3\u30c6\u30f3\u30c4\u57f7\u7b46\u3001\u30bb\u30ab\u30f3\u30c9\u30aa\u30d4\u30cb\u30aa\u30f3\u304c\u76f2\u70b9\u3092\u767a\u898b\u3059\u308b\u3042\u3089\u3086\u308b\u30bf\u30b9\u30af\u306b\u4e0d\u53ef\u6b20\u3067\u3059\u3002' },
supervisor: { title: '\u30b9\u30fc\u30d1\u30fc\u30d0\u30a4\u30b6\u30fc', desc: '\u4e2d\u592e\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u304c\u30b0\u30ed\u30fc\u30d0\u30eb\u72b6\u614b\u3092\u7ba1\u7406\u3057\u3001\u9032\u6357\u3068\u512a\u5148\u5ea6\u306b\u57fa\u3065\u3044\u3066\u52d5\u7684\u306b\u30bf\u30b9\u30af\u3092\u5272\u308a\u5f53\u3066\u307e\u3059\u3002\u8a08\u753b\u304c\u5909\u5316\u3059\u308b\u72b6\u6cc1\u306b\u6700\u9069 \u2014 \u30a4\u30f3\u30b7\u30c7\u30f3\u30c8\u5bfe\u5fdc\u3001\u8907\u96d1\u306a\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0\u3001\u63a2\u7d22\u7684\u30ea\u30b5\u30fc\u30c1\u3002' },
hierarchy: { title: '\u968e\u5c64\u7684\u59d4\u4efb', desc: '\u30c8\u30c3\u30d7\u30ec\u30d9\u30eb\u306e\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u304c\u30b4\u30fc\u30eb\u3092\u30b5\u30d6\u30b4\u30fc\u30eb\u306b\u5206\u89e3\u3057\u3001\u518d\u5e30\u7684\u306b\u59d4\u4efb\u3057\u307e\u3059\u3002\u5404\u30ec\u30d9\u30eb\u304c\u5177\u4f53\u6027\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002\u5358\u4e00\u30d7\u30ed\u30f3\u30d7\u30c8\u3067\u306f\u66d6\u6627\u3060\u304c\u30d5\u30e9\u30c3\u30c8\u306a\u30c1\u30fc\u30e0\u3067\u306f\u6df7\u4e71\u3059\u308b\u5927\u898f\u6a21\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u6700\u9069\u3067\u3059\u3002' }
}
};
// Language priority: URL hash > localStorage > browser language
function detectLang() {
const hash = location.hash.replace('#', '').toLowerCase();
if (['en', 'ko', 'ja'].includes(hash)) return hash;
const stored = localStorage.getItem('harness-lang');
if (stored && ['en', 'ko', 'ja'].includes(stored)) return stored;
const nav = (navigator.language || '').toLowerCase();
if (nav.startsWith('ko')) return 'ko';
if (nav.startsWith('ja')) return 'ja';
return 'en';
}
let currentLang = detectLang();
function setLang(lang) {
currentLang = lang;
localStorage.setItem('harness-lang', lang);
history.replaceState(null, '', '#' + lang);
document.documentElement.lang = lang;
// Update all data-i18n elements
document.querySelectorAll('[data-i18n]').forEach(el => {
const key = el.dataset.i18n;
if (i18n[key] && i18n[key][lang]) {
if (el.dataset.i18nHtml === 'true') {
el.innerHTML = i18n[key][lang];
} else {
el.textContent = i18n[key][lang];
}
}
});
// Update prompt texts (uc-prompt elements)
document.querySelectorAll('[data-i18n-prompt]').forEach(el => {
const key = el.dataset.i18nPrompt;
if (i18n[key] && i18n[key][lang]) {
const hint = el.querySelector('.uc-copy-hint');
const hintText = (i18n['common.click_to_copy'] && i18n['common.click_to_copy'][lang]) || 'Click to copy';
el.innerHTML = i18n[key][lang] + '<span class="uc-copy-hint" data-i18n="common.click_to_copy">' + hintText + '</span>';
}
});
// Update patternData and refresh current pattern detail
const pd = patternDataI18n[lang] || patternDataI18n.en;
const selectedCard = document.querySelector('.pattern-card.selected');
if (selectedCard) {
const p = selectedCard.dataset.pattern;
if (pd[p]) {
document.getElementById('detail-title').textContent = pd[p].title;
document.getElementById('detail-desc').textContent = pd[p].desc;
}
}
// Update toggle button active states
document.querySelectorAll('.lang-btn').forEach(btn => {
btn.classList.toggle('active', btn.dataset.lang === lang);
});
}
// ── Animated particle background ──
const canvas = document.getElementById('bg-canvas');
const ctx = canvas.getContext('2d');
let w, h, particles = [], mouse = { x: -1000, y: -1000 };
function resize() {
w = canvas.width = window.innerWidth;
h = canvas.height = window.innerHeight;
}
resize();
window.addEventListener('resize', resize);
document.addEventListener('mousemove', e => { mouse.x = e.clientX; mouse.y = e.clientY; });
class Particle {
constructor() { this.reset(); }
reset() {
this.x = Math.random() * w;
this.y = Math.random() * h;
this.vx = (Math.random() - .5) * .3;
this.vy = (Math.random() - .5) * .3;
this.r = Math.random() * 1.5 + .5;
this.alpha = Math.random() * .3 + .1;
}
update() {
this.x += this.vx;
this.y += this.vy;
if (this.x < 0 || this.x > w) this.vx *= -1;
if (this.y < 0 || this.y > h) this.vy *= -1;
const dx = mouse.x - this.x, dy = mouse.y - this.y;
const dist = Math.sqrt(dx * dx + dy * dy);
if (dist < 150) {
this.x -= dx * .01;
this.y -= dy * .01;
}
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
ctx.fillStyle = `rgba(124,107,240,${this.alpha})`;
ctx.fill();
}
}
for (let i = 0; i < 80; i++) particles.push(new Particle());
function drawLines() {
for (let i = 0; i < particles.length; i++) {
for (let j = i + 1; j < particles.length; j++) {
const dx = particles[i].x - particles[j].x;
const dy = particles[i].y - particles[j].y;
const dist = Math.sqrt(dx * dx + dy * dy);
if (dist < 160) {
ctx.beginPath();
ctx.moveTo(particles[i].x, particles[i].y);
ctx.lineTo(particles[j].x, particles[j].y);
ctx.strokeStyle = `rgba(124,107,240,${.08 * (1 - dist / 160)})`;
ctx.lineWidth = .5;
ctx.stroke();
}
}
}
}
function animate() {
ctx.clearRect(0, 0, w, h);
particles.forEach(p => { p.update(); p.draw(); });
drawLines();
requestAnimationFrame(animate);
}
animate();
// ── Scroll reveal ──
const observer = new IntersectionObserver((entries) => {
entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
}, { threshold: .15 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
// ── Workflow scroll activation ──
const phaseObs = new IntersectionObserver((entries) => {
entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('active'); });
}, { threshold: .3 });
document.querySelectorAll('.phase').forEach(el => phaseObs.observe(el));
// ── Counter animation ──
let counted = false;
const statsObs = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && !counted) {
counted = true;
document.querySelectorAll('.stat-num').forEach(el => {
const target = +el.dataset.target;
const suffix = el.dataset.suffix;
const dur = 1500;
const start = performance.now();
function tick(now) {
const p = Math.min((now - start) / dur, 1);
const ease = 1 - Math.pow(1 - p, 3);
el.textContent = Math.round(target * ease).toLocaleString() + suffix;
if (p < 1) requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
});
}
}, { threshold: .5 });
statsObs.observe(document.querySelector('.stats'));
// ── Bar chart animation ──
let barsDone = false;
const barObs = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && !barsDone) {
barsDone = true;
document.querySelectorAll('.bar-fill').forEach(bar => {
setTimeout(() => { bar.style.width = bar.dataset.width + '%'; }, 200);
});
}
}, { threshold: .3 });
barObs.observe(document.getElementById('bar-chart'));
// ── Pattern selector ──
document.querySelectorAll('.pattern-card').forEach(card => {
card.addEventListener('click', () => {
document.querySelectorAll('.pattern-card').forEach(c => c.classList.remove('selected'));
card.classList.add('selected');
const pd = patternDataI18n[currentLang] || patternDataI18n.en;
const d = pd[card.dataset.pattern];
document.getElementById('detail-title').textContent = d.title;
document.getElementById('detail-desc').textContent = d.desc;
});
});
// ── Copy prompt from use case ──
// Clipboard with a fallback for insecure contexts (e.g. the page opened via
// file://), where navigator.clipboard is undefined and writeText() would throw,
// leaving the copy buttons silently dead.
function copyToClipboard(text) {
if (navigator.clipboard && window.isSecureContext) {
return navigator.clipboard.writeText(text);
}
return new Promise((resolve, reject) => {
try {
const ta = document.createElement('textarea');
ta.value = text;
ta.setAttribute('readonly', '');
ta.style.position = 'fixed';
ta.style.opacity = '0';
document.body.appendChild(ta);
ta.select();
const ok = document.execCommand('copy');
document.body.removeChild(ta);
ok ? resolve() : reject(new Error('copy command was rejected'));
} catch (err) {
reject(err);
}
});
}
function copyPrompt(el) {
const hint = el.querySelector('.uc-copy-hint');
const text = el.textContent.replace(hint.textContent, '').trim();
const copiedText = (i18n['common.copied'] && i18n['common.copied'][currentLang]) || 'Copied!';
const clickText = (i18n['common.click_to_copy'] && i18n['common.click_to_copy'][currentLang]) || 'Click to copy';
copyToClipboard(text).then(() => {
el.classList.add('copied');
hint.textContent = copiedText;
setTimeout(() => { el.classList.remove('copied'); hint.textContent = clickText; }, 2000);
});
}
// ── Use case card toggle ──
document.querySelectorAll('.usecase-card').forEach(card => {
card.addEventListener('click', () => {
const isActive = card.dataset.active === 'true';
document.querySelectorAll('.usecase-card').forEach(c => c.dataset.active = 'false');
if (!isActive) card.dataset.active = 'true';
});
});
// ── Copy to clipboard ──
function copyCode(block) {
const cmd = block.querySelector('.cmd').textContent;
const copiedText = (i18n['common.copied'] && i18n['common.copied'][currentLang]) || 'Copied!';
const copyText = (i18n['common.copy'] && i18n['common.copy'][currentLang]) || 'Copy';
copyToClipboard(cmd).then(() => {
const btn = block.querySelector('.copy-btn');
btn.textContent = copiedText;
btn.classList.add('copied');
setTimeout(() => { btn.textContent = copyText; btn.classList.remove('copied'); }, 2000);
});
}
// ── Initialize language on load ──
document.addEventListener('DOMContentLoaded', () => {
setLang(currentLang);
});
window.addEventListener('hashchange', () => {
const lang = location.hash.replace('#', '').toLowerCase();
if (['en', 'ko', 'ja'].includes(lang) && lang !== currentLang) setLang(lang);
});
</script>
</body>
</html>