Files
ai-directory-platform/docs/AI-Directory-Platform开发计划与技术设计文档.md
T
AI Directory Platform 4a1a034386 refactor: 主题系统 → monorepo 五个独立网站
- 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
2026-09-08 19:19:33 +00:00

33 KiB
Raw Blame History

AI Directory Platform

AI 目录站系统开发底座与产品化开发计划

项目定位: 可复用 AI Directory SaaS / 开源基础平台
基础项目: coolchange-ai/toolso-ai-open
技术方向: Next.js + React + TypeScript + PostgreSQL
核心目标:

  1. 基于现有 Toolso.AI 开源项目二次开发
  2. 建立一个可复用的 AI Directory 基础底座
  3. 支持多个不同视觉、不同定位的 AI 网站快速搭建
  4. 建立用户注册、认证、投票、评论、收藏、提交工具等社区能力
  5. 建立 SEO / Programmatic SEO 流量体系
  6. 建立工具提交、认领、审核、排名、推广等商业化能力
  7. 最终通过 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网站来验证底坐的快速, 易用, 可用, 可靠