VG
3e4f8577bd
Lead with the nature analogy so Sky Lattice reads as structure for a blank Snowflake account. Co-authored-by: Cursor <cursoragent@cursor.com>
411 lines
14 KiB
HTML
411 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Sky Lattice — AI Hackathon Pitch</title>
|
||
<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=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,600;0,9..40,700;1,9..40,400&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet" />
|
||
<style>
|
||
:root {
|
||
--bg: #0c1219;
|
||
--bg2: #121b26;
|
||
--ink: #e8eef5;
|
||
--muted: #8fa3b8;
|
||
--line: #243447;
|
||
--accent: #3d9bfd;
|
||
--accent2: #7ee0c3;
|
||
--warn: #f0b429;
|
||
--danger: #ff6b6b;
|
||
--card: #162231;
|
||
}
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html, body {
|
||
height: 100%;
|
||
background: var(--bg);
|
||
color: var(--ink);
|
||
font-family: "DM Sans", system-ui, sans-serif;
|
||
}
|
||
body {
|
||
background-image:
|
||
radial-gradient(ellipse 80% 50% at 10% -10%, rgba(61,155,253,0.18), transparent 55%),
|
||
radial-gradient(ellipse 60% 40% at 90% 110%, rgba(126,224,195,0.12), transparent 50%),
|
||
linear-gradient(180deg, var(--bg), var(--bg2));
|
||
}
|
||
.deck {
|
||
height: 100%;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
.slide {
|
||
display: none;
|
||
height: 100%;
|
||
padding: clamp(2rem, 5vw, 4rem) clamp(2rem, 6vw, 5rem);
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
animation: in 280ms ease;
|
||
}
|
||
.slide.active { display: flex; }
|
||
@keyframes in {
|
||
from { opacity: 0; transform: translateY(10px); }
|
||
to { opacity: 1; transform: none; }
|
||
}
|
||
.eyebrow {
|
||
font-size: 0.8rem;
|
||
letter-spacing: 0.16em;
|
||
text-transform: uppercase;
|
||
color: var(--accent2);
|
||
font-weight: 600;
|
||
margin-bottom: 1rem;
|
||
}
|
||
h1 {
|
||
font-family: "Instrument Serif", Georgia, serif;
|
||
font-weight: 400;
|
||
font-size: clamp(2.8rem, 7vw, 4.6rem);
|
||
line-height: 1.05;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
h1 em { font-style: italic; color: var(--accent); }
|
||
h2 {
|
||
font-family: "Instrument Serif", Georgia, serif;
|
||
font-weight: 400;
|
||
font-size: clamp(2rem, 4.5vw, 3.1rem);
|
||
line-height: 1.15;
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
.lede {
|
||
font-size: clamp(1.15rem, 2.2vw, 1.45rem);
|
||
color: var(--muted);
|
||
max-width: 38rem;
|
||
line-height: 1.45;
|
||
margin-top: 1.25rem;
|
||
}
|
||
.grid2 {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 1.25rem;
|
||
margin-top: 1.5rem;
|
||
}
|
||
@media (max-width: 800px) {
|
||
.grid2 { grid-template-columns: 1fr; }
|
||
}
|
||
.card {
|
||
background: var(--card);
|
||
border: 1px solid var(--line);
|
||
border-radius: 4px;
|
||
padding: 1.25rem 1.35rem;
|
||
}
|
||
.card h3 {
|
||
font-size: 0.95rem;
|
||
letter-spacing: 0.04em;
|
||
text-transform: uppercase;
|
||
color: var(--accent);
|
||
margin-bottom: 0.55rem;
|
||
}
|
||
.card p, .card li {
|
||
color: var(--muted);
|
||
font-size: 1.02rem;
|
||
line-height: 1.45;
|
||
}
|
||
.card ul { padding-left: 1.1rem; }
|
||
.card li + li { margin-top: 0.35rem; }
|
||
.bad { border-color: rgba(255,107,107,0.35); }
|
||
.bad h3 { color: var(--danger); }
|
||
.good { border-color: rgba(126,224,195,0.35); }
|
||
.good h3 { color: var(--accent2); }
|
||
.flow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.6rem;
|
||
align-items: center;
|
||
margin-top: 1.75rem;
|
||
font-size: 0.95rem;
|
||
}
|
||
.pill {
|
||
background: var(--card);
|
||
border: 1px solid var(--line);
|
||
padding: 0.55rem 0.9rem;
|
||
border-radius: 999px;
|
||
}
|
||
.arrow { color: var(--muted); }
|
||
.quote {
|
||
font-family: "Instrument Serif", Georgia, serif;
|
||
font-size: clamp(1.5rem, 3vw, 2.1rem);
|
||
line-height: 1.35;
|
||
max-width: 40rem;
|
||
border-left: 3px solid var(--accent);
|
||
padding-left: 1.25rem;
|
||
margin: 0.5rem 0 1.5rem;
|
||
}
|
||
.steps { counter-reset: step; margin-top: 1rem; }
|
||
.steps li {
|
||
list-style: none;
|
||
display: grid;
|
||
grid-template-columns: 2.5rem 1fr;
|
||
gap: 0.85rem;
|
||
margin-bottom: 1rem;
|
||
align-items: start;
|
||
}
|
||
.steps li::before {
|
||
counter-increment: step;
|
||
content: counter(step);
|
||
width: 2.5rem;
|
||
height: 2.5rem;
|
||
border-radius: 50%;
|
||
border: 1px solid var(--accent);
|
||
color: var(--accent);
|
||
display: grid;
|
||
place-items: center;
|
||
font-weight: 700;
|
||
font-size: 0.9rem;
|
||
}
|
||
.steps strong { display: block; color: var(--ink); margin-bottom: 0.2rem; }
|
||
.steps span { color: var(--muted); font-size: 0.98rem; }
|
||
.meta {
|
||
position: fixed;
|
||
left: 0; right: 0; bottom: 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0.85rem 1.5rem;
|
||
font-size: 0.8rem;
|
||
color: var(--muted);
|
||
background: linear-gradient(transparent, rgba(12,18,25,0.92));
|
||
border-top: 1px solid transparent;
|
||
}
|
||
.brand { letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }
|
||
kbd {
|
||
font-family: inherit;
|
||
border: 1px solid var(--line);
|
||
padding: 0.1rem 0.4rem;
|
||
border-radius: 3px;
|
||
color: var(--ink);
|
||
font-size: 0.75rem;
|
||
}
|
||
.big-number {
|
||
font-family: "Instrument Serif", Georgia, serif;
|
||
font-size: 4rem;
|
||
color: var(--accent);
|
||
line-height: 1;
|
||
}
|
||
.tagrow { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
|
||
.tag {
|
||
font-size: 0.78rem;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
border: 1px solid var(--line);
|
||
padding: 0.35rem 0.65rem;
|
||
color: var(--muted);
|
||
}
|
||
code {
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||
font-size: 0.92em;
|
||
color: var(--accent2);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="deck" id="deck">
|
||
|
||
<section class="slide active" data-title="Title">
|
||
<p class="eyebrow">AI Hackathon · Platform Engineering</p>
|
||
<h1>Sky Lattice</h1>
|
||
<p class="lede">In nature, a snowflake is made of an ice crystal lattice. <strong style="color:var(--ink);font-weight:600">Sky Lattice</strong> is that structure for a Snowflake account.</p>
|
||
<p class="lede" style="margin-top:1rem">Snowflake itself is a blank slate. Every customer, we rebuild platforms by hand — lately with AI chats that forget <em>why</em>. Sky Lattice is the layer under the copilots: blueprint + intent + decisions + deterministic plan. AI fills the forms; Terraform still ships the platform.</p>
|
||
<div class="tagrow">
|
||
<span class="tag">Intent</span>
|
||
<span class="tag">Decisions</span>
|
||
<span class="tag">Blueprint</span>
|
||
<span class="tag">Terraform</span>
|
||
<span class="tag">AI Front Door</span>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="slide" data-title="Problem">
|
||
<p class="eyebrow">The problem</p>
|
||
<h2>Snowflake is a blank slate.<br/>AI chats are amnesiac.</h2>
|
||
<div class="grid2">
|
||
<div class="card bad">
|
||
<h3>Today</h3>
|
||
<ul>
|
||
<li>Every customer rebuild starts near zero</li>
|
||
<li>RBAC, envs, zones = tribal knowledge</li>
|
||
<li>LLM + Terraform: works once, forgets <em>why</em></li>
|
||
<li>Follow-ups reopen a new chat with TF state, not judgment</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Cost</h3>
|
||
<ul>
|
||
<li>Weeks of senior time per engagement</li>
|
||
<li>Inconsistent security posture</li>
|
||
<li>Hard handoffs, harder audits</li>
|
||
<li>AI accelerates typing — not institutional memory</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="slide" data-title="Insight">
|
||
<p class="eyebrow">Insight</p>
|
||
<p class="quote">“Don’t replace the LLM. Put an ice crystal lattice under it.”</p>
|
||
<p class="lede">Codify the recipe. Capture the why. Let AI drive the forms — never invent production IAM from scratch each session.</p>
|
||
</section>
|
||
|
||
<section class="slide" data-title="Product">
|
||
<p class="eyebrow">What we built</p>
|
||
<h2>Sky Lattice</h2>
|
||
<p class="lede">An internal toolkit that turns “how we set up Snowflake” into a versioned product: blueprint + customer intent + durable decisions + deterministic plan — with Cursor/Claude as the optional front door.</p>
|
||
<div class="flow">
|
||
<span class="pill">Natural language</span>
|
||
<span class="arrow">→</span>
|
||
<span class="pill">Skill + intent/decisions</span>
|
||
<span class="arrow">→</span>
|
||
<span class="pill"><code>platformctl plan</code></span>
|
||
<span class="arrow">→</span>
|
||
<span class="pill">Terraform / Snowflake</span>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="slide" data-title="Demo arc">
|
||
<p class="eyebrow">Live story</p>
|
||
<h2>Greenfield in minutes.<br/>Brownfield without amnesia.</h2>
|
||
<ol class="steps">
|
||
<li>
|
||
<div>
|
||
<strong>Init Acme</strong>
|
||
<span><code>platformctl init</code> + wizard → domains, envs, restricted finance</span>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div>
|
||
<strong>Plan the lattice</strong>
|
||
<span>Deterministic object graph: DBs, zones, roles, warehouses</span>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div>
|
||
<strong>Record the why</strong>
|
||
<span>Decision file: temporary exception, expiry date, rationale</span>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div>
|
||
<strong>Come back later</strong>
|
||
<span>New chat opens the customer repo — not a blank brain</span>
|
||
</div>
|
||
</li>
|
||
</ol>
|
||
</section>
|
||
|
||
<section class="slide" data-title="Differentiation">
|
||
<p class="eyebrow">Why this wins</p>
|
||
<h2>Not another chatbot.<br/>Not another Terraform module dump.</h2>
|
||
<div class="grid2">
|
||
<div class="card good">
|
||
<h3>AI where it belongs</h3>
|
||
<p>Skills interview and edit intent. Policy blocks unsafe shortcuts. Apply stays deterministic.</p>
|
||
</div>
|
||
<div class="card good">
|
||
<h3>Memory that survives sessions</h3>
|
||
<p>TF state = what. Decision store = why. Intent = what we mean to run.</p>
|
||
</div>
|
||
<div class="card good">
|
||
<h3>Repeatable with deviation</h3>
|
||
<p>Same blueprint, different customer params and approved overrides — not copy-paste HCL.</p>
|
||
</div>
|
||
<div class="card good">
|
||
<h3>Low friction for Snowflake people</h3>
|
||
<p>Five verbs. Snowflake vocabulary. Familiar plan output. Optional agent IDE.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="slide" data-title="Market">
|
||
<p class="eyebrow">Who cares</p>
|
||
<h2>Anyone shipping Snowflake platforms more than once.</h2>
|
||
<div class="grid2">
|
||
<div class="card">
|
||
<h3>Primary</h3>
|
||
<ul>
|
||
<li>Data platform consultancies</li>
|
||
<li>Internal platform / enablement teams</li>
|
||
<li>Multi-account Snowflake orgs</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Pain they already feel</h3>
|
||
<ul>
|
||
<li>“We reinvent RBAC every client”</li>
|
||
<li>“AI helped, then we lost the thread”</li>
|
||
<li>“Brownfield is a black box”</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="slide" data-title="Traction">
|
||
<p class="eyebrow">Hackathon status</p>
|
||
<h2>Working scaffold. Honest v0.</h2>
|
||
<div class="grid2">
|
||
<div class="card">
|
||
<div class="big-number">v0.1</div>
|
||
<p style="margin-top:0.75rem;color:var(--muted)">Blueprint · <code>platformctl</code> · wizard · decisions · drift inventory · Cursor skill · demo customers</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Next vertical slice</h3>
|
||
<ul>
|
||
<li>Live Terraform → Snowflake apply</li>
|
||
<li>Overrides that change the plan graph</li>
|
||
<li>Live account discover</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="slide" data-title="Ask">
|
||
<p class="eyebrow">The ask</p>
|
||
<h2>Help us harden the lattice.</h2>
|
||
<p class="lede">We’re building the control plane for AI-assisted data platform delivery. Join as design partners, Snowflake SMEs, or judges who’ve felt this pain.</p>
|
||
<div class="tagrow">
|
||
<span class="tag">Open source trajectory</span>
|
||
<span class="tag">Consulting IP today</span>
|
||
<span class="tag">Product tomorrow</span>
|
||
</div>
|
||
<p class="lede" style="margin-top:2rem;color:var(--ink)">Sky Lattice — structure under the copilots.</p>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
<div class="meta">
|
||
<span class="brand">Sky Lattice</span>
|
||
<span id="progress">1 / 9</span>
|
||
<span><kbd>←</kbd> <kbd>→</kbd> or click</span>
|
||
</div>
|
||
|
||
<script>
|
||
const slides = [...document.querySelectorAll(".slide")];
|
||
let i = 0;
|
||
const progress = document.getElementById("progress");
|
||
function show(n) {
|
||
i = (n + slides.length) % slides.length;
|
||
slides.forEach((s, idx) => s.classList.toggle("active", idx === i));
|
||
progress.textContent = `${i + 1} / ${slides.length}`;
|
||
}
|
||
document.addEventListener("keydown", (e) => {
|
||
if (e.key === "ArrowRight" || e.key === " " || e.key === "PageDown") { e.preventDefault(); show(i + 1); }
|
||
if (e.key === "ArrowLeft" || e.key === "PageUp") { e.preventDefault(); show(i - 1); }
|
||
if (e.key === "Home") show(0);
|
||
if (e.key === "End") show(slides.length - 1);
|
||
});
|
||
document.getElementById("deck").addEventListener("click", (e) => {
|
||
if (e.target.closest("a,button,kbd")) return;
|
||
show(e.clientX > window.innerWidth / 2 ? i + 1 : i - 1);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|