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
Conversation
…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>
Author
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
仓库原本只有一个 README placeholder,没有可重构的代码。我按仓库描述「分享黑科技,期待爱生活的你」从零搭建了一个完整的 AIGC 工具发现 / 分享站点,把重点放在你强调的 UI/UX 美化 与 代码健壮性 上。
技术栈:Next.js 16 (App Router · Turbopack) · TypeScript 5 strict · Tailwind CSS v4 · 自建轻量设计系统。
设计系统 & UI
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)、Card、Input(带 leading/trailing icon、focus ring)、IconButton(强制aria-label)、自建GithubIcon(lucide-react v1 移除了品牌图标)。prefers-reduced-motion、text-balance、自定义滚动条样式、@keyframes fadeInUp / float / shimmer。工具浏览器
useDeferredValue+ 多关键词 AND 匹配(命中名称 / 标语 / 描述 / 标签 / id)。free / freemium / paid / open-source)、排序(精选优先 / 名称 / 分类)多维筛选。storage事件),缓存快照避免useSyncExternalStore循环。hostname显示。内容
featured/hot,所有数据as const强类型。src/data/tools.ts加一行即可贡献新工具,README 给出了模板。健壮性
noUncheckedIndexedAccess之外的全部 strict),ESLint 全通过。app/error.tsx错误边界 +app/not-found.tsx。localStorage读写全部try/catch,解析时校验Array.isArray与typeof === "string"。Metadata+Viewport(含 light/darkthemeColor、OG、Twitter card、中文 locale)。构建 / 校验
pnpm lint✅pnpm build✅(Turbopack 静态生成/与/_not-found)Review & Testing Checklist for Human
风险等级:🟡 (新建项目,大量新代码 + 一些 lucide-react v1 适配)
src/data/tools.ts即可Notes
next-env.d.ts等生成产物加入.gitignore。AGENTS.md/CLAUDE.md是 create-next-app 16 自动生成的 agent 指引文件,建议保留。Link to Devin session: https://app.devin.ai/sessions/fae260d3440c478fad0c325eeb150834
Requested by: @wintopic