2.6 KiB
2.6 KiB
🎨 风格定义：AI-Native 精致极简主义 (AI-Native Refined Minimalism)
1. 核心视觉特征 (Core Visuals)
-
主色调 (Brand Color):
#7816ff(电光紫)。用于主按钮、进度条、激活态指示和关键 Tag。 -
背景色 (Background): 页面底色为
#FAFAFB(极浅灰蓝)，卡片背景为纯白#FFFFFF。 -
边框与投影 (Border & Shadow): * 边框使用极淡的
slate-100(#f1f5f9)。 -
投影使用微弱的柔和阴影：
shadow-sm(用于静止) /shadow-md(用于悬浮)。 -
圆角 (Border Radius): 统一的大圆角设计。卡片
12px - 16px(rounded-xl)，按钮8px(rounded-lg) 或全圆角 (round)。
2. 排版与字体 (Typography)
- 层级感: 标题使用
text-slate-800(深灰而非纯黑)，副标题/正文使用text-slate-500。 - 辅助文本: 习惯使用
text-[10px]或text-[11px]的小字号配合font-bold或uppercase(全大写) 来营造科技感和精致感。 - 留白: 强调“呼吸感”，间距多使用 Tailwind 的
p-6或gap-4。
📝 通用生成提示词 (Master Prompt)
你可以直接复制以下这段话作为后续请求的开头：
Role: 你是一位精通现代 AI 产品 UI/UX 的前端专家。 Style Requirements: 请基于以下风格指南生成 [此处填入页面名称，如：用户设置页]：
- 配色方案: 背景使用
#FAFAFB，组件使用纯白，强调色统一使用紫色#7816ff。- UI 元素: 采用轻量化卡片流风格。卡片需有
border-slate-100边框和微弱阴影shadow-sm。- 交互感: 鼠标悬浮时应有轻微位移 (translate-y) 和投影增强。
- 组件库: 使用 Arco Design Vue 组件，并使用 Tailwind CSS 进行样式微调。
- 图标: 使用 IconPark 或 Lucide 风格的线性图标，粗细一致。
- 排版: 字体避开纯黑，使用
slate-800。关键数据或状态使用小字号、高粗细的精致排版。Task: [描述你具体的页面功能需求]
🏗️ 常用 UI 组件代码片段 (Style Snippets)
如果你需要手动编写，请参考这些“灵魂”代码：
- 卡片 Hover 效果:
class="bg-white border border-slate-100 shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-300 rounded-xl" - 左侧激活指示条:
class="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-6 bg-[#7816ff] rounded-r-full" - 精致小标签 (Tag):
class="text-[10px] px-2 py-0.5 rounded-full border border-[#7816ff] text-[#7816ff] font-bold bg-purple-50"