--- title: "Vibe Coding Experience Sharing" description: "After returning to work, I gave an internal presentation sharing how the team used Vibe Coding to quickly build an AI reporting system, a custom project management tool, and an MGM member referral system, as well as the concerns and reflections on AI development." canonical_url: "https://blog.markkulab.net/en/post/ai-dev-experience-sharing" author: "Mark Ku" author_url: "https://blog.markkulab.net/en/author/mark-ku" site: "Mark Ku's Tech Notes" date_published: "2026-02-28 10:00:00 +0800" category: "AI" tags: ["ai", "vibe-coding", "nextjs", "langchain", "ai-agent", "developer-experience"] language: "en" license: "CC BY 4.0" license_url: "https://creativecommons.org/licenses/by/4.0/" attribution: "when reusing or quoting, credit the author and link back to the original" --- # Vibe Coding Experience Sharing > **TL;DR** — 歡迎收聽 Mark 的 Tech Insights，我是璦廷。當寫程式從「幾週」縮短到「幾小時」，軟體開發的未來會變成什麼樣子？今天帶您探討 Vibe Coding 的實戰經驗。 過去我們設計介面讓人操作，現在則是設計工作流程，讓人工智慧幫忙完成任務。讓我們來看看團隊的成果：透過 Vibe Coding，我們快速打造了自然語言報表系統，業務開口問就能即時獲得圖表；另外還有合規廣告產生器與客製化專案管理工具，大幅降低了開發門檻。 這個重點值得注意：當模型人人都能用，企業真正的護城河其實是「專有數據與業務邏輯」。為了安全，團隊也嚴格守住「只讀取，不刪改」的黃金法則，確保核心資料不被破壞。 雖然人工智慧能帶來十倍的開發速度，卻也可能累積十倍的維護債，水面下的架構設計才是成敗關鍵。總結來說，速度不等於品質。當產出變得輕而易舉，我們更該思考：如何精準定義問題，才能真正發揮科技的價值？ ## Introduction After returning to work, I gave an internal presentation at my company about my experiences with AI development. Honestly, software development has been changing incredibly fast these past two years. So fast that sometimes it's not just about learning new technologies; it's about **a complete shift in mindset**. I'm still adapting to this wave myself. Over the Lunar New Year holiday, I did some reading and observed the current industry trends, and I've started to get a feel for things. This post is a summary of my presentation, including projects our team actually built using Vibe Coding and some of my reflections on AI development. ## From Developing Software Tools to Developing AI Workflows What did we used to do? We built forms, created buttons, and designed user flows for "people" to use systems. But the future might not look like that. ``` ┌──────────────────────────────┬──────────────────────────────┐ │ The Old Way │ The New Way │ │ (SaaS Application) │ (AI Agent Application) │ ├──────────────────────────────┼──────────────────────────────┤ │ │ │ │ 🖥️ 依靠訂閱時長收費 │ 🤖 依靠完成成果收費 │ │ │ │ │ 📋 逐步操作表單與按鈕 │ 🎯 描述目標與限制條件 │ │ │ │ │ 🔧 開發工具給使用者 (Tool) │ 📦 交付結果給使用者 │ │ │ (Result Deliverer) │ │ │ │ └──────────────────────────────┴──────────────────────────────┘ ``` > 💡 The future of software is no longer just about providing features to operate, but about delivering results to the user. It's become incredibly easy to write code and build prototypes with AI. Things that used to take two weeks of discussion and three meetings can now be whipped up overnight. So, the value of software in the future might not be just "building features," but designing Agents and Workflows to let AI get the job done for you. ## Our Team's Practical Results with Vibe Coding In my presentation, I showcased several systems our team rapidly built using Vibe Coding. Each is a real-world example of turning an idea into a usable prototype in a short amount of time. > 👉 We can turn business ideas into prototypes in a matter of "hours," not "weeks." ![Rapidly landing team creativity — Vibe Coding lets everyone become a product designer](https://blog.markkulab.net/content/markku/posts/ai-dev-experience-sharing/images/vibe-coding-projects-overview.png) ### 🤖 Case 1: An AI Reporting System with Natural Language Support This was the one that impressed me the most — **Ask, don't Query**. Previously, to see a report, a sales rep or PM would have to ask an engineer, "Can you pull last month's data for me?" and the engineer would then write SQL to fetch it. Now? They can just ask directly in natural language. **Mindset Shift**: We originally thought this would require complex dashboard development, but it turned out we could achieve it simply by integrating with a large language model API. ![AI Report Generator — Query the database with natural language to generate statistical charts in real-time](https://blog.markkulab.net/content/markku/posts/ai-dev-experience-sharing/images/ai-bi-report.png) This system achieved the following: - 🗣️ Directly query the database using natural language to get real-time statistical charts and analysis - 📊 Automatically convert results into tables, bar charts, line charts, and pie charts - 💰 Using Gemini 2.0 Flash, the monthly AI cost is less than 50 TWD > 👉 Breaking old paradigms, allowing non-technical staff (sales, PMs) to work without waiting for engineers. ### 🎨 Case 2: Compliant Graphic Ad Generator The marketing team often needs to generate ad copy and images that comply with regulations. Previously, marketing would write the content, legal would review it, and there would be a lot of back-and-forth revisions. The process was long. Now, with AI, you can just input the product name and description to automatically generate compliant graphic ads: ![Compliant Graphic Ad Generator — Input product information to generate compliant marketing materials with one click](https://blog.markkulab.net/content/markku/posts/ai-dev-experience-sharing/images/compliance-ad-generator.png) - Supports various content types (social media posts, ad copy, etc.) - Allows selection of industry, tone of voice, and target audience - **One-click generation of compliant graphics and text**, significantly shortening the marketing workflow ### 📋 Case 3: Custom Project Management Software Based on Azure DevOps We used the Azure DevOps API combined with Vibe Coding to quickly build a user-friendly, custom Kanban board. ![Custom Ticket Management Board — A user-friendly interface built on the Azure DevOps API](https://blog.markkulab.net/content/markku/posts/ai-dev-experience-sharing/images/custom-jira-board.png) Why not just use Jira? Because: | Comparison | Using Jira Directly | Building Our Own Board | |--------------------|-------------------------|--------------------------------| | Licensing Fees | 💸 Per user, per month | ✅ Significant savings | | User Experience | Feature-rich but complex | ✅ Optimized for team needs | | Customization | Limited | ✅ Complete freedom | | Development Time | No development needed | ⚡ Completed quickly with Vibe Coding | ### 🎁 Case 4: MGM Member Promotion System This system achieves efficient MGM (Member Get Member) rebates and settlements through unified member management and API integration. **Challenge**: Member data was siloed across different platforms, making integration difficult. **Solution**: Implemented Single Sign-On (SSO), integrated social accounts, and had each product call the MGM API for core functionalities. ![MGM Member Promotion System Architecture — Achieving efficient MGM rebates and settlements through unified member management and API integration](https://blog.markkulab.net/content/markku/posts/ai-dev-experience-sharing/images/mgm-architecture.png) The admin panel was also rapidly generated using Vibe Coding, resulting in clear logic that is easy to maintain: ![MGM System Settings — Manage system parameters like commission rates, rebates, and point rules](https://blog.markkulab.net/content/markku/posts/ai-dev-experience-sharing/images/mgm-settings.png) Features include: - Manage commission distribution rates - Set reward points for purchases and registrations - Manage point expiration dates We also provided a comprehensive product integration guide to allow other products to connect quickly: ![MGM Product Integration Guide — API Key authentication, idempotent design, unified response format](https://blog.markkulab.net/content/markku/posts/ai-dev-experience-sharing/images/mgm-integration.png) ### Non-technical Staff Can Also Develop the Backend The cases above share a common theme — **lowering the barrier to development**. With Vibe Coding + AI assistance, non-technical staff can participate in backend development and adjustments, no longer having to wait for engineers for everything. ## Tech Stack and Framework These projects uniformly adopt **Next.js** as the full-stack development framework: ![Tech Stack — Next.js + Node.js + Gemini Vertex + LangChain](https://blog.markkulab.net/content/markku/posts/ai-dev-experience-sharing/images/tech-stack.png) | Layer | Technology | Description | |---------------|-------------------------------|------------------------------------------| | Frontend | Next.js (React) | Lightweight, for rapid UI development | | Backend Logic | Node.js | Business logic processing | | AI Engine | LangChain | Agent + Tools + Memory | | Model | Gemini Vertex / Azure OpenAI | Flexibly switch between different models | ### Trade-offs - ✅ **Pros**: A lightweight full-stack framework that accelerates development - ⚠️ **Limitations**: Next.js's per-request lifecycle - ❌ **Not suitable for**: Heavy WebSockets or long-running tasks - 💡 To speed up development, we also purchased a paid theme. ## Where is Our Technical Moat? When AI makes development easier and everyone can build products quickly, where does the real competitive advantage lie? ![Technical Moat — We don't build models; we use cloud models + unique data to create barriers to entry](https://blog.markkulab.net/content/markku/posts/ai-dev-experience-sharing/images/tech-moat.png) We don't build models. We use cloud models + our unique data to create barriers to entry: - 🏰 **Top Layer: Proprietary Data & Fine-tuning** — Our industry data, compliance knowledge base, and business rules are things others can't replicate. - 🌥️ **Mid Layer: Cloud LLMs** — Cloud models like Gemini and Azure OpenAI are available to everyone, but *how* you use them is key. - 🏗️ **Foundation: Business Logic** — Years of accumulated domain knowledge and system integration experience. A deep understanding of the business is the bedrock. > 💡 Anyone can use AI models, but **proprietary data + business logic** is the real moat. ## Security Guidelines: How We Use AI with Confidence AI is smart, but we can't trust it completely. The team established a **Golden Rule**: > 🔒 No data write permissions. "Read-only, no modifications or deletions." ![Security Flow — LangChain pre-processing condition checks, with complete separation of read/write permissions](https://blog.markkulab.net/content/markku/posts/ai-dev-experience-sharing/images/security-flow.png) Two lines of defense: 1. **AI Action Request Validation** — Before the AI executes an action, we use LangChain to set up mandatory pre-condition checks. 2. **Separation of Read/Write Permissions** — Permissions are completely separated at the architectural level to prevent catastrophic actions like dropping databases and ensure core data security. This principle is crucial — no matter how smart the AI is, it should never have the ability to destroy your data. ## Engineering Professionalism in the Age of Vibe Coding Now that I've covered the benefits, let's talk about the parts that worry me more. > ⚠️ The biggest cost in software has always been maintenance, not development. AI can generate 10x the code, but it can also create 10x the maintenance debt. ![The Vibe Coding Iceberg Model — AI-generated code is the visible tip, while architecture, logic validation, and maintenance debt are the massive hidden concerns below the surface](https://blog.markkulab.net/content/markku/posts/ai-dev-experience-sharing/images/vibe-coding-iceberg.png) It's like an iceberg — the AI-generated code is the visible part above the water, but hidden beneath the surface are **architectural design**, **logic validation**, and **maintenance debt**. These are the factors that truly determine a project's success or failure. > 👉 Garbage In, Garbage Out — The AI won't question your logic. ### Speed ≠ Quality | Aspect | Benefits from AI | Potential Concerns | |----------------------|------------------------------------------|-----------------------------------------------| | Development Speed | ⚡ 10x faster | Technical debt could also be 10x greater | | Code Volume | Rapidly produces large amounts of code | Lack of test coverage | | Barrier to Entry | Non-technical staff can participate | Architectural design may lack a holistic view | | Prototype Validation | Can be done in a day | The road from prototype to product is still long | | Team Understanding | Reduces repetitive work | The team may not understand the AI-written code | This wave isn't just about a simple efficiency boost; it's a test of how engineers can control quality, design architecture, and avoid being consumed by the speed. To put it bluntly, the competition of the future might not be about "who codes the fastest," but about "**who can master AI, rather than be mastered by it**." ## Conclusion A few key takeaways I find important: 1. **From Developing Tools to Developing AI Workflows** — The future of software is no longer just about providing features to operate, but about delivering results to the user. 2. **Vibe Coding Actually Works** — Our team used it to build an AI reporting system, project management tools, and an MGM system, turning business ideas into prototypes in a matter of "hours." 3. **The Technical Moat is in Data and Business Logic** — Anyone can use AI models, but proprietary data is the real competitive advantage. 4. **Don't Skimp on Security Guidelines** — The Golden Rule: Read-only, no modifications or deletions. Even the smartest AI needs guardrails. 5. **The Most Expensive Part of Software is Maintenance, Not Development** — AI can produce 10x the code, but it can also create 10x the technical debt. This AI wave isn't going to stop. Everyone can build their own small tools. Anything is possible. 🚴 ## References - [Building a Natural Language BI Reporting System with AI Agents + LangChain](https://blog.markkulab.net/bi-agent-langchain-natural-language-sql) — A detailed technical deep-dive into the AI reporting system - [Anthropic - Building effective agents](https://www.anthropic.com/research/building-effective-agents) — A reference for agent design - [The End of Programming as We Know It](https://www.oreilly.com/radar/the-end-of-programming-as-we-know-it/) — O'Reilly's perspective on the future of programming --- ## About this article and its author Originally published on [Mark Ku's Tech Notes](https://blog.markkulab.net/en/post/ai-dev-experience-sharing) License: [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) — when reusing or quoting, credit the author and link back to the original ### About the author **[Mark Ku](https://blog.markkulab.net/en/author/mark-ku)** — Software Solution Provider - 10+ years senior software engineer, now an AI Builder - Focused on large-platform architecture — North-American e-commerce, AI SaaS subscription billing - Combining AI Agents and automation to build evolvable product foundations ### Free tools built by the author All of these are free to use: - [Free PDF Sign Tool](https://blog.markkulab.net/en/tools/pdf-sign): Online PDF sign tool — draw, type, or upload a signature, then drag, resize, and download. Everything runs in your browser; nothing is uploaded. - [VS Code Refactory](https://blog.markkulab.net/en/tools/refactory): Refactory is a VS Code refactoring extension: 34 actions plus a 37-rule code-smell inspection layer with a Code Health dashboard, across 18 languages, backed by 534 tests. It learns your repo's conventions: where interfaces live, where DI is registered, whether 'use client' belongs. It ranks files by git churn × complexity so you know what to fix first, and hands any smell to the Claude Code already on your machine. Free to use, and your source never leaves your computer. - [DB-Kit Database Manager](https://blog.markkulab.net/en/tools/db-kit): DB-Kit is a lightweight, cross-platform database manager built with Tauri + Rust + React. Manage MySQL, MariaDB, PostgreSQL, SQL Server, Oracle, SQLite, MongoDB, Redis, Kafka, Elasticsearch and RabbitMQ from one consistent interface: passwords encrypted in the OS keychain, SSH tunnels, full CRUD, a visual query builder, stacked multi-statement result sets, cross-connection data transfer and compare/sync, Excel / CSV import & export, visualized execution plans, ER diagrams, scheduled backups, SQL stress testing with p50–p99 latency percentiles, a 15-rule SQL review engine, Kafka message browsing with monitoring & alerts, a bilingual UI (Traditional Chinese / English), a built-in AI assistant (natural-language SQL, AI review and tuning advice) and the dbk CLI. Free and open source (MIT), with installers for Windows, macOS and Linux. - [VS Code Super Mermaid](https://blog.markkulab.net/en/tools/super-mermaid): Super Mermaid is a VS Code extension for beautiful Mermaid diagrams out of the box: auto-colored live preview, mouse pan & zoom, high-res PNG / SVG export, 21 templates and multiple themes. Free and open source (MIT). - [React Super Mermaid](https://blog.markkulab.net/en/tools/react-super-mermaid): react-super-mermaid is an open-source React component library: render beautiful Mermaid diagrams with a single , with built-in colorful / sketch themes, pan & zoom, in-diagram search, and high-res SVG / PNG export. Lightweight, SSR-safe, fully typed. Free and open source (MIT). - [Jira / Confluence Super Mermaid](https://blog.markkulab.net/en/tools/jira-super-mermaid): An Atlassian Forge app: write Mermaid syntax directly inside a Jira issue or a Confluence page and get flowcharts, sequence diagrams, state machines and Gantt charts. 11 diagram types, SVG / PNG export, light and dark themes, full CJK support. Runs on Atlassian: your diagrams live in your own site and the app calls no third-party service. Free, coming soon to the Atlassian Marketplace. - [Mermaid Live Preview](https://blog.markkulab.net/en/tools/mermaid-preview): Write Mermaid in your browser, see it render instantly, and share the whole diagram as a single link. No sign-up, nothing uploaded to a server, and mermaid.live share links work as-is. - [React Intl Phone Number](https://blog.markkulab.net/en/tools/react-intl-phone-number): react-intl-phone-number is an open-source React component: framework-agnostic and antd-free, with E.164 in/out, a searchable flag / country-code dropdown, configurable validation levels (strict / mobile-strict / loose), themeable CSS, and i18n — phone logic powered by google-libphonenumber. Lightweight and fully typed. Free and open source (MIT). - [Uptime Kuma Cluster](https://blog.markkulab.net/en/tools/uptime-kuma-cluster): Turn single-node Uptime Kuma into a highly available cluster: OpenResty + Lua smart load balancing, shared MariaDB state, health checks and automatic failover, plus cluster-management REST APIs. One Docker Compose command to start. Free and open source (MIT). - [Special Education](https://blog.markkulab.net/en/education): Learning materials crafted for special education students ### Daily podcasts - [Mark's Tech Insights — Daily AI News](https://blog.markkulab.net/en/category/tech-news): Daily curated AI and tech trends. Catch the latest developments via audio summaries — covering AI applications, software architecture, DevOps, and engineering practice. — RSS: https://blog.markkulab.net/feed.xml - [AI股市蝦聊](https://blog.markkulab.net/en/category/ai-stock-chat): Every trading day, an AI-analyzed take on the Taiwan stock market, delivered as a two-host conversation covering the session and the next-day outlook. — RSS: https://blog.markkulab.net/ai-stock-chat/feed.xml - [開源好物週報](https://blog.markkulab.net/en/category/open-source-weekly): A weekly two-host pick of free open-source tools surfaced from real Hacker News, GitHub, and Reddit buzz — what pain they solve and the fastest way to get started. — RSS: https://blog.markkulab.net/open-source-weekly/feed.xml ### Newsletter [Subscribe to the newsletter](https://blog.markkulab.net/en/subscribe) — Be the first to know about new posts. No spam, unsubscribe anytime.