آموزش UI/UX با Claude AI: گردش کار کامل از بریف تا فیگما - آخرین آپدیت
دانلود Claude AI UI/UX: Complete Workflow from Brief to Figma
این دوره شامل استفاده از هوش مصنوعی است.
چه میشد اگر میتوانستید یک بریف خام مشتری را بگیرید و یک پروتوتایپ کامل و با کیفیت (Hi-Fi) در فیگما تحویل دهید — آن هم به تنهایی و در کسری از زمان معمول؟
این یک دوره عملی و پروژهمحور در مورد گردش کار طراحی AI UI/UX است — شما یاد میگیرید چگونه با AI طراحی کنید و با ترکیب Claude AI و گردش کار مدرن Figma AI، از بریف به یک رابط کاربری واقعی و آماده توسعه برسید.
این دقیقاً همان کاری است که اینجا انجام خواهید داد. بدون تئوریهای خشک و تمرینات ساده. شما یک پروژه واقعی — Pika، یک اپلیکیشن رزرو موبایل برای زنجیره زمینهای پیکلبول — را دنبال میکنید و تمام مسیر را از یک ایمیل مبهم مشتری تا یک فایل فیگما صیقلخورده و مبتنی بر توکن با پروتوتایپ فعال طی میکنید. و شما گامبهگام همراه من آن را میسازید.
من از سال ۲۰۱۱ طراح بودهام. تغییر بازار از فتوشاپ به فیگما و حالا به AI را دیدهام. حقیقت این است: طراحانی که اکنون بر گردش کار AI مسلط شوند، آنچه قبلاً هفتهها زمان میبرد را در چند روز تحویل میدهند. این دوره دقیقاً همان متد را به شما میدهد.
متد: ۲۰ مرحله • ۸ فاز • ۳ منطقه کاری
منطقه ۱ — تفکر (فاز ۱-۳). ۸۰٪ کیفیت یک رابط کاربری قبل از اولین پیکسل تعیین میشود. در Claude Cowork، بریف را کالبدشکافی میکنید، مدل کسبوکار را به چالش میکشید، رقبا را تحلیل میکنید، معیار ستاره شمال (North Star) را تعریف میکنید، چهار پرسونا میسازید و همه اینها را به لیست ویژگیها، سایتمپ و جریانهای کاربر تبدیل میکنید.
منطقه ۲ — تولید (فاز ۴). تمام تصمیمات را در یک فایل Master-Spec جمع کنید، آن را با یک پرامپت بصری و دقیق به Claude Design بدهید، نتیجه را با بازخوردهای اسکرینشات اصلاح کنید و کل اپلیکیشن را به صورت HTML خروجی بگیرید.
منطقه ۳ — نهاییسازی (فاز ۵-۸). بخشی که اکثر دورهها نادیده میگیرند. UI خود را به یک سیستم طراحی واقعی استخراج کنید — سه فایل توکن W3C، متغیرهای فیگما، استایلهای متن و افکت — سپس اجازه دهید Claude از طریق Figma MCP یک کتابخانه کامپوننت با حالتهای مختلف بسازد، نمونهها را در صفحات جایگزین کند، پروتوتایپ قابل کلیک را سیمکشی کند و همه چیز را برای تحویل به توسعهدهنده بستهبندی کند.
در این مسیر، ذهنیتی را درونی میکنید که باعث میشود AI برای شما کار کند، نه علیه شما: AI موتور است، شما کارگردانید. شما گیتهای بین فازها را تعیین میکنید، قضاوت میکنید چه چیزی به اندازه کافی خوب است و موارد خاصی (Edge Cases) را که AI به تنهایی نمیبیند، مدیریت میکنید.
در پایان، شما مجموعهای از تمرینات پراکنده نخواهید داشت، بلکه یک پروژه کامل و آماده برای پورتفولیو و یک سیستم تکرارپذیر خواهید داشت که میتوانید برای اولین بریف مشتری بعدی خود اجرا کنید.
نکته: شما به اپلیکیشن دسکتاپ Claude با پلن پولی (حداقل Pro) و یک حساب فیگما نیاز دارید. کدنویسی لازم نیست.
بیایید شروع کنیم.
ماژول ۰ • شروع و ابزارها — ذهنیت، بازار و جعبه ابزار AI شما Module 0 · Kickoff & Tools — Mindset, Market & Your AI Toolkit
-
بخش ۱ • آشنایی با مدرس و بررسی تحول بازار طراحی Part 1 · Meet your instructor & how the design market got here
-
بخش ۲ • کانتکست AI: ذهنیت موتور و کارگردان، ابزارها و حسابها Part 2 · The AI context: engine & director mindset, tools & accounts
-
بخش ۳ • نمای کلی دوره: ۲۰ مرحله، ۸ فاز، ۳ منطقه کاری Part 3 · Course overview: 20 steps, 8 phases, 3 work zones
فاز ۱ • بریف و چارچوب — خواندن بریف برای یافتن نقاط نقص Phase 1 · Brief & Frame — Read the Brief to Find the Gaps
-
درس ۰ • آشنایی با جعبه ابزار و پوشه پروژه نمونه Lesson 0 · Meet the toolkit & the sample project folder
-
درس ۱ • بازجویی مجدد از بریف و تثبیت چارچوب — به صورت زنده در Claude Cowork Lesson 1 · Re-interrogate the brief & lock framing — live in Claude Cowork
فاز ۲ • درک کسبوکار و کاربر — قبل از طراحی، فکر کنید Phase 2 · Understand Business & User — Think Before You Draw
-
مدل کسبوکار، رقبا، ستاره شمال و ۴ پرسونا — با Claude Business model, competitors, North Star & 4 personas — with Claude
فاز ۳ • ساختار و محتوا — ویژگیها، سایتمپ و جریانها Phase 3 · Structure & Content — Features, Sitemap & Flows
-
ویژگیها، سایتمپ ۵ تب، جریانهای کاربر و محتوا — سپس بررسی مودبرد Features, 5-tab sitemap, user flows & content — then read the mood board
فاز ۴ • تولید UI — صفحات Hi-Fi با Claude Design Phase 4 · Produce UI — Hi-Fi Screens with Claude Design
-
۴.۰ • تثبیت مودبرد و استراتژی داراییهای بصری 4.0 · Lock the mood board & asset strategy
-
۴.۱ • جمعآوری همه موارد در یک Master Spec و پرامپت طراحی 4.1 · Pack everything into one master spec + design prompt
-
۴.۲ • تولید UI با کیفیت Hi-Fi توسط Claude Design 4.2 · Generate the hi-fi UI with Claude Design
-
۴.۳ • اصلاح با بازخورد بصری و خروجی کل اپلیکیشن به HTML 4.3 · Refine with visual feedback & export the whole app to HTML
فاز ۵ • سیستمسازی در Cowork — سیستم طراحی اختصاصی شما Phase 5 · Systemize in Cowork — Your Own Design System
-
همگامسازی UI به صورت HTML در ۳ فایل توکن و ۳ پلاگین فیگما — در Cowork Sync the HTML UI into 3 token files & 3 Figma plugins — in Cowork
فاز ۶ • ساخت پایه در فیگما — توکنها، استایلها و صفحات Phase 6 · Build the Base in Figma — Tokens, Styles & Screens
-
وارد کردن توکنها، استایلها و UI به فیگما و اجرای پلاگین Check Import tokens, styles & the HTML UI into Figma, then run the Check plugin
فاز ۷ • کامپوننتسازی با Figma MCP — کامپوننتها به همراه حالتها Phase 7 · Componentize via Figma MCP — Components with States
-
ساخت کامپوننتها با Claude + Figma MCP و جایگزینی آنها در UI Build components with Claude + Figma MCP & swap them into the UI
فاز ۸ • پروتوتایپ و تحویل — انتشار پروژه Phase 8 · Prototype & Handoff — Ship It
-
سیمکشی پروتوتایپ قابل کلیک، تست تمام جریانها و بستهبندی برای تحویل به توسعهدهنده Wire the clickable prototype, test every flow & package the dev handoff
https://donyad.com/d/fd3dc3
Phong Designs AI System
تسلط بر گردش کار کامل AI UI/UX با Claude و Figma
نمایش نظرات