前端审美提升
指令
<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？是否有特色搭配？
色彩 是否有统一主题？是否避免紫色渐变？
动画 是否有精心编排的加载效果？
布局 是否突破常规网格？
背景 是否创造深度和氛围？
描述
推荐自
nene@YouMind
为什么我们推荐这个技能
厌倦了千篇一律的“AI slop”设计？此技能将助您摆脱平庸，通过独特的排版、大胆的色彩、精妙的动效、创新的空间布局和富有深度的背景，打造令人惊艳的前端界面。它提供了一套实用的美学指南，让您的作品在众多网站中脱颖而出，真正实现视觉上的突破。
独特的字体个性 深色赛博朋克美学 非对称动态布局 精心编排的加载动画 沉浸式的氛围营造
相关技能
查看全部
网页可探索式解说页面生成器
报告负责解释。页面让人自己去发现。 YouMind 已经能够构建网页。Explorable Explainer 负责决定要构建什么——它将一份研究、一个数据集或一个主题，转化为单个互动页面，延续新闻编辑部图形和可探索解释的传统：滚动驱动的叙事、真实的图表、可操作的控件、可查证的来源。 它先计划，再写代码。您首先批准一个构建计划：页面回答的核心问题；“揭示”时刻——读者应该感到“哦”的瞬间；五到八个部分的滚动主轴；两到四个交互，每个交互都要说明读者通过操作能学到什么；以及一份数据契约，列出每个数字及其来源。 然后，它会生成一个自包含的 HTML 文件，无需构建步骤。语义化标记。所有数字都集中在顶部的可编辑 DATA 常量中。滚动揭示在手机上不会失效。每个控件都是真正的、可通过键盘操作的表单元素，并带有描述其当前值的实时文本。 可访问性是内建的，而非事后附加：4.5:1 对比度、可见的焦点环、处处有替代文本、不单独依赖颜色传达含义、尊重减少动态效果设置、从 360px 起响应式适配。 在交付之前，它会进行五点自查，并如实报告结果：揭示是否真正奏效；关闭 JavaScript 后页面是否仍可阅读；Tab 顺序是否合理；每个数字是否可追溯；是否有读者想要停止的动画。 它有两条不可违背的规则：绝不为了美化图表而编造数据；当您的数字与草稿矛盾时，它会明确告知。 面向研究人员、分析师、记者、教育工作者、独立创业者和顾问——他们希望自己的作品被深入探索，而不是被匆匆略读。
网页柔光日间 浮世风格网页
柔光日间风格的网页设计系统：淡天蓝画布（#ebf5ff）、字重固定 500 的超大展示字（响应式最高 148px）、32px 圆角卡片 + 9999px 药丸、近黑 #181d27 实心 CTA、粉彩色块与漂浮 3D 黏土质插画。深度只靠画布到卡片的色阶位移，内容卡片零阴影。适用于「柔光日间风格」「3D 插画落地页」「淡蓝画布」「圆角卡片风」「SaaS 官网」「Linear/Framer 风格」等需求，内置无障碍与响应式约束。
网页Fashion Creative Design 风格网页
时尚编辑式海报风格的网页设计系统：暖奶油纸质画布（#fffef7）、300 字重超大标题（64–84px）、全出血摄影、零阴影、卡片直角 + 按钮 1440px 药丸圆角。 适用于「时尚设计风格」「杂志排版」「海报风」「艺术画册网页」「工作室作品集」「画廊页面」等需求，可将任意内容改写为高级时装编辑风页面。
前端审美提升
指令
<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？是否有特色搭配？
色彩 是否有统一主题？是否避免紫色渐变？
动画 是否有精心编排的加载效果？
布局 是否突破常规网格？
背景 是否创造深度和氛围？
描述
推荐自
nene@YouMind
为什么我们推荐这个技能
厌倦了千篇一律的“AI slop”设计？此技能将助您摆脱平庸，通过独特的排版、大胆的色彩、精妙的动效、创新的空间布局和富有深度的背景，打造令人惊艳的前端界面。它提供了一套实用的美学指南，让您的作品在众多网站中脱颖而出，真正实现视觉上的突破。
独特的字体个性 深色赛博朋克美学 非对称动态布局 精心编排的加载动画 沉浸式的氛围营造
相关技能
查看全部网页可探索式解说页面生成器
报告负责解释。页面让人自己去发现。 YouMind 已经能够构建网页。Explorable Explainer 负责决定要构建什么——它将一份研究、一个数据集或一个主题，转化为单个互动页面，延续新闻编辑部图形和可探索解释的传统：滚动驱动的叙事、真实的图表、可操作的控件、可查证的来源。 它先计划，再写代码。您首先批准一个构建计划：页面回答的核心问题；“揭示”时刻——读者应该感到“哦”的瞬间；五到八个部分的滚动主轴；两到四个交互，每个交互都要说明读者通过操作能学到什么；以及一份数据契约，列出每个数字及其来源。 然后，它会生成一个自包含的 HTML 文件，无需构建步骤。语义化标记。所有数字都集中在顶部的可编辑 DATA 常量中。滚动揭示在手机上不会失效。每个控件都是真正的、可通过键盘操作的表单元素，并带有描述其当前值的实时文本。 可访问性是内建的，而非事后附加：4.5:1 对比度、可见的焦点环、处处有替代文本、不单独依赖颜色传达含义、尊重减少动态效果设置、从 360px 起响应式适配。 在交付之前，它会进行五点自查，并如实报告结果：揭示是否真正奏效；关闭 JavaScript 后页面是否仍可阅读；Tab 顺序是否合理；每个数字是否可追溯；是否有读者想要停止的动画。 它有两条不可违背的规则：绝不为了美化图表而编造数据；当您的数字与草稿矛盾时，它会明确告知。 面向研究人员、分析师、记者、教育工作者、独立创业者和顾问——他们希望自己的作品被深入探索，而不是被匆匆略读。
网页柔光日间 浮世风格网页
柔光日间风格的网页设计系统：淡天蓝画布（#ebf5ff）、字重固定 500 的超大展示字（响应式最高 148px）、32px 圆角卡片 + 9999px 药丸、近黑 #181d27 实心 CTA、粉彩色块与漂浮 3D 黏土质插画。深度只靠画布到卡片的色阶位移，内容卡片零阴影。适用于「柔光日间风格」「3D 插画落地页」「淡蓝画布」「圆角卡片风」「SaaS 官网」「Linear/Framer 风格」等需求，内置无障碍与响应式约束。
网页Fashion Creative Design 风格网页
时尚编辑式海报风格的网页设计系统：暖奶油纸质画布（#fffef7）、300 字重超大标题（64–84px）、全出血摄影、零阴影、卡片直角 + 按钮 1440px 药丸圆角。 适用于「时尚设计风格」「杂志排版」「海报风」「艺术画册网页」「工作室作品集」「画廊页面」等需求，可将任意内容改写为高级时装编辑风页面。
发现下一个适合你的技能
继续探索更多精选 AI 技能，用于研究、创作和日常工作。