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