আমি কীভাবে কোডিং এজেন্টের সাহায্যে এই ব্লগ বানালাম

আমার আগেও একটা ব্লগ ছিল। ভালোই ট্রাফিক, পরিষ্কার বিষয়, একদম বাস্তব ব্যক্তিগত অভিজ্ঞতা: আমি ফ্রন্টএন্ড নিয়ে লিখতাম, আর নিজের হাতে যা পেরিয়ে যেতাম তা নিয়ে। তারপর তেমন গুরুত্বপূর্ণ নয় এমন কিছু কারণে আমি সেটা চালিয়ে যাওয়া বন্ধ করি, এবং সঙ্গে ডোমেইনটাও হারাই।

দীর্ঘ সময় ধরে মনে হয়েছিল গল্পটা কেবল শেষ হয়ে গেছে। কিন্তু আজ আবার লিখতে ইচ্ছে হলো — আর ফ্রন্টএন্ড পেশার বিষয়ে নয়, বরং আমি কীভাবে কোডিং এজেন্টের সাহায্যে আসল প্রকল্প বানাই, সেটা নিয়ে। ডেভেলপমেন্টের ভবিষ্যৎ নিয়ে বিমূর্ত আলোচনা ছাড়াই — কংক্রিট প্রক্রিয়া, ভুল ও সিদ্ধান্তের মধ্য দিয়ে।

এভাবেই techmeat.dev আবির্ভূত হলো।

আমি আদৌ এটা শুরু করলাম কেন

ভাবনাটা স্বতঃস্ফূর্ত ছিল। আমার কাছে ব্যবহার না-করা tokens জমে যাচ্ছিল, কয়েকটা অনুমান ছিল যা যাচাই করতে চেয়েছিলাম, আর আমি ঠিক করলাম একটা ছোট কিন্তু আসল প্রকল্প বানাবো: এমন একটা ব্লগ যেখানে এটি বানানোর প্রক্রিয়াটাই হয়ে উঠবে প্রথম কনটেন্ট।

এজেন্টদের সঙ্গে আমার সাধারণ workflow অনেক বেশি বিস্তৃত: কয়েকটি ধাপের পরিকল্পনা, রিভিউ এবং চেকপয়েন্ট। এখানে আমি ইচ্ছাকৃতভাবে সেটাকে সরল করেছি। দেখতে চেয়েছিলাম, যদি দ্রুত দিক ঠিক করি, কনটেক্সট প্রস্তুত করি এবং শুরুর কাজটার বড় অংশ এজেন্টের হাতে ছেড়ে দিই — তবে কতদূর যাওয়া যায়।

এটা কোনো রেফারেন্স প্রক্রিয়া নয়, বরং একটা পরীক্ষামূলক সংস্করণ। কঠোর পদ্ধতির বিষয়ে আমি সম্ভবত আলাদা করে লিখব।

প্রস্তুতি: skills, কনটেক্সট এবং প্রকল্পের নিয়ম

প্রথমে আমি প্রয়োজনীয় skills ইনস্টল করলাম। এমন একটা প্রকল্পের জন্য এটা যতটা মনে হয়, তার চেয়ে বেশি গুরুত্বপূর্ণ: «একটা ব্লগ বানিয়ে দাও» — এটা খুব দুর্বল কাজের কথা। এজেন্টের পরিষ্কার নিয়ম দরকার: কোন প্রযুক্তি ব্যবহার হবে, কনটেন্ট কোথায় রাখা হবে, SEO নিয়ে কীভাবে ভাববে, ডিজাইন কীভাবে সামলাবে, প্রয়োজন ছাড়া কী করবে না। শুরুর সেটটা ওয়ার্কিং ফাইল INIT.md-এ ধরা আছে।

তারপর আমি CLAUDE.md ইনিশিয়ালাইজ করলাম — প্রকল্পের বেস কনটেক্সট ধারণকারী ফাইল। ড্রাফট রুশ ভাষায় ছিল, কিন্তু কাজের কনটেক্সটের জন্য আমি সেটাকে সঙ্গে সঙ্গে ইংরেজিতে অনুবাদ করলাম, যাতে সব locales এবং ভিন্ন টুলে সমানভাবে কাজে আসে।

This project is empty for now, but I am going to build my blog here. The project will be based on Astro, and posts will be stored as Markdown files. Each article will go through a multi-stage SEO and GEO preparation workflow using the skills available in the project and the geo-optimizer-skill CLI: https://github.com/Auriti-Labs/geo-optimizer-skill, which is already installed.

The blog will be about building projects with AI coding.

The domain has already been chosen and purchased: techmeat.dev.

The project will be hosted on Cloudflare Pages.

The primary language of the blog will be English, but there will also be translations into other languages, at least 10 popular ones. Translation pages must point to the English version of the same article with canonical links.

The project design must be created using the impeccable skill.

All project documentation must be written in English. Draft documentation may be an exception.

এরপর আমি CLAUDE.md-কে AGENTS.md হিসেবে কপি করলাম। আমি প্রকল্পকে কোনো একটি নির্দিষ্ট এজেন্টের সঙ্গে বেঁধে রাখতে চাই না: কালকে যদি আমি অন্য কোনো টুলে ডেভেলপমেন্ট চালিয়ে যাই, তবু বেস নিয়মগুলো কোডের পাশেই থাকবে।

প্রথম শুরু: শুধু ভিত্তি

আমি এজেন্টকে শুরুতেই পেইজ বা ডিজাইন বানাতে বলিনি। শুরুতে আমার দরকার ছিল একটা সঠিক টেকনিক্যাল ভিত্তি: Cloudflare Pages-এর জন্য প্রস্তুত একটা Astro প্রকল্প, পরিষ্কার গঠন আর অতিরিক্ত উদ্যোগ ছাড়া।

প্রম্পট ইচ্ছে করেই সংকীর্ণ করা হয়েছিল:

Let's start developing our blog project. First, use the Astro skills and set up the initial project, preparing it for hosting on Cloudflare Pages. There is no need to build pages or do any additional work right now. Only set up the project.

প্রথম রিকোয়েস্ট যত সংকীর্ণ, সিদ্ধান্ত হয়নি এমন জায়গায় এজেন্ট প্রকল্পকে «উন্নত» করতে শুরু করার সম্ভাবনাও তত কম। এতে অনেক স্নায়ু বাঁচে: আমার দরকার ছিল একটা নির্ভরযোগ্য শুরু, একটা সুন্দর মকআপ নয়।

অপরিণত ডিজাইনের বদলে ব্রেইনস্টর্মিং

তারপর আমি Superpowers অন করে ব্রেইনস্টর্মিং শুরু করলাম, এবং বিশেষভাবে অনুরোধ করলাম যেন ডিজাইন নিয়ে আলোচনা না হয়। এই ধাপে সিদ্ধান্ত নিতে হবে ব্লগটা একটা পণ্য হিসেবে কী কী নিয়ে গঠিত, সে কেমন দেখতে হবে তা নয়।

প্রম্পটটা ছিল এরকম:

Let's brainstorm in Russian about what my blog should consist of. Here's how I currently see it:

- All pages should share a unified design, but we are not discussing the design itself yet, only common blocks and similar structural elements. The header should include the techmeat.dev name and a language switcher. To clarify, the brainstorming result should describe what the blog should have, not how it should look.
- The home page should show previews of the 10 latest posts with links to the full posts. Maybe it should include something else too; suggest options.
- There should be an About page: something like a CV, but in a more blog-like form.
- There should be a Contacts page with links to my social profiles and GitHub.
- Maybe some other pages are needed; suggest options.
- This should be a very simple blog, mostly informational. I expect to publish materials often.

ব্রেইনস্টর্মিং প্রায় এক ঘণ্টা সময় নিল। এত ছোট প্রকল্পের জন্য এটা অনেক মনে হয়, কিন্তু সময়টা পুষিয়ে গেছে: এটা ছাড়া সঙ্গতিপূর্ণ পরিকল্পনা ও আর্কিটেকচার স্পেসিফিকেশন বের হতো না। এজেন্ট ব্লগটাকে পেইজ, কমন ব্লক, ভাষা মডেল এবং কনটেন্ট স্ট্রাকচারে ভেঙে নিতে সাহায্য করেছে।

ফলাফলে দুটি অভ্যন্তরীণ artifact বেরিয়ে এলো: প্রথম সংস্করণের পরিকল্পনা এবং আর্কিটেকচার স্পেসিফিকেশন।

স্বায়ত্ত ডেভেলপমেন্ট, রিভিউ এবং ফিক্স

ব্রেইনস্টর্মিংয়ের পর আমার শুধু দিকটার সঙ্গে একমত হওয়া আর এজেন্টকে কাজ করতে দেওয়াই বাকি ছিল। বেস স্ট্রাকচারের বড় অংশ স্বয়ংক্রিয়ভাবে এসেছে: রুট, Markdown কনটেন্ট, locales, কম্পোনেন্ট, RSS, tags, অনুবাদের জন্য অবকাঠামো।

পুরোপুরি হাত না-দিয়ে চালানো যায়নি। আমি কয়েকটা সংশোধনী প্রম্পট যোগ করেছি: ভাষার সেট স্পষ্ট করেছি, ছোট bug-গুলো ঠিক করতে বলেছি, এবং প্রথম দফায় এজেন্ট যে ছোটখাটো জায়গাগুলো বাদ দিয়েছিল সেগুলো আঁটোসাঁটো করতে বলেছি।

তারপর GPT-5.5-কে অনুরোধ করলাম কোডের রিভিউ করতে এবং সঙ্গে সঙ্গেই ফিক্স প্রয়োগ করতে। আমি প্রক্রিয়ায় খুব একটা ঢুকিনি: এজেন্ট কয়েকটা কাজে আসা উন্নতি খুঁজে পেয়েছে, প্রয়োগ করেছে এবং চেক চালিয়েছে। সত্যি কথা হচ্ছে, এই সংস্করণটা আমি প্রায় পুরোটাই vibe-code করেছি, যা সাধারণত আমি এড়াতে চেষ্টা করি। এখানে সেটা মেনে নেওয়া যায়: প্রকল্প ছোট, ভুলের মূল্য কম, আর উদ্দেশ্য ছিলই এই দৃষ্টিভঙ্গির সীমা যাচাই করা।

এখানেই পরিষ্কার দেখা যায়, আমি AI coding-কে সাধারণভাবে কীভাবে দেখি। এজেন্ট কোনো জাদুকরি «আমার পণ্য বানিয়ে দাও» বোতাম নয়, বরং খুব দ্রুত কাজ করা একজন executor, যাকে কাঠামো, কনটেক্সট এবং নিয়মিত রিভিউ দরকার। ভালো কাঠামো থাকলে সে কাঁচা কাজের একটা বড় অংশ তুলে নেয়। অস্পষ্ট কাঠামোয় সে ঠিক একই গতিতে অনিশ্চয়তা উৎপাদন করতে শুরু করে।

আমি কেন ডিজাইন পিছিয়ে দিয়েছি

প্রথম পর্যায়ে ডিজাইনকে আমি ইচ্ছাকৃতভাবে অন্তর্ভুক্ত করিনি। ভিজ্যুয়াল দিকটার জন্য আমার আলাদা প্রক্রিয়া আছে, এবং আমি সেটাকে আলাদাভাবেই পার করতে চেয়েছিলাম, যেন আর্কিটেকচার, কনটেন্ট ও ইন্টারফেস একই কাজে মিশে না যায়।

এজন্যই ব্লগের প্রথম সংস্করণ একটা টেকনিক্যাল কাঠামোর মতো দেখাচ্ছে: রুট, লোকালাইজেশন, পোস্ট, tags এবং প্রকাশনার অবকাঠামো ইতিমধ্যেই আছে, কিন্তু ভিজ্যুয়াল সিস্টেম নেই — এবং এটা স্বাভাবিক। কখনো কখনো আগে একটা চলমান প্রকল্প পাওয়া এবং পরে নিরিবিলি ভাবা — সে কেমন দেখায় ও কেমন অনুভূত হয় — বেশি কাজে দেয়।

এই ব্লগ দিয়ে আমি কী যাচাই করতে চাই

techmeat.dev আমার কাছে শুধু নোটের গুদাম নয়, একটা কর্মরত পরীক্ষাগার। আমার আগ্রহ — যখন একজন কোডিং এজেন্ট সব সময় আপনার পাশে থাকে, তখন ডেভেলপমেন্ট কীভাবে বদলায়: কোথায় সে কাজ ত্বরান্বিত করে, কোথায় লুকানো ঝুঁকি তৈরি করে, আর কোথায় এমন সমাধান দেখতে সাহায্য করে যেটা একা একা আমি অনেক পরে গিয়ে পেতাম।

বিশেষত তিনটি জিনিস আমাকে টানে।

প্রক্রিয়া। «এজেন্ট কোড লিখেছে» নয়, বরং তার আগে আর পরে কী হলো: কোন প্রম্পটগুলো কাজ করেছে, কী কী সীমাবদ্ধতা চাপাতে হয়েছে, কোন সিদ্ধান্ত মানুষের কাছেই রেখে দেওয়া ভালো।

গুণমান। পরিকল্পনা ও রিভিউ না ধরে রাখলে AI-assisted development সহজেই প্যাচের একটা স্রোতে পরিণত হয়। আমি সফল ফলাফলগুলোও দেখাতে চাই, এমন জায়গাগুলোও দেখাতে চাই যেখানে এজেন্ট ভুল করেছে অথবা যেখানে আমার সমস্যা-প্রকাশ যথেষ্ট সুনির্দিষ্ট ছিল না।

পুনরাবৃত্তিযোগ্যতা। যদি পদ্ধতিটা পরের প্রকল্পে আবার করা না যায়, সেটা প্রক্রিয়া নয়, একবারের কৌশল। তাই আমি শুধু চূড়ান্ত কোড নয়, কাজের রূপরেখাও লিখে রাখব: কাজটা কীভাবে দেওয়া হয়েছিল, কী কী ফাইল জন্ম নিয়েছে, কোন কোন টুল অংশ নিয়েছে, সিদ্ধান্ত কীভাবে নেওয়া হয়েছে।

এরপর কী

পরবর্তী ধাপ হলো ডিজাইন। এই পোস্টের ধারাবাহিকতা ঠিক সেটা নিয়েই হবে: আমি কীভাবে করেছি, কী কী সিদ্ধান্ত নিয়েছি, শেষে কী বেরিয়ে এসেছে। যদিও তা আসলে কেমন দেখাবে, সেটা এখনও আমি নিজেই জানি না।

আপাতত, ইতিহাসের জন্য, আজ ব্লগটা যেভাবে দেখাচ্ছে — সেটা সংরক্ষিত থাকুক:

Impeccable দিয়ে ডিজাইন

উপরের ক্লিপটা যদি দেখে থাকেন — তাহলে আগেই দেখে ফেলেছেন ব্লগটা আগে কেমন দেখাচ্ছিল আর পরে কেমন হয়ে উঠল।

ডিজাইনকে আমি ইচ্ছাকৃতভাবে আলাদা ফেইজে রেখেছিলাম — যাতে এটাকে আর্কিটেকচার ও কনটেন্টের সঙ্গে একই কাজে না মিশিয়ে ফেলি। সহকর্মীরা Impeccable skill সিস্টেমের কথা বলেছিলেন — এটা ডিফল্ট AI সৌন্দর্যবোধের বদলে এজেন্টকে একটু বেশি ভাবনার ছাপ থাকা ভিজ্যুয়াল বানাতে সাহায্য করে।

ফলাফল এক সঙ্গে সহজ এবং এত সহজ নয়। সহজ — কারণ সবকিছু একটা prompt আর Claude Code-এর সঙ্গে কয়েক রাউন্ড প্রশ্নোত্তরের মধ্যেই ধরে গেছে। এত সহজ নয় — কারণ prompt-টা যত্ন নিয়ে লিখতে হয়েছে, আর Claude Code-এর প্রশ্নগুলোও খুব সহজ ছিল না।

প্রাথমিক prompt:

The blog is already running on the base setup with starter content, but it was deliberately built without design — I wanted to handle that as a separate phase.

You have the impeccable skill, but I'm not great at using it yet. Let's learn it together from the docs at https://impeccable.style/docs/impeccable.

What I want for the blog: a simple, elegant design with minimal decorative imagery (ideally none at all). Content first, but the site should feel pleasant — design must not get in the way of consuming content. At the same time the visual character should reflect my own attitude toward design.

I have no references; let's build it from scratch.
The blog already has a light/dark theme toggle — we can keep it or drop it.
We have many locales, including Asian scripts and Arabic, so RTL matters.
Mobile-first is also important.
You'll find more details in /docs.
You can ask me questions, but don't drown me in them — only the essentials.

Claude Code ডিজাইনটা বেশ দ্রুত রিফ্রেশ করে দিয়েছে। কয়েকটা স্পষ্টীকরণ prompt-এর পরে রেজাল্ট আমাকে সন্তুষ্ট করেছে।

Pencil দিয়ে পোস্টার

এর পর — পোস্টার, যাতে সোশ্যাল নেটওয়ার্কে ব্লগের লিংক শেয়ার করলে সুন্দর দেখায়। আমি Pencil যুক্ত করেছি (ওদের MCP দারুণ) এবং Claude Code-কে বলেছি একটা পোস্টার সিস্টেম বানাতে এবং প্রজেক্টে এক্সপোর্ট করতে। কিছু ম্যানুয়াল টাচ-আপ লেগেছে, কিন্তু সব মিলিয়ে — দ্রুত আর পরিষ্কার।

এই অংশের জন্য prompt:

I'm adding a `design/` folder to the project for design artifacts. Let's start with post posters.

Posters will live in Pencil — you have the MCP for that.

Build a poster system for every page of the blog; the layouts should be templated. Post posters should be kept separate so adding a new poster per post is easy.

Posters need two sizes — landscape and portrait — to cover both social-network variants.

Make a poster for the first post, fully on-spec and at the correct dimensions. The first poster will become the template, with small per-post variations.

Export every poster, place them correctly inside the project, and wire each one up to the matching page.

The home-page poster should also serve as the default poster for any page that doesn't have its own yet.

কমেন্ট, Lighthouse এবং হোস্টিং

কমেন্ট সিস্টেম আমি যুক্ত করিনি — এখনই এর প্রয়োজন দেখছি না। যদি কোনো পোস্ট নিয়ে আলোচনা করতে চান — তার নিচে PR-এর লিংক রয়েছে, ওখানেই কমেন্ট রাখা যাবে।

একদম শেষে আমি এজেন্টকে বললাম সাইটটা Lighthouse দিয়ে চালিয়ে মেট্রিকস টেনে তুলতে। সংখ্যাগুলো শেষ পর্যন্ত 100%-এ এসে দাঁড়িয়েছে।

হোস্টিংয়ের জন্য আমি শুরু থেকেই টাকা ও সময় — দু’দিকেই যত সম্ভব সস্তা অপশন চাইছিলাম — Cloudflare Pages। সবকিছুর জন্য শূন্য ডলার, সঙ্গে বিল্ট-ইন অ্যানালিটিক্স। ডোমেইনটাও, যাইহোক, আমি Cloudflare থেকেই কিনেছি — চেনা রেজিস্ট্রারগুলোর চেয়ে সস্তা পড়েছে।

এর পরে কী

এতেই প্রথম সাইকল শেষ: ব্লগ চলছে, অনুবাদ আছে, ডিজাইন আছে, OG পোস্টার আর এমন মেট্রিকস আছে যেগুলো নিয়ে লজ্জা পেতে হয় না। পরের ধাপ হলো পোস্ট লেখার অটোমেশন। কীভাবে এটাকে “আধুনিক” উপায়ে করা যায় সে বিষয়ে আমার একটা আইডিয়া আছে — সেটা নিয়ে আলাদা পোস্টে লিখব।