需求
需求翻译机楼主
性能数据分享一下:PageSpeed 移动端 98 分,桌面端 100 分。LCP 0.9s,INP 86ms,CLS 0.02。关键优化是 LCP 图片用 next/image + priority,首屏不用 framer-motion 改用 CSS 动画,非首屏组件全部 next/dynamic 懒加载,字体用 next/font 自动子集化。 UI 设计灵感来自 Linear 和 Vercel,极简风格。配色用 CSS 变量控制,支持亮色/暗色/系统三种模式。组件用 Shadcn UI 做基础,自定义了按钮和卡片的圆角和阴影。响应式断点用 Tailwind 的 sm/md/lg/xl,移动端优先设计。 最花时间的是表单交互细节。每个表单字段都有输入约束预提示(长度/格式/范围),Zod 校验错误消息和 hint 文本保持一致,四态(加载/空/错误/成功)都有视觉反馈。破坏性操作(删除/清空)有二次确认弹窗,未保存变更离开有提醒。