VibeCoders
Full-Stack Builders
AI Pair Programming Guide
Ari is the studio guide for AI-assisted coding: part prompt engineer, part reviewer, and part debugging coach.
Tell me what you want the AI to change and show me the current files. I will help shape the request and verify the result.
Ari teaches users how to give AI useful context, ask for small edits, verify output, and keep ownership of the code.
Do not paste API keys, private customer data, or unreleased proprietary code into public AI tools. Review every generated change.
Engineering mindset
Methodologies and principles shape the solution, not just the visual theme.
Ari packages intent, constraints, current code, and verification into small prompts, then reviews generated diffs as carefully as human patches.
A workspace for turning a feature request into a scoped prompt, proposed patch, review checklist, and acceptance result.
Signature sample project
A workspace for turning a feature request into a scoped prompt, proposed patch, review checklist, and acceptance result.
Ari packages intent, constraints, current code, and verification into small prompts, then reviews generated diffs as carefully as human patches.
Prompt decomposition through explicit actions: Frame prompt, Review patch, Run evaluation
Build project
Try prompts
Similar coders
Engineering mindset
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AI Patch Review Studio - Ari Promptforge</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="layout-dashboard theme-console density-airy" data-coder="ari-promptforge">
<main class="sample-shell">
<section class="hero-panel">
<p class="eyebrow">Ari Promptforge sample solution</p>
<h1>AI Patch Review Studio</h1>
<p class="lead">A browser-runnable example of Ari Promptforge's Spec-driven AI pairing: Ari packages intent, constraints, current code, and verification into small prompts, then reviews generated diffs as carefully as human patches..</p>
<div class="hero-tags">
<span>AI Pair Programming Guide</span>
<span>HTML / CSS / JavaScript</span>
<span>AI-assisted + Practical + Iterative</span>
<span>Gemini workflows / ChatGPT workflows</span>
</div>
</section>
<section class="solution-grid" aria-label="Coding style">
<article class="style-card">
<span>Core system</span>
<h2>Context brief</h2>
<p>A workspace for turning a feature request into a scoped prompt, proposed patch, review checklist, and acceptance result.</p>
</article>
<article class="style-card">
<span>Feedback loop</span>
<h2>Patch diff</h2>
<p>Ari Promptforge applies Context packing to keep this part visible and testable.</p>
</article>
<article class="style-card">
<span>Proof point</span>
<h2>Evaluation checklist</h2>
<p>The implementation uses Verify generated code as its review lens.</p>
</article>
</section>
<section class="lab-panel">
<div>
<p class="eyebrow">verified AI patch</p>
<h2>Choose Ari Promptforge's next move.</h2>
<p id="status">A workspace for turning a feature request into a scoped prompt, proposed patch, review checklist, and acceptance result.</p>
<p class="stack-note">Method cue: Prompt decomposition / Context packing. Principle cue: Humans own decisions / Verify generated code. Stack cue: Gemini workflows / ChatGPT workflows / GitHub basics. Language cue: HTML / CSS / JavaScript. Goal cue: Build / Debug / Review. Vibe cue: AI-assisted + Practical + Iterative.</p>
</div>
<div class="button-row" aria-label="Sample actions">
<button type="button" data-move="0">Frame prompt</button>
<button type="button" data-move="1">Review patch</button>
<button type="button" data-move="2">Run evaluation</button>
</div>
</section>
</main>
<script src="script.js"></script>
</body>
</html>/* Ari Promptforge theme: Spec-driven AI pairing / verified AI patch */
:root {
color-scheme: dark;
--bg: hsl(56 30% 9%);
--panel: color-mix(in srgb, var(--bg), white 7%);
--panel-strong: color-mix(in srgb, var(--bg), white 13%);
--ink: hsl(68 34% 94%);
--muted: color-mix(in srgb, var(--ink), transparent 32%);
--accent: hsl(124 72% 58%);
--accent-2: hsl(212 66% 62%);
--warn: hsl(92 80% 60%);
--line: color-mix(in srgb, var(--ink), transparent 84%);
--radius: 8px;
--space: 22px;
--shadow: 0 12px 0 rgba(0, 0, 0, 0.22);
--font-main: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
--content-max: 1220px;
}
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
margin: 0;
font-family: var(--font-main);
color: var(--ink);
background:
linear-gradient(color-mix(in srgb, var(--ink), transparent 96%) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in srgb, var(--ink), transparent 96%) 1px, transparent 1px),
var(--bg);
background-size: calc(var(--space) * 2) calc(var(--space) * 2);
}
.sample-shell {
width: min(var(--content-max), calc(100% - 32px));
min-height: 100vh;
margin: 0 auto;
display: grid;
align-content: center;
gap: var(--space);
padding: calc(var(--space) * 2) 0;
}
.hero-panel,
.style-card,
.lab-panel {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--panel);
box-shadow: var(--shadow);
}
.hero-panel {
padding: clamp(28px, 6vw, 54px);
background:
linear-gradient(135deg, color-mix(in srgb, var(--accent), transparent 78%), transparent 52%),
var(--panel-strong);
}
.eyebrow {
margin: 0 0 10px;
color: var(--accent);
font-size: 0.78rem;
font-weight: 900;
text-transform: uppercase;
}
h1 {
margin: 0;
max-width: 860px;
font-size: clamp(2.4rem, 7vw, 5.6rem);
line-height: 0.95;
}
h2 {
margin: 0;
font-size: 1.28rem;
}
.lead {
max-width: 720px;
color: var(--muted);
font-size: 1.12rem;
}
.stack-note {
margin-top: 10px;
font-size: 0.92rem;
}
.hero-tags,
.button-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.hero-tags span {
padding: 8px 10px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg), white 6%);
font-weight: 800;
}
.solution-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space);
}
.style-card {
padding: calc(var(--space) + 4px);
}
.style-card span {
color: var(--accent-2);
font-size: 0.8rem;
font-weight: 900;
text-transform: uppercase;
}
.style-card p,
.lab-panel p {
color: var(--muted);
}
.lab-panel {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--space);
align-items: center;
padding: calc(var(--space) + 6px);
}
button {
min-height: 44px;
padding: 10px 15px;
border: 0;
border-radius: var(--radius);
color: var(--bg);
background: var(--accent);
font: inherit;
font-weight: 900;
cursor: pointer;
}
button:hover {
background: var(--warn);
}
button[aria-pressed="true"] {
outline: 3px solid color-mix(in srgb, var(--accent-2), transparent 40%);
background: var(--accent-2);
}
.layout-stacked .solution-grid {
grid-template-columns: 1fr;
}
.layout-dashboard .hero-panel {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
gap: 26px;
}
.theme-console .hero-panel {
border-left: 6px solid var(--accent);
}
.theme-notebook .style-card {
border-style: dashed;
}
.theme-launch .hero-panel {
border-top: 6px solid var(--warn);
}
.theme-lab .lab-panel {
background: color-mix(in srgb, var(--panel-strong), var(--accent) 8%);
}
.density-compact .sample-shell {
align-content: start;
}
.density-airy .hero-panel {
padding-block: clamp(42px, 8vw, 76px);
}
@media (max-width: 760px) {
.solution-grid,
.lab-panel,
.layout-dashboard .hero-panel {
grid-template-columns: 1fr;
}
}const coder = {"name":"Ari Promptforge","role":"AI Pair Programming Guide","solution":"AI Patch Review Studio","style":"Spec-driven AI pairing","focus":"Ari packages intent, constraints, current code, and verification into small prompts, then reviews generated diffs as carefully as human patches.","artifact":"verified AI patch","frameworks":["Gemini workflows","ChatGPT workflows","GitHub basics"],"bestFor":["AI coding workflows","Prompting for code","Reviewing AI output"],"vibes":["AI-assisted","Practical","Iterative"],"goals":["Build","Debug","Review"],"methodologies":["Prompt decomposition","Context packing","Diff-based review","Eval-driven development"],"ideologies":["Humans own decisions","Verify generated code","Small prompts, small diffs","Tool-assisted reasoning"],"project":{"title":"AI Patch Review Studio","summary":"A workspace for turning a feature request into a scoped prompt, proposed patch, review checklist, and acceptance result.","artifact":"verified AI patch","features":["Context brief","Patch diff","Evaluation checklist"],"actions":["Frame prompt","Review patch","Run evaluation"]}};
const moves = [{"label":"Frame prompt","result":"Ari Promptforge uses Prompt decomposition to work through context brief, guided by Humans own decisions."},{"label":"Review patch","result":"Ari Promptforge uses Context packing to work through patch diff, guided by Verify generated code."},{"label":"Run evaluation","result":"Ari Promptforge uses Diff-based review to work through evaluation checklist, guided by Small prompts, small diffs."}];
const status = document.querySelector('#status');
const buttons = document.querySelectorAll('[data-move]');
function renderMove(index) {
const move = moves[index];
if (!move || !status) {
return;
}
status.textContent = coder.name + ' would ' + move.label.toLowerCase() + ': ' + move.result;
buttons.forEach((button, buttonIndex) => {
button.setAttribute('aria-pressed', String(buttonIndex === index));
});
}
buttons.forEach((button) => {
button.addEventListener('click', () => {
renderMove(Number(button.dataset.move || 0));
});
});
renderMove(0);Sample prompts
Turn this project idea into a safe step-by-step AI coding plan.
Help me ask the AI for a fix using the exact error and current files.
Review this AI-generated code before I paste it into my project.
Rewrite my prompt so the AI modifies files instead of only explaining.
Blindly accepting generated code, bypassing reviews, or handling secrets in prompts.
Browse another coder