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

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

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

در این مقاله از دکتر گرافیک، ابتدا با Codex و قابلیت‌های آن آشنا می‌شویم، سپس نصب و راه‌اندازی، افزودن پلاگین‌ها و Skills، اتصال به Figma و Visual Studio Code و ابزارهای ضروری برای برنامه‌نویسی حرفه‌ای را آموزش می‌دهیم.

کدکس GPT چیست و چه کاربردی دارد؟

OpenAI Codex یک عامل هوش مصنوعی برنامه‌نویسی (AI Coding Agent) است که توسط OpenAI توسعه یافته و برای انجام فعالیت‌های مهندسی نرم‌افزار طراحی شده است. تفاوت اصلی Codex با یک چت‌بات معمولی این است که صرفاً کد پیشنهادی تولید نمی‌کند؛ بلکه می‌تواند با توجه به سطح دسترسی و مجوزهای تعیین‌شده، فایل‌های پروژه را بخواند، تغییر دهد، دستورات ترمینال را اجرا کند و نتیجه را آزمایش کند.

برای مثال، می‌توانید پوشه یک قالب وردپرس را در اختیار Codex قرار دهید و از آن بخواهید مشکل ریسپانسیو منوی موبایل را پیدا کند، تغییرات لازم را اعمال کند و فایل‌های اصلاح‌شده را آماده کند. مهم‌ترین کاربردهای Codex عبارت‌اند از:

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

تفاوت Codex با ChatGPT چیست؟

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

بنابراین اگر هدف شما فقط یادگیری یک مفهوم برنامه‌نویسی باشد، ChatGPT می‌تواند کافی باشد؛ اما برای اعمال تغییرات واقعی در یک پروژه، Codex گزینه تخصصی‌تری است.

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

برای استفاده از Codex چند روش وجود دارد. انتخاب روش مناسب به سیستم‌عامل و محیط توسعه شما بستگی دارد.

روش اول: استفاده از اپلیکیشن Codex

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

برای مثال می‌توانید بنویسید:

Analyze this WordPress plugin project.
Identify bugs, security vulnerabilities,
and performance issues.
Explain the problems before modifying files.

با این دستور از Codex می‌خواهید افزونه وردپرس را از نظر خطا، امنیت و عملکرد بررسی کند، بدون اینکه در مرحله اول تغییری در فایل‌ها ایجاد کند.

روش دوم: نصب Codex با ترمینال (CLI)

اگر به کار با ترمینال علاقه دارید، می‌توانید نسخه خط فرمان Codex را نصب کنید. این روش برای توسعه‌دهندگانی که با Git، Node.js و ابزارهای خودکارسازی کار می‌کنند مناسب است. ابتدا باید Node.js و npm روی سیستم نصب باشند. برای دریافت آن‌ها از سایت رسمی Node.js استفاده کنید. سپس در Terminal مک یا PowerShell ویندوز دستور زیر را اجرا کنید:

npm install -g @openai/codex@latest

برای بررسی نصب:

codex --version

حالا وارد پوشه پروژه شوید. برای مثال:

cd my-project

سپس Codex را اجرا کنید:

codex

در اولین اجرا، مراحل احراز هویت را مطابق گزینه‌های نمایش‌داده‌شده انجام دهید. بسته به روش استفاده، ورود با حساب ChatGPT یا احراز هویت API در دسترس خواهد بود.

نکته: نصب ابزار CLI رایگان و متن‌باز است، اما استفاده از مدل‌های میزبانی‌شده ممکن است به اشتراک واجد شرایط یا اعتبار API نیاز داشته باشد. هزینه‌ها و محدودیت‌های استفاده به روش احراز هویت و طرح حساب بستگی دارند.

آموزش نصب پلاگین در Codex

یکی از امکانات مهم Codex قابلیت افزودن Plugin است. پلاگین‌ها می‌توانند ابزارها، اتصال به سرویس‌های خارجی و دستورالعمل‌های تخصصی را به محیط برنامه‌نویسی اضافه کنند. برای نصب پلاگین در محیط Codex:

/plugins

سپس از مرورگر پلاگین‌ها، افزونه موردنظر را انتخاب و نصب کنید. برای نمونه، پلاگین رسمی OpenAI Developers امکانات مرتبط با مستندات و توسعه OpenAI API را فراهم می‌کند.

تفاوت Plugin، Skill و MCP در کدکس

این سه مفهوم به یکدیگر مرتبط‌اند، اما عملکرد یکسانی ندارند.

یک پلاگین ممکن است شامل یک یا چند Skill، اتصال MCP یا ترکیبی از آن‌ها باشد. برای استفاده از یک Skill نیز همیشه نیاز به نصب پلاگین ندارید.

آموزش افزودن Skills به Codex

Skills مجموعه‌ای از دستورالعمل‌ها و منابع هستند که به Codex کمک می‌کنند فعالیت‌های مشخص را طبق یک روش استاندارد انجام دهد. برای مثال می‌توانید Skill اختصاصی توسعه وردپرس بسازید که Codex را ملزم کند استانداردهای WordPress Coding Standards را رعایت کند، ورودی‌ها را اعتبارسنجی کند و خروجی‌های HTML را به‌درستی Escape کند. ساختار یک Skill ساده به این صورت است:

wordpress-development/
└── SKILL.md

در فایل SKILL.md دستورالعمل‌های تخصصی نوشته می‌شود. نمونه:

---
name: wordpress-development
description: Develop secure WordPress plugins and themes.
---

# WordPress Development

- Follow WordPress Coding Standards.
- Sanitize and validate user input.
- Escape output based on context.
- Use nonces and capability checks.
- Avoid modifying WordPress core files.
- Test changes before deployment.

نحوه نصب Skill اختصاصی

برای یک Skill شخصی می‌توانید پوشه آن را در مسیر مهارت‌های کاربر قرار دهید:
در macOS و Linux:

~/.agents/skills/wordpress-development/SKILL.md

در Windows:

%USERPROFILE%\.agents\skills\wordpress-development\SKILL.md

برای مهارتی که تنها به یک پروژه اختصاص دارد نیز می‌توان از پوشه .agents/skills داخل همان پروژه استفاده کرد. پس از ذخیره فایل، یک نشست جدید Codex آغاز کنید تا مهارت شناسایی شود. سپس می‌توانید از Codex بخواهید هنگام توسعه از Skill موردنظر استفاده کند. برای دریافت مهارت‌های آماده نیز مخزن رسمی زیر در دسترس است:

مجموعه Skills رسمی OpenAI در GitHubتوجه داشته باشید که نام یک Skill به‌تنهایی به معنی نصب یا فعال‌بودن آن نیست؛ باید فایل‌های مربوط به آن واقعاً در مسیر معتبر قرار بگیرند.

بهترین Skills پیشنهادی برای برنامه‌نویسی با Codex

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

این جدول، فهرست موضوعات پیشنهادی برای Skills است؛ نه فهرستی از افزونه‌های رسمی که لزوماً همگی با همین نام در فروشگاه Codex موجود باشند. برای اطلاعات تخصصی بیشتر درباره ساخت Skills می‌توانید به مستندات رسمی Skills مراجعه کنید.

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

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

مراحل اتصال Codex به VS Code

نصب افزونه رسمی Codex برای VS Codeبرای نمونه، اگر در حال طراحی سایت با React هستید، می‌توانید این دستور را وارد کنید:

Review the frontend of this project.

Improve responsive layouts, fix accessibility
issues, and optimize component structure.

Preserve the existing design and functionality.
Explain all changes before applying them.

Codex با بررسی فایل‌های در دسترس، می‌تواند مشکلات احتمالی را شناسایی و اصلاحات پیشنهادی را آماده کند. توجه داشته باشید که افزونه Codex با افزونه GitHub Copilot تفاوت دارد. هر دو در VS Code قابل استفاده هستند، اما محیط، تنظیمات و نحوه مدیریت ابزارهای آن‌ها یکسان نیست.

آموزش اتصال Figma به Codex با استفاده از MCP

اگر طراح رابط کاربری یا توسعه‌دهنده Frontend هستید، اتصال Figma به Codex می‌تواند گردش کار طراحی تا برنامه‌نویسی را ساده‌تر کند.

با این اتصال، Codex می‌تواند اطلاعات ساختاری طراحی مانند فریم‌ها، کامپوننت‌ها، متغیرها و مشخصات چیدمان را دریافت کند و از آن‌ها برای تولید کد استفاده کند. برخی ابزارهای جدید Figma امکان ایجاد یا ویرایش محتوای طراحی را نیز فراهم می‌کنند.

روش اول: اتصال از طریق پلاگین Figma

این روش، گزینه پیشنهادی برای کاربران اپلیکیشن Codex است.

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

روش دوم: اتصال Figma به Codex از طریق CLI

اگر از نسخه ترمینال Codex استفاده می‌کنید، دستور زیر را اجرا کنید:

codex mcp add figma --url https://mcp.figma.com/mcp

سپس مراحل ورود به Figma و تأیید دسترسی را انجام دهید. برای بررسی اتصال:

codex mcp list

در صورت نیاز به مدیریت مستقیم تنظیمات، فایل زیر نیز محل پیکربندی MCP در Codex است:

~/.codex/config.toml

و تنظیم اتصال HTTP می‌تواند به این شکل باشد:

[mcp_servers.figma]
url = "https://mcp.figma.com/mcp"

استفاده از سرور Remote Figma معمولاً توصیه می‌شود؛ زیرا نیازی به اجرای برنامه دسکتاپ Figma ندارد و قابلیت‌های بیشتری ارائه می‌کند.

روش سوم: اتصال از طریق سرور محلی Figma

این روش برای محیط‌هایی مناسب است که نیاز مشخصی به اتصال محلی دارند. ابتدا برنامه دسکتاپ Figma را باز کنید، وارد Dev Mode شوید و گزینه Enable desktop MCP server را فعال کنید. آدرس سرور محلی به شکل زیر است:

http://127.0.0.1:3845/mcp

سپس در تنظیمات MCP برنامه Codex، یک سرور از نوع Streamable HTTP با این نشانی اضافه کنید. نکته: سرور محلی Figma به مجوزهای حساب و فعال‌بودن برنامه دسکتاپ وابسته است. همچنین تمام قابلیت‌های Remote MCP را ارائه نمی‌کند.

چگونه طرح Figma را با Codex به کد تبدیل کنیم؟

پس از اتصال موفق Figma، یک فریم مشخص را انتخاب کنید و لینک آن را در اختیار Codex قرار دهید. برای نمونه:

Implement this Figma design using React
and Tailwind CSS.

Requirements:
- Match layout, typography, and spacing.
- Use reusable components.
- Make the design fully responsive.
- Follow accessibility best practices.
- Do not invent missing design elements.

Figma URL: [Paste your frame URL]

اگر پروژه شما وردپرسی است، می‌توانید به‌جای React و Tailwind CSS از Codex بخواهید ساختار HTML، CSS، JavaScript و PHP سازگار با قالب وردپرس تولید کند. تبدیل طرح به کد معمولاً به بررسی و اصلاح نیاز دارد؛ به‌خصوص در مواردی مانند رفتار موبایل، انیمیشن‌ها، فونت‌های سفارشی و کامپوننت‌های تعاملی.

آموزش اتصال Codex به ابزارهای خارجی با MCP

MCP یا Model Context Protocol پروتکلی است که امکان اتصال عامل هوش مصنوعی به ابزارها و منابع داده خارجی را فراهم می‌کند. برای مثال، Codex به‌کمک یک MCP Server می‌تواند به مستندات فنی به‌روز دسترسی داشته باشد، اطلاعات یک پروژه را از یک سرویس خارجی دریافت کند یا از ابزارهای آن سرویس استفاده کند.

برای افزودن سرور مستندات رسمی OpenAI دستور زیر را اجرا کنید:

codex mcp add openaiDeveloperDocs --url https://developers.openai.com/mcp

سپس بررسی کنید:

codex mcp list

این اتصال برای توسعه‌دهندگانی که با OpenAI API و ابزارهای وابسته کار می‌کنند مفید است؛ زیرا امکان جست‌وجو و مطالعه مستندات رسمی را فراهم می‌کند. توجه کنید که سرور مستندات، فقط برای دسترسی به اطلاعات است و به‌تنهایی درخواست API اجرا نمی‌کند.

چه ابزارهایی برای برنامه‌نویسی حرفه‌ای با Codex لازم است؟

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

نصب همه ابزارهای بالا ضروری نیست. برای شروع، VS Code، Git و محیط اجرای متناسب با زبان پروژه کافی است. ابزارهای دیگر را متناسب با نیاز پروژه اضافه کنید.

آموزش استفاده از فایل AGENTS.md در Codex

یکی از روش‌های مؤثر برای افزایش دقت خروجی Codex، تعریف دستورالعمل‌های پروژه در فایل AGENTS.md است. این فایل به Codex کمک می‌کند قواعد پروژه را در طول توسعه رعایت کند؛ برای مثال از تغییر فایل‌های اصلی وردپرس خودداری کند یا بدون اجرای تست، تغییرات گسترده انجام ندهد. نمونه فایل:

# Project Instructions

## General Rules
- Read existing code before modifying it.
- Preserve current features and functionality.
- Prefer small, focused changes.
- Never expose secrets or API keys.

## Code Quality
- Follow the project's coding conventions.
- Avoid unnecessary dependencies.
- Write maintainable and reusable code.

## Testing
- Run relevant tests after changes.
- Report any tests that could not run.
- Never claim that untested code was tested.

این فایل را در پوشه اصلی پروژه قرار دهید. Codex می‌تواند هنگام انجام فعالیت‌های مرتبط، دستورالعمل‌های آن را در نظر بگیرد.

نکات امنیتی مهم هنگام کار با Codex

ازآنجاکه Codex قادر به اجرای دستورات و تغییر فایل‌هاست، مدیریت سطح دسترسی اهمیت زیادی دارد. بهتر است پروژه‌های مهم را قبل از شروع در Git ثبت کنید تا امکان بررسی و بازگردانی تغییرات وجود داشته باشد. همچنین از ارائه فایل‌های حساس مانند اطلاعات ورود، کلیدهای API و رمزهای عبور خودداری کنید.

برای پروژه‌های وردپرسی نیز پیشنهاد می‌شود تغییرات ابتدا در محیط Local یا Staging آزمایش شوند و سپس به سایت اصلی انتقال پیدا کنند. در صورت استفاده از پلاگین‌های شخص ثالث، مجوزهای دسترسی و اعتبار ارائه‌دهنده را بررسی کنید. اتصال یک سرویس خارجی به معنی امن یا قابل‌اعتمادبودن تمام خروجی‌های آن نیست.

مشکلات رایج Codex و روش رفع آن‌ها

سؤالات متداول درباره Codex

آیا Codex رایگان است؟

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

آیا Codex بدون اینترنت کار می‌کند؟

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

آیا Codex برای توسعه وردپرس مناسب است؟

بله. Codex می‌تواند برای نوشتن و اصلاح کدهای PHP، JavaScript و CSS، توسعه افزونه و قالب و بررسی مشکلات امنیتی و عملکردی وردپرس استفاده شود.

آیا Codex می‌تواند یک سایت کامل طراحی کند؟

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

آیا اتصال Codex به Figma به اشتراک پولی نیاز دارد؟

اتصال Remote MCP در طرح‌های مختلف Figma ارائه می‌شود، اما نوع حساب و سطح دسترسی می‌تواند بر میزان استفاده و ابزارهای مجاز اثر بگذارد. برای سرور محلی نیز شرایط جداگانه‌ای وجود دارد.

جمع‌بندی؛ آیا Codex ارزش استفاده دارد؟

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

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