// ❌ AI 生成的“优化”版本
return (
  <>
    

    ...
  
)
// ✅ 正确的防御性版本
return (
  

    

    ...
  
)

从 JSX 的语法角度kan，AI 的Zuo法完全合法，TypeScript 编译器也不会报错。但在视觉和 SEO 层面min-h-screen丢了bg-zinc- dark:bg-zinc-也跟着蒸发了。这就是典型的“AI 幻觉”加上“人类健忘”——AI 觉得它Zuo得对，人类也忘了去检查这些基础细节。

问题的根源是什么？是手动创建文件。

当你手动新建一个 page.tsx 时你有两个选择：要么凭记忆敲代码，要么去复制旧文件。无论哪种选择，dou在依赖人类的短期记忆。而短期记忆，是软件开发中Zui不可靠的存储介质。

为了解决这个问题，我构建了第一道防线：一个强制性的 CLI 脚手架。

核心思想非常直接：把正确的事情变容易，把错误的事情变困难。 当你运行一条命令就Neng拿到一个“满配”的模板时没有人会选择从头手写，哪怕是 AI 也不应该例外。

# 安装与配置
cp create-post.js your-project/scripts/create-post.js
cp verify-seo.js your-project/scripts/verify-seo.js
# 在 package.json 中添加脚本
# "post:new": "node scripts/create-post.js",
# "post:verify": "node scripts/verify-seo.js",
# "build": "pnpm post:verify && pnpm --filter './apps/*' build"

当你运行 pnpm post:new 时终端会引导你输入 slug、标题、描述和关键词。随后它会自动生成一个包含所有关键防御层的 page.tsx 骨架：

import { Header } from '@/components/Header'
import type { Metadata } from 'next'
import { generateBlogPostingJsonLd } from '@/lib/jsonld'
export const metadata: Metadata = {
  title: '文章标题 - DiffServ Lab',
  description: '文章描述',
  keywords: ,
  alternates: { canonical: '/blog/slug' },          // ← 规范链接
  openGraph: {                                      // ← 社交媒体卡片
    title: '文章标题',
    description: '文章描述',
    url: 'https://diffserv.xyz/blog/slug',
    siteName: 'DiffServ Lab',
    type: 'article',
  },
  twitter: {                                       // ← Twitter Card
    card: 'summary_large_image',
    title: '文章标题',
    description: '文章描述',
  },
}
export default function BlogPost {
  const jsonLd = generateBlogPostingJsonLd({        // ← 结构化数据
    title: '文章标题',
    description: '文章描述',
    url: 'https://diffserv.xyz/blog/slug',
    datePublished: '2023-10-27',
  })
  return (
    
 // ← 容器包裹
      

                    
                    

                        

                            标签：  
                            闭环  
                        
                    
                    

                    
                    

                        

                            

                                 上一篇： 
                                iOS和Android兼容性有哪些常见问题？  
                            
                            

                                 下一篇： 
                                别滥用工具函数，遵循util设计规范。