- packages/core: @aidir/core 底座库(src/pages 页面组件体 1:1 镜像路由树 / kit 站点外壳工厂 / content/blog / scripts) - sites/: 5 个独立 Next.js 网站(ai-stack / launchai / the-ai-ledger / devai-tools / findai) - 每站独立 package.json / next.config / tailwind / messages / .env / 构建 - src/app 约 56 个薄路由文件(re-export 底座页面 + 内联路由段配置 revalidate/dynamic) - src/site/brand.tsx 站点配置 + src/site/home.tsx 站点首页(createMarketingLayout / createHomePage 工厂) - generate-site.mjs: 站点生成器(新增网站 = SITES 加条目,零 Core 修改) - start-all-sites.sh: 一键启动 3001-3005 - next-config.mjs: 底座统一 Next 配置工厂(next-intl + MDX + standalone) - 五站共享同一套 PostgreSQL / Better Auth / Admin(设计文档 §42) - 验证: 5 站 build OK / typecheck OK / 55 路由冒烟 200 / 品牌-内容-截图 差异确认 / 登录-投票-重复检测 e2e PASS
33 KiB
AI Directory Platform
AI 目录站系统开发底座与产品化开发计划
项目定位: 可复用 AI Directory SaaS / 开源基础平台
基础项目: coolchange-ai/toolso-ai-open
技术方向: Next.js + React + TypeScript + PostgreSQL
核心目标:
- 基于现有 Toolso.AI 开源项目二次开发
- 建立一个可复用的 AI Directory 基础底座
- 支持多个不同视觉、不同定位的 AI 网站快速搭建
- 建立用户注册、认证、投票、评论、收藏、提交工具等社区能力
- 建立 SEO / Programmatic SEO 流量体系
- 建立工具提交、认领、审核、排名、推广等商业化能力
- 最终通过 5 个不同 UI / 产品形态验证底座的可复用性、稳定性和扩展性
一、产品战略
1.1 不要做成普通 AI 导航站
传统 AI 导航站的核心结构:
首页
↓
分类
↓
工具列表
↓
工具详情
↓
外链
这种模式非常容易同质化。
本项目应该升级成:
AI Directory Platform
│
┌───────────────────┼───────────────────┐
↓ ↓ ↓
Discovery Community Content
│ │ │
搜索/分类/任务 Vote/Review/收藏 Blog/Guide/SEO
│ │ │
└───────────────────┼───────────────────┘
↓
Tool / Product Data
│
┌─────────────┼─────────────┐
↓ ↓ ↓
Ranking Analytics Monetization
│ │ │
↓ ↓ ↓
榜单系统 数据分析 推广/广告/会员
最终目标不是:
“让用户看到 AI 工具。”
而是:
让用户通过搜索、任务、榜单、社区评价和内容找到最适合自己的 AI 工具。
二、底座选择
2.1 基础项目
直接 Fork:
coolchange-ai/toolso-ai-open
该项目当前已经包含:
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS
- Framer Motion
- Radix UI
- React Hook Form
- Zod
- Better Auth
- Google OAuth
- PostgreSQL
- Drizzle ORM
- Resend
- R2 / S3
- next-intl
- Blog / MDX
- Admin Panel
- Favorites
- Light / Dark Theme
因此不建议重新开发这些基础能力。
三、总体架构
建议把项目从:
Toolso.AI
升级为:
AI Directory Core
然后在 Core 上构建不同站点。
AI Directory Core
│
┌───────────────────┼───────────────────┐
│ │ │
↓ ↓ ↓
Core UI Core Data Core API
│ │ │
├── Header ├── Tools ├── Search
├── Cards ├── Categories ├── Vote
├── Filters ├── Tags ├── Review
├── Search ├── Users ├── Submit
└── Detail ├── Votes ├── Ranking
└── Reviews └── Analytics
然后:
AI Directory Core
│
┌─────────────────┼─────────────────┐
↓ ↓ ↓
Site A Site B Site C
Directory Product Hunt Niche AI
Style Style Style
↓ ↓ ↓
Site D Site E
Minimal Editorial
四、设计原则
4.1 禁止 Emoji
整个系统禁止使用:
- Emoji
- Unicode Emoji 图标
- 字符型图标
→←✓★♥●- 类似字符模拟 Icon
所有 UI 图标统一使用:
Lucide Icons / SVG
- Lucide 可以通过context7 mcp搜索 例如:
import {
Search,
Heart,
Star,
ArrowUp,
ChevronRight,
ExternalLink,
Plus,
Settings,
} from "lucide-react";
图标规范:
Icon
├── stroke-width: 1.8 ~ 2
├── currentColor
├── SVG
├── lucide-react
└── 禁止手写 Unicode 图标
这样能够保证整个系统视觉统一。
五、设计系统
建立独立 Design System,而不是把 UI 写死在业务页面中。
5.1 Design Tokens
统一:
Colors
Typography
Spacing
Radius
Shadow
Border
Motion
Breakpoints
Icon
Button
Input
Card
Badge
Dialog
Dropdown
Tabs
Pagination
例如:
--color-background
--color-foreground
--color-muted
--color-border
--color-primary
--color-secondary
--radius-sm
--radius-md
--radius-lg
--radius-xl
--spacing-xs
--spacing-sm
--spacing-md
--spacing-lg
--spacing-xl
六、主题系统
必须支持:
Light
Dark
System
主题切换不能只改变背景颜色。
需要完整适配:
- 页面背景
- Card
- Border
- Text
- Muted Text
- Input
- Dropdown
- Modal
- Tooltip
- Header
- Footer
- Code
- Blog
- Tool Detail
- Admin
七、响应式设计
必须 Mobile First。
支持:
Mobile
Tablet
Desktop
Large Desktop
核心断点:
< 640
640+
768+
1024+
1280+
1536+
重点测试:
375 × 812
390 × 844
768 × 1024
1280 × 800
1440 × 900
1920 × 1080
八、核心数据模型
8.1 User
User
├── id
├── name
├── username
├── email
├── avatar
├── bio
├── role
├── status
├── createdAt
└── updatedAt
Role:
USER
EDITOR
MODERATOR
ADMIN
SUPER_ADMIN
九、认证系统
支持:
Google
GitHub
Email
后续可扩展:
Discord
X
Microsoft
Apple
Google 和 GitHub 登录属于第一阶段。
认证系统统一基于 Better Auth。
十、Tool 数据模型
核心实体:
Tool
├── id
├── slug
├── name
├── tagline
├── description
├── logo
├── websiteUrl
├── screenshots
├── video
├── categoryId
├── pricing
├── foundedAt
├── status
├── verified
├── featured
├── createdAt
└── updatedAt
十一、Tool 分类系统
不要只做:
AI Writing
AI Image
AI Video
AI Coding
应该同时支持:
Category
Writing
Image
Video
Audio
Coding
Marketing
Productivity
Research
Business
Education
Finance
Design
Automation
AI Agent
Use Case
例如:
写博客
制作 PPT
生成 Logo
视频剪辑
会议记录
生成字幕
写代码
SEO
客户支持
社交媒体
市场分析
Audience
Developers
Designers
Marketers
Students
Creators
Founders
Researchers
Business
Enterprise
这样可以建立三维发现体系:
Category
+
Use Case
+
Audience
这比单纯分类更有 SEO 和产品价值。
十二、Pricing
统一:
Free
Freemium
Free Trial
Paid
Contact
Open Source
支持:
monthlyPrice
yearlyPrice
currency
hasFreePlan
hasFreeTrial
十三、Tool Detail 页面
Tool Detail 是整个网站最重要的 SEO 页面之一。
建议结构:
Tool Header
├── Logo
├── Name
├── Tagline
├── Category
├── Pricing
├── Rating
├── Vote
├── Favorite
├── Visit Website
└── Share
Overview
Features
Use Cases
Pricing
Screenshots
Pros & Cons
Alternatives
User Reviews
Related Tools
Similar Tools
FAQ
Related Articles
十四、投票系统
这是整个项目非常重要的差异化功能。
参考 Product Hunt 的产品互动逻辑。
但不要简单做:
Upvote = +1
建议建立:
Vote
├── userId
├── toolId
├── value
├── createdAt
└── source
目前:
value = 1
以后可以扩展:
Like
Upvote
Downvote
十五、投票规则
必须登录才能投票。
用户:
未登录
↓
点击 Vote
↓
Login
↓
完成 OAuth
↓
自动返回原页面
↓
Vote 成功
避免用户频繁刷票。
基础防刷:
User ID
IP
Cookie
Session
Rate Limit
高级防刷:
Vote velocity
Account age
IP reputation
Device fingerprint
Abnormal voting pattern
注意:
不要让投票数量直接决定所有排名。
十六、Ranking 系统
建立统一 Ranking Engine。
例如:
score =
voteScore
+ reviewScore
+ clickScore
+ favoriteScore
+ freshnessScore
+ qualityScore
可以设计:
Trending
Popular
Most Voted
Most Saved
Most Viewed
Highest Rated
New
Editor's Choice
十七、Trending 算法
不要简单:
votes DESC
建议:
Trending Score
=
votes
× freshness
× velocity
× engagement
例如:
过去 24 小时
过去 7 天
过去 30 天
这样新工具才有机会冲榜。
否则老工具会永久霸榜。
十八、用户评论
用户登录后:
Rating
Review
Pros
Cons
Use Case
Review 数据:
Review
├── userId
├── toolId
├── rating
├── title
├── content
├── pros
├── cons
├── status
├── helpfulCount
└── createdAt
十九、Review 可信度
必须避免:
工具厂商自己刷评论
可以建立:
Verified User
Verified Usage
Verified Purchase
Verified Owner
同时允许:
Helpful
Report
二十、Tool Submission
用户可以:
Submit AI Tool
提交:
Name
Website
Description
Logo
Category
Use Cases
Pricing
Social Links
Screenshots
Founder
Contact
状态:
Draft
Pending
Reviewing
Approved
Rejected
Published
Archived
二十一、Claim Listing
后期增加:
Claim this tool
Tool Owner 可以认领工具。
认领后可以:
修改介绍
修改价格
上传截图
增加视频
回复评论
查看 Analytics
申请 Featured
二十二、商业化
这是未来非常重要的一层。
可以设计:
Free Listing
Verified Listing
Featured Listing
Sponsored
Homepage Placement
Category Placement
Newsletter
Editorial
但必须明确区分:
Organic
Sponsored
Verified
Editor's Choice
避免影响用户对排名公正性的信任。
Futurepedia 当前已经形成 Basic Listing、Verified Listing 和 Enterprise 等商业化层级;AITopTools 也存在 Listing、Homepage Launch、Directory Growth 等商业模式。
二十三、SEO 架构
SEO 是整个项目最重要的流量来源之一。
必须从第一天设计。
23.1 Tool SEO
/tools/chatgpt
/tools/midjourney
/tools/cursor
23.2 Category SEO
/ai-tools/writing
/ai-tools/video
/ai-tools/image
/ai-tools/coding
23.3 Use Case SEO
这是重点。
例如:
/ai-tools-for/blogging
/ai-tools-for/youtube
/ai-tools-for-seo
/ai-tools-for-students
/ai-tools-for-marketing
23.4 Comparison SEO
例如:
/tools/chatgpt-vs-claude
/tools/cursor-vs-windsurf
/tools/midjourney-vs-flux
23.5 Alternative SEO
例如:
/tools/chatgpt-alternatives
/tools/canva-alternatives
/tools/midjourney-alternatives
23.6 Collection SEO
例如:
/best/ai-writing-tools
/best/free-ai-tools
/best-ai-video-generators
/best-ai-coding-tools
二十四、Programmatic SEO
这是整个底座最重要的设计之一。
不要把 SEO 页面写死。
建立:
SEO Page Generator
输入:
Category
Use Case
Audience
Pricing
Tool
自动生成:
Title
Description
H1
Introduction
Tool List
FAQ
Related Categories
Related Tools
Schema
Internal Links
例如:
Best AI Writing Tools for Marketing Teams
Best Free AI Writing Tools
Best AI Writing Tools for Students
Best AI Writing Tools for Bloggers
Best AI Writing Tools for SEO
Best AI Writing Tools in 2026
但必须避免大量低质量、重复模板页面。
二十五、结构化数据
支持:
SoftwareApplication
Product
Review
AggregateRating
Article
BreadcrumbList
FAQPage
Organization
WebSite
二十六、内部链接系统
必须建立自动 Internal Linking。
例如:
Tool
↓
Category
↓
Use Case
↓
Similar Tools
↓
Alternative
↓
Blog
最终形成:
SEO Graph
而不是孤立页面。
二十七、搜索系统
第一阶段:
PostgreSQL Search
第二阶段:
Meilisearch
或者:
Typesense
最终可以升级:
Semantic Search
例如用户搜索:
帮我找一个可以自动制作 YouTube Shorts 的工具
系统不只是匹配:
YouTube
Shorts
而是识别:
Task = Video Creation
Platform = YouTube
Format = Short Video
然后推荐工具。
二十八、AI 推荐系统
后期加入:
What are you trying to do?
用户输入:
I need to create marketing videos.
系统输出:
Recommended Tools
推荐因素:
Use Case
Category
Pricing
Rating
Popularity
User Reviews
这会成为区别于传统导航站的重要能力。
二十九、内容系统
原有 Blog 保留。
但是升级成:
Blog
Guides
Comparisons
Alternatives
Best Lists
Tutorials
News
Prompts
Resources
例如:
Best AI Video Generators
10 Best AI Tools for YouTube
ChatGPT Alternatives
Best Free AI Writing Tools
AI Tools for Developers
三十、首页设计
不要简单:
Header
Banner
Category
Tools
Footer
建议:
Header
Hero
├── Main headline
├── Search
└── Popular searches
Trending Tools
Popular Categories
New AI Tools
Tools by Use Case
Editor's Picks
Community Rankings
Latest Reviews
Latest Articles
Newsletter
Footer
首页核心任务只有三个:
Search
Discover
Explore
三十一、Header
Desktop:
Logo
Discover
Categories
Collections
Rankings
Blog
Submit
Search
Theme
Login
Mobile:
Logo
Search
Menu
所有图标使用 Lucide SVG。
三十二、Mobile
Mobile 不是 Desktop 缩小。
需要重新设计:
Bottom Navigation
Search
Filter Drawer
Tool Card
Vote
Favorite
重点保证:
Thumb friendly
One hand operation
Fast navigation
三十三、后台 Admin
Admin 应成为整个系统的内容运营中心。
Dashboard:
Users
Tools
Submissions
Reviews
Votes
Traffic
Search
Revenue
Tool Management:
Create
Edit
Review
Publish
Feature
Archive
Delete
Merge
三十四、审核系统
Submission:
Pending
↓
Auto Validation
↓
AI Classification
↓
Human Review
↓
Publish
AI 可以自动识别:
Category
Tags
Use Cases
Description
Pricing
Language
Duplicate
人工负责最终审核。
三十五、重复工具检测
用户提交工具时:
Website URL
Domain
Tool Name
Embedding
进行重复检测。
例如:
chatgpt.com
chat.openai.com
openai.com/chatgpt
不能形成三个工具。
三十六、数据采集系统
未来需要:
Tool Discovery
Tool Import
Tool Update
Pricing Update
Broken Link Detection
Logo Update
Screenshot Update
建立:
Crawler
↓
Parser
↓
Normalizer
↓
AI Classifier
↓
Duplicate Detection
↓
Review Queue
↓
Publish
三十七、Analytics
每个 Tool:
Views
Clicks
Outbound Clicks
Favorites
Votes
Reviews
Search Impressions
后台可以看到:
Tool CTR
Category CTR
Homepage CTR
Search CTR
这是未来商业化非常重要的数据。
三十八、事件系统
统一:
tool_view
tool_click
tool_vote
tool_favorite
tool_review
tool_share
search
category_view
submit_tool
claim_tool
形成:
Event
├── id
├── userId
├── sessionId
├── event
├── entityType
├── entityId
├── metadata
└── createdAt
三十九、通知系统
支持:
In-app
Email
例如:
你的工具已通过审核
你的工具获得新的 Vote
你的工具收到新的 Review
有人回复了你的 Review
你的工具进入 Trending
四十、分享系统
支持:
Copy Link
X
LinkedIn
Facebook
Reddit
不要用 Unicode 字符作为社交图标。
统一 SVG Icon。
四十一、五套 UI 验证计划
底座完成后,必须真正做 5 个网站。
目的不是做 5 个完整商业项目。
而是验证:
数据层是否通用
组件是否通用
SEO 是否通用
认证是否通用
Ranking 是否通用
Theme 是否通用
后台是否通用
方案 A:Classic AI Directory
定位:
最标准的 AI 工具导航站。
特点:
大量 Tool
分类
搜索
筛选
排行榜
Trending
New
视觉:
Clean
Dense
Professional
验证:
Tool Grid
Filter
Search
Category
Pagination
方案 B:Product Hunt Style
定位:
AI 产品社区。
核心:
Daily Launch
Upvote
Comments
Maker
Ranking
Collections
首页:
Today's AI Products
Product Feed
Top Products
Upcoming
Discussions
重点验证:
Vote
User
Comment
Ranking
方案 C:Editorial AI
定位:
AI 媒体 + 工具目录。
核心:
Articles
Guides
Best Tools
Reviews
Comparisons
首页:
Featured Story
Editor's Picks
Best AI Tools
Latest Articles
Popular Guides
重点验证:
Blog
SEO
Editorial
Content
方案 D:Niche AI Directory
定位:
垂直行业 AI。
例如:
AI for Developers
或者:
AI for Marketing
核心:
Tools
Use Cases
Workflows
Templates
Guides
重点验证:
Use Case
Audience
Workflow
Recommendation
方案 E:Minimal AI Search
定位:
极简 AI 搜索引擎。
首页:
Logo
What are you looking for?
[ Search AI Tools ]
Popular Searches
搜索后:
Recommended Tools
重点验证:
Search
Semantic Search
Recommendation
Performance
Mobile
四十二、五个网站验证标准
每个站都必须使用同一个:
Database
Auth
Admin
Tool Model
User Model
Vote System
Review System
Search
SEO Engine
Analytics
只改变:
Theme
Layout
Navigation
Components
Content
Brand
如果需要大量修改 Core 代码才能完成第五个站:
说明底座架构失败。
四十三、组件架构
建议:
src/
├── app/
├── components/
│ ├── ui/
│ ├── layout/
│ ├── navigation/
│ ├── tool/
│ ├── voting/
│ ├── review/
│ ├── search/
│ └── content/
│
├── features/
│ ├── auth/
│ ├── tools/
│ ├── categories/
│ ├── voting/
│ ├── reviews/
│ ├── ranking/
│ ├── search/
│ ├── submission/
│ ├── claim/
│ ├── analytics/
│ └── seo/
│
├── lib/
│ ├── auth/
│ ├── db/
│ ├── search/
│ ├── ranking/
│ ├── seo/
│ └── analytics/
│
└── themes/
├── classic/
├── product/
├── editorial/
├── niche/
└── minimal/
四十四、Feature First 架构
不要:
components
utils
pages
全部混在一起。
推荐:
features/tools
features/voting
features/reviews
features/ranking
每个 Feature 自己管理:
components
actions
queries
schemas
types
utils
这样以后拆模块非常容易。
四十五、API 架构
核心 API:
GET /api/tools
GET /api/tools/:slug
POST /api/tools
PATCH /api/tools/:id
DELETE /api/tools/:id
POST /api/tools/:id/vote
DELETE /api/tools/:id/vote
POST /api/tools/:id/favorite
DELETE /api/tools/:id/favorite
GET /api/tools/:id/reviews
POST /api/tools/:id/reviews
POST /api/submissions
POST /api/tools/:id/claim
GET /api/rankings
GET /api/search
四十六、数据库核心关系
User
│
├── Vote ─────── Tool
│
├── Review ───── Tool
│
├── Favorite ─── Tool
│
└── Submission
Tool
│
├── Category
├── Tags
├── UseCases
├── Reviews
├── Votes
├── Favorites
└── Analytics
四十七、性能要求
目标:
LCP < 2.5s
INP < 200ms
CLS < 0.1
核心页面:
Homepage
Category
Search
Tool Detail
Blog
必须:
Server Components First
Image Optimization
Lazy Loading
Pagination
Caching
ISR
Database Index
四十八、缓存策略
例如:
Tool Detail
Category
Ranking
Homepage
可以:
ISR
revalidate
Cache
而:
Vote
Review
Favorite
使用实时请求。
四十九、安全
必须:
Rate Limiting
CSRF
XSS
SQL Injection Protection
Input Validation
OAuth Security
Session Security
Admin RBAC
Audit Log
所有用户输入:
Zod
统一验证。
五十、反作弊
尤其是 Vote。
建立:
Rate Limit
IP Limit
Account Age
Vote Velocity
Duplicate Detection
Suspicious Account
管理员:
Vote Audit
可以查看:
User
IP
Timestamp
Tool
Action
五十一、SEO 流量战略
最终流量来源应该形成:
Google
↓
SEO Landing Page
↓
Category / Use Case
↓
Tool
↓
Related Tools
↓
More Pages
同时:
Google
↓
Blog
↓
Tool
↓
Category
以及:
Google
↓
Comparison
↓
Tool
五十二、SEO 页面矩阵
至少建立:
Tool Pages
Category Pages
Use Case Pages
Audience Pages
Best Pages
Alternative Pages
Comparison Pages
Blog Pages
Guide Pages
形成:
8 × N
的可扩展 SEO 页面体系。
五十三、流量增长模型
第一阶段:
SEO
第二阶段:
User Generated Content
第三阶段:
Community
第四阶段:
Newsletter
第五阶段:
Social Distribution
第六阶段:
Tool Owner Distribution
五十四、最重要的增长闭环
必须建立:
Tool Owner
↓
Submit Tool
↓
获得 Listing
↓
分享 Listing
↓
带来用户
↓
用户 Vote / Review
↓
Tool Ranking 上升
↓
更多流量
↓
Tool Owner 更愿意提交
这是比单纯 SEO 更重要的增长飞轮。
五十五、Newsletter
保留现有 Resend。
增加:
Weekly AI Tools
New AI Tools
Trending AI Tools
Editor's Picks
Newsletter 不是简单:
订阅成功
而是成为:
Traffic Retention
渠道。
五十六、商业模式
第一阶段不要急着收费。
先建立:
Traffic
Users
Tools
Reviews
Votes
之后:
Free Listing
↓
Verified Listing
↓
Featured
↓
Sponsored
↓
Advertising
↓
Enterprise
五十七、第一阶段 MVP
MVP 必须包含:
Tool Directory
Category
Search
Filter
Tool Detail
Google Login
GitHub Login
Favorite
Vote
Review
Submit Tool
Admin
Theme
i18n
SEO
Blog
Analytics
五十八、V1
增加:
Ranking
Trending
Claim Tool
User Profile
Collections
Alternative
Comparison
Newsletter
Advanced SEO
五十九、V2
增加:
Semantic Search
AI Recommendation
Automatic Tool Import
Automatic Classification
Duplicate Detection
Tool Health Check
Advanced Analytics
Monetization
六十、V3
最终变成:
AI Directory Platform
支持:
Multi Site
Multi Brand
Multi Theme
Multi Locale
Multi Tenant
也就是:
一个 Core
↓
多个 AI Directory
六十一、开发阶段
Phase 0:底座审计
时间:
2~3 天
工作:
Clone Repository
Run Project
Review Architecture
Review Database
Review Auth
Review UI
Review Admin
Review SEO
Review i18n
输出:
Architecture Audit
Technical Debt List
Refactor Plan
六十二、Phase 1:Design System
时间:
3~5 天
完成:
Theme
Typography
Color
Spacing
Icon
Button
Card
Input
Modal
Dropdown
Tabs
Toast
Skeleton
同时建立:
Lucide Icon Rule
严格禁止:
Emoji
Unicode Icon
HTML Entity Icon
六十三、Phase 2:Core Data
时间:
4~7 天
完成:
Tool
Category
Tag
UseCase
Pricing
User
Vote
Review
Favorite
Submission
Claim
数据库 Migration。
六十四、Phase 3:Community
时间:
5~7 天
完成:
Google
GitHub
Profile
Vote
Favorite
Review
Comment
User Activity
六十五、Phase 4:Ranking
时间:
3~5 天
完成:
Trending
Popular
Most Voted
Most Saved
Highest Rated
New
Editor's Choice
建立 Ranking Engine。
六十六、Phase 5:Submission
时间:
3~5 天
完成:
Submit
Review
Approve
Reject
Edit
Claim
六十七、Phase 6:SEO
时间:
5~8 天
完成:
Metadata
Sitemap
Robots
Schema
Canonical
Breadcrumb
Internal Linking
Category SEO
Use Case SEO
Alternative
Comparison
六十八、Phase 7:Search
时间:
3~5 天
第一版:
PostgreSQL Search
后续:
Meilisearch
六十九、Phase 8:Analytics
时间:
3~5 天
完成:
Page View
Tool View
Outbound Click
Vote
Favorite
Search
Review
Submission
七十、Phase 9:五套 UI
时间:
10~15 天
依次实现:
Classic
Product Hunt
Editorial
Niche
Minimal Search
七十一、Phase 10:压力测试
测试:
100 tools
1,000 tools
10,000 tools
100,000 tools
测试:
Search
Category
Ranking
Vote
Review
Homepage
Sitemap
七十二、Phase 11:上线
推荐:
Vercel
+
PostgreSQL
+
R2
+
Resend
现有项目本身已经提供 Vercel / Docker 的部署路径。
七十三、建议的项目里程碑
M1
基础架构稳定
M2
Design System 完成
M3
Tool Directory 完成
M4
Auth + User 完成
M5
Vote + Review 完成
M6
Ranking 完成
M7
Submission + Claim 完成
M8
SEO Engine 完成
M9
Search 完成
M10
Analytics 完成
M11
UI Theme A
M12
UI Theme B
M13
UI Theme C
M14
UI Theme D
M15
UI Theme E
M16
性能、安全、SEO、上线
七十四、验收标准
UI
所有图标 SVG
所有图标 Lucide
无 Emoji
无 Unicode Icon
无字符箭头
Responsive
Light/Dark
Functional
Google Login
GitHub Login
Vote
Favorite
Review
Submit
Claim
Search
Filter
Ranking
SEO
SSR
Metadata
Sitemap
Schema
Canonical
Internal Linking
Performance
LCP < 2.5s
INP < 200ms
CLS < 0.1
Security
RBAC
Rate Limit
Input Validation
Audit Log
Anti Spam
Anti Vote Abuse
七十五、最重要的架构原则
未来开发过程中必须坚持:
原则 1
Core 与 Site Theme 分离。
不要:
if site === "xxx"
满天飞。
应该:
Theme
Layout
Component Variant
原则 2
业务逻辑与 UI 分离。
例如 Vote:
useVote()
不应该知道:
Button 长什么样
原则 3
Ranking Engine 独立。
未来可以:
Product Hunt Ranking
AI Directory Ranking
Editor's Ranking
Sponsored Ranking
原则 4
SEO Engine 独立。
让任何站点都可以:
generateSEOPage()
原则 5
内容模型不要写死。
Tool、Category、Use Case、Audience、Collection 都应该可以组合。
七十六、推荐的最终产品模型
最终不要把系统理解成:
AI Tools Directory
而应该理解成:
AI Discovery Platform
│
┌───────────────────┼───────────────────┐
│ │ │
Directory Community Content
│ │ │
Tools Vote/Review Blog/Guide
│ │ │
└───────────────────┼───────────────────┘
│
Recommendation
│
Ranking Engine
│
Search Engine
│
SEO Engine
│
Analytics
│
Monetization
七十七、最终目标
第一阶段:
做一个比普通 AI 导航站更现代的 AI Directory。
第二阶段:
做一个有用户行为和社区机制的 AI Product Discovery 平台。
第三阶段:
做一个能够通过 SEO、UGC、Ranking、Review、Submission 自增长的流量平台。
最终:
同一套 Core,可以快速生成不同品牌、不同视觉、不同垂直领域的 AI Directory。
七十八、开发优先级
最终优先级建议严格按照:
P0
基础架构
Design System
Tool
Category
Search
SEO
Auth
Admin
P1
Vote
Favorite
Review
Ranking
Submission
Claim
User Profile
P2
Collections
Comparison
Alternative
Newsletter
Analytics
P3
Semantic Search
AI Recommendation
Auto Classification
Crawler
Tool Health
Advanced Ranking
P4
Monetization
Sponsored
Featured
Enterprise
Multi Tenant
七十九、第一版不要做的东西
为了避免项目失控,第一版暂时不要做:
复杂 AI Chat
复杂推荐模型
完整广告平台
复杂会员系统
复杂支付系统
实时聊天
过度复杂社交关系
过度复杂积分系统
第一版真正需要验证的是:
用户能不能找到工具
用户愿不愿意 Vote
用户愿不愿意 Review
Tool Owner 愿不愿意提交
Google 能不能大量收录
SEO 页面有没有流量
五套 UI 能不能共用 Core
八十、最终验收目标
整个项目完成后,需要得到:
AI Directory Core
│
├── Auth
├── User
├── Tool
├── Category
├── Use Case
├── Search
├── Vote
├── Review
├── Favorite
├── Ranking
├── Submission
├── Claim
├── Analytics
├── SEO
├── Blog
├── Newsletter
├── Admin
├── Theme
└── i18n
然后:
AI Directory Core
│
┌────────────┼────────────┐
↓ ↓ ↓
Classic Community Editorial
│ │ │
└────────────┼────────────┘
↓
Niche Directory
│
↓
AI Search
如果这五套产品都能够在不修改核心业务逻辑的情况下快速完成,那么这个项目才算真正完成了“AI Directory 开发底座”的目标。
八十一、最终产品战略结论
这个项目最值得投入的不是:
把页面做得像 Toolify
而是建立四个核心资产:
1. Tool Data
2. User Community
3. SEO Page Graph
4. Ranking / Recommendation Engine
其中:
Tool Data 是内容资产。
User Community 是增长资产。
SEO Page Graph 是流量资产。
Ranking / Recommendation Engine 是产品壁垒。
UI 只是这四个资产的不同表现形式。
所以五套 UI 的验证意义非常重要:
如果五套完全不同的网站都能够复用同一套 Tool、User、Vote、Review、Ranking、SEO、Search 和 Admin,那么这个项目就不再是一个 AI 导航站,而是一套真正可以持续孵化 AI 流量网站的基础设施。
最后要求
- 完成底坐后,搞个5个不同UI, 类型的AI网站来验证底坐的
快速, 易用, 可用, 可靠