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

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

این نسخه‌ای از این ابزار است که هیچ‌کس درموردش حرف نمی‌زند. هر پست Claude Code توسط یک مهندس ارشد، برای مهندسان ارشد نوشته شده. پر است از agent lanes، hook scripts، و flag های مبهم. طراحان آن را می‌خوانند، فرض می‌کنند برایشان نیست، و تب را می‌بندند.

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

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

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

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

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

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

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

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

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

اول بار، برای ورود راهنماییت می‌کند. تمام شد.

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

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

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

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

قالبی که به هر طراحی که آموزش می‌دهم می‌دهم:

# 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 بیست ویژگی فهرست می‌کنند. پنج تای آن‌ها جایی است که نود درصد از ارزش یک طراح نمایان می‌شود.

نگهداری سیستم طراحی. "هر جایی که هنوز از مقادیر spacing قدیمی (8px, 16px, 24px) استفاده می‌کنیم پیدا کن و با توکن‌ها (--space-2, --space-4, --space-6) جایگزین کن. کامپوننت‌ها را به‌روز کن. داستان‌ها را passing نگه دار." دو دقیقه. تاریخاً یک هفته.

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

Figma-to-page. یک اسکرین‌شات Figma پیست کن یا بهتر است Figma MCP را وصل کنی (راهنمای جداگانه در راه است). بگو "این بخش hero را با استفاده از کامپوننت‌ها و توکن‌های موجود ما بساز، نه کامپوننت‌های جدید." یک PR می‌دهد که در یک یا دو دور بازخورد با طراحی مطابقت دارد.

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

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

Figma را بده، نه اسکرین‌شات را

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

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

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

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

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

تصویرسازی برند واقعی. هر چیزی که به یک سبک هنری خاص، کار کاراکتر دست‌کشیده، یا شخصیت‌های برند نیاز دارد که باید دقیقاً شبیه برند تو به نظر برسند. Claude Code generator ها را صدا می‌زند، ذائقه ندارد. برای آن کار هنوز Prismlight، Runesmith، یا یک تصویرگر انسانی را brief می‌کنی.

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

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

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

اگر می‌خواهی تفکیک‌بندی‌های بیشتری از گردش کار AI داشته باشی، بقیه مقالات Brainy را ببین. اگر می‌خواهی این را در تیم طراحیت درست نصب کنی، 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 از تو محافظت می‌کند. نیاز داشتن PR ها به pass کردن test ها هم همینطور.

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

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

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

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

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

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

دیگر junior نیستی

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

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

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

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

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

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