AI 技术文档站点首页生成 Prompt
角色设定（Role）
你是一名资深的软件架构师兼技术产品设计师，长期从事 AI 工程化、前端与全栈开发。 你擅长将零散的技术知识系统化，构建可长期维护、可扩展、面向工程实践的技术文档站点。 你熟悉现代 Web 技术栈、文档型网站的信息架构、工程化设计、性能优化与可访问性（WCAG）。
目标（Goal）
生成一个以 AI 技术资料沉淀为核心的软件开发者技术网站首页。
该首页用于：
- 系统性整理 AI 相关技术资料
- 记录工程化实践与开发示例
- 总结可复用的最佳实践（Best Practices）
- 作为长期演进的 AI 技术知识库入口
本质上这是一个 Documentation-first 的技术站点首页，而非营销型官网。
网站定位（Context）
-
网站类型：
- AI 技术文档站点（Docs）
- AI 工程实践知识库
- 示例与模式（Patterns）集合
-
核心内容范围：
- AI 基础概念与方法论
- Agent / Multi-Agent 架构
- ReAct / PAE / MCP 等模式
- 工程化示例（代码、架构、目录设计）
- 实践经验、踩坑记录与最佳实践
-
目标受众：
- 技术负责人（Tech Lead / Architect）
- AI / Web / Fullstack 工程师
- 对 AI 工程落地感兴趣的开发者
- 潜在技术合作伙伴
-
风格关键词：
- Professional
- Engineering-driven
- Documentation-first
- Minimal & Clean
- Modern & Tech-oriented
- AI / Agent / ReAct / PAE / MCP
页面结构要求（Layout Requirements）
1. Hero 区域（Documentation Landing）
-
主标题（Headline）
- 一句话概括站点定位
- 强调「AI 工程实践 / 技术沉淀 / 文档化」
- ≤ 20 个英文单词
-
副标题（Subheadline）
- 清晰说明站点内容范围，例如：
- AI concepts, agent patterns, engineering examples, and best practices
- Focused on real-world implementation, not theory only
- 清晰说明站点内容范围，例如：
-
设计语义：
- 像技术文档入口，而非产品宣传
- 克制、理性、工程导向
2. 内容入口概览（Documentation Sections）
首页需要清晰暴露文档主结构，可使用卡片或列表：
示例分类（可灵活调整）：
- AI Fundamentals
- 核心概念、术语解释、方法论
- Agent & Architecture
- Agent / Multi-Agent / Workflow 设计
- Patterns & Paradigms
- ReAct / PAE / MCP 等模式解析
- Engineering Examples
- 可运行的代码示例
- 项目结构与实现细节
- Best Practices
- 实践经验总结
- 常见问题与决策权衡
每个分类需：
- 简短工程化描述
- 明确这是“文档入口”，不是营销模块
3. 站点理念（Documentation Philosophy）
用一小段文字说明本站的核心原则：
- 工程优先于概念
- 示例优先于抽象
- 可维护性与可演进性
- 持续积累，而非一次性整理
语言要求：
- 偏技术思考
- 避免口号化表达
4. 使用方式说明（Optional but Recommended）
简要说明：
- 如何使用本站
- 如何从概念 → 示例 → 实践
- 如何将内容应用到真实项目中
5. 页脚（Footer）
- 技术与社区链接：
- GitHub
- Blog
- Twitter / X
- 简洁版权信息
- 保持文档站点的“工具感”
设计与实现约束（Constraints）
设计风格
- 参考：
- Vercel Docs
- Stripe Docs
- Linear Docs
- 信息层级清晰
- 留白合理，阅读友好
- 明确这是「长期维护的技术文档站」
可访问性（Accessibility）
- 合理对比度
- 语义化 HTML 结构
- 清晰的标题层级
技术实现偏好（如输出代码）
- React + TypeScript
- Next.js
- HeroUI
- Tailwind CSS
- 组件拆分合理
- 便于扩展文档结构
- 代码可直接集成到以下项目中运行：
输出要求（Output Requirements）
-
文案风格：
- 克制
- 专业
- 工程化
- 偏文档语义，而非产品宣传
-
避免营销词汇：
- 如 “empower”, “disrupt”, “best-in-class”
-
若输出代码：
- 首页结构完整
- 组件职责明确
- 不引入多余抽象
- 易于后续添加新的文档分类
-
若输出设计描述：
- 使用开发者视角描述布局、模块职责与信息流
最终指令（Final Instruction）
请基于以上要求，生成一个AI 技术文档站点首页的完整内容或对应页面代码， 体现工程师视角下的专业性、系统性与长期可维护的技术审美。
Last updated on