OctoPlasm

AI Coding: From Vibe Coding to Context Engineering

Introduction

AI is transforming how we write code and build software. Instead of manually crafting every line, developers can now describe what they want and let AI generate the code. This ranges from "vibe coding", trusting an AI to build an app based on natural language descriptions, to advanced "context engineering" where we carefully feed AI the information it needs to succeed. In this blog, we explore the latest AI coding tools and techniques, organized by application area, with brief usage guides and technical references.

UI Development – Vibe Coding

Vibe coding refers to building software by describing it in natural language and trusting the AI to produce working code without manual edits.

Lovable.dev

  • Description: Conversational UI builder powered by AI.
  • How to use: Chat with the AI to describe app features. It integrates with Supabase, GitHub, and more.

Tempo.new

  • Description: Full-stack app generator with flowcharts, PRDs, and backend.
  • How to use: Define app features and tech stack, then refine visually or with AI prompts.

Bolt.new

  • Description: Turn Figma designs or prompts into running code in your browser.
  • How to use: Import UI designs or write a prompt, then modify in the built-in VS Code editor.

Replit AI

  • Description: AI coding assistant inside Replit’s online IDE.
  • How to use: Describe your app and let Replit’s AI create and deploy it.

Context Engineering

Context engineering is the practice of providing curated input (docs, examples, rules) to guide AI systems effectively.

Coleman's Intro to Context Engineering

  • Description: GitHub repo explaining why and how to apply context engineering.
  • How to use: Use templates like CLAUDE.md, INITIAL.md, and examples/ to persist context.

Claude Code Overview and Claude Memory

  • Description: Official docs on Claude’s memory and coding features.
  • How to use: Create and maintain CLAUDE.md files with project-specific instructions.

LangChain on Context Engineering

  • Description: Blog outlining strategies (write, select, compress, isolate) for effective agent context.
  • How to use: Feed agents a scoped and relevant context via scratchpads or memory.

Phil Schmid’s Context Engineering Blog

  • Description: Overview of real-world examples and best practices.
  • How to use: Use tools like Haystack, Weaviate, and metadata filtering to structure context.

YouTube: Context Engineering and LangChain Agents

  • Description: Visual walkthroughs of context workflows.
  • How to use: Follow coding demonstrations and apply project structuring tips.

Coding Agents & AI Configuration Files

These markdown files act as persistent configuration for AI tools.

AGENTS.md

  • Used by: OpenAI Codex CLI
  • How to use: Write coding rules or preferences. The CLI reads and merges them into prompts.

CLAUDE.md

  • Used by: Anthropic Claude
  • How to use: Provide coding conventions and setup in root directory or ~/.claude/.

GEMINI.md

  • Used by: Google Gemini CLI
  • How to use: Supply project info and constraints to customize Gemini’s behavior.

Automation Tools

n8n

  • Description: Open-source workflow automation with AI integrations.
  • How to use: Build visual flows using triggers, AI nodes, and logic for automation.

Web UI Agent

  • Description: Run AI agents in your browser to automate interactions.
  • How to use: Use AI to click and navigate UI automatically (e.g., for testing).

Generative AI – Images & Video

Midjourney

  • Description: High-quality image generation via prompt.
  • How to use: Use Discord to enter prompts and receive images.

DeepMind Veo

  • Description: Google’s text-to-video model (up to 60s video with audio).
  • How to use: Use via Vertex AI or integrated platforms.

Tencent HunyuanVideo

  • Description: Open-source video generator with large model.
  • How to use: Use API or notebook with prompt-based input.

VEED.io

  • Description: Online video editor with AI automation.
  • How to use: Upload media or prompt to create videos with captions and effects.

Envato VideoGen

  • Description: Converts static images and text into animated videos.
  • How to use: Input visuals and text, generate social-ready videos.

CapCut

  • Description: AI-powered video maker with avatars and scripts.
  • How to use: Enter prompts, let AI generate and edit a complete video.

OpenArt

  • Description: Free AI image generator with 100+ models.
  • How to use: Choose model and prompt to generate artwork.

LTX Studio

  • Description: AI film production from ideation to scenes.
  • How to use: Input story and let LTX build visuals and shot structure.

OpenAI Sora

  • Description: Experimental video generation model via ChatGPT.
  • How to use: Access via ChatGPT interface and input prompts.

Game Development

Rosebud AI

  • Description: AI-driven game creator.
  • How to use: Describe game idea and let Rosebud build a playable prototype.

Google AI Studio

  • Description: Chat-based interface to prompt Gemini/PaLM models.
  • How to use: Generate game scripts, dialogue, or assets via prompt.

Final Thoughts

AI tools are shifting from assistants to collaborators. By using vibe coding for quick ideas, context engineering for high-quality output, and automation for workflows, developers can achieve more with less friction. Add in generative media tools, and you have an entire product pipeline enhanced by AI.

The future of AI coding isn’t just writing code. It’s building entire systems, apps, and experiences with guidance, not grunt work.

#AI#VibeConding#ContextEngineering#GenAi