Building with AI: What I Learned Creating a Web with Claude Code

By Feng Qiu
August 31, 2025
AI ProgrammingUser ExperienceProduct Management
Article image

Last week, I built a complete AI-powered English writing assistant called Essayly using Claude Code.

The journey from initial idea to live product completely transformed how I think about AI-assisted development. Here's what I discovered along the way.

AI Programming: Powerful, But Not Magic

There's something intoxicating about AI's ability to generate a "complete" product from a single sentence. It's tempting to think: just throw your rough idea at AI, let it handle 90% of the work, then polish the remaining bits that don't quite match your vision.

Reality hits hard. What often happens is AI handles 90% of the surface-level work while the final 10% consumes 90% of your actual effort. Worse yet, you might discover later that insufficient upfront thinking led to fundamental flaws in your technical architecture, forcing you into endless firefighting and patching—or starting over entirely.

I've been there. Back in April, I built a browser extension with AI assistance, writing zero documentation and refining requirements purely through conversation. The early progress felt amazing, but the later stages became a nightmare of constant rework. What should have been a simple plugin took three weeks to complete.

AI programming is like construction: it can quickly erect the building, but poor foundation work means discovering structural problems only after everything's built.

Documentation First, Code Second

Learning from that painful experience, I invested heavily in preparation before touching any code for Essayly. I created comprehensive documentation covering:

  • Product Requirements: Market pain points, user personas, user stories, complete page specifications, functional modules, core interactions, and information architecture
  • UI Design Specifications: Visual designs for every interface and component

While writing these docs, I obsessed over eliminating ambiguity. Given natural language's inherent fuzziness, I relied heavily on sequence diagrams, flowcharts, and pseudocode. For complex data structures, I included concrete examples.

Article image

The UI specifications proved especially valuable. Since Claude Code understands images, referencing visual designs for layout and styling requirements worked far better than trying to describe them in words.

Article image

To ensure completeness, I had AI review my documentation twice, asking: "Is this ready for development? What details are missing?" This process revealed numerous blind spots: missing edge case handling, incomplete error strategies, vague performance metrics, and unclear security requirements.

Architecture Decisions Require Deep AI Collaboration

With documentation complete, I resisted jumping straight into coding. Instead, I engaged AI in extensive technical discussions. I shared project context, user profiles, user journeys, core application flows, and future expansion plans. Then I asked AI to evaluate different architectural approaches:

  • Frontend stack: Next.js vs Nuxt.js vs Vite+React
  • Backend architecture: Serverless vs traditional servers vs full-stack frameworks
  • Data storage: Static files vs relational databases vs NoSQL
  • AI integration: Direct API calls vs proxy services vs local deployment

Our final architecture embodied key principles: desktop-first responsive design, single-codebase multi-platform coverage, privacy-first AI integration, and balanced cost-effectiveness with scalability.

AI then generated comprehensive documentation:

  • Database Design: Table structures, field definitions, indexing strategy, security policies
  • Technical Architecture: Technology rationale, design principles, performance targets, scaling plans
  • API Specifications: RESTful design patterns, request-response formats, error handling, security measures
  • Development Guidelines: Environment setup, coding standards, testing approaches, deployment procedures
  • Component Specifications: UI component standards, styling guidelines, interaction patterns
  • User Flow Logic: Frontend state management and event handling details
  • Production Checklist: Systematic pre-launch verification, performance benchmarks, security validation

Delightful Surprises During Development

Once development began, Claude Code exceeded my expectations in unexpected ways.

AI fills gaps you didn't even know existed. When I asked for a "back-to-top button," Claude delivered the basic functionality plus scroll throttling optimization, smooth fade animations, multilingual aria-labels, and mobile touch enhancements. I never mentioned these details, but AI applied industry best practices automatically.

Edge case coverage surpasses human thinking. For API key management, I only considered the happy path: input → validate → save. Claude proactively handled format validation errors, network failure retries, mid-operation cancellation state resets, and privacy-focused data clearing. This thoroughness dramatically improved code robustness.

Code consistency rivals the best human developers. Across 3,500+ lines of code, naming conventions, commenting styles, and error handling patterns remained remarkably consistent—as if written by a single, experienced developer. Traditional team development rarely achieves this level of uniformity.

Training AI to Get Smarter

Development inevitably hits roadblocks where AI initially struggles. Rather than switching approaches immediately, I developed a systematic problem-solving framework.

Real example: During topic modal development, AI couldn't resolve mysterious whitespace appearing on text's right side. I asked AI to analyze from multiple angles: "From CSS layout perspective, what could cause this? From text rendering perspective? From browser compatibility perspective?"

AI listed dozens of possibilities. We methodically tested each one until discovering the root cause: text display mode. Adding display: inline solved it instantly. The crucial step: I asked AI to summarize the problem phenomenon, root cause, solution method, and general principles.

This creates a learning feedback loop. I maintain a file in the project root documenting development lessons: CSS troubleshooting workflows, component design best practices, error handling patterns. Over time, this accumulated rich development wisdom. Before each new feature, AI reads this file and applies established standards. Result: AI makes fewer repeat mistakes and produces higher-quality code.

Precise Communication Beats Vague Requests

Early AI collaboration attempts involved vague instructions like "make a nice button" or "optimize performance," leading to frequent misunderstandings. I learned to be ruthlessly specific:

  • Instead of "make a modal": "Create a fixed 80vh modal with tab navigation and Markdown rendering"
  • Instead of "optimize loading": "Add pagination and caching to topic list API, targeting sub-2-second first-screen loads"
  • Instead of "fix bug": "Resolve mobile navigation menu failing to auto-close after selection"

Claude Code's @ file referencing proved invaluable when used strategically: @ relevant components when discussing functionality, @ problematic files when debugging, @ multiple documents when making architectural decisions.

Real case: "Reference @TopicModal.tsx implementation to add similar mobile menu functionality to @Navbar.tsx." AI immediately grasped the pattern without requiring detailed explanations.

Another key technique: break complex tasks into discrete steps. For multilingual support, instead of requesting "full internationalization," I sequenced: create translation file structure → implement language switcher → replace hardcoded text page-by-page → add language memory. Verifying each step prevented massive rework later.

AI as Its Own Quality Auditor

After completing features, I established a three-round AI review process:

  • Functional completeness: "Does this component satisfy all requirements?"
  • Code quality: "What improvements are needed for performance, security, and maintainability?"
  • User experience: "Is this interaction sufficiently user-friendly?"

Real example: Post-API key component implementation, AI's self-audit caught missing input validation (security), absent loading states (UX), and vague error messages (usability). It then proactively enhanced these aspects. This self-review proved more thorough than manual inspection.

For significant technical decisions, I'd probe deeper: "Why this implementation? What alternatives exist? What are the trade-offs?" When choosing internationalization approaches, AI explained preferring custom hooks over react-i18next: smaller project scope doesn't need complex plugin ecosystems, custom solutions offer lighter bundles and easier customization for specific needs.

Synchronized Documentation Prevents Technical Debt

Code changes without corresponding documentation updates create maintenance nightmares. Mid-project, I discovered API documentation lagging behind implementation, costing hours of debugging time.

I developed synchronization habits: API parameter changes → update API_REFERENCE.md, component interface changes → update COMPONENT_SPECS.md, user flow adjustments → update USER_FLOW_LOGIC.md.

With Essayly supporting five languages, multilingual documentation maintenance demanded extra vigilance. My approach: establish checklists ensuring all language versions stay consistent with every update.

Knowing When to Trust vs Question AI

Project experience revealed clear patterns:

AI technical judgment proves generally reliable. Architecture recommendations typically withstand scrutiny: choosing Next.js over vanilla React, Tailwind over styled-components, Serverless over traditional backends. These decisions validated through real-world testing.

Business logic requires human oversight. AI may lack deep context about specific domain requirements. For API key management, AI initially suggested server-side storage, but I insisted on local storage for privacy reasons—this type of business judgment needs human decision-making.

UI details demand iterative refinement. AI generates functionally complete interfaces, but user experience nuances require continuous polishing: animation timing, hover effects, color harmony. These elements need multiple optimization rounds to achieve excellence.

Article image

The Ultimate Insight

My biggest takeaway: clear communication has become the defining skill of the AI era. Whether writing requirements documents, designing architectures, or conversing with AI, success hinges on explaining things precisely.

In traditional programming, the core skill was "translating requirements into code." In the AI era, it's become "articulating requirements clearly enough for AI to understand." This seems simpler but actually demands higher standards for expression, logical thinking, and domain expertise.

Technology evolves, tools change, but the ability to communicate clearly and accurately remains timeless. In an AI-powered world, this might just be the most valuable skill of all.

Article image

Share this article