博客站的ai提示词

2025-12-08 11:40:50 大语言模型 20 次阅读
blog

原提示词：

你是一位资深全栈工程师 & UI/UX 交互设计师，受雇为一名程序员打造「极简极客」个人博客站点。
任务边界：仅输出可立即运行的单页应用（HTML+CSS+JS），不依赖后端；不引入任何框架（如 React/Vue），仅用原生代码；体积 ≤ 30 KB（含注释）。
必需特性：
1. 程序员风格：暗色主题（#0d1117 背景+#58a6ff 高亮）、等宽字体（JetBrains Mono）、代码高亮（Prism 轻量版）。
2. 交互：
- 顶部滚动进度条（0→100% 随页滚动）。
- 每进入视口一次，代码块逐行打字机效果出现（仅首次）。
- 右侧“悬浮火箭”按钮，点击平滑回顶（500 ms）。
3. 页面滑动：
- 锚点导航（/#about, /#projects, /#blogs）点击后 600 ms 平滑滚动。
- 章节切换时添加 40 px 视差偏移（transform: translateY）。
4. 内容结构（已占位，勿改）：
- 关于我（200 字以内文本+1 张 200×200 头像）。
- 项目卡片（3 个，含标题、一句话描述、GitHub 链接）。
- 博客列表（5 篇，仅标题+日期+标签）。
5. 兼容性：Chrome 90+, Edge 90+, Firefox 88+；禁用任何 CDN，所有资源内联。
6. 交付格式：单个 `index.html` 文件，直接双击可运行；代码按功能区块注释，方便二次修改。
7. 额外禁止：不出现广告、cookie 弹窗、第三方统计；不引用外部字体/图标库，SVG 直接内联。

输出完整代码，不要解释，不要步骤，只给最终文件内容。


首页index能否增加一些程序员的元素，尽量是动态效果

右下角的回到顶部，页用程序员的符号替代

好的！以下是这个「极简极客」博客站点的完整 AI 提示词，你可以用它来学习或二次创作：

极简极客博客站点 - AI Prompt

你是一位资深全栈工程师 & UI/UX 交互设计师，受雇为一名程序员打造「极简极客」风格的个人博客站点。

## 技术约束

1. **纯前端单页应用**：仅输出可直接运行的 HTML+CSS+JS，不依赖任何后端
2. **零框架依赖**：禁止使用 React/Vue/Angular 等框架，仅用原生代码
3. **体积限制**：单文件 ≤ 30 KB（含注释）
4. **浏览器兼容**：Chrome 90+、Edge 90+、Firefox 88+
5. **资源内联**：禁用任何 CDN，所有资源（字体、图标）必须内联
6. **SVG 内联**：所有图标使用内联 SVG，禁止外部图标库

## 视觉设计规范

### 配色方案（GitHub 暗色主题风格）


--bg: #0d1117;           / *主背景* /

--bg-card: #161b22;      / *卡片背景* /

--text: #c9d1d9;         / *主文字* /

--text-muted: #8b949e;   / *次要文字* /

--accent: #58a6ff;       / *主高亮色* /

--accent-dim: #1f6feb;   / *暗高亮色* /

--border: #30363d;       / *边框* /

--green: #3fb950;        / *成功/终端提示符* /

--purple: #a371f7;       / *函数/强调* /

--orange: #f0883e;       / *警告* /

--red: #ff7b72;          / *关键字* /


### 字体
- 全站使用等宽字体：JetBrains Mono，回退 Consolas、Courier New
- 使用 @font-face 本地加载，优先检测系统已安装字体

### 程序员元素
1. **终端模拟器**：模拟真实终端窗口（红黄绿三按钮、标题栏、命令提示符）
2. **代码语法高亮**：内联轻量 Prism 风格着色
3. **光标闪烁**：Logo 和终端使用 `_` 闪烁光标
4. **Markdown 标记**：标题前显示 `#`、`##`、`###` 等标记
5. **命令行风格**：导航使用 `> ` 前缀、返回按钮用 `← cd ..`

## 动态效果要求

### 1. 背景动画
- **Matrix 代码雨**：Canvas 绘制下落的代码字符（01、<>、{}、函数名等）
- **浮动代码符号**：`{ }`、`< />`、`=>`、`&&` 等符号缓慢上升飘动
- 透明度低（0.1-0.15），不干扰阅读

### 2. 滚动交互
- **顶部进度条**：渐变色（蓝→紫→绿），跟随滚动 0%→100%
- **章节视差**：进入视口时 translateY(40px→0) + opacity(0→1)
- **回到顶部**：程序员风格按钮 `[↑ top]`，500ms 平滑滚动

### 3. 打字机效果
- 终端命令逐行显示，每行延迟 300-400ms
- 代码块首次进入视口时逐行渐现

### 4. 悬停效果
- 卡片：上移 4px + 边框变蓝 + 光晕阴影
- 项目卡片：顶部扫光动画（linear-gradient 从左到右）
- 博客列表：右移 8px + 时间线圆点放大

### 5. 数字动画
- 统计数字从 0 滚动到目标值
- 技能进度条从 0% 填充到目标值

## 页面结构

### 首页 (index.html)
1. **导航栏**（固定顶部）
   - Logo：`<Geek/>_`（带闪烁光标）
   - 导航链接：悬停显示 `> ` 前缀

2. **关于我区块**
   - 左侧：终端模拟器（whoami、cat skills.json 等命令）
   - 右侧：个人信息卡片（头像带旋转渐变边框）
   - 技能进度条（4 项，带渐变填充）
   - 统计数字（4 格：项目数、Stars、文章、咖啡杯）

3. **项目卡片**（3 列网格）
   - 标题 + emoji 图标
   - 一句话描述
   - GitHub 链接

4. **博客列表**（Git 提交风格）
   - 左侧时间线 + 圆点
   - 日期前显示 `commit `
   - 点击跳转详情页

### 详情页 (detail.html)
1. **导航栏**
   - 返回按钮：`← cd ..`
   - Logo 同首页

2. **文章头部**
   - 标题前加 `# ` 标记
   - 元信息标签（日期、阅读时间、标签）

3. **侧边目录**（固定右侧，大屏显示）
   - 标题：`$ cat [toc.md](http://toc.md)`
   - 滚动时高亮当前章节

4. **文章内容**
   - 标题层级标记：`##`、`###`
   - 代码块带终端风格头部（语言 + 复制按钮）
   - 提示框（info/warn/tip 三种类型）
   - 引用块带左侧蓝色边框

5. **文章底部**
   - 分享按钮：`$ share --to`
   - 上下篇导航（带扫光动画）

## 交互细节

1. **锚点滚动**：600ms 缓动，easeInOutCubic
2. **回到顶部**：500ms 缓动，easeOutCubic
3. **代码复制**：点击后按钮变绿显示「已复制 ✓」
4. **目录高亮**：滚动时自动高亮当前章节

## 禁止事项

- × 广告、cookie 弹窗、第三方统计
- × 外部字体/图标库 CDN
- × 任何 JavaScript 框架
- × 服务端渲染或 API 调用
- × 多余的装饰性动画（保持简洁）

## 代码规范

- 按功能区块添加注释分隔（`/* ====== 区块名 ====== */`）
- CSS 变量统一在 `:root` 定义
- JavaScript 使用 IIFE 包裹避免全局污染
- 使用 `var` 而非 `let/const` 以兼容旧浏览器
- 事件监听使用节流（requestAnimationFrame）

## 输出要求

- 直接输出完整可运行的 HTML 文件
- 不要解释、不要步骤说明，只给最终代码
- 双击文件即可在浏览器中打开运行


---

##  使用技巧

1. **修改配色**：只需修改 `:root` 中的 CSS 变量即可全局换肤
2. **添加内容**：在对应的 HTML 区块中增删卡片/列表项
3. **调整动画**：修改 `transition` 和 `animation` 的时长
4. **扩展页面**：复制 detail.html 模板，修改内容即可

💬 评论

0/200