آموزش AI برای طراحان محصولAI Native Product Design

۰۱

از صفر شروع می‌کنیم

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

۰۲

ابزارها عوض می‌شن، روش نه

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

۰۳

پروژه باید بالاخره منتشر بشه

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

در یک نگاه

هفت فصل جلو می‌ریم و آخرش یک محصول واقعی داری.

اگر عجله داری، همین‌جا خلاصه‌اش را ببین: اندازهٔ دوره و قیمت مشخص است. بقیهٔ جزئیات را پایین‌تر با حوصله توضیح داده‌ایم.

  1. 01AI Thinking۹
  2. 02AI Tools۳
  3. 03AI Native UX Design۷
  4. 04Agentic UX Design۸
  5. 05AI Native UI Design۷
  6. 06Agentic UI Design۵
  7. 07Vibe Coding For Product Designers۴

قیمت

۱۲٬۰۰۰٬۰۰۰تومان

۳۰ نفر اول

تکمیل شد

۳۰ نفر از ۳۰ نفر ثبت‌نام کرده‌اند

۳۰ نفر دوم

تکمیل شد

۳۰ نفر از ۳۰ نفر ثبت‌نام کرده‌اند

  1. ۳۰ نفر اولتکمیل شد۶٬۰۰۰٬۰۰۰
  2. ۳۰ نفر دومتکمیل شد۷٬۰۰۰٬۰۰۰
  3. بعد از آنالان۱۲٬۰۰۰٬۰۰۰

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

پیام در تلگرام

سه مرحله که قدم‌به‌قدم جلو می‌رن

قرار نیست از همان اول بپریم سراغ ابزارهای خفن. هر مرحله روی قبلی ساخته می‌شود.

  1. مرحلهٔ ۱ از ۳

    فهمیدن

    فصل‌های ۱ و ۲ — اول می‌فهمی AI و این ابزارها چطور کار می‌کنند، کجاها خوب جواب می‌دهند و کجاها ممکن است گولت بزنند. اگر این بخش را بلد نباشی، بقیهٔ دوره بیشتر شبیه کپی کردن می‌شود.

    1. 01AI Thinking۹ درس
    2. 02AI Tools۳ درس

    در انتهای این مرحله — محیطِ کارِ آماده، با ابزارهایی که به هم وصل‌اند

  2. مرحلهٔ ۲ از ۳

    ساختن

    فصل‌های ۳ تا ۶ — می‌رسیم به تجربه، ایجنت، رابط و تیمی از ایجنت‌ها که روی رابط کار می‌کنند. از اینجا AI کم‌کم از یک دستیار ساده تبدیل می‌شود به بخشی از فرآیند طراحی و ساخت محصولت.

    1. 03AI Native UX Design۷ درس
    2. 04Agentic UX Design۸ درس
    3. 05AI Native UI Design۷ درس
    4. 06Agentic UI Design۵ درس

    در انتهای این مرحله — تیمی از ایجنت‌ها که رابط را می‌سازند و می‌سنجند

  3. مرحلهٔ ۳ از ۳

    رساندن

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

    1. 07Vibe Coding For Product Designers۴ درس

    در انتهای این مرحله — نسخهٔ زندهٔ محصول، منتشرشده روی اینترنت

ابزارهایی که باهاشون کار می‌کنیم

ابزارهایی که واقعاً باهاشون کار می‌کنیم

یک فصل کامل را گذاشته‌ایم برای همین ابزارها؛ نه اینکه فقط اسمشان را معرفی کنیم، بلکه ببینیم هرکدام برای چه کاری خوب‌اند و کجا بهتره سراغشان برویم. ابزارها عوض می‌شوند، ولی این مدل دسته‌بندی و نگاه کردن به آن‌ها قرار نیست هر چند ماه از نو عوض شود.

01

Claude

سه لایه، از چت تا ترمینال

  • چت و آرتیفکت
  • پروژه و دانش پروژه
  • اسکیل و SKILL.md
  • کانکتور و MCP
  • Claude Code و حالت نقشه
  • CLAUDE.md

بیشتر ما با لایهٔ اول شروع کرده‌ایم؛ ولی بخش جذاب ماجرا معمولاً وقتی شروع می‌شود که وارد دو لایهٔ بعدی می‌شویم.

02

ChatGPT و Codex

ابزارهایی که بیشتر از یک چت ساده‌اند

  • Canvas
  • GPT سفارشی
  • Codex، محلی و ابری
  • AGENTS.md
  • بازبینی، نه فقط ساختن
  • سطح دسترسی

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

03

Figma AI

درست جایی که فایل‌هایت هستند

  • First Draft
  • Figma Make
  • Figma MCP و Dev Mode
  • ایجنت فیگما
  • FigJam و Slides
  • ریزمتن، دقیقاً سر جای خودش

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

و هر ابزار جدیدی که از راه برسهابزارهای AI خیلی سریع عوض می‌شوند. قرار نیست با هر تغییر، دوباره از صفر یاد بگیریم. چیزی که اینجا می‌سازیم یک روش کار است که با ابزارهای جدید هم قابل استفاده باشد.

دوره چطور پیش می‌ره؟

هر فصل چه شکلیه؟

هر فصل فقط یک‌سری ویدیوی آموزشی نیست. یک بستهٔ کامل داریم: آموزش، کار روی پروژه، جزوه و تمرین. همه‌شان به هم وصل‌اند و قرار است آخرش یک خروجی واقعی داشته باشی.

دک آموزش

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

دک پروژه

همان چیزی که یاد گرفته‌ایم را روی پروژهٔ واقعی اجرا می‌کنیم. پرامپت واقعی، خروجی واقعی و مهم‌تر از همه تصمیمی که گرفتیم و دلیلش.

جزوه

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

تمرین

آخر هر درس یک تمرین داریم و خروجی‌اش مستقیم به پروژه اضافه می‌شود. یعنی تمرین قرار نیست بعداً برود توی یک پوشه و برای همیشه فراموش شود.

و یک قانون مهم در کل دوره داریم: یک پروژه را با هم جلو می‌بریم. قرار نیست هرکس چند تمرین جدا بسازد و آخر دوره ده تا فایل نصفه‌نیمه داشته باشد.

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

چند اسلاید از خودِ دوره

این‌ها اسلایدهای بازسازی‌شده برای نمایش نیستند؛ چند نمونه از همان فایل‌هایی‌اند که موقع آموزش واقعاً با آن‌ها کار می‌کنیم.

این دوره برای چه کسیه؟

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

اگر این حس برایت آشناست، احتمالاً مسئلهٔ اصلی‌ات کمبود ابزار نیست. مسئله اینه که نمی‌دونی کجا باید کار رو بسپری دست AI و کجا باید خودت تصمیم بگیری. این دوره دقیقاً روی همین مرز تمرکز دارد.

این دوره به درد تو می‌خوره اگر

  • طراح محصولی که از تحویل فایل و منتظر ماندن برای توسعه خسته شده

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

  • با AI کار کردی ولی نتیجه‌ها یه روز خوبن، یه روز افتضاح

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

  • یک ایدهٔ نیمه‌کاره داری و دوست داری بالاخره تمومش کنی

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

  • می‌خوای سریع‌تر کار کنی، ولی نمی‌خوای تصمیم‌گیری رو بسپری دست AI

    این دقیقاً یکی از موضوعات اصلی دوره است. قرار نیست AI جای قضاوت طراحی تو را بگیرد؛ قرار است کمک کند سریع‌تر و بهتر تصمیم بگیری.

این دوره احتمالاً به دردت نمی‌خوره اگر

  • دنبال یک لیست بلندبالا از پرامپت‌های آماده‌ای

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

  • می‌خوای کل طراحی رو بسپری به AI

    پس احتمالاً این دوره مناسب تو نیست. یکی از اولین چیزهایی که یاد می‌گیریم اینه که چه کارهایی را بهتره بسپری به AI و کجاها هنوز خودت باید پشت فرمان باشی.

  • فقط دنبال معرفی ابزارهای جدیدی

    ابزارها خیلی سریع عوض می‌شوند. اگر فقط اسم و دکمه‌های ابزارها را یاد بگیری، چند ماه دیگر دوباره باید از اول شروع کنی. اینجا بیشتر روی روش کار تمرکز داریم.

  • وقت تمرین کردن نداری

    هر درس تمرین دارد و قرار است خروجی تمرین وارد پروژه شود. بدون تمرین هم می‌شود ویدیوها را دید، ولی آن موقع بخش مهم دوره را از دست می‌دهی.

سرفصل‌ها

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

۷ فصلِ ضبط‌شده۴۳ درس
  1. 01 — 07ضبط‌شده

    متفاوت فکر کن

    AI Thinking

    اولین تماس. یاد می‌گیری مثل یک طراحِ AI-native فکر کنی. نه اینکه ابزار جدید یاد بگیری، اینکه بفهمی چه کاری را باید بسپاری و چه کاری هیچ‌وقت.

    ۹
    درس
    ۱۲۵
    زیرسرفصل
    خروجی
    یک کیتِ پرامپتِ شخصی که در کارِ روزمره استفاده می‌کنی
    1. ۱AI Thinking۸ زیرسرفصل
      • What AI thinking is
      • The three standing questions
      • With AI, not like AI
      • The thesis
      • Who this course is not for
      • How we work
      • What you need open
      • Deliverable: the prompt kit
    2. ۲Under the Hood۲۰ زیرسرفصل
      • What an LLM is
      • How one is made
      • What it is not
      • Tokens
      • Token economics
      • Counting letters, live
      • Prediction
      • The loop behind every word
      • Why your ideas start to rhyme
      • Temperature
      • One prompt, three temperatures
      • Reproducibility
      • The context window
      • How much actually fits
      • Attention decay
      • Where you put the instruction
      • Chunking twenty interviews
      • Context rot
      • The system prompt
      • Six mechanisms, six rules
    3. ۳Six Built-in Weaknesses۱۸ زیرسرفصل
      • Sycophancy
      • One question, two framings
      • Asking it neutrally
      • Hallucination
      • Its four kinds
      • A live failure: the crisis number
      • Why search is not enough
      • Containing it
      • Regression to the mean
      • The default signature
      • Escaping the default
      • Bias
      • Bias on our own desk
      • Three things not to conflate
      • Containing bias
      • The knowledge edge
      • It never says it cannot
      • Six weaknesses, six antidotes
    4. ۴The Line of Delegation۱۳ زیرسرفصل
      • Auditing your own week
      • The right size of a task
      • The three tests
      • Scoring six real tasks
      • The verification rule
      • What checking actually costs
      • The dangerous case: plausible and wrong
      • The decision table
      • The main trap
      • Signing your name to it
      • What you never paste
      • Who owns the output
      • What a good boundary looks like
    5. ۵Anatomy of a Prompt۱۷ زیرسرفصل
      • Weak versus strong
      • The five parts
      • Role
      • A role library for designers
      • Input
      • Delimiters
      • Poisoned input
      • Task
      • Output
      • Boundary
      • Useless negatives
      • The assembled prompt
      • Prompting with images
      • Critiquing a screenshot
      • Debugging a bad output
      • Common errors
      • The five-part checklist
    6. ۶The Techniques۱۷ زیرسرفصل
      • Few-shot
      • How many examples, in what order
      • Rewriting microcopy with examples
      • Chain of thought
      • Reasoning models
      • Vocabulary
      • A glossary of substitutions
      • Structured output
      • Enumerated values
      • Divergence
      • Three passes, three worlds
      • Adversarial ideation
      • The pre-mortem
      • Chaining turns
      • A/B on two prompts
      • Choosing a model
      • Which technique, when
    7. ۷From Chat to Tool۱۳ زیرسرفصل
      • What is wrong with chat
      • The standing instruction
      • Three levels of tooling
      • Context files
      • The harness
      • Tools
      • Screenshots as input
      • The loop
      • Feedback, the vital condition
      • One complete loop, worked
      • Where not to close a loop
      • What a loop costs
      • When not to build a harness
    8. ۸Criteria and Stopping۱۲ زیرسرفصل
      • Define good first
      • The rubric
      • From a feeling to a rule
      • Scoring with a rubric
      • The stopping condition
      • Three kinds of stop
      • The confirmation trap
      • Human review
      • The autonomy spectrum
      • Plan mode first
      • The second reader
      • Versioning your prompts
    9. ۹Your Prompt Kit۷ زیرسرفصل
      • What a kit is
      • Building your own
      • The blank template
      • Testing the kit
      • Common kit mistakes
      • Your library
      • The chapter checklist
  2. 02 — 07ضبط‌شده

    مجهز شو

    AI Tools

    زرادخانه‌ات را می‌سازی. کلاد، چت‌جی‌پی‌تی، کودکس و فیگما AI. و مهم‌تر از همه، این‌که کدام‌شان برای کدام کار ساخته شده.

    ۳
    درس
    ۵۹
    زیرسرفصل
    خروجی
    محیطِ کارِ آماده، با ابزارهایی که به هم وصل‌اند
    1. ۱Claude, Part by Part۲۱ زیرسرفصل
      • Claude in three layers
      • Layer 1: chat and artifacts
      • Artifacts, precisely
      • Layer 2: projects
      • What belongs in project knowledge
      • What a skill is
      • Inside SKILL.md
      • Writing the description line
      • Where skills live
      • Progressive loading
      • Connectors and MCP
      • Which connector, for what
      • Before you connect anything
      • Layer 3: Claude Code
      • Permissions and plan mode
      • CLAUDE.md
      • Where that file gets read
      • A weak and a strong CLAUDE.md
      • The remaining parts
      • Which model
      • Which layer for which job
    2. ۲ChatGPT and Codex۱۹ زیرسرفصل
      • Same shape, different names
      • Canvas
      • Custom GPTs versus skills
      • Inside a custom GPT
      • The rest of ChatGPT
      • What Codex is
      • AGENTS.md
      • Where Codex lives
      • Getting started
      • One task, end to end
      • A right-sized task
      • Review, not just generation
      • Local or cloud
      • Why cloud runs fail
      • How much rope to give it
      • Codex speaks MCP too
      • What this gives designers
      • Your first three jobs this week
      • Choosing between them
    3. ۳Figma AI۱۹ زیرسرفصل
      • Why this one is different
      • The map of the tools
      • The Figma family
      • A tidy file makes a better output
      • FigJam and Slides, in practice
      • The real win is the boring place
      • Copy, in place
      • Repetitive layer chores
      • First Draft
      • A First Draft prompt
      • Figma Make
      • What to feed Make
      • User-testing something that works
      • Make or Claude Code
      • Figma as a source (MCP)
      • Dev Mode and Code Connect
      • The Figma agent
      • Before you touch a client file
      • One full pipeline, research to code
  3. 03 — 07ضبط‌شده

    انسان را بفهم

    AI Native UX Design

    برمی‌گردی به مهم‌ترین چیز. از یک درخواستِ مبهم تا یوزکیسی که معیارِ پذیرش دارد — پژوهش، سنتز و تصمیم، با مدل توی اتاق ولی نه پشتِ فرمان.

    ۷
    درس
    ۴۶
    زیرسرفصل
    خروجی
    پروندهٔ تجربه — پژوهش، تم‌ها، پرسونا و یوزکیسِ معیاردار
    1. ۱Dividing the Work۵ زیرسرفصل
      • The thesis of this chapter
      • Three things the model cannot know
      • How the work divides
      • The real danger here
      • Deliverable: the UX folder
    2. ۲From Request to Problem۹ زیرسرفصل
      • A request is not a problem
      • The brief in five lines
      • Write the assumptions down
      • Finding them in a real brief
      • Three kinds of assumption
      • The right How-Might-We
      • The measure, before the solution
      • The edge of the problem
      • Common mistakes
    3. ۳Designing the Research۹ زیرسرفصل
      • Why research at all
      • The plan on one page
      • The shape of the guide
      • The leading-question trap
      • Repairing a question with a constraint
      • Past, not future
      • How many people, and who
      • In the room
      • Consent and data
    4. ۴Extraction۸ زیرسرفصل
      • From audio to text
      • One at a time, not all at once
      • Observation versus interpretation
      • Watching it jump to interpretation
      • The extraction instruction
      • Same input, with a boundary
      • The evidence table
      • The second reader
    5. ۵Synthesis۵ زیرسرفصل
      • Why this step is different
      • By behaviour, not by topic
      • The synthesis prompt
      • What we expected and did not see
      • Three sanity checks
    6. ۶Use Cases۵ زیرسرفصل
      • What a use case is and is not
      • The nine fields
      • The use-case prompt
      • A use case that is not a flow
      • Coverage
    7. ۷Criteria and Handoff۵ زیرسرفصل
      • This one you write yourself
      • From a feeling to a pass/fail line
      • A rubric that is too strict
      • The folder you hand over
      • The handoff test
  4. 04 — 07ضبط‌شده

    ایجنت طراحی کن

    Agentic UX Design

    از طراحی صفحه به طراحی سیستم می‌رسی. حلقه، ابزار، کانتکست و مرز — و چهار لایه‌ای که همان پروندهٔ تجربه را به PRD و بازبینیِ خودکار تبدیل می‌کنند.

    ۸
    درس
    ۷۳
    زیرسرفصل
    خروجی
    یک ایجنتِ کارکننده که یک کارِ واقعی را انجام می‌دهد
    1. ۱What an Agent Is۷ زیرسرفصل
      • Where the line actually is
      • The three ingredients
      • When not to build one
      • Which design tasks need an agent
      • What designing an agent means
      • The common mistake
      • The vocabulary, once and for all
    2. ۲Inside the Loop۸ زیرسرفصل
      • The loop in four moves
      • What gets sent each turn
      • How the transcript grows
      • How a tool is called
      • An error is an observation too
      • How the loop ends
      • One complete loop, worked
      • Tracing what happened inside
    3. ۳Tools۶ زیرسرفصل
      • A tool as the model sees it
      • The description is the important part
      • Few and coarse beats many and fine
      • Tool output
      • Five tools you should not build
      • Call it yourself before handing it over
    4. ۴Context۹ زیرسرفصل
      • The thing that runs out
      • Context decay
      • The four things that eat the window
      • Compaction
      • Files are the best memory
      • The progress notebook
      • Three layers of memory
      • Retrieve, do not pile up
      • Is your transcript healthy?
    5. ۵Build It, Without Code۸ زیرسرفصل
      • The four levels of building
      • Skills: packaging a procedure
      • Subagents: why separate
      • How a subagent is written
      • A good and a bad subagent
      • Hooks: what always runs
      • Which one, when
      • Five traps while building
    6. ۶Containment and Measure۷ زیرسرفصل
      • An unleashed agent is debt
      • Three lines of defence
      • Make mistakes cheap
      • Evaluating an agent is different
      • Twenty cases is enough
      • Where the cost comes from
      • The trust checklist
    7. ۷Layers and the PRD۱۸ زیرسرفصل
      • Why one is not enough
      • The four layers
      • Each layer: input, output, boundary
      • Layers 1 and 2: PM and lead
      • Layers 3 and 4: designer and QA
      • The files are the real pipeline
      • One handoff, worked
      • Where the loop closes
      • How many layers is enough
      • What a PRD actually is
      • A human PRD and an agent PRD
      • The PRD skeleton
      • An example: the empty state
      • Acceptance criteria, the heart of it
      • What does not belong in a PRD
      • How a PM reads a PRD
      • The gaps it surfaced
      • A PRD is a living document
    8. ۸Build It۱۰ زیرسرفصل
      • The build plan
      • Step 0: the folder
      • Step 1: the shared rules
      • Step 2: five lines before any file
      • Step 3: the QA file
      • Step 4: test it on its own
      • Step 5: the extraction agent
      • Step 6: close the loop
      • Reviewing the run
      • The four things that break
  5. 05 — 07ضبط‌شده

    رابط بساز

    AI Native UI Design

    از پروندهٔ تجربه به رابط می‌رسی. اسکلت، ریزمتن، استایل‌گاید و نقد — و پوشه‌ای که بدونِ تو هم بازتولید می‌شود.

    ۷
    درس
    ۴۸
    زیرسرفصل
    خروجی
    یک دیزاین‌سیستمِ کوچک و چند صفحهٔ ساخته‌شده
    1. ۱Dividing the Work۶ زیرسرفصل
      • What we bring into this chapter
      • The thesis of this chapter
      • Three things it cannot know about your interface
      • Dividing the work, this time on the interface
      • The real danger here
      • Deliverable: the interface folder
    2. ۲The Skeleton۷ زیرسرفصل
      • A wireframe is not a low-detail drawing
      • The three questions a skeleton answers
      • Write it in text, not in boxes
      • The skeleton prompt
      • Hamghadam: the skeleton that came out
      • Three interactions, and what that number cost
      • Count the states here, not later
    3. ۳Microcopy۸ زیرسرفصل
      • Why copy comes before layout
      • Ninety characters, and why a number
      • The glossary as machine input
      • The microcopy prompt
      • Hamghadam: the strings that survived
      • Copy that diagnoses without permission
      • The empty state, three things in this order
      • Three strings left deliberately blank
    4. ۴The Style Guide۸ زیرسرفصل
      • An adjective versus a value
      • Six things that must have values
      • Three colour decisions that came from the folder
      • Type and spacing: why a closed list
      • Hamghadam: the block handed to the prompt
      • Three tokens that were rejected
      • The style guide test: one prompt, twice
      • The components we deliberately do not have
    5. ۵The Interface۷ زیرسرفصل
      • Three files to feed it, and one we withhold
      • The interface prompt
      • Hamghadam: one state, from three files
      • Four things it always adds uninvited
      • Build the states one at a time
      • The result card, where most of the work landed
      • What this output still is not
    6. ۶Critiquing the Interface۶ زیرسرفصل
      • General critique versus critique with a rubric
      • Six rows that only mean something on an interface
      • The interface QA prompt
      • Hamghadam: the report that came back
      • Three accessibility lines you can actually fail
      • What cannot be seen from an image
    7. ۷Handoff۶ زیرسرفصل
      • Four files, and who each one is for
      • The reproduction test
      • Hamghadam: the folder that was handed over
      • Three things that do not travel with the folder
      • The ship test
      • Where not to run this method
  6. 06 — 07ضبط‌شده

    تیمت را بساز

    Agentic UI Design

    همان ساختارِ لایه‌ای می‌رود روی رابط — جایی که معیارها واقعاً ماشین‌سنجیدنی‌اند. یک لایه می‌سازد، یک لایه می‌سنجد، و دیزاین‌سیستم می‌شود کانتکستِ هر دو.

    ۵
    درس
    ۴۵
    زیرسرفصل
    خروجی
    تیمی از ایجنت‌ها که رابط را می‌سازند و می‌سنجند
    1. ۱Criteria a Machine Can Check۱۲ زیرسرفصل
      • What we bring into this chapter
      • What this chapter does not repeat
      • The thesis of this chapter
      • The real danger here
      • Deliverable: two agents and a living scale
      • Judging versus measuring
      • Every row is one of three kinds
      • Hamghadam: thirteen rows, three columns
      • An executable row has three parts
      • Hamghadam: the trap we fell into on row 1
      • The one row no eye gets right
      • There are three verdicts, not two
    2. ۲The Design System as Context۹ زیرسرفصل
      • Three consumers, not one
      • Three sections, and the third is the one everyone drops
      • Read the scale from the file, not the prompt
      • Hamghadam: the scale the agent reads from
      • A value off the scale is not rounded
      • Hamghadam: eight things that look like defects and are not
      • A state the style guide never defined
      • The test: second run, zero changes
      • Count before you delete
    3. ۳One Layer Builds, One Reviews۸ زیرسرفصل
      • What the builder can no longer see
      • The dividing rule, in one line
      • The builder's report is not evidence
      • Hamghadam: the contract between layers, ten keys
      • Hamghadam: ten findings, eight rejected
      • Eight rejections, only three reasons
      • The loop that closes is not the fixing loop
      • Three that were neither rejected nor accepted
    4. ۴The Visual QA Agent۸ زیرسرفصل
      • Screenshot versus file
      • A finding with no address is not a finding
      • The agent file, in full
      • Count it, do not eyeball it
      • The most valuable output is the absence list
      • Hamghadam: three conflicts that were not resolved
      • A value on screen with no source
      • Four things this one still cannot see
    5. ۵Handoff Without a Document۸ زیرسرفصل
      • Handoff is not a moment
      • Three things that make a folder runnable
      • Hamghadam: five lines that say everything
      • A presentation is not a new document
      • Hamghadam: the shape of the report that was built
      • Hamghadam: the five things written as lessons
      • The demo trap: AI built this in ten minutes
      • Four things to say, not to be found
  7. 07 — 07ضبط‌شده

    بسازش و منتشر کن

    Vibe Coding For Product Designers

    از طراح به سازنده تبدیل می‌شوی. چیزی که طراحی کردی زنده می‌شود — واقعی، قابلِ لمس، روی یک آدرس اینترنتی که می‌شود لینکش را فرستاد.

    ۴
    درس
    ۳۳
    زیرسرفصل
    خروجی
    نسخهٔ زندهٔ محصول، منتشرشده روی اینترنت
    1. ۱What You Can Vibe Code۱۱ زیرسرفصل
      • What we bring into this chapter
      • The thesis of this chapter
      • The real danger here
      • Deliverable: a URL that opens
      • The definition, in three moves
      • Three things it gets confused with
      • What you can vibe code, and what you cannot
      • One test, instead of memorising the table
      • What you have that a programmer does not
      • Reading versus writing
      • Hamghadam: what ships and what does not
    2. ۲GitHub۷ زیرسرفصل
      • Why you need it at all
      • Five words, and that is it
      • The first fifteen minutes, step by step
      • The sentence beside each commit
      • ‎.gitignore‎, the file with no undo
      • A real example from this school
      • Four things that are never committed
    3. ۳Deployment۹ زیرسرفصل
      • Deployment, in one sentence
      • A server versus a platform
      • Vercel, and why it is the one
      • Your first ten minutes on Vercel
      • Hamghadam and this site: what runs on what
      • Three cases that genuinely need a server
      • If you genuinely need one: where to buy
      • Why a local build lies
      • A domain, the last step
    4. ۴Build the Project۶ زیرسرفصل
      • What to build with
      • What to feed the model
      • One change, run, look, commit
      • Hamghadam: one state, from three files
      • When it breaks
      • Six questions before you send the link

هم‌قدم

پیدا کردن و رزرو جلسهٔ روان‌درمانی

مسئلهٔ اصلی محصول اینه که هرچه سؤال‌های بیشتری از کاربر می‌پرسیم، از یک طرف تطبیق بهتر می‌شود و از طرف دیگر احتمال ریزش کاربر بالا می‌رود. پروژه از یک بریف چهارخطی شروع می‌شود و قدم‌به‌قدم می‌رسد به پژوهش، یوزکیس‌های معیاردار، ایجنت و PRD؛ بعد هم وارد وایرفریم، دیزاین‌سیستم، صفحه‌های رابط و پروتوتایپ می‌شویم.

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

  • جدول شواهد
  • دو پرسونا
  • هشت یوزکیس
  • PRD
  • ایجنت QA
  • وایرفریم
  • دیزاین‌سیستم کوچک
  • کتابخانه کامپوننت
  • صفحه‌های رابط
  • پروتوتایپ
  • کیس‌استادی

از داخلِ پروژه

این صفحه‌ها و این دیزاین سیستم رو توی دوره می‌سازی

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

  1. ایستگاه ۱ · حالِ این روزها

    ایستگاه ۱ · حالِ این روزها

    01 · station-1

  2. رضایت، پیش از نگه داشتن

    رضایت، پیش از نگه داشتن

    02 · consent

  3. ایستگاه ۲ · زمان و شیوه

    ایستگاه ۲ · زمان و شیوه

    03 · station-2

  4. اسکلت، تا فهرست برسد

    اسکلت، تا فهرست برسد

    04 · loading

  5. فهرستِ درمانگرها

    فهرستِ درمانگرها

    05 · results

اسکرین‌شاتِ خودِ اپ، نه ماکاپ. کشیدنی است.

دیزاین سیستمِ هم‌قدم

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

توکن
۴۰
نقش
۱۲
استایل متن
۸
کامپوننت
۱۳
رشتهٔ متنیِ ثبت‌شده
۴۰
متنِ استایل‌دار
۱۰۰٪

سه لایه، بدونِ میان‌بر

رنگ پایه

مقدار

نقش

معنا

کامپوننت

مصرف

  • color/groundrole/bg-pagetag
  • color/ink-900role/text-primarybtn-primary
  • color/accent-600role/accent-strongresult-card

هیچ کامپوننتی مستقیم به رنگِ پایه وصل نیست. رنگ که عوض شود، یک توکن عوض می‌شود — نه سیزده کامپوننت.

نشانهٔ «هم‌تراز»

دو میلهٔ هم‌اندازه، و هم‌اندازه بودنشان خودِ معناست. دور کردن، چرخاندن و سایه دادن ممنوع؛ فاصلهٔ آزاد به اندازهٔ عرضِ یک میله. ۲۱ فایلِ SVG، با قاعده.

۱۱ رنگ پایه

  • ground

    #F3EFE7

  • surface

    #FFFDF8

  • line

    #DCD5C9

  • ink-900

    #14120F

  • ink-700

    #3A342C

  • ink-500

    #6B6257

  • accent-600

    #A8421C

  • accent-500

    #D4653A

  • accent-100

    #F6E7DF

  • signal

    #27664A

  • on-ink

    #FFFDF8

تایپوگرافی · ۸ استایل

  • این روزها بیشتر درگیر چه چیزی هستید؟heading/question · 20/Bold
  • نگار موسویtitle/card · 15/Bold
  • این فهرست بر اساس چیزهایی چیده شده که خودتان گفتید.body/default · 15/Regular
  • شب‌ها خوابم نمی‌بردlabel/default · 14/Medium
  • به قلم درمانگرcaption/default · 13/Regular
  • دو پرسش، بعد فهرست.caption/meta · 12/Regular

فاصله · مضربِ ۴

  • space/4
  • space/8
  • space/12
  • space/16
  • space/24
  • space/32
  • space/64
  • space/72

قبل از شروع چی لازم داری؟

یک مدلِ متنی

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

یک ویرایشگرِ متنِ ساده

کیت پرامپت چهار فایل متنی است. Notion، Word یا حتی Notepad کاملاً کافی است. چیز عجیب و غریبی لازم نداری.

Figma

از فصل دوم به بعد لازم می‌شود. تا قبل از آن اصلاً لازم نیست بازش کنی.

هیچ دانش کدی

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

یک دفتر

شاید به نظر بی‌ربط بیاد، ولی از همهٔ ابزارها مهم‌تره. بعضی چیزها را قبل از اینکه به سراغ AI برویم، روی کاغذ درمی‌آوریم. درس چهارم فصل اول هم دقیقاً از همین‌جا شروع می‌شود.

اشتراکِ AI — برای پروژه، نه برای تماشا

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

چرا این دوره رو ساختم؟

چند ساله کارم طراحی محصوله و بارها به این نقطه رسیدم که چیزی رو طراحی کردم، تحویل دادم و بعد منتظر موندم یکی دیگه بسازتش. AI این قسمت ماجرا رو خیلی تغییر داده. ولی در عوض یک سؤال مهم‌تر به وجود اومده: حالا که می‌تونیم خیلی چیزها رو بسازیم، کجا باید از AI کمک بگیریم و کجا نباید تصمیم رو بهش بسپریم؟ این دوره دربارهٔ همین موضوعه.

چیزهایی که توی این دوره می‌بینی از دل پروژه‌های واقعی اومده. طبیعتاً اشتباه و خرابکاری هم داشته‌ایم! حتی بعضی از همان اشتباه‌ها را عمداً نشانت می‌دهم، چون به نظرم دیدن اینکه یک تصمیم چرا جواب نداده، خیلی بیشتر از دیدن یک خروجی بی‌نقص به آدم یاد می‌دهد.

مجتبی — مدرسه دیزاین ملینا

طراح رابط و تجربهٔ کاربری، بنیان‌گذار مدرسه دیزاین ملینا

ثبت‌نام

ثبت‌نام از طریق پشتیبانی انجام می‌شه

فعلاً درگاه پرداخت روی سایت نداریم و ثبت‌نام کارت‌به‌کارت انجام می‌شود. توی تلگرام پیام بده؛ همان‌جا می‌گوییم الان قیمت روی کدام پله است، چند ظرفیت باقی مانده و شماره کارت را برایت می‌فرستیم. بعد از پرداخت هم دسترسی‌ات باز می‌شود.

  1. ۱

    توی تلگرام پیام بده

    بهت می‌گیم الان قیمت روی کدوم پله‌ست و چند جا باقی مونده.

  2. ۲

    کارت‌به‌کارت کن

    شماره کارت رو همون‌جا می‌فرستیم؛ بعد رسید رو برامون بفرست.

  3. ۳

    دسترسی باز می‌شه

    فصل‌های ضبط‌شده از همان لحظه در دسترست هستند و فصل‌های بعدی هم به‌محض آماده شدن برایت باز می‌شوند.

پیام در تلگرام

معمولاً کمتر از یک روز جواب می‌دیم.

سؤال‌هایی که معمولاً می‌پرسید

باید برنامه‌نویسی بلد باشم؟

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

با چه ابزارهایی کار می‌کنیم؟

با Claude، ChatGPT، Codex و Figma کار می‌کنیم و یک فصل کامل هم به همین ابزارها اختصاص دارد. ولی هدف دوره حفظ کردن اسم ابزارها نیست. روش کار کردن را یاد می‌گیریم، چون ابزارها بالاخره عوض می‌شوند.

چقدر زمان می‌بره؟

بستگی به سرعت خودت داره. هر فصل چند ساعت ویدیو و یک‌سری تمرین دارد و قرار است خروجی تمرین‌ها مستقیماً به پروژهٔ نهایی اضافه شود.

همهٔ فصل‌ها آماده‌ان؟

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

بعد از دوره چی دارم؟

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

چرا اسم فصل‌ها و درس‌ها انگلیسیه؟

چون خیلی از این‌ها اسم و اصطلاح تخصصی‌اند. مثلاً «Agentic UX Design» را در منابع، بازار کار و رزومه‌ها با همین اسم می‌بینی. ترجمه کردنشان گاهی فقط پیدا کردن و استفاده کردن از منابع بعدی را سخت‌تر می‌کند. توضیحات، ویدیوها و جزوه‌ها فارسی‌اند.

پرداخت چطوریه؟

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

اگه پلهٔ فعلی پر شده باشه چی؟

پلهٔ بعدی فعال می‌شود. توی تلگرام پیام می‌دهی و همان‌جا می‌گوییم الان روی کدام پله هستیم و چند ظرفیت باقی مانده.

دسترسی تا کی دارم؟

همیشگیه. حتی فصل‌هایی که بعداً به دوره اضافه می‌شوند هم بدون پرداخت اضافه برایت باز خواهند شد.

از همین‌جا شروع می‌کنیم.

هفت فصل؛ از اولین پرامپت تا محصولی که منتشرش می‌کنی.

معمولاً کمتر از یک روز جواب می‌دیم.