AI Coding
AI Coding Workflows Guides and Resources
Build a delivery workflow with Claude Code/Codex practice, Gemini CLI tools, frontend tests, and Vibe Coding for marketers.
AI coding begins with understandable requirements and ends with verifiable delivery. This collection links production Claude Code practice, Codex comparisons, Gemini CLI tooling, and Vibe Coding guides for marketers. Choose by task: start small tools with requirements and acceptance, examine tool boundaries for code changes, and validate frontend interactions under real viewport conditions rather than relying on generated screenshots.
Articles and supporting resources
Use the titles and summaries to find the question closest to yours. Resource entries lead to their preview and download pages.
- Article Good LCP, Users Still Waiting: A Startup Performance Case Study from Our Real-Time Voice Web Tool Our real-time voice web tool had a 416 ms median LCP, yet the actual tool took 5.5 seconds to appear. Here is how we server-rendered the full workspace, moved service checks to the background, and cut tool appearance to 293 ms, with honest measurement caveats.
- Article Should Codex Users Switch to Hermes? My Deep Dive with GPT-5.4 Pro Don't rush to migrate from Codex to Hermes. Instead, treat them as a manager-worker duo, leveraging a hybrid architecture for better scheduling and coding.
- Article Browser AI Sidebars Are Eating Your Buttons: Lessons from Creem Browser AI sidebars often squeeze web layouts, hiding critical buttons. Learn why this happens and get four tips to optimize your responsive UI for users.
- Article Agentic Engineering Patterns: When Coding Becomes Cheap, Guardrails Are the New Ticket As AI lowers coding costs, engineering guardrails become the core competitive edge. Explore how Agentic Engineering Patterns integrate AI into workflows.
- Article Ladybird Ports LibJS to Rust in Two Weeks with Claude Code | Uncle Fruit's AI Daily Ladybird successfully ported LibJS to Rust in just two weeks using Claude Code and Codex, highlighting the power of AI-assisted engineering in code migration.
- Article Why 99% of Today's Hot AI App Generators Will End Up as Adult Electronic Toys Nine out of ten AI app generators will become toys because they can't solve commercial software's complexity, deployment gaps, and product logic challenges.
- Article Codex Deep Dive: Silent Assassin or High-Maintenance Waifu? A $200/Month User's Field Report Deep review of GPT-5.2 Pro and Codex, revealing Codex's stable execution versus Claude Code's fast interactivity, plus the Atlas+GPT workflow.
- Article GPT-5.2 Pro Frontend Test: Is 30-Minute Reasoning Worth $100+ Pricing? Hands-on testing GPT-5.2 Pro's frontend reproduction capabilities, revealing the staggering reasoning time and efficiency bottlenecks behind its premium price.
- Article Gemini 3.0 Pro Is Finally Here — Quick Test, UI Designers Beware? By Mr. Guo For vibe coders and indie hackers without design chops, the design handoff is often the biggest blocker—long before you worry about Gemini’s backend...
- Article Google Code Wiki Review: A Developer's Take on Grok and Code A hands-on Google Code Wiki review covering codebase documentation, Gemini context, diagrams, repository coverage, and its practical value alongside Grok.
- Article Gemini 3.0 Pro Is Here: A Quick Test That Should Worry UI Designers Gemini 3.0 Pro demonstrates impressive frontend CSS drawing and animation capabilities in stylized UI reproduction tests, signaling potential disruption to UI designers' workflows.
- Article Grok Is Busy Explaining the Universe, Google Code Wiki Helps You Understand Code First Google Code Wiki uses AI to automatically explain codebases, solving the developer pain point of reading 'legacy code' — value far exceeding Grok's grand narratives.
- Article Code as Music: A Musician's View of Software Engineering, Product Management, and AI Collaboration Musical aesthetics and software engineering share underlying logic — AI helps musicians transfer structural thinking to code, enabling efficient 'Vibe Coding.'
- Article Claude Code + Playwright MCP Extension Cured My Screenshot Shaky Hand Syndrome Using Claude Code with Playwright MCP extension to automate processing large volumes of infographic card screenshots — finally free from manual screenshot hassles and jitters.
- Article Vibe Coding for Marketers (Part 2): From Excel to Python — Become AI's Data Chef Learn Python and Pandas to efficiently consolidate messy data, providing high-quality 'fuel' for AI to achieve deep data analysis and attribution.
- Article Vibe Coding for Marketers (Part 1): Ditch Dev Queues, Build Your First Growth Tool Master Vibe Coding to escape dev queues. Use natural language to command AI and build your first growth automation tool with your own hands.
- Article Why Every Marketer and Ops Professional Should Learn Vibe Coding Vibe Coding empowers marketers and ops professionals to break free from resource dependency, solve real problems with lightweight code, and become full-stack growth talent.
- Article 4 AI Squad Tactics That Transformed Claude Code from 'Outsourced Junior' to 'Full-Stack Tech Partner' Master four Claude Code 'AI squad tactics' to upgrade AI from code outsourcing to a reliable tech partner through systematic collaboration.
- Article How to Use Claude Code in China: Three Paths — One Will Suit You How to reliably use Claude Code from China? This article provides three paths: stable proxy, self-managed environment, and open-source alternatives.
- Article How I Upgraded Claude Code from 'Toy' to 'Production-Grade' Development Workhorse [Best Practices] Master the systematic workflow for upgrading Claude Code from toy to productivity workhorse — build an external brain and precise planning to achieve high-quality, maintainable engineering code output.
- Article Learning Agent Development with Google Gemini CLI (Part 4): How Does Gemini CLI Scrape Data? Learn to use Gemini CLI's google_web_search and web_fetch tools, mastering how to safely and efficiently let AI Agents scrape and process real-time web data.
- Article Learning Agent Development with Google Gemini CLI (Part 2): How Does Gemini CLI Read and Modify Your Code? Explore how Gemini CLI safely and efficiently reads, understands, and modifies your code through layered perception and precise replacement tools.
- Article Learning Agent Development with Google Gemini CLI (Part 1): How Is Gemini CLI's Sandbox Implemented? Explore how Google Gemini CLI implements cross-platform sandboxing through Docker and native macOS technology, ensuring system security when AI Agents execute commands.