前端审美提升
اختارها
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？是否有特色搭配？
色彩 是否有统一主题？是否避免紫色渐变？
动画 是否有精心编排的加载效果？
布局 是否突破常规网格？
背景 是否创造深度和氛围？
الوصف
独特的字体个性 深色赛博朋克美学 非对称动态布局 精心编排的加载动画 沉浸式的氛围营造
مهارات ذات صلة
عرض الكل
صفحة ويبZara Zhang Retro Windows
Transform your ideas or structured data into immersive, interactive web presentations with a classic Windows 95 aesthetic. Design adapted from zarazhangrui/beautiful-html-templates, template retro-windows.
صفحة ويبWarm Tones Project Report (HTML Deck)
Transform your data and strategy into high-end, browser-ready presentations with the Warm Modular Clarity system. This skill generates self-contained HTML reports designed for product growth reviews, business strategy, and technical insights. Each deck features a sophisticated olive and warm-neutral palette, providing a professional yet approachable aesthetic that emphasizes decision-oriented storytelling over generic bullet points.
صفحة ويب3D Tactical Terminal Style
Generates single-page webpages in an industrial tactical-terminal / mission-briefing aesthetic. Charcoal-black background with exactly ONE scarce accent color (rust/amber orange) used only on the CTA button, numbering, and key data highlights — never on headline copy. Features a 'Cyber Window' panel system with cut-corner frames, title bars, and status indicators. Pairs a bold geometric sans headline typeface with an uppercase monospace type for all labels, meta info and body copy. Adds layered HUD graphic details (crosshair reticles, coordinate readouts, signal bars, arc gauges, connector lines, mini terminal blocks, chevron markers, corner brackets, ticker marquee) that fill the viewport without feeling empty. Supports static holographic imagery (AI-generated wireframe visuals) as hero elements. No glow/blur effects anywhere. Layout is asymmetric and editorial, compressed to fit a single 16:9 screen without scrolling. Use for landing pages, intake/application forms, event registration, product launches, exhibitions, and briefing pages for tech/industrial/AI brands.
前端审美提升
اختارها
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？是否有特色搭配？
色彩 是否有统一主题？是否避免紫色渐变？
动画 是否有精心编排的加载效果？
布局 是否突破常规网格？
背景 是否创造深度和氛围？
الوصف
独特的字体个性 深色赛博朋克美学 非对称动态布局 精心编排的加载动画 沉浸式的氛围营造
مهارات ذات صلة
عرض الكلصفحة ويبZara Zhang Retro Windows
Transform your ideas or structured data into immersive, interactive web presentations with a classic Windows 95 aesthetic. Design adapted from zarazhangrui/beautiful-html-templates, template retro-windows.
صفحة ويبWarm Tones Project Report (HTML Deck)
Transform your data and strategy into high-end, browser-ready presentations with the Warm Modular Clarity system. This skill generates self-contained HTML reports designed for product growth reviews, business strategy, and technical insights. Each deck features a sophisticated olive and warm-neutral palette, providing a professional yet approachable aesthetic that emphasizes decision-oriented storytelling over generic bullet points.
صفحة ويب3D Tactical Terminal Style
Generates single-page webpages in an industrial tactical-terminal / mission-briefing aesthetic. Charcoal-black background with exactly ONE scarce accent color (rust/amber orange) used only on the CTA button, numbering, and key data highlights — never on headline copy. Features a 'Cyber Window' panel system with cut-corner frames, title bars, and status indicators. Pairs a bold geometric sans headline typeface with an uppercase monospace type for all labels, meta info and body copy. Adds layered HUD graphic details (crosshair reticles, coordinate readouts, signal bars, arc gauges, connector lines, mini terminal blocks, chevron markers, corner brackets, ticker marquee) that fill the viewport without feeling empty. Supports static holographic imagery (AI-generated wireframe visuals) as hero elements. No glow/blur effects anywhere. Layout is asymmetric and editorial, compressed to fit a single 16:9 screen without scrolling. Use for landing pages, intake/application forms, event registration, product launches, exhibitions, and briefing pages for tech/industrial/AI brands.
اعثر على مهارتك المفضلة التالية
استكشف مزيدًا من مهارات الذكاء الاصطناعي المنتقاة للبحث والإبداع والعمل اليومي.