# 一、创建“角色介绍”互动页
## 单人卡人物介绍
在模板中选择“人物介绍”：
在和AI编辑器的对话框中输入以下描述，以生成一个角色介绍互动页面：
{% hint style="info" %}
请为我生成一个角色介绍页面，整体风格要符合‘(风格描述：中世纪、现代霓虹、赛博朋克)’的质感。
1. **背景设定**：使用(颜色及背景模样描述，如：深色的荒凉废墟)作为背景(或：使用(此处点击素材库图片，导入背景的图片链接)作为背景)，色调以……为主，透明度为……。
2. **角色展示**：在页面左侧放置一个……的边框，用于展示角色头像，请将 (此处点击素材库图片，导入角色头像的图片链接) 放置于此位置。
3. **标题**：在页面上方显眼位置展示角色名字：变量 `{char}`，字体请使用……(如：古籍感的衬线体)，颜色为……。
请在页面右侧创建三个可以点击展开的折叠面板（Accordion），用于承载详细设定，交互逻辑如下：
* **第一项：【卡面人设】**。默认展开。内容引用变量 `{char}` 的**角色简介**
`{char}` 的**角色简介：(文字)**
* **第二项：【世界观背景】**。点击后展开。内容引用变量 `{char}` 的**角色设定**
`{char}` 的**角色设定：(文字)**
* **第三项：【xxxx】**。点击后展开。内容引用变量 `{char}` 的**开场白**
`{char}` 的**开场白：(文字)**
**细节要求**：折叠面板的背景请使用类似……(如：类似‘陈旧羊皮纸’的半透明)的质感，文字颜色为……。
{% endhint %}
呈现效果浏览：
***
## 多人卡人物介绍
如若希望生成多人卡人物介绍，可以按照以下方式告知编辑器：
{% hint style="info" %}
请帮我生成一个**多人角色介绍页面**。风格定位于‘(输入希望的风格)’，背景使用(此处导入背景图链接)。 在页面顶端水平排列三个圆形头像框，分别作为**A、B、C**的切换入口。
* **头像1**：置入 (导入A图片链接)
* **头像2**：置入 (导入B图片链接)
* **头像3**：置入 (导入C图片链接)
请在头像下方创建一个大的内容展示区（Content Panel）。要求实现以下交互： **默认状态**：显示**A**的信息。 **当点击头像2时**：内容区平滑切换为**B**的信息。 **当点击头像3时**：内容区平滑切换为**C**的信息。
每个角色的显示内容需包含：左侧为该角色的**全身立绘**，右侧为**文字介绍栏**。
文字介绍栏请使用‘折叠面板’结构，具体信息如下：
**1. A（选中头像1时显示）**：
* 标签1【身份性格】：(文字)
* 标签2【背景故事】：(文字)
* 标签3【独白】：(文字)
**2. B（选中头像2时显示）**：
* 标签1【身份性格】：(文字)
* 标签2【背景故事】：(文字)
* 标签3【独白】：(文字)
**3. C（选中头像3时显示）**：
* 标签1【身份性格】：(文字)
* 标签2【背景故事】：(文字)
* 标签3【独白】：(文字)
{% endhint %}
呈现效果浏览：
***
## 翻牌式人物介绍
如果希望多人角色卡面产生翻转以及轮换（翻牌）效果：
{% hint style="info" %}
**0. 背景设定：** 请使用 (点击导入背景图片链接) 作为全屏背景。为了保证卡片清晰，请给背景图片添加一个 30% 的黑色半透明遮罩（Overlay）。
**1. 顶部标题：** 页面顶端居中显示标题“(文本)”，字体颜色为（文本），带有（文本，如：一层淡淡的外部发光效果）效果。
**2. 核心交互结构（排成一排且自动对齐）：** 请在页面中心创建一排水平排列的卡片。要求具备以下交互逻辑：
* **点击聚焦：** 当我点击任意一张卡片时，该卡片必须通过平滑动画移动到屏幕**正中央位置**，并放大显示（成为“面对我”的那一张），其他卡片则自动向两边退开并稍微缩小。
* **点击翻转：** 当卡片已经在正中央（聚焦状态）时，再次点击该卡片，它将进行 **3D 翻转** 露出背面。
**3. 卡片内容分配：**
* **卡片 A (角色A)**：正面为 (点击导入角色A图片)；背面为文字‘（文本）’。
* **卡片 B (角色B)**：正面为 (点击导入角色B图片)；背面为文字‘（文本）’。
* **卡片 C (角色C)**：正面为 (点击导入角色C图片)；背面为文字‘（文本）’。
**4. 视觉细节：** 卡片背面请使用（如：磨砂玻璃（Glassmorphism））质感，文字要居中对齐。
{% endhint %}
呈现效果浏览：
