تصور کنید یک طراح رابط کاربری هستید که از تکرار همان کارتهای لبهگرد و رنگهای خستهکننده در تمام پیشنویسهای هوش مصنوعی به ستوه آمده است. این ابزار جدید دقیقاً برای پایان دادن به این «زبالههای بصری» ساخته شده است.
به نقل از مستندات GitHub، پروژهٔ claude-design-system-prompt که در ۵ جولای ۲۰۲۶ منتشر شد، یک پرامپت سیستمی مهندسیشده را ارائه میدهد تا مدلها را از تولید قالبهای تکراری SaaS، گرادینتهای تند و کارتهای مملو از ایموجی فاصله دهد. این ابار که تحت مجوز MIT منتشر شده است، به کاربران اجازه میدهد تا بدون نیاز به ذکر منبع، آن را در پروژههای تجاری بهکار بگیرند، تغییر دهند و توزیع کنند.
بیشتر دستیارهای هوش مصنوعی یک «سبک سازمانی» (House Style) شناختهشده دارند که با ویژگیهایی چون گوشههای گرد همراه با کارتهای دارای حاشیه چپ، تایپوگرافی یکنواخت با فونت Inter در همه جای صفحه و تزئینات کلیشهای با ایموجی شناخته میشود. این ابزار با پیادهسازی یک فلسفهٔ طراحی جامع، در برابر این روند میایستد و هر المان بصری را یک تصمیم محاسباتی میبیند، نه یک خروجی پیشفرض. همانطور که در تحلیل قبلی ما دربارهی چرا جایگزینهای غیر-عصبی برای LLMها با مشکل مواجه شدند اشاره کردیم، این پروژه ثابت میکند که مسیر رسیدن به خروجیهای بهتر هوش مصنوعی، نه از طریق یک معماری جدید، بلکه از طریق مهندسی پرامپت سیستمی و منضبطتر میگذرد.
بر اساس مستندات این پروژه، هستهٔ آن یک پرامپت سیستمی شامل ۲۰ فصل دقیق است که مدل زبانی بزرگ (LLM) — مثل کتابخانهداری که میلیاردها صفحه را خوانده و حالا با همان لحن کتابها جواب میدهد — را از حالت چت ساده به یک نقش حرفهای طراحی منتقل میکند. ارکان اصلی این سیستم عبارتاند از:
- انضباط محتوایی: رد هرگونه متن پرکننده (Filler Text)؛ هر المان باید دلیل وجودش را ثابت کند تا جایگاه خود را در صفحه به دست آورد.
- انضباط زیباییشناختی: رد صریح کلیشههای بصری AI و تعهد به یک پالت رنگی و لحن مشخص برای خروج از حالت پیشفرض.
- سلسلهمراتب بصری: تعریف مقیاسهای سختگیرانه برای ابعاد، رنگ، وزن فونت، موقعیت قرارگیری، تراکم عناصر و فاصلهگذاریها.
- احترام فنی: اولویت دادن به CSS Grid واقعی، فضای رنگی مدرن oklch() و ویژگی
text-wrap: prettyبهجای استفاده از ترفندهای ساده و ناکارآمد. - دسترسیپذیری: تمرکز ویژه بر استانداردهای WCAG، استفاده از HTML معنایی (Semantic HTML)، ناوبری با کیبورد و رعایت ترجیحات کاربر در مورد انیمیشنها و حرکت.
طبق گزارش منتشرشده در گیتهاب، این سامانه به دو بخش اصلی تقسیم میشود: یک پرامپت سیستمی جامع و ۱۴ «مهارت رویهای» (Procedural Skills) ماژولار. این مهارتها به عامل اجازه میدهند تا از حالت گفتگو خارج شده و وارد مراحل عملیاتی تولید شود:
تولید و اکتشاف
- discovery-questions: یک پروتکل دقیق برای شروع پروژهها جهت استخراج بستر و زمینههای لازم از کاربر.
- frontend-aesthetic-direction: تعیین جهت بصری در زمان نبود برند، با استفاده از یک پروتکل چهار-جهتی برای یافتن استایل مناسب.
- wireframe: تولید اکتشافات باfidelity پایین (Low-fi) در قالب ۳ یا تعداد بیشتری از گونههای مختلف.
- make-a-deck: ساخت ارائههای اسلایدی با استفاده از ساختار HTML.
- make-a-prototype: ساخت نمونههای اولیه تعاملی و قابل کلیک با HTML.
- make-tweakable: افزودن یک پنل تنظیمات شناور برای اعمال تغییرات بصری در لحظه.
- generate-variations: تولید ۳ یا تعداد بیشتری از نسخههای باکیفیت (Hi-fi) در محورهای مختلف طراحی.
استخراج سیستم و بازبینی
- design-system-extract: استخراج توکنهای طراحی (Design Tokens) از منابع و استایلهای تثبیتشده.
- component-extract: ایجاد یک فهرست جامع از اجزای رابط کاربری که قابلیت بازاستفاده دارند.
- ai-slop-check: شناسایی کلیشههای «سبک سازمانی» مدلها؛ بهویژه هدف قرار دادن پسزمینههای کرمی، تایپوگرافی Serif در نمایشگرهای اصلی و لهجههای رنگی آجری یا کهربایی.
- accessibility-audit: بررسی دقیق انطباق با استانداردهای WCAG، ساختار معنایی کدها و دسترسیپذیری کیبورد و حرکت.
- hierarchy-rhythm-review: بازبینی دقیق مقیاسهای اندازه، وزن، رنگ و ریتم فاصلهها.
- interaction-states-pass: تأیید صحت وضعیتهای تعاملی شامل hover، active، disabled، focus و loading.
- polish-pass: یک بازبینی جامع نهایی (Umbrella Review) به عنوان دروازه آخر برای تضمین کیفیت کلی و جزئیات.
این کتابخانه برای مدلهای پیشرو Anthropic، بهویژه خانواده Fable 5 و سری Opus 4.7/4.8 کالیبره شده است. این تخصصیسازی در راستای رویکرد جدید Anthropic در بهینهسازی مدلها برای کاربردهای پیچیده است، مشابه آنچه در استراتژی جدید Claude Science برای پژوهشهای علمی شاهد بودیم. در این سیستم، سهمیههای خشک و عددی (مثلاً دستور «دقیقاً ۵ سؤال بپرس») جای خود را به شرایط مشخص برای اقدام دادهاند. این رویکرد مانع از آن میشود که مدلها دستورات را مانند قراردادهای لفظی سختگیرانه ببینند که استقلال آنها را میگیرد و خلاقیت را میکشد. در عوض، یک «بند استقلال» (Autonomy Clause) برای تصمیمات کوچک تعریف شده است تا مدل بتواند یک گزینه معقول را انتخاب کرده و آن را گزارش دهد، بهجای اینکه برای هر تغییر کوچک اجازه بگیرد.
این مدلهای پیشرو همچنین محرکهای صریحی برای فعالسازی مهارتها و زیر-عاملها (Subagents) دریافت میکنند. از آنجا که مدلها ممکن است قابلیتهای اختیاری را نادیده بگیرند، پرامپت دستور میدهد که حتماً بعد از هر تغییر بصری اساسی، یک «تأییدکننده» (Verifier) برای بازبینی وارد عمل شود. برای درک بهتر اینکه این مدلها چگونه میان توانایی اجرای دستورات پیچیده و محدودیتهای داخلی خود تعادل برقرار میکنند، میتوان به تحلیل فنی ساختار عملکرد Claude رجوع کرد. علاوه بر این، عاملهای بازبین با رویکرد «پوشش-محور» (Coverage-first) عمل میکنند؛ به این معنا که تمام یافتهها را همراه با تخمین میزان اعتماد و شدت خطا گزارش میکنند تا هیچ مشکلی در سکوت حذف نشود.
برای کاربرانی که از مدلهای قدیمیتر مثل Claude 4.6، نسخههای ابتدایی Opus/Sonnet یا مدلهای غیر-Anthropic استفاده میکنند، یک نسخهٔ مجزا به نام Codex ارائه شده است. این نسخه جریانهای کاری موازی را به بازبینیهای متوالی تبدیل میکند تا با مدلهایی که فاقد توانایی پیروی پیچیده از دستورات هستند، سازگار شود. کاربران این مدلهای قدیمیتر ممکن است نیاز داشته باشند تا زبان دستوری (Imperative Language) را شدیدتر کنند تا مدل مراحل بازبینی یا راندهای پرسش را نپرد.
این تغییر، حرکتی بنیادین به سمت «تفکر سیستمی» (System Thinking) در مهندسی پرامپت است. با اولویت دادن به توکنها بهجای صفحات تکنفره و تأکید بر استانداردهای مهندسی CSS Grid و فضاهای رنگی oklch()، این پرامپت با LLM نه به عنوان یک تولیدکننده تخته-رویا (Mood-board)، بلکه به عنوان یک مهندس حرفهای رفتار میکند.
برای طراحان، این یعنی هوش مصنوعی بهجای پیشنهاد «مدرنیستهای» توخالی و پوچ، شروع به بازرسی دقیق حلقههای فوکوس (Focus Rings)، ترجیحات حرکتی و HTML معنایی میکند. این ابزار مدل را از یک تولیدکننده پیشنویس ساده به ابزاری تبدیل میکند که استانداردهای کیفی حرفهای را تحمیل میکند. از آنجا که پارامترهای نمونهبرداری مانند «دمای مدل» (Temperature) در برخی از این مدلهای جدید دیگر وجود ندارند، تنوع بصری بهجای تکیه بر تصادفی بودن، از طریق مشخصات دقیق (Specs) برای هر نسخه بهدست میآید.
شما اکنون میتوانید این سیستم را با قرار دادن پرامپت مارکداون در هر مدل زبانی که از دستورات سیستمی پشتیبانی میکند، مستقر نمایید. برای بهرهبرداری حداکثری از این گردش کار، مهارتها را بهصورت زنجیرهای به کار ببرید. یک جریان در پروژه جدید (Greenfield) میتواند به این ترتیب باشد:discovery-questions $
ightarrow$ frontend-aesthetic-direction $
ightarrow$ wireframe $
ightarrow$ make-a-prototype $
ightarrow$ polish-pass.
در مقابل، جریانی که با یک برند شناختهشده شروع میشود، باید از این مسیر برود:design-system-extract $
ightarrow$ generate-variations $
ightarrow$ make-tweakable $
ightarrow$ polish-pass.
گام بعدی شما
- پرامپت مارکداون را در هر مدل زبانی که از دستورات سیستمی پشتیبانی میکند قرار دهید.
- برای حداکثر بهرهوری، مهارتها را زنجیرهای کنید: از اکتشاف شروع کنید، به وایرفریم بروید و با بازبینی نهایی پایان دهید.
- اگر برند دارید، ابتدا از
design-system-extractاستفاده کنید تا مدل با هویت بصری شما همراستا شود.
اما تأثیر این رویکرد بر مدلهای کوچکتر و محلی حتی جالبتر است — در تحلیل ما دربارهی مدلهای زبانی کوچک (SLM) بخوانید.
گفتگو