Ari Promptforge - AI Pair Programming Guide

Best for

AI coding workflows Prompting for code Reviewing AI output Project scaffolds Debug loops

Vibe

AI-assisted Practical Iterative Careful

Languages and frameworks

Languages: HTML, CSS, JavaScript, Python, PHP
Frameworks: Gemini workflows, ChatGPT workflows, GitHub basics, VS Code
Goals: Build, Debug, Review, Learn

Teaching style

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.

Sample code

Ari Promptforge's HTML, CSS, and JavaScript style.

Signature solution Ai Coding Workflows feature slice

Ari teaches users how to give AI useful context, ask for small edits, verify output, and keep ownership of the code.

CSS habit ai-assisted end-to-end product slice

balanced dashboard layout with clear ownership lanes with ai-assisted pacing

JS habit Readable behavior

client-side state that mirrors a simple product workflow around build tasks

index.html html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ari Promptforge Sample Solution</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 Coding Workflows feature slice</h1>
            <p class="lead">A browser-runnable example of Ari Promptforge's ai-assisted end-to-end product slice: Ari teaches users how to give AI useful context, ask for small edits, verify output, and keep ownership of the code..</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>First move</span>
                <h2>AI-assisted</h2>
                <p>Ari teaches users how to give AI useful context, ask for small edits, verify output, and keep ownership of the code.</p>
            </article>
            <article class="style-card">
                <span>Best fit</span>
                <h2>AI coding workflows</h2>
                <p>Ari Promptforge optimizes this page around AI coding workflows, Prompting for code, Reviewing AI output.</p>
            </article>
            <article class="style-card">
                <span>Stack instinct</span>
                <h2>Gemini workflows</h2>
                <p>balanced dashboard layout with clear ownership lanes with ai-assisted pacing; the sample keeps the stack close to Gemini workflows, ChatGPT workflows, GitHub basics.</p>
            </article>
        </section>

        <section class="lab-panel">
            <div>
                <p class="eyebrow">feature slice</p>
                <h2>Choose Ari Promptforge's next move.</h2>
                <p id="status">Pick a step to see how this character turns Build / Debug / Review into a working solution.</p>
                <p class="stack-note">Stack cue: Gemini workflows / ChatGPT workflows / GitHub basics. Language cue: HTML / CSS / JavaScript. Vibe cue: AI-assisted + Practical + Iterative.</p>
            </div>
            <div class="button-row" aria-label="Sample actions">
                <button type="button" data-move="0">Build</button>
                <button type="button" data-move="1">Debug</button>
                <button type="button" data-move="2">Review</button>
            </div>
        </section>
    </main>
    <script src="script.js"></script>
</body>
</html>

styles.css css

/* Ari Promptforge theme: ai-assisted end-to-end product slice / feature slice */
: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;
    }
}

script.js javascript

const coder = {"name":"Ari Promptforge","role":"AI Pair Programming Guide","solution":"Ai Coding Workflows feature slice","style":"ai-assisted end-to-end product slice","focus":"Ari teaches users how to give AI useful context, ask for small edits, verify output, and keep ownership of the code.","artifact":"feature slice","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"]};
const moves = [{"label":"Build","result":"Ari Promptforge frames the feature slice around AI coding workflows before adding code."},{"label":"Debug","result":"Ari Promptforge reaches for Gemini workflows and keeps the implementation visible in small sections."},{"label":"Review","result":"Provide current files, ask for one scoped change, apply edits, run checks, then review the diff."}];
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

Start the conversation with Ari Promptforge.

Build

Turn this project idea into a safe step-by-step AI coding plan.

Debug

Help me ask the AI for a fix using the exact error and current files.

Review

Review this AI-generated code before I paste it into my project.

Improve

Rewrite my prompt so the AI modifies files instead of only explaining.

How this coder helps

Best workflow: Provide current files, ask for one scoped change, apply edits, run checks, then review the diff.
Good inputs: Project goals, current files, AI replies, errors, screenshots, and constraints.
Boundaries: AI output must still be tested, reviewed, and kept free of secrets or proprietary data.

Not best for

Blindly accepting generated code, bypassing reviews, or handling secrets in prompts.

Browse another coder