**The tech world has recently broken free from the stagnation of past years** — innovations now arrive one after another, carried on the winds of AI.
My own urge to create has surged, so in spare moments I’ve done some *“vibe coding”* on two small projects, aiming to push my personal boundaries in expression and form.
In this article, I’ll introduce these two projects and share my thoughts and experiences from their development — from the perspective of a “seasoned” programmer.
---
## 📂 Project Overview
### 🐦 Magpie
**Magpie** is the engine behind my personal link collection page — a lightweight bookmarking tool with an AI-powered backend.
Key features include:
- Fetches and extracts content directly from URLs.
- Automatically generates tags and categories.
- Can produce short reviews on demand.
- Includes an admin dashboard, shortcut integrations, and Chrome extension support.
Think of it as **an AI-enhanced Read-it-later service**.
---
### 🚢 AI Ship
A simpler project: **“AI Ship”** is a static page updated periodically with insights and real-world examples of using AI in development, life, and entertainment.
Highlights:
- Automatic translations of Chinese content into supported languages during builds.
- Light/dark mode toggling.
- Feed subscriptions and other essentials.
---
### 📎 Repository Links
Both projects are **open-source** on GitHub:
- **Magpie**
Requires a backend and database — with an optional Docker deployment provided.
[https://github.com/onevcat/magpie](https://github.com/onevcat/magpie)
- **AI Ship**
Static site — clone, edit, and deploy easily via Netlify, Vercel, or any static host.
[https://github.com/onevcat/ai-ship](https://github.com/onevcat/ai-ship)
Feel free to ⭐ star them, try them out, and share feedback.
---
## 🎨 Vibe Coding Experience
I first described *vibe coding* in a prior blog post: [A Month and a Half of High-Intensity Claude Code Usage — Reflections](https://mp.weixin.qq.com/s?__biz=MzIyNjM2MzQyNg==&mid=2247710463&idx=1&sn=a0ed00b63bb54b790c60d7f498d7af6c&scene=21#wechat_redirect).
### 💡 Key Insight
> If you want deep vibe coding and full AI potential, avoid being **too eager to intervene**.
> The fewer times a human developer manually writes code, the higher the eventual efficiency and quality.
---
### 📋 Importance of the Initial Plan
- **Crystal-clear requirements** reduce friction.
- A solid **initial outline** helps AI maintain coherence and avoid endless corrections.
---
### 🌐 Distribution & Monetization Layer
AI-driven workflows now integrate naturally with traditional development.
If you aim to **create and distribute broadly**, platforms like [AiToEarn官网](https://aitoearn.ai/) are worth exploring.
> AiToEarn: free, open-source, global AI content monetization platform
> Publish to multiple platforms — Douyin, Kwai, WeChat, Bilibili, Rednote, Facebook, Instagram, LinkedIn, Threads, YouTube, Pinterest, X — with analytics and AI model rankings.
For projects like **Magpie** and **AI Ship**, adding such a **distribution/analytics layer** is a natural next step to reach wider audiences.
---
## 🛠️ Project Development Approach
Both projects are **pure vibe coding**:
- Commands used: only `mkdir` at project start and agent start command (codex).
- Prompts: entirely via voice input + AI post-processing.
- Hardware: any device with terminal access — even tablet or phone.
Surprise outcome: My long-held dream of **using an iPad as a productivity tool** finally came true — via AI.
---
### 🚀 Paradigm Shift in Web App Creation
Traditional process — technical research → scaffolding → demos → requirements → iterative dev — is slower.
Instead, I now:
1. **Clarify requirements**
2. **Generate persistent documentation** (used as AI reference during development)
For simple projects:
- Plan → AI to-do list → AI executes items strictly.
For complex ones like **Magpie**:
- Multiple components: web frontend, API backend, Chrome extension.
- Early-stage planning: database design, SEO-friendly API proxy, homepage rendering, page designs.
- 2–3 hours with AI to explore each part.
- Cross-AI review to produce ~2,500 lines of **planning docs** — a vital guide for later work.
---
## ⚡ Web Frontend’s AI Advantage
**Web technologies (HTML/CSS/JS)** have the highest AI-assisted performance edge thanks to:
- Rich open-source ecosystem
- Abundant, high-quality training datasets
AI can instantly produce:
- Best-practice React components
- CSS animations, responsive layouts, accessibility
- TypeScript type definitions
By contrast:
- **iOS development**: AI output often outdated or “creative” but impractical due to smaller training data pool.
---
## 🎨 Design Details
### Color Scheme
Magpie’s theme draws from nature:
Palette extracted from magpie reference:
---
### Highlight Hover
**Initial:** No animation, highlight on link only — felt abrupt.
**Redesign:** Smooth fade-in/out (“breathing” rhythm), color unified with sidebar for seamless feel.
---
### Micro-interactions
In **Magpie**:
- Added subtle hover animations to warm up the page.
In **AI Ship**:
- Generous top whitespace
- Title + small boat icon
- Hover animation: boat “sets sail” when interacted with
These fine touches can matter more than business logic in vibe coding — they help your app stand out.
---
## 🔧 Tools
Main: **Codex**
Secondary: **GLM‑4.6**
Magpie:
- Developed first half on Claude Code
- Switched to Codex for second half
AI Ship: entirely Codex
---
## 🎭 Model Personality
**Claude**: verbose, thorough, sometimes overly chatty. Good for exploration/testing.
**Codex**: concise, direct, minimal explanation — great for focused implementation.
**Tip:** Learn each model’s strengths/limits; combine models where needed.
---
## 💰 When Code Becomes Cheap
The big question: As AI-generated code becomes near-free, **what’s a developer’s value?**
### Shift in Role:
Developers move from:
- **Code writers** → **requirement definers**
- **Designers of workflows**
- **Code verifiers** — ensuring correctness, security, maintainability
---
## 🎯 Precise Expression & Rapid Verification
The **#1 skill** in AI era:
- Clearly express requirements to AI.
Verification speed now outweighs pure implementation speed:
- AI can produce thousands of lines in minutes
- Spotting issues may take longer
---
## 🌐 Composite Knowledge
Single-stack expertise depreciates fast. Cross-domain know-how remains human strength:
- Technical synergy: frontend perf ↔ backend architecture
- Business understanding: knowing *why* users need a feature
This fusion of business, tech, and design is where human engineers shine.
---
## 🧭 Engineer’s Instinct
Even when not coding manually:
- Review AI output
- Ask for architecture/exceptions explanation
- Judge soundness, foresee risks
In AI-native projects:
- Humans must ensure **scalability** and **maintainability**
- Enforce boundaries, naming conventions, testing strategies
---
## 🔚 Conclusion
Steve Jobs’ “Stay hungry. Stay foolish.” has traveled through personal computing’s milestones — and now resonates stronger in our AI-coauthoring era.
In combining **AI’s omniscience** with **human general knowledge**, humility and continuous learning are more crucial than ever.
---
### 📑 Related Links
1. Magpie: [https://onevcat.link/](https://onevcat.link/)
2. AI Ship: [https://ai.onev.cat/](https://ai.onev.cat/)
3. Voice Input Workflow: [https://ai.onev.cat/articles/zh/2025-10-10-voice-input/](https://ai.onev.cat/articles/zh/2025-10-10-voice-input/)
4. Created To-Do List: [Commit →](https://github.com/onevcat/ai-ship/commit/16c2f21ba509bba7f0d40e3f96e203eedea04c4b)
5. Early Product Implementation: [Commit →](https://github.com/onevcat/ai-ship/commit/b86966f4c6947b6ed6a49415264bb1c892ec374b)
6. 2,500 Lines Planning Doc: [Commit →](https://github.com/onevcat/Magpie/commit/24a0284debeb88942f999dc22cb760650d7c0743)
---
**👍 Like • 🔄 Share • 📌 Bookmark**
[Read Original Text](2247713925)
[Open in WeChat](https://wechat2rss.bestblogs.dev/link-proxy/?k=c4a971a5&r=1&u=https%3A%2F%2Fmp.weixin.qq.com%2Fs%3F__biz%3DMzIyNjM2MzQyNg%3D%3D%26mid%3D2247713925%26idx%3D1%26sn%3Dd066df2239bfe7c4645bcacae8565ca5)
---
