GML5.2画的网页，大家看看怎么样

深空博客 - 单提示词复刻版

请用 Nuxt 3 + Tailwind CSS 构建一个深色主题的个人技术博客

核心要求

配色：深海军蓝背景 #0a0e1a，白色主文字，青蓝渐变强调色 #00a8ff → #22d3ee，玻璃态半透明卡片带 12px 模糊

字体：Inter（英文）+ Noto Sans SC（中文），主标题 4rem，正文 1rem，行高 1.75

布局（从上到下）：

1. 固定顶栏（62px 高，999px 圆角胶囊）：Logo 左 + 导航居中（精选/写作轨道/手记/关于）+ Admin 和主题切换右，滚动后显示边框阴影


2. 英雄区（垂直居中）：小标 “DEEP SPACE JOURNAL · EST. 2026” → 超大主标 “在星尘之间 写下 我的宇宙”（斜体强调"写下"）→ 两行副标 → 双按钮（蓝色"开始阅读" + 边框"关于"）→ 统计行 “186 篇手记 | 4 个轨道 | ∞ 未完念头”


3. 精选区：标题 “被反复点亮的 那几篇” + 2 列卡片网格，每卡左上 “STAR / 01”，右上渐变大号 “01” 水印，左侧 3px 青绿渐变竖线（hover 显示），卡片 hover 上浮 4px + 阴影加深


4. 分类轨道：4 个区块（技术观察/生活切片/阅读回声/灵感星尘），每个显示文章数 + 关键词标签 + 最新 3 篇


5. 最新文章流：标题 “刚刚写下的 星尘” + 单列卡片堆叠（标题 + 日期阅读时长 + 2 行摘要 + 标签）


6. 关于区：居中卡片，标题 “一名 白天写代码、夜里写句子的 造物者”（换行），2 段简介 + 3 个圆角边框按钮（GitHub/RSS/邮件）


7. 页脚：版权 + 导航复刻

样式细节

卡片组件：background: rgba(19,24,36,0.6) + backdrop-filter: blur(12px)，边框 rgba(255,255,255,0.08)，圆角 12px，padding 24px，transition 0.28s ease

按钮：主按钮蓝色填充高 48px 圆角 24px，hover 时阴影 0 8px 24px rgba(0,168,255,0.3)；次按钮透明边框，hover 时边框变蓝 + 5% 蓝色背景

动画：页面加载淡入上浮（0.6s），卡片交错入场（stagger 0.1s），导航栏滚动 80px 后加 .is-scrolled 类显示边框

响应式

• 移动端（<768px）：导航收起汉堡菜单，卡片单列，主标 2rem，按钮拉满


• 桌面端（>1024px）：最大宽 1120px，卡片 2-3 列

数据结构

typescript复制

interface Post {

  id: string; title: string; excerpt: string; 

  publishedAt: Date; readingTime: number;

  category: 'tech'|'life'|'reading'|'inspiration';

  tags: string[]; isFeatured: boolean;

}

增强功能（可选）

• Canvas 星空背景（缓慢飘移响应鼠标）


• 顶部阅读进度条（蓝色）


• Cmd+K 搜索（Fuse.js）


• RSS 生成 /rss.xml

性能

WebP 图片懒加载，按路由代码分割，font-display: swap，静态资源长缓存

SEO

每页 meta 标签 + OpenGraph + Twitter Card + JSON-LD 结构化数据（BlogPosting）

原则：留白至上，层次分明，微交互流畅，深色主题对比度符合 WCAG AA，中英混排注意字体回退，移动优先渐进增强。

让fable5去逆了下提示词，不知道做出来效果会怎么样。我试试。

整体设计感很强，体感比gpt5.5强多了，就是加载有点卡～

效果看上去还可以,就是感觉有点卡卡的

你这是什么软件，输入url就能拿到提示词吗，发一个 ^-^

可能是第一次加载吧，用的nuxt的ssr模式，可能服务器也一般，具体也不清楚 ^-^

我打开之后，方块区域的header部分 是数字吗？疯狂的抽搐

没看到呢，可以截个图看看 可能是没加载完？^-^

不知道耶，遇事不决 刷新下 ^-^

没做手机端的哦，你是不是手机看的

我一个玩游戏不晕3D的人，浏览你的网页居然晕了 ^-^

哈哈 那就是 体验还是没做好，后期有空优化下

非常炫酷，感觉审美能力比gpt还要好，可能是佬的提示词牛逼

泰裤辣 ^-^ 国模能做到这样已经很不错了，就是刚打开有点不流畅

很华丽丽，就是我打开后加载了半天才完全加载出来 ^-^

hermes agent ,调用fable-5

用手机打开，好多白点以为我的屏幕脏了 ^-^

厉害了佬，花费了多少token才能做出来呀

没注意，感觉不到1000w左右吧