根据您的考研APP设计方案，我将首先设计

By 15593915274, 24 June, 2025

推理

我们正在设计一个考研APP，包含四个主要标签页：主页、AI、发现、我的。每个标签页下有多个子模块。由于一次请求无法生成所有页面，我们将分步骤设计每个页面。首先，我们从主页开始设计。

主页包含：轮播图、热门课程、精选资料、院校推荐。

设计思路：
1. 轮播图：使用一个横向滚动的容器，内部包含多个图片项，每张图片占据整个屏幕宽度，并添加指示器。
2. 热门课程：展示多个课程卡片，每个卡片包含课程图片、标题、简介等信息。
3. 精选资料：类似热门课程，但内容为资料，可以设计成卡片列表。
4. 院校推荐：展示院校的卡片，包含院校图片、名称、简介等。

由于是移动端，我们使用flex或grid布局，确保在小屏幕上显示良好。

我们将为每个部分添加标题，并设计一个整体的滚动页面。

注意：底部tabbar我们将在后续步骤中设计，因为每个页面都需要，我们可以单独设计一个tabbar组件，但在这个任务中，我们先设计主页内容。

由于我们只生成静态HTML，所以交互功能（如轮播图的滑动）暂时用静态结构表示。

下面我们生成主页的HTML代码，使用Tailwind CSS。

由于图片需要，我们使用占位图，例如轮播图使用https://placehold.co/600x300（因为移动端宽度一般为全屏，高度可以设定为300px左右），课程图片使用https://placehold.co/600x600（然后按比例缩小）。

具体代码实现如下：

1. 整体结构：一个垂直排列的flex容器，每个部分之间用间距隔开。
2. 轮播图：使用overflow-x-auto实现横向滚动，内部每个轮播项宽度为100%，并设置flex-shrink:0防止挤压。
3. 热门课程、精选资料、院校推荐：使用网格布局（grid）或flex-wrap实现多列（这里我们使用grid，因为更简单），每行两个项目。

注意：由于是移动端，我们使用px-4等设置左右内边距，使内容不紧贴屏幕边缘。

由于需求中要求不能使用响应式断点前缀，所以我们只使用移动端样式。

开始编写代码：

角色

assistant

content

根据您的考研APP设计方案，我将首先设计主页的UI界面。主页包含轮播图、热门课程、精选资料和院校推荐四个核心模块。

```json
{
"summary": "已设计考研APP主页界面，包含轮播图、热门课程、精选资料和院校推荐四个核心模块，采用现代化卡片式设计，确保移动端用户体验流畅。",
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": true,
"html": "<div class=\"bg-gray-50 min-h-screen pb-20\">\n \n <div class=\"bg-white shadow-sm py-4 px-4 sticky top-0 z-10\">\n <div class=\"flex items-center justify-between\">\n <h1 class=\"text-xl font-bold text-blue-600\">考研通</h1>\n <div class=\"flex space-x-4\">\n <button class=\"p-2\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5 text-gray-600\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\n </svg>\n </button>\n <button class=\"p-2\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5 text-gray-600\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n \n <div class=\"relative mx-4 mt-4 rounded-xl overflow-hidden h-48\">\n <div class=\"absolute inset-0 bg-gradient-to-r from-blue-500 to-indigo-600 flex items-center justify-center\">\n <div class=\"text-white text-center px-4\">\n <h2 class=\"text-xl font-bold mb-2\">2024考研冲刺班</h2>\n <p class=\"text-sm\">名师指导，高效备考</p>\n </div>\n </div>\n <div class=\"absolute bottom-4 left-0 right-0 flex justify-center space-x-2\">\n <div class=\"w-2 h-2 bg-white rounded-full\"></div>\n <div class=\"w-2 h-2 bg-white bg-opacity-50 rounded-full\"></div>\n <div class=\"w-2 h-2 bg-white bg-opacity-50 rounded-full\"></div>\n </div>\n </div>\n\n \n <div class=\"grid grid-cols-4 gap-2 px-4 mt-6\">\n <div class=\"flex flex-col items-center\">\n <div class=\"bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6 text-blue-600\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253\" />\n </svg>\n </div>\n <span class=\"text-xs mt-2\">课程</span>\n </div>\n <div class=\"flex flex-col items-center\">\n <div class=\"bg-green-100 w-12 h-12 rounded-full flex items-center justify-center\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6 text-green-600\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" />\n </svg>\n </div>\n <span class=\"text-xs mt-2\">资料</span>\n </div>\n <div class=\"flex flex-col items-center\">\n <div class=\"bg-purple-100 w-12 h-12 rounded-full flex items-center justify-center\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6 text-purple-600\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path d=\"M12 14l9-5-9-5-9 5 9 5z\" />\n <path d=\"M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z\" />\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222\" />\n </svg>\n </div>\n <span class=\"text-xs mt-2\">院校</span>\n </div>\n <div class=\"flex flex-col items-center\">\n <div class=\"bg-yellow-100 w-12 h-12 rounded-full flex items-center justify-center\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6 text-yellow-600\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\" />\n </svg>\n </div>\n <span class=\"text-xs mt-2\">题库</span>\n </div>\n </div>\n\n \n <div class=\"mt-8 px-4\">\n <div class=\"flex items-center justify-between mb-4\">\n <h2 class=\"text-lg font-bold\">热门课程</h2>\n <a href=\"#\" class=\"text-sm text-blue-500\">查看更多</a>\n </div>\n <div class=\"grid grid-cols-2 gap-4\">\n <div class=\"bg-white rounded-xl shadow-sm overflow-hidden\">\n <div class=\"h-32 bg-gradient-to-r from-blue-400 to-indigo-500 relative\">\n <div class=\"absolute top-2 right-2 bg-white bg-opacity-90 rounded-full px-2 py-1\">\n <span class=\"text-xs font-medium text-blue-600\">直播课</span>\n </div>\n </div>\n <div class=\"p-3\">\n <h3 class=\"font-medium text-gray-900 line-clamp-1\">考研政治冲刺班</h3>\n <div class=\"flex items-center mt-1\">\n <span class=\"text-sm text-yellow-500 mr-1\">★</span>\n <span class=\"text-xs text-gray-500\">4.9 (1289人)</span>\n </div>\n <div class=\"flex justify-between items-center mt-2\">\n <span class=\"text-red-500 font-medium\">¥299</span>\n <span class=\"text-xs text-gray-400 line-through\">¥499</span>\n </div>\n </div>\n </div>\n <div class=\"bg-white rounded-xl shadow-sm overflow-hidden\">\n <div class=\"h-32 bg-gradient-to-r from-green-400 to-teal-500 relative\">\n <div class=\"absolute top-2 right-2 bg-white bg-opacity-90 rounded-full px-2 py-1\">\n <span class=\"text-xs font-medium text-green-600\">录播课</span>\n </div>\n </div>\n <div class=\"p-3\">\n <h3 class=\"font-medium text-gray-900 line-clamp-1\">英语阅读高分突破</h3>\n <div class=\"flex items-center mt-1\">\n <span class=\"text-sm text-yellow-500 mr-1\">★</span>\n <span class=\"text-xs text-gray-500\">4.8 (986人)</span>\n </div>\n <div class=\"flex justify-between items-center mt-2\">\n <span class=\"text-red-500 font-medium\">¥199</span>\n <span class=\"text-xs text-gray-400 line-through\">¥399</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n \n <div class=\"mt-8 px-4\">\n <div class=\"flex items-center justify-between mb-4\">\n <h2 class=\"text-lg font-bold\">精选资料</h2>\n <a href=\"#\" class=\"text-sm text-blue-500\">查看更多</a>\n </div>\n <div class=\"space-y-4\">\n <div class=\"bg-white rounded-xl shadow-sm p-4 flex\">\n <div class=\"bg-blue-100 rounded-lg w-16 h-16 flex items-center justify-center mr-3\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-8 w-8 text-blue-600\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" />\n </svg>\n </div>\n <div class=\"flex-1\">\n <h3 class=\"font-medium text-gray-900\">考研数学公式大全</h3>\n <div class=\"flex items-center mt-1\">\n <span class=\"text-xs text-gray-500\">PDF · 128页</span>\n <span class=\"text-xs text-blue-500 ml-2\">免费</span>\n </div>\n </div>\n </div>\n <div class=\"bg-white rounded-xl shadow-sm p-4 flex\">\n <div class=\"bg-green-100 rounded-lg w-16 h-16 flex items-center justify-center mr-3\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-8 w-8 text-green-600\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" />\n </svg>\n </div>\n <div class=\"flex-1\">\n <h3 class=\"font-medium text-gray-900\">英语高频词汇手册</h3>\n <div class=\"flex items-center mt-1\">\n <span class=\"text-xs text-gray-500\">PDF · 86页</span>\n <span class=\"text-xs text-gray-500 ml-2\">¥15</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n \n <div class=\"mt-8 px-4\">\n <div class=\"flex items-center justify-between mb-4\">\n <h2 class=\"text-lg font-bold\">院校推荐</h2>\n <a href=\"#\" class=\"text-sm text-blue-500\">查看更多</a>\n </div>\n <div class=\"space-y-4\">\n <div class=\"bg-white rounded-xl shadow-sm overflow-hidden\">\n <div class=\"h-40 bg-gradient-to-r from-purple-500 to-indigo-700 relative\">\n <div class=\"absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-3\">\n <h3 class=\"font-bold text-lg\">北京大学</h3>\n <div class=\"flex items-center mt-1\">\n <span class=\"text-xs\">985/211 · 北京</span>\n </div>\n </div>\n </div>\n <div class=\"p-3\">\n <div class=\"flex justify-between text-sm\">\n <span>竞争指数：<span class=\"font-medium\">9.8</span></span>\n <span>分数线：<span class=\"font-medium\">385</span></span>\n </div>\n </div>\n </div>\n <div class=\"bg-white rounded-xl shadow-sm overflow-hidden\">\n <div class=\"h-40 bg-gradient-to-r from-red-500 to-orange-500 relative\">\n <div class=\"absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-3\">\n <h3 class=\"font-bold text-lg\">复旦大学</h3>\n <div class=\"flex items-center mt-1\">\n <span class=\"text-xs\">985/211 · 上海</span>\n </div>\n </div>\n </div>\n <div class=\"p-3\">\n <div class=\"flex justify-between text-sm\">\n <span>竞争指数：<span class=\"

total_tokens

10337