آموزش کار با کلاد کد | راه اندازی و اسکیل های مورد نیاز

آموزش کار با کلاد کد (Claude Code)؛ نصب، راه‌اندازی، افزودن اسکیل و اتصال به فیگما و VS Code

هوش مصنوعی دیگر فقط ابزاری برای پاسخ‌دادن به سؤالات برنامه‌نویسی نیست. امروزه ابزارهایی مانند Claude Code می‌توانند مستقیماً در پروژه‌های نرم‌افزاری فعالیت کنند، فایل‌ها را بررسی کنند، کد بنویسند، خطاها را برطرف کنند و حتی بخش‌هایی از فرایند توسعه نرم‌افزار را به‌صورت خودکار انجام دهند.
یکی از قابلیت‌های مهم Claude Code، امکان اتصال آن به ابزارهای توسعه مانند Visual Studio Code و Figma است. با استفاده از این قابلیت می‌توان طراحی رابط کاربری را در فیگما انجام داد و سپس از هوش مصنوعی برای تبدیل آن به کد استفاده کرد.

در این آموزش از دکتر گرافیک، ابتدا با Claude و Claude Code آشنا می‌شویم و سپس نصب، راه‌اندازی، افزودن Skills، اتصال به ابزارهای برنامه‌نویسی و روش‌های استفاده حرفه‌ای از آن را بررسی می‌کنیم.

کلاد (Claude) چیست؟

Claude یک خانواده از مدل‌های هوش مصنوعی است که توسط شرکت Anthropic توسعه یافته است. این مدل‌ها برای پردازش زبان طبیعی، تحلیل اطلاعات، تولید محتوا، استدلال و برنامه‌نویسی طراحی شده‌اند. کلاد می‌تواند کدهای نوشته‌شده به زبان‌های مختلف را تحلیل کند، مشکلات آن‌ها را توضیح دهد و برای توسعه نرم‌افزار پیشنهاد ارائه کند.

از مهم‌ترین کاربردهای Claude می‌توان به برنامه‌نویسی، تحلیل فایل‌ها، تولید مستندات فنی، بررسی خطاها و طراحی معماری نرم‌افزار اشاره کرد.
وب‌سایت رسمی: https://claude.ai

کلاد کد (Claude Code) چیست؟

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

• یک وب‌سایت با React یا Next.js طراحی کند.
• یک افزونه اختصاصی وردپرس بنویسد.
• مشکلات یک پروژه PHP یا Python را شناسایی کند.
• رابط کاربری طراحی‌شده در Figma را به کد تبدیل کند.
• ساختار پروژه را بررسی و کدهای تکراری را اصلاح کند.
• برای بخش‌های مختلف نرم‌افزار تست بنویسد و اجرا کند.

البته Claude Code همیشه بدون خطا عمل نمی‌کند و خروجی آن، به‌خصوص در پروژه‌های حساس، باید بررسی و آزمایش شود.
وب‌سایت رسمی: https://code.claude.com

برای استفاده از Claude Code به چه ابزارهایی نیاز داریم؟

پیش از نصب، بهتر است ابزارهای موردنیاز برای ایجاد یک محیط توسعه استاندارد را بشناسیم.

نکته مهم این است که برای نصب نسخه‌های جدید Claude Code الزاماً نیازی به نصب Node.js ندارید؛ زیرا روش نصب بومی نیز ارائه شده است. Node.js بیشتر برای پروژه‌های مبتنی بر جاوااسکریپت و ابزارهای مرتبط کاربرد دارد.

آموزش نصب و راه‌اندازی Claude Code

Claude Code روی سیستم‌عامل‌های macOS، Windows و Linux قابل استفاده است. برای شروع به اینترنت، یک محیط ترمینال و روش احراز هویت پشتیبانی‌شده نیاز دارید.

نصب Claude Code در ویندوز

در ویندوز می‌توانید از PowerShell برای نصب استفاده کنید. ابتدا PowerShell را باز کنید و دستور زیر را وارد کنید:

irm https://claude.ai/install.ps1 | iex

پس از پایان نصب، یک پنجره جدید از ترمینال باز کنید و دستور زیر را اجرا کنید:

claude --version

اگر شماره نسخه نمایش داده شد، ابزار نصب شده است. برای اجرای Claude Code کافی است دستور زیر را وارد کنید:

claude

در اولین اجرا، مراحل احراز هویت را تکمیل کنید. برای استفاده از Claude Code در ویندوز، وجود محیط ترمینال سازگار نیز اهمیت دارد. در صورت نیاز می‌توانید Git for Windows را نصب کنید تا Git Bash در دسترس باشد.

نصب Claude Code در مک (macOS)

در مک ابتدا برنامه Terminal را اجرا کنید. سپس دستور زیر را وارد کنید:

curl -fsSL https://claude.ai/install.sh | bash

پس از نصب، با دستور زیر نسخه برنامه را بررسی کنید:

claude --version

برای اجرای Claude Code:

claude

در اولین اجرا، وارد حساب کاربری خود شوید و مراحل اتصال را تکمیل کنید.

شروع اولین پروژه با Claude Code

فرض کنید می‌خواهیم یک وب‌سایت جدید طراحی کنیم. ابتدا یک پوشه برای پروژه ایجاد می‌کنیم. در macOS یا Linux:

mkdir my-website
cd my-website

در PowerShell ویندوز نیز همین دو دستور قابل استفاده هستند. سپس Claude Code را اجرا می‌کنیم:

claude

اکنون می‌توانیم درخواست خود را به زبان طبیعی بنویسیم. برای مثال:

Create a modern responsive website using
HTML, CSS, and JavaScript.

Use a clean design, semantic HTML,
and mobile-first responsive layouts.

Claude Code می‌تواند ساختار اولیه پروژه را ایجاد کند و فایل‌های موردنیاز را بنویسد.
نکته: بهتر است قبل از اجرای دستورات پیشنهادی و اعمال تغییرات گسترده، مجوزهای درخواستی ابزار را بررسی کنید.

آموزش اتصال Claude Code به Visual Studio Code

یکی از بهترین روش‌های استفاده از Claude Code، اجرای آن در کنار محیط برنامه‌نویسی Visual Studio Code است. VS Code به شما امکان می‌دهد ساختار فایل‌ها، تغییرات کد، ترمینال و خروجی پروژه را در یک محیط مدیریت کنید.

مرحله اول: نصب VS Code

ابتدا نرم‌افزار Visual Studio Code را از وب‌سایت رسمی دانلود و نصب کنید. آدرس رسمی:

https://code.visualstudio.com

این نرم‌افزار برای ویندوز، مک و لینوکس عرضه شده است.

مرحله دوم: نصب افزونه Claude Code

پس از اجرای VS Code:

1. وارد بخش Extensions شوید.
2. عبارت Claude Code را جست‌وجو کنید.
3. افزونه رسمی منتشرشده توسط Anthropic را انتخاب کنید.
4. روی Install کلیک کنید.
5. مراحل ورود به حساب کاربری را تکمیل کنید.

برای جلوگیری از نصب افزونه‌های غیررسمی، نام ناشر را بررسی کنید.

مرحله سوم: بازکردن پروژه

از منوی File گزینه Open Folder را انتخاب کرده و پوشه پروژه خود را باز کنید. پس از فعال‌سازی افزونه، می‌توانید از محیط Claude Code در VS Code استفاده کنید. همچنین امکان استفاده از Claude Code در ترمینال داخلی VS Code وجود دارد. برای این کار ترمینال را باز کنید و دستور زیر را اجرا کنید:

claude

مرحله چهارم: برنامه‌نویسی با Claude Code

اکنون می‌توانید از Claude Code بخواهید فایل‌های پروژه را بررسی کند. برای مثال:

Analyze this project and explain its structure.

Find potential bugs and security issues.

Do not modify any files without my approval.

این درخواست باعث می‌شود Claude ابتدا پروژه را بررسی کند و بدون تأیید شما تغییری اعمال نکند. اتصال Claude Code به VS Code به‌ویژه برای توسعه وب، طراحی افزونه‌های وردپرس، برنامه‌نویسی Python و پروژه‌های React کاربرد دارد.

اسکیل (Skill) در Claude Code چیست؟

یکی از مهم‌ترین قابلیت‌های Claude Code امکان افزودن Skills است. اسکیل‌ها مجموعه‌ای از دستورالعمل‌ها، منابع و در صورت نیاز اسکریپت‌های تخصصی هستند که به Claude Code کمک می‌کنند وظایف مشخصی را با روش و استاندارد دلخواه انجام دهد. برای مثال، می‌توان یک اسکیل اختصاصی برای توسعه افزونه‌های وردپرس ایجاد کرد که به Claude توضیح دهد:

• ساختار استاندارد افزونه وردپرس چگونه باشد.
• کدها با استانداردهای WordPress Coding Standards نوشته شوند.
• ورودی‌ها اعتبارسنجی و پاک‌سازی شوند.
• خروجی‌ها متناسب با زمینه استفاده Escape شوند.
• امنیت درخواست‌ها با Nonce و بررسی سطح دسترسی رعایت شود.
• از توابع و APIهای رسمی وردپرس استفاده شود.

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

تفاوت Skill و MCP چیست؟

این دو قابلیت کاربرد متفاوتی دارند.

به زبان ساده، Skill مشخص می‌کند Claude چگونه یک کار را انجام دهد؛ درحالی‌که MCP به آن امکان می‌دهد با ابزارهای دیگر ارتباط برقرار کند. این دو قابلیت می‌توانند مکمل یکدیگر باشند.

آموزش ساخت و افزودن Skill اختصاصی به Claude Code

برای ایجاد یک اسکیل، می‌توان از ساختار استاندارد فایل‌های Skill استفاده کرد.

مرحله اول: ساخت پوشه اسکیل

در پوشه اصلی پروژه، مسیر زیر را ایجاد کنید:

.claude/
└── skills/
    └── wordpress-developer/
        └── SKILL.md

فایل اصلی اسکیل باید با نام SKILL.md ذخیره شود.

مرحله دوم: نوشتن دستورالعمل‌های اسکیل

فایل SKILL.md را باز کنید و محتوای زیر را قرار دهید:

---
name: wordpress-developer
description: Develop secure WordPress plugins and themes using WordPress coding standards.
---

# WordPress Developer

When developing WordPress projects:

1. Follow WordPress Coding Standards.
2. Use WordPress APIs whenever possible.
3. Sanitize and validate user input.
4. Escape output based on context.
5. Check user capabilities.
6. Use nonces for appropriate request verification.
7. Avoid unnecessary dependencies.
8. Write maintainable and documented code.
9. Consider performance and compatibility.
10. Review security before completing the task.

این اسکیل به Claude Code دستور می‌دهد هنگام توسعه پروژه‌های وردپرسی، مجموعه‌ای از اصول فنی مشخص را رعایت کند.

مرحله سوم: اجرای اسکیل

پس از ذخیره فایل، یک نشست جدید Claude Code اجرا کنید تا اسکیل شناسایی شود. سپس می‌توانید اسکیل را مستقیماً فراخوانی کنید:

/wordpress-developer

همچنین Claude Code می‌تواند براساس توضیحات اسکیل، در وظایف مرتبط از آن استفاده کند.

نصب اسکیل برای تمام پروژه‌ها

اگر می‌خواهید اسکیل فقط به یک پروژه محدود نباشد، آن را در مسیر اسکیل‌های کاربر قرار دهید:

~/.claude/skills/

برای مثال:

~/.claude/skills/wordpress-developer/SKILL.md

اسکیل‌هایی که در این مسیر قرار می‌گیرند، در پروژه‌های مختلف همان کاربر قابل استفاده خواهند بود.

در مقابل، اسکیل‌های داخل پوشه .claude/skills پروژه برای همان پروژه تعریف می‌شوند.

بهترین اسکیل‌های پیشنهادی برای برنامه‌نویسی با Claude Code

انتخاب اسکیل به نوع پروژه بستگی دارد. نصب تعداد زیادی اسکیل الزاماً باعث بهبود عملکرد نمی‌شود. برای توسعه وب، مجموعه زیر می‌تواند نقطه شروع مناسبی باشد.

این موارد دسته‌های پیشنهادی برای ساخت یا انتخاب اسکیل هستند و الزاماً نام اسکیل‌های رسمی و ازپیش‌نصب‌شده Claude Code نیستند. بهتر است برای هر پروژه فقط اسکیل‌های مرتبط با فناوری‌های همان پروژه فعال باشند.

آموزش اتصال Claude Code به Figma

یکی از کاربردهای مهم Claude Code، تبدیل طرح‌های رابط کاربری به کد است. اگر طراحی یک وب‌سایت یا اپلیکیشن را در Figma انجام داده باشید، می‌توانید با استفاده از Figma MCP اطلاعات طراحی را در اختیار Claude Code قرار دهید. این اطلاعات می‌تواند شامل اندازه عناصر، فاصله‌ها، رنگ‌ها، تایپوگرافی، کامپوننت‌ها و ساختار صفحات باشد.

مرحله اول: آماده‌سازی ابزارها

برای شروع به موارد زیر نیاز دارید:

• Claude Code نصب‌شده و فعال
• حساب کاربری Figma
• فایل طراحی در Figma
• دسترسی مناسب به قابلیت Figma MCP
• اتصال اینترنت

برای استفاده از سرور Remote MCP نیازی به نصب نرم‌افزار دسکتاپ فیگما نیست.

مرحله دوم: نصب افزونه رسمی Figma

روش پیشنهادی فیگما، نصب پلاگین رسمی آن در Claude Code است. در ترمینال دستور زیر را اجرا کنید:

claude plugin install figma@claude-plugins-official

پس از نصب، Claude Code را مجدداً اجرا کنید. سپس دستور زیر را در محیط Claude Code وارد کنید:

/plugin

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

مرحله سوم: اتصال دستی Figma MCP

اگر نمی‌خواهید از پلاگین استفاده کنید، می‌توانید سرور MCP را به‌صورت دستی اضافه کنید. در ترمینال سیستم دستور زیر را اجرا کنید:

claude mcp add --transport http figma https://mcp.figma.com/mcp

این دستور سرور رسمی Figma MCP را به پروژه فعلی اضافه می‌کند. برای دسترسی به این اتصال در تمام پروژه‌ها:

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

پس از آن Claude Code را اجرا کنید و دستور زیر را وارد کنید:

/mcp

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

مرحله چهارم: تبدیل طراحی Figma به کد

پس از اتصال، فایل طراحی خود را در Figma باز کنید. فریم موردنظر را انتخاب کرده و لینک آن را کپی کنید. سپس در Claude Code درخواست زیر را وارد کنید:

Implement this Figma design as a responsive
React component.

Figma URL: [PASTE YOUR FIGMA LINK]

Requirements:
- Follow the original layout.
- Use the design's colors and typography.
- Preserve spacing and component hierarchy.
- Make the interface responsive.
- Use reusable components.
- Do not invent missing design details.

Claude Code می‌تواند از ابزارهای Figma MCP برای دریافت اطلاعات طراحی و تولید کد استفاده کند.

نکته مهم: اتصال Figma به Claude Code به معنی تبدیل کاملاً دقیق و بدون خطای هر طرح به کد نیست. خروجی باید از نظر فونت، فاصله‌ها، واکنش‌گرایی و رفتار تعاملی بررسی شود. همچنین امکانات خواندن و ویرایش فایل‌ها ممکن است با توجه به نوع حساب Figma و سطح دسترسی متفاوت باشند.

استفاده هم‌زمان از Claude Code، Figma و VS Code

برای توسعه حرفه‌ای رابط کاربری می‌توان این سه ابزار را در یک فرایند واحد استفاده کرد.

مرحله اول: طراحی در Figma

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

مرحله دوم: اتصال Claude Code به Figma

با استفاده از Figma MCP، امکان دریافت اطلاعات طراحی را برای Claude Code فراهم کنید.

مرحله سوم: بازکردن پروژه در VS Code

پروژه را در VS Code باز کنید و Claude Code را از طریق افزونه یا ترمینال اجرا کنید.

مرحله چهارم: تولید کد

لینک فریم موردنظر را در اختیار Claude Code قرار دهید و فناوری پروژه را مشخص کنید؛ برای مثال React، Next.js یا HTML و CSS.

مرحله پنجم: بررسی و اصلاح

خروجی را در مرورگر اجرا کنید و از Claude Code بخواهید مشکلات ظاهری، واکنش‌گرایی و عملکردی را برطرف کند. به این ترتیب، Figma نقش ابزار طراحی، Claude Code نقش دستیار توسعه و VS Code نقش محیط اصلی مدیریت و ویرایش کد را ایفا می‌کند.

جمع‌بندی | برنامه‌نویسی حرفه‌ای با Claude Code و هوش مصنوعی

Claude Code یکی از ابزارهای کاربردی هوش مصنوعی برای برنامه‌نویسان و توسعه‌دهندگان وب است که با قابلیت‌هایی مانند افزودن Skills، اتصال به Figma، یکپارچه‌سازی با VS Code و پشتیبانی از MCP می‌تواند بسیاری از مراحل کدنویسی، عیب‌یابی و توسعه پروژه‌ها را ساده‌تر کند.

بااین‌حال، استفاده حرفه‌ای از Claude Code تنها به نصب و اجرای آن محدود نمی‌شود؛ بلکه شناخت ابزارهای مکمل، تنظیم صحیح اسکیل‌ها و توانایی بررسی کدهای تولیدشده نقش مهمی در کیفیت نتیجه نهایی دارند.

مشاهده آموزش‌های بیشتر هوش مصنوعی در دکتر گرافیک!