7天！AI助我从0到1建成DevToolkit Hub 🚀

zjy365
249 阅读5分钟

"有什么好用的组件库推荐？"、"动画效果用什么库实现最简单？"、"独立开发者应该选择什么CI/CD工具？"…… 最近收到太多类似私信，与其一一回复，不如直接打造一个开发者资源导航站！本文分享我如何用Cursor编辑器和现成模板，7天内从0到1构建了DevToolkit Hub，帮助开发者快速找到最佳工具。

开发者的痛点

作为开发者，你是否有过这样的经历：

在GitHub上发现了一个超棒的工具，但过几天就忘了叫什么名字。想找类似功能的替代品，却发现搜索结果杂乱无章。最终只能在各大平台之间来回切换，浪费大量时间。

我就经历过无数次这样的情况。GitHub上的awesome系列虽然内容丰富，但缺少筛选功能；Product Hunt上的工具质量参差不齐；而Google搜索结果往往被SEO优化过的内容占据。

我需要一个集中展示高质量开发工具的平台，能够按照多种维度进行筛选。 既然找不到，那就自己动手做一个！

DevToolkit Hub：为开发者量身定制 🧰

DevToolkit Hub是一个精心策划的开发工具和开源项目集合平台，核心功能包括：

  • 多维度分类系统：将工具按框架、语言、编辑器等15个主类别和75个子类别进行分类
  • 标签组合筛选：通过组合标签快速定位特定类型的资源
  • 项目提交功能：允许用户分享自己发现或创建的优质工具
  • 技术博客模块：深入解析各类开发工具的使用技巧

技术选型

项目采用了以下技术栈：

  • Next.js：React框架，提供路由和SSR支持
  • Auth.js：处理用户认证
  • Sanity CMS：管理结构化内容
  • TailwindCSS：实用优先的CSS框架

选择这套技术栈是因为它们组合使用时效率极高，特别是对于内容驱动型网站。Next.js的SSR特性对SEO友好，而Sanity CMS提供了灵活的内容管理能力。

开发神器：Cursor AI编辑器 ⚡

Cursor是一款基于AI的代码编辑器，它彻底改变了我的开发方式。对比传统开发流程：

# 传统开发流程：
编写代码 -> 查阅文档 -> 调试问题 -> 重构优化 -> 反复循环

# 使用Cursor的开发流程：
描述需求 -> AI生成代码 -> 微调完善 -> 完成功能

举个例子，当我需要实现标签筛选功能时，只需在Cursor中输入：

实现一个标签筛选功能，可以选择多个标签，并根据选中的标签筛选出符合条件的项目。
需要考虑：
1. 标签可以多选
2. 选择标签后实时更新结果
3. 保持URL同步，支持分享筛选结果

Cursor立即生成了符合要求的代码框架，我只需稍加调整即可使用。这种开发方式将效率提升了至少3倍！

Cursor Rules：增强AI编码能力

为了让Cursor更好地理解我的项目和意图，我借鉴了Patrick JS的awesome-cursorrules仓库，创建了一组自定义规则。这些规则极大提高了AI生成代码的准确性和相关性：

# Project Context
- Next.js app with Sanity CMS backend
- Using TailwindCSS for styling
- DevToolkit Hub is a curated collection of developer tools and open-source projects

# Code Style
- Use functional components with React hooks
- Prefer named exports over default exports
- Use TypeScript interfaces for props and state
- Use Zod for data validation
- Always add proper types to functions and variables

# File Organization
- Pages in src/app/(route) directory
- Components in src/components directory
- Utils in src/lib directory
- Types in src/types.ts

# Design System
- Use existing TailwindCSS utility classes
- Follow our spacing system (4px increments)
- Use existing color variables from tailwind.config.js
- Responsive design: mobile-first approach

# Performance Considerations
- Use Next.js Image component for images
- Implement proper data fetching strategies
- Minimize client-side JavaScript

通过设置这些规则，Cursor能够更准确地理解我的项目结构和编码风格，生成的代码质量和一致性大幅提升。

内容自动化：AI驱动的导入系统 🤖

最具挑战性的部分是如何高效导入项目和工具信息。为此，我开发了一个Node.js脚本，结合AI和网页抓取技术：

export const fetchItem = async (url) => {
  // Get metadata using Microlink
  const microlinkData = await fetchItemWithMicrolink(url);

  // Analyze content using AI SDK
  const aisdkData = await fetchItemWithAISdk(url);

  // Merge data
  const mergedData = {
    link: url,
    name: aisdkData.object.title,
    description: aisdkData.object.description,
    introduction: aisdkData.object.introduction,
    categories: aisdkData.object.categories,
    tags: aisdkData.object.tags,
    image: microlinkData?.image?.url || defaultImageUrl,
    icon: `https://s2.googleusercontent.com/s2/favicons?domain=${url}&sz=128`,
  };

  return mergedData;
};

这个脚本实现了以下功能：

  1. 从URL获取网站元数据（标题、描述、图片等）
  2. 使用Claude 3.5 Sonnet分析网页内容，提取关键信息
  3. 自动匹配合适的分类和标签
  4. 生成结构化的内容并导入到Sanity CMS

最令人惊喜的是AI内容分析部分。通过Cheerio提取网页内容后，AI能够准确理解网站的功能和特点，生成高质量的描述和分类：

// Extract webpage content using Cheerio
const $ = cheerio.load(htmlContent);

// Extract page title and description
const pageTitle = $('title').text().trim() || '';
const metaDescription = $('meta[name="description"]').attr('content') || '';

// Extract product features list
const features = [];
$('ul li, ol li').each(function() {
  const text = $(this).text().trim();
  if (text && text.length > 15 && text.length < 200) {
    features.push(text);
  }
});

// Pass extracted content to AI for analysis
const result = await generateObject({
  model: openaiModel,
  schema,
  prompt: `Analyze the following webpage content and provide structured information:
  ${extractedContent}
  Available Categories: ${availableCategories.join(", ")}
  Available Tags: ${availableTags.join(", ")}
  `
});

这种自动化方式让我能够在短时间内导入数十个优质工具，大大加快了网站内容的丰富速度。

遇到的技术挑战及解决方案 🛠️

1. 网页结构多样性问题

不同网站的结构千差万别，导致内容提取困难。

解决方案：

  • 使用多种选择器组合，提高匹配成功率
  • 设置备选提取策略，当主要策略失败时使用
  • 利用AI的理解能力，从混杂内容中提取核心信息

2. API调用限制和错误处理

与外部服务集成时遇到API限流和超时问题。

解决方案：

  • 实现指数退避重试机制
  • 添加缓存层减少API调用
  • 完善错误处理，确保脚本稳定运行
export const fetchItemWithAISdk = async (url, retryCount = 0) => {
  try {
    // API call logic
  } catch (error) {
    console.error(`Error processing URL: ${url}`, error);

    // Retry logic
    if (isRetryableError(error) && retryCount < MAX_RETRIES) {
      const delay = Math.pow(2, retryCount) * 1000;
      console.log(`Waiting ${delay}ms before retry... Attempt ${retryCount + 1} of ${MAX_RETRIES}`);
      await new Promise(resolve => setTimeout(resolve, delay));
      return fetchItemWithAISdk(url, retryCount + 1);
    }

    return null;
  }
};

即将推出：GitTrend CLI工具 🌟

在开发DevToolkit Hub的过程中，我有了一个新想法：为什么不创建一个命令行工具，帮助开发者直接在终端中分析GitHub趋势和项目信息？

于是，GitTrend CLI诞生了！

GitTrend是一个AI驱动的命令行工具，帮助开发者跟踪GitHub趋势和分析项目元数据：

# View today's trending repositories
gittrend

# Filter by language and time period
gittrend trending --language javascript --since weekly

# Analyze specific project
gittrend url https://github.com/tj/commander.js --depth deep --ai

这个工具的关键特性包括：

  • GitHub趋势追踪：按语言、时间周期和主题跟踪热门仓库
  • URL分析：从任何URL中提取元数据，并获取AI驱动的见解
  • 多种输出格式：支持JSON、表格和Markdown格式
  • 智能过滤：专注于与用户兴趣相关的仓库

GitTrend将在近期开源发布，欢迎关注！

AI赋能的全新开发模式 💭

通过这个项目，我深刻体会到AI辅助开发带来的巨大变革。无论是编写代码、理解模板、还是内容处理，AI都能显著提升效率。

DevToolkit Hub现已上线：devkit.best，欢迎各位开发者前来体验，并提交你发现的优质工具和项目！

在这个AI工具蓬勃发展的时代，我们应该积极拥抱新技术，让它们成为我们的得力助手。就像DevToolkit Hub的理念那样：找到合适的工具，事半功倍！

你是否已经开始使用AI辅助开发？有什么好用的开发工具推荐？你对GitTrend CLI有什么期待？欢迎在评论区分享你的想法和经验！

avatar
文章
阅读
粉丝