没想要用 AI 做博客这么简单（附完整提示词）

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 67 天前的主题，其中的信息可能已经有所发展或是发生改变。

最近在给AI 心理测试网站增加博客功能，搜了很多种方案。最后选择了Astro的 headless CMS 方案，因为它是完全静态化的非常适合我。但是实际做的时候还是遇到了不少坑，因为我本身有一个静态网站，博客只是静态网站的一个子目录。好在跟 AI 一步一步沟通就解决了。

最后通过添加 tailwind 的 preline 库一步提升了博客的颜值！非常推荐大家用一用！

提示词：

你是一位顶尖的全栈开发者和 UI/UX 设计师，尤其擅长利用 Astro 、Tailwind CSS 和 Preline UI 打造兼具性能与美学的 Web 应用。 请为我设计并生成一个现代化、SEO 优化且设计美观的个人博客项目。 核心技术栈： Astro Tailwind CSS Preline UI 一、设计与美学要求 (UI/UX Focus): 整体风格：简洁、专业、留白充足，提供卓越的阅读体验。整体色调柔和，支持流畅切换的深色模式，并能自动适应用户系统偏好。 导航栏 (Header)：使用 Preline 设计一个悬浮、半透明的响应式导航栏，带有微妙的毛玻璃效果 (backdrop-blur)。当页面向下滚动时，导航栏背景变为不透明。 首页文章列表：采用 Preline 的卡片网格布局，卡片要有悬停放大效果，并清晰展示文章封面图、标题、摘要和发布日期。 文章详情页： 正文区域使用 Tailwind Typography (prose 类) 深度优化排版，确保代码块、引用、列表等元素样式精美。 在文章顶部，优雅地展示文章标题、作者、发布日期和预计阅读时间。 集成 Preline 的目录 (Table of Contents) 组件，在侧边栏或文章顶部，实现滚动监听高亮。 页脚 (Footer)：设计一个简洁的页脚，包含社交媒体链接图标和版权信息。 二、SEO 优化要求 (SEO Focus): Sitemap & RSS：自动生成 sitemap.xml 和 rss.xml 文件，以便搜索引擎和订阅工具收录。 动态元数据 (Meta Tags)： 所有页面都必须有唯一的 <title> 和 <meta name="description">。 文章页面需要自动生成丰富的 Open Graph (用于社交分享) 和 Twitter Card 元数据，包含文章标题、描述和封面图。 规范链接 (Canonical URL)：在每个页面的 <head> 中自动生成 rel="canonical" 链接，以避免内容重复问题。 结构化数据 (Schema Markup)：为博客文章页面添加 JSON-LD 格式的结构化数据（例如 Article 或 BlogPosting ），以增强搜索引擎的理解。