Vibecoding Is Here - How AI Is Changing How We Build Online preview image

1. What Is Vibecoding?

  • Vibecoding is the approach of giving instructions to coding agents in natural language and generating desired outputs.
  • Users provide simple feedback like "I like this" or "this isn't great," and the agent modifies the work accordingly.
  • "Vibecoding enables people without technical backgrounds to build things through code."
  • Both technical and non-technical people are using vibecoding, particularly the approach of generating, modifying, and deploying code through LLMs (Large Language Models).

2. Key Characteristics of Vibecoding

(1) How Technical and Non-Technical Users Use It

  • Technical users: Moving beyond writing code from scratch to describing desired features to LLMs, generating code, then modifying and deploying.
  • Non-technical users: Creating apps or websites through vibecoding without any coding experience.
    • Example: Starting with a simple request like "Make me an app that tracks whether my dog has been fed."
    • "We're now in an era where people without technical backgrounds can create their own custom software."

(2) Vibecoding's Scalability

  • Vibecoding goes beyond simple static website creation to enable dynamic web application development.
  • Example: Building an app where users enter books they liked, it calls the OpenAI API to provide recommendations, stores results in a database, and includes Google authentication for login.
    • "We can now build true dynamic web applications, not just simple websites."

3. Key Tools and Companies Supporting Vibecoding

(1) Key Tools

  • Cursor: An IDE-based tool for developers that assists in writing and modifying code.
  • Replit, Bolt, Lovable, Vzer: Text-based web application creation tools for both non-technical and technical users.
    • "They offer an intuitive UI with a prompt window on the left and the generated interface on the right."

(2) Company Growth

  • Some companies achieved millions of dollars in ARR (Annual Recurring Revenue) within months of launch.
    • Example: Bolt and Lovable each reached 10-20M ARR within just 2 months.
    • "Demand for these tools is enormous, especially providing great value to people building something for the first time."

4. Technical Foundations of Vibecoding

(1) Why Is Vibecoding Possible Now?

  • LLM advances: Transformer architecture and vast data (especially web frameworks and JavaScript-related data) have significantly improved model performance.
    • "Since most modern apps are JavaScript-based, LLMs are very proficient at generating these apps."
  • Mature web development environment: Full-stack apps based on JavaScript and TypeScript have become mainstream, making it easier for agents to verify and execute code.

(2) How Vibecoding Works

  • Code generation and execution environment:
    • LLMs generate code based on user prompts.
    • Browser or server execution environments provide preview of results.
    • Various components like databases, authentication, and caching can be integrated.
    • "You no longer need to build a payment system like Stripe from scratch — just add it as a component."

5. Limitations and Areas for Improvement

(1) Current Limitations

  • Issues with complex apps:
    • As apps grow larger, generated code may conflict with existing code or break certain features.
    • "Adding one design element often breaks the authentication feature."
  • LLM over-optimism:
    • "AI always says 'I can solve this now!' but on the 40th attempt, the problem still isn't fixed."

(2) Improvement Directions

  • State management:
    • Better systems needed for managing state across authentication, databases, and caching.
  • Code verification:
    • Strengthening test coverage and code correctness verification.
    • "The next step is verifying that generated code actually works correctly."

6. Vibecoding Use Cases

(1) Individual Users

  • "App for One": Creating personalized custom apps.
    • Examples: Plant watering tracker app, custom fairy tale generator for kids.
    • "You can now easily build apps for just one person."

(2) Small Businesses

  • Marketing agencies and freelancers completing projects faster and cheaper.
    • Example: Projects in the $1,000-$2,000 range are now economically feasible.
    • "More people are using vibecoding tools instead of Squarespace or Wix."

(3) Enterprise

  • Technical users leverage tools like Cursor for more complex projects.
    • "Enterprises are also boosting productivity through vibecoding tools."

7. The Future of Vibecoding

(1) Tool Evolution

  • User segmentation: Tools will become more specialized by skill level.
    • Example: Simple app creation tools for non-technical users vs. advanced prototyping tools for engineers.
  • Design integration: Adding fine-grained design controls like Figma.
    • "Text prompts alone have limitations, so more intuitive design tools are needed."

(2) New Interfaces

  • Diverse prompt methods:
    • Beyond text, using screenshots, images, and personal data as prompts.
    • "Upload a screenshot of my Instagram page and make me a website that matches this vibe!"

(3) Pricing Models

  • Currently usage-based pricing (per token) dominates.
    • But value-based pricing is possible.
    • "An e-commerce site generating millions in revenue and a personal webpage should be priced differently."

8. The Significance of Vibecoding

  • "We've entered an era where not just the less than 1% of the population who can code, but anyone can build something through code."
  • Vibecoding goes beyond making coding easier — it's a tool that enables more people to participate in creation.
  • More tools and features will continue to emerge, and personal custom software creation like "App for One" will become increasingly mainstream.

"Vibecoding isn't just a technological innovation — it's an important tool leading the democratization of creation."

Related writing

Related writing