چرا HTML جای Markdown را برای کار با هوش مصنوعی می‌گیرد؟

چرا HTML جای Markdown را برای کار با هوش مصنوعی می‌گیرد؟

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

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

از طرفی، این روزها کمتر افرادی را می‌توان دید که این فایل‌ها را ویرایش می‌کنند و بیشتر از آن‌ها به‌عنوان مشخصات (spec)، فایل مرجع، خروجی طوفان فکری و غیره استفاده می‌شود. وقتی هم ویرایشی انجام می‌دهیم، معمولاً از Claude یا هر ابزار هوش مصنوعی دیگری می‌خواهیم آن را انجام دهد؛ که یکی از بزرگ‌ترین مزایای مارک‌داون را از بین می‌برد.

به همین دلیل، فایل‌ها و فرمت HTML را به‌عنوان فرمت خروجی به مارک‌داون ترجیح می‌دهیم و می‌بینم که افراد بیشتری در تیم Claude Code هم همین رویکرد را در پیش گرفته‌اند.

(اگر می‌خواهید با چند نمونه شروع کنید، می‌توانید اینجا تعدادی را ببینید: thariqs.github.io/html-effectiveness فقط بعدش برگردید تا دربارهٔ چرایی آن بیشتر بخوانید.)

 

پیشنهاد نویسنده: بحران نوظهور امنیت در سیستم‌های هوش مصنوعی

 

HTML یا Markdown برای کار با هوش مصنوعی کدام مناسب‌تر است؟

چرا اصلا HTML باید استفاده شود؟

چگالی اطلاعات (Information Density) در اچ‌تی‌ام‌ال

خروجی کدهای HTML می‌تواند اطلاعات بسیار غنی‌تری نسبت به مارک‌داون منتقل کند. البته ساختار سادهٔ سند مثل تیترها و فرمت‌بندی را دارد، اما علاوه بر آن می‌تواند انواع دیگری از اطلاعات را هم نمایش دهد، از جمله:

• داده‌های جدولی با استفاده از تگ table.
• داده‌های طراحی با CSS.
• تصویرسازی با SVG.
• قطعه‌کدها با تگ script.
• تعاملات با استفاده از عناصر HTML به‌همراه JavaScript و CSS.
• گردش‌کارها (workflow) با SVG و HTML.
• داده‌های فضایی با موقعیت‌دهی مطلق و canvas.
• تصاویر با تگ image.

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

در نبود چنین قابلیتی، مدل ممکن است در مارک‌داون به روش‌های ناکارآمدتری متوسل شود؛ مثلاً دیاگرام‌های ASCII یا تخمین رنگ‌ها با کاراکترهای یونیکد، مثل اسکرین‌شاتی که Claude Code برای نمایش رنگ در مارک‌داون استفاده کرده بود.

 

اهمیت وضوح بصری و سهولت خواندن تفاوت بین HTML و Markdown

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

اما اسناد HTML بسیار خواناتر و مناسب‌تر هستند. Claude می‌تواند ساختار بصری را به‌گونه‌ای سازمان دهد که با تب‌ها، تصویرسازی‌ها، لینک‌ها و غیره به‌راحتی قابل پیمایش باشد. حتی می‌تواند واکنش‌گرا (responsive) باشد تا بسته به دستگاه، تجربهٔ خواندن متفاوتی ارائه دهد.

 

سهولت اشتراک‌گذاری فایل‌های HTML و Markdown

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

اما در HTML، کافی است فایل را آپلود کنید (مثلاً روی S3 یا ابرآروان) تا بتوانید به‌راحتی لینک آن را به اشتراک بگذارید. همکارانتان می‌توانند هرجا که بخواهند آن را باز کنند و راحت به آن ارجاع دهند. احتمال اینکه کسی واقعاً spec، گزارش یا توضیح PR شما را بخواند اگر به‌صورت HTML باشد، بسیار بیشتر است.

 

تعامل دوطرفه در فایل‌های HTML مزیت مهمی است.

فایل‌های HTML این امکان را می‌دهند که با سند تعامل داشته باشید. مثلاً ممکن است بخواهید اسلایدر یا کنترل‌هایی برای تنظیم طراحی اضافه کنید یا گزینه‌های مختلف یک الگوریتم را تغییر دهید تا ببینید چه اتفاقی می‌افتد. حتی می‌توانید از Claude بخواهید دکمه‌ای بسازد که این تغییرات را در قالب یک prompt برای بازگرداندن به Claude Code کپی کند.

 

دریافت و هضم داده‌ها (Data Ingestion)

چرا به‌جای ClaudeAI یا Claude Design از Claude Code برای ساخت فایل HTML استفاده کنیم؟ یکی از مهم‌ترین دلایل، حجم عظیم کانتکستی است که Claude Code می‌تواند دریافت کند. مثلاً هنگام نوشتن همین مقاله، از Claude Code خواستیم پوشهٔ کدها را بخواند، تمام فایل‌های HTML تولیدشده را پیدا کند، آن‌ها را گروه‌بندی و دسته‌بندی کند، و سپس یک فایل HTML بسازد که دیاگرام‌هایی برای هر دسته داشته باشد. دیاگرام‌هایی که در این مقاله می‌بینید مستقیماً حاصل همین کار هستند.

علاوه بر فایل‌سیستم، Claude Code می‌تواند از طریق MCPها (مثل Slack یا Linear)، مرورگر وب شما (با Claude در Chrome)، تاریخچهٔ git و غیره نیز اطلاعات بیشتری جمع‌آوری کند.

 

لذت‌بخش بودن

ساخت اسناد HTML با Claude صرفاً سرگرم‌کننده‌تر است و باعث می‌شود احساس کنیم بیشتر در فرایند خلق درگیر و سرمایه‌گذاری شده‌ایم و همین به‌تنهایی دلیل کافی برای انتخاب آن است.

 

حالا چگونه شروع کنیم؟

کمی نگران هستیم که شما همراهان این مقاله را بخوانید و آن را به چیزی شبیه skill به نام /html تبدیل کنید. شاید چنین کاری ارزش‌هایی داشته باشد، اما می‌خواهیم تأکید کنیم که برای واداشتن Claude به این کار، لازم نیست کار خاصی انجام دهید. فقط کافی است بگویید: «یک فایل HTML بساز» یا «یک artifact HTML بساز».

ترفند اصلی این است که بدانید می‌خواهید آن artifact چه کاری انجام دهد و چطور می‌خواهید از آن استفاده کنید. شاید بعداً skill اختصاصی بسازید، اما فعلاً پیشنهاد می‌کنیم با promptهای ساده و از صفر شروع کنید تا کم‌کم درک بهتری از کاربردهای مختلف آن پیدا کنید.

 

طراحی مشخصات، برنامه‌ریزی و اکتشاف

HTML بومی غنی برای Claude فراهم می‌کند تا عمیق‌تر وارد مسئله شود. وقتی روی مسئله‌ای کار را شروع می‌کنیم، به‌جای یک برنامهٔ سادهٔ مارک‌داون، انتظار داریم شبکه‌ای از فایل‌های HTML ساخته شود. مثلاً ممکن است ابتدا از Claude Code بخواهیم طوفان فکری انجام دهد و چند مسیر مختلف را بررسی کند. بعد از آن بخواهیم یکی از مسیرها را بیشتر گسترش دهد، ماکاپ یا قطعه‌کد بسازد. در نهایت، وقتی حس کنیم مسیر مناسب پیدا شده، از آن بخواهم برنامهٔ پیاده‌سازی بنویسد.

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

نمونه پرامپت‌ها:

• «مطمئن نیستم صفحهٔ onboarding را در چه جهتی ببرم. شش رویکرد کاملاً متفاوت تولید کن از نظر چیدمان، لحن و تراکم محتوا متفاوت باشند و همه را در یک فایل HTML به‌صورت grid کنار هم قرار بده تا بتوانم مقایسه‌شان کنم. برای هرکدام توضیح بده چه trade-offای دارد.»
• «یک برنامهٔ پیاده‌سازی کامل در قالب فایل HTML بساز. حتماً چند mockup، جریان داده (data flow) و قطعه‌کدهای مهمی که ممکن است بخواهم مرور کنم اضافه کن. خواندن و هضم آن را ساده کن.»
• کاربردها:
• بررسی روش‌های مختلف پیاده‌سازی یک قابلیت.
• بررسی چند طراحی بصری متفاوت.

 

بازبینی و درک کد تولید شده با هوش مصنوعی

خواندن کد در فایل مارک‌داون دشوار است. اما در HTML می‌توان diffها، annotationها، flowchartها، ماژول‌ها و غیره را رندر کرد. از این قابلیت می‌توان برای درک کدی که ایجنت نوشته، بازبینی کد، یا توضیح یک PR به شخص دیگری استفاده کرد.

اغلب حس می‌کنیم این روش از نمای diff پیش‌فرض GitHub بهتر عمل می‌کند، و حالا تقریباً برای هر PR یک توضیح HTML ضمیمه می‌کنیم.

نمونه پرامپت:

• «برای review این PR کمکم کن و یک artifact HTML بساز که آن را توضیح دهد. با منطق streaming/backpressure خیلی آشنا نیستم، پس روی آن تمرکز کن. diff واقعی را با annotationهای حاشیه‌ای inline رندر کن، یافته‌ها را بر اساس شدت رنگ‌بندی کن و هر چیز دیگری که برای انتقال بهتر مفهوم لازم است اضافه کن.»

کاربردها:

• ساخت PR.
• review کردن PR.
• درک یک موضوع در کد.

 

طراحی و نمونه‌سازی (Prototype) با HTML

Claude Design بر پایهٔ HTML ساخته شده، چون HTML برای طراحی فوق‌العاده گویاست؛ حتی اگر خروجی نهایی HTML نباشد.

Claude می‌تواند طراحی را در HTML sketch کند و بعد آن را به زبان دلخواه شما مثل React یا Swift تبدیل کند. همچنین می‌توانید تعاملات، انیمیشن‌ها و رفتارهای مختلف را prototype کنید. مثلاً از Claude بخواهید slider یا knob بسازد تا دقیقاً تنظیمات مطلوبتان را پیدا کنید.

نمونه پرامپت:

• «می‌خواهم یک دکمهٔ checkout جدید prototype کنم. وقتی کلیک می‌شود، ابتدا یک animation اجرا کند و بعد سریع بنفش شود. یک فایل HTML بساز که چند slider و option داشته باشد تا بتوانم نسخه‌های مختلف این animation را امتحان کنم. همچنین یک دکمهٔ copy بده تا پارامترهای موفق را کپی کنم.»

کاربردها:

• ساخت artifact برای design system.
• تنظیم و اصلاح componentها.
• تجسم کتابخانهٔ componentها.
• نمونه‌سازی انیمیشن‌های لذت‌بخش.

 

گزارش، تحقیق و یادگیری

Claude Code در ترکیب اطلاعات از منابع مختلف و تبدیل آن‌ها به گزارش‌های خوانا فوق‌العاده عمل می‌کند. می‌توانید از Claude بخواهید Slack، کدبیس، تاریخچهٔ git، اینترنت و غیره را جست‌وجو کند و سپس گزارش‌هایی بسیار خوانا برای خودتان، تیم یا مدیران تهیه کند.

این خروجی می‌تواند یک سند HTML طولانی، توضیح تعاملی یا حتی اسلاید و deck باشد. همچنین می‌توانید از Claude بخواهید برای تجسم بهتر از SVG استفاده کند.

نمونه پرامپت:

• «واقعاً متوجه نمی‌شوم rate limiter ما چطور کار می‌کند. کدهای مرتبط را بخوان و یک صفحهٔ HTML توضیحی بساز: دیاگرام جریان token-bucket، سه یا چهار قطعه‌کد کلیدی با annotation، و بخشی با عنوان gotchas در انتها. آن را برای کسی بهینه کن که فقط یک بار می‌خواهد بخواندش.»

کاربردها:

• خلاصه‌سازی عملکرد یک feature.
• توضیح یک مفهوم.
• گزارش هفتگی برای مدیر.
• گزارش incident برای تیم رهبری.
• دیاگرام‌های SVG، flowchartها و نمودارهای فنی.

 

رابط‌های ویرایش سفارشی

گاهی توضیح دقیق چیزی که می‌خواهید فقط با متن سخت است. در این مواقع، از Claude می‌خواهیم یک editor موقت برای همان نیاز خاص بسازد؛ نه یک محصول کامل یا ابزار reusable، بلکه فقط یک فایل HTML برای همان دادهٔ مشخص. ترفند اصلی این است که در پایان، قابلیت export داشته باشد: مثلاً دکمهٔ «copy as JSON» یا «copy as prompt» که خروجی تعاملات شما را به چیزی تبدیل کند که بتوانید دوباره در Claude Code paste کنید.

نمونه پرامپت‌ها:

• «باید این ۳۰ تیکت Linear را دوباره اولویت‌بندی کنم. یک فایل HTML بساز که هر تیکت را به‌صورت کارت draggable در ستون‌های Now / Next / Later / Cut نمایش دهد. بر اساس بهترین حدس خودت آن‌ها را مرتب کن. دکمهٔ “copy as markdown” اضافه کن که ترتیب نهایی را همراه با یک توضیح یک‌خطی برای هر دسته export کند.»
• «این پیکربندی feature flag ماست. یک editor فرم‌محور بساز، flagها را بر اساس بخش گروه‌بندی کن، وابستگی‌ها را نشان بده، و اگر flagی فعال شد که پیش‌نیازش خاموش است هشدار بده. یک دکمهٔ “copy diff” هم اضافه کن که فقط کلیدهای تغییرکرده را بدهد.»
• «دارم این system prompt را تنظیم می‌کنم. یک editor دو ستونه بساز: سمت چپ prompt قابل‌ویرایش با variable slotهای هایلایت‌شده، سمت راست سه ورودی نمونه که خروجی template را زنده render کنند. شمارندهٔ کاراکتر/توکن و دکمهٔ copy هم اضافه کن.»

کاربردها:

• اولویت‌بندی و دسته‌بندی هر چیزی. (تیکت، تست‌کیس، بازخورد و…)
• ویرایش configهای ساختاریافته.
• تنظیم prompt و template با preview زنده.
• مدیریت dataset و export انتخاب‌ها.
• annotation روی سند یا diff.
• انتخاب مقادیری که توضیحشان با متن سخت است. (رنگ، curve، cron، regex و…)

 

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

آیا از نظر تعداد توکن بهینه‌تر نیست؟

گرچه مارک‌داون معمولاً توکن کمتری مصرف می‌کند، اما تجربه‌ ما این بوده که بیان‌پذیری بیشتر HTML و احتمال بسیار بالاتر اینکه واقعاً آن را بخوانیم، باعث خروجی کلی بهتری می‌شود. با پنجرهٔ کانتکست ۱ میلیون توکنی Opus 4.7، افزایش مصرف توکن عملاً محسوس نیست.

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

صادقانه، تقریباً برای همه‌چیز استفاده از مارک‌داون را کنار گذاشته‌ایم؛ هرچند احتمالاً در طیف «حداکثری‌گرایان HTML» قرار داریم.

فایل HTML را چطور مشاهده می‌کنید؟

معمولاً آن را محلی در مرورگر باز می‌کنیم (حتی می‌توانید از Claude بخواهید خودش بازش کند)، یا اگر لینک قابل‌اشتراک بخواهم روی S3 یا یک هاست ارزان قیمت آپلود می‌کنیم.

آیا ساخت HTML بیشتر طول نمی‌کشد؟

بله، طول می‌کشد. HTML ممکن است ۲ تا ۴ برابر بیشتر از مارک‌داون زمان ببرد، اما به‌نظر من نتیجه‌اش ارزشش را دارد.

وضعیت version control چه می‌شود؟

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

چطور Claude را وادار کنم مطابق سلیقهٔ من طراحی کند و خروجی زشت نسازد؟

افزونهٔ طراحی فرانت‌اند کمک می‌کند Claude فایل‌های HTML بهتری بسازد. اما برای هماهنگی با سبک شرکت خودتان، می‌توانید یک فایل HTML شامل design system بسازید و Claude را به کدبیس خودتان ارجاع دهید. بعد از آن می‌توانید همان فایل را به‌عنوان مرجع برای سایر فایل‌های HTML استفاده کنید.

 

این نوشته الهام گرفته از x.com/trq212/status/2052809885763747935 می‌باشد.