Claude Code-এ একটি পেজের জন্য স্থির সংস্করণের DESIGN.md ব্যবহার করুন

বিদ্যমান পেজে কী উন্নত করতে হবে এবং কী অক্ষুণ্ন রাখতে হবে তা নির্দিষ্ট করা যায়। VoltAgent-এর Awesome DESIGN.md সংগ্রহ-এ প্রকাশ্য ওয়েবসাইটের সাধারণ টেক্সট বিশ্লেষণ আছে, যা AI কোডিং এজেন্টকে দেখানো যায়। এই নির্দেশিকায় ১৪ অক্টোবর ২০২৬-এর কমিটের একটি ফাইল সীমিত Claude Code সম্পাদনার দৃশ্যগত রেফারেন্স। নিজে পরিবর্তিত কোড ও প্রদর্শিত পেজ পরীক্ষা করলেই ফল গ্রহণযোগ্য।

BIG CHANGE স্থির রিপোজিটরি ও Claude Code নথি পর্যালোচনা করেছে। আমরা Claude Code চালাইনি, পেজ বদলাইনি, সময় মাপিনি বা তৈরি ফল পরীক্ষা করিনি। ওই স্থির ট্রিতে design-md/*/DESIGN.md-এর সরাসরি অধীনে ৮৪টি ফাইল আছে; সংখ্যাটি ওই কমিটের, স্থায়ী ক্যাটালগের আকার নয়।

বড় পরিবর্তন

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

শুরুর আগে

সম্পাদনার অনুমতি আছে এমন পেজ ও রিপোজিটরি, কাজের কপি বা ব্রাঞ্চ, স্থানীয়ভাবে পেজ দেখানোর উপায় এবং উপযুক্ত অ্যাকাউন্ট বা প্রদানকারীর মাধ্যমে Claude Code ব্যবহারের সুযোগ দরকার। কোন পেজ ফাইল বদলাবেন এবং প্রকল্পে পেজ চালু ও পরীক্ষার স্বাভাবিক উপায় কী তা জানুন। পাঠক, অপরিহার্য লেখা-লিংক, অনুমোদিত রং, ফন্ট, লোগো এবং সমাধানের একটিমাত্র দৃশ্যগত সমস্যা লিখুন। প্রস্তাবিত পরিবর্তন বিচারের জন্য মালিকের সিদ্ধান্ত কাজের কপির পাশে রাখুন।

ক্লায়েন্টের ব্যক্তিগত উপকরণ দেওয়ার আগে অ্যাকাউন্টের ডেটা নীতি ও টুল অনুমতি দেখুন। Claude Code অ্যাকাউন্টের শর্ত অনুযায়ী প্রম্পট ও প্রকল্পের বিষয় প্রক্রিয়া করে; স্থানীয় প্রকল্প মানেই মডেল সেশন শুধু স্থানীয় নয়। কাজের মাধ্যমে প্রকাশিত ব্যক্তিগত লেখা, উপকরণ বা কোড শেয়ারের অনুমতি নিশ্চিত করুন।

এক পেজে এক রেফারেন্স

1. খুলুন স্থির সংগ্রহের README। এমন একটি design-md/<name>/DESIGN.md নিন যার ধারণা নির্ধারিত সমস্যার উপযোগী। ব্যবহারের আগে পুরো ফাইল পড়ুন। Notion উদাহরণ-এ বিন্যাস, টাইপ, ফাঁক ও উপাদানের পরামর্শের ধরন দেখা যায়। এতে ক্যাপসুল ও আয়তাকার দুই ধরনের বোতাম বলা হয়েছে। এই বিরোধের কারণে নিজের সিদ্ধান্ত নিন, Claude Code-কে প্রতিটি লাইন মানতে বলবেন না।
2. ওই একটিমাত্র স্থির DESIGN.md কাজের প্রকল্পে কপি করুন, যেমন design-reference/DESIGN.md-এ। পাশে মূল URL, পাথ ও কমিট 3b605329240ce735b510037cca322f1831fdd7f8 লিখুন। কপির সঙ্গে রিপোজিটরির MIT কপিরাইট ও অনুমতির বিজ্ঞপ্তি রাখুন। Markdown রেফারেন্সে প্যাকেজ ইনস্টল লাগে না। লাইসেন্স রিপোজিটরির উপকরণে প্রযোজ্য; দেখানো কোম্পানির লোগো, ফন্ট ফাইল, ছবি বা ট্রেডমার্ক ব্যবহারের অধিকার দেয় না।
3. অনুমোদিত প্রকল্প থেকে Claude Code খুলে কপি করা ফাইল স্পষ্ট প্রসঙ্গ হিসেবে দিন। Anthropic ফাইল রেফারেন্স এবং আলাদা প্রকল্প নির্দেশ ফাইল ব্যাখ্যা করে; ফোল্ডারে স্বতন্ত্র DESIGN.md রাখলেই Claude Code সেটি লোড করেছে প্রমাণ হয় না। নিচের বন্ধনীতে পেজ পাথ ও মালিকের নিয়ম প্রকৃত মানে বদলান, এবং সম্পাদনা গ্রহণের আগে রেফারেন্স পড়ার নিশ্চয়তা নিন।

Read @design-reference/DESIGN.md as a visual reference. Edit only [path/to/owned-page] and the existing styles that page needs. Improve [one specific layout or hierarchy problem]. Keep the page's current audience, approved copy, links, brand colors, font and logo. Use only layout, hierarchy or spacing ideas that fit those rules. Do not copy the example site's name, assets or identity. Preserve working interactions and keyboard access. Show the proposed file changes and tell me how to render and check this page with this project's existing commands.

4. চালানো বা গ্রহণের আগে প্রস্তাবিত পার্থক্য পড়ুন। প্রতিটি বদলানো ফাইল, লেখা ও লিংক পরীক্ষা করুন। না-চাওয়া নতুন নির্ভরতা, উপকরণ বা অন্য পেজের সম্পাদনা প্রত্যাখ্যান করুন। প্রকল্পের নথিভুক্ত রান কমান্ডে পেজ দেখান। কম্পিউটার ও ফোনের প্রস্থে খুলে আসল পেজ পরীক্ষা করুন, এজেন্টের উদ্দেশ্যের বর্ণনা নয়।
5. লিখিত চাহিদার সঙ্গে প্রদর্শন মিলিয়ে দেখুন। লেখা-লিংক অক্ষত, শিরোনামের ক্রম কার্যকর, লেখা ও নিয়ন্ত্রণে যথেষ্ট কনট্রাস্ট এবং ফোনে কাটা বিষয় বা আড়াআড়ি স্ক্রল নেই কি না দেখুন। কিবোর্ড দিয়ে প্রভাবিত লিংক, বোতাম, মেনু ও ফর্মে গিয়ে ব্যবহার করুন। বদলানো মিথস্ক্রিয়া, দৃশ্যমান ফোকাস ও ত্রুটি অবস্থাসহ পরীক্ষা করুন। পেজ সংস্করণ, প্রস্থ, পরীক্ষা ও ত্রুটি লিখুন। আপনার পেজে পরীক্ষাগুলো পাস হলেই সম্পাদনা গ্রহণ করুন।

Claude Code রেফারেন্স বাদ দিলে আবার ফাইল দেখিয়ে ব্যবহৃত অংশ চিহ্নিত করতে বলুন। ব্র্যান্ডের নিয়মের সঙ্গে বিরোধ হলে অনুরোধ থেকে সেই নির্দেশ সরিয়ে প্রভাবিত কোড ঠিক করুন। লিংক, ফোকাসের পথ বা মিথস্ক্রিয়া ভাঙলে পুরোনো কার্যকর আচরণ ফেরান ও ছোট পরিবর্তন করুন। পেজ দেখানো বা ফল পরীক্ষা সম্ভব না হলে সম্ভব হওয়া পর্যন্ত গ্রহণ করবেন না।

সংগ্রহটি অন্য সাইটের কমিউনিটি বর্ণনা, রক্ষণাবেক্ষণকারীরা যেমন আছে তেমন দিয়েছেন। Notion ফাইলে বিরোধী বোতামের আকৃতি, নথিবিহীন হোভার আচরণ ও এই গাইডে যাচাই না-করা কোড পরীক্ষার কমান্ড আছে। সেটির বদলে প্রকল্পের পরিচিত পরীক্ষা ব্যবহার করুন। Claude Code ব্যবহার এবং পরের হোস্টিং বা উপকরণ খরচ অ্যাকাউন্ট-প্রকল্পনির্ভর; এখানে সম্পাদনার সময় বা চূড়ান্ত ডিজাইনের মান প্রতিষ্ঠিত নয়।

AI-সহায়তায় পেজ তৈরির আরেক পদ্ধতি জানতে আমাদের Genspark প্রোটোটাইপ গাইড হোস্ট করা প্রোটোটাইপ কপি ও রপ্তানি করা সোর্স ZIP পরীক্ষা বোঝায়। ওই কাজের শুরুর উপাদান ও সমাপ্তির মানদণ্ড আলাদা।

উৎস ও অতিরিক্ত পাঠ

• VoltAgent-এর স্থির README সংগ্রহ ও প্রকাশ্য সাইটের যেমন-আছে বিশ্লেষণ বোঝায়। ফাইল সংখ্যা স্থির রিকার্সিভ ট্রি থেকে, ভবিষ্যৎ সংস্করণের দাবি নয়।
• স্থির সংস্করণের Notion DESIGN.md ধরন ও অভ্যন্তরীণ বিরোধ দেখায়। এটি Notion-অনুমোদিত স্পেসিফিকেশন বা উপকরণের অধিকার নয়।
• রিপোজিটরির MIT লাইসেন্স কপি বা গুরুত্বপূর্ণ অংশে কপিরাইট ও অনুমতির বিজ্ঞপ্তি রাখতে বলে।
• Anthropic-এর Claude Code শুরুর গাইড, ফাইল রেফারেন্স নির্দেশনা এবং প্রকল্প নির্দেশের নথি প্রবেশাধিকার ও স্পষ্ট প্রসঙ্গ ব্যাখ্যা করে। এগুলো এই পেজ সম্পাদনা বা স্বতন্ত্র রেফারেন্স স্বয়ংক্রিয় লোড যাচাই করে না।
• Anthropic-এর খরচ, ডেটা ব্যবহার ও অনুমতির নথি অ্যাকাউন্টভেদে ব্যবহার ও নিয়ন্ত্রণ বোঝায়। কোনো সেশন, বিল বা ফলের পেজ এই গাইডে পরীক্ষা করা হয়নি।