Designer-দের জন্য
Claude Code দিয়ে আপনার প্রথম flow বানান
Claude Code দিয়ে একটা design-কে চালু UI prototype-এ বদলে ফেলুন। Frontend-এর অভিজ্ঞতা লাগবে না। শুধু একটা Figma file, একটা description আর একটা terminal।
আপনার কাছে একটা finished Figma screen আছে, আর আপনি সেটাকে browser-এ কাজ করতে দেখতে চান। Static prototype নয়। আসল interactive code। কিন্তু আপনি কখনো terminal খোলেননি, আর কোথা থেকে শুরু করবেন জানেন না।
আপনার design-এর সহজ ভাষার description থেকে আপনি একটা চালু React component বানাবেন, validation আর loading state সহ, নিজে একটা line code-ও edit না করে।
এই guide-এ Claude Code লাগবে। এটা real code বানায়, তাই এটা চলে Claude desktop app-এর Code tab-এ, সাধারণ chat-এ না। বাকি সব designer guide web-এ বা desktop app-এ চলে।
শেষে যা পাবেন
আপনার Figma design-এর সহজ ভাষার description থেকে scaffold করা একটা চালু React component
Validation, interaction state আর loading behaviour, যা যোগ হয়েছে prompt দিয়ে, code edit করে নয়
এমন একটা prototype যা developer-কে চালু starting point হিসেবে দিতে পারবেন, static file হিসেবে নয়
আপনার design সহজ ভাষায় লিখে ফেলুন
কোনো code ধরার আগে যে screen বানাতে চান, সেটা লিখে ফেলুন। Specific হোন: layout, component, interaction, state। Description যত precise হবে, আসা-যাওয়া তত কম লাগবে। এই description-টা আপনার project root-এ DESIGN.md নামের একটা file-এ লিখুন।
# DESIGN.md-এর উদাহরণ
## Screen: bKash Send Money
Layout: single-column, mobile (375px)। সাদা background।
Header
- Back arrow (বাঁয়ে), "Send Money" title (মাঝখানে), ডানে কোনো action নেই
Form
- Amount field: বড় number input, ডানে BDT label, placeholder "0"
- Phone field: tel input, label "bKash Number", placeholder "01XXXXXXXXX"
- Inline error: কোনো field invalid হলে তার নিচে দেখাবে, লাল #D32F2F
CTA
- "Send Money" button, full width, primary pink #E2136E
- দুটো field validation pass না করা পর্যন্ত disabled
- Loading state: API call চলার সময় label-এর জায়গায় spinner
States: default, field-error, loading, successএকবারে একটা করে component scaffold করুন
পুরো screen একবারে বানাতে Claude-কে বলবেন না। আগে form field, তারপর validation, তারপর button state, তারপর loading state। ছোট request দিলে পরিষ্কার, review করার মতো output আসে। বড় request দিলে এমন code আসে যা আপনি বুঝে উঠতে পারবেন না।
Validation আর loading state যোগ করুন, তারপর iterate করুন
এবার ধাপে ধাপে behaviour যোগ করুন। আগে Claude-কে validation যোগ করতে বলুন, browser-এ test করুন, তারপর loading state চান। প্রতিটা iteration এত ছোট রাখুন যেন পরের ধাপে যাওয়ার আগে নিজে check করে নিতে পারেন কাজ হয়েছে কি না। Code বোঝার দরকার নেই। Structure দেখার জন্য পড়ুন: আপনি যা describe করেছিলেন, তার সঙ্গে মিলছে কি? কোনো অংশ verify করতে চাইলে Claude-কে explain করতে বলুন।
যে ভুলগুলো প্রায়ই হয়
প্রথম flow বানানোর সময় এই চারটা ভুল সবচেয়ে বেশি হয়।
- পুরো screen একবারে বানাতে Claude-কে বলা। বড় request দিলে বড়, পড়া যায় না এমন output আসে। Build-টা ভাগ করে নিন: আগে shell, তারপর validation, তারপর interaction state। প্রতিটা step-এর পর এমন কিছু থাকা উচিত যা browser-এ খুলে verify করা যায়।
- শুরুর আগে DESIGN.md না লেখা। লেখা description না থাকলে Claude-কে আপনার prompt থেকে তখনই তখনই আপনার intent আন্দাজ করতে হয়। Prompt-এ প্রতিটা অস্পষ্ট জায়গার জন্য এক দফা correction লাগে। আগে description লিখুন; ১০ মিনিট লাগে, আর ৩০ মিনিট বাঁচে।
- Prompt দিয়ে change না চেয়ে নিজে code edit করা। Generate হওয়া file খুলে হাতে edit করলে feedback loop ভেঙে যায়। আপনি কী বদলেছেন Claude জানে না, তাই পরের prompt-এ আপনার edit মুছে যেতে পারে। Change-টা সহজ ভাষায় বলুন, Claude-কে করতে দিন।
- Prototype-কে production code ভাবা। Design description থেকে Claude যে code বানায়, সেটা চালু prototype, production-ready নয়। Ship করার আগে Claude-কে বলুন TypeScript type যোগ করতে, placeholder API call-এর জায়গায় আসল call বসাতে, আর prototype যে edge case বাদ দিয়েছে সেগুলো handle করতে।
এরপর কী?
Claude Design দিয়ে শুরু করুনNew guides, when they ship
One email, roughly weekly. CLAUDE.md templates, workflows I actually use, and the cut-for-length stuff that does not make the public guides. One-click unsubscribe.
Or read Product Field Notes, the Substack