چرا خروجی کد فرانت‌اند هوش مصنوعی شبیه طرح‌های فیگما نمی‌شود؟

تصور کنید ساعت‌ها با نهایت وسواس در فیگما وقت صرف کرده‌اید؛ تک‌تک پیکسل‌ها، وزن فونت‌ها، توازن فاصله‌ها و هارمونی سایه‌های نرم را چیده‌اید تا یک شاهکار بصری خلق شود. اما زمانی که اسکرین‌شات یا مشخصات این رابط کاربری را به یک هوش مصنوعی مولد تحویل می‌دهید تا آن را به کدهای فرانت‌اند تبدیل کند، خروجی نهایی اغلب شوکه‌کننده است: اسکلتی خام از تگ‌های بی‌روح با استایل‌های پیش‌فرض که بیش از هر چیز شبیه به وبلاگ‌های دست‌ساز دهه ۲۰۰۰ میلادی به نظر می‌رسد!

پدیده بازگشت به میانگین؛ تله‌ی پنهان مدل‌های زبانی

ریشه این معضل در نحوه آموزش مدل‌های زبانی بزرگ نهفته است. این مدل‌ها به دلیل ماهیت آماری داده‌های تمرینی خود، همواره گرایش قدرتمندی به انتخاب «میانگین‌ها» دارند. در حقیقت مدل ریسک نمی‌کند؛ زمانی که از او یک فرم ورود یا یک جدول داده می‌خواهید، امن‌ترین، ساده‌ترین و خسته‌کننده‌ترین ساختاری را که میلیون‌ها بار در صفحات وب دیده است بازتولید می‌کند. هوش مصنوعی ذاتاً سلیقه بصری، درک زیبایی‌شناختی و نگاه مایکرو به جزئیات ندارد. راهکار عبور از این باتلاق، پرامپت‌نویسی‌های طولانی و فرساینده نیست؛ بلکه تحمیل سیستماتیک سلیقه و استاندارد به معماری مدل است.

پنج ابزار کلیدی برای ارتقای هوش مصنوعی از یک تایپیست به کارگردان دیزاین

برای اینکه توسعه‌دهنده به جای دست‌وپنجه نرم کردن با کدهای دست‌پایین، جایگاه «کارگردان هنری» را بر عهده بگیرد، پنج مهارت و ابزار محوری وارد عمل می‌شوند تا خروجی فرانت‌اند را دگرگون سازند:

نکته شگفت‌انگیز این ابزارها در این است که هیچ‌کدام جادو نیستند و به پکیج‌های سنگین چندصد مگابایتی وابسته نیستند؛ تمامی این مکانیزم‌ها از طریق مفهومی قدرتمند به نام Skill در اکوسیستم کلاد کد فعال می‌شوند.

مهارت (Skill) در Claude Code چیست و چه فرقی با MCP و Plugin دارد؟

برای ایجاد یک معماری توسعه بهینه، مرزبندی میان مفاهیم زیر را در ذهن داشته باشید:

• مهارت (Skill): بر کارهای تخصصی و تکراری (مثل بازبینی کد دسترسی‌پذیری یا نگارش پیام‌های کامیت) تمرکز دارد.
• پروتکل بافت مدل (MCP Server): یک اتصال زنده به دیتابیس‌ها، وب‌سرویس‌ها و فضاهای خارج از پروژه مهیا می‌کند.
• پلاگین (Plugin): مجموعه‌ای منسجم و بسته‌بندی‌شده است که می‌تواند هم‌زمان شامل چند Skill، چند اتصال MCP و فایل‌های واسط تعاملی (Hook) باشد.
• فایل CLAUDE.md: قانون اساسی و بالادستی مخزن پروژه است که معمار، ساختار پوشه‌ها و قراردادهای نام‌گذاری را برای کلاد دیکته می‌کند.
• فایل DESIGN.md: سند مرجع هویت بصری است و توکن‌های طراحی (پالت رنگ، ابعاد فونت و اندازه‌ها) را نگهداری می‌کند.

آناتومی و کالبدشکافی ساختار فایل SKILL.md

یک مهارت استاندارد نیازی به کامپایلرهای حجیم ندارد. تمامی شاکله آن در ساختاری خوانا، مدولار و سبک جای می‌گیرد:

ساختار شاخه‌ای یک مهارت پیشرفته معمولاً به این صورت سازمان‌دهی می‌شود:

my-skill/

├── SKILL.md # مغز متفکر و تعاریف سطح بالا (پیشنهاد: زیر ۵۰۰ خط)
├── references/ # اسناد تکمیلی عمیق برای مطالعه برحسب نیاز
│ ├── accessibility.md
│ └── design-system.md
└── scripts/ # اسکریپت‌های اتوماسیون و ابزارهای خط فرمان
└── helper.py

چرا بخش Description در فرانت‌متر حیاتی‌ترین پارامتر است؟

در ابتدای فایل SKILL.md، بخشی به نام فرانت‌متر (YAML Frontmatter) قرار می‌گیرد که با سه خط تیره --- آغاز و خاتمه می‌یابد. هوش مصنوعی برای درک زمان اجرای مهارت، از سیستم مسیریابی معنایی (Semantic Routing) بر پایه فیلد description استفاده می‌کند.

اگر در بخش توضیحات با تنبلی بنویسید: «کدها را مرتب می‌کند»، مدل در زمان مناسب مهارت را فرامی‌خواند؟ قطعاً خیر! عبارت باید شفاف، کنش‌گرا و شرطی باشد. برای مثال:

---

name: ui-review
description: رابط کاربری را از نظر هماهنگی بصری، دسترس‌پذیری و واکنش‌گرایی بررسی می‌کند. هنگام بازبینی کامپوننت‌های فرانت‌اند یا ویرایش فایل‌های tsx از این مهارت استفاده کن.
---

استراتژی استقرار؛ نصب پروژه‌ای در برابر سراسری

بسته به ماهیت کاری که انجام می‌دهید، محل ذخیره‌سازی مهارت‌ها متفاوت خواهد بود:

• نصب در سطح پروژه (Project-Level):
  در مسیر your-project/.claude/skills/[نام-مهارت]/ قرار می‌گیرد. مزیت آن این است که فایل‌ها درون مخزن Git ثبت می‌شوند؛ بنابراین تمامی همکاران تیم هنگام کلون کردن پروژه به قواعد و ابزارهای یکسان دسترسی خواهند داشت.
• نصب شخصی یا سراسری (Global-Level):
  در دایرکتوری خانگی سیستم‌عامل کاربر یعنی مسیر ~/.claude/skills/[نام-مهارت]/ ایجاد می‌شود. این فضا برای عادات شخصی توسعه‌دهنده (مانند نحوه نوشتن پیام کامیت اختصاصی یا استانداردهای شخصی کنترل کیفیت) ایده‌آل است و در تمام پروژه‌های سیستم اجرا می‌شود.

آموزش گام‌به‌گام سه روش نصب و راه‌اندازی Skill

روش اول: راه‌اندازی دستی در پروژه (شفاف‌ترین متد)

1. در ریشه پروژه، دایرکتوری مورد نظر را ایجاد کنید:

   mkdir -p .claude/skills/ui-review

2. فایل SKILL.md را داخل آن بسازید و فرانت‌متر YAML را همراه با دستورالعمل‌های بازبینی در آن قرار دهید.
3. ترمینال را باز کرده و با تایپ claude وارد محیط تعاملی شوید. با دستور /skills فهرست مهارت‌های بارگذاری‌شده را بررسی کرده یا مستقیماً دستور /ui-review را صدا بزنید.

روش دوم: نصب سریع با ابزار خط فرمان npx skills

ابزار توسعه‌یافته در اکوسیستم ورسل لَبز، امکان نصب پکیج‌های استاندارد و معتبر گیت‌هاب را با سرعت بالا ممکن می‌سازد:

# مشاهده فهرست مهارت‌های موجود در یک مخزن

npx skills add vercel-labs/agent-skills --list

نصب یک مهارت مشخص برای عامل Claude Code
npx skills add vercel-labs/agent-skills --skill web-design-guidelines --agent claude-code

نصب به صورت سراسری برای تمامی پروژه‌ها
npx skills add vercel-labs/agent-skills --skill web-design-guidelines --agent claude-code --global

نکته فنی میان Symlink و Copy: در زمان نصب، گزینه Symlink یک نسخه مرجع نگه می‌دارد و برای پروژه‌هایی که نیازمند به‌روزرسانی سریع هستند عالی است؛ اما اگر استقلال کامل فایل‌ها در سیستم هدف مدنظر باشد، گزینه --copy را لحاظ کنید.

روش سوم: نصب از طریق افزونه‌های رسمی (Plugin Marketplace)

مهارت‌هایی که به عنوان زیرمجموعه یک بسته کامل افزونه منتشر می‌شوند، مستقیماً از داخل محیط دستورات کلاد کد قابل مدیریت هستند:

# بررسی فهرست افزونه‌ها

/plugin

نصب افزونه رسمی
/plugin install skill-creator@claude-plugins-official

بارگذاری مجدد پس از نصب
/reload-plugins

مهندسی بومی‌سازی رابط‌های راست‌چین (RTL) فارسی در فرانت‌اند

یکی از نقاط ضعف بزرگ طراحی‌های هوش مصنوعی زمانی رخ می‌دهد که پروژه به زبان‌های راست‌چین مانند فارسی وارد می‌شود. استفاده نابجا از مقادیر ثابت انگلیسی، کل ساختار منوها، فاصله‌ها و جایگاه المان‌ها را به هم می‌ریزد. برای غلبه بر این چالش، باید سه اصل سخت‌گیرانه را در فایل دیزاین لحاظ کنید:

1. مهاجرت قطعی به ویژگی‌های منطقی (CSS Logical Properties):
   کلاد را موظف کنید به جای مشخصه‌های قدیمی مانند margin-right یا left: 10px، منحصراً از خواص منطقی نظیر margin-inline-start و inset-inline-end استفاده کند تا بدون نیاز به نوشتن فایل‌های مجزا، فواصل بر اساس جهت صفحه به صورت خودکار منطبق شوند.
2. تنظیم نسبت ارتفاع خطوط (Line-Height) تایپوگرافی فارسی:
   حروف الفبای فارسی به دلیل پیوستگی، اعراب و کشیدگی‌های عمودی به فاصله خط بیشتری نسبت به حروف لاتین نیازمندند. عدم رعایت این اصل در فایل دیزاین، به متون متراکم و ناخوانا ختم خواهد شد.
3. قانون تفکیک و جهت‌آگاهی آیکون‌ها:
   آیکون‌هایی که معنای جهتی دارند (مانند پیکان‌های بازگشت و رفتن به مرحله بعد) باید در حالت فارسی آینه‌ای (Flip) شوند؛ اما آیکون‌های جهان‌شمول و ثابت (نظیر علامت ذره‌بین جستجو، چرخ‌دنده تنظیمات یا ساعت) نباید تغییر جهت پیدا کنند.

چک‌لیست امنیتی گارد سرخ در اجرای اسکریپت‌ها

یک مهارت صرفاً یک متن راهنما نیست؛ می‌تواند به کدهای اجرایی شل (Bash) دسترسی پیدا کند! وارد کردن مهارت‌های ناشناس از اینترنت می‌تواند به سرقت کلیدهای امنیتی یا پاک شدن دیتابیس لوکال منجر شود.

راهنمای عیب‌یابی خطاهای متداول عدم شناسایی مهارت

چالش فکری: آیا اینترنت در حال تبدیل به یک کارخانه تکراری است؟

بیایید در پایان، زاویه دید خود را کمی فراتر ببریم. سیستم‌های دیزاین پیشرفته نظیر استرایپ یا لینیر، با تزریق استاندارد و پالایش کدهای شلخته، سطح کیفی خروجی‌ها را به طور چشم‌گیری بالا می‌برند. اما فرض کنید تمام برنامه‌نویسان دنیا از سه یا چهار فایل مشترک DESIGN.md برای هدایت هوش مصنوعی استفاده کنند؛ در چنین سناریویی، وب ده‌سال آینده چگونه به نظر خواهد رسید؟

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