# Anton Review β€” Spoken Language V2 **Date:** 2026-04-03 **Reviewer:** Anton πŸ€ **Scope:** PRD + Prototype critique --- ## PRD CRITIQUE ### What's right 1. **The philosophy is the product.** "Wrong is fine, flow before structure, language as byproduct of thinking" β€” this is a genuine insight about language acquisition, not marketing fluff. It draws correctly from Krashen's input hypothesis and immersion-based pedagogy. The PRD earns its beliefs. 2. **POR as atomic unit is strong.** Making "a piece of reasoning" the unit rather than "a lesson" or "a word" is the single best idea in the document. It forces every interaction to carry intellectual weight. 3. **Language Braiding is well-articulated.** The description of code-switching as method rather than failure is clear and implementable. The "same typeface, different color" decision is correct β€” it emphasizes that the languages share a space, not that they're foreign to each other. 4. **The 13 features are internally coherent.** They all serve the same philosophy. Nothing in the feature list contradicts the core thesis. 5. **Build sequence is realistic.** Phase 1 scopes to the core loop only. Good discipline. ### What's wrong 1. **The PRD has no opinion on what "a session" actually feels like.** It describes a 7-step flow (Hear β†’ Braided Read β†’ Crude POR β†’ Vocab Encounter β†’ Refine β†’ Etymology β†’ Joke) but never addresses pacing, duration, or emotional arc. How long is step 1? 30 seconds? 3 minutes? What's the energy curve? This is the most important UX question in the product and the PRD punts on it entirely. A flow-based product lives or dies on rhythm, and the rhythm is unspecified. 2. **"The Dial" is conceptually strong but functionally vague.** The PRD describes it as a "visual/conceptual metaphor" and a "spectrum." Is it user-controlled? Automatic? Does it drive content difficulty? Does it affect the braiding ratio? The PRD says the ratio "shifts as proficiency grows" but never specifies the mechanism. This is the product's signature metaphor and it has no spec. 3. **The Vocabulary Scroll (800 words) has no sourcing logic.** Where do the 800 words come from? Are they the 800 most common Portuguese words? Topic-derived? User-history-derived? The PRD says "seeded from the current topic" but also implies a persistent 800-word layer across sessions. These are contradictory. A word list that changes per topic isn't 800 persistent words β€” it's a per-session vocabulary feed. Pick one. 4. **"No stage labels visible to user" (Β§6.5) contradicts the prototype and the UX architecture.** The PRD explicitly says "The session flows. The structure is invisible." But the prototype has stage labels ("Hear it first," "Read β€” Braided," "Your turn"). The PRD needs to decide: is the structure visible or not? And if invisible, how does the user know what to do at each step? This isn't a prototype bug β€” it's a PRD ambiguity. 5. **The "Grammar Sense" feature (Β§6.11) is dangerously close to content marketing, not product.** "Short, surprising observations" about grammar are blog posts. What makes this a product feature? Is it generative? Curated? Contextual to the session? The PRD describes it as card-format sidebars β€” that's content packaging, not interactive design. Needs a stronger mechanic or should be demoted to "nice to have." 6. **Open Questions (Β§11) are still open.** This is a "For Review" draft dated April 2 β€” one day before the prototype was built. Questions 2, 3, 4, and 5 are foundational UX decisions that directly affect the prototype. Building before answering these was premature. The PRD shows locked decisions at the top of the brief but the open questions section contradicts some of them. 7. **No error states, edge cases, or empty states.** What happens when a user has no recordings yet for "Hear Yourself Back"? What if the AI generates a bad topic angle? What if the user records silence? A PRD for a real product needs these. 8. **Section 9 exposes an API key in plain text.** `AIzaSyDXqYZInk83iVV4mD29pSuHQKbgkiI1x9Q` is embedded in a document going to a client. Strip it. ### What's underspecified - **Audio/TTS integration.** The brief says ElevenLabs is locked, but Β§9 says "TTS for listening passages" without specifying ElevenLabs. The prototype uses no audio at all. Which is it? - **Recording storage.** localStorage for audio recordings is mentioned. This is a terrible idea for anything beyond a prototype β€” recordings are large, localStorage has a 5-10MB limit per origin, and data loss is guaranteed. Fine for demo, but the PRD should flag this as a known limitation. - **The "joke/pun" in step 7.** This is the most charming part of the session but has zero spec. Where do jokes come from? Are they AI-generated? Curated? Quality control on AI humor is notoriously bad. - **Speech Work (Β§6.10) timeline.** "Over weeks" is not a spec. How many sessions? What triggers progression? What does "progressively un-braid" mean mechanically? ### What's overspecified - **"5 argument-angles" per topic.** Why 5? This is an arbitrary number baked into the spec. Should be "N arguments, minimum 3" or similar. The prototype obediently shows exactly 5 argument cards, which feels rigid. - **The data model (Β§9).** Too early for a PRD at this stage. The data model should emerge from the features, not be specified before they're built. It's also incomplete (no model for The Dial state, no model for joke/etymology content). --- ## EXECUTION CRITIQUE ### What Kitt already flagged (confirmed) All 6 of Kitt's issues are real. I'll add specifics: 1. **Z2 canvas cards overlap.** The positioning uses percentage-based `left`/`top` on `position: absolute` 300px-wide cards. On any viewport under ~1200px, cards collide. The connector SVG draws lines between calculated centers, but these centers don't account for the card's actual rendered position after CSS transforms. On first load the SVG may render before the cards settle. 2. **Session card overlay is inadequate.** `rgba(248,244,239,0.82)` β€” 82% opacity with the warm background color. Not enough. Cards, connectors, and special cards bleed through. The overlay needs to be 95%+ or the session card needs to be on its own full-screen layer. 3. **Vocab panel width (200px) is hardcoded** and doesn't integrate with the session card's `max-width: calc(100vw - 280px)`. The 280px gap roughly accounts for the vocab panel, but the session card's horizontal centering via `left: 50%; transform: translateX(-50%)` doesn't offset for the panel. Result: the session card overlaps the vocab panel's space on narrower screens. 4. **Stage label is 10px uppercase.** Too small. The most important orienting text in the session flow is smaller than the card metadata. 5. **Z1β†’Z2 has no zoom.** It's a `scale(0.98)β†’scale(1)` opacity crossfade. The PRD implies spatial hierarchy (topics contain arguments). The transition should communicate "going deeper," not "switching tabs." 6. **The Dial is a 110pxΓ—5px track in the nav.** It's the product's signature metaphor and it occupies less visual space than the user avatar. ### Additional execution issues (beyond Kitt) 7. **No audio at all.** The play button does nothing. The mic button fakes a recording with a setTimeout. For a prototype that's demoing a *listening-first* language product, the absence of any real audio β€” even a placeholder MP3 β€” fundamentally undermines the pitch. The client will press play, hear nothing, and question whether the team understands the product. 8. **The braided text is hand-coded, not generated.** The prototype hardcodes one braided passage about street food. This is fine for a static demo, but it means the prototype can only demo one topic. If Daniel clicks "Politics & Persuasion," he'll get... the street food session. Every topic routes to the same session content. This should at minimum be flagged visually ("demo content" label) or the non-functional topics should be disabled. 9. **The "SpoKen" logo treatment is confusing.** The logo renders as two rows: "S p o" / "K e n" with mixed sizing. It looks like a loading glitch, not a brand mark. The capital S and K with lowercase letters reads as broken kerning. If this is intentional brand design, it needs to be more deliberate. If it's a prototype placeholder, it signals low craft to the client. 10. **Mobile is broken.** The vocab panel hides entirely on <600px (`display: none`). The session card's responsive override removes the `translateX(-50%)` centering but positions it at `left: 16px` without `transform: translateX(0)`. The session card becomes left-aligned on mobile, and the active state `transform: translateY(0)` doesn't include the `translateX(-50%)` used on desktop. This means the card jumps horizontally during the animation on exactly-600px viewports. 11. **No custom topic input works.** The "Enter your own topic" button has no onclick handler. It's a dead button on a product where custom topic input is the primary differentiator ("excitement filter"). 12. **The breadcrumb pills are functional but fragile.** They're built with innerHTML and inline onclick handlers. More importantly, clicking the topic breadcrumb calls `backToMap()` but also sets `state.argument = null` β€” this is correct, but clicking it while in a session doesn't close the session card first. The overlay persists without the session card. 13. **"Hear yourself back" and "Speech Work" special cards on Z2 are non-functional.** They have no onclick handlers. These are premium features in the PRD and dead elements in the prototype. The client will click them. 14. **No etymology sidebar, no idiom layer, no joke.** Three of the PRD's most distinctive features are completely absent from the prototype. The session flow goes Hear β†’ Read β†’ Speak β†’ Refine β†’ End. That's 5 of 7 steps. The missing steps (vocabulary encounter is folded into the end card, etymology and joke are gone) are the ones that give the product personality. 15. **The "Hear yourself back" comparison in Stage 5 is fake math.** It shows "First attempt" vs "This attempt" with different waveform SVGs, but both are static illustrations. In a real demo, these should at minimum look identical (since there's only been one session). Showing a "better" waveform for the second attempt implies AI evaluation β€” which contradicts the PRD's "no grading" philosophy. 16. **Color system is incomplete.** The PRD calls for "same typeface, different color" for braiding. The prototype uses `var(--pt): #C0392B` (a red) for Portuguese. But this same red is used for the mic button, the waveform, the Dial fill, and the stage labels. Portuguese text competes visually with UI chrome. The language color should be distinct from the interaction color. 17. **No favicon, no meta description, no OG tags.** This is going on a staging URL that will be shared with a client. The browser tab says "Spoken β€” Language V2" which is fine, but the missing OG tags mean any link preview will be blank. --- ## PRIORITY FIX LIST Ordered by impact on client perception and product fidelity. ### 1. ADD REAL AUDIO (or convincing placeholder) **Impact:** Critical β€” this is a listening-first product with no audio **Fix:** Embed a 30-second ElevenLabs-generated Portuguese passage about the street food topic. Wire the play button to an `