UI 与前端设计提示词库

使用 Next.js 和 Tailwind 构建三个可复用的营销页面区块。首屏：使用 'py-24 lg:py-32'，标题用 'text-5xl lg:text-6xl font-bold tracking-tight text-balance'，说明文字用 'mt-6 text-lg text-zinc-600 max-w-2xl mx-auto'；放置两个行动按钮，主要按钮用 bg-zinc-900 text-white，次要按钮用 ring-1 ring-zinc-300。品牌标识区：使用 'grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-8 items-center'，标识默认灰度，悬停时恢复颜色。功能便当网格：使用 'grid lg:grid-cols-3 gap-4'，首张卡片跨 lg:col-span-2，每张卡片用 'rounded-2xl bg-zinc-50 p-8 ring-1 ring-zinc-200'。所有区块用 dark: 变体支持暗色模式；标题在两种主题下都要保持至少 4.5:1 的对比度。

使用 React、TypeScript、Tailwind CSS 和 Recharts，为增长负责人构建响应式订阅分析仪表盘。优先展示 MRR、流失率、试用转化率和活跃账户。桌面端使用可折叠侧边栏与 12 列内容网格，移动端改为顶部栏并纵向排列 KPI 卡片。加入日期范围、对比周期、加载骨架、空状态、API 错误状态、清晰的键盘焦点；每种状态色都要配文字标签，并提供能读取图表数值的数据表。输出页面组件、带类型的示例数据和简短验收清单。

用 React 和 Tailwind CSS v4 为 SaaS 账户管理员 构建响应式暗色 账户设置页。页面背景用 #09090b，卡片用 #131316，抬升表面用 #1a1a20；主文字从 #fafafa、次要文字从 #a1a1aa 开始，并逐一检查与实际背景的对比度。普通文字至少 4.5:1，大号文字至少 3:1。补齐悬停、焦点、禁用、加载、空内容和错误状态，支持键盘操作、减少动态效果以及浅色/暗色/跟随系统三种主题偏好。用 CSS 设计 tokens 和 @custom-variant 实现手动暗色模式。输出组件、主题 CSS 与验证清单；未经测试不要声称满足全部无障碍标准。