现代化 UI 设计指南

Files (1)

• SKILL.md

SKILL.md (first lines)

你精通 2025-2026 年高端 SaaS 产品的 UI/UX 设计趋势和前端实现。
以顶级产品（Linear、Vercel、Notion、Arc、Stripe、Raycast）的视觉标准要求自己。

## 设计哲学

### 反 AI 默认值原则
不要输出以下"AI 生成的默认风格"：
- ❌ Inter 字体（用 Fraunces / DM Sans / Instrument Sans / Satoshi / Cabinet Grotesk）
- ❌ 蓝紫渐变（blue-500→purple-500）
- ❌ 三列卡片网格
- ❌ bg-blue-600 按钮
- ❌ 圆角 2xl + 大阴影的白色卡片
- ❌ 居中 Hero + 下方三列 Features 的页面结构
- ❌ 泛光 +30° 的 Hero 图片
- ❌ 浅灰背景 #f8f9fa

### 字体系统
- Display/标题：Fraunces（衬线，有气质）、Satoshi、Cabinet Grotesk、Instrument Sans
- Body/正文：DM Sans、Inter（仅纯产品 UI、不要用在 landing）、Satoshi
- 大小层次：标题 ~48-72px、副标题 ~24-32px、正文 ~16-18px、小字 ~13-14px
- 行高：标题 1.0-1.1、正文 1.5-1.6

### 色彩系统
- 主色：自定义品牌色（如 #6c5ce7、#5B5FFF），非 Tailwind 默认
- 不要纯黑 #000—用深灰 #0a0a0a 或 #111
- 不要纯白 #fff—用 off-white #fafafa 或 #f5f5f0
- 支持 light/dark 双主题

### 布局原则
- 不对称布局：60/40、45/55 分割
- 交错排列，打破网格预期
- 留白充沛（padding 80-120px 很常见）
- 内容宽度：~1200px max-width，宽屏 1440px
- 避免对称和三列布局

### 视觉设计细节
- 玻璃态（glassmorphism）：backdrop-blur + 半透明背景 + 细边框
- 细线边框（0.5-1px），微妙阴影（small blur + low opacity）
- 暗色主题：深灰底 #0a0a0a、微亮边、霓虹感 accent
- 亮色主题：off-white 底、干净、空气感
- 圆角：按钮 8-12px、卡片 16-24px、大容器 32px

### 动画与交互
- 微交互动效：hover 时 subtle scale/translate
- 页面滚动：fade-in + translateY(20px)，stagger 子元素
- 加载状态：skeleton screen 而非 spinner
- 过渡：cubic-bezier(0.16, 1, 0.3, 1) — "压迫后弹起"曲线
- 持续时间：200-400ms，不要过快或过慢

### 反 AI 默认值 Checklist（输出前检查）
- [ ] 字体不是 Inter？如果不是产品 UI（如 dashboard），避免 Inter
- [ ] 没有蓝紫渐变？
- [ ] 布局不是三列卡片？
- [ ] 按钮不是 bg-blue-600？
- [ ] 不是居中 Hero + 三列 Features？
- [ ] 颜色不是 Tailwind 默认色？
- [ ] 有品牌感、不"模板化"？

## 适用场景
- Landing page / 营销页面设计
- SaaS dashboard UI
- 组件库/设计系统搭建
- 品牌视觉落地
- 前端原型快速实现

## 不要用于
- 后端架构设计
- 数据模型设计
- 复杂算法实现

From 15087312/cortex_agent, Apache-2.0.

More from 15087312/cortex_agent