Claude Code برای طراحان: راه‌اندازی یک طراح واقعی

طراحی که ماه گذشته با او کار کردم، یک بازنویسی کامل سیستم طراحی را در سه روز تحویل داد. او مهندس نیست. Bash بلد نیست. در تمام عمرش یک regex هم ننوشته. داشت Claude Code، یک فایل CLAUDE.md، و حس خوبی برای شناختن اشتباهاتش.

این همان نسخه‌ای از این ابزار است که کسی درباره‌اش حرف نمی‌زند. هر مطلبی درباره Claude Code توسط یک مهندس ارشد، برای مهندسان ارشد نوشته شده. پر از agent laneها، hook scriptها و flagهای عجیب. طراحان می‌خوانند، فرض می‌کنند که برای آن‌ها نیست، و تب را می‌بندند.

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

Claude Code یک agent است، نه autocomplete

Claude Code کلون GitHub Copilot نیست. یک پنجره چت با تم کد نیست. یک agent دیرپا است که در ترمینال شما زندگی می‌کند، کل ریپوی شما را می‌خواند، فایل‌ها را ویرایش می‌کند، تست‌ها را اجرا می‌کند، PR باز می‌کند و وقتی گیج می‌شود، جواب پس می‌دهد.

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

این همان بخشی است که همه چیز را برای یک طراح تغییر می‌دهد. دیگر به خطوط مشخص اشاره نمی‌کنید. شروع می‌کنید به توصیف نتایج. توصیف خوب نتایج یک مهارت مستقل است که در مهندسی prompt برای طراحان به آن پرداخته شده. «هر کامپوننت Button را به‌روز کن تا از توکن جدید focus ring استفاده کند، از جمله واریانت legacy disabled، و مطمئن شو که storybook stories هنوز پاس می‌شوند.» یک جمله است. و یک روز کار design ops که در چهار دقیقه انجام می‌شود.

کار یک طراح همیشه سلیقه بوده، نه syntax. Claude Code سلیقه را به محصول واقعی تبدیل می‌کند.

در ده دقیقه نصب کنید

سه چیز نیاز دارید: Node.js، یک ترمینال، و یک حساب Claude.

1. Terminal را باز کنید (Mac: Cmd+Space، تایپ کنید Terminal). دو دستور تایپ می‌کنید. همین است کل نصب.
2. اگر Node ندارید نصب کنید. به nodejs.org بروید، LTS را دانلود کنید، اجرا کنید. آن بخش یک installer معمولی با دابل‌کلیک است.
3. در ترمینال paste کنید: npm install -g @anthropic-ai/claude-code
4. به ریپوی طراحی‌تان بروید: cd ~/path/to/your/repo
5. اجرا کنید: claude

اولین بار، مراحل لاگین را طی می‌کند. تمام شد.

ریپو می‌تواند هر چیزی باشد: یک پکیج design system، یک سایت مارکتینگ Next.js، یک Storybook، یک export توکن Figma، یک Tailwind config، هر چیزی که در آن کار می‌کنید. اگر پوشه‌ای با فایل‌ها باشد، Claude Code می‌تواند آن را بخواند.

CLAUDE.md را مثل یک design brief بنویسید، نه یک readme

CLAUDE.md فایلی است که Claude Code هر بار که یک ریپو باز می‌کند اول از همه می‌خواند. مهندسان از آن برای دستورات build و مسیرهای test استفاده می‌کنند. خوب است. ولی نود درصد ارزش واقعی را روی میز می‌گذارند.

CLAUDE.md را مثل یک design brief که به یک طراح تازه‌وارد می‌دهید، بنویسید. Voice، قوانین برند، این محصول چیست، چه کاری هرگز نمی‌کنیم، کار تمیز اینجا چه شکلی است. هر جمله‌ای که در CLAUDE.md می‌گذارید، جمله‌ای است که دیگر هرگز در chat تکرار نمی‌کنید.

قالبی که به هر طراحی که onboard می‌کنم می‌دهم:

# CLAUDE.md ## What this repo is One line. "Marketing site for Acme, a B2B analytics tool for finance teams." ## Voice Three adjectives that describe how we write. Three phrases we never use. One example of a sentence we would ship and one we would cut. ## Design system Where tokens live (path). Where components live (path). How we name things. Forbidden patterns (no inline styles, no hardcoded hex, no px values for spacing). ## Components we have One-line descriptions of Button, Card, Hero, Nav, etc. So Claude does not build a new one when we already have it. ## What clean work looks like A short paragraph. "We ship small, focused PRs. We update the Storybook story when we change a component. We never introduce a new dependency without asking." ## What to ask before proceeding "If you are about to add a new color, stop and ask. If you are about to rename a component, stop and ask." ## Review standards "Every change must pass typecheck and lint. Screenshots of before/after for any visual change."

یک بار برای هر ریپو بنویسید. وقتی چیز جدیدی یاد می‌گیرید درباره اینکه agent در codebase شما چطور اشتباه می‌کند، آن را به‌روز کنید. تجمیع می‌شود.

پنج گردش کار مهم

اکثر آموزش‌های Claude Code بیست ویژگی فهرست می‌کنند. پنج تا از آن‌هاست که نود درصد ارزش یک طراح در آن‌ها نهفته است.

نگهداری design system. «هر جایی که هنوز از مقادیر قدیمی spacing استفاده می‌کنیم (8px، 16px، 24px) پیدا کن و با توکن‌ها جایگزین کن (--space-2، --space-4، --space-6). کامپوننت‌ها را به‌روز کن. مطمئن شو که stories هنوز پاس می‌شوند.» دو دقیقه. تاریخاً یک هفته.

بازنویسی کامپوننت. «Button ما به دوازده واریانت رسیده. آن‌ها را بررسی کن. بگو کدام سه تا واقعاً استفاده می‌شوند و کدام نه تا مرده‌اند. بعد یک API یکپارچه پیشنهاد بده و آن را پشت یک feature flag پیاده کن.» شما پیشنهاد را بررسی می‌کنید. می‌گویید بله. ارسال می‌شود.

Figma-به-صفحه. یک screenshot از Figma paste کنید یا بهتر، Figma MCP را وصل کنید. بگویید «این hero section را با کامپوننت‌ها و توکن‌های موجودمان بساز، نه موارد جدید.» یک PR می‌دهد که در یک یا دو دور بازخورد با طراحی تطابق پیدا می‌کند.

انتشار توکن. برند یک رنگ را به‌روز می‌کند. «--color-accent را در کل monorepo جایگزین کن و typecheck را اجرا کن.» کار تایپ کردن نیست، شجاعت است. Claude Code شجاعت نامحدود دارد و صفر ego.

بررسی بصری. «سرور dev را اجرا کن، از هر صفحه screenshot بگیر، و به من بگو کدام‌ها در مقایسه با آخرین deploy spacing یا overflow خراب دارند.» اگر ریپوی شما Playwright یا ابزار مشابهی دارد، این جادو است. چیزهایی را می‌گیرد که چشم شما از دست می‌دهد.

Figma را بدهید، نه screenshot را

اگر فقط PNG دارید، PNG را paste کنید. Claude Code تصاویر را مدیریت می‌کند. دقت spacing و بعضی ظرافت‌های تایپوگرافی را از دست می‌دهد، ولی ساختار منتقل می‌شود.

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

در هر صورت، یک قانون: همیشه design system موجودتان را بدهید، نه یک canvas خالی. «این را با کامپوننت‌های ما بساز» همیشه از «این را بساز» بهتر است. اگر canvas را خالی بگذارید، Claude Code کامپوننت‌هایی که دارید را دوباره اختراع می‌کند. این کار هدررفته است.

جایی که Claude Code اعتمادتان را از دست می‌دهد

با خودتان صادق باشید. اینجاست که ابزار امروز شکست می‌خورد.

تصویرسازی واقعی برند. هر چیزی که نیاز به سبک هنری خاص، کارهای شخصیت دست‌کشیده، یا ماسکوت‌های برندی دارد که باید شبیه برند شما باشند. Claude Code generator فراخوانی می‌کند، سلیقه ندارد. برای این کار هنوز Prismlight، Runesmith، یا یک تصویرگر انسانی را briefing می‌کنید.

سلیقه چیدمان ذهنی. می‌تواند یک صفحه را درست چیدمان کند. نمی‌تواند بگوید صفحه از نظر احساسی کسل‌کننده است. نمی‌تواند بگوید hero به فضای بیشتری نیاز دارد. نمی‌تواند احساس کند که یک تصمیم weight اشتباه است. این هنوز کار شماست.

تصمیمات محصول از اصول پایه. می‌تواند هر چیزی که می‌خواهید پیاده کند. نمی‌تواند بگوید آیا باید آن را بخواهید. این هنوز کار طراح است، کاری که واقعاً پول می‌دهد.

هر جایی که ریپو بهم‌ریخته است. اگر codebase شما سیستم منسجمی ندارد، CLAUDE.md ندارد، naming convention ندارد، توکن ندارد، Claude Code بهم‌ریختگی را سریع‌تر بدتر می‌کند. اول باید پایه را مرتب کنید. ناامیدکننده است ولی منطقی هم هست.

اگر می‌خواهید تحلیل‌های بیشتری از گردش کار AI ببینید، بقیه Brainy Papers را مرور کنید. اگر می‌خواهید این ابزار را در تیم طراحی‌تان درست نصب کنید، Brainy را استخدام کنید و ما راه‌اندازی به علاوه اولین گردش کار واقعی را مدیریت می‌کنیم.

چک‌لیست شروع طراح

روز اول، اینجاست لیست واقعی.

• Claude Code را نصب کنید (دستور npm، یک دقیقه)
• لاگین کنید و تأیید کنید که session کار می‌کند
• یک ریپو انتخاب کنید. فقط یکی. کوچک شروع کنید.
• CLAUDE.md را با استفاده از قالب بالا بنویسید. یک ساعت وقت بگذارید.
• یکی از پنج گردش کار را انتخاب کنید. آن را از ابتدا تا انتها انجام دهید.
• diff را با دقت بررسی کنید. تأیید کورکورانه نکنید. شما art director هستید.
• به Claude بگویید کجا اشتباه کرد. CLAUDE.md را با آن درس به‌روز کنید.
• یک گردش کار دیگر انجام دهید. فردا.

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

سوالات متداول

آیا برای استفاده از Claude Code باید کدنویسی بلد باشم؟

نه. باید بدانید چه می‌خواهید، چطور توصیف کنید، و چطور یک diff را به اندازه کافی بخوانید تا بگویید «این درست است» یا «این اشتباه است.» اگر تا به حال به یک طراح junior بازخورد داده‌اید، این مهارت را دارید.

آیا Claude Code روی یک ریپوی production امن است؟

بله، اگر از branch استفاده کنید. هرگز روی main اجرا نکنید. یک branch بسازید، بگذارید Claude Code آنجا کار کند، PR را مثل هر PR دیگری بررسی کنید، وقتی خوب بود merge کنید. Git از شما محافظت می‌کند. الزامی کردن pass شدن تست‌ها قبل از merge هم همینطور.

Claude Code در مقابل Cursor در مقابل v0 در مقابل Lovable، تفاوت چیست؟

Cursor یک editor کامل با Claude داخلی است. v0 و Lovable UI از prompt تولید می‌کنند ولی در ریپوی شما برای مدت طولانی زندگی نمی‌کنند. Claude Code بدون رابط گرافیکی است، در هر ریپویی زندگی می‌کند، و برای codebaseهای موجود قدرتمندترین است. برای prototype‌های کاملاً جدید، v0 یا Lovable سریع‌تر است. برای کار محصول واقعی، Claude Code برنده می‌شود.

Claude Code چقدر هزینه دارد؟

اشتراک Claude Max آن را پوشش می‌دهد، و این همان چیزی است که اکثر طراحان باید با آن شروع کنند. تیم‌های سنگین‌تر به API pricing منتقل می‌شوند. در هر صورت، در مقایسه با زمانی که در گردش کارهای بالا صرفه‌جویی می‌کند ارزان است.

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

تصویرسازی برند، قضاوت‌های سلیقه ذهنی، استراتژی محصول، هر چیزی که نیاز به دانستن دلیل واقعی خواستن کاربر دارد. آن‌ها را در دست خودتان نگه دارید. اجرای تکراری را به ابزار بدهید.

دیگر junior نیستید

مدت‌هاست که طراحان کسانی بودند که چشم‌انداز را ترسیم می‌کردند و آن را به مهندسانی که واقعاً می‌ساختند تحویل می‌دادند. این یعنی طراحان منتظر می‌ماندند. برای ظرفیت sprint. برای کار backend. برای اینکه شخص دیگری تایپ کند.

آن دوره تمام شد.

junior دیگر یک نفر نیست. junior یک مدل است. شما art director هستید.

CLAUDE.md را مثل یک design brief بنویسید. کار را به agent بدهید. diff را مثل اینکه mock‌آپ یک junior را بررسی می‌کنید، با استانداردها، بررسی کنید. وقتی اشتباه است برگردانید. وقتی درست است ارسال کنید.

بازنویسی design system سه روز است، نه سه sprint. سایت مارکتینگ این هفته ارسال می‌شود، نه سه‌ماهه آینده. به‌روزرسانی توکن در دقیقه‌ها منتشر می‌شود، نه روزها دنبال کردن.

نصب کنید. brief را بنویسید. کار را ارسال کنید.