راهنماهای سناریومحور

یک صفحهٔ ورود کامل با شمارهٔ موبایل و کد تأیید، با برند خودت، بدون نوشتن دستی هیچ کامپوننتی.

1. ۱

   دیگ را نصب کن. init رنگ برند، فونت و ایجنتت را می‌پرسد و فایل قواعد ایجنت را می‌سازد.

   npx digdesign@latest init

2. ۲

   ایجنت را به MCP دیگ و دیگچه وصل کن (دستور هر ایجنت در صفحهٔ راه‌اندازی ایجنت است).

3. ۳

   این را به ایجنت بده:

   با MCP دیگ صفحهٔ ورود با شمارهٔ موبایل و رمز یک‌بارمصرف بساز. اول list_blocks را ببین و از بلاک login-otp شروع کن، چک‌لیست adapt آن را انجام بده، آیکون‌ها را از دیگچه بگیر و در پایان کد را با review_code بازبینی کن.

4. ۴

   صفحه را در موبایل و دسکتاپ، روشن و تیره ببین. اگر ایجنت جایی از قاعده‌ها رد شد، همان را با review_code به او نشان بده.

داشبورد تراکنش‌ها و موجودی با نمودار، کارت آماری و جدول، با دادهٔ فارسی و ارقام درست.

1. ۱

   صفحهٔ بلاک داشبورد مالی را باز کن: کد کامل و یک دستور نصب برای همهٔ کامپوننت‌هایی که لازم دارد آن‌جاست. ایجنتِ وصل به MCP همین را با get_block می‌گیرد.

2. ۲

   بعد از ایجنت بخواه داده را با دادهٔ خودت عوض کند:

   با get_block از بلاک dashboard-finance شروع کن و آن را با دادهٔ API ما (endpoint: /api/transactions) وصل کن. مبلغ‌ها تومان با جداکنندهٔ هزارگان و ارقام فارسی، تاریخ‌ها شمسی و نسبی. قبل از تحویل get_page_patterns برای dashboard را بخوان و کد را با review_code بازبینی کن.

3. ۳

   رنگ وضعیت‌ها را چک کن: ورودی سبز، خروجی رنگ متن عادی، و هیچ وضعیتی فقط با رنگ گفته نشده باشد.

ثبت‌نام سه‌مرحله‌ای با کد ملی، موبایل و تاریخ تولد شمسی، با خطاهای انسانی کنار هر فیلد.

1. ۱

   از بلاک ثبت‌نام مرحله‌ای شروع کن (کد و دستور نصب در صفحهٔ بلاک، یا get_block در MCP).

2. ۲

   از ایجنت بخواه مرحله‌ها و اعتبارسنجی را بسازد:

   فرم ثبت‌نام سه‌مرحله‌ای بساز: اطلاعات فردی (نام، کد ملی، تاریخ تولد شمسی)، تماس (موبایل، ایمیل) و تأیید. از TextField با label و description استفاده کن، خطا را بعد از ترک فیلد و کنار همان فیلد نشان بده («کد ملی ۱۰ رقم است، ۹ رقم وارد شده»). همهٔ کنترل‌ها در ControlSizeProvider size=xl باشند و در پایان review_code بزن.

3. ۳

   فرم نیمه‌پر را رفرش کن؛ داده نباید بی‌صدا پاک شود.

یک رنگ برند بده و تم روشن و تیرهٔ کامل با کنتراست تضمینی بگیر، هم در کد هم در فیگما.

1. ۱

   در صفحهٔ راه‌اندازی ایجنت رنگ برند را بزن یا از پالت انتخاب کن و پیش‌نمایش زنده را ببین.

2. ۲

   یا مستقیم در پروژه:

   npx digdesign@latest theme brand "#2563eb"

3. ۳

   برای فیگما، توکن‌ها را در قالب DTCG بگیر و هر حالت را یک mode وارد کن:

   https://docs.digdesign.ir/api/tokens?mode=light&brand=%232563eb

صفحهٔ گفت‌وگو با دستیار که وضعیت کارش را نشان می‌دهد، منبع می‌آورد و پیش از کار پرهزینه تأیید می‌گیرد.

1. ۱

   از بلاک چت هوش مصنوعی شروع کن (کد و دستور نصب در صفحهٔ بلاک، یا get_block در MCP).

2. ۲

   از ایجنت بخواه تجربه را کامل کند:

   بلاک ai-chat را به API ما وصل کن. وضعیت کار با Thinking و ToolChips دیده شود، پاسخ با StreamingText بیاید و دکمهٔ ارسال در حین پاسخ «توقف» شود، منبع‌ها با ContextCards کنار پاسخ باشند و قبل از هر پرداخت یا حذف ApprovalCard نشان بده. قاعده‌های get_page_patterns برای chat را رعایت کن و با review_code بازبینی کن.

3. ۳

   شش لحظهٔ راهنمای طراحی تجربهٔ AI را روی صفحه چک کن.