English

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

سلیقهٔ طراحی، بسته‌بندی‌شده برای دستیار کدنویسی شما.

تیست‌فولیو مجموعه‌ای از ۳۰ زبان طراحی مستقل است که به شکل Agent Skill نوشته شده‌اند. یکی را نصب کنید تا Claude Code — یا هر ابزاری که SKILL.md را می‌خواند — سایت و داشبورد شما را با همان سبک بسازد: راست‌به‌چپ و چپ‌به‌راست، روشن و تیره، با رنگ برند خودتان.

دیدن اسکیل‌ها روش نصب
  • ۳۰ اسکیل
  • ۶۰ دموی واقعی
  • فارسی + English
  • هرکدام سایت + داشبورد

یک سبک انتخاب کنید

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

۳۰ سبک

۲۱

Brief

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

  • برند و سبک زندگی
  • روشن
  • متعادل
  • فارسی‌محور
دموی سایت دموی داشبورد جزئیات
۲۴

Linework

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

  • توسعه‌دهنده و داده
  • روشن
  • فشرده
دموی سایت دموی داشبورد جزئیات
۲۸

Passage

اسناد سفر در قالب رابط کاربری — کاغذ امنیتی با نقش گیوشه، کارت پرواز برای برنامه‌ها، مهر لاستیکی برای هر مرحله، سنجش امتیاز و پنلی که مثل گذرنامه ساخته شده

  • محصول و SaaS
  • روشن
  • متعادل
  • فارسی‌محور
دموی سایت دموی داشبورد جزئیات
۲۷

Dot

سخت‌افزار نقطه‌ای — کاغذی یا سیاه، یک قرمز LED، حروف نمایشی از نقطه، دستگاه طراحی‌شده با صفحهٔ زندهٔ ۱۵×۱۵ و اپ دستگاه با سازندهٔ نشانه

  • برند و سبک زندگی
  • روشن
  • متعادل
  • فارسی‌محور
دموی سایت دموی داشبورد جزئیات
۲۹

Rack

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

  • ابر و زیرساخت
  • تیره
  • متعادل
  • فارسی‌محور
دموی سایت دموی داشبورد جزئیات
۳۰

Sprocket

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

  • محتوا و رسانه
  • روشن
  • متعادل
  • فارسی‌محور
دموی سایت دموی داشبورد جزئیات

با 👍 رأی بدهید؛ فقط یک بار با حساب GitHub وارد می‌شوید. ترتیب «محبوب‌ترین» در گالری همین رأی‌ها را می‌شمارد و هر ساعت به‌روز می‌شود.

صفحهٔ این اسکیل

سه قدم تا پروژه‌ای خوش‌سلیقه

  1. ۱

    یک اسکیل نصب کنید

    یک بار مارکت‌پلیس تیست‌فولیو را اضافه کنید و سبک دلخواه را نصب کنید. هر اسکیل یک پوشهٔ مستقل است؛ کپی کردنش در ‎.claude/skills هم کافی است.

    /plugin marketplace add tastefolio/tastefolio.github.io
/plugin install switchboard@tastefolio
  2. ۲

    پروژه را به آن وصل کنید

    نام سبک را در درخواست یا فایل CLAUDE.md بیاورید. برای نتیجهٔ یکدست، در هر پروژه فقط یک سبک استفاده کنید.

    # CLAUDE.md
برای همهٔ کارهای رابط کاربری از اسکیل «Switchboard» تیست‌فولیو استفاده کن.
رنگ برند: #0f766e · زبان‌ها: fa (RTL) + en
  3. ۳

    هرچه لازم دارید بسازید

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

    یک صفحهٔ قیمت‌ها و یک داشبورد حساب کاربری
با سبک Switchboard برای اپ ما بساز.

داخل هر اسکیل چیست

SKILL.md
هویت، قواعد، چیدمان‌ها، کامپوننت‌ها، نکات RTL و چک‌لیست پیش از انتشار.
assets/tokens.css
توکن‌های روشن، تیره و فارسی. رنگ برند را عوض کنید، سبک حفظ می‌شود.
assets/kit.css · kit.js
پیاده‌سازی مرجع: کامپوننت‌ها و رفتارها، بدون وابستگی به فریم‌ورک.
references/
مبدل‌های Tailwind نسخهٔ ۳ و ۴ و shadcn/ui و الگوهای تکمیلی.
examples/
همین دو دمو — یک سایت عمومی و یک داشبورد.
خواندن راهنمای کامل