طراحیتایید شده توسط سپنتا پویا

طراحی آیکون به سبک کاشی

آیکون‌های تمیز، هم‌خانواده و خوانا در ۲۰ پیکسل؛ همان استانداردی که ۴۸۰۰ آیکون کاشی با آن ساخته شده.

Claude CodeClaude.ai و DesktopCodexCursorGemini CLI

آیکون ساخته‌شده با این استاندارد۴۸۰۰+

سبک پشتیبانی‌شده۶

اندازه‌ی بازبینی۱۶ · ۲۰ · ۲۴px

وابستگی اسکریپت‌هاصفر

آخرین نسخهv1.0.0

به‌روزرسانی۱۷ آبان ۱۴۰۵

فایل‌ها۸ فایل · ۱۵٫۳ کیلوبایت

خریدارانتازه منتشر شده

درباره

این اسکیل چه می‌کند

کاشی بیش از ۴۸۰۰ آیکون در شش سبک دارد و همه‌شان با یک استاندارد واحد طراحی و بازبینی شده‌اند. این اسکیل همان استاندارد است که به زبان مدل نوشته شده، تا Claude یا Codex بتواند برای پروژه‌ی شما آیکون بکشد که کنار بقیه‌ی رابط کاربری درست بنشیند. مشکل آیکون‌هایی که مدل‌ها معمولاً می‌سازند این است که در بزرگ‌نمایی خوب به نظر می‌رسند، ولی در اندازه‌ی واقعی ۱۶ یا ۲۰ پیکسل خط‌ها به هم می‌چسبند، وزنشان با آیکون‌های کناری نمی‌خواند و رنگ ثابت دارند. این اسکیل مدل را مجبور می‌کند روی شبکه‌ی ۲۰×۲۰ با خط ۱٫۵ کار کند، فضای منفی را از لبه تا لبه بسنجد و قبل از تحویل خروجی را با اسکریپت بررسی کند. همراه اسکیل دو ابزار بدون وابستگی می‌آید: یک بررسی‌کننده که هر SVG را با قواعد شبکه مقایسه می‌کند و دلیل هر خطا را می‌گوید، و یک صفحه‌ی پیش‌نمایش که آیکون‌ها را در ۱۶، ۲۰ و ۲۴ پیکسل روی زمینه‌ی تیره و روشن کنار آیکون‌های مرجع نشان می‌دهد.

امکانات

چه چیزهایی داخلش است

شبکه‌ی ۲۰×۲۰، خط ۱٫۵، سر و اتصال گرد و قاب‌های گوشه‌پیوسته (squircle)
شش سبک: خطی، توپر، حجمی، دورنگ، شکسته و منحنی؛ با قاعده‌ی توپرسازی دستی
قواعد نشان وضعیت گوشه (ساعت، تیک، قفل، دانلود) با ماسک ۴٫۶ واحدی
اسکریپت بررسی SVG: viewBox، ضخامت خط، currentColor، محدوده‌ی امن و مرکز بصری
صفحه‌ی پیش‌نمایش ۱۶/۲۰/۲۴ پیکسل در تم تیره و روشن با شبکه‌ی بازرسی
نام‌گذاری kebab-case، عنوان فارسی و کلیدواژه‌های جست‌وجوی دوزبانه

کاربردها

کجا به کارتان می‌آید

آیکون‌ست اختصاصی محصول

برای اپ یا داشبوردتان آیکون‌هایی بخواهید که شبیه هم باشند، نه مجموعه‌ای از پنج کتابخانه‌ی مختلف.

آیکونی که در کتابخانه‌ها نیست

مفهوم‌های بومی مثل «کارت‌به‌کارت»، «پلاک» یا «سامانه‌ی مودیان» را با همان زبان بصری بقیه‌ی آیکون‌ها بکشید.

نسخه‌ی توپر و حالت‌ها

از یک آیکون خطی، نسخه‌ی توپر، حالت‌های «در انتظار»، «تایید شده» و «قفل» را بدون شلوغی بسازید.

بازبینی آیکون‌های موجود

آیکون‌های تیم را بدهید تا مشکل وزن، مرکز، فضای منفی و خوانایی در اندازه‌ی کوچک گزارش شود.

نمونه‌ی واقعی

درخواست شما، کاری که انجام می‌شود

شمایه آیکون برای «بازیابی نسخه‌ی قبلی فایل» بکش که کنار آیکون‌های کاشی بشینه

اسکیلمفهوم به «دو برگه + نشان فلش چرخشی» شکسته می‌شود؛ نسخه‌ی ساده‌شده‌ی پایه (بدون ساعت) انتخاب می‌شود، SVG روی شبکه‌ی ۲۰×۲۰ کشیده و با check_icon بررسی می‌شود، و پیش‌نمایش ۱۶/۲۰/۲۴ پیکسل کنار search، bell و user تحویل داده می‌شود.

شماReview these 12 icons from our design system, they look off next to each other

اسکیلگزارشی به ترتیب اثر: سه آیکون با خط ۲ به‌جای ۱٫۵، دو آیکون با رنگ ثابت، یک قاب بیش از حد پرجزئیات که در ۱۶ پیکسل سنگین دیده می‌شود، و پیشنهاد اصلاح هندسی هر مورد با نمایش قبل و بعد.

نصب

نصب روی ابزار شما

ترمینال، VS Code، JetBrains و اپ دسکتاپ (تب Code)~/.claude/skills/kashi-icon-design/

فایل zip را از کتابخانه‌ی حسابتان دانلود کنید
فایل kashi-icon-design.zip با مشخصات لایسنس شما ساخته می‌شود. نیازی به استخراج دستی نیست.
برای همه‌ی پروژه‌ها (پیشنهادی)
اسکیل در پوشه‌ی شخصی نصب می‌شود و در هر پروژه‌ای در دسترس است.
macOS / Linux
mkdir -p ~/.claude/skills && unzip -o ~/Downloads/kashi-icon-design.zip -d ~/.claude/skills/
Windows (PowerShell)
Expand-Archive -Force $HOME\Downloads\kashi-icon-design.zip $HOME\.claude\skills
یا فقط برای یک پروژه
داخل ریشه‌ی پروژه اجرا کنید. اگر پوشه را کامیت کنید، اعضای تیمی که لایسنس دارند هم آن را می‌بینند.
mkdir -p .claude/skills && unzip -o ~/Downloads/kashi-icon-design.zip -d .claude/skills/
بررسی و استفاده
Claude Code را دوباره باز کنید. هر وقت کارتان به این اسکیل مربوط باشد Claude خودش آن را فعال می‌کند. برای اجرای مستقیم بنویسید /kashi-icon-design یا بپرسید «چه اسکیل‌هایی داری؟».
claude

به‌روزرسانی: نسخه‌ی جدید را دانلود و همان دستور را دوباره اجرا کنید؛ گزینه‌ی -o فایل‌های قبلی را جایگزین می‌کند.

Codex CLI، افزونه‌ی IDE و اپ Codex~/.codex/skills/kashi-icon-design/

نصب برای همه‌ی پروژه‌ها
macOS / Linux
mkdir -p ~/.codex/skills && unzip -o ~/Downloads/kashi-icon-design.zip -d ~/.codex/skills/
Windows (PowerShell)
Expand-Archive -Force $HOME\Downloads\kashi-icon-design.zip $HOME\.codex\skills
یا فقط برای یک مخزن
Codex اسکیل‌های داخل مخزن را هم می‌خواند (پوشه‌ی استاندارد .agents/skills).
mkdir -p .agents/skills && unzip -o ~/Downloads/kashi-icon-design.zip -d .agents/skills/
Codex را دوباره اجرا کنید
بعد از ری‌استارت، اسکیل در فهرست /skills دیده می‌شود. برای صدا زدن مستقیم بنویسید $kashi-icon-design یا کار را عادی توضیح دهید.
codex

به‌روزرسانی: دستور نصب را دوباره اجرا کنید و Codex را ری‌استارت کنید.

ویرایشگر Cursor و Cursor CLI.cursor/skills/kashi-icon-design/

اگر قبلاً برای Claude Code یا Codex نصب کرده‌اید، کاری لازم نیست
Cursor پوشه‌های ~/.claude/skills و ~/.codex/skills را هم می‌خواند.
نصب مستقیم
همه‌ی پروژه‌ها
mkdir -p ~/.cursor/skills && unzip -o ~/Downloads/kashi-icon-design.zip -d ~/.cursor/skills/
فقط این پروژه
mkdir -p .cursor/skills && unzip -o ~/Downloads/kashi-icon-design.zip -d .cursor/skills/
استفاده
در چت Agent بنویسید /kashi-icon-design یا اجازه دهید Agent خودش آن را انتخاب کند.

به‌روزرسانی: دستور نصب را دوباره اجرا کنید.

Gemini CLI گوگل~/.gemini/skills/kashi-icon-design/

نصب
همه‌ی پروژه‌ها
mkdir -p ~/.gemini/skills && unzip -o ~/Downloads/kashi-icon-design.zip -d ~/.gemini/skills/
فقط این پروژه
mkdir -p .gemini/skills && unzip -o ~/Downloads/kashi-icon-design.zip -d .gemini/skills/
بررسی
در Gemini CLI دستور /skills list را بزنید تا اسکیل را ببینید.
/skills list

به‌روزرسانی: دستور نصب را دوباره اجرا کنید.
اگر نسخه‌ی شما پوشه‌ی بالا را نمی‌شناسد، همان فایل را در ~/.agents/skills استخراج کنید.

Windsurf، Copilot، OpenCode، ChatGPT و…AGENTS.md یا دستورالعمل پروژه

ابزارهای سازگار با استاندارد Agent Skills
هر ابزاری که پوشه‌ای با SKILL.md را می‌خواند، کافی است همین zip را در پوشه‌ی اسکیل‌های آن ابزار (معمولاً .agents/skills) استخراج کنید.
mkdir -p .agents/skills && unzip -o ~/Downloads/kashi-icon-design.zip -d .agents/skills/
ابزارهای بدون پشتیبانی از اسکیل
محتوای SKILL.md را در دستورالعمل پروژه (AGENTS.md، custom instructions یا Project knowledge) بگذارید و فایل‌های کمکی را کنار پروژه نگه دارید.

به‌روزرسانی: فایل‌ها را با نسخه‌ی جدید جایگزین کنید.

محتوا

فایل‌های داخل بسته

kashi-icon-design/SKILL.mdkashi-icon-design/assets/design-scale.svgkashi-icon-design/references/badges.mdkashi-icon-design/references/delivery.mdkashi-icon-design/references/geometry.mdkashi-icon-design/references/styles.mdkashi-icon-design/scripts/check_icon.mjskashi-icon-design/scripts/preview.mjskashi-icon-design/LICENSE.txt

پیش‌نیاز: Node.js 18 یا بالاتر برای اسکریپت‌های بررسی و پیش‌نمایش (اختیاری). در Claude.ai اسکریپت‌ها داخل محیط اجرای کد اجرا می‌شوند.

تاریخچه

نسخه‌ها

v1.0.0
۱۷ آبان ۱۴۰۵
انتشار اول: قواعد شبکه، شش سبک، نشان‌های وضعیت، check_icon و preview.

سوال‌ها

سوال‌های این اسکیل

فقط برای کسانی است که از کاشی استفاده می‌کنند؟

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

مدل واقعاً می‌تواند آیکون خوب بکشد؟

مدل‌های نسل جدید با قواعد دقیق و یک حلقه‌ی بررسی خوب عمل می‌کنند. این اسکیل همین حلقه را می‌سازد: طراحی، بررسی خودکار، پیش‌نمایش در اندازه‌ی واقعی و اصلاح.

خروجی را کجا استفاده کنم؟

SVGها مستقیماً در وب، React، فیگما (Paste as SVG) و اپ‌های موبایل قابل استفاده‌اند و رنگشان از متن اطراف گرفته می‌شود.