DESIGN.md - UI design systems format shared with AI ·

প্রতিটি ডিজিটাল প্রোডাক্টেরই নিজস্ব একটি ভিজ্যুয়াল পরিচয় থাকে কালার প্যালেট, টাইপোগ্রাফি, স্পেসিং আর কম্পোনেন্টের স্টাইল।

এতদিন এই নিয়মগুলো আটকে থাকত কোনো ফিগমা ফাইলে, ব্রান্ড গাইডলাইনের ভারী পিডিএফে, নয়তো ডিজাইনারের চিন্তাভাবনায়। কিন্তু সমস্যা হলো, এগুলোর কোনোটাই কোনো এআই (AI) এজেন্ট সরাসরি পড়ে বুঝতে পারে না।

DESIGN.md - UI design systems format shared with AIv — DESIGN.md – UI design systems format shared with AI

ঠিক এই জায়গাটাতেই কাজ সহজ করে দেয় DESIGN.md।

DESIGN.md হলো একটি প্লেইন-টেক্সট ডিজাইন সিস্টেম ডকুমেন্ট, যা মানুষ এবং এআই এজেন্ট উভয়েই পড়তে পারে, এডিট করতে পারে এবং সেই অনুযায়ী ইন্টারফেস তৈরি করতে পারে। কোডিং এজেন্টের কাছে AGENTS.md যা, ডিজাইন এজেন্টের কাছে DESIGN.md ঠিক তা-ই:

File	Who reads it	What it defines
README.md	Humans	What the project is
AGENTS.md	Coding agents	How to build the project
DESIGN.md	Design agents	How the project should look and feel

What It Gives You

যখন কোনো ডিজাইন এজেন্ট (যেমন Stitch) আপনার প্রজেক্টের DESIGN.md ফাইলটি পড়ে, তখন এটি প্রতিটি স্ক্রিন একই ভিজ্যুয়াল নিয়মে তৈরি করে। এতে ব্রান্ডের নির্দিষ্ট কালার প্যালেট, টাইপোগ্রাফি এবং কম্পোনেন্ট প্যাটার্ন সবসময় ঠিক থাকে।

এই ডকুমেন্ট ছাড়া জেনারেট করা প্রতিটা স্ক্রিন ছন্নছাড়া দেখায়; কিন্তু DESIGN.md থাকলে পুরো অ্যাপে একটা দারুণ সামঞ্জস্য বজায় থাকে।

এটি কোনো স্ট্যাটিক বা অপরিবর্তনশীল কনফিগ ফাইল নয়, বরং একটি জীবন্ত ডকুমেন্ট। ডিজাইন পরিবর্তনের সাথে সাথে এটিও আপডেট হয়।

এজেন্ট এটি তৈরি করে, আপনি তা রিফাইন করেন এবং যতবার নতুন স্ক্রিন বানান, ততবার এটি কার্যকর হয়।

Under the Hood

একটি আদর্শ DESIGN.md ফাইলে দুটি লেয়ার থাকে:

YAML Front Matter: এতে থাকে মেশিনের পাঠযোগ্য নিখুঁত ডিজাইন টোকেন (যেমন হেক্স কোড, ফন্ট প্রপার্টি, স্পেসিং স্কেল)।
Markdown Body: মানুষের পাঠযোগ্য ব্যাখ্যামূলক টেক্সট, যা এজেন্টকে জানায় কেন এই নির্দিষ্ট ডিজাইন নীতি বেছে নেওয়া হয়েছে।

টোকেন এজেন্টকে দেয় সঠিক পরিমাপ, আর বিবরণ দেয় ডিজাইনের পেছনের যুক্তি।

The Philosophy

DESIGN.md কোনো বাঁধাধরা নিয়ম চাপিয়ে দেয় না, বরং একটি মজবুত ভিত্তি গড়ে দেয়। রঙ, ফন্ট, লেআউট আর কম্পোনেন্টের জন্য এটি এমন একটি কমন প্ল্যাটফর্ম যা টিম, টুল এবং এআই এজেন্ট সবাই এক বাক্যে বুঝতে পারে।

প্রজেক্টের প্রয়োজন অনুযায়ী এটিকে বাড়িয়ে নেওয়ার পুরো স্বাধীনতা এখানে রয়েছে।

How They’re Created

আপনার কাজের ধরন অনুযায়ী তিনটি উপায়ে এটি তৈরি করা যায়:

Let the agent generate it:শুধুমাত্র আপনার প্রজেক্টের ভাব বা ভাইব লিখে প্রম্পট দিন। যেমন:“A playful coffee shop ordering app with warm colors, rounded corners, and a friendly feel”এজেন্ট স্বয়ংক্রিয়ভাবে একটি সম্পূর্ণ ডিজাইন সিস্টেম বানিয়ে তা DESIGN.md ফাইলে গুছিয়ে দেবে।
Derive from branding:যদি আপনার আগে থেকেই ওয়েবসাইট বা ব্রান্ড গাইডলাইন থাকে, তবে শুধু তার ইউআরএল (URL) বা ছবি দিন। এজেন্ট সেখান থেকে কালার, ফন্ট ও স্টাইল প্যাটার্ন বের করে নতুন DESIGN.md বানিয়ে নেবে।
Write it by hand:যাঁরা সম্পূর্ণ নিয়ন্ত্রণ চান, তাঁরা সরাসরি স্ট্যান্ডার্ড মার্কডাউন এবং YAML ব্যবহার করে কোড এডিটরেই এই ফাইলটি লিখে ফেলতে পারেন।

Example

নিচে ডেভেলপারদের প্রোডাক্টিভিটি অ্যাপের একটি মিনিমাল DESIGN.md ডেমো দেওয়া হলো:

Markdown

---
name: DevFocus Dark
colors:
  primary: "#2665fd"
  secondary: "#475569"
  surface: "#0b1326"
  on-surface: "#dae2fd"
  error: "#ffb4ab"
typography:
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
rounded:
  md: 8px
---

# Design System

## Overview
A focused, minimal dark interface for a developer productivity tool.
Clean lines, low visual noise, high information density.

## Colors
- **Primary** (#2665fd): CTAs, active states, key interactive elements
- **Secondary** (#475569): Supporting UI, chips, secondary actions
- **Surface** (#0b1326): Page backgrounds
- **On-surface** (#dae2fd): Primary text on dark backgrounds
- **Error** (#ffb4ab): Validation errors, destructive actions

## Typography
- **Headlines**: Inter, semi-bold
- **Body**: Inter, regular, 14–16px
- **Labels**: Inter, medium, 12px, uppercase for section headers

## Components
- **Buttons**: Rounded (8px), primary uses brand blue fill
- **Inputs**: 1px border, subtle surface-variant background
- **Cards**: No elevation, relies on border and background contrast

## Do's and Don'ts
- Do use the primary color sparingly, only for the most important action
- Don't mix rounded and sharp corners in the same view
- Do maintain 4:1 contrast ratio for all text

পরের বার যখন কোনো এআই টুল দিয়ে নতুন কোনো ইউজার ইন্টারফেস (UI) জেনারেট করবেন, তখন এই DESIGN.md ফাইলটিই নিশ্চিত করবে যে প্রতিটা পিক্সেল আপনার ব্র্যান্ড গাইডলাইন অনুযায়ী নিখুঁতভাবে বসছে।