One-Shot Learned to See: Art Direction Ships in v3.4
👁 The problem: One-shot-scripts had zero guidance for visual/creative work — it built from imagination, then caught problems too late in Phase 7
🔧 The fix: Added art direction research, visual build guidance (UI, 3D, 2D, animation), responsive testing, accessibility checks, and expanded checklists across 6 phase scripts
🎨 The proof: Scroll down. The interactive nebula below was built using the v3.4 pipeline. Art direction first, progressive build, screenshot verification at every layer
📦 Bonus: v3.5 split 4 oversized files into modular companions — every file now under 200 lines
- Palette locked
- Assets pulled
- Structure grown
- Polish applied
Build Stats
| Metric | v3.4 (Visual Upgrade) | v3.5 (Architecture) |
|---|---|---|
| Tool | one-shot-scripts (plan mode) | godmode-evolution |
| Time taken | 33m 48s | 23m 4s |
| Total tokens | ~12.1M | ~8.7M |
| Estimated cost | ~$26.84 | ~$17.18 |
| Composite score | 0.93 (adjusted) | Shipped (evo verdict) |
| Verdict | Shipped | Shipped |
| Files modified | 7 | 8 (4 modified + 4 new) |
The Problem We Wrote About Last Week
In One-Shot Can't See, we documented a fundamental failure: five iterations of procedural 3D geometry, every one technically correct, every one visually identical.
The root cause was clear. Phase 2 (Build) had zero visual guidance. No instruction to define a color palette before coding. No rule to screenshot during construction. No checklist for 2D art, animation timing, typography, or responsive breakpoints.
Think of it like this: Imagine hiring a builder to renovate your house, but the only quality check happens after they've finished and left. By then, the wrong tiles are grouted, the paint is dry, and fixing anything means ripping out finished work. That's what Phase 7 was doing — inspecting too late.
What We Built: Visual Guidance Across Every Phase
The fix wasn't a single new phase. It was visual awareness woven into the phases that already existed. Six scripts got new sections, all gated with "when task has visual output" so non-visual tasks don't pay the overhead.
↓
🎨 Phase 2: Visual build guidance — establish direction first, asset-first workflow, progressive layers, screenshot every major addition
↓
🧪 Phase 3.6: Visual testing — responsive screenshots at 375/768/1280px, contrast ratios, keyboard nav, cross-state verification
↓
🛡 Phase 4: Visual hardening — render perf, cross-browser, retina, dark mode, reduced motion, WCAG AA
↓
📋 Phase 7: Expanded checklists — 2D art, animation, typography, responsive, accessibility (5 new sections)
↓
✨ Phase 8: Visual polish — asset optimization, CSS cleanup, animation refinement, spacing consistency
Phase 2: The Biggest Change
Phase 2 (Build) had the largest gap. It went from zero visual guidance to a comprehensive "Visual / Creative Tasks" section with four sub-tracks:
UI / Web
Mobile-first, CSS Grid/Flexbox (never absolute positioning for layout), fluid typography with clamp(), consistent spacing scale, hover/focus/active states for every interactive element.
3D / WebGL
Build order: camera → lighting → materials → geometry → environment → interactivity. Test each model individually before composing the scene.
2D / Canvas / SVG
Art style consistency (line weight, corners, palette). Pixel art gets grid rules. SVGs use viewBox. Canvas handles devicePixelRatio for retina sharpness.
Animation & Motion
Purpose before motion. Easing curves (never linear for UI). 100–200ms for feedback, 200–400ms for transitions. prefers-reduced-motion is mandatory.
Before any of this, the protocol now requires establishing a visual direction first: color palette (max 5–6 colors), typography (1–2 font families), visual style name, and spacing system.
v3.4: Art Direction First
Define palette. Source assets. Build structure → content → styling → polish. Screenshot at every layer. Catch "invisible at game scale" after 10 lines, not 300.
Pre-v3.4: Code From Imagination
Write all the visual code blind. Run syntax check. Take one screenshot at the very end. Discover everything looks wrong. Loop 4 times to fix it.
Phase 7: Five New Checklist Sections
Phase 7's visual audit already covered layout, navigation, 3D/game, and data visualization. v3.4 added five sections that were completely missing:
| New Section | What It Checks |
|---|---|
| 2D Art / SVG | Style consistency, color palette cohesion, viewBox scaling, retina canvas, pixel art integrity |
| Animation & Motion | Purposeful motion, easing curves, duration ranges, no layout shift, prefers-reduced-motion |
| Typography | Clear hierarchy, 16px minimum body text, line-height 1.4–1.6, fonts loaded (no FOUT/FOIT), 45–75 char line length |
| Responsive Design | Works at 375px, 768px, 1280px+. No horizontal scroll. Touch targets 44×44px minimum. |
| Accessibility | WCAG AA contrast (4.5:1 text, 3:1 UI). Focus indicators. No color-only info. Labeled interactive elements. |
The Proof: Interactive Nebula
The piece below was built using the v3.4 pipeline. Art direction first (Godmode green palette, particle-based nebula, interactive mouse response). Progressive build (stars → nebula core → particle trails → glow → interaction). Screenshot verified at each layer. Move your mouse over it.
What you're seeing: 3,000 particles driven by noise-based flow fields, layered glow compositing, mouse-reactive turbulence with click-to-burst, retina-aware rendering, and prefers-reduced-motion support — all the techniques the v3.4 pipeline now teaches.
The Gallery: Five Art Styles, One Pipeline
Each piece below was built with the same v3.4 protocol. Different art direction, different technique, same process: define the visual target first, build in layers, screenshot at each step. Hover to interact.
Same pipeline, five styles: Generative particles, ocean waves, per-pixel raytracing, 3D wireframe, procedural botany, and retro pixel art. Each one started with art direction (palette, style, reference) before a single line of rendering code was written.
v3.5: The Architecture Tidy-Up
The visual upgrade pushed four files over the 200-line limit (the threshold where Claude Code starts skimming instructions). v3.5 split each into a parent file + companion, keeping all content intact.
| File | Before | After | Split Into |
|---|---|---|---|
SKILL.md | 204 lines | 181 lines | run-reporting.md |
phase-7-visual-audit.md | 275 lines | 183 lines | screenshot-capture.md |
delivery.md | 239 lines | 183 lines | outcome-logging.md |
scoring.md | 221 lines | 167 lines | rubric-relevance.md |
Total file count went from 19 to 23. Maximum file size dropped from 275 to 183. Zero content was deleted — everything was extracted into companion files referenced inline by their parents.
The Bigger Picture
This upgrade came from a real failure. We watched one-shot-scripts produce technically flawless code that looked terrible on screen. The fix wasn't "try harder" — it was structural: teach the protocol what good visual output requires before code gets written.
The shift mirrors how professional studios work. Concept art before modelling. Wireframes before code. Style guides before components. v3.4 brings that discipline to AI-driven development.
The lesson: Execution protocols that treat visual tasks like logic tasks will produce code that compiles and looks terrible. Art direction isn't decoration — it's the difference between "renders without errors" and "ships to production."
Get the Protocol That Sees What It Builds
One-shot-scripts v3.5 — visual art direction, expanded checklists, modular architecture. Zero rework.
Get Godmode Read More