Starting Point for a Technical Blog: Why I Began
My reason for embarking on this technical blog project wasn't simply "I've always wanted my own blog." Having worked for years in the intersection of technology and business, I strongly felt the need for a "bridge" between these two domains. While existing blog services would have been sufficient for publishing content, I had a strong desire to build a platform with my own hands that embodied the fusion of technology and business.
This month-long blog construction process wasn't merely an implementation record, but also a journey exploring the possibilities of AI collaborative development. Traditionally, implementing a blog alone would take weeks, but through collaboration with AI, it was achieved in a surprisingly short time.
In this article, I'll share the process from the conceptualization stage to design implementation. What I particularly want to highlight is how AI collaboration realized the design and the design philosophy behind the information architecture. This isn't simply about technology, but my approach to the universal challenge of how to implement business value through technology.
Encountering Vibe Coding: Dramatically Reducing Development Costs
The development approach I adopted for this project is called "Vibe Coding," a new style that involves coding with AI based on vibes. This encounter became a major turning point in implementing this blog.
The Reversal Phenomenon in Programming Costs
In traditional development, with high engineer costs, one must carefully consider whether something is valuable enough to automate.
This is because when trying to solve a problem at hand, you would spend 20-30 hours implementing automation for something that would take 8 hours to do manually. And with debugging on top of that, you'd be lucky if it only took 20-30 hours.
This cost calculation often led to the conclusion: "Let's just bear with it and do it manually." However, collaboration with AI has dramatically changed this dynamic.
The greatest value of the Vibe Coding approach is the significant reduction in implementation time. For manual work that would take 8 hours, collaborating with AI can often implement code in about 30 minutes. This means that the range of applicable tasks has expanded dramatically.
Previously, I often used no-code tools for website construction to save time. However, no-code tools have limitations in what can be achieved and constraints on customization.
When I realized that Vibe Coding with AI could overcome these constraints, it gave me the final push to start this blog construction project.
However, I want to clarify from the start that this isn't about creating a low-quality copy by simply instructing AI to "generate a blog." The value I can provide to readers in this article is how to create high-quality content through trial and error in collaboration with AI.
Blog Conceptualization and Strategy Phase: Defining the Vision
This blog construction project didn't start with coding work. It began with a vision of "what kind of blog I wanted to create" and target setting of "who I wanted to reach."
The Core Vision of "Bridging Technology and Business"
The core concept of the blog is "bridging technology and business." This concept includes the following elements:
- Knowledge Transformation and Translation: Converting technical knowledge into business value, and business requirements into technical specifications
- Connecting Divided Worlds: Crossing domains that have traditionally been discussed separately as "technical" and "business"
- Creating Dialogue: Facilitating dialogue between people with different expertise and backgrounds
- Innovation Foundation: Creating fertile ground for new value creation born from the fusion of knowledge across domains
This vision emerged from my experience. Having perspectives of both technologist and executive, and functioning as a "translator" between them, shaped the direction of this blog.
Clarifying Target Personas
Once the vision was set, I needed to clarify "who I wanted to reach." I established three main personas (admittedly, having three personas is ambitious, but I was being greedy since I could proceed with AI assistance).
These three personas each have different needs:
- Technologists in Transition: Those with technical expertise seeking career development with a broader perspective
- Technology Era Navigators: Those with business backgrounds looking to leverage technology for business transformation
- Next-Generation Social Innovators: Those seeking to create innovation at the intersection of technology and social issues
I needed to design with awareness of providing value to each of these personas through different approaches.
Content Hierarchy Design: Depth and Abstraction of Information
With vision and personas established, I needed to consider the structure of the content. I decided to structure content in four layers:
- Foundation Layer: Systematic basic knowledge and principles
- Practical Layer: Practical know-how and methodologies
- Insight Layer: Understanding patterns and trends of change
- Personal Layer: The founder's own philosophy and thought processes
This layered structure aims to provide content of appropriate depth and abstraction according to readers' knowledge levels and interests.
It also influenced the URL design, which was ultimately organized into three categories: "tech," "business," and "insight."
Designing a Multidimensional Exploration System: Innovation in Information Access
For the blog's information architecture, I envisioned a multidimensional exploration system that goes beyond the traditional one-dimensional classification of categories and tags. This is a mechanism that allows access to the same content from different perspectives.
This multidimensional exploration system won't be fully implemented at the MVP (Minimum Viable Product) stage but is planned for a later phase. However, it significantly influenced the initial information design. This structure makes the same content discoverable in different contexts, enabling flexible navigation according to readers' interests and needs.
Design Implementation Through AI Collaboration: A Record of Trial and Error
Once the blog's vision and structure were established, I moved on to the design stage. Here too, I adopted a collaborative approach with AI and made interesting discoveries.
Creating and Failing with Design Guidelines
I first created what are generally called design guidelines (which had previously facilitated smooth interactions with experienced designers) and loaded them into "v0" to generate designs. I prepared guidelines defining color palettes and font styles, but the expected design wasn't generated.
Despite repeatedly asking ChatGPT for problem analysis, I only received vague answers like "the design guidelines aren't detailed enough," without clarity on what specifically was lacking.
Turning Point to Success: The Importance of Design Catalogs
The turning point came from studying the case of "Visual Copilot," a Figma plugin provided by Builder.io. Researching their on-brand implementation method gave me an important realization.
Just color palettes and font specifications weren't enough. To convey the essence of design to AI, a catalog of specific components was necessary.
I tried a new approach with Claude Sonnet 3.7. I created images of about 10 designs I had previously made and had them analyzed for the elements needed for on-brand implementation. Then, leveraging Few-Shot Learning characteristics, I added detailed textual descriptions of actual components as a catalog to the guidelines.
The design generated with this method was much closer to expectations. To convey the "vibe" of a design to AI, abstract instructions weren't effective – accumulating concrete examples was.
This insight applies not only to communication with AI but also to design communication between humans. In collaborating with designers too, showing concrete examples is more effective than abstract instructions.
Implementation Strategy: From Design to Code
Once the design was finalized, the next step was implementing it in code. I downloaded the design generated by v0 as a zip file and moved to implementation.
The key point here was not just using v0's code as is, but strategically integrating it into the existing project environment. I adopted the following approach:
- Creating a Reference Folder: Created a
reffolder and placed the code generated by v0 - Planned Integration: Developed an integration plan using Cline / Roo Code's Plan / Architect mode
- Efficient Implementation: Efficient integration to blend with the existing project (using Act / Code mode)
This approach allowed me to appropriately integrate the excellent design generated by v0 into the existing project structure.
Core Technology for AI Collaborative Development: Utilizing Memory Bank
One of the most important elements that enabled efficient development in this project was the use of Memory Bank. This is a structured document management method that addresses the challenge of context sharing in AI collaboration.
While the detailed implementation and structure of Memory Bank are explained in a dedicated article, in this blog construction project, it particularly demonstrated its power as a "mechanism to abstract learnings from experience." Project progress was significantly accelerated, and the collaboration efficiency between myself and AI dramatically improved.
Communication Methods with AI: Insights Gained from Practice
Through this project, I gained many insights about effective methods of communicating with AI. Particularly important was task division and mode differentiation.
Separating Planning and Implementation: Appropriate Task Division
Cline/Roo Code has "Plan/Architect" mode for planning and "Act/Code" mode for implementation. Initially, I didn't understand this difference and performed all tasks in Code mode.
However, as the project progressed, the importance of clearly separating planning and implementation became apparent.
In the planning phase, I conducted impact assessments and considered optimal approaches; in the implementation phase, I faithfully followed that plan. This workflow had the following effects:
- Task Clarification: Clearly defining what should be done, reducing mid-course changes
- Context Preservation: Fully understanding the project context in the planning stage before moving to implementation
- Cost Reduction: Reducing wasted token consumption from trial and error
Efficient Instruction: Uninterrupted Execution
In collaborating with AI, I found that completing tasks in one go is most efficient. Intervening midway to change direction forces the AI to reconsider, resulting in unnecessary context accumulation.
The characteristics of good task instructions are:
- Self-Contained: Divided into scopes that can be completed in one instruction
- Explicit Prerequisites: Providing necessary information in advance through Memory Bank, etc.
- Clear Success Criteria: Clearly defining "what constitutes completion"
Reviewing code written by AI was particularly challenging. It's difficult to review complex code in a short time, and real-time intervention reduced efficiency.
As a countermeasure, I incorporated a BDD (Behavior Driven Development) approach. This method involves textually aligning "what behavior is expected" before code implementation and having the AI implement code that meets those expectations. This significantly improved the quality and understanding of the final code.
Learnings from the Project: Insights Beyond AI Collaboration
The insights gained from this project are not limited to AI collaboration but are universal. Especially from a design thinking perspective, the following important lessons were learned:
Importance of User-Centered Design
What's technically feasible doesn't necessarily align with what's valuable to users. In this project, I clearly defined user personas and designed content structure and navigation from their perspective.
While AI is powerful for technical implementation, determining value for users is the human's role. Being conscious of this role division results in better products.
Oscillation Between Abstract and Concrete
In the design process, it's important to move back and forth between abstract vision and concrete implementation. Memory Bank was effective because it could systematically manage both concrete information and abstract principles.
This "oscillation between abstract and concrete" is a principle that applies to all creative processes, not just collaboration with AI.
Designing Feedback Loops
Effective project progression requires appropriate feedback loop design. In this project, I consciously established the following loops:
- Short-Term Loop: Functional verification after implementing individual features
- Mid-Term Loop: Feature verification based on user scenarios
- Long-Term Loop: Value evaluation compared against the vision
These loops form the foundation supporting healthy project progression, both in collaboration with AI and among humans.
To the Next Phase: From Implementation to Content
With the blog foundation construction complete, the next phase is content enrichment. This article is part of the Insight category, sharing my experiences and insights, but I plan to add more diverse content going forward.
Particularly, the technical learnings gained from this blog construction will be explained in detail in the Tech category article "Building a Next.js Based Blog with AI: A Record of Design and Implementation Trial and Error". There, I'll delve into technical details such as MDX implementation methods leveraging Next.js 15 features and performance optimization.
This blog construction journey was a valuable experience beyond mere technical implementation. I've realized that combining a new way of working through AI collaboration with traditional design thinking enables efficient and creative product development.
I hope to continue sharing insights that bridge technology and business through this blog.
