index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>AI Orchestration for Product Teams · Session 1 · WebMD HS Vietnam</title>
<meta name="description" content="Workshop landing — slides, Coach install, take-home assets, deep-dive references. WebMD Health Services Vietnam · 04 May 2026." />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
<style>
  :root {
    --dark: #141413; --light: #faf9f5; --mid: #b0aea5; --light-gray: #e8e6dc;
    --orange: #d97757; --blue: #6a9bcc; --green: #788c5d; --red: #c07a6e; --yellow: #d4a84b;
    --font-head: "Be Vietnam Pro", system-ui, sans-serif;
    --font-body: "Lora", Georgia, serif;
    --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: var(--font-body); background: var(--light); color: var(--dark);
    line-height: 1.6; -webkit-font-smoothing: antialiased;
    min-height: 100vh; padding: 56px 5vw 80px;
  }
  .wrap { max-width: 1100px; margin: 0 auto; }

  /* ---------- header ---------- */
  header { margin-bottom: 64px; }
  .kicker {
    font-family: var(--font-mono); font-size: 11px; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 16px;
  }
  h1 {
    font-family: var(--font-head); font-weight: 700;
    font-size: clamp(2.2rem, 5.5vw, 3.6rem);
    line-height: 1.06; letter-spacing: -0.03em;
    margin: 0 0 18px; max-width: 880px;
  }
  h1 .mark { color: var(--orange); font-style: italic; font-family: var(--font-body); font-weight: 400; }
  .lede {
    font-family: var(--font-body); font-size: 1.18rem;
    max-width: 720px; opacity: 0.86; margin: 0 0 24px;
  }
  .meta {
    font-family: var(--font-mono); font-size: 11.5px;
    opacity: 0.55; letter-spacing: 0.04em;
  }

  /* ---------- section ---------- */
  section.block { margin-bottom: 56px; }
  .section-kicker {
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 8px;
  }
  h2 {
    font-family: var(--font-head); font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: -0.02em; line-height: 1.15;
    margin: 0 0 12px;
  }
  .sub {
    font-family: var(--font-body); font-size: 1rem;
    opacity: 0.78; max-width: 720px; margin: 0 0 22px;
  }

  /* ---------- hero card (slides) ---------- */
  .hero-card {
    background: linear-gradient(135deg, #1a1a18 0%, #2a2620 100%);
    color: var(--light);
    border-radius: 18px; padding: 38px 36px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 32px; flex-wrap: wrap;
    box-shadow: 0 12px 36px rgba(20,20,19,0.16);
  }
  .hero-card .left { flex: 1 1 360px; }
  .hero-card h2 { color: var(--light); margin-bottom: 10px; }
  .hero-card .sub { color: rgba(250,249,245,0.7); margin-bottom: 0; max-width: 520px; }
  .hero-card .cta {
    display: inline-flex; align-items: center; gap: 12px;
    background: var(--orange); color: var(--light);
    padding: 16px 28px; border-radius: 32px;
    font-family: var(--font-head); font-weight: 600; font-size: 15px;
    text-decoration: none; transition: transform 0.15s, background 0.15s;
    box-shadow: 0 6px 18px rgba(217,119,87,0.28);
  }
  .hero-card .cta:hover { transform: scale(1.04); background: #e98863; }
  .hero-card .cta svg { width: 16px; height: 16px; }

  /* ---------- 3-card row (install / take-home / refs) ---------- */
  .card-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
  }
  .card {
    background: #fff; border: 1px solid var(--light-gray);
    border-radius: 14px; padding: 24px 22px 20px;
    display: flex; flex-direction: column; gap: 8px;
    text-decoration: none; color: var(--dark);
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  }
  .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(20,20,19,0.08);
    border-color: var(--orange);
  }
  .card .badge {
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 4px;
  }
  .card .title {
    font-family: var(--font-head); font-weight: 700;
    font-size: 1.15rem; letter-spacing: -0.01em;
  }
  .card .desc {
    font-family: var(--font-body); font-size: 14.5px;
    line-height: 1.5; opacity: 0.78; flex: 1;
  }
  .card .meta-line {
    font-family: var(--font-mono); font-size: 10.5px;
    opacity: 0.5; margin-top: 6px; letter-spacing: 0.04em;
  }

  /* take-home cards get a colored accent strip */
  .card.skill { border-top: 4px solid var(--orange); }
  .card.project { border-top: 4px solid var(--blue); }
  .card.paste { border-top: 4px solid var(--mid); }
  .card.cheat { border-top: 4px solid var(--green); }

  /* ref cards — a touch lighter */
  .card.ref {
    background: #fdfcf8;
    border: 1px solid var(--light-gray);
  }
  .card.ref .badge { color: var(--mid); }

  /* ---------- footer ---------- */
  footer {
    margin-top: 72px; padding-top: 28px;
    border-top: 1px solid var(--light-gray);
    font-family: var(--font-mono); font-size: 11px;
    opacity: 0.55; letter-spacing: 0.04em;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  }
  footer a { color: var(--dark); text-decoration: underline; opacity: 0.8; }
</style>
</head>
<body>
<div class="wrap">

  <header>
    <div class="kicker">Workshop · WebMD Health Services Vietnam · 04 May 2026</div>
    <h1>AI Orchestration for <span class="mark">Product Teams.</span></h1>
    <p class="lede">Three hours, three acts: frame the foundation, practice on your real task, ship four assets you keep forever. This page is your home base — the slides, the Coach install, your take-homes, and the deep-dives.</p>
    <div class="meta">21 product professionals · 5 roles · 1 outcome</div>
  </header>

  <!-- ============ SLIDES (hero) ============ -->
  <section class="block">
    <div class="hero-card">
      <div class="left">
        <div class="kicker" style="color: rgba(217,119,87,0.85); margin-bottom: 12px;">The deck · 23 slides</div>
        <h2>Walk the slides at your own pace.</h2>
        <p class="sub">Same content we ran live, public version — no speaker notes, no stage cues. Click through with arrow keys. Interactive demos on slides 6, 8, and 17 still work.</p>
      </div>
      <a class="cta" href="slides.html">
        Open the slides
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-6-6 6 6-6 6"/></svg>
      </a>
    </div>
  </section>

  <!-- ============ INSTALL COACH ============ -->
  <section class="block">
    <div class="section-kicker">Step 1 · Open your assistant</div>
    <h2>Install Coach.</h2>
    <p class="sub">Three install paths depending on your Claude plan — Skill (Pro+), Project (any plan), or paste-block (fallback). Pick the one that fits.</p>
    <div class="card-row">
      <a class="card skill" href="install.html#skill">
        <div class="badge">Recommended · 60 sec</div>
        <div class="title">1 · Install as Skill</div>
        <div class="desc">Coach lives as a real Skill in your Claude. Toggle on/off any time. Cleanest install.</div>
        <div class="meta-line">Needs: Claude Pro / Max / Team / Enterprise</div>
      </a>
      <a class="card project" href="install.html#project">
        <div class="badge">Any plan · 3 min</div>
        <div class="title">2 · Install as Project</div>
        <div class="desc">Build a Claude Project from our files. Persistent, shareable inside your team.</div>
        <div class="meta-line">Needs: any Claude account (Free works)</div>
      </a>
      <a class="card paste" href="install.html#paste">
        <div class="badge">Fallback · 30 sec</div>
        <div class="title">3 · Paste-block</div>
        <div class="desc">Copy one big block, paste as your first message. Use if Skill or Project fails.</div>
        <div class="meta-line">Needs: any Claude account (incl. logged-out free)</div>
      </a>
    </div>
    <p class="sub" style="margin-top: 18px; font-size: 14px;"><a href="install.html" style="color: var(--orange);">→ Full install guide</a></p>
  </section>

  <!-- ============ TAKE-HOME ASSETS ============ -->
  <section class="block">
    <div class="section-kicker">Step 2 · Take-home assets</div>
    <h2>Four things in your pocket forever.</h2>
    <p class="sub">If you walked out of the workshop without these, the session failed. Download what you missed.</p>
    <div class="card-row">
      <a class="card cheat" href="CHEAT-SHEET.md">
        <div class="badge">1 · Cheat sheet</div>
        <div class="title">RCTCO · 5 tests · 5 patterns</div>
        <div class="desc">One page. Print it, pin it, paste it. Everything from Module 1 condensed.</div>
        <div class="meta-line">Markdown · 1 page</div>
      </a>
      <a class="card skill" href="prompt-coach-skill.zip">
        <div class="badge">2 · Coach Skill</div>
        <div class="title">prompt-coach-skill.zip</div>
        <div class="desc">The Skill bundle. Upload to Claude → Customize → Skills. Toggle on, you're coached.</div>
        <div class="meta-line">.zip · Pro+ accounts</div>
      </a>
      <a class="card project" href="prompt-coach-project-bundle.zip">
        <div class="badge">3 · Coach Project</div>
        <div class="title">prompt-coach-project-bundle.zip</div>
        <div class="desc">Files for a Claude Project. Includes system prompt + 5 knowledge references.</div>
        <div class="meta-line">.zip · any plan</div>
      </a>
      <a class="card paste" href="COACH-PASTE-BLOCK.md">
        <div class="badge">4 · Paste-block</div>
        <div class="title">COACH-PASTE-BLOCK.md</div>
        <div class="desc">Raw markdown. Copy-paste into any Claude chat as message #1. Coach activates.</div>
        <div class="meta-line">Markdown · works anywhere</div>
      </a>
    </div>
  </section>

  <!-- ============ DEEP-DIVE REFS ============ -->
  <section class="block">
    <div class="section-kicker">Step 3 · Go deeper</div>
    <h2>Deep-dive references.</h2>
    <p class="sub">Companion pages we touched on but didn't have time to walk slowly. Read on the train.</p>
    <div class="card-row">
      <a class="card ref" href="refs/patterns.html">
        <div class="badge">Module 1</div>
        <div class="title">The 5 patterns</div>
        <div class="desc">Drafter · Synthesizer · Reviewer · Critic · Translator. One page each, with a real prompt.</div>
      </a>
      <a class="card ref" href="refs/inject-team.html">
        <div class="badge">Module 2 · R3</div>
        <div class="title">Inject your team</div>
        <div class="desc">How the Context Card works — vocab + DoD + 1 example. Why it's the +5 score boost.</div>
      </a>
      <a class="card ref" href="refs/where-prompts-go.html">
        <div class="badge">Module 3</div>
        <div class="title">Where good prompts live</div>
        <div class="desc">Versioned · reviewable · discoverable · releasable. The four properties your code already has.</div>
      </a>
      <a class="card ref" href="refs/team-prompt-repo.html">
        <div class="badge">Module 3</div>
        <div class="title">The team prompt repo</div>
        <div class="desc">Folder structure, naming, semver, PR review tier. A pattern to bring back to your tech lead.</div>
      </a>
      <a class="card ref" href="refs/comic-recap.html">
        <div class="badge">Recap</div>
        <div class="title">9 frames · 60 seconds</div>
        <div class="desc">The whole 3 hours as a comic. Read Monday morning when memory's fading.</div>
      </a>
      <a class="card ref" href="refs/notebook.html">
        <div class="badge">The notebook</div>
        <div class="title">15 illustrations</div>
        <div class="desc">Hand-drawn frames from every concept we touched. Save what you like.</div>
      </a>
    </div>
  </section>

  <footer>
    <span>WebMD HS Vietnam · 04 May 2026 · 09:30–12:30</span>
    <span>tony · <a href="https://vibery.app">vibery.app</a></span>
  </footer>

</div>
</body>
</html>