121 lines
4.8 KiB
React
121 lines
4.8 KiB
React
function ShieldCheck() {
|
||
return (
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
||
<path
|
||
d="M8 1.5 2.5 4v3.5c0 3 2.3 5.4 5.5 7 3.2-1.6 5.5-4 5.5-7V4L8 1.5Z"
|
||
stroke="#1C5D4C"
|
||
strokeWidth="1.3"
|
||
strokeLinejoin="round"
|
||
/>
|
||
<path
|
||
d="m5.6 8 1.7 1.7L10.6 6"
|
||
stroke="#1C5D4C"
|
||
strokeWidth="1.3"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
/>
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
export default function Recipe() {
|
||
return (
|
||
<section className="section" id="recipe">
|
||
<div className="wrap">
|
||
<div className="recipe-head reveal">
|
||
<span className="spec">Read an actual recipe</span>
|
||
<h2>Every entry is a workflow you can run.</h2>
|
||
<p>
|
||
Here’s a real one from the founding library — the whole thing, exactly as it
|
||
appears in the guide. This is the format behind every workflow.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="recipe reveal">
|
||
<div className="recipe-top">
|
||
<span className="recipe-id">
|
||
recipe <b>RE-01</b> · v1.2 · ~15 min
|
||
</span>
|
||
<span className="recipe-vert">Real Estate</span>
|
||
</div>
|
||
<div className="recipe-body">
|
||
<h3 className="recipe-title">
|
||
Draft a property-market brief with an AI agent — without leaking client data.
|
||
</h3>
|
||
|
||
<div className="row">
|
||
<div className="k">Problem</div>
|
||
<div className="v">
|
||
You need a sharp neighborhood market brief for a client meeting, fast — but
|
||
the listing sheet and client notes can’t go into a public model.{" "}
|
||
<span className="sub">
|
||
Job: turn messy local data into a credible one-pager in minutes, safely.
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="row">
|
||
<div className="k">Method</div>
|
||
<div className="v">
|
||
<ol className="steps">
|
||
<li>Strip identifiers from the source data locally (a provided script does this).</li>
|
||
<li>Prompt the agent with the anonymized sample and a fixed brief template.</li>
|
||
<li>Review the draft against the checklist before anything leaves your machine.</li>
|
||
</ol>
|
||
<div className="term" role="img" aria-label="Sample terminal output from the workflow">
|
||
<div className="term-bar">
|
||
<i></i>
|
||
<i></i>
|
||
<i></i>
|
||
<span>agent — property-brief · sample dataset (non-confidential)</span>
|
||
</div>
|
||
<pre>
|
||
<span className="c-dim">{"$ "}</span>
|
||
<span className="c-user">{"brief"}</span>
|
||
{" --input "}
|
||
<span className="c-key">{"sample_listings.csv"}</span>
|
||
{" --template market-1pager\n\n"}
|
||
<span className="c-dim">{"✓ redacted 3 fields (owner_name, phone, exact_address)\n✓ 41 comps in radius · median $/sqft computed\n\n"}</span>
|
||
<span className="c-ok">{"MARKET BRIEF — Maple Heights (sample)\n"}</span>
|
||
{" · Median list: $420/sqft (▲ 4.1% QoQ)\n · Days on market: 22 (was 31)\n · Inventory: 1.8 mo — seller-leaning\n · Read: price to comp, expect <2 wks at ask\n\n"}
|
||
<span className="c-dim">{"# cost this run: $0.03 · model: claude · 2,140 tokens"}</span>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="row">
|
||
<div className="k">Safeguards</div>
|
||
<div className="v">
|
||
<div className="guard">
|
||
<ShieldCheck />
|
||
<span>
|
||
Redaction runs <b style={{ color: "var(--color-ink)" }}>on your machine</b> —
|
||
raw client data never reaches the model.
|
||
</span>
|
||
</div>
|
||
<div className="guard">
|
||
<ShieldCheck />
|
||
<span>
|
||
A human review step is required before the brief is shared. The checklist
|
||
is part of the recipe.
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="row">
|
||
<div className="k">Try it</div>
|
||
<div className="v">
|
||
Run the same brief on the included sample dataset (no real client data) in
|
||
about 15 minutes — then swap in your own, safely.{" "}
|
||
<span className="chip">◷ cost to try ≈ $0.03</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|