welcome.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Second Brain — Setup Guide</title>
<style>
  :root {
    --bg: #fbfbfa;
    --surface: #ffffff;
    --ink: #1d1d1f;
    --ink-soft: #55555a;
    --ink-faint: #8a8a90;
    --line: #ececec;
    --accent: #1d1d1f;
    --accent-soft: #f2f2f0;
    --radius: 14px;
    --maxw: 720px;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0f0f10;
      --surface: #171719;
      --ink: #f3f3f4;
      --ink-soft: #b6b6bd;
      --ink-faint: #76767e;
      --line: #262629;
      --accent: #f3f3f4;
      --accent-soft: #1f1f22;
    }
  }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
  }
  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
  header.hero {
    padding: 88px 0 56px;
    border-bottom: 1px solid var(--line);
  }
  .eyebrow {
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0 0 18px;
    font-weight: 600;
  }
  h1 {
    font-size: 40px;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
    font-weight: 680;
  }
  .lede { font-size: 19px; color: var(--ink-soft); margin: 0; max-width: 38ch; }
  .time {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 28px; font-size: 14px; color: var(--ink-faint);
    background: var(--accent-soft); padding: 7px 13px; border-radius: 999px;
  }
  main { padding: 16px 0 96px; }
  section { padding: 44px 0; border-bottom: 1px solid var(--line); }
  section:last-child { border-bottom: none; }
  h2 {
    font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-faint); font-weight: 600; margin: 0 0 22px;
  }
  h3 { font-size: 21px; letter-spacing: -0.01em; margin: 0 0 10px; font-weight: 640; }
  p { color: var(--ink-soft); margin: 0 0 16px; }
  p strong, li strong { color: var(--ink); font-weight: 620; }
  a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--ink-faint); }
  code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 14px; background: var(--accent-soft);
    padding: 2px 6px; border-radius: 6px; color: var(--ink);
  }
  .steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
  .steps > li {
    counter-increment: step;
    position: relative;
    padding: 22px 0 22px 58px;
    border-top: 1px solid var(--line);
  }
  .steps > li:first-child { border-top: none; }
  .steps > li::before {
    content: counter(step);
    position: absolute; left: 0; top: 20px;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--accent); color: var(--bg);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 640;
  }
  .steps h3 { margin-bottom: 6px; }
  .steps p { margin-bottom: 0; }
  .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin: 0 0 16px;
  }
  .callout {
    background: var(--accent-soft);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin: 24px 0 0;
  }
  .callout p { margin: 0; color: var(--ink); }
  .tree {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 24px;
    overflow-x: auto;
  }
  .tree pre {
    margin: 0; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 13.5px; line-height: 1.85; color: var(--ink-soft);
  }
  .tree .name { color: var(--ink); font-weight: 600; }
  .folders { display: grid; gap: 2px; }
  .folder-row {
    display: grid; grid-template-columns: 130px 1fr; gap: 18px;
    padding: 14px 0; border-top: 1px solid var(--line); align-items: baseline;
  }
  .folder-row:first-child { border-top: none; }
  .folder-row .k { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; color: var(--ink); font-weight: 600; }
  .folder-row .v { color: var(--ink-soft); font-size: 15.5px; }
  .faq dt { font-weight: 620; color: var(--ink); margin: 22px 0 4px; }
  .faq dt:first-child { margin-top: 0; }
  .faq dd { margin: 0; color: var(--ink-soft); }
  footer { padding: 40px 0 80px; color: var(--ink-faint); font-size: 14px; }
  footer a { color: var(--ink-soft); }
  @media (max-width: 560px) {
    header.hero { padding: 60px 0 40px; }
    h1 { font-size: 32px; }
    .lede { font-size: 17px; }
    .folder-row { grid-template-columns: 1fr; gap: 2px; }
  }
</style>
</head>
<body>
<header class="hero">
  <div class="wrap">
    <p class="eyebrow">The Second Brain by 02ui.com · @zerotoui</p>
    <h1>A place outside your head where your context lives.</h1>
    <p class="lede">Set it up once. After that, every Claude session starts already knowing who you are, how you sound, and what you're working on.</p>
    <span class="time">⏱ About 5 minutes to set up</span>
  </div>
</header>

<main class="wrap">

  <section>
    <h2>What this is</h2>
    <h3>A folder that remembers you</h3>
    <p>A second brain is a place outside your head where your context lives — who you are, how you write, what you're working on, and the half-formed ideas you'd otherwise lose.</p>
    <p>With Claude Cowork, that place is a folder on your computer. You point Claude at it once, and from then on Claude can read everything inside, write new files, and keep the folder organised. You stop briefing it from scratch every time. It already knows you.</p>
    <div class="callout">
      <p><strong>This one ships blank.</strong> The first time you connect it, Claude notices the setup isn't done and offers to interview you — then fills in the two files that matter. No template content to delete. Nothing pretending to be you.</p>
    </div>
  </section>

  <section>
    <h2>Before you start</h2>
    <h3>What you need</h3>
    <p>Cowork lives only in the Claude Desktop app. Make sure you have:</p>
    <div class="card">
      <p style="margin:0 0 10px"><strong>A computer</strong> running macOS (Apple Silicon, M1 or later) or Windows.</p>
      <p style="margin:0 0 10px"><strong>The Claude Desktop app</strong>, from <a href="https://claude.com/download">claude.com/download</a>.</p>
      <p style="margin:0"><strong>A paid Claude plan</strong> — Pro, Max, Team, or Enterprise. Cowork isn't on the free tier, web, or mobile.</p>
    </div>
  </section>

  <section>
    <h2>Setup</h2>
    <ol class="steps">
      <li>
        <h3>Put the folder somewhere permanent</h3>
        <p>Move this folder out of Downloads and into a proper home, like your Documents folder. Cowork can only see files that are already inside the folder when you connect — so get everything in place first.</p>
      </li>
      <li>
        <h3>Connect Cowork to the folder</h3>
        <p>Open Claude Desktop, click the Cowork tab, start a session, and give it access to this one folder. Just this folder, not your whole computer — that keeps things safe and tidy.</p>
      </li>
      <li>
        <h3>Run onboarding</h3>
        <p>Say <code>run onboarding</code>. Claude asks you a handful of plain questions — your name, what you do, how you want to be spoken to, how your writing sounds — and fills in <code>about-me.md</code> and <code>voice-and-brand.md</code> for you, in your own words. Everything is skippable. You can change it later just by telling Claude.</p>
      </li>
      <li>
        <h3>Turn on memory (optional, worth it)</h3>
        <p>In Settings → Capabilities, turn on the memory features. With memory on, Cowork remembers your corrections between sessions and gets better at working your way. This is what makes a second brain compound instead of resetting every day.</p>
      </li>
      <li>
        <h3>Build the daily habit</h3>
        <p>Drop any stray thought into <code>01-ideas/inbox.md</code>. Don't tidy it. Speed matters more than neatness. When the inbox fills up, tell Claude <code>process the inbox</code> and it sorts everything into the right folders (showing you its plan first). Then just ask your brain things: "pull together everything I've noted about pricing," "draft a reply in my voice."</p>
      </li>
    </ol>
  </section>

  <section>
    <h2>The foundation</h2>
    <h3>Two files do most of the work</h3>
    <p>Everything else is storage. These two are what make Claude sound like it knows you rather than like generic AI output. Onboarding fills them, but you can edit them by hand any time.</p>
    <div class="card">
      <p style="margin:0 0 6px"><code>about-me.md</code> — <strong>who you are.</strong> Your role, your background, your technical level, and how you want to be spoken to. Claude reads it at the start of every session.</p>
      <p style="margin:0"><code>voice-and-brand.md</code> — <strong>how you sound.</strong> Your sentence style, the words you'd never use, how you open and close. Claude reads it before writing anything in your name.</p>
    </div>
    <div class="callout">
      <p><strong>Spend your time here.</strong> Vague answers give vague results everywhere else. A few honest sentences beat a polished paragraph.</p>
    </div>
  </section>

  <section>
    <h2>The folders</h2>
    <h3>Where everything lives</h3>
    <div class="folders">
      <div class="folder-row"><div class="k">01-ideas/</div><div class="v">Your inbox. Messy on purpose. Raw thoughts go here.</div></div>
      <div class="folder-row"><div class="k">02-projects/</div><div class="v">Active work with a finish line. Drafts, proposals, plans.</div></div>
      <div class="folder-row"><div class="k">03-areas/</div><div class="v">Ongoing responsibilities you maintain over time, with no end date.</div></div>
      <div class="folder-row"><div class="k">04-wiki/</div><div class="v">Evergreen knowledge you look things up in: how-tos, decisions, things to remember permanently.</div></div>
      <div class="folder-row"><div class="k">05-resources/</div><div class="v">Reference material you collect but didn't write yourself.</div></div>
      <div class="folder-row"><div class="k">06-archive/</div><div class="v">Finished or paused work, out of sight. Nothing is ever deleted.</div></div>
    </div>
    <p style="margin-top:22px">The idea: separate what you're actively doing from what you're keeping for reference, and separate both from what's done. If six folders feels like too many at the start, ignore <code>03-areas</code>, <code>05-resources</code>, and <code>06-archive</code> until you need them. The brain still works with just ideas, projects, and wiki.</p>
  </section>

  <section>
    <h2>Staying safe</h2>
    <h3>You're always in the loop</h3>
    <p>Claude can take real actions on your files — that's the power, and it's why you stay in control. The brain is set up to <strong>show you its plan before it moves, overwrites, or deletes anything.</strong> Read the plan, then approve it. For anything important, keep a backup copy of the folder.</p>
  </section>

  <section>
    <h2>If something goes wrong</h2>
    <dl class="faq">
      <dt>Claude can't see a file I added</dt>
      <dd>It was probably dropped in mid-session. Start a new session and it'll appear.</dd>
      <dt>Outputs feel generic</dt>
      <dd>Your <code>about-me.md</code> and <code>voice-and-brand.md</code> are still empty or too vague. Run onboarding, or make them more specific.</dd>
      <dt>Cowork won't open</dt>
      <dd>Check you're on a paid plan and the desktop app is up to date. Cowork isn't on web, mobile, or the free tier.</dd>
    </dl>
  </section>

  <section>
    <h2>Later</h2>
    <h3>Where to take it next</h3>
    <p>Once the basics work, you can connect Cowork to tools you already use — Notion, Google Drive, Gmail — so it reads from those too. That's a step for later. Get the folder working first.</p>
  </section>

</main>

<footer class="wrap">
  <p><strong>The Second Brain by <a href="https://02ui.com">02ui.com</a> · <a href="https://instagram.com/zerotoui">@zerotoui</a></strong></p>
  <p>A blank second brain for Claude Cowork · MIT licensed — use it, change it, share it.</p>
</footer>

</body>
</html>