博客主题更新.md

# 博客主题更新

在国庆放假的间隙将博客的主题进行了更新，主题大致如下图：


由于之前博客的内容没有确定下来，首页、空间（原画廊模块替换为了现在的空间模块）、归档、about 等内容大多都没有确定下来，因此并没有进行主题的设计，直接采用「黑-白-灰」三色，但现在博客大多数内容已经明确，也趁国庆假期的时间捣腾捣腾，完成了这一版的博客主题

## figma 绘制设计稿

> [**Figma**](https://www.figma.com/) 是一款**基于云端的团队协作界面设计与原型制作工具**

在大二以及公司实习时，便已经接触了 figma，此次主题的设计稿也是在 figma 中完成的，当然是由 ChatGPT-6 Astra 实现的，步骤大致如下：

• 在 codex 中安装 figma mcp
• codex 通过 mcp 绘制设计稿

安装 figma mcp 后，打开博客项目的工作目录，将博客主题设计的想法告诉给codex即可

```prompt
UI主题色设计：为博客设计主题色与配套的UI
要求：

1. 浅色背景，避免以图片为背景遮挡文字
2. 绿色系主题色，生命的颜色
3. 避免强烈的对比，如：纯白与纯黑
4. 考虑使用纹理、线条、颜色过渡等元素
5. 风格：简洁风
6. 忽略 about 页面，about页面的UI已经完成，无需考虑

博客要素提取，当前博客包含以下元素：

1. 首页：左右布局，左侧nav，右侧的文章card
2. 文章详情页：极简风，但背景可以使用浅色、不遮挡文字的元素进行修饰
3. 归档页面与详情页一致
4. 空间：左右布局，左侧nav，右侧数据，当前右侧顶部的主要元素是一个球体，右侧下方则是item项

5.
工具与skill：
1. 使用figma设计并绘制UI
```

ChatGPT-6 Astra 初版便几乎完成了整个设计稿，后续也只是在此基础上进行了微调


### 绕过 figma mcp 的额度限制

figma mcp 存在额度限制，初版设计稿完成了大部分内容后额度便耗完了，额度大致如下：

| 方案 | Professional 价格 | MCP 额度 | Figma Design 权限 | 适合你的场景 |
| ------- | ----------------- | ------------------------- | -------------------- | ------------------------- |
| Starter | 免费 | 最多 **20 次/月** | 基础 | 偶尔测试 |
| Collab | **$3/月** | 最多 **6 次/月** | 查看/评论 | 不适合 MCP |
| Dev | **$12/月** | **200 次/天，10 次/分钟** | 查看/评论 + Dev Mode | Figma → 代码 |
| Full | **$16/月** | **200 次/天，10 次/分钟** | 完整 Design 权限 | **AI 创建/修改 Figma UI** |

由于额度的限制是按月更新，不可能等到下个月再来设计，而 collab 3$ 方案的额度却更少，想继续使用 mcp 至少得 dev 12$，有点太贵了，毕竟平时使用的并不多，于是网上搜索了相关信息，了解到可以通过 「figma 客户端 + figWright项目」在本地使用figma，便尝试了一下：

```prompt
完成：figma mcp的使用
背景：由于figma mcp额度有限，此时通过下载figma客户端，以及github项目的figWright进行替代
下载位置：D:\figmaFile
```


codex 会进行 figma 客户端以及 figwright 项目的下载，下载完成后打开 figma 客户端，并配置 figWright 插件：


配置完成后进行连接即可，在此点击上图的 1、2、3步骤，此时会出现弹窗，在弹窗中选择「Figwright」，然后会出现一个小弹窗，显示已连接


此时便能让 codex 继续完善设计稿了


## 设计稿实现

完成设计稿后继续让 codex 进行实现，在选择模型时进行了抉择，由于近期 6.1 模型也上线了，也想试试水，比较了几个模型后，6.1 模型竟然更便宜

| 模型 | 输入 / 1M | 缓存输入 / 1M | 输出 / 1M | 适合你的用途 |
| --------------- | --------- | ------------- | --------- | -------------------- |
| GPT-6 Astra | 250 | 25 | 1250 | 架构、规划、疑难问题 |
| **GPT-6.1 Sol** | **50** | **2.5** | **250** | **主要代码执行** |
| GPT-5.6 Sol | 100 | 10 | 500 | 复杂代码执行 |
| GPT-5.6 Terra | 50 | 5 | 300 | 常规代码修改 |
| GPT-5.6 Luna | 5 | 0.5 | 30 | 机械、小范围任务 |

后续便是经过两天的捣腾才将设计稿完成，不得不说 6.1 太慢了，每次处理几乎都 10 分钟往上，可以开把王者了~~

后续大概便是在当前博客主题的基础上进行完善与优化了，当前博客的 figma 设计稿可通过下方链接访问：

> https://www.figma.com/design/nR8cV5XYlrWRRhbkJopcLc/Tilex-Blog-%C2%B7-%E9%9D%92%E8%8B%94%E4%B8%BB%E9%A2%98?node-id=0-1&t=L0oR09ncELZqb9b8-1