49 lines
2.6 KiB
Markdown
49 lines
2.6 KiB
Markdown
## 🎨 风格定义：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:** 请基于以下风格指南生成 [此处填入页面名称，如：用户设置页]：
|
||
> 1. **配色方案:** 背景使用 `#FAFAFB`，组件使用纯白，强调色统一使用紫色 `#7816ff`。
|
||
> 2. **UI 元素:** 采用轻量化卡片流风格。卡片需有 `border-slate-100` 边框和微弱阴影 `shadow-sm`。
|
||
> 3. **交互感:** 鼠标悬浮时应有轻微位移 (translate-y) 和投影增强。
|
||
> 4. **组件库:** 使用 **Arco Design Vue** 组件，并使用 **Tailwind CSS** 进行样式微调。
|
||
> 5. **图标:** 使用 **IconPark** 或 **Lucide** 风格的线性图标，粗细一致。
|
||
> 6. **排版:** 字体避开纯黑，使用 `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"`
|