Markdown সংস্করণ

AI-translated from English; not yet reviewed by a fluent editor.

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

> স্থির সংস্করণের একটি DESIGN.md বেছে Claude Code-কে অনুমোদিত পেজ সম্পাদনার জন্য দিন, তারপর কোড ও কম্পিউটার-ফোনের প্রকৃত প্রদর্শন পরীক্ষা করুন।

By BIG CHANGE Editorial

Published: 2026-10-20T00:01:06.937Z
Updated: 2026-10-20T00:01:06.937Z
Canonical: https://bigchange.ai/blog/claude-code-pinned-design-reference-page-guide

![Conceptual charcoal illustration of one clipped design-reference sheet beside an unbranded display showing a simple webpage layout.](https://bigchange.ai/api/media/file/pinned-design-reference-one-page-hero-v1.png)
AI-generated conceptual illustration by BIG CHANGE; no Claude Code run, Notion or edited and tested page is depicted.

বিদ্যমান পেজে কী উন্নত করতে হবে এবং কী অক্ষুণ্ন রাখতে হবে তা নির্দিষ্ট করা যায়। VoltAgent-এর [Awesome DESIGN.md সংগ্রহ](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md)-এ প্রকাশ্য ওয়েবসাইটের সাধারণ টেক্সট বিশ্লেষণ আছে, যা AI কোডিং এজেন্টকে দেখানো যায়। এই নির্দেশিকায় ১৪ অক্টোবর ২০২৬-এর কমিটের একটি ফাইল সীমিত Claude Code সম্পাদনার দৃশ্যগত রেফারেন্স। নিজে পরিবর্তিত কোড ও প্রদর্শিত পেজ পরীক্ষা করলেই ফল গ্রহণযোগ্য।

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

## বড় পরিবর্তন

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

## শুরুর আগে

সম্পাদনার অনুমতি আছে এমন পেজ ও রিপোজিটরি, কাজের কপি বা ব্রাঞ্চ, স্থানীয়ভাবে পেজ দেখানোর উপায় এবং উপযুক্ত অ্যাকাউন্ট বা প্রদানকারীর মাধ্যমে [Claude Code](https://code.claude.com/docs/en/quickstart) ব্যবহারের সুযোগ দরকার। কোন পেজ ফাইল বদলাবেন এবং প্রকল্পে পেজ চালু ও পরীক্ষার স্বাভাবিক উপায় কী তা জানুন। পাঠক, অপরিহার্য লেখা-লিংক, অনুমোদিত রং, ফন্ট, লোগো এবং সমাধানের একটিমাত্র দৃশ্যগত সমস্যা লিখুন। প্রস্তাবিত পরিবর্তন বিচারের জন্য মালিকের সিদ্ধান্ত কাজের কপির পাশে রাখুন।

ক্লায়েন্টের ব্যক্তিগত উপকরণ দেওয়ার আগে অ্যাকাউন্টের [ডেটা নীতি](https://code.claude.com/docs/en/data-usage) ও [টুল অনুমতি](https://code.claude.com/docs/en/permissions) দেখুন। Claude Code অ্যাকাউন্টের শর্ত অনুযায়ী প্রম্পট ও প্রকল্পের বিষয় প্রক্রিয়া করে; স্থানীয় প্রকল্প মানেই মডেল সেশন শুধু স্থানীয় নয়। কাজের মাধ্যমে প্রকাশিত ব্যক্তিগত লেখা, উপকরণ বা কোড শেয়ারের অনুমতি নিশ্চিত করুন।

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

1. খুলুন [স্থির সংগ্রহের README](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md)। এমন একটি `design-md/<name>/DESIGN.md` নিন যার ধারণা নির্ধারিত সমস্যার উপযোগী। ব্যবহারের আগে পুরো ফাইল পড়ুন। [Notion উদাহরণ](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md)-এ বিন্যাস, টাইপ, ফাঁক ও উপাদানের পরামর্শের ধরন দেখা যায়। এতে ক্যাপসুল ও আয়তাকার দুই ধরনের বোতাম বলা হয়েছে। এই বিরোধের কারণে নিজের সিদ্ধান্ত নিন, Claude Code-কে প্রতিটি লাইন মানতে বলবেন না।
2. ওই একটিমাত্র স্থির `DESIGN.md` কাজের প্রকল্পে কপি করুন, যেমন `design-reference/DESIGN.md`-এ। পাশে মূল URL, পাথ ও কমিট `3b605329240ce735b510037cca322f1831fdd7f8` লিখুন। কপির সঙ্গে রিপোজিটরির [MIT কপিরাইট ও অনুমতির বিজ্ঞপ্তি](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) রাখুন। Markdown রেফারেন্সে প্যাকেজ ইনস্টল লাগে না। লাইসেন্স রিপোজিটরির উপকরণে প্রযোজ্য; দেখানো কোম্পানির লোগো, ফন্ট ফাইল, ছবি বা ট্রেডমার্ক ব্যবহারের অধিকার দেয় না।
3. অনুমোদিত প্রকল্প থেকে Claude Code খুলে কপি করা ফাইল স্পষ্ট প্রসঙ্গ হিসেবে দিন। Anthropic [ফাইল রেফারেন্স](https://code.claude.com/docs/en/common-workflows) এবং আলাদা [প্রকল্প নির্দেশ ফাইল](https://code.claude.com/docs/en/memory) ব্যাখ্যা করে; ফোল্ডারে স্বতন্ত্র `DESIGN.md` রাখলেই Claude Code সেটি লোড করেছে প্রমাণ হয় না। নিচের বন্ধনীতে পেজ পাথ ও মালিকের নিয়ম প্রকৃত মানে বদলান, এবং সম্পাদনা গ্রহণের আগে রেফারেন্স পড়ার নিশ্চয়তা নিন।

```markdown
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 প্রোটোটাইপ গাইড](https://bigchange.ai/blog/genspark-design-prototype-source-zip) হোস্ট করা প্রোটোটাইপ কপি ও রপ্তানি করা সোর্স ZIP পরীক্ষা বোঝায়। ওই কাজের শুরুর উপাদান ও সমাপ্তির মানদণ্ড আলাদা।

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

- [VoltAgent-এর স্থির README](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) সংগ্রহ ও প্রকাশ্য সাইটের যেমন-আছে বিশ্লেষণ বোঝায়। ফাইল সংখ্যা স্থির রিকার্সিভ ট্রি থেকে, ভবিষ্যৎ সংস্করণের দাবি নয়।
- স্থির সংস্করণের [Notion `DESIGN.md`](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) ধরন ও অভ্যন্তরীণ বিরোধ দেখায়। এটি Notion-অনুমোদিত স্পেসিফিকেশন বা উপকরণের অধিকার নয়।
- রিপোজিটরির [MIT লাইসেন্স](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) কপি বা গুরুত্বপূর্ণ অংশে কপিরাইট ও অনুমতির বিজ্ঞপ্তি রাখতে বলে।
- Anthropic-এর [Claude Code শুরুর গাইড](https://code.claude.com/docs/en/quickstart), [ফাইল রেফারেন্স নির্দেশনা](https://code.claude.com/docs/en/common-workflows) এবং [প্রকল্প নির্দেশের নথি](https://code.claude.com/docs/en/memory) প্রবেশাধিকার ও স্পষ্ট প্রসঙ্গ ব্যাখ্যা করে। এগুলো এই পেজ সম্পাদনা বা স্বতন্ত্র রেফারেন্স স্বয়ংক্রিয় লোড যাচাই করে না।
- Anthropic-এর [খরচ](https://code.claude.com/docs/en/costs), [ডেটা ব্যবহার](https://code.claude.com/docs/en/data-usage) ও [অনুমতির](https://code.claude.com/docs/en/permissions) নথি অ্যাকাউন্টভেদে ব্যবহার ও নিয়ন্ত্রণ বোঝায়। কোনো সেশন, বিল বা ফলের পেজ এই গাইডে পরীক্ষা করা হয়নি।

## Sources

- [Awesome DESIGN.md স্থির README](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) — অপরিবর্তনীয় কমিটে রিপোজিটরির মূল বিবরণ ও একটি ফাইল কপির নির্দেশ। এটি প্রকাশ্য সাইট বিশ্লেষণ যেমন আছে তেমন দেয়; ফলের মানের ভাষা প্রচারমূলক। স্বাধীনভাবে পড়া পূর্ণ ট্রিতে ৮৪টি সরাসরি DESIGN.md আছে, সংখ্যা ওই সংস্করণের।
- [স্থির কমিটে Notion DESIGN.md উদাহরণ](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) — বিন্যাস, ফাঁক, টাইপোগ্রাফি ও উপাদান বিশ্লেষণের উদাহরণ। ক্যাপসুল বা আয়তাকার বোতাম নিয়ে বিরোধ, পরীক্ষিত হোভার বা গতি নেই এবং অপরীক্ষিত কোড-পরীক্ষা কমান্ডের প্রস্তাব আছে। কমিউনিটি বিশ্লেষণ, Notion-এর আনুষ্ঠানিক ব্র্যান্ড স্পেসিফিকেশন বা উপকরণ কপির অনুমতি নয়।
- [Awesome DESIGN.md MIT লাইসেন্স](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) — Copyright (c) 2026 VoltAgent; কপি বা গুরুত্বপূর্ণ অংশে কপিরাইট ও অনুমতির বিজ্ঞপ্তি থাকতে হবে। এই লাইসেন্স দেখানো সাইটের ট্রেডমার্ক, লোগো, মালিকানাধীন ফন্ট বা ছবির অধিকার প্রতিষ্ঠা করে না।
- [Claude Code দ্রুত শুরু](https://code.claude.com/docs/en/quickstart) — প্রকল্প, অ্যাকাউন্ট বা প্রদানকারী এবং সাইন-ইনের আনুষ্ঠানিক শর্ত। পাঠককে উপযুক্ত পথ ও নিজের প্রকল্প ব্যবহার করতে হবে; BIG CHANGE Claude Code সেটআপ বা অর্থপ্রদত্ত অ্যাকাউন্ট পরীক্ষা করেনি।
- [Claude Code সাধারণ কর্মপ্রবাহ](https://code.claude.com/docs/en/common-workflows) — স্পষ্ট @file প্রসঙ্গ ও প্রকল্প কাজের আনুষ্ঠানিক নির্দেশনা। সেটিং ও সীমার মধ্যে ইচ্ছাকৃতভাবে কপি ফাইল উল্লেখ সমর্থিত, যেকোনো DESIGN.md স্বয়ংক্রিয় লোড নয়।
- [Claude Code প্রকল্প মেমরি](https://code.claude.com/docs/en/memory) — প্রকল্প নির্দেশ ফাইল ও কনফিগারেশনভেদে লোড বোঝায়। রিপোজিটরিতে স্বতন্ত্র DESIGN.md থাকলেই লোড হবে বলে না; এই গাইড নির্দেশ কনফিগারেশন বদলায় না।
- [Claude Code খরচ](https://code.claude.com/docs/en/costs) — অ্যাকাউন্টনির্ভর ব্যবহার ও বিলের প্রেক্ষাপট। Markdown রেফারেন্স প্যাকেজ নির্ভরতা যোগ করে না, কিন্তু গাইড Claude Code কাজের স্থির দাম, বিনামূল্যের কোটা বা সময় সাশ্রয় প্রতিষ্ঠা করে না।
- [Claude Code ডেটা ব্যবহার](https://code.claude.com/docs/en/data-usage) — অ্যাকাউন্টভেদে আনুষ্ঠানিক ডেটা প্রক্রিয়াকরণ ও স্থানীয় কথোপকথন রেকর্ডের আচরণ। ব্যক্তিগত ক্লায়েন্ট কোড বা উপকরণ ভাগের আগে মালিককে নীতি দেখতে হবে; সম্পূর্ণ স্থানীয় প্রক্রিয়া বা প্রশিক্ষণের সর্বজনীন দাবি নেই।
- [Claude Code অনুমতি](https://code.claude.com/docs/en/permissions) — আনুষ্ঠানিক টুল অনুমতি নিয়ন্ত্রণ। প্রম্পটের নির্দেশ নিজে টুল অ্যাক্সেস দেয় বা বলবৎ করে না; প্রস্তাবিত কাজ ও সত্যি বদলানো ফাইল পাঠককে পরীক্ষা করতে হবে।