প্রকল্প সম্পর্কে

brandmd হলো একটি কমান্ড-লাইন টুল যা যেকোনো লাইভ ওয়েবসাইটকে একটি মেশিন-রিডেবল ডিজাইন স্পেসিফিকেশনে রূপান্তর করে। এটি পেজটি রেন্ডার করে, এর স্টাইলিং পর্যবেক্ষণ করে এবং ফলাফলটি DESIGN.md হিসেবে লিখে, যা @google/design.md স্পেক দ্বারা সংজ্ঞায়িত ফরম্যাট: এতে YAML frontmatter-এ রঙ, টাইপোগ্রাফি, রাউন্ডেড কর্নার, স্পেসিং এবং কম্পোনেন্টের টাইপড টোকেন থাকে এবং এরপর Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components এবং Do's and Don'ts-এর মতো প্রোজ সেকশন থাকে। জেনারেট করা ফাইলগুলো অফিসিয়াল @google/design.md লিন্ট কমান্ডের অধীনে ভ্যালিডেট করার জন্য তৈরি করা হয়েছে। এর মূল উদ্দেশ্য হলো AI কোডিং এজেন্টরা যখন প্রজেক্টের রঙ, ফন্ট, স্পেসিং এবং কম্পোনেন্ট কনভেনশন সম্পর্কে জানে না, তখন তারা সাধারণ ইন্টারফেস তৈরি করে। প্রজেক্ট রুট-এ DESIGN.md রাখলে Claude Code, Cursor, Gemini CLI, Codex এবং Google Stitch-এর মতো এজেন্টরা শুরুতেই সেই কনটেক্সট পেয়ে যায়। একটি মাত্র কমান্ড, যেমন একটি URL-এর বিপরীতে npx brandmd চালানো এবং DESIGN.md লেখা যথেষ্ট; স্পেকটি ম্যানুয়ালি লেখার প্রয়োজন নেই। এক্সট্রাকশন প্রক্রিয়াটি লোকাল। টুলটি Playwright-এর মাধ্যমে একটি হেডলেস ব্রাউজার চালু করে, লেজি-লোডেড কন্টেন্ট ট্রিগার করতে স্ক্রল করে, কুকি ব্যানার এবং ওভারলে সরিয়ে ফেলে, :root থেকে CSS কাস্টম প্রপার্টিজ (মিডিয়া কোয়েরি সহ) পড়ে এবং দৃশ্যমান এলিমেন্ট থেকে কম্পিউটেড স্টাইল সংগ্রহ করে। এরপর এটি একই ধরণের রঙগুলোকে ক্লাস্টার করে, একটি স্পেসিং স্কেল এবং বেস গ্রিড ইউনিট বের করে, বর্ডার রেডিয়াই এবং শ্যাডো স্টাইল শনাক্ত করে এবং বাটন, কার্ড এবং ইনপুটের মতো কম্পোনেন্ট প্যাটার্ন চিনে নেয়। টাইপোগ্রাফি ডিটেকশন রোল-অ্যাওয়ার, যা বডি ফন্টের চেয়ে হেডিং এবং হেডিং-এর চেয়ে ডিসপ্লে ফন্টকে প্রাধান্য দেয়, এবং মনোস্পেস, ফলব্যাক ও আইকন ফন্টগুলো বাদ দেয়। ডিফল্ট পাথে কোনো LLM কল বা API কি-র প্রয়োজন হয় না। ডিফল্ট DESIGN.md-এর পাশাপাশি আরও কিছু আউটপুট ফরম্যাট দেওয়া হয়েছে: স্ক্রিপ্ট এবং টুলচেইনের জন্য র (raw) JSON টোকেন, CSS কাস্টম প্রপার্টিজ, একটি Tailwind v4 @theme ব্লক এবং সোয়াচ, টাইপ স্পেসিমেন, স্পেসিং ভিজ্যুয়ালাইজেশন এবং শ্যাডো উদাহরণসহ একটি স্বয়ংসম্পূর্ণ HTML ব্র্যান্ড গাইড। একাধিক URL পাস করে বিভিন্ন পেজের টোকেনগুলো মার্জ করা সম্ভব, যেখানে প্রতি পেজের ফ্রিকোয়েন্সি নরমালাইজ করা হয় যাতে একটি বাটন-ভারী ডকুমেন্টেশন পেজ হোমপেজকে ছাপিয়ে না যায়। একটি ঐচ্ছিক dark ফ্ল্যাগ prefers-color-scheme ব্যবহার করে ডার্ক-থিম টোকেন এক্সট্রাক্ট করে। একটি ঐচ্ছিক vision ফ্ল্যাগ Gemini API কি ব্যবহার করে স্ক্রিনশট থেকে ইলাস্ট্রেশন স্টাইল, ফটোগ্রাফি মুড এবং কপিরাইটিং ভয়েস কিউ যোগ করে। একটি agent ফ্ল্যাগ অতিরিক্তভাবে Cursor রুলস এবং স্কিল ফাইলগুলো ইউনিভার্সাল .agents/skills পাথ এবং Claude Code স্কিল ডিরেক্টরি উভয় জায়গায় লিখে দেয়, যাতে ম্যানুয়াল ওয়্যারিং ছাড়াই ব্র্যান্ড কনটেক্সট পাওয়া যায়। brandmd নিজেই একটি ইনস্টলযোগ্য Agent Skill হিসেবে ডিস্ট্রিবিউটেড এবং একটি সহযোগী রিপোজিটরি Tailwind CSS, shadcn/ui, Vercel, Mintlify এবং Anthropic-এর জন্য তৈরি ব্র্যান্ড স্কিল প্রদান করে। টুলটি ইচ্ছাকৃতভাবে fail-closed হিসেবে ডিজাইন করা হয়েছে। ব্লক পেজ, অ্যাক্সেস-ডিনাইড রেসপন্স, লগইন ওয়াল এবং খুব কম তথ্য থাকা পেজগুলোর ক্ষেত্রে এটি এক্সিট কোড ২ সহ রিফিউজাল প্রদান করে এবং কোনো আর্টিফ্যাক্ট লেখে না, যাতে একটি খারাপ ক্যাপচার ভালো DESIGN.md-কে ওভাররাইট করতে না পারে; একটি ওভাররাইড ফ্ল্যাগ আউটপুট ফোর্স করে তবে প্রতিটি ফরম্যাটে আর্টিফ্যাক্টটিকে চিহ্নিত করে। রাইট অপারেশনগুলো ট্রানজ্যাকশনাল, যা টেম্পোরারি ফাইল এবং রোলব্যাকসহ রিনেম ব্যবহার করে। এক্সিট কোডগুলো সাকসেস, অপারেশনাল বা ভ্যালিডেশন এরর, রিফিউজাল এবং check সাবকমান্ড দ্বারা শনাক্ত করা ড্রিফট-এর মধ্যে পার্থক্য করে। একটি check সাবকমান্ড ডিজাইন ড্রিফটের জন্য একটি ডেপ্লয়ড পেজের সাথে কমিটেড DESIGN.md-এর তুলনা করে। এটি রঙগুলোকে আনঅর্ডারড হেক্স ভ্যালুর পরিবর্তে সেমান্টিক রোল দ্বারা তুলনা করে এবং রোল হারিয়ে গেলে, রিপেইন্ট হলে অথবা প্রাইমারি বা সেকেন্ডারি ফন্ট পরিবর্তিত হলে বিল্ড ফেইল করে। ডকুমেন্টেশনে এর সীমাবদ্ধতাগুলো স্পষ্টভাবে বলা আছে: কম্পোনেন্ট ড্রিফট রিপোর্ট করা হয় তবে বিল্ড ফেইল করে না, সেকেন্ডারি ফন্টের পরিবর্তন লক্ষ্য করা নাও যেতে পারে এবং ডাইনামিকভাবে পরিবর্তনশীল পেজগুলো ভুল মেজর চেঞ্জ তৈরি করতে পারে, তাই বিশ্বাস করার আগে ফলাফলগুলো পুনরায় যাচাই করা উচিত। একটি আলাদা diff সাবকমান্ড দুটি DESIGN.md ফাইলের তুলনা করে এবং শেয়ারড ও ইউনিক কালার, টাইপোগ্রাফি, স্পেসিং, রেডিয়াই এবং প্রতি-কম্পোনেন্ট পার্থক্যের একটি মার্কডাউন রিপোর্ট এবং কী কপি করতে হবে তার একটি সিন্থেসিস তৈরি করে। রিপোজিটরিতে Stripe, Linear, GitHub, Vercel, Notion, Cursor, Anthropic, Figma, Supabase, Raycast এবং অন্যান্যদের উদাহরণ আউটপুটের একটি গ্যালারি অন্তর্ভুক্ত রয়েছে। প্রজেক্টটি MIT লাইসেন্সপ্রাপ্ত।