TGViewer
DevTwitter | توییت برنامه نویسی DevTwitter | توییت برنامه نویسی @devtwitter · 32.4K subscribers
Post #12425 8.17K
اگه Vibe Coder هستید و خروجی فرانت‌اندی که از Claude تحویل می‌گیرید همش تکراریه و AI Slope می‌شه، مشکل از مدل نیست؛ مشکل اینه که دارید بدون Design Direction و Skills، بهش پرامپت می‌دید.
مدل به‌صورت پیش‌فرض میره سمت امن‌ترین انتخاب‌ها: Inter، کارت‌های گرد، Heroهای تکراری، Layoutهای قابل پیش‌بینی و CTAهای کلیشه‌ای.
چند تا کار ساده (جدا از اضافه کردن Skills و Plugins) که واقعاً تفاوت ایجاد می‌کنن:

1. از Cookbook خود Anthropic استفاده کنید:
https://platform.claude.com/cookbook/coding-prompting-for-frontend-aesthetics
مثلاً این رو به System Prompt اضافه کنید:
<frontend_aesthetics>
Avoid generic AI aesthetics. Choose distinctive fonts instead of Inter, Roboto or system fonts. Commit to one clear aesthetic direction. Use dominant colors with sharp accents. Avoid predictable layouts and clichéd patterns like purple gradients. Make unexpected but deliberate choices.
</frontend_aesthetics>

2. سعی کنید Design Tokens بدید، نه توصیف کلی.
به‌جای اینکه بگید یه سایت مینیمال و ... برای فلان بساز، اینا رو مشخص کنید:
- Spacing Scale
- Border Radius
- Typography Scale
- Color Palette
- Shadow Rules
وقتی Token داشته باشه، کم‌تر تصمیم‌های پیش‌فرض خودش رو اعمال می‌کنه.

3. برای فونت تصمیم بگیرید.
مثلاً:
Use Satoshi for UI, Clash Display for headings and IBM Plex Mono for code. Never use Inter.

4. رفرنس تصویری بدید.
دو سه تا اسکرین‌شات از سایت‌هایی که دوست دارید آپلود کنید و بگید:
Borrow the visual language, not the layout.
این خیلی بهتر از اینه که فقط بگید «مثل Apple» یا «مینیمال».

5. همه موارد رو توی یک پرامپت نفرستید، چند مرحله‌ای Iterate کنید.
اول Skeleton و Layout، بعد Typography، بعد Spacing، بعد Motion و Micro-interactions. انتظار نداشته باشید همه‌چیز با یه Prompt عالی بشه.

6. ازش بخواید از انتخاب‌هاش دفاع کنه.
مثلاً:
Explain every typography, spacing and color decision before generating the code.
اینم باعث میشه کم‌تر سراغ انتخاب‌های کلیشه‌ای بره.

همین چند تا تغییر ساده باعث میشه خروجی خیلی کمتر حس «AI-generated» داشته باشه.

@DevTwitter | <گیک‌زهرا/>
  • ❤ 55
  • 🍌 23
  • 👍 10
More from @devtwitter
  1. Oct 3, 2026آسیب‌پذیری جدید Docker | CVE-2026-17106 یه آسیب‌پذیری با نام CopyEscape در Docker پیدا شده…
  2. Oct 3, 2026یک API و ۴ خروجی؛ یک تغییر و ۴ دردسر! این اتفاق زمانی میفته که SDK، CLI، Documentation و S…
  3. Oct 3, 2026🍁 آخرین روز تخفیف‌های پاییزی دوره‌های کندو 🔥 اگه منتظر زمان مناسب برای شروع یادگیری یه م…
  4. Oct 3, 2026بعضی پروژه‌ها از یه نیاز شروع میشن، بعضیها هم از یه پست لینکدین چند وقت پیش تو لینکدین یه…
  5. Oct 3, 2026سایت serv00.com سرور freebsd مادام العمر با ۵۱۲ مگ رم و ۳ گیگ فضا فقط به ۳۰۰۰ نفر می‌ده. @…
  6. Oct 2, 2026با RyzerDNS، تحریم‌ها دیگر مانع شما نیستند. از هوش مصنوعی‌هایی مثل ChatGPT، Gemini و Claud…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →