前端审美提升

madeBy
西西琦
installedBy
149
categoryLabelwebpage
fromYouMind

为什么我们推荐这个技能

厌倦了千篇一律的“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?是否有特色搭配?

色彩 是否有统一主题?是否避免紫色渐变?

动画 是否有精心编排的加载效果?

布局 是否突破常规网格?

背景 是否创造深度和氛围?

description

独特的字体个性 深色赛博朋克美学 非对称动态布局 精心编排的加载动画 沉浸式的氛围营造

相关技能

查看全部
文档转手风琴画廊

文档转手风琴画廊

将产品介绍文档自动拆解为水平手风琴卡片画廊,根据品牌规范文件提取配色生成 AI 插图,最终输出可分享的交互式网页。https://youmind.com/a/jLpgKPahOY1tJF

0
公众号排版 · 黑白编号深度长文风

公众号排版 · 黑白编号深度长文风

1.将文章内容自动套入主题公众号排版模板,生成带「一键复制富文本」按钮的预览网页,复制后可直接粘贴到公众号编辑器,所有排版样式完整保留,因为公众号编辑器问题图片需手动添加。 2.不同的模型生成的质量不一样。示例为DeepSeek pro 生成

4
公众号排版 · 极简宋体理论引证思辨长文风

公众号排版 · 极简宋体理论引证思辨长文风

1.将文章内容自动套入主题公众号排版模板,生成带「一键复制富文本」按钮的预览网页,复制后可直接粘贴到公众号编辑器,所有排版样式完整保留,因为公众号编辑器问题图片需手动添加。 2.不同的模型生成的质量不一样。

4

发现下一个适合你的技能

继续探索更多精选 AI 技能,用于研究、创作和日常工作。

探索全部技能