Tailwind CSS 组件灵感网站推荐
图标库推荐:Lucide React(Shadcn 默认,2000+ 图标)、Heroicons(Tailwind 出品)、Phosphor Icons(多风格)、Tabler Icons(3500+)、Iconify(统一接口 100+ 图标集)、React Icons(聚合库)。推荐 Lucid...
图标库推荐:Lucide React(Shadcn 默认,2000+ 图标)、Heroicons(Tailwind 出品)、Phosphor Icons(多风格)、Tabler Icons(3500+)、Iconify(统一接口 100+ 图标集)、React Icons(聚合库)。推荐 Lucid...
SEO 内容写作模板:① 标题公式(关键词+价值主张+品牌)② description(120-160 字符)③ H1/H2/H3 结构 ④ 首段含关键词 ⑤ 内链 2-3 个 ⑥ 图片 alt 属性 ⑦ 结论+CTA。按模板写保证 SEO 基础达标。 免费 CDN:Cloudflare(最流行,...
免费设计资源:Figma 社区(UI Kit/模板)、Coolors(配色)、Google Fonts(字体)、Unsplash(图片)、Lottie Files(动画)、Framer Community(原型模板)。设计师和开发者都能用。 出海建站资源包:域名注册用 Namecheap/Pork...
Shadcn UI 定制主题:用 Shadcn CLI 生成主题,修改 CSS 变量(--primary、--background 等)。推荐工具:shadcn/registry(社区主题)、Shadcn Theme Generator、Realtime Colors。Tailwind v4 用 @...
Tailwind v4 迁移:① @tailwind 改为 @import 'tailwindcss' ② tailwind.config.ts 改为 CSS 内联 @theme ③ content 配置变化 ④ 插件语法变化 ⑤ 部分类名调整。用官方迁移工具 npx @tailwindcss/up...
Next.js 性能监控:① Vercel Analytics(官方)② Speed Insights ③ Web Vitals ④ Sentry Performance ⑤ Datadog RUM。免费方案用 Vercel Analytics + Web Vitals,生产环境加 Sentry。...
AI 编程 Prompt 速查手册:代码生成(描述需求+技术栈+约束)、Bug 修复(贴报错+代码+期望)、重构(贴代码+目标)、测试(贴代码+覆盖场景)、文档(贴代码+文档类型)。每个场景一个标准 Prompt 模板。 国际化翻译文件模板:分享一套 zh.json + en.json 模板,包含...
免费图片资源:Unsplash(高质量摄影)、Pexels(免费照片视频)、Pixabay(综合)、Open Peeps(手绘人物)、Undraw(插画,可改色)、Hero Patterns(几何图案)。都是 CC0 或免费商用,出海项目必备。 图标库推荐:Lucide React(Shadcn...
Server Action 代码模板:包含 Zod 校验、权限检查、事务处理、错误处理、revalidatePath、i18n 错误消息的标准模板。复制后替换业务逻辑即可,确保符合 Server Action 规范。 SaaS Boilerplate 横评:① ShipFast(Next.js +...
Vercel 优化清单:① 函数冷启动优化 ② Edge Runtime ③ ISR 缓存 ④ 图片优化 ⑤ 字体优化 ⑥ 代码分割 ⑦ 第三方脚本优化 ⑧ build 配置 ⑨ 环境变量管理 ⑩ 域名和 HTTPS。每项都有对应的 Vercel 功能支持。 出海域名选择:① .com 最通用 ②...
AI 编程 Prompt 模板库推荐:① awesome-cursorrules(GitHub 上的 .cursorrules 集合)② promptbase(Prompt 市场)③ langchain prompts ④ openai cookbook ⑤ Anthropic prompt lib...
Next.js 中间件模板:包含认证重定向、API 限流、i18n 路由处理的标准模板。middleware 只做认证和安全防护,禁止业务逻辑重定向。matcher 排除 /api、/_next、静态文件。 开源论坛/社区项目:① Discourse(Ruby,成熟)② Flarum(PHP,轻量...
免费中英文字体推荐:中文用 Noto Sans SC(Google Fonts)、霞鹜文楷(开源楷体)、思源黑体;英文用 Inter(最流行)、Geist(Vercel 出品)、JetBrains Mono(代码)。用 next/font 加载,自动优化和子集化。 Tailwind v4 迁移:①...
Next.js 全栈脚手架推荐:① create-next-app(官方)② next-boat ③ t3-stack ④ skateshop ⑤ next-saas-starter。按技术栈组合选择:T3 Stack(tRPC+Prisma+Tailwind)、Next-auth+Prisma 组...
Vibecoding 实战案例:记录了我用 Cursor 从一个 idea 到上线产品的全过程。① 用 AI 生成 landing page ② 搭建认证系统 ③ 实现核心功能 ④ 接入支付 ⑤ 部署上线。总共 3 天,AI 生成约 70% 代码,人工审查和调整 30%。 SEO 结构化数据模板:...
Next.js 中间件模板:包含认证重定向、API 限流、i18n 路由处理的标准模板。middleware 只做认证和安全防护,禁止业务逻辑重定向。matcher 排除 /api、/_next、静态文件。 Next.js 错误处理模板:包含 error.tsx(路由组错误边界)、global-e...
Next.js 错误处理模板:包含 error.tsx(路由组错误边界)、global-error.tsx(根错误)、not-found.tsx(404)、loading.tsx(加载状态)。错误消息走 i18n,catch 块用 logger.error,用户看到友好提示。 免费设计资源:Fig...
免费 CDN:Cloudflare(最流行,免费额度大)、jsDelivr(开源 CDN)、unpkg(npm CDN)。图床:Cloudflare R2(10GB 免费)、Vercel Blob、Supabase Storage。出海项目用 Cloudflare 一站式解决。 Vibecodin...
SEO 结构化数据模板:WebPage(基础页面)、Article(文章)、FAQPage(问答)、Product(产品)、BreadcrumbList(面包屑)、Organization(组织)。每个模板含必填字段和 JSON-LD script 标签写法。 Next.js 全栈脚手架推荐:①...
Cursor .cursorrules 模板按技术栈分类:Next.js 通用版、Next.js + Prisma 版、Next.js + Tailwind v4 版、Next.js + Auth.js 版、React Native 版、Python FastAPI 版。每个模板包含技术栈声明、编码...