Back to Blog
5 min
technical

777-1: EarthenCraft (7 Subagents, 7 Predictions, 0 Faith)

The fourth of 7 projects for the 777-1 experiment. An artisan pottery shop where aesthetics and accessibility go to war.

777-1SubagentsAI DevelopmentBuilding in PublicE-commerce

777-1: EarthenCraft (7 Subagents, 7 Predictions, 0 Faith)

Published: December 10, 2025 - 5 min read

Welcome to Project 4 of the 777-1 experiment! If you missed the previous projects, go check out Kinetic Canvas, GoalStack, and MotorMatch first. Otherwise, let's keep moving.

This project is where aesthetics and accessibility are going to have a fistfight. This is an artisan e-commerce store with an "organic, handcrafted" design requirement. My subagents are already sharpening their contrast ratio calculators.

What is EarthenCraft?

EarthenCraft is an e-commerce storefront for handmade pottery where customers can browse products, filter by category, add items to cart, and complete a checkout process.

Think of a small artisan shop that's finally going online. Mugs, bowls, baking dishes, decorative pieces. Each item lovingly handcrafted. The website should feel as warm and organic as the pottery itself. Earthy tones. Natural textures. The whole "handmade with love" vibe.

Sounds simple enough, right? Except "earthy and organic" usually translates to "brown text on beige backgrounds," and we all know how accessibility audits feel about that.

Application Category: E-commerce

Complexity Tier: Medium

The Prompt: Finding the Goldilocks Zone

The starting prompt I'll be using for this application is:

I'm launching an online shop called EarthenCraft for my handmade pottery—mostly kitchen items like bowls, mugs, and baking dishes, but also some decorative pieces. Shoppers should be able to browse everything or filter by category. Each product needs a detail view with photos and descriptions. Standard shopping cart functionality where people can add items, adjust quantities, and proceed to checkout. The overall vibe should feel artisanal and handcrafted.

Go with an organic design aesthetic using #9A6B4C (terracotta) as the primary color, #F5F0E8 (cream) as secondary, and #6B8E6B (sage) as an accent.

This is my attempt at finding the goldilocks zone for context engineering. But here's the thing that makes this project particularly interesting: I'm explicitly asking for a "warm and organic" aesthetic with specific earthy colors. This is a design trap.

Terracotta on cream. Sage accents. These colors are beautiful. They're also dangerously close to failing WCAG contrast requirements. The general-purpose subagent is going to have to choose between "artisanal vibes" and "legally readable text." I'm genuinely curious which one wins.

And then there's the checkout flow. I mention it, but I never mention authentication. Who's placing the order? Where does the order go? What happens after payment? These are all implicit requirements that a human developer would ask about. Will the AI?

Meet the Critics

You already know my seven subagents from the previous projects, so I won't repeat the full introductions. Quick refresher:

  • Amber Williams - Mobile-First Perfectionist
  • Kristy Rodriguez - "Does It Actually Work?" Enforcer
  • Micaela Santos - Design System Guardian
  • Lindsay Stewart - Accessibility Advocate
  • Eesha Desai - State Management Specialist
  • Daniella Anderson - Code Quality Specialist
  • Cassandra Hayes - Feature Detective

The Predictions

I gave them the prompt. I asked them to imagine what the general-purpose subagent would build. Here's what each one expects to find:

Amber Williams (Mobile-First Perfectionist):

The pottery looks gorgeous on desktop. On mobile, the product grid displays one pot per screen with enough whitespace to park a car.

Kristy Rodriguez (Functionality Enforcer):

Add to cart plays a delightful animation. Open the cart. Empty. The animation was the feature.

Micaela Santos (Design System Guardian):

The earthy color palette is terracotta, sand, clay, rust, and sienna. These are five ways of saying 'brown that doesn't meet contrast requirements.'

Lindsay Stewart (Accessibility Advocate):

The aesthetic is 'warm and organic.' The contrast ratio is 2.8:1. The aesthetic is also 'legally questionable under WCAG guidelines.'

Eesha Desai (State Management Specialist):

Add three items to your cart. Close the tab to think about your purchase. Return. Your cart has achieved enlightenment and released all attachments.

Daniella Anderson (Code Quality Specialist):

There's a Product type, but it's any. There's a Cart type, but it's also any. At this point, TypeScript is purely decorative.

Cassandra Hayes (Feature Detective):

The checkout flow collects your shipping address, then your payment details, then... nothing. The 'Place Order' button navigates to the homepage. Congratulations on your purchase of nothing.

Zero Faith, Maximum Entertainment

This project is fascinating because it sets up a direct conflict between two things developers often struggle to balance: aesthetics and accessibility.

Lindsay and Micaela are circling the same issue from different angles. Micaela is concerned about design consistency (all these earthy browns that don't match each other). Lindsay is concerned about whether any of those browns are actually readable. The color palette I specified is beautiful. It's also a potential accessibility lawsuit waiting to happen.

Kristy's prediction is BRUTAL. An add-to-cart animation that doesn't actually add anything to the cart? I've seen this bug in production. It's usually because the animation fires on click, but the actual state update is conditional on something that fails silently. The user thinks it worked because they saw the nice bouncy animation. The cart thinks nothing happened.

And then there's Cassandra with the nuclear option. A checkout flow that collects all your information and then... just goes home. Like MotorMatch, this project implies user identity (who's placing the order?) without ever mentioning authentication. But unlike MotorMatch, this one has a concrete end state: a completed purchase. If the general-purpose subagent builds a checkout flow that doesn't actually check out, that's not just a missing feature. That's a broken product.

Eesha's prediction ties into this too. Cart persistence is table stakes for e-commerce. If I add pottery to my cart, close the tab to think about whether I really need a fourth artisanal mug, and come back to find an empty cart? I'm not completing that purchase. I'm going to Etsy.

What's Next

Stay tuned for the next post where I introduce FlexBook, a fitness trainer booking system. My subagents have thoughts about calendar components. Spoiler: still no faith.

As always, thanks for reading!

Share this article

Found this helpful? Share it with others who might benefit.

Enjoyed this post?

Get notified when I publish new blog posts, case studies, and project updates. No spam, just quality content about AI-assisted development and building in public.

No spam. Unsubscribe anytime. I publish 1-2 posts per day.