前端审美提升
Рекомендовано
nene@YouMind.AI
Чому нам подобається ця навичка
厌倦了千篇一律的“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？是否有特色搭配？
色彩 是否有统一主题？是否避免紫色渐变？
动画 是否有精心编排的加载效果？
布局 是否突破常规网格？
背景 是否创造深度和氛围？
Опис
独特的字体个性 深色赛博朋克美学 非对称动态布局 精心编排的加载动画 沉浸式的氛围营造
Схожі навички
Переглянути всі
ВебсторінкаСтиль 3D тактичного терміналу
Генерує односторінкові веб-сторінки в естетиці промислового терміналу / брифінгу місії. Чорно-вугільний фон з рівно ОДНИМ акцентним кольором (іржаво-помаранчевим), який використовується лише на кнопці CTA, нумерації та ключових даних — ніколи в заголовках. Містить систему панелей «Cyber Window» з обрізаними кутами, рядками заголовків та індикаторами стану. Поєднує жирний геометричний гротескний шрифт для заголовків і великий моноширинний шрифт для всіх позначок, мета-інформації та основного тексту. Додає шаруваті HUD-графічні деталі (перехрестя прицілів, координати, індикатори сигналу, дугові покажчики, лінії з'єднань, міні-термінальні блоки, маркери шевронів, кутові дужки, рядки, що біжать), які заповнюють вікно перегляду, не створюючи відчуття порожнечі. Підтримує статичні голографічні зображення (зігенеровані ШІ дротові візуалізації) як герой-елементи. Ефекти світіння/розмиття відсутні. Макет асиметричний та редакційний, стиснутий, щоб вміститися на один екран 16:9 без прокручування. Використовуйте для посадкових сторінок, форм прийому/заявок, реєстрації подій, запусків продуктів, виставок і брифінг-сторінок для технологічних/промислових/ШІ-брендів.
ВебсторінкаДосліджуйте тибетські храми
Створюйте інтерактивні карти, списки інформації, маршрути паломництва або порівняльні аналізи 62 тибетських буддійських монастирів та 6 гротів/фресок у 7 регіонах та 6 школах. Підтримує двомовний вивід, вимірювання відстані та корекцію даних.
ВебсторінкаДокументи в акордеон-галерею
Автоматично розбирає документи з описом продукту на горизонтальну галерею карток-акордеон, витягує кольорову схему з файлів брендових стандартів для створення AI-ілюстрацій, і в результаті створює інтерактивну вебсторінку для спільного доступу. https://youmind.club/a/jLpgKPahOY1tJF
前端审美提升
Рекомендовано
nene@YouMind.AI
Чому нам подобається ця навичка
厌倦了千篇一律的“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？是否有特色搭配？
色彩 是否有统一主题？是否避免紫色渐变？
动画 是否有精心编排的加载效果？
布局 是否突破常规网格？
背景 是否创造深度和氛围？
Опис
独特的字体个性 深色赛博朋克美学 非对称动态布局 精心编排的加载动画 沉浸式的氛围营造
Схожі навички
Переглянути всіВебсторінкаСтиль 3D тактичного терміналу
Генерує односторінкові веб-сторінки в естетиці промислового терміналу / брифінгу місії. Чорно-вугільний фон з рівно ОДНИМ акцентним кольором (іржаво-помаранчевим), який використовується лише на кнопці CTA, нумерації та ключових даних — ніколи в заголовках. Містить систему панелей «Cyber Window» з обрізаними кутами, рядками заголовків та індикаторами стану. Поєднує жирний геометричний гротескний шрифт для заголовків і великий моноширинний шрифт для всіх позначок, мета-інформації та основного тексту. Додає шаруваті HUD-графічні деталі (перехрестя прицілів, координати, індикатори сигналу, дугові покажчики, лінії з'єднань, міні-термінальні блоки, маркери шевронів, кутові дужки, рядки, що біжать), які заповнюють вікно перегляду, не створюючи відчуття порожнечі. Підтримує статичні голографічні зображення (зігенеровані ШІ дротові візуалізації) як герой-елементи. Ефекти світіння/розмиття відсутні. Макет асиметричний та редакційний, стиснутий, щоб вміститися на один екран 16:9 без прокручування. Використовуйте для посадкових сторінок, форм прийому/заявок, реєстрації подій, запусків продуктів, виставок і брифінг-сторінок для технологічних/промислових/ШІ-брендів.
ВебсторінкаДосліджуйте тибетські храми
Створюйте інтерактивні карти, списки інформації, маршрути паломництва або порівняльні аналізи 62 тибетських буддійських монастирів та 6 гротів/фресок у 7 регіонах та 6 школах. Підтримує двомовний вивід, вимірювання відстані та корекцію даних.
ВебсторінкаДокументи в акордеон-галерею
Автоматично розбирає документи з описом продукту на горизонтальну галерею карток-акордеон, витягує кольорову схему з файлів брендових стандартів для створення AI-ілюстрацій, і в результаті створює інтерактивну вебсторінку для спільного доступу. https://youmind.club/a/jLpgKPahOY1tJF
Знайдіть свою наступну улюблену навичку
Досліджуйте більше підібраних AI-навичок для досліджень, творчості та повсякденної роботи.