تحسين الجماليات الأمامية
اختارها
nene@YouMind
لماذا نحب هذه المهارة
هل سئمت من تصميمات 'AI slop' المكررة؟ ستساعدك هذه المهارة على التخلص من العادية من خلال الطباعة الفريدة والألوان الجريئة والرسوم المتحركة البارعة وتخطيط المساحة المبتكر والخلفيات العميقة، لإنشاء واجهات أمامية مذهلة. إنها تقدم دليلاً جمالياً عملياً لجعل أعمالك تبرز بين العديد من المواقع، محققةً اختراقاً بصرياً حقيقياً.
التعليمات
<frontend_aesthetics>
避免平庸的"AI slop"美学，创造令人惊喜的独特前端。
## 五大核心维度
**1. 排版 Typography**
- ❌ 禁止：Inter、Roboto、Arial、系统字体
- ✅ 选择：独特、有性格的字体
- ✅ 搭配：展示字体 + 正文字体，高对比度
- ✅ 技巧：字重极端对比（100 vs 900），字号大跨度（3x+）
**2. 色彩 Color & Theme**
- ✅ 统一审美，用 CSS 变量维护
- ✅ 主导色 + 鲜明点缀色
- ❌ 避免：紫色渐变 + 白色背景
- ✅ 灵感：IDE 主题、文化美学
**3. 动效 Motion**
- ✅ CSS 动画优先（HTML）
- ✅ Motion 库
- ✅ 聚焦高影响力：一次精心编排的页面加载 > 散乱的微交互
- ✅ 滚动触发、悬停惊喜
**4. 空间布局 Spatial**
- ✅ 非对称、重叠、对角线流动
- ✅ 打破网格、大胆留白 OR 受控密集
**5. 背景细节 Backgrounds**
- ✅ 创造氛围和深度
- ✅ 渐变网格、噪点、几何图案
- ✅ 分层透明、戏剧阴影、装饰边框
## 关键原则
- 每个设计都应不同，避免重复收敛
- 实现复杂度匹配美学愿景
- 极繁需精心设计，极简需克制精确
- 跳出思维定式，做出真正独特的选择
</frontend_aesthetics>
⚡ 一行精华版
独特字体 + 大胆配色 + 精心动画 + 突破布局 + 氛围背景 = 令人难忘的前端
拒绝：Inter/Roboto、紫色渐变白底、千篇一律布局
📋 快速检查清单
维度 检查项
字体 是否避开 Inter/Roboto？是否有特色搭配？
色彩 是否有统一主题？是否避免紫色渐变？
动画 是否有精心编排的加载效果？
布局 是否突破常规网格？
背景 是否创造深度和氛围？
الوصف
شخصية خط فريدة جمالية سايبربانك داكنة تخطيط ديناميكي غير متماثل رسوم متحركة للتحميل مصممة بعناية خلق جو غامر
مهارات ذات صلة
عرض الكل
صفحة ويبزارا تشانغ ويندوز رجعي
حوّل أفكارك أو بياناتك المنظمة إلى عروض ويب تفاعلية غامرة بجمالية كلاسيكية لنظام ويندوز 95. التصميم مقتبس من zarazhangrui/beautiful-html-templates، قالب retro-windows.
صفحة ويبتقرير مشروع Warm Tones (HTML)
حوّل بياناتك واستراتيجيتك إلى عروض تقديمية عالية الجودة وجاهزة للمتصفح باستخدام نظام Warm Modular Clarity. تنشئ هذه المهارة تقارير HTML مستقلة مصممة لمراجعات نمو المنتج واستراتيجية الأعمال والرؤى التقنية. تتميز كل مجموعة بألوان معقدة من الزيتوني والحيادي الدافئ، مما يوفر جمالية احترافية مع لمسة ودودة تركز على سرد القصص الموجه نحو القرار بدلاً من النقاط العامة.
صفحة ويبنمط المحطة التكتيكية 3D
ينشئ صفحات ويب فردية بتصميم صناعي تكتيكي لمحطة المهمات. خلفية سوداء فحمية مع لون مميز واحد (برتقالي صدئ/عنبر) يستخدم فقط في زر الدعوة لاتخاذ إجراء، الترقيم، وإبرازات البيانات الرئيسية - وليس في العناوين. يتميز بنظام لوحات 'Cyber Window' بإطارات زوايا مقطوعة، أشرطة عناوين، ومؤشرات حالة. يجمع بين خط عنوان هندسي عريض وخط أحادي المسافة بأحرف كبيرة للتسميات والمعلومات والجسم. يضيف تفاصيل رسومية لـ HUD (شبكات التصويب، قراءات الإحداثيات، أشرطة الإشارة، مقاييس القوس، خطوط الربط، كتل طرفية صغيرة، علامات شيفرون، أقواس زاوية، شريط تمرير) لملء الشاشة دون فراغ. يدعم صورًا هولوغرافية ثابتة (مرئيات إطارية مولدّة بالذكاء الاصطناعي) كعناصر رئيسية. لا توجد تأثيرات توهج أو ضبابية. التخطيط غير متماثل وتحريري، مضغوط ليناسب شاشة واحدة بنسبة 16:9 دون تمرير. يستخدم لصفحات الهبوط، نماذج التسجيل/الطلب، تسجيل الأحداث، إطلاق المنتجات، المعارض، وصفحات الإحاطة للعلامات التجارية التقنية/الصناعية/الذكاء الاصطناعي.
تحسين الجماليات الأمامية
اختارها
nene@YouMind
لماذا نحب هذه المهارة
هل سئمت من تصميمات 'AI slop' المكررة؟ ستساعدك هذه المهارة على التخلص من العادية من خلال الطباعة الفريدة والألوان الجريئة والرسوم المتحركة البارعة وتخطيط المساحة المبتكر والخلفيات العميقة، لإنشاء واجهات أمامية مذهلة. إنها تقدم دليلاً جمالياً عملياً لجعل أعمالك تبرز بين العديد من المواقع، محققةً اختراقاً بصرياً حقيقياً.
التعليمات
<frontend_aesthetics>
避免平庸的"AI slop"美学，创造令人惊喜的独特前端。
## 五大核心维度
**1. 排版 Typography**
- ❌ 禁止：Inter、Roboto、Arial、系统字体
- ✅ 选择：独特、有性格的字体
- ✅ 搭配：展示字体 + 正文字体，高对比度
- ✅ 技巧：字重极端对比（100 vs 900），字号大跨度（3x+）
**2. 色彩 Color & Theme**
- ✅ 统一审美，用 CSS 变量维护
- ✅ 主导色 + 鲜明点缀色
- ❌ 避免：紫色渐变 + 白色背景
- ✅ 灵感：IDE 主题、文化美学
**3. 动效 Motion**
- ✅ CSS 动画优先（HTML）
- ✅ Motion 库
- ✅ 聚焦高影响力：一次精心编排的页面加载 > 散乱的微交互
- ✅ 滚动触发、悬停惊喜
**4. 空间布局 Spatial**
- ✅ 非对称、重叠、对角线流动
- ✅ 打破网格、大胆留白 OR 受控密集
**5. 背景细节 Backgrounds**
- ✅ 创造氛围和深度
- ✅ 渐变网格、噪点、几何图案
- ✅ 分层透明、戏剧阴影、装饰边框
## 关键原则
- 每个设计都应不同，避免重复收敛
- 实现复杂度匹配美学愿景
- 极繁需精心设计，极简需克制精确
- 跳出思维定式，做出真正独特的选择
</frontend_aesthetics>
⚡ 一行精华版
独特字体 + 大胆配色 + 精心动画 + 突破布局 + 氛围背景 = 令人难忘的前端
拒绝：Inter/Roboto、紫色渐变白底、千篇一律布局
📋 快速检查清单
维度 检查项
字体 是否避开 Inter/Roboto？是否有特色搭配？
色彩 是否有统一主题？是否避免紫色渐变？
动画 是否有精心编排的加载效果？
布局 是否突破常规网格？
背景 是否创造深度和氛围？
الوصف
شخصية خط فريدة جمالية سايبربانك داكنة تخطيط ديناميكي غير متماثل رسوم متحركة للتحميل مصممة بعناية خلق جو غامر
مهارات ذات صلة
عرض الكلصفحة ويبزارا تشانغ ويندوز رجعي
حوّل أفكارك أو بياناتك المنظمة إلى عروض ويب تفاعلية غامرة بجمالية كلاسيكية لنظام ويندوز 95. التصميم مقتبس من zarazhangrui/beautiful-html-templates، قالب retro-windows.
صفحة ويبتقرير مشروع Warm Tones (HTML)
حوّل بياناتك واستراتيجيتك إلى عروض تقديمية عالية الجودة وجاهزة للمتصفح باستخدام نظام Warm Modular Clarity. تنشئ هذه المهارة تقارير HTML مستقلة مصممة لمراجعات نمو المنتج واستراتيجية الأعمال والرؤى التقنية. تتميز كل مجموعة بألوان معقدة من الزيتوني والحيادي الدافئ، مما يوفر جمالية احترافية مع لمسة ودودة تركز على سرد القصص الموجه نحو القرار بدلاً من النقاط العامة.
صفحة ويبنمط المحطة التكتيكية 3D
ينشئ صفحات ويب فردية بتصميم صناعي تكتيكي لمحطة المهمات. خلفية سوداء فحمية مع لون مميز واحد (برتقالي صدئ/عنبر) يستخدم فقط في زر الدعوة لاتخاذ إجراء، الترقيم، وإبرازات البيانات الرئيسية - وليس في العناوين. يتميز بنظام لوحات 'Cyber Window' بإطارات زوايا مقطوعة، أشرطة عناوين، ومؤشرات حالة. يجمع بين خط عنوان هندسي عريض وخط أحادي المسافة بأحرف كبيرة للتسميات والمعلومات والجسم. يضيف تفاصيل رسومية لـ HUD (شبكات التصويب، قراءات الإحداثيات، أشرطة الإشارة، مقاييس القوس، خطوط الربط، كتل طرفية صغيرة، علامات شيفرون، أقواس زاوية، شريط تمرير) لملء الشاشة دون فراغ. يدعم صورًا هولوغرافية ثابتة (مرئيات إطارية مولدّة بالذكاء الاصطناعي) كعناصر رئيسية. لا توجد تأثيرات توهج أو ضبابية. التخطيط غير متماثل وتحريري، مضغوط ليناسب شاشة واحدة بنسبة 16:9 دون تمرير. يستخدم لصفحات الهبوط، نماذج التسجيل/الطلب، تسجيل الأحداث، إطلاق المنتجات، المعارض، وصفحات الإحاطة للعلامات التجارية التقنية/الصناعية/الذكاء الاصطناعي.
اعثر على مهارتك المفضلة التالية
استكشف مزيدًا من مهارات الذكاء الاصطناعي المنتقاة للبحث والإبداع والعمل اليومي.