我来帮你重新设计 EasyKOL 的三个核心页面。这是一个红人发现 SaaS 工具,我会打造一个更专业、更有设计感的界面,提高注册和付费转化率。
图片描述: 当前 EasyKOL 登录页面左侧是蓝色渐变背景,展示品牌 logo、slogan"寻找博主与邮箱 每天连接 1000 位博主"、四个核心功能点(博主画像受众分析、AI 智能搜索、邮箱解锁、竞品数据追踪)以及 X、Instagram、TikTok、YouTube、Threads、Twitch、LinkedIn 等社交平台图标;右侧是白色背景的登录/注册表单,包含 Google 登录和邮箱登录选项。整体设计较为基础,缺乏高端 SaaS 产品的精致感和专业感。
让我先生成设计方向,然后规划整体工作。
现在我有完整的上下文了。我将打造一个高端专业的 SaaS 设计系统——类似 Linear/Attio 的精致质感,配以温暖的奶油色背景、沉稳的深色文字、专业的蓝色主色,以及一点琥珀金色作为高端感点缀。字体使用 Inter(无衬线)和 Instrument Serif(衬线标题)形成对比,增加设计感。
先更新设计系统和根布局:
现在创建共享的导航和页脚组件,以及 logo 组件:
现在构建落地页的核心组件。我会打造一个展示产品真实 UI 预览的 Hero 区域:
现在组装落地页:
现在构建价格页。这是转化关键页面,我会打造一个 4 层定价结构,带月/年切换:
现在构建登录/注册页。我会打造一个分屏式的精致布局——左侧品牌展示面板带产品价值证明,右侧简洁的登录表单:
让我检查运行时是否有错误:
让我修正一个小问题并添加一些视觉细节:
我已经为 EasyKOL 完成了三个核心页面的全新设计:
设计策略:
三个页面:
/ — Hero 带真实的产品 UI 预览(搜索框+筛选+博主结果卡片+AI 匹配度环),7 平台覆盖展示,Bento 功能区(AI 搜索、邮箱解锁、批量外联、画像、竞品追踪),3 步工作流,深蓝数据条,6 条客户证言,终极 CTA。/pricing — 月/年切换(年付省 20%,带滑动动效),4 档价格卡(免费/入门/专业/企业),专业版高亮为"最受欢迎",完整的 4 板块功能对比表,8 条 FAQ,7 天退款保障。/login — 分屏布局:左侧品牌面板(slogan+功能点+7 平台 logo 矩阵+真实证言+三项数据),右侧极简表单(Google 一键登录+邮箱 magic link,支持已发送状态反馈)。响应式在移动端自动堆叠。所有页面完全响应式、符合无障碍规范、使用语义化设计 token,可以直接通过 /、/pricing、/login 访问预览效果。