One pass through the muggsofcode loop.
muggsofcode is a sandbox where you write a precise specification, an AI synthesizes it into code, and you audit both — the spec and the code — before and after the AI runs.
What follows is one complete pass through that loop, on a real example. Each stage below shows the platform's actual UI for that stage, filled in with the worked example's content.
The audit catches things. The AI's output is real, and imperfect. The skill being built is verifying intent against output — a skill that is becoming central to professional software work.
The Brief and the First Draft
A snowball stand owner asks a high school student to build a simple web page. Here's what the owner asked for:
Hey — I know you said in class you're learning how to use AI to build websites. I've been thinking about this for a while. Right now if someone wants to find Creole Frost online they can't, really. We're not on the map apps the way we should be, and I don't have anything I can put on Instagram when people ask for "the link."
I don't need anything fancy. Just a simple page — one screen, doesn't have to scroll — that's us when somebody pulls it up. Here's what I want:
The name "Creole Frost" big at the top, in a font that feels like a sign somebody painted by hand. We are not a chain. We're a stand. I want the font to feel like that.
Underneath the name, a short line — "Shaved fine. Drizzled with care." — and then under that, "Gentilly, New Orleans." Two lines, separated. Smaller than the name but readable.
A button that says Explore the Flavors. When someone clicks it, the flavor list should come up over the page — not take them to a new page, not scroll them down. The flavors are the thing that makes us different and I want them seen properly. There should be a way to close that popout — an × in the corner, and clicking the dim part around it. But clicking on a flavor shouldn't close it, because that's annoying and people do it by accident.
At the bottom of the screen, always visible, our hours: Open Daily: 11 AM – 9 PM.
Colors should feel like New Orleans. Mardi Gras colors — purple, green, gold — but not cheap-bead loud. Classy. I'm thinking about repainting the stand and if I like the colors you pick, I'll paint the stand to match.
One non-negotiable from me: you have to actually pick fonts and say which fonts go where. Not just "looks handwritten" — name them. Look them up. Different parts of the page should probably use different fonts. The name and the flavor descriptions are doing different work and they should look different.
The flavors and their descriptions are in the document I'll send separately — those are exact, please don't paraphrase them.
That's it. Make it good. — T.
The student opens the build_tool and lands on the Markdown stage. Here's what their first draft looks like in the four-panel spec editor:
A landing page for Creole Frost, a snowball stand in Gentilly that does fancy fusion flavors. The page is one screen, doesn't scroll. Has a popout for the flavors when you click a button.
The page should have: - The name "Creole Frost" big at the top, centered - A tagline under the name on two lines: "Shaved fine. Drizzled with care." then "Gentilly, New Orleans." - A button that says "Explore the Flavors" - The hours at the bottom: "Open Daily: 11 AM - 9 PM" When you click the button, a popout appears with all six flavors. The popout has an X in the corner to close it. Each flavor is in its own card and the cards are arranged in a grid that adjusts to the screen.
Background: cream off-white (#fdf9f2). Colors: New Orleans Mardi Gras - purple (#92278F), green (#00A95C), gold (#FDB927). Classy, not loud. Fonts: - Name "Creole Frost" in Caveat Brush via Google Fonts (hand-painted marker style, fits a snowball stand). Very large, with a gold drop shadow. - Tagline in Reenie Beanie via Google Fonts (skinnier handwriting style), medium gray, about 1.6em. - Footer hours in Reenie Beanie, purple. - Flavor names in Caveat Brush to match the main name, purple. - Flavor descriptions in Arial (clean sans-serif) so they're easy to read. The handwriting font would make them illegible. CTA button: green fill, white text, pill-shaped, Caveat Brush font. Should react when you hover. Modal: dim background with a blur. Cream content card in the middle with a gold border. Flavor cards inside are white with a green left border.
Default: modal has display: none. Click "Explore the Flavors" → set modal display: flex. Click the X → set modal display: none. Click the dim background → set modal display: none. Hover on the CTA button: change color and scale up slightly. [Flavor list - six flavors with descriptions, copied verbatim from owner's document, attached separately]
First drafts always need refinement. AWS's own internal data showed 60% of first-draft requirements need revision before they're reliably implementable. That's not a failure; that's the normal condition. The next stage is where the student catches what needs work.
Markdown QC
Clicking BEGIN MARKDOWN QC moves the student to the audit view. Their spec is displayed read-only on one side; the checklist is displayed on the other. Sixteen rows: four cognitive moves applied to each of the four spec panels.
## Project Overview A landing page for Creole Frost, a snowball stand in Gentilly that does fancy fusion flavors. The page is one screen, doesn't scroll. Has a popout for the flavors when you click a button. ## Structure The page should have: - The name "Creole Frost" big at the top, centered - A tagline under the name on two lines: "Shaved fine. Drizzled with care." then "Gentilly, New Orleans." - A button that says "Explore the Flavors" - The hours at the bottom: "Open Daily: 11 AM - 9 PM" When you click the button, a popout appears with all six flavors. The popout has an X in the corner to close it. Each flavor is in its own card and the cards are arranged in a grid that adjusts to the screen. ## Style Background: cream off-white (#fdf9f2). Colors: New Orleans Mardi Gras - purple (#92278F), green (#00A95C), gold (#FDB927). Classy, not loud. Fonts: - Name "Creole Frost" in Caveat Brush via Google Fonts. - Tagline in Reenie Beanie via Google Fonts. - Footer hours in Reenie Beanie, purple. - Flavor names in Caveat Brush. - Flavor descriptions in Arial. CTA button: green fill, white text, pill-shaped, Caveat Brush font. Modal: dim background with a blur. Cream content card with a gold border. Flavor cards inside white with a green left border. ## Behavior Default: modal has display: none. Click "Explore the Flavors" → set modal display: flex. Click the X → set modal display: none. Click the dim background → set modal display: none. Hover on the CTA button: change color and scale up slightly.
// PROJECT OVERVIEW //
// STRUCTURE //
// STYLE //
// BEHAVIOR //
The audit caught real things. The platform does not identify these issues for the student — the student finds them by walking the cognitive moves the helper questions point at.
The Revised Markdown Spec
The student clicks Return to Markdown and revises the spec to address what the audit surfaced. They're back in the same Markdown view they started in — here's the revised content:
Single-screen brand entry page for "Creole Frost", a Gentilly snowball stand that fuses traditional New Orleans snowball culture with elevated Creole flavors. The interaction model is a modal overlay: clicking the primary CTA fades up a full-viewport semi-transparent dim with a centered content card showing the flavor list, dismissed by an X button or by clicking the dim background. Audience: New Orleans locals and food-curious visitors arriving at the brand for the first time. Tone: warm, elegant, NOLA-bistro confident. Not loud, not corporate.
One full-viewport section, content vertically and horizontally centered. The whole page fits on one screen — no scrolling.
1. Brand name "Creole Frost" centered (large display script font).
2. Tagline directly below the name, broken across two lines with a <br> (line 1: "Shaved fine. Drizzled with care."; line 2: "Gentilly, New Orleans.").
3. Primary CTA button below the tagline, text "Explore the Flavors".
4. Footer line pinned to the bottom of the viewport with hours of operation in plain text ("Open Daily: 11 AM - 9 PM").
5. A modal overlay, hidden by default, containing:
- A close button (×) positioned in the top-right corner of the content card
- A heading "New Orleans Fusion Syrups" with a colored underline
- A responsive CSS grid of flavor cards using grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
- Each card contains: a flavor name in display script, then a 1-2 sentence description in a clean sans-serif for legibility
Background: cream off-white #fdf9f2. Palette: New Orleans Mardi Gras (Vibrant Purple #92278F, Vibrant Green #00A95C, Vibrant Gold #FDB927). Fonts loaded via a Google Fonts <link> tag in the document <head>: Caveat Brush and Reenie Beanie. Both must be loaded before any element references them. Brand name: Caveat Brush, very large (clamp(3em, 10vw, 5em)), purple text with a 2px solid gold drop-shadow offset down-right. Tagline: Reenie Beanie, around 1.6em, medium gray. CTA button: green fill, white text, Caveat Brush font, 50px border-radius (pill shape), 15px/40px padding, soft green box-shadow. On hover: darker green background and transform: scale(1.05) over 200ms. Footer: Reenie Beanie, purple, position absolute at the bottom of the viewport. Modal overlay: position fixed, full-viewport, rgba(0,0,0,0.7) background, backdrop-filter: blur(5px). Modal content card: cream background, 4px solid gold border, 20px rounded corners, max-width 800px, max-height 85vh, internal scroll if needed. Modal heading: Caveat Brush, around 2.5em, purple, with a 2px solid green bottom border. Flavor cards: white background, 12px rounded corners, soft gray box-shadow, 5px solid green left border. Flavor name in Caveat Brush purple; description in plain sans-serif (Arial fallback) gray. Custom scrollbar inside the modal: 8px wide, purple rounded thumb.
Default: modal has display: none. Click the "Explore the Flavors" CTA → set modal display: flex. Click the × button OR click on the dim background (the overlay element itself, not a child) → set modal display: none. Hover transition: only on the CTA button — background-color change + transform: scale(1.05) over ~200ms. No entry animations on page load. The page itself is otherwise static. [Flavor list with six fusion syrups follows here verbatim from the brief.]
The spec is now the durable artifact. Every fix to the spec fixes every future generation. This is what "specs are durable, products are disposable" means in practice.
The Synthesized Code
The student goes back through Markdown QC and clicks SYNTHESIZE. The platform sends the revised spec to a small AI model running locally on the teacher's GPU, and they land on the Code stage with their spec on the left and the streamed-in code on the right.
Single-screen brand entry page for "Creole Frost"... [the full revised spec from Stage 3 sits here, read-only, as a reference while the code streams in on the right]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Creole Frost</title>
<link href="https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Reenie+Beanie&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background-color: #fdf9f2;
font-family: 'Reenie Beanie', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
position: relative;
}
.brand-name {
font-family: 'Caveat Brush', cursive;
font-size: clamp(3em, 10vw, 5em);
color: #92278F;
text-shadow: 2px 2px 0 #FDB927;
margin-bottom: 10px;
}
.tagline {
font-size: 1.6em;
color: #666;
margin-bottom: 20px;
text-align: center;
}
.cta-button {
background-color: #00A95C;
color: white;
font-family: 'Caveat Brush', cursive;
font-size: 1.2em;
padding: 15px 40px;
border-radius: 50px;
box-shadow: 0 4px 15px rgba(0,169,92,0.3);
border: none;
cursor: pointer;
transition: background-color 0.2s, transform 0.2s;
}
.cta-button:hover {
background-color: #008040;
transform: scale(1.05);
}
.footer {
position: absolute;
bottom: 20px;
font-size: 1.2em;
color: #92278F;
}
.modal {
display: none;
position: fixed;
top: 0; left: 0;
width: 100vw; height: 100vh;
background-color: rgba(0,0,0,0.7);
backdrop-filter: blur(5px);
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
background-color: #fdf9f2;
border: 4px solid #FDB927;
border-radius: 20px;
max-width: 800px;
max-height: 85vh;
overflow-y: auto;
padding: 20px;
position: relative;
}
.modal-content::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: linear-gradient(transparent 60%, rgba(0,0,0,0.15) 100%);
pointer-events: none;
}
.modal-heading {
font-family: 'Caveat Brush', cursive;
font-size: 2.5em;
color: #92278F;
border-bottom: 2px solid #00A95C;
margin-bottom: 20px;
padding-bottom: 8px;
}
.flavor-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}
.flavor-card {
background-color: white;
border-left: 5px solid #00A95C;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
transition: transform 0.2s;
}
.flavor-card:hover {
transform: translateY(-3px);
}
.flavor-name {
font-family: 'Caveat Brush', cursive;
color: #92278F;
font-size: 1.5em;
margin-bottom: 10px;
}
.flavor-description {
font-family: Arial, sans-serif;
font-size: 1em;
color: #333;
line-height: 1.5;
}
.modal-close {
position: absolute;
top: 10px; right: 15px;
font-size: 2em;
font-weight: bold;
color: #92278F;
cursor: pointer;
z-index: 1001;
}
.modal-content::-webkit-scrollbar { width: 8px; }
.modal-content::-webkit-scrollbar-thumb {
background-color: #92278F;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="brand-name">Creole Frost</div>
<div class="tagline">
Shaved fine. Drizzled with care.<br>
Gentilly, New Orleans.
</div>
<button class="cta-button" onclick="toggleModal()">Explore the Flavors</button>
<div class="footer">Open Daily: 11 AM - 9 PM</div>
<div class="modal" id="modal">
<div class="modal-content">
<span class="modal-close" onclick="toggleModal()">×</span>
<h2 class="modal-heading">New Orleans Fusion Syrups</h2>
<div class="flavor-grid">
<!-- six .flavor-card entries here, one per fusion syrup -->
</div>
</div>
</div>
<script>
function toggleModal() {
const modal = document.getElementById('modal');
modal.style.display = modal.style.display === 'flex' ? 'none' : 'flex';
}
document.addEventListener('click', function(event) {
const modal = document.getElementById('modal');
if (event.target === modal) {
modal.style.display = 'none';
}
});
</script>
</body>
</html>The code is mostly right. The model is capable. But "mostly right" is exactly the trap — the artifact looking finished is no evidence that it matches the spec. The next stage is where the student checks.
Code QC
Clicking BEGIN CODE QC moves the student to the second audit. Three panes side-by-side: the audited spec on the left, the artifact in the middle (tabs to switch between the interactive render and the source code), the four-row checklist on the right.
Single-screen brand entry page for "Creole Frost"... [the revised spec, same as Stage 3, reference standard for the four cognitive moves below]
The student caught what the model added that the spec didn't ask for. This is the skill the course teaches and the platform supports — verifying that the artifact matches stated intent, both ways.
Render
After the audit, the rendered page. This is what the student delivered to the client. The iframe below is live — click Explore the Flavors, watch the modal open, click outside to dismiss it. Then click on a flavor card and watch it stay open.
The artifact has known small divergences from the spec (caught in Stage 5). The student's next move would be either to revise the spec to authorize what the model added, or to revise the spec to forbid it more explicitly, and regenerate. Either way, the spec is what changes — and the spec is what persists.
That's the loop.
One complete pass through the muggsofcode loop. A spec, audited before synthesis. A generation, audited after. A rendered page, with known imperfections, ready for another iteration if needed.
The skill is not "use AI to make things." The skill is specifying precisely what you want to be true, and verifying that what came back matches. That skill transfers across any AI tool, any model, any year.