一个面向人类与 AI 双重设计的个人博客/展览网站。

核心理念：Code as Content, Git as CMS

• 双视图设计：Human 模式（画廊视图）与 Agent 模式（档案视图）
• 无数据库架构：纯静态 SSG，Markdown 作为数据源
• 无障碍支持：WCAG AA 级别，键盘导航，屏幕阅读器友好
• 响应式布局：瀑布流网格，适配各种屏幕尺寸
• AI 友好：提供 /api/llms 接口供 Agent 访问

类别	技术
框架	Next.js 15.1.3 (App Router)
语言	TypeScript, React 19
样式	Tailwind CSS 3.4.1
内容	Markdown / MDX
运行时	Bun
部署	Vercel

# 安装依赖
bun install

# 开发模式
bun dev

# 构建生产版本
bun run build

# 启动生产服务器
bun start

Digital_Exhibition/
├── src/
│   ├── app/                    # Next.js 路由
│   │   ├── page.tsx            # 首页（画廊视图）
│   │   ├── curator/            # 策展人页面
│   │   ├── works/[slug]/       # 作品详情页
│   │   └── api/
│   │       ├── exhibits/       # 展品数据 API
│   │       └── llms/           # Agent 视图 API
│   ├── components/
│   │   ├── ui/                 # 基础 UI 组件
│   │   │   ├── ExhibitCard.tsx # 展品卡片
│   │   │   ├── DetailModal.tsx # 详情弹窗
│   │   │   └── MarkdownRenderer.tsx
│   │   └── installations/      # 交互式 SPA 组件
│   └── lib/                    # 工具函数
│       ├── types.ts            # 类型定义
│       ├── content-loader.ts   # 内容加载器
│       └── obsidian-parser.ts  # Obsidian 解析器
├── content/                    # 内容目录（Obsidian 编辑）
│   ├── writing/                # 文章
│   ├── poetry/                 # 诗歌
│   ├── prompt/                 # 提示词
│   ├── visual/                 # 图像
│   └── installation/           # 交互作品
├── public/
│   └── spa/                    # 外部 SPA 资源
└── .42cog/                     # 项目规格文档
    ├── meta/                   # 元信息
    ├── real/                   # 现实约束
    ├── cog/                    # 认知框架
    └── spec/                   # 规格书
        ├── pm/                 # 产品规格
        ├── design/             # UI 设计规格
        └── dev/                # 开发规格

类型	说明	格式
writing	长文章	.md / .mdx
poetry	诗歌	.md
prompt	提示词作品	.md
visual	图片/摄影	.md
installation	交互式 SPA	.mdx + .tsx

• 浅色背景 (#F9F9F9)
• 衬线字体，艺术画廊风格
• 瀑布流卡片布局
• 悬停效果与过渡动画

• 深色背景 (#050505)
• 等宽字体，终端风格
• 绿色强调色 (#22C55E)
• JSON 数据展示

• 键盘导航支持（Tab, Enter, Space, Escape）
• 焦点管理与焦点陷阱
• ARIA 属性标注
• 跳过链接（Skip to main content）
• 高对比度焦点指示器
• 屏幕阅读器友好

返回所有展品数据（供前端使用）

返回 Agent 友好的精简格式（供 AI 访问）

1. 在 Obsidian/Zed 中编写 Markdown 内容
2. 使用 Claude Code 辅助创建交互组件
3. 将组件保存到 src/components/installations/
4. 在 content/ 目录下创建对应的元数据文件
5. git push 触发自动部署

• 默认语言：中文
• 代码风格：极简设计，避免过度装饰
• 版本管理：语义版本号 (vX.Y.Z)

MIT License

---

"展览馆不只是存放作品的地方，它本身就是一件作品。"