前端审美提升
指令
<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”设计?此技能将助您摆脱平庸,通过独特的排版、大胆的色彩、精妙的动效、创新的空间布局和富有深度的背景,打造令人惊艳的前端界面。它提供了一套实用的美学指南,让您的作品在众多网站中脱颖而出,真正实现视觉上的突破。
独特的字体个性 深色赛博朋克美学 非对称动态布局 精心编排的加载动画 沉浸式的氛围营造
相关技能
查看全部开发者新粗野主义编辑风
将您的主题内容、文章、知识点、项目复盘、课程文案或工具介绍,转化为一组具有“开发者新粗野主义编辑风”的横版幻灯片。整体风格融合新粗野主义设计、独立杂志排版和开发者终端美学:米白背景、粗黑边框、硬阴影、高对比色块、超粗标题、等宽字体、网页/终端/卡片模块化布局,形成强烈的技术内容表达感。 本技能会先提炼内容结构,再为每页确定一个核心观点,自动生成标题、解释句、知识点模块、结论语和合适的视觉组件。它特别适合 AI 工具介绍、Agent 实践、开源项目拆解、课程内容整理、方法论总结、产品功能说明与技术复盘等内容场景。 最终输出为 16:9 横版幻灯片,整体视觉统一、阅读清晰、留白充足、风格鲜明,呈现出一种“像开源项目作者在做技术分享,又像独立设计杂志在讲故事”的高级表达效果。
汉画像石风格海报
一套从汉画像石提炼的视觉系统:几何剪影人物 × 古典底色 × 不对称编辑式排版。适用于活动海报、直播预告、播客封面等场景。你只管说主题,它负责把现代内容刻进两千年的美学里。
小而美IP-Dan Koe风格爆款标题
为用户的内容生成 7 个标题,每个标题必须代表 Dan Koe 的一个核心风格特征,确保多样性和选择空间 这是一位精通病毒式传播心理学与 Dan Koe 内容美学的标题创作大师。它专为创作者、个人品牌建设者和数字游民设计,致力于将你的枯燥主题转化为具有“思想领袖”质感的爆款标题。 🌟 核心能力 深度内容解析:自动从碎片关键词或万字脚本中提炼核心痛点、受众画像与价值承诺。 七大黄金维度:严格遵循 Dan Koe 的视觉逻辑,一次性生成 7 个截然不同的切入角度
前端审美提升
指令
<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”设计?此技能将助您摆脱平庸,通过独特的排版、大胆的色彩、精妙的动效、创新的空间布局和富有深度的背景,打造令人惊艳的前端界面。它提供了一套实用的美学指南,让您的作品在众多网站中脱颖而出,真正实现视觉上的突破。
独特的字体个性 深色赛博朋克美学 非对称动态布局 精心编排的加载动画 沉浸式的氛围营造
相关技能
查看全部开发者新粗野主义编辑风
将您的主题内容、文章、知识点、项目复盘、课程文案或工具介绍,转化为一组具有“开发者新粗野主义编辑风”的横版幻灯片。整体风格融合新粗野主义设计、独立杂志排版和开发者终端美学:米白背景、粗黑边框、硬阴影、高对比色块、超粗标题、等宽字体、网页/终端/卡片模块化布局,形成强烈的技术内容表达感。 本技能会先提炼内容结构,再为每页确定一个核心观点,自动生成标题、解释句、知识点模块、结论语和合适的视觉组件。它特别适合 AI 工具介绍、Agent 实践、开源项目拆解、课程内容整理、方法论总结、产品功能说明与技术复盘等内容场景。 最终输出为 16:9 横版幻灯片,整体视觉统一、阅读清晰、留白充足、风格鲜明,呈现出一种“像开源项目作者在做技术分享,又像独立设计杂志在讲故事”的高级表达效果。
汉画像石风格海报
一套从汉画像石提炼的视觉系统:几何剪影人物 × 古典底色 × 不对称编辑式排版。适用于活动海报、直播预告、播客封面等场景。你只管说主题,它负责把现代内容刻进两千年的美学里。
小而美IP-Dan Koe风格爆款标题
为用户的内容生成 7 个标题,每个标题必须代表 Dan Koe 的一个核心风格特征,确保多样性和选择空间 这是一位精通病毒式传播心理学与 Dan Koe 内容美学的标题创作大师。它专为创作者、个人品牌建设者和数字游民设计,致力于将你的枯燥主题转化为具有“思想领袖”质感的爆款标题。 🌟 核心能力 深度内容解析:自动从碎片关键词或万字脚本中提炼核心痛点、受众画像与价值承诺。 七大黄金维度:严格遵循 Dan Koe 的视觉逻辑,一次性生成 7 个截然不同的切入角度
发现下一个适合你的技能
继续探索更多精选 AI 技能,用于研究、创作和日常工作。