Skip to content

feat: build AIGCFREE platform — Next.js 16 + Tailwind v4 design system, curated AIGC tool directory - #1

Open
devin-ai-integration[bot] wants to merge 1 commit into
mainfrom
devin/1779201711-build-aigcfree-platform
Open

feat: build AIGCFREE platform — Next.js 16 + Tailwind v4 design system, curated AIGC tool directory#1
devin-ai-integration[bot] wants to merge 1 commit into
mainfrom
devin/1779201711-build-aigcfree-platform

Conversation

@devin-ai-integration

Copy link
Copy Markdown

Summary

仓库原本只有一个 README placeholder,没有可重构的代码。我按仓库描述「分享黑科技,期待爱生活的你」从零搭建了一个完整的 AIGC 工具发现 / 分享站点,把重点放在你强调的 UI/UX 美化代码健壮性 上。

技术栈:Next.js 16 (App Router · Turbopack) · TypeScript 5 strict · Tailwind CSS v4 · 自建轻量设计系统。

设计系统 & UI

  • OKLCH 颜色 token(更现代、跨主题色彩平滑),覆盖 background / surface / surface-2 / foreground / muted / border / brand / accent / success / warning / danger / ring 等,通过 @theme inline 与 Tailwind v4 打通。
  • 三态主题:浅色 / 跟随系统 / 深色,使用 useSyncExternalStore 取代「effect 内 setState」反模式;附加 pre-paint <script> 防止刷新闪屏 (FOUC)。
  • 基础组件Button(5 个变体 / 4 个尺寸 / loading / icon-left/right)、Badge(5 个 tone)、CardInput(带 leading/trailing icon、focus ring)、IconButton(强制 aria-label)、自建 GithubIcon(lucide-react v1 移除了品牌图标)。
  • 布局:sticky glass header(滚动后毛玻璃)+ 移动端抽屉菜单 + 完整 footer + 「跳到主要内容」无障碍链接。
  • 首页:Hero(aurora 渐变 + grid 背景 + 浮动预览卡),统计 strip,分类入口卡片(点击即筛选并自动滚动),工具浏览器,About / CTA。
  • 细节:focus ring、prefers-reduced-motiontext-balance、自定义滚动条样式、@keyframes fadeInUp / float / shimmer

工具浏览器

  • 实时搜索:debounce 140ms + useDeferredValue + 多关键词 AND 匹配(命中名称 / 标语 / 描述 / 标签 / id)。
  • 分类、计费方式 (free / freemium / paid / open-source)、排序(精选优先 / 名称 / 分类)多维筛选。
  • localStorage 收藏,跨标签同步 (storage 事件),缓存快照避免 useSyncExternalStore 循环。
  • 空状态、活动筛选计数、一键重置、计数 chip 自适应深浅色。
  • 工具卡可点击整体跳官网、独立的收藏按钮、hostname 显示。

内容

  • 10 个分类,40 款精选工具,按需标记 featured / hot,所有数据 as const 强类型。
  • 覆盖国内外主流:ChatGPT / Claude / Gemini / DeepSeek / Kimi / 豆包 / 通义 / 元宝 / Midjourney / SD / FLUX / Sora / Runway / 可灵 / 海螺 / ElevenLabs / Suno / Cursor / Copilot / v0 / Devin / Manus / n8n / Perplexity / 等。
  • src/data/tools.ts 加一行即可贡献新工具,README 给出了模板。

健壮性

  • 严格 TypeScript(noUncheckedIndexedAccess 之外的全部 strict),ESLint 全通过。
  • app/error.tsx 错误边界 + app/not-found.tsx
  • localStorage 读写全部 try/catch,解析时校验 Array.isArraytypeof === "string"
  • SSR / 客户端水合分离:服务端快照统一返回中性值,客户端在水合后填充真实状态,避免 hydration mismatch。
  • SEO:完整 Metadata + Viewport(含 light/dark themeColor、OG、Twitter card、中文 locale)。

构建 / 校验

  • pnpm lint
  • pnpm build ✅(Turbopack 静态生成 //_not-found

Review & Testing Checklist for Human

风险等级:🟡 (新建项目,大量新代码 + 一些 lucide-react v1 适配)

  • 视觉走查首页:Hero / 分类 strip / 工具网格 / About / Footer 是否符合预期审美
  • 切换 浅色 / 跟随系统 / 深色 三态,确认无闪屏、无对比度问题
  • 工具浏览器:搜索 "视频"、点击分类 chip、切换计费、勾选「仅看收藏」、清除筛选
  • 收藏交互:点几个心形 → 刷新页面应保留;多开标签页应跨标签同步
  • 移动端(DevTools 切到手机宽度):Header 抽屉菜单展开 / 收起、网格变单列
  • 工具数据:随机抽几个跳官网验证 URL;如果有想新增 / 移除的工具,直接改 src/data/tools.ts 即可

Notes

  • 仓库之前为空,因此这个 PR 是「first commit / scaffolding」级别的大改,没有破坏性变更。
  • 已经把 next-env.d.ts 等生成产物加入 .gitignoreAGENTS.md / CLAUDE.md 是 create-next-app 16 自动生成的 agent 指引文件,建议保留。
  • 没有引入任何重型 UI 库(如 shadcn、Radix、HeroUI)以保持 bundle 轻量;如需更强的可访问性组件,可以后续按需引入 Radix Primitives。
  • 没有添加 Vercel / Cloudflare 配置;首次 Push 到 main 后绑定即可一键部署。

Link to Devin session: https://app.devin.ai/sessions/fae260d3440c478fad0c325eeb150834
Requested by: @wintopic

…stem

Scaffold a complete AIGC tool discovery/sharing site:

- Design system: OKLCH color tokens with light/dark themes, gradient
  utilities, glass header, aurora background, fade-in-up + float
  animations, reduce-motion friendly.
- Base UI: Button, Badge, Card, Input, IconButton, brand GitHub icon.
- Theme: useSyncExternalStore-based provider with three-way toggle
  (light/system/dark) and pre-paint script to avoid FOUC.
- Layout: sticky glass header with mobile menu, footer with grouped
  links, accessible skip-to-content.
- Home: Hero with floating preview cards + animated stats, categories
  strip (clickable into tools filter), tools browser with multi-keyword
  search, category + pricing filters, sorting, localStorage favorites
  (cross-tab sync via storage events), and About/CTA.
- Data: 40 curated tools across 10 categories with strict Tool /
  Category TypeScript types.
- Robustness: app/error.tsx error boundary, app/not-found.tsx,
  defensive localStorage parsing, suppressHydrationWarning on root,
  storage-safe try/catch.
- Docs: full Chinese README with stack, structure, contribution
  guide.

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
@devin-ai-integration

Copy link
Copy Markdown
Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant