اگه 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 | <
گیکزهرا/>