可视化网页，知识卡片提示词

Evergreen 2025年05月14日预计阅读 1 分钟

原文地址：https://mp.weixin.qq.com/s/gEX5WYlXv5BSH4Tv4pEMAw

提示词:

### 个人简历可视化网页

```yaml
角色扮演:
请你扮演一个由 UI/UX 设计师、前端开发工程师和数据可视化专家组成的专业团队核心成员。

核心目标:
为我生成一个完整、独立的 HTML 文件形式的动态可视化个人简历页面。该页面需直接可用作演示成品，无需我再进行任何内容或代码修改。

关键要求:
单文件: 最终产出必须是一个 .html 文件，所有 CSS 样式需内嵌在 <style> 标签中，所有 JavaScript 需内嵌在 <script> 标签中（确保 JS 在 DOM 加载后执行）。
指定风格: 严格按照下方 [期望的视觉风格] 定义的风格进行设计和实现，体现在色彩、字体、布局、阴影、元素外观等方面。
内容完整填充: 严格禁止在最终代码中留下任何指导性注释（如 ）或占位符文本（如 [你的名字]、[作品链接]）。请直接使用下方 [简历内容] 部分提供的全部信息填充页面对应位置。

动态与可视化:
使用 AOS (Animate On Scroll) 或类似的库实现优雅的页面滚动加载动画。
包含交互元素，如按钮、链接的悬停效果。
必须使用 Chart.js（通过 CDN 引入）创建至少两个数据可视化图表（如技能雷达图、粉丝增长折线图），图表数据需使用下方 [简历内容] 中提供的数据，并确保图表样式与整体风格统一且响应式布局良好（防止无限拉伸）。
响应式设计: 页面必须能在桌面、平板和手机等不同尺寸的设备上良好显示。
代码质量: 使用语义化 HTML5 标签，CSS 结构清晰，JavaScript 代码高效且无错误。
外部库: 只允许通过 CDN 链接引入必要的外部库（如 Google Fonts, Font Awesome, AOS, Chart.js）。

图片处理:
个人头像和作品集图片必须使用 [简历内容] 中提供的图片 URL。
如果 [简历内容] 中未提供特定图片（如某个作品集项目），请你从免版权图库（如 Unsplash）寻找一张与内容和整体风格高度匹配的高质量图片，并直接使用其 URL 嵌入。确保所有图片都能正常显示。
联系表单: 保留联系表单结构，但 action 属性可为空 (#) 或指向一个示例地址，并添加简单的客户端提示（如 alert）告知用户表单已提交（仅为演示效果）。

输出格式:
请直接提供最终生成的、包含所有 HTML, CSS, 和 JavaScript 的完整代码块。
【请在此处填写信息】

期望的视觉风格:
风格名称: [例如：新拟物化 (Neumorphism)、赛博朋克 (Cyberpunk)、极简主义 (Minimalist)、孟菲斯 (Memphis)、复古像素 (Retro Pixel Art)、玻璃拟态 (Glassmorphism) 等]
核心色彩: [描述主色调、强调色、背景色等，例如：柔和的浅灰色背景，蓝色强调色，白色和深灰色阴影]
字体选择: [指定字体名称，可通过 Google Fonts CDN 引入，例如：Poppins (正文), Orbitron (标题)]
关键视觉元素: [描述该风格的特点，例如：柔和的内外阴影、圆角、元素浮起/凹陷效果；或霓虹光效、锐利线条、故障艺术；或大留白、细线框；等等]
动画感觉: [描述动画偏好，例如：平滑缓动、快速科技感、微妙细腻等]

简历内容:
【请在此处填写简历信息】
```

**各类风格的知识卡片一次性搞定**

```
请根据以下要求，为主题 "×××××" 生成一张高质量、风格独特的 单张海报 设计的完整 HTML (`index.html`)、CSS (`style.css`) 和 JavaScript (`script.js`) 代码。

## 1. 核心变量
*   海报风格名称: `[在此处填入具体的风格名称，例如：未来科技, 优雅复古, 孟菲斯解构等]`
*   内容焦点: `[在此处填入此海报需要着重表现的内容侧重点，例如：核心发布, 性能标杆, 思考本质, 核心机制, 技术演进, 未来应用, 挑战复杂, 轻盈登场, 开发者视角等，或者直接复制原文内容到这里]`

## 2. 基本要求
*   输出格式: 提供三个独立的代码块：HTML (`index.html`)、CSS (`style.css`)、JavaScript (`script.js`)。
*   海报比例: 严格遵循 **3:4** 的纵向海报宽高比 (`aspect-ratio: 3 / 4;`)。
*   内容适配: 基于提供的主题的信息，和根据指定的 `[内容焦点]` 进行
**提炼、扩展和视觉化设计**，使其内容丰满，适合海报展示，而不仅仅是简单的卡片文字。

## 3. 设计质量与细节 (关键要求)
  
目标水准:
 追求“大师级” (Master-level) 设计品质。
深度风格化: 深入理解 `[风格名称]` 的核心特征与美学，并将其创造性地、深度地融入海报的布局、排版、色彩、图形元素和整体氛围中。避免表面模仿。
 
精致细节 (Polish):
极度注重对齐、间距 (包括微间距)、边框处理、阴影层次与柔和度、渐变过渡的自然感、元素的打磨感。
高级 CSS 运用: 积极运用现代 CSS 技术，如 Flexbox/Grid 布局、自定义属性 (变量)、伪元素 (`::before`, `::after`)、滤镜 (`filter`)、混合模式 (`mix-blend-mode`)、遮罩 (`mask`)、`clip-path`、复杂渐变等，以实现更丰富、更细腻的视觉效果和质感。
专业排版: 精心选择 Google Fonts (确保引入所需字体，包括 `Orbitron`, `Syne` 等用于标题)，细致调整字重、字号层级、字间距 (`letter-spacing`)、行高 (`line-height`)，构建符合风格的视觉韵律。
和谐色彩: 设计与 `[风格名称]` 匹配且视觉舒适、具有高级感的色彩方案。
纵向构图: 充分利用 3:4 的垂直空间进行构图设计。

## 5. 交互效果
在 `script.js` 中实现之前提供的、基于鼠标移动的**微妙倾斜效果** (使用 `perspective`, `rotateX`, `rotateY`)，应用于海报元素 (`.poster`)。

## 6. 技术规范 
HTML: 使用语义化 HTML5。  
CSS: 结构清晰，推荐使用 CSS 变量。对复杂效果添加注释说明。 
JavaScript: 使用简洁的 Vanilla JS 实现倾斜交互。
字体: 必须在 HTML 中通过 `<link>` 引入所需的所有 Google Fonts。

## 7. 输出
 请直接提供完整的、可运行的代码，无需额外解释（除非注释中必要）。
---
```

评论区