‏StyleSeed: به هوش مصنوعی قضاوت طراحی یاد می‌ده

نویسنده تو این مقاله StyleSeed رو معرفی می‌کنه؛ یه دیزاین سیستم که مخصوص ابزارهای کدنویسی با هوش مصنوعی مثل Claude Code، Cursor و کلاً «vibe coding» ساخته شده. مسئله‌ای که دنبال حلشه آشناست: وقتی از این ابزارها می‌خوای یه داشبورد بسازن، خروجی معمولاً آماتور و «ساختهٔ AI» به نظر می‌رسه.

ادعای محوری مقاله جالبه: نویسنده می‌گه بقیهٔ پروژه‌هایی که می‌خوان طراحی AI رو بهتر کنن، نیمهٔ اشتباه مسئله رو حل می‌کنن. اون‌ها به مدل دیتای بیشتری می‌دن — پالت رنگ برند، فونت، مقدار سایه. ولی نویسنده می‌گه خودش اول همینو امتحان کرده (کل توکن‌های طراحی Toss رو ریخته تو پرامپت) و خروجی هنوز جنریک بوده. نتیجه‌گیریش اینه که فرق یه طراح ارشد با یه طراح تازه‌کار، چیزی که دارن نیست، بلکه چیزیه که می‌دونن باهاش چی‌کار کنن — یعنی قضاوت طراحی، نه دیتا.

بر همین اساس، StyleSeed خودشو یه «موتور طراحی» معرفی می‌کنه که شامل ۶۹ قانون بصری، ۴۸ کامپوننت React، یه سیستم موشن نام‌گذاری‌شده و ۱۴ تا اسلش‌کامند (مثل /ss-setup، /ss-page، /ss-review) هست. این قوانین به صورت یه فایل Markdown به مدل داده می‌شن که خودکار می‌خونتش. مثلاً قانون‌هایی مثل «مشکی واقعی #000 نیست، #2A2A2A هست» یا «تو کل اپ فقط یه رنگ accent، بقیه خاکستری».

نکتهٔ مهم اینه که این قوانین برند-اگنوستیک هستن — به رنگ خاصی اشاره نمی‌کنن و فقط با توکن‌های معنایی کار می‌کنن. برای همین یه فایل theme.css که --brand رو تعیین می‌کنه، ظاهر اپ رو با یه اتریبیوت data-skin بین برندهای مختلف (Toss، Stripe، Linear، Vercel، Notion) عوض می‌کنه، بدون بازنویسی کد. پروژه پنج اسکین آماده داره و ۵۸ تای دیگه هم از مخزن awesome-design-md قابل دریافته.

بخش موشن هم یه واژگان مشخص به انیمیشن می‌ده: پنج «seed» با شخصیت‌های مختلف (مثل Spring پرانرژی یا Silk نرم) که هرکدوم یه recipe قابل اشتراک framer-motion هستن:

import { spring } from "@engine/motion";

<motion.button {...spring.hover} {...spring.press}>Save</motion.button>

نویسنده تأکید می‌کنه StyleSeed جایگزین shadcn/ui نیست، بلکه روی همون الگوها و primitiveهای Radix ساخته شده و در واقع shadcn/ui به‌علاوهٔ قضاوت طراحی و یکپارچگی با ابزارهای AI هست. پروژه با لایسنس MIT منتشر شده.

نکات کلیدی:

• یه دیزاین سیستم برای Claude Code و Cursor و vibe coding
• ایدهٔ محوری: مشکل خروجی AI کمبود دیتا نیست، نبود قضاوت طراحیه
• ۶۹ قانون بصری، ۴۸ کامپوننت React، یه سیستم موشن و ۱۴ اسلش‌کامند
• قوانین برند-اگنوستیک‌ان؛ تعویض ظاهر فقط با یه theme.css و اتریبیوت data-skin
• روی shadcn/ui و Radix ساخته شده، نه جایگزینش؛ لایسنس MIT