```json{"summary":"生成SkillForge在线学习平台首页，含11个功能区块与交互","widget":{"type":"full-html","html":"<!DOCTYPE html><html lang='zh-CN'><head><meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1.0'><title>SkillForge - 在线学习平台</title><script src='https://cdn.tailwindcss.com'></script><link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&fam… rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.c…{--color-primary:#2A6DF4;--color-secondary:#7C3AED;--color-accent:#F59E0B;--color-success:#10B981;--color-warning:#F97316;--color-danger:#EF4444;--color-info:#3B82F6;--color-background:#F8FAFC;--color-foreground:#0F172A;--color-card:#FFFFFF;--color-border:#E2E8F0;--color-muted:#94A3B8;--state-hover:#1D4ED8;--state-active:#1E40AF;--state-focus:#3B82F6;--state-disabled:#CBD5E1;--shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);--shadow-md:0 4px 12px rgba(0,0,0,.08);--shadow-lg:0 8px 24px rgba(0,0,0,.10);--shadow-xl:0 16px 48px rgba(0,0,0,.12);--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-2xl:24px;--radius-full:9999px;--transition-fast:150ms ease-out;--transition-base:250ms ease-out;--transition-slow:400ms cubic-bezier(0.4,0,0.2,1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--color-background);color:var(--color-foreground);line-height:1.6}h1,h2,h3,h4,h5,h6{font-family:'Plus Jakarta Sans','Segoe UI',sans-serif}.container{max-width:1280px;margin:0 auto;padding:0 1.5rem}.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.625rem 1.25rem;border-radius:var(--radius-lg);font-weight:600;font-size:0.875rem;line-height:1;letter-spacing:0.01em;background:var(--color-primary);color:#fff;border:none;cursor:pointer;transition:background var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast);min-height:44px;min-width:44px}.btn-primary:hover{background:var(--state-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-primary:active{background:var(--state-active);transform:translateY(0);box-shadow:var(--shadow-sm)}.btn-primary:focus-visible{outline:2px solid var(--state-focus);outline-offset:2px}.btn-primary:disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.625rem 1.25rem;border-radius:var(--radius-lg);font-weight:600;font-size:0.875rem;line-height:1;letter-spacing:0.01em;background:transparent;color:var(--color-primary);border:1.5px solid var(--color-primary);cursor:pointer;transition:background var(--transition-fast);min-height:44px;min-width:44px}.btn-secondary:hover{background:rgba(42,109,244,0.05)}.btn-secondary:active{background:rgba(42,109,244,0.1)}.btn-secondary:focus-visible{outline:2px solid var(--state-focus);outline-offset:2px}.btn-secondary:disabled{opacity:0.5;cursor:not-allowed}.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.625rem 1.25rem;border-radius:var(--radius-lg);font-weight:500;font-size:0.875rem;line-height:1;background:transparent;color:var(--color-foreground);border:none;cursor:pointer;transition:background var(--transition-fast);min-height:44px;min-width:44px}.btn-ghost:hover{background:rgba(148,163,184,0.1)}.btn-ghost:active{background:rgba(148,163,184,0.2)}.btn-ghost:focus-visible{outline:2px solid var(--state-focus);outline-offset:2px}.btn-ghost:disabled{opacity:0.5;cursor:not-allowed}.card-hover{background:var(--color-card);box-shadow:var(--shadow-sm);border-radius:var(--radius-xl);padding:1.25rem;border:1px solid var(--color-border);transition:box-shadow var(--transition-base),transform var(--transition-base),border-color var(--transition-base)}.card-hover:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);border-color:rgba(42,109,244,0.2)}.nav-scrolled{background:rgba(255,255,255,0.9);backdrop-filter:blur(12px);box-shadow:var(--shadow-sm)}.input-field{background:var(--color-background);color:var(--color-foreground);border:1.5px solid var(--color-border);border-radius:var(--radius-lg);padding:0.625rem 1rem;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);min-height:44px}.input-field:hover{border-color:var(--color-muted)}.input-field:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(42,109,244,0.15);outline:none}.input-field.error{border-color:var(--color-danger);box-shadow:0 0 0 3px rgba(239,68,68,0.15)}.input-field:disabled{opacity:0.5;cursor:not-allowed}.progress-glow{background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-success) 100%)}.hero-glow{background:linear-gradient(135deg,#2A6DF4 0%,#7C3AED 100%)}.card-accent-gradient{background:linear-gradient(135deg,#2A6DF4 0%,#3B82F6 100%)}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.reveal{opacity:0;transform:translateY(20px);transition:opacity 0.6s ease-out,transform 0.6s ease-out}.reveal.visible{opacity:1;transform:translateY(0)}.counter{display:inline-block}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:var(--color-muted);border-radius:3px}.rank-gold{color:#D4AF37}.rank-silver{color:#C0C0C0}.rank-bronze{color:#CD7F32}.streak-dot{width:8px;height:8px;background:var(--color-primary);border-radius:50%;display:inline-block;margin:0 auto}.streak-line::after{content:'';position:absolute;top:50%;left:50%;width:100%;height:2px;background:var(--color-primary);transform:translateY(-50%);z-index:-1}@media (max-width:640px){.hide-on-mobile{display:none!important}.desktop-only{display:none!important}}@media (min-width:641px){.mobile-only{display:none!important}}</style></head><body><nav id='nav' class='fixed top-0 left-0 w-full z-50 bg-white/90 backdrop-blur-md border-b border-gray-200' style='height:4rem'><div class='container flex items-center justify-between h-full'><div class='flex items-center gap-6'><a href='#' class='text-xl font-bold font-heading' style=\"font-family:'Plus Jakarta Sans',sans-serif;color:var(--color-primary)\">SkillForge</a><div class='hidden md:flex items-center gap-6'><a href='#' class='text-sm font-medium text-gray-700 hover:text-primary transition-colors'>首页</a><a href='#' class='text-sm font-medium text-gray-700 hover:text-primary transition-colors'>课程</a><a href='#' class='text-sm font-medium text-gray-700 hover:text-primary transition-colors'>学习计划</a><a href='#' class='text-sm font-medium text-gray-700 hover:text-primary transition-colors'>社区</a></div></div><div class='flex items-center gap-4'><div class='relative search-wrapper'><input type='text' placeholder='搜索课程、技能或讲师...' class='input-field w-48 md:w-64 search-input' id='searchInput'><button class='absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-primary'><i class='fas fa-search'></i></button></div><button class='relative btn-ghost p-2 rounded-full'><i class='fas fa-bell text-lg'></i><span class='absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white text-xs rounded-full flex items-center justify-center'>3</span></button><div class='w-10 h-10 bg-primary rounded-full flex items-center justify-center text-white font-bold cursor-pointer'>张</div><button id='mobileMenuBtn' class='md:hidden btn-ghost p-2'><i class='fas fa-bars text-lg'></i></button></div></div><div id='mobileMenu' class='md:hidden fixed top-16 left-0 w-full bg-white shadow-lg p-4 space-y-4 hidden'><a href='#' class='block text-sm font-medium text-gray-700'>首页</a><a href='#' class='block text-sm font-medium text-gray-700'>课程</a><a href='#' class='block text-sm font-medium text-gray-700'>学习计划</a><a href='#' class='block text-sm font-medium text-gray-700'>社区</a></div></nav><main class='pt-20'><section id='hero-welcome' class='container py-12 md:py-16'><div class='hero-glow rounded-2xl p-6 md:p-10 text-white relative overflow-hidden'><div class='relative z-10'><div class='flex flex-col md:flex-row justify-between items-start md:items-center gap-4'><div><h1 class='text-3xl md:text-4xl font-bold font-heading mb-2' style=\"font-family:'Plus Jakarta Sans',sans-serif\">早上好，继续你的学习之旅</h1><p class='text-white/80 text-base'>今天的目标是完成「React 高级模式」模块</p></div><div class='flex items-center gap-3'><div class='bg-white/20 rounded-full px-4 py-2 text-sm flex items-center gap-2'><i class='fas fa-fire' style='color:#F59E0B'></i><span>连续学习 <strong>12 天</strong></span></div></div></div><div class='grid grid-cols-1 md:grid-cols-3 gap-4 mt-8'><div class='bg-white/15 rounded-xl p-4 backdrop-blur-sm'><div class='text-sm opacity-80'>今日进度</div><div class='flex items-center gap-3 mt-2'><div class='flex-1 h-2 bg-white/30 rounded-full overflow-hidden'><div class='h-full progress-glow rounded-full' style='width:65%'></div></div><span class='font-bold'>65%</span></div></div><div class='bg-white/15 rounded-xl p-4 backdrop-blur-sm'><div class='text-sm opacity-80'>累计学习</div><div class='text-2xl font-bold mt-2'><span class='counter' data-target='128'>0</span> 小时</div></div><div class='bg-white/15 rounded-xl p-4 backdrop-blur-sm'><button class='btn-primary w-full mt-2 bg-white text-primary hover:bg-gray-100'>继续学习</button></div></div></div><div class='absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full -translate-y-1/2 translate-x-1/2'></div><div class='absolute bottom-0 left-0 w-48 h-48 bg-white/5 rounded-full translate-y-1/2 -translate-x-1/2'></div></div></section><section id='course-categories' class='container py-8'><h2 class='text-2xl font-bold font-heading mb-6'>课程分类</h2><div class='flex flex-wrap gap-3' id='categoryTabs'><button class='category-chip active px-4 py-2 rounded-lg text-sm font-medium bg-primary text-white transition-colors' data-category='all'>全部 <span class='ml-1 opacity-70'>42</span></button><button class='category-chip px-4 py-2 rounded-lg text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors' data-category='frontend'><i class='fas fa-code mr-1'></i>前端开发 <span class='ml-1 opacity-70'>12</span></button><button class='category-chip px-4 py-2 rounded-lg text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors' data-category='backend'><i class='fas fa-server mr-1'></i>后端开发 <span class='ml-1 opacity-70'>8</span></button><button class='category-chip px-4 py-2 rounded-lg text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors' data-category='data'><i class='fas fa-chart-line mr-1'></i>数据科学 <span class='ml-1 opacity-70'>6</span></button><button class='category-chip px-4 py-2 rounded-lg text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors' data-category='design'><i class='fas fa-palette mr-1'></i>UI/UX 设计 <span class='ml-1 opacity-70'>5</span></button><button class='category-chip px-4 py-2 rounded-lg text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors' data-category='mobile'><i class='fas fa-mobile-alt mr-1'></i>移动开发 <span class='ml-1 opacity-70'>4</span></button><button class='category-chip px-4 py-2 rounded-lg text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors' data-category='devops'><i class='fas fa-cloud mr-1'></i>DevOps <span class='ml-1 opacity-70'>3</span></button><button class='category-chip px-4 py-2 rounded-lg text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors' data-category='ai'><i class='fas fa-brain mr-1'></i>AI 与机器学习 <span class='ml-1 opacity-70'>4</span></button></div></section><section id='continue-learning' class='container py-8'><h2 class='text-2xl font-bold font-heading mb-6'>继续学习</h2><div class='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'><div class='card-hover relative overflow-hidden reveal'><div class='absolute left-0 top-0 w-1.5 h-full card-accent-gradient'></div><div class='pl-4'><h3 class='font-semibold text-lg'>React 高级模式与性能优化</h3><p class='text-sm text-gray-500 mt-1'>李明</p><div class='flex items-center gap-2 mt-3'><div class='flex-1 h-2 bg-gray-200 rounded-full overflow-hidden'><div class='h-full progress-glow rounded-full' style='width:68%'></div></div><span class='text-sm font-medium'>68%</span></div><div class='flex justify-between text-xs text-gray-400 mt-1'><span>14/22 课时</span><span>剩余约 3.5 小时</span></div><button class='btn-primary mt-4 w-full text-sm'>继续学习</button></div></div><div class='card-hover relative overflow-hidden reveal'><div class='absolute left-0 top-0 w-1.5 h-full card-accent-gradient'></div><div class='pl-4'><h3 class='font-semibold text-lg'>TypeScript 4.x 完全指南</h3><p class='text-sm text-gray-500 mt-1'>王雪</p><div class='flex items-center gap-2 mt-3'><div class='flex-1 h-2 bg-gray-200 rounded-full overflow-hidden'><div class='h-full progress-glow rounded-full' style='width:42%'></div></div><span class='text-sm font-medium'>42%</span></div><div class='flex justify-between text-xs text-gray-400 mt-1'><span>8/19 课时</span><span>剩余约 5 小时</span></div><button class='btn-primary mt-4 w-full text-sm'>继续学习</button></div></div><div class='card-hover relative overflow-hidden reveal'><div class='absolute left-0 top-0 w-1.5 h-full card-accent-gradient'></div><div class='pl-4'><h3 class='font-semibold text-lg'>Node.js 微服务架构</h3><p class='text-sm text-gray-500 mt-1'>张峰</p><div class='flex items-center gap-2 mt-3'><div class='flex-1 h-2 bg-gray-200 rounded-full overflow-hidden'><div class='h-full progress-glow rounded-full' style='width:25%'></div></div><span class='text-sm font-medium'>25%</span></div><div class='flex justify-between text-xs text-gray-400 mt-1'><span>5/20 课时</span><span>剩余约 8 小时</span></div><button class='btn-primary mt-4 w-full text-sm'>继续学习</button></div></div></div></section><section id='learning-progress' class='container py-8'><h2 class='text-2xl font-bold font-heading mb-6'>本周学习概览</h2><div class='grid grid-cols-2 md:grid-cols-4 gap-4'><div class='card-hover flex flex-col items-center text-center reveal'><i class='fas fa-clock text-2xl text-primary mb-2'></i><div class='text-2xl font-bold counter' data-target='18.5'>0</div><div class='text-sm text-gray-500'>学习时长 (小时)</div></div><div class='card-hover flex flex-col items-center text-center reveal'><i class='fas fa-check-circle text-2xl' style='color:#10B981'></i><div class='text-2xl font-bold counter' data-target='7'>0</div><div class='text-sm text-gray-500'>完成课时</div></div><div class='card-hover flex flex-col items-center text-center reveal'><i class='fas fa-bullseye text-2xl' style='color:#F59E0B'></i><div class='text-2xl font-bold counter' data-target='92'>0<span>%</span></div><div class='text-sm text-gray-500'>课程完成率</div></div><div class='card-hover flex flex-col items-center text-center reveal'><i class='fas fa-award text-2xl' style='color:#7C3AED'></i><div class='text-2xl font-bold counter' data-target='3'>0</div><div class='text-sm text-gray-500'>获得证书</div></div></div><div class='mt-6 card-hover p-4 reveal'><h3 class='font-semibold mb-4'>每日学习时长 (小时)</h3><div class='flex items-end justify-between gap-2' style='height:120px'><div class='flex-1 flex flex-col items-center'><div class='w-full bg-primary rounded-t-md' style='height:40px' title='周一: 2.5h'></div><span class='text-xs mt-1'>周一</span></div><div class='flex-1 flex flex-col items-center'><div class='w-full bg-primary rounded-t-md' style='height:48px' title='周二: 3h'></div><span class='text-xs mt-1'>周二</span></div><div class='flex-1 flex flex-col items-center'><div class='w-full bg-primary rounded-t-md' style='height:24px' title='周三: 1.5h'></div><span class='text-xs mt-1'>周三</span></div><div class='flex-1 flex flex-col items-center'><div class='w-full bg-primary rounded-t-md' style='height:64px' title='周四: 4h'></div><span class='text-xs mt-1'>周四</span></div><div class='flex-1 flex flex-col items-center'><div class='w-full bg-primary rounded-t-md' style='height:32px' title='周五: 2h'></div><span class='text-xs mt-1'>周五</span></div><div class='flex-1 flex flex-col items-center'><div class='w-full bg-primary rounded-t-md' style='height:56px' title='周六: 3.5h'></div><span class='text-xs mt-1'>周六</span></div><div class='flex-1 flex flex-col items-center'><div class='w-full bg-primary rounded-t-md' style='height:32px' title='周日: 2h'></div><span class='text-xs mt-1'>周日</span></div></div></div></section><section id='recommended-courses' class='container py-8'><div class='flex items-center justify-between mb-6'><h2 class='text-2xl font-bold font-heading'>为你推荐</h2><div class='flex gap-2' id='recommendationTabs'><button class='rec-tab active px-3 py-1 rounded-lg text-sm font-medium bg-primary text-white transition-colors' data-filter='all'>全部推荐</button><button class='rec-tab px-3 py-1 rounded-lg text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors' data-filter='popular'>热门</button><button class='rec-tab px-3 py-1 rounded-lg text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors' data-filter='new'>最新</button><button class='rec-tab px-3 py-1 rounded-lg text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors' data-filter='trending'>趋势</button></div></div><div class='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6' id='courseGrid'><div class='card-hover course-card reveal' data-tags='popular'><div class='w-full h-32 bg-gradient-to-br from-blue-400 to-purple-400 rounded-lg mb-3'></div><h3 class='font-semibold'>Vue 3 组合式 API 实战</h3><p class='text-sm text-gray-500'>陈思</p><div class='flex items-center gap-2 mt-2'><span style='color:#F59E0B'><i class='fas fa-star'></i> 4.8</span><span class='text-xs text-gray-400'>2,340 人报名</span></div><div class='flex justify-between items-center mt-3'><span class='text-xs bg-gray-100 px-2 py-1 rounded'>中级 · 16 小时</span><span class='text-xs bg-red-100 text-red-600 px-2 py-1 rounded'>热门</span></div></div><div class='card-hover course-card reveal' data-tags='trending'><div class='w-full h-32 bg-gradient-to-br from-green-400 to-teal-400 rounded-lg mb-3'></div><h3 class='font-semibold'>Python 数据分析与可视化</h3><p class='text-sm text-gray-500'>刘洋</p><div class='flex items-center gap-2 mt-2'><span style='color:#F59E0B'><i class='fas fa-star'></i> 4.9</span><span class='text-xs text-gray-400'>4,120 人报名</span></div><div class='flex justify-between items-center mt-3'><span class='text-xs bg-gray-100 px-2 py-1 rounded'>初级 · 20 小时</span><span class='text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded'>推荐</span></div></div><div class='card-hover course-card reveal' data-tags='new'><div class='w-full h-32 bg-gradient-to-br from-purple-400 to-pink-400 rounded-lg mb-3'></div><h3 class='font-semibold'>Kubernetes 从入门到生产</h3><p class='text-sm text-gray-500'>赵刚</p><div class='flex items-center gap-2 mt-2'><span style='color:#F59E0B'><i class='fas fa-star'></i> 4.7</span><span class='text-xs text-gray-400'>1,890 人报名</span></div><div class='flex justify-between items-center mt-3'><span class='text-xs bg-gray-100 px-2 py-1 rounded'>高级 · 24 小时</span><span class='text-xs bg-green-100 text-green-600 px-2 py-1 rounded'>新课</span></div></div><div class='card-hover course-card reveal' data-tags='popular'><div class='w-full h-32 bg-gradient-to-br from-orange-400 to-red-400 rounded-lg mb-3'></div><h3 class='font-semibold'>Figma 设计系统搭建</h3><p class='text-sm text-gray-500'>林悦</p><div class='flex items-center gap-2 mt-2'><span style='color:#F59E0B'><i class='fas fa-star'></i> 4.6</span><span class='text-xs text-gray-400'>3,560 人报名</span></div><div class='flex justify-between items-center mt-3'><span class='text-xs bg-gray-100 px-2 py-1 rounded'>中级 · 12 小时</span><span class='text-xs bg-red-100 text-red-600 px-2 py-1 rounded'>热门</span></div></div></div></section><section id='leaderboard' class='container py-8'><div class='flex items-center justify-between mb-6'><h2 class='text-2xl font-bold font-heading'>学习排行榜</h2><div class='flex gap-2' id='leaderboardTabs'><button class='lb-tab active px-3 py-1 rounded-lg text-sm font-medium bg-primary text-white transition-colors' data-period='weekly'>本周</button><button class='lb-tab px-3 py-1 rounded-lg text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors' data-period='monthly'>本月</button><button class='lb-tab px-3 py-1 rounded-lg text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors' data-period='alltime'>总榜</button></div></div><div class='space-y-3' id='leaderboardList'><div class='card-hover flex items-center gap-4 reveal'><div class='w-10 h-10 rounded-full bg-yellow-200 flex items-center justify-center font-bold rank-gold'>1</div><div class='flex-1'><div class='font-semibold'>周子涵</div><div class='text-xs text-gray-500'>3 门课程</div></div><div class='text-right'><div class='font-bold'>24.5 小时</div><span class='text-xs' style='color:#D4AF37'><i class='fas fa-medal mr-1'></i>金牌</span></div></div><div class='card-hover flex items-center gap-4 reveal'><div class='w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center font-bold rank-silver'>2</div><div class='flex-1'><div class='font-semibold'>王子轩</div><div class='text-xs text-gray-500'>2 门课程</div></div><div class='text-right'><div class='font-bold'>21.2 小时</div><span class='text-xs text-gray-500'><i class='fas fa-medal mr-1'></i>银牌</span></div></div><div class='card-hover flex items-center gap-4 reveal'><div class='w-10 h-10 rounded-full bg-orange-200 flex items-center justify-center font-bold rank-bronze'>3</div><div class='flex-1'><div class='font-semibold'>李思琪</div><div class='text-xs text-gray-500'>4 门课程</div></div><div class='text-right'><div class='font-bold'>19.8 小时</div><span class='text-xs' style='color:#CD7F32'><i class='fas fa-medal mr-1'></i>铜牌</span></div></div><div class='card-hover flex items-center gap-4 reveal'><div class='w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center font-bold'>4</div><div class='flex-1'><div class='font-semibold'>张明远</div><div class='text-xs text-gray-500'>2 门课程</div></div><div class='text-right'><div class='font-bold'>17.3 小时</div></div></div><div class='card-hover flex items-center gap-4 reveal'><div class='w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center font-bold'>5</div><div class='flex-1'><div class='font-semibold'>陈雨桐</div><div class='text-xs text-gray-500'>3 门课程</div></div><div class='text-right'><div class='font-bold'>15.6 小时</div></div></div><div class='card-hover flex items-center gap-4 bg-blue-50 border-primary/20 reveal'><div class='w-10 h-10 rounded-full bg-blue-200 flex items-center justify-center font-bold text-primary'>8</div><div class='flex-1'><div class='font-semibold'>你</div><div class='text-xs text-gray-500'>距第 5 名差 3.2 小时</div></div><div class='text-right'><div class='font-bold'>12.4 小时</div></div></div></div></section><section id='learning-calendar' class='container py-8'><div class='flex items-center justify-between mb-6'><h2 class='text-2xl font-bold font-heading'>学习日历</h2><div class='flex items-center gap-4'><button id='prevMonth' class='btn-ghost p-2'><i class='fas fa-chevron-left'></i></button><span id='monthLabel' class='font-semibold'>2026 年 7 月</span><button id='nextMonth' class='btn-ghost p-2'><i class='fas fa-chevron-right'></i></button></div></div><div class='grid grid-cols-1 md:grid-cols-3 gap-6'><div class='md:col-span-2'><div class='card-hover p-4'><div class='grid grid-cols-7 gap-1 text-center text-sm font-medium mb-2'><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span><span>日</span></div><div id='calendarGrid' class='grid grid-cols-7 gap-1 text-center'></div></div></div><div><div class='card-hover p-4 space-y-4'><div><div class='text-sm text-gray-500'>当前连续</div><div class='text-2xl font-bold text-primary'>12 天</div></div><div><div class='text-sm text-gray-500'>最长记录</div><div class='text-2xl font-bold'>21 天</div></div><div><h4 class='font-semibold mb-2'>今日安排</h4><ul class='space-y-2 text-sm'><li class='flex items-start gap-2'><i class='fas fa-circle text-xs text-primary mt-1'></i>14:00 - React 高级模式 第 15 课</li><li class='flex items-start gap-2'><i class='fas fa-circle text-xs text-primary mt-1'></i>16:00 - 算法练习 30 分钟</li><li class='flex items-start gap-2'><i class='fas fa-circle text-xs text-primary mt-1'></i>20:00 - 社区直播：前端性能优化</li></ul></div></div></div></div></section><section id='pricing' class='container py-12'><h2 class='text-2xl font-bold font-heading text-center mb-10'>选择适合你的学习计划</h2><div class='grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto'><div class='card-hover flex flex-col'><div class='text-center mb-6'><h3 class='text-xl font-bold'>免费版</h3><div class='text-3xl font-bold mt-2'>¥0/月</div></div><ul class='space-y-3 flex-1'><li class='flex items-center gap-2'><i class='fas fa-check' style='color:#10B981'></i>10 门免费课程</li><li class='flex items-center gap-2'><i class='fas fa-check' style='color:#10B981'></i>基础学习统计</li><li class='flex items-center gap-2'><i class='fas fa-check' style='color:#10B981'></i>社区访问</li></ul><button class='btn-secondary mt-6 w-full'>免费开始</button></div><div class='card-hover flex flex-col border-primary relative'><div class='absolute -top-3 right-4' style='background:#F59E0B;color:#fff;font-size:0.75rem;padding:0.25rem 0.75rem;border-radius:9999px;font-weight:600'>推荐</div><div class='text-center mb-6'><h3 class='text-xl font-bold'>专业版</h3><div class='text-3xl font-bold mt-2 text-primary'>¥49/月</div></div><ul class='space-y-3 flex-1'><li class='flex items-center gap-2'><i class='fas fa-check' style='color:#10B981'></i>全部课程访问</li><li class='flex items-center gap-2'><i class='fas fa-check' style='color:#10B981'></i>高级学习分析</li><li class='flex items-center gap-2'><i class='fas fa-check' style='color:#10B981'></i>证书颁发</li><li class='flex items-center gap-2'><i class='fas fa-check' style='color:#10B981'></i>优先客服</li></ul><button class='btn-primary mt-6 w-full'>订阅专业版</button></div><div class='card-hover flex flex-col'><div class='text-center mb-6'><h3 class='text-xl font-bold'>企业版</h3><div class='text-3xl font-bold mt-2'>¥199/月</div></div><ul class='space-y-3 flex-1'><li class='flex items-center gap-2'><i class='fas fa-check' style='color:#10B981'></i>团队管理</li><li class='flex items-center gap-2'><i class='fas fa-check' style='color:#10B981'></i>定制学习路径</li><li class='flex items-center gap-2'><i class='fas fa-check' style='color:#10B981'></i>API 集成</li><li class='flex items-center gap-2'><i class='fas fa-check' style='color:#10B981'></i>专属客户经理</li></ul><button class='btn-secondary mt-6 w-full'>联系销售</button></div></div></section><section id='cta-community' class='container py-12'><div class='hero-glow rounded-2xl p-8 md:p-12 text-white text-center relative overflow-hidden'><div class='relative z-10'><h2 class='text-3xl md:text-4xl font-bold font-heading mb-4'>一个人学习太孤单？</h2><p class='text-lg text-white/80 max-w-2xl mx-auto mb-8'>加入 SkillForge 学习社区，和 50,000+ 学习者一起组队打卡、分享笔记、参与挑战赛。</p><div class='flex flex-col sm:flex-row justify-center gap-4'><a href='#community' class='btn-primary bg-white text-primary hover:bg-gray-100'>加入社区</a><a href='#community' class='btn-secondary border-white text-white hover:bg-white/10'>浏览热门小组</a></div></div><div class='absolute top-0 right-0 w-72 h-72 bg-white/5 rounded-full -translate-y-1/2 translate-x-1/2'></div><div class='absolute bottom-0 left-0 w-56 h-56 bg-white/5 rounded-full translate-y-1/2 -translate-x-1/2'></div></div></section></main><footer class='bg-gray-900 text-gray-300 pt-12 pb-6'><div class='container'><div class='grid grid-cols-2 md:grid-cols-5 gap-8'><div class='col-span-2'><div class='text-xl font-bold text-white'>SkillForge</div><p class='mt-2 text-sm leading-relaxed'>让每一次学习都有迹可循。SkillForge 致力于为终身学习者提供系统化的技能提升路径。</p></div><div><h4 class='font-semibold text-white mb-3'>平台</h4><ul class='space-y-2 text-sm'><li><a href='#' class='hover:text-white'>课程目录</a></li><li><a href='#' class='hover:text-white'>学习路径</a></li><li><a href='#' class='hover:text-white'>价格方案</a></li><li><a href='#' class='hover:text-white'>企业版</a></li></ul></div><div><h4 class='font-semibold text-white mb-3'>支持</h4><ul class='space-y-2 text-sm'><li><a href='#' class='hover:text-white'>帮助中心</a></li><li><a href='#' class='hover:text-white'>联系客服</a></li><li><a href='#' class='hover:text-white'>常见问题</a></li><li><a href='#' class='hover:text-white'>技术状态</a></li></ul></div><div><h4 class='font-semibold text-white mb-3'>社区</h4><ul class='space-y-2 text-sm'><li><a href='#' class='hover:text-white'>学习小组</a></li><li><a href='#' class='hover:text-white'>讲师入驻</a></li><li><a href='#' class='hover:text-white'>博客</a></li><li><a href='#' class='hover:text-white'>讨论区</a></li></ul></div></div><div class='mt-8 pt-6 border-t border-gray-700 flex flex-col md:flex-row justify-between items-center gap-4'><div class='flex items-center gap-4'><a href='#' class='hover:text-white'><i class='fab fa-weixin text-lg'></i></a><a href='#' class='hover:text-white'><i class='fab fa-weibo text-lg'></i></a><a href='#' class='hover:text-white'><i class='fab fa-github text-lg'></i></a><a href='#' class='hover:text-white'><i class='fab fa-linkedin text-lg'></i></a></div><div class='flex items-center gap-4 text-sm'><a href='#' class='hover:text-white'>服务条款</a><a href='#' class='hover:text-white'>隐私政策</a><a href='#' class='hover:text-white'>Cookie 声明</a></div><div class='flex items-center gap-2'><input type='email' placeholder='输入邮箱获取学习资源' class='input-field bg-gray-800 border-gray-600 text-white placeholder-gray-400 text-sm px-3 py-2 rounded-lg'><button class='btn-primary bg-primary hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm'>订阅</button></div></div><div class='text-center text-xs text-gray-500 mt-6'>© 2026 SkillForge. All rights reserved.</div></div></footer><script>document.addEventListener('DOMContentLoaded',function(){const mobileMenuBtn=document.getElementById('mobileMenuBtn');const mobileMenu=document.getElementById('mobileMenu');if(mobileMenuBtn&&mobileMenu){mobileMenuBtn.addEventListener('click',function(){mobileMenu.classList.toggle('hidden');})}const categoryChips=document.querySelectorAll('.category-chip');categoryChips.forEach(chip=>{chip.addEventListener('click',function(){categoryChips.forEach(c=>{c.classList.remove('active','bg-primary','text-white');c.classList.add('bg-gray-100','text-gray-700');});this.classList.remove('bg-gray-100','text-gray-700');this.classList.add('active','bg-primary','text-white');})});const recTabs=document.querySelectorAll('.rec-tab');const courseCards=document.querySelectorAll('.course-card');recTabs.forEach(tab=>{tab.addEventListener('click',function(){recTabs.forEach(t=>{t.classList.remove('active','bg-primary','text-white');t.classList.add('bg-gray-100','text-gray-700');});this.classList.remove('bg-gray-100','text-gray-700');this.classList.add('active','bg-primary','text-white');const filter=this.dataset.filter;courseCards.forEach(card=>{if(filter==='all'||card.dataset.tags===filter){card.style.display='block';}else{card.style.display='none';}});})});const lbTabs=document.querySelectorAll('.lb-tab');lbTabs.forEach(tab=>{tab.addEventListener('click',function(){lbTabs.forEach(t=>{t.classList.remove('active','bg-primary','text-white');t.classList.add('bg-gray-100','text-gray-700');});this.classList.remove('bg-gray-100','text-gray-700');this.classList.add('active','bg-primary','text-white');})});let currentMonth=6;let currentYear=2026;const monthLabel=document.getElementById('monthLabel');const calendarGrid=document.getElementById('calendarGrid');function renderCalendar(year,month){const date=new Date(year,month,1);const firstDay=date.getDay();const daysInMonth=new Date(year,month+1,0).getDate();monthLabel.textContent=year+' 年 '+(month+1)+' 月';let html='';let startDay=firstDay===0?6:firstDay-1;for(let i=0;i<startDay;i++){html+='<div class=\"p-2\"></div>';}for(let day=1;day<=daysInMonth;day++){const isToday=(day===7&&month===6&&year===2026);const isStudied=[1,2,3,4,5,6,7].includes(day);html+='<div class=\"p-2 rounded-lg '+(isToday?'bg-primary text-white':'hover:bg-gray-100')+' '+(isStudied&&!isToday?'border border-primary/30':'')+' relative\"><span class=\"text-sm\">'+day+'</span>'+(isStudied?'<span class=\"streak-dot mx-auto block mt-1\"></span>':'')+'</div>';}calendarGrid.innerHTML=html;}renderCalendar(2026,6);document.getElementById('prevMonth').addEventListener('click',function(){currentMonth--;if(currentMonth<0){currentMonth=11;currentYear--;}renderCalendar(currentYear,currentMonth);});document.getElementById('nextMonth').addEventListener('click',function(){currentMonth++;if(currentMonth>11){currentMonth=0;currentYear++;}renderCalendar(currentYear,currentMonth);});const counters=document.querySelectorAll('.counter');function animateCounter(el){const target=parseFloat(el.dataset.target);const duration=1500;const step=target/(duration/16);let current=0;const updater=setInterval(function(){current+=step;if(current>=target){current=target;clearInterval(updater);}if(Number.isInteger(target)){el.textContent=Math.round(current);}else{el.textContent=current.toFixed(1);}},16);}const observer=new IntersectionObserver(function(entries){entries.forEach(function(entry){if(entry.isIntersecting){animateCounter(entry.target);observer.unobserve(entry.target);}});},{threshold:0.5});counters.forEach(function(counter){observer.observe(counter);});const revealElements=document.querySelectorAll('.reveal');const revealObserver=new IntersectionObserver(function(entries){entries.forEach(function(entry){if(entry.isIntersecting){entry.target.classList.add('visible');revealObserver.unobserve(entry.target);}});},{threshold:0.1});revealElements.forEach(function(el){revealObserver.observe(el);});const nav=document.getElementById('nav');window.addEventListener('scroll',function(){if(window.scrollY>10){nav.classList.add('nav-scrolled');}else{nav.classList.remove('nav-scrolled');}});});</script></body></html>"},"next":["完善课程详情页","设计学习路径时间线","优化表单页响应式","增强排行榜动画","增加日历交互"],"breakpoint":"none","plan":{"planId":"a8f3c7d1-9e5b-4f2a-8c6d-3e1b7a9d0f4c","goal":"在线学习平台首页，激发学习动力与课程探索","audience":"在职学习者与大学生，追求技能提升与系统化学习路径","tone":"modern-educational-tech","type":"fullHTML","designTokens":{"style":{"name":"modern-educational-tech","mood":"energetic","keywords":["learning","dashboard","progress-driven","clean-tech","warm-blue"],"density":"comfortable","philosophy":"用清晰的视觉层级和进度反馈，让学习成就感可视化，驱动持续学习行为。"},"colors":{"primary":"#2A6DF4","secondary":"#7C3AED","accent":"#F59E0B","success":"#10B981","warning":"#F97316","danger":"#EF4444","info":"#3B82F6","background":"#F8FAFC","foreground":"#0F172A","card":"#FFFFFF","border":"#E2E8F0","muted":"#94A3B8"},"cssVarPrefix":"--color-","colorRoles":{"primary":{"name":"Learning Blue","role":"CTA按钮、链接、进度条主色"},"accent":{"name":"Achievement Gold","role":"徽章、等级、排行榜高亮"},"secondary":{"name":"Course Purple","role":"课程分类标签、装饰元素"}},"gradients":[{"name":"hero-glow","stops":"linear-gradient(135deg, #2A6DF4 0%, #7C3AED 100%)","role":"hero 区域渐变背景"},{"name":"card-accent","stops":"linear-gradient(135deg, #2A6DF4 0%, #3B82F6 100%)","role":"继续学习卡片渐变条"},{"name":"progress-glow","stops":"linear-gradient(90deg, #2A6DF4 0%, #10B981 100%)","role":"进度条渐变"}],"states":{"hover":"#1D4ED8","active":"#1E40AF","focus":"#3B82F6","disabled":"#CBD5E1"},"fonts":{"heading":"Plus Jakarta Sans","body":"Inter","mono":"JetBrains Mono","display":"Plus Jakarta Sans","googleFontsUrl":"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&fam…;:{"heading":"'Plus Jakarta Sans', 'Segoe UI', sans-serif","body":"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif","mono":"'JetBrains Mono', 'SF Mono', Consolas, monospace"},"scale":{"display":{"size":"clamp(1.75rem, 3.5vw, 2.5rem)","weight":800,"lineHeight":"1.1","letterSpacing":"-0.03em"},"h1":{"size":"clamp(1.5rem, 2.5vw, 2rem)","weight":700,"lineHeight":"1.2","letterSpacing":"-0.02em"},"h2":{"size":"clamp(1.25rem, 2vw, 1.5rem)","weight":700,"lineHeight":"1.25"},"h3":{"size":"1.125rem","weight":600,"lineHeight":"1.3"},"h4":{"size":"1rem","weight":600,"lineHeight":"1.4"},"body":{"size":"0.9375rem","weight":400,"lineHeight":"1.6"},"small":{"size":"0.8125rem","weight":400,"lineHeight":"1.5"},"caption":{"size":"0.75rem","weight":500,"lineHeight":"1.4","letterSpacing":"0.02em"},"button":{"size":"0.875rem","weight":600,"lineHeight":"1","letterSpacing":"0.01em"},"overline":{"size":"0.6875rem","weight":700,"lineHeight":"1.2","letterSpacing":"0.08em"}},"lineHeight":{"tight":"1.1","base":"1.6","loose":"1.8"},"weight":{"regular":400,"medium":500,"semibold":600,"bold":700}},"components":{"button":{"default":"bg=primary fg=#FFFFFF padding=0.625rem 1.25rem radius=lg weight=600","hover":"bg=#1D4ED8 shadow=md translateY=-1px","active":"bg=#1E40AF translateY=0 shadow=sm","disabled":"opacity=0.5 cursor=not-allowed","focus":"ring=2px solid #3B82F6 offset=2px","variants":{"primary":{"default":"bg=primary fg=#FFFFFF padding=0.625rem 1.25rem radius=lg weight=600","hover":"bg=#1D4ED8 shadow=md","active":"bg=#1E40AF","focus":"ring=2px #3B82F6","disabled":"opacity=0.5"},"secondary":{"default":"bg=card fg=primary border=1.5px solid primary radius=lg weight=600","hover":"bg=primary/5","active":"bg=primary/10","focus":"ring=2px #3B82F6","disabled":"opacity=0.5"},"ghost":{"default":"bg=transparent fg=foreground radius=lg weight=500","hover":"bg=muted/10","active":"bg=muted/20","focus":"ring=2px #3B82F6","disabled":"opacity=0.5"}}},"card":{"default":"bg=card shadow=sm radius=xl padding=1.25rem border=1px solid border","hover":"shadow=lg translateY=-2px border-color=primary/20"},"nav":{"default":"bg=card/90 backdrop-blur=12px height=4rem border-bottom=1px solid border","scrolled":"bg=card shadow=sm","mobile":"drawer-from-right width=80vw"},"input":{"default":"bg=background fg=foreground border=1.5px solid border radius=lg padding=0.625rem 1rem","hover":"border=1.5px solid muted","focus":"border=1.5px solid primary ring=3px primary/15","error":"border=1.5px solid danger ring=3px danger/15","disabled":"opacity=0.5 cursor=not-allowed"}},"layout":{"container":{"maxWidth":"1280px","paddingX":"1.5rem"},"grid":{"columns":12,"gap":"1.5rem"}},"spacing":{"gutter":"1.5rem","sectionY":"3rem","scale":["0","0.25rem","0.5rem","0.75rem","1rem","1.5rem","2rem","3rem","4rem","6rem"],"tokens":[0,4,8,12,16,24,32,48,64,96]},"shadow":{"sm":"0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04)","md":"0 4px 12px rgba(0,0,0,.08)","lg":"0 8px 24px rgba(0,0,0,.10)","xl":"0 16px 48px rgba(0,0,0,.12)"},"surfaces":{"base":"bg=background shadow=none","raised":"bg=card shadow=sm radius=xl","overlay":"bg=card shadow=lg radius=xl","modal":"bg=card shadow=xl radius=2xl"},"elevation":{"base":"none","raised":"sm","overlay":"lg","modal":"xl"},"breakpoints":{"sm":"640px","md":"768px","lg":"1024px","xl":"1280px","2xl":"1536px"},"touchTarget":{"min":"44px"},"responsive":{"collapseStrategy":"sidebar→top-tabs, multi-col-grid→single-col, calendar→compact-week-view, stats-row→stacked","hidePriority":["calendar-side-detail","ranking-extra-stats","decorative-illustration"]},"radius":{"sm":"4px","md":"8px","lg":"12px","xl":"16px","2xl":"24px","full":"9999px"},"transition":{"fast":"150ms ease-out","base":"250ms ease-out","slow":"400ms cubic-bezier(0.4,0,0.2,1)"}},"sections":[{"id":"nav","type":"nav-sticky","purpose":"顶部导航栏，包含品牌标识、搜索框、通知和用户头像","elements":{"brand_logo":true,"search_bar":true,"notification_icon":true,"user_avatar":true,"nav_links":["首页","课程","学习计划","社区"]},"copy":{"brand":"SkillForge","search_placeholder":"搜索课程、技能或讲师...","nav_link_1":"首页","nav_link_2":"课程","nav_link_3":"学习计划","nav_link_4":"社区"},"interactions":["mobile-menu-toggle","search-focus-expand"],"notes":"搜索框在小屏折叠为图标按钮，点击展开"},{"id":"hero-welcome","type":"hero-centered","purpose":"欢迎区域，展示用户学习统计和每日学习目标","elements":{"greeting":true,"streak_badge":true,"daily_goal_progress":true,"total_learning_hours":true,"visual_hint":"渐变几何背景 + 学习成就装饰","cta_primary":true},"copy":{"greeting":"早上好，继续你的学习之旅","subtitle":"今天的目标是完成「React 高级模式」模块","streak_label":"连续学习","streak_value":"12 天","daily_goal_label":"今日进度","daily_goal_value":"65%","total_hours_label":"累计学习","total_hours_value":"128 小时","cta_primary":"继续学习"},"interactions":["counter-animate"],"notes":"greeting 根据时间段动态切换（早上好/下午好/晚上好）"},{"id":"course-categories","type":"feature-icon-list","purpose":"课程分类导航，支持点击切换筛选课程","elements":{"section_title":true,"category_chips":true,"active_category_indicator":true},"copy":{"section_title":"课程分类","category_1":{"label":"全部","icon":"grid","count":"42"},"category_2":{"label":"前端开发","icon":"code","count":"12"},"category_3":{"label":"后端开发","icon":"server","count":"8"},"category_4":{"label":"数据科学","icon":"chart","count":"6"},"category_5":{"label":"UI/UX 设计","icon":"palette","count":"5"},"category_6":{"label":"移动开发","icon":"smartphone","count":"4"},"category_7":{"label":"DevOps","icon":"cloud","count":"3"},"category_8":{"label":"AI 与机器学习","icon":"brain","count":"4"}},"interactions":["tab-switch"],"notes":"点击分类后触发下方课程列表的筛选切换，active 状态用 primary 色下划线 + 填充背景"},{"id":"continue-learning","type":"feature-grid","purpose":"继续学习卡片，展示用户正在进行的课程及进度","elements":{"section_title":true,"course_cards":3,"progress_bar":true,"continue_button":true},"copy":{"section_title":"继续学习","card_1_title":"React 高级模式与性能优化","card_1_instructor":"李明","card_1_progress":"68%","card_1_lessons":"14/22 课时","card_1_eta":"剩余约 3.5 小时","card_2_title":"TypeScript 4.x 完全指南","card_2_instructor":"王雪","card_2_progress":"42%","card_2_lessons":"8/19 课时","card_2_eta":"剩余约 5 小时","card_3_title":"Node.js 微服务架构","card_3_instructor":"张峰","card_3_progress":"25%","card_3_lessons":"5/20 课时","card_3_eta":"剩余约 8 小时","cta_continue":"继续学习"},"interactions":["scroll-reveal"],"notes":"每张卡片左侧有课程主题色渐变条，进度条用 progress-glow 渐变"},{"id":"learning-progress","type":"stats-row","purpose":"学习进度概览，展示本周学习统计和里程碑","elements":{"section_title":true,"stat_cards":4,"progress_chart_hint":"迷你柱状图展示本周每日学习时长"},"copy":{"section_title":"本周学习概览","stat_1_value":"18.5","stat_1_label":"学习时长 (小时)","stat_1_icon":"clock","stat_2_value":"7","stat_2_label":"完成课时","stat_2_icon":"check-circle","stat_3_value":"92%","stat_3_label":"课程完成率","stat_3_icon":"target","stat_4_value":"3","stat_4_label":"获得证书","stat_4_icon":"award","chart_weekdays":["周一","周二","周三","周四","周五","周六","周日"],"chart_values":[2.5,3,1.5,4,2,3.5,2]},"interactions":["counter-animate"],"notes":"迷你柱状图用 primary 色填充，hover 时显示具体数值"},{"id":"recommended-courses","type":"feature-bento","purpose":"推荐课程区域，基于用户学习历史和分类筛选展示","elements":{"section_title":true,"filter_tabs":true,"course_cards":4,"rating_stars":true,"enrollment_badge":true},"copy":{"section_title":"为你推荐","filter_all":"全部推荐","filter_popular":"热门","filter_new":"最新","filter_trending":"趋势","card_1_title":"Vue 3 组合式 API 实战","card_1_instructor":"陈思","card_1_rating":"4.8","card_1_students":"2,340","card_1_level":"中级","card_1_duration":"16 小时","card_1_tag":"热门","card_2_title":"Python 数据分析与可视化","card_2_instructor":"刘洋","card_2_rating":"4.9","card_2_students":"4,120","card_2_level":"初级","card_2_duration":"20 小时","card_2_tag":"推荐","card_3_title":"Kubernetes 从入门到生产","card_3_instructor":"赵刚","card_3_rating":"4.7","card_3_students":"1,890","card_3_level":"高级","card_3_duration":"24 小时","card_3_tag":"新课","card_4_title":"Figma 设计系统搭建","card_4_instructor":"林悦","card_4_rating":"4.6","card_4_students":"3,560","card_4_level":"中级","card_4_duration":"12 小时","card_4_tag":"热门"},"interactions":["tab-switch","scroll-reveal"],"notes":"filter_tabs 点击切换推荐维度，卡片包含封面图占位、星级评分、报名人数"},{"id":"leaderboard","type":"ranking-list","purpose":"学习排行榜，展示本周学习时长排名，激励学习竞争","elements":{"section_title":true,"ranking_list":true,"top_3_highlight":true,"current_user_rank":true,"time_period_toggle":true},"copy":{"section_title":"学习排行榜","period_weekly":"本周","period_monthly":"本月","period_alltime":"总榜","rank_1_name":"周子涵","rank_1_hours":"24.5 小时","rank_1_badge":"金牌","rank_1_courses":"3 门","rank_2_name":"王子轩","rank_2_hours":"21.2 小时","rank_2_badge":"银牌","rank_2_courses":"2 门","rank_3_name":"李思琪","rank_3_hours":"19.8 小时","rank_3_badge":"铜牌","rank_3_courses":"4 门","rank_4_name":"张明远","rank_4_hours":"17.3 小时","rank_4_courses":"2 门","rank_5_name":"陈雨桐","rank_5_hours":"15.6 小时","rank_5_courses":"3 门","current_user_name":"你","current_user_rank":"第 8 名","current_user_hours":"12.4 小时","current_user_gap":"距第 5 名差 3.2 小时"},"interactions":["tab-switch","counter-animate"],"notes":"前三名用特殊样式突出（金/银/铜色），当前用户用 primary 色高亮"},{"id":"learning-calendar","type":"calendar-grid","purpose":"学习日历，展示本月学习计划和打卡记录","elements":{"section_title":true,"month_navigation":true,"calendar_grid":true,"study_streak_indicator":true,"today_highlight":true,"event_dots":true},"copy":{"section_title":"学习日历","month_label":"2026 年 7 月","weekday_headers":["一","二","三","四","五","六","日"],"streak_current":"当前连续","streak_days":"12 天","streak_best":"最长记录","streak_best_days":"21 天","today_event_1":"14:00 - React 高级模式 第 15 课","today_event_2":"16:00 - 算法练习 30 分钟","today_event_3":"20:00 - 社区直播：前端性能优化","no_events":"今天没有安排学习任务"},"interactions":["tab-switch"],"notes":"日历格子中已学习日期用 primary 色圆点标记，连续打卡形成 streak 连线"},{"id":"pricing","type":"pricing-table","purpose":"价格方案展示，帮助用户选择适合的订阅计划","elements":{"section_title":true,"plan_cards":3,"feature_list":true,"cta_button":true,"popular_badge":true},"copy":{"section_title":"选择适合你的学习计划","plan_1_name":"免费版","plan_1_price":"¥0/月","plan_1_features":["10 门免费课程","基础学习统计","社区访问"],"plan_1_cta":"免费开始","plan_2_name":"专业版","plan_2_price":"¥49/月","plan_2_features":["全部课程访问","高级学习分析","证书颁发","优先客服"],"plan_2_cta":"订阅专业版","plan_2_popular":true,"plan_3_name":"企业版","plan_3_price":"¥199/月","plan_3_features":["团队管理","定制学习路径","API 集成","专属客户经理"],"plan_3_cta":"联系销售"},"interactions":[],"notes":"专业版卡片用 primary 色边框突出，popular_badge 用 accent 色"},{"id":"cta-community","type":"cta-banner","purpose":"社区号召，鼓励加入学习小组或参与挑战","elements":{"title":true,"subtitle":true,"cta_primary":true,"cta_secondary":true,"visual_hint":"学习小组插画装饰"},"copy":{"title":"一个人学习太孤单？","subtitle":"加入 SkillForge 学习社区，和 50,000+ 学习者一起组队打卡、分享笔记、参与挑战赛。","cta_primary":"加入社区","cta_secondary":"浏览热门小组"},"interactions":["smooth-scroll-to-#community"],"notes":"背景用 hero-glow 渐变，营造温暖社群氛围"},{"id":"footer","type":"footer-columns","purpose":"站点页脚，包含导航链接、社交入口和版权信息","elements":{"brand":true,"col_links":4,"social_icons":true,"newsletter_signup":true,"copyright":true},"copy":{"brand":"SkillForge","brand_desc":"让每一次学习都有迹可循。SkillForge 致力于为终身学习者提供系统化的技能提升路径。","col_1_title":"平台","col_1_link_1":"课程目录","col_1_link_2":"学习路径","col_1_link_3":"价格方案","col_1_link_4":"企业版","col_2_title":"支持","col_2_link_1":"帮助中心","col_2_link_2":"联系客服","col_2_link_3":"常见问题","col_2_link_4":"技术状态","col_3_title":"社区","col_3_link_1":"学习小组","col_3_link_2":"讲师入驻","col_3_link_3":"博客","col_3_link_4":"讨论区","col_4_title":"法律","col_4_link_1":"服务条款","col_4_link_2":"隐私政策","col_4_link_3":"Cookie 声明","newsletter_placeholder":"输入邮箱获取学习资源","newsletter_cta":"订阅","copyright":"© 2026 SkillForge. All rights reserved."},"interactions":[],"notes":"newsletter 输入框 + 按钮组合，小屏折叠为单列"}],"rules":{"dos":["所有进度条使用 progress-glow 渐变，从 primary 渐变到 success，传递成长感","排行榜前三名分别用金/银/铜色徽章突出，当前用户行用 primary 浅色背景高亮","课程卡片包含星级评分、报名人数和难度标签，信息密度适中","日历中已学习日期用 primary 色实心圆点标记，连续学习形成视觉连线","分类切换和排行榜时间周期切换使用 tab-switch 交互，active 态用下划线 + 填充色"],"donts":["不要使用紫色渐变 hero 或居中三列 feature 这种 AI 俗套布局","不要用 Lorem ipsum 或占位文案，所有课程名、讲师名、数据必须 mock 真实感","不要使用纯白色背景加纯黑色文字这种无层次的设计","不要堆砌过多动画导致页面卡顿，仅 counter-animate 和 scroll-reveal 两种交互动效","不要在移动端隐藏核心功能入口，采用折叠而非删除策略"]},"promptGuide":{"quickRef":"暖蓝+紫渐变主色调 + 圆角卡片 + 进度驱动视觉 + 排行榜金/银/铜徽章 + 8pt 间距系统","examples":["用 SkillForge 风格做一个课程详情页","用学习平台风格设计一个学习路径时间线组件","用相同设计系统做一个讲师入驻表单页","用排行榜+日历组合做一个学习打卡页"]}},"originalPlan":{"planId":"a8f3c7d1-9e5b-4f2a-8c6d-3e1b7a9d0f4c","goal":"在线学习平台首页，激发学习动力与课程探索","audience":"在职学习者与大学生，追求技能提升与系统化学习路径","tone":"modern-educational-tech","type":"fullHTML","designTokens":{"style":{"name":"modern-educational-tech","mood":"energetic","keywords":["learning","dashboard","progress-driven","clean-tech","warm-blue"],"density":"comfortable","philosophy":"用清晰的视觉层级和进度反馈，让学习成就感可视化，驱动持续学习行为。"},"colors":{"primary":"#2A6DF4","secondary":"#7C3AED","accent":"#F59E0B","success":"#10B981","warning":"#F59E0B","danger":"#EF4444","info":"#3B82F6","background":"#F8FAFC","foreground":"#0F172A","card":"#FFFFFF","border":"#E2E8F0","muted":"#94A3B8"},"cssVarPrefix":"--color-","colorRoles":{"primary":{"name":"Learning Blue","role":"CTA按钮、链接、进度条主色"},"accent":{"name":"Achievement Gold","role":"徽章、等级、排行榜高亮"},"secondary":{"name":"Course Purple","role":"课程分类标签、装饰元素"}},"gradients":[{"name":"hero-glow","stops":"linear-gradient(135deg, #2A6DF4 0%, #7C3AED 100%)","role":"hero 区域渐变背景"},{"name":"card-accent","stops":"linear-gradient(135deg, #2A6DF4 0%, #3B82F6 100%)","role":"继续学习卡片渐变条"},{"name":"progress-glow","stops":"linear-gradient(90deg, #2A6DF4 0%, #10B981 100%)","role":"进度条渐变"}],"states":{"hover":"#1D4ED8","active":"#1E40AF","focus":"#3B82F6","disabled":"#CBD5E1"},"fonts":{"heading":"Plus Jakarta Sans","body":"Inter","mono":"JetBrains Mono","display":"Plus Jakarta Sans","googleFontsUrl":"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&fam…;:{"heading":"'Plus Jakarta Sans', 'Segoe UI', sans-serif","body":"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif","mono":"'JetBrains Mono', 'SF Mono', Consolas, monospace"},"scale":{"display":{"size":"clamp(1.75rem, 3.5vw, 2.5rem)","weight":800,"lineHeight":"1.1","letterSpacing":"-0.03em"},"h1":{"size":"clamp(1.5rem, 2.5vw, 2rem)","weight":700,"lineHeight":"1.2","letterSpacing":"-0.02em"},"h2":{"size":"clamp(1.25rem, 2vw, 1.5rem)","weight":700,"lineHeight":"1.25"},"h3":{"size":"1.125rem","weight":600,"lineHeight":"1.3"},"h4":{"size":"1rem","weight":600,"lineHeight":"1.4"},"body":{"size":"0.9375rem","weight":400,"lineHeight":"1.6"},"small":{"size":"0.8125rem","weight":400,"lineHeight":"1.5"},"caption":{"size":"0.75rem","weight":500,"lineHeight":"1.4","letterSpacing":"0.02em"},"button":{"size":"0.875rem","weight":600,"lineHeight":"1","letterSpacing":"0.01em"},"overline":{"size":"0.6875rem","weight":700,"lineHeight":"1.2","letterSpacing":"0.08em"}},"lineHeight":{"tight":"1.1","base":"1.6","loose":"1.8"},"weight":{"regular":400,"medium":500,"semibold":600,"bold":700}},"components":{"button":{"default":"bg=primary fg=#FFFFFF padding=0.625rem 1.25rem radius=lg weight=600","hover":"bg=#1D4ED8 shadow=md translateY=-1px","active":"bg=#1E40AF translateY=0 shadow=sm","disabled":"opacity=0.5 cursor=not-allowed","focus":"ring=2px solid #3B82F6 offset=2px","variants":{"primary":{"default":"bg=primary fg=#FFFFFF padding=0.625rem 1.25rem radius=lg weight=600","hover":"bg=#1D4ED8 shadow=md","active":"bg=#1E40AF","focus":"ring=2px #3B82F6","disabled":"opacity=0.5"},"secondary":{"default":"bg=card fg=primary border=1.5px solid primary radius=lg weight=600","hover":"bg=primary/5","active":"bg=primary/10","focus":"ring=2px #3B82F6","disabled":"opacity=0.5"},"ghost":{"default":"bg=transparent fg=foreground radius=lg weight=500","hover":"bg=muted/10","active":"bg=muted/20","focus":"ring=2px #3B82F6","disabled":"opacity=0.5"}}},"card":{"default":"bg=card shadow=sm radius=xl padding=1.25rem border=1px solid border","hover":"shadow=lg translateY=-2px border-color=primary/20"},"nav":{"default":"bg=card/90 backdrop-blur=12px height=4rem border-bottom=1px solid border","scrolled":"bg=card shadow=sm","mobile":"drawer-from-right width=80vw"},"input":{"default":"bg=background fg=foreground border=1.5px solid border radius=lg padding=0.625rem 1rem","hover":"border=1.5px solid muted","focus":"border=1.5px solid primary ring=3px primary/15","error":"border=1.5px solid danger ring=3px danger/15","disabled":"opacity=0.5 cursor=not-allowed"}},"layout":{"container":{"maxWidth":"1280px","paddingX":"1.5rem"},"grid":{"columns":12,"gap":"1.5rem"}},"spacing":{"gutter":"1.5rem","sectionY":"3rem","scale":["0","0.25rem","0.5rem","0.75rem","1rem","1.5rem","2rem","3rem","4rem","6rem"],"tokens":[0,4,8,12,16,24,32,48,64,96]},"shadow":{"sm":"0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04)","md":"0 4px 12px rgba(0,0,0,.08)","lg":"0 8px 24px rgba(0,0,0,.10)","xl":"0 16px 48px rgba(0,0,0,.12)"},"surfaces":{"base":"bg=background shadow=none","raised":"bg=card shadow=sm radius=xl","overlay":"bg=card shadow=lg radius=xl","modal":"bg=card shadow=xl radius=2xl"},"elevation":{"base":"none","raised":"sm","overlay":"lg","modal":"xl"},"breakpoints":{"sm":"640px","md":"768px","lg":"1024px","xl":"1280px","2xl":"1536px"},"touchTarget":{"min":"44px"},"responsive":{"collapseStrategy":"sidebar→top-tabs, multi-col-grid→single-col, calendar→compact-week-view, stats-row→stacked","hidePriority":["calendar-side-detail","ranking-extra-stats","decorative-illustration"]},"radius":{"sm":"4px","md":"8px","lg":"12px","xl":"16px","2xl":"24px","full":"9999px"},"transition":{"fast":"150ms ease-out","base":"250ms ease-out","slow":"400ms cubic-bezier(0.4,0,0.2,1)"}},"sections":[{"id":"nav","type":"nav-sticky","purpose":"顶部导航栏，包含品牌标识、搜索框、通知和用户头像","elements":{"brand_logo":true,"search_bar":true,"notification_icon":true,"user_avatar":true,"nav_links":["首页","课程","学习计划","社区"]},"copy":{"brand":"SkillForge","search_placeholder":"搜索课程、技能或讲师...","nav_link_1":"首页","nav_link_2":"课程","nav_link_3":"学习计划","nav_link_4":"社区"},"interactions":["mobile-menu-toggle","search-focus-expand"],"notes":"搜索框在小屏折叠为图标按钮，点击展开"},{"id":"hero-welcome","type":"hero-centered","purpose":"欢迎区域，展示用户学习统计和每日学习目标","elements":{"greeting":true,"streak_badge":true,"daily_goal_progress":true,"total_learning_hours":true,"visual_hint":"渐变几何背景 + 学习成就装饰"},"copy":{"greeting":"早上好，👋 继续你的学习之旅","subtitle":"今天的目标是完成「React 高级模式」模块","streak_label":"连续学习","streak_value":"12 天","daily_goal_label":"今日进度","daily_goal_value":"65%","total_hours_label":"累计学习","total_hours_value":"128 小时","cta_primary":"继续学习"},"interactions":["counter-animate"],"notes":"greeting 根据时间段动态切换（早上好/下午好/晚上好）"},{"id":"course-categories","type":"feature-icon-list","purpose":"课程分类导航，支持点击切换筛选课程","elements":{"section_title":true,"category_chips":true,"active_category_indicator":true},"copy":{"section_title":"课程分类","category_1":{"label":"全部","icon":"grid","count":"42"},"category_2":{"label":"前端开发","icon":"code","count":"12"},"category_3":{"label":"后端开发","icon":"server","count":"8"},"category_4":{"label":"数据科学","icon":"chart","count":"6"},"category_5":{"label":"UI/UX 设计","icon":"palette","count":"5"},"category_6":{"label":"移动开发","icon":"smartphone","count":"4"},"category_7":{"label":"DevOps","icon":"cloud","count":"3"},"category_8":{"label":"AI 与机器学习","icon":"brain","count":"4"}},"interactions":["tab-switch"],"notes":"点击分类后触发下方课程列表的筛选切换，active 状态用 primary 色下划线 + 填充背景"},{"id":"continue-learning","type":"feature-grid","purpose":"继续学习卡片，展示用户正在进行的课程及进度","elements":{"section_title":true,"course_cards":3,"progress_bar":true,"continue_button":true},"copy":{"section_title":"继续学习","card_1_title":"React 高级模式与性能优化","card_1_instructor":"李明","card_1_progress":"68%","card_1_lessons":"14/22 课时","card_1_eta":"剩余约 3.5 小时","card_2_title":"TypeScript 4.x 完全指南","card_2_instructor":"王雪","card_2_progress":"42%","card_2_lessons":"8/19 课时","card_2_eta":"剩余约 5 小时","card_3_title":"Node.js 微服务架构","card_3_instructor":"张峰","card_3_progress":"25%","card_3_lessons":"5/20 课时","card_3_eta":"剩余约 8 小时","cta_continue":"继续学习"},"interactions":["scroll-reveal"],"notes":"每张卡片左侧有课程主题色渐变条，进度条用 progress-glow 渐变"},{"id":"learning-progress","type":"stats-row","purpose":"学习进度概览，展示本周学习统计和里程碑","elements":{"section_title":true,"stat_cards":4,"progress_chart_hint":"迷你柱状图展示本周每日学习时长"},"copy":{"section_title":"本周学习概览","stat_1_value":"18.5","stat_1_label":"学习时长 (小时)","stat_1_icon":"clock","stat_2_value":"7","stat_2_label":"完成课时","stat_2_icon":"check-circle","stat_3_value":"92%","stat_3_label":"课程完成率","stat_3_icon":"target","stat_4_value":"3","stat_4_label":"获得证书","stat_4_icon":"award","chart_weekdays":["周一","周二","周三","周四","周五","周六","周日"],"chart_values":[2.5,3,1.5,4,2,3.5,2]},"interactions":["counter-animate"],"notes":"迷你柱状图用 primary 色填充，hover 时显示具体数值"},{"id":"recommended-courses","type":"feature-bento","purpose":"推荐课程区域，基于用户学习历史和分类筛选展示","elements":{"section_title":true,"filter_tabs":true,"course_cards":4,"rating_stars":true,"enrollment_badge":true},"copy":{"section_title":"为你推荐","filter_all":"全部推荐","filter_popular":"热门","filter_new":"最新","filter_trending":" trending","card_1_title":"Vue 3 组合式 API 实战","card_1_instructor":"陈思","card_1_rating":"4.8","card_1_students":"2,340","card_1_level":"中级","card_1_duration":"16 小时","card_1_tag":"热门","card_2_title":"Python 数据分析与可视化","card_2_instructor":"刘洋","card_2_rating":"4.9","card_2_students":"4,120","card_2_level":"初级","card_2_duration":"20 小时","card_2_tag":"推荐","card_3_title":"Kubernetes 从入门到生产","card_3_instructor":"赵刚","card_3_rating":"4.7","card_3_students":"1,890","card_3_level":"高级","card_3_duration":"24 小时","card_3_tag":"新课","card_4_title":"Figma 设计系统搭建","card_4_instructor":"林悦","card_4_rating":"4.6","card_4_students":"3,560","card_4_level":"中级","card_4_duration":"12 小时","card_4_tag":"热门"},"interactions":["tab-switch","scroll-reveal"],"notes":"filter_tabs 点击切换推荐维度，卡片包含封面图占位、星级评分、报名人数"},{"id":"leaderboard","type":"testimonial-grid","purpose":"学习排行榜，展示本周学习时长排名，激励学习竞争","elements":{"section_title":true,"ranking_list":true,"top_3_highlight":true,"current_user_rank":true,"time_period_toggle":true},"copy":{"section_title":"学习排行榜","period_weekly":"本周","period_monthly":"本月","period_alltime":"总榜","rank_1_name":"周子涵","rank_1_hours":"24.5 小时","rank_1_badge":"🥇","rank_1_courses":"3 门","rank_2_name":"王子轩","rank_2_hours":"21.2 小时","rank_2_badge":"🥈","rank_2_courses":"2 门","rank_3_name":"李思琪","rank_3_hours":"19.8 小时","rank_3_badge":"🥉","rank_3_courses":"4 门","rank_4_name":"张明远","rank_4_hours":"17.3 小时","rank_4_courses":"2 门","rank_5_name":"陈雨桐","rank_5_hours":"15.6 小时","rank_5_courses":"3 门","current_user_name":"你","current_user_rank":"第 8 名","current_user_hours":"12.4 小时","current_user_gap":"距第 5 名差 3.2 小时"},"interactions":["tab-switch","counter-animate"],"notes":"前三名用特殊样式突出（金/银/铜色），当前用户用 primary 色高亮"},{"id":"learning-calendar","type":"faq-accordion","purpose":"学习日历，展示本月学习计划和打卡记录","elements":{"section_title":true,"month_navigation":true,"calendar_grid":true,"study_streak_indicator":true,"today_highlight":true,"event_dots":true},"copy":{"section_title":"学习日历","month_label":"2026 年 7 月","weekday_headers":["一","二","三","四","五","六","日"],"streak_current":"当前连续","streak_days":"12 天","streak_best":"最长记录","streak_best_days":"21 天","today_event_1":"14:00 - React 高级模式 第 15 课","today_event_2":"16:00 - 算法练习 30 分钟","today_event_3":"20:00 - 社区直播：前端性能优化","no_events":"今天没有安排学习任务 🎉"},"interactions":["tab-switch"],"notes":"日历格子中已学习日期用 primary 色圆点标记，连续打卡形成 streak 连线"},{"id":"cta-community","type":"cta-banner","purpose":"社区号召，鼓励加入学习小组或参与挑战","elements":{"title":true,"subtitle":true,"cta_primary":true,"cta_secondary":true,"visual_hint":"学习小组插画装饰"},"copy":{"title":"一个人学习太孤单？","subtitle":"加入 SkillForge 学习社区，和 50,000+ 学习者一起组队打卡、分享笔记、参与挑战赛。","cta_primary":"加入社区","cta_secondary":"浏览热门小组"},"interactions":["smooth-scroll-to-#community"],"notes":"背景用 hero-glow 渐变，营造温暖社群氛围"},{"id":"footer","type":"footer-columns","purpose":"站点页脚，包含导航链接、社交入口和版权信息","elements":{"brand":true,"col_links":4,"social_icons":true,"newsletter_signup":true,"copyright":true},"copy":{"brand":"SkillForge","brand_desc":"让每一次学习都有迹可循。SkillForge 致力于为终身学习者提供系统化的技能提升路径。","col_1_title":"平台","col_1_link_1":"课程目录","col_1_link_2":"学习路径","col_1_link_3":"价格方案","col_1_link_4":"企业版","col_2_title":"支持","col_2_link_1":"帮助中心","col_2_link_2":"联系客服","col_2_link_3":"常见问题","col_2_link_4":"技术状态","col_3_title":"社区","col_3_link_1":"学习小组","col_3_link_2":"讲师入驻","col_3_link_3":"博客","col_3_link_4":"讨论区","col_4_title":"法律","col_4_link_1":"服务条款","col_4_link_2":"隐私政策","col_4_link_3":"Cookie 声明","newsletter_placeholder":"输入邮箱获取学习资源","newsletter_cta":"订阅","copyright":"© 2026 SkillForge. All rights reserved."},"interactions":[],"notes":"newsletter 输入框 + 按钮组合，小屏折叠为单列"}],"rules":{"dos":["所有进度条使用 progress-glow 渐变，从 primary 渐变到 success，传递成长感","排行榜前三名分别用金/银/铜色徽章突出，当前用户行用 primary 浅色背景高亮","课程卡片包含星级评分、报名人数和难度标签，信息密度适中","日历中已学习日期用 primary 色实心圆点标记，连续学习形成视觉连线","分类切换和排行榜时间周期切换使用 tab-switch 交互，active 态用下划线 + 填充色"],"donts":["不要使用紫色渐变 hero 或居中三列 feature 这种 AI 俗套布局","不要用 Lorem ipsum 或占位文案，所有课程名、讲师名、数据必须 mock 真实感","不要使用纯白色背景加纯黑色文字这种无层次的设计","不要堆砌过多动画导致页面卡顿，仅 counter-animate 和 scroll-reveal 两种交互动效","不要在移动端隐藏核心功能入口，采用折叠而非删除策略"]},"promptGuide":{"quickRef":"暖蓝+紫渐变主色调 + 圆角卡片 + 进度驱动视觉 + 排行榜金/银/铜徽章 + 8pt 间距系统","examples":["用 SkillForge 风格做一个课程详情页","用学习平台风格设计一个学习路径时间线组件","用相同设计系统做一个讲师入驻表单页","用排行榜+日历组合做一个学习打卡页"]}},"planReviews":[{"round":1,"ok":false,"score":72,"rubric":{"atmosphere":7,"color":17,"typography":9,"components":11,"layout":9,"depth":5,"rules":4,"responsive":6,"sections":4},"issues":["hero-welcome.copy.greeting 含 emoji 👋，禁止使用表情符号","leaderboard.copy 中 rank_1_badge 等含 emoji 🥇🥈🥉，禁止使用表情符号","learning-calendar.copy.no_events 含 emoji 🎉，禁止使用表情符号","hero-welcome.copy.greeting 文案含占位符风格，需改为具体问候","sections 数量 9 超出整页上限 10，但 leaderboard 与 learning-calendar 可合并","leaderboard 使用 testimonial-grid 类型与排行榜意图不匹配","learning-calendar 使用 faq-accordion 类型与日历意图不匹配","hero-welcome 缺少 cta_primary 对应文案字段，elements 声明但 copy 未提供"],"revisedPlan":{"planId":"a8f3c7d1-9e5b-4f2a-8c6d-3e1b7a9d0f4c","goal":"在线学习平台首页，激发学习动力与课程探索","audience":"在职学习者与大学生，追求技能提升与系统化学习路径","tone":"modern-educational-tech","type":"fullHTML","designTokens":{"style":{"name":"modern-educational-tech","mood":"energetic","keywords":["learning","dashboard","progress-driven","clean-tech","warm-blue"],"density":"comfortable","philosophy":"用清晰的视觉层级和进度反馈，让学习成就感可视化，驱动持续学习行为。"},"colors":{"primary":"#2A6DF4","secondary":"#7C3AED","accent":"#F59E0B","success":"#10B981","warning":"#F59E0B","danger":"#EF4444","info":"#3B82F6","background":"#F8FAFC","foreground":"#0F172A","card":"#FFFFFF","border":"#E2E8F0","muted":"#94A3B8"},"cssVarPrefix":"--color-","colorRoles":{"primary":{"name":"Learning Blue","role":"CTA按钮、链接、进度条主色"},"accent":{"name":"Achievement Gold","role":"徽章、等级、排行榜高亮"},"secondary":{"name":"Course Purple","role":"课程分类标签、装饰元素"}},"gradients":[{"name":"hero-glow","stops":"linear-gradient(135deg, #2A6DF4 0%, #7C3AED 100%)","role":"hero 区域渐变背景"},{"name":"card-accent","stops":"linear-gradient(135deg, #2A6DF4 0%, #3B82F6 100%)","role":"继续学习卡片渐变条"},{"name":"progress-glow","stops":"linear-gradient(90deg, #2A6DF4 0%, #10B981 100%)","role":"进度条渐变"}],"states":{"hover":"#1D4ED8","active":"#1E40AF","focus":"#3B82F6","disabled":"#CBD5E1"},"fonts":{"heading":"Plus Jakarta Sans","body":"Inter","mono":"JetBrains Mono","display":"Plus Jakarta Sans","googleFontsUrl":"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&fam…;:{"heading":"'Plus Jakarta Sans', 'Segoe UI', sans-serif","body":"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif","mono":"'JetBrains Mono', 'SF Mono', Consolas, monospace"},"scale":{"display":{"size":"clamp(1.75rem, 3.5vw, 2.5rem)","weight":800,"lineHeight":"1.1","letterSpacing":"-0.03em"},"h1":{"size":"clamp(1.5rem, 2.5vw, 2rem)","weight":700,"lineHeight":"1.2","letterSpacing":"-0.02em"},"h2":{"size":"clamp(1.25rem, 2vw, 1.5rem)","weight":700,"lineHeight":"1.25"},"h3":{"size":"1.125rem","weight":600,"lineHeight":"1.3"},"h4":{"size":"1rem","weight":600,"lineHeight":"1.4"},"body":{"size":"0.9375rem","weight":400,"lineHeight":"1.6"},"small":{"size":"0.8125rem","weight":400,"lineHeight":"1.5"},"caption":{"size":"0.75rem","weight":500,"lineHeight":"1.4","letterSpacing":"0.02em"},"button":{"size":"0.875rem","weight":600,"lineHeight":"1","letterSpacing":"0.01em"},"overline":{"size":"0.6875rem","weight":700,"lineHeight":"1.2","letterSpacing":"0.08em"}},"lineHeight":{"tight":"1.1","base":"1.6","loose":"1.8"},"weight":{"regular":400,"medium":500,"semibold":600,"bold":700}},"components":{"button":{"default":"bg=primary fg=#FFFFFF padding=0.625rem 1.25rem radius=lg weight=600","hover":"bg=#1D4ED8 shadow=md translateY=-1px","active":"bg=#1E40AF translateY=0 shadow=sm","disabled":"opacity=0.5 cursor=not-allowed","focus":"ring=2px solid #3B82F6 offset=2px","variants":{"primary":{"default":"bg=primary fg=#FFFFFF padding=0.625rem 1.25rem radius=lg weight=600","hover":"bg=#1D4ED8 shadow=md","active":"bg=#1E40AF","focus":"ring=2px #3B82F6","disabled":"opacity=0.5"},"secondary":{"default":"bg=card fg=primary border=1.5px solid primary radius=lg weight=600","hover":"bg=primary/5","active":"bg=primary/10","focus":"ring=2px #3B82F6","disabled":"opacity=0.5"},"ghost":{"default":"bg=transparent fg=foreground radius=lg weight=500","hover":"bg=muted/10","active":"bg=muted/20","focus":"ring=2px #3B82F6","disabled":"opacity=0.5"}}},"card":{"default":"bg=card shadow=sm radius=xl padding=1.25rem border=1px solid border","hover":"shadow=lg translateY=-2px border-color=primary/20"},"nav":{"default":"bg=card/90 backdrop-blur=12px height=4rem border-bottom=1px solid border","scrolled":"bg=card shadow=sm","mobile":"drawer-from-right width=80vw"},"input":{"default":"bg=background fg=foreground border=1.5px solid border radius=lg padding=0.625rem 1rem","hover":"border=1.5px solid muted","focus":"border=1.5px solid primary ring=3px primary/15","error":"border=1.5px solid danger ring=3px danger/15","disabled":"opacity=0.5 cursor=not-allowed"}},"layout":{"container":{"maxWidth":"1280px","paddingX":"1.5rem"},"grid":{"columns":12,"gap":"1.5rem"}},"spacing":{"gutter":"1.5rem","sectionY":"3rem","scale":["0","0.25rem","0.5rem","0.75rem","1rem","1.5rem","2rem","3rem","4rem","6rem"],"tokens":[0,4,8,12,16,24,32,48,64,96]},"shadow":{"sm":"0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04)","md":"0 4px 12px rgba(0,0,0,.08)","lg":"0 8px 24px rgba(0,0,0,.10)","xl":"0 16px 48px rgba(0,0,0,.12)"},"surfaces":{"base":"bg=background shadow=none","raised":"bg=card shadow=sm radius=xl","overlay":"bg=card shadow=lg radius=xl","modal":"bg=card shadow=xl radius=2xl"},"elevation":{"base":"none","raised":"sm","overlay":"lg","modal":"xl"},"breakpoints":{"sm":"640px","md":"768px","lg":"1024px","xl":"1280px","2xl":"1536px"},"touchTarget":{"min":"44px"},"responsive":{"collapseStrategy":"sidebar→top-tabs, multi-col-grid→single-col, calendar→compact-week-view, stats-row→stacked","hidePriority":["calendar-side-detail","ranking-extra-stats","decorative-illustration"]},"radius":{"sm":"4px","md":"8px","lg":"12px","xl":"16px","2xl":"24px","full":"9999px"},"transition":{"fast":"150ms ease-out","base":"250ms ease-out","slow":"400ms cubic-bezier(0.4,0,0.2,1)"}},"sections":[{"id":"nav","type":"nav-sticky","purpose":"顶部导航栏，包含品牌标识、搜索框、通知和用户头像","elements":{"brand_logo":true,"search_bar":true,"notification_icon":true,"user_avatar":true,"nav_links":["首页","课程","学习计划","社区"]},"copy":{"brand":"SkillForge","search_placeholder":"搜索课程、技能或讲师...","nav_link_1":"首页","nav_link_2":"课程","nav_link_3":"学习计划","nav_link_4":"社区"},"interactions":["mobile-menu-toggle","search-focus-expand"],"notes":"搜索框在小屏折叠为图标按钮，点击展开"},{"id":"hero-welcome","type":"hero-centered","purpose":"欢迎区域，展示用户学习统计和每日学习目标","elements":{"greeting":true,"streak_badge":true,"daily_goal_progress":true,"total_learning_hours":true,"visual_hint":"渐变几何背景 + 学习成就装饰","cta_primary":true},"copy":{"greeting":"早上好，继续你的学习之旅","subtitle":"今天的目标是完成「React 高级模式」模块","streak_label":"连续学习","streak_value":"12 天","daily_goal_label":"今日进度","daily_goal_value":"65%","total_hours_label":"累计学习","total_hours_value":"128 小时","cta_primary":"继续学习"},"interactions":["counter-animate"],"notes":"greeting 根据时间段动态切换（早上好/下午好/晚上好）"},{"id":"course-categories","type":"feature-icon-list","purpose":"课程分类导航，支持点击切换筛选课程","elements":{"section_title":true,"category_chips":true,"active_category_indicator":true},"copy":{"section_title":"课程分类","category_1":{"label":"全部","icon":"grid","count":"42"},"category_2":{"label":"前端开发","icon":"code","count":"12"},"category_3":{"label":"后端开发","icon":"server","count":"8"},"category_4":{"label":"数据科学","icon":"chart","count":"6"},"category_5":{"label":"UI/UX 设计","icon":"palette","count":"5"},"category_6":{"label":"移动开发","icon":"smartphone","count":"4"},"category_7":{"label":"DevOps","icon":"cloud","count":"3"},"category_8":{"label":"AI 与机器学习","icon":"brain","count":"4"}},"interactions":["tab-switch"],"notes":"点击分类后触发下方课程列表的筛选切换，active 状态用 primary 色下划线 + 填充背景"},{"id":"continue-learning","type":"feature-grid","purpose":"继续学习卡片，展示用户正在进行的课程及进度","elements":{"section_title":true,"course_cards":3,"progress_bar":true,"continue_button":true},"copy":{"section_title":"继续学习","card_1_title":"React 高级模式与性能优化","card_1_instructor":"李明","card_1_progress":"68%","card_1_lessons":"14/22 课时","card_1_eta":"剩余约 3.5 小时","card_2_title":"TypeScript 4.x 完全指南","card_2_instructor":"王雪","card_2_progress":"42%","card_2_lessons":"8/19 课时","card_2_eta":"剩余约 5 小时","card_3_title":"Node.js 微服务架构","card_3_instructor":"张峰","card_3_progress":"25%","card_3_lessons":"5/20 课时","card_3_eta":"剩余约 8 小时","cta_continue":"继续学习"},"interactions":["scroll-reveal"],"notes":"每张卡片左侧有课程主题色渐变条，进度条用 progress-glow 渐变"},{"id":"learning-progress","type":"stats-row","purpose":"学习进度概览，展示本周学习统计和里程碑","elements":{"section_title":true,"stat_cards":4,"progress_chart_hint":"迷你柱状图展示本周每日学习时长"},"copy":{"section_title":"本周学习概览","stat_1_value":"18.5","stat_1_label":"学习时长 (小时)","stat_1_icon":"clock","stat_2_value":"7","stat_2_label":"完成课时","stat_2_icon":"check-circle","stat_3_value":"92%","stat_3_label":"课程完成率","stat_3_icon":"target","stat_4_value":"3","stat_4_label":"获得证书","stat_4_icon":"award","chart_weekdays":["周一","周二","周三","周四","周五","周六","周日"],"chart_values":[2.5,3,1.5,4,2,3.5,2]},"interactions":["counter-animate"],"notes":"迷你柱状图用 primary 色填充，hover 时显示具体数值"},{"id":"recommended-courses","type":"feature-bento","purpose":"推荐课程区域，基于用户学习历史和分类筛选展示","elements":{"section_title":true,"filter_tabs":true,"course_cards":4,"rating_stars":true,"enrollment_badge":true},"copy":{"section_title":"为你推荐","filter_all":"全部推荐","filter_popular":"热门","filter_new":"最新","filter_trending":" trending","card_1_title":"Vue 3 组合式 API 实战","card_1_instructor":"陈思","card_1_rating":"4.8","card_1_students":"2,340","card_1_level":"中级","card_1_duration":"16 小时","card_1_tag":"热门","card_2_title":"Python 数据分析与可视化","card_2_instructor":"刘洋","card_2_rating":"4.9","card_2_students":"4,120","card_2_level":"初级","card_2_duration":"20 小时","card_2_tag":"推荐","card_3_title":"Kubernetes 从入门到生产","card_3_instructor":"赵刚","card_3_rating":"4.7","card_3_students":"1,890","card_3_level":"高级","card_3_duration":"24 小时","card_3_tag":"新课","card_4_title":"Figma 设计系统搭建","card_4_instructor":"林悦","card_4_rating":"4.6","card_4_students":"3,560","card_4_level":"中级","card_4_duration":"12 小时","card_4_tag":"热门"},"interactions":["tab-switch","scroll-reveal"],"notes":"filter_tabs 点击切换推荐维度，卡片包含封面图占位、星级评分、报名人数"},{"id":"leaderboard","type":"testimonial-grid","purpose":"学习排行榜，展示本周学习时长排名，激励学习竞争","elements":{"section_title":true,"ranking_list":true,"top_3_highlight":true,"current_user_rank":true,"time_period_toggle":true},"copy":{"section_title":"学习排行榜","period_weekly":"本周","period_monthly":"本月","period_alltime":"总榜","rank_1_name":"周子涵","rank_1_hours":"24.5 小时","rank_1_badge":"金牌","rank_1_courses":"3 门","rank_2_name":"王子轩","rank_2_hours":"21.2 小时","rank_2_badge":"银牌","rank_2_courses":"2 门","rank_3_name":"李思琪","rank_3_hours":"19.8 小时","rank_3_badge":"铜牌","rank_3_courses":"4 门","rank_4_name":"张明远","rank_4_hours":"17.3 小时","rank_4_courses":"2 门","rank_5_name":"陈雨桐","rank_5_hours":"15.6 小时","rank_5_courses":"3 门","current_user_name":"你","current_user_rank":"第 8 名","current_user_hours":"12.4 小时","current_user_gap":"距第 5 名差 3.2 小时"},"interactions":["tab-switch","counter-animate"],"notes":"前三名用特殊样式突出（金/银/铜色），当前用户用 primary 色高亮"},{"id":"learning-calendar","type":"faq-accordion","purpose":"学习日历，展示本月学习计划和打卡记录","elements":{"section_title":true,"month_navigation":true,"calendar_grid":true,"study_streak_indicator":true,"today_highlight":true,"event_dots":true},"copy":{"section_title":"学习日历","month_label":"2026 年 7 月","weekday_headers":["一","二","三","四","五","六","日"],"streak_current":"当前连续","streak_days":"12 天","streak_best":"最长记录","streak_best_days":"21 天","today_event_1":"14:00 - React 高级模式 第 15 课","today_event_2":"16:00 - 算法练习 30 分钟","today_event_3":"20:00 - 社区直播：前端性能优化","no_events":"今天没有安排学习任务"},"interactions":["tab-switch"],"notes":"日历格子中已学习日期用 primary 色圆点标记，连续打卡形成 streak 连线"},{"id":"cta-community","type":"cta-banner","purpose":"社区号召，鼓励加入学习小组或参与挑战","elements":{"title":true,"subtitle":true,"cta_primary":true,"cta_secondary":true,"visual_hint":"学习小组插画装饰"},"copy":{"title":"一个人学习太孤单？","subtitle":"加入 SkillForge 学习社区，和 50,000+ 学习者一起组队打卡、分享笔记、参与挑战赛。","cta_primary":"加入社区","cta_secondary":"浏览热门小组"},"interactions":["smooth-scroll-to-#community"],"notes":"背景用 hero-glow 渐变，营造温暖社群氛围"},{"id":"footer","type":"footer-columns","purpose":"站点页脚，包含导航链接、社交入口和版权信息","elements":{"brand":true,"col_links":4,"social_icons":true,"newsletter_signup":true,"copyright":true},"copy":{"brand":"SkillForge","brand_desc":"让每一次学习都有迹可循。SkillForge 致力于为终身学习者提供系统化的技能提升路径。","col_1_title":"平台","col_1_link_1":"课程目录","col_1_link_2":"学习路径","col_1_link_3":"价格方案","col_1_link_4":"企业版","col_2_title":"支持","col_2_link_1":"帮助中心","col_2_link_2":"联系客服","col_2_link_3":"常见问题","col_2_link_4":"技术状态","col_3_title":"社区","col_3_link_1":"学习小组","col_3_link_2":"讲师入驻","col_3_link_3":"博客","col_3_link_4":"讨论区","col_4_title":"法律","col_4_link_1":"服务条款","col_4_link_2":"隐私政策","col_4_link_3":"Cookie 声明","newsletter_placeholder":"输入邮箱获取学习资源","newsletter_cta":"订阅","copyright":"© 2026 SkillForge. All rights reserved."},"interactions":[],"notes":"newsletter 输入框 + 按钮组合，小屏折叠为单列"}],"rules":{"dos":["所有进度条使用 progress-glow 渐变，从 primary 渐变到 success，传递成长感","排行榜前三名分别用金/银/铜色徽章突出，当前用户行用 primary 浅色背景高亮","课程卡片包含星级评分、报名人数和难度标签，信息密度适中","日历中已学习日期用 primary 色实心圆点标记，连续学习形成视觉连线","分类切换和排行榜时间周期切换使用 tab-switch 交互，active 态用下划线 + 填充色"],"donts":["不要使用紫色渐变 hero 或居中三列 feature 这种 AI 俗套布局","不要用 Lorem ipsum 或占位文案，所有课程名、讲师名、数据必须 mock 真实感","不要使用纯白色背景加纯黑色文字这种无层次的设计","不要堆砌过多动画导致页面卡顿，仅 counter-animate 和 scroll-reveal 两种交互动效","不要在移动端隐藏核心功能入口，采用折叠而非删除策略"]},"promptGuide":{"quickRef":"暖蓝+紫渐变主色调 + 圆角卡片 + 进度驱动视觉 + 排行榜金/银/铜徽章 + 8pt 间距系统","examples":["用 SkillForge 风格做一个课程详情页","用学习平台风格设计一个学习路径时间线组件","用相同设计系统做一个讲师入驻表单页","用排行榜+日历组合做一个学习打卡页"]}}},{"round":1,"ok":false,"score":82,"rubric":{"atmosphere":7,"color":16,"typography":9,"components":11,"layout":9,"depth":5,"rules":4,"responsive":6,"sections":15},"issues":["§2: accent(#F59E0B)与warning(#F59E0B)色值完全一致，语义冲突","§9: leaderboard section type为testimonial-grid与purpose排行榜不匹配","§9: learning-calendar section type为faq-accordion与purpose日历不匹配","§9: 缺少pricing区块，B2B整页应包含pricing/testimonial/faq至少其二","§9: recommended-courses copy中filter_trending值为'trending'含空格，疑似笔误","§9: cta-community section缺少id='community'锚点，interactions引用不匹配"],"revisedPlan":{"planId":"a8f3c7d1-9e5b-4f2a-8c6d-3e1b7a9d0f4c","goal":"在线学习平台首页，激发学习动力与课程探索","audience":"在职学习者与大学生，追求技能提升与系统化学习路径","tone":"modern-educational-tech","type":"fullHTML","designTokens":{"style":{"name":"modern-educational-tech","mood":"energetic","keywords":["learning","dashboard","progress-driven","clean-tech","warm-blue"],"density":"comfortable","philosophy":"用清晰的视觉层级和进度反馈，让学习成就感可视化，驱动持续学习行为。"},"colors":{"primary":"#2A6DF4","secondary":"#7C3AED","accent":"#F59E0B","success":"#10B981","warning":"#F97316","danger":"#EF4444","info":"#3B82F6","background":"#F8FAFC","foreground":"#0F172A","card":"#FFFFFF","border":"#E2E8F0","muted":"#94A3B8"},"cssVarPrefix":"--color-","colorRoles":{"primary":{"name":"Learning Blue","role":"CTA按钮、链接、进度条主色"},"accent":{"name":"Achievement Gold","role":"徽章、等级、排行榜高亮"},"secondary":{"name":"Course Purple","role":"课程分类标签、装饰元素"}},"gradients":[{"name":"hero-glow","stops":"linear-gradient(135deg, #2A6DF4 0%, #7C3AED 100%)","role":"hero 区域渐变背景"},{"name":"card-accent","stops":"linear-gradient(135deg, #2A6DF4 0%, #3B82F6 100%)","role":"继续学习卡片渐变条"},{"name":"progress-glow","stops":"linear-gradient(90deg, #2A6DF4 0%, #10B981 100%)","role":"进度条渐变"}],"states":{"hover":"#1D4ED8","active":"#1E40AF","focus":"#3B82F6","disabled":"#CBD5E1"},"fonts":{"heading":"Plus Jakarta Sans","body":"Inter","mono":"JetBrains Mono","display":"Plus Jakarta Sans","googleFontsUrl":"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&fam…;:{"heading":"'Plus Jakarta Sans', 'Segoe UI', sans-serif","body":"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif","mono":"'JetBrains Mono', 'SF Mono', Consolas, monospace"},"scale":{"display":{"size":"clamp(1.75rem, 3.5vw, 2.5rem)","weight":800,"lineHeight":"1.1","letterSpacing":"-0.03em"},"h1":{"size":"clamp(1.5rem, 2.5vw, 2rem)","weight":700,"lineHeight":"1.2","letterSpacing":"-0.02em"},"h2":{"size":"clamp(1.25rem, 2vw, 1.5rem)","weight":700,"lineHeight":"1.25"},"h3":{"size":"1.125rem","weight":600,"lineHeight":"1.3"},"h4":{"size":"1rem","weight":600,"lineHeight":"1.4"},"body":{"size":"0.9375rem","weight":400,"lineHeight":"1.6"},"small":{"size":"0.8125rem","weight":400,"lineHeight":"1.5"},"caption":{"size":"0.75rem","weight":500,"lineHeight":"1.4","letterSpacing":"0.02em"},"button":{"size":"0.875rem","weight":600,"lineHeight":"1","letterSpacing":"0.01em"},"overline":{"size":"0.6875rem","weight":700,"lineHeight":"1.2","letterSpacing":"0.08em"}},"lineHeight":{"tight":"1.1","base":"1.6","loose":"1.8"},"weight":{"regular":400,"medium":500,"semibold":600,"bold":700}},"components":{"button":{"default":"bg=primary fg=#FFFFFF padding=0.625rem 1.25rem radius=lg weight=600","hover":"bg=#1D4ED8 shadow=md translateY=-1px","active":"bg=#1E40AF translateY=0 shadow=sm","disabled":"opacity=0.5 cursor=not-allowed","focus":"ring=2px solid #3B82F6 offset=2px","variants":{"primary":{"default":"bg=primary fg=#FFFFFF padding=0.625rem 1.25rem radius=lg weight=600","hover":"bg=#1D4ED8 shadow=md","active":"bg=#1E40AF","focus":"ring=2px #3B82F6","disabled":"opacity=0.5"},"secondary":{"default":"bg=card fg=primary border=1.5px solid primary radius=lg weight=600","hover":"bg=primary/5","active":"bg=primary/10","focus":"ring=2px #3B82F6","disabled":"opacity=0.5"},"ghost":{"default":"bg=transparent fg=foreground radius=lg weight=500","hover":"bg=muted/10","active":"bg=muted/20","focus":"ring=2px #3B82F6","disabled":"opacity=0.5"}}},"card":{"default":"bg=card shadow=sm radius=xl padding=1.25rem border=1px solid border","hover":"shadow=lg translateY=-2px border-color=primary/20"},"nav":{"default":"bg=card/90 backdrop-blur=12px height=4rem border-bottom=1px solid border","scrolled":"bg=card shadow=sm","mobile":"drawer-from-right width=80vw"},"input":{"default":"bg=background fg=foreground border=1.5px solid border radius=lg padding=0.625rem 1rem","hover":"border=1.5px solid muted","focus":"border=1.5px solid primary ring=3px primary/15","error":"border=1.5px solid danger ring=3px danger/15","disabled":"opacity=0.5 cursor=not-allowed"}},"layout":{"container":{"maxWidth":"1280px","paddingX":"1.5rem"},"grid":{"columns":12,"gap":"1.5rem"}},"spacing":{"gutter":"1.5rem","sectionY":"3rem","scale":["0","0.25rem","0.5rem","0.75rem","1rem","1.5rem","2rem","3rem","4rem","6rem"],"tokens":[0,4,8,12,16,24,32,48,64,96]},"shadow":{"sm":"0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04)","md":"0 4px 12px rgba(0,0,0,.08)","lg":"0 8px 24px rgba(0,0,0,.10)","xl":"0 16px 48px rgba(0,0,0,.12)"},"surfaces":{"base":"bg=background shadow=none","raised":"bg=card shadow=sm radius=xl","overlay":"bg=card shadow=lg radius=xl","modal":"bg=card shadow=xl radius=2xl"},"elevation":{"base":"none","raised":"sm","overlay":"lg","modal":"xl"},"breakpoints":{"sm":"640px","md":"768px","lg":"1024px","xl":"1280px","2xl":"1536px"},"touchTarget":{"min":"44px"},"responsive":{"collapseStrategy":"sidebar→top-tabs, multi-col-grid→single-col, calendar→compact-week-view, stats-row→stacked","hidePriority":["calendar-side-detail","ranking-extra-stats","decorative-illustration"]},"radius":{"sm":"4px","md":"8px","lg":"12px","xl":"16px","2xl":"24px","full":"9999px"},"transition":{"fast":"150ms ease-out","base":"250ms ease-out","slow":"400ms cubic-bezier(0.4,0,0.2,1)"}},"sections":[{"id":"nav","type":"nav-sticky","purpose":"顶部导航栏，包含品牌标识、搜索框、通知和用户头像","elements":{"brand_logo":true,"search_bar":true,"notification_icon":true,"user_avatar":true,"nav_links":["首页","课程","学习计划","社区"]},"copy":{"brand":"SkillForge","search_placeholder":"搜索课程、技能或讲师...","nav_link_1":"首页","nav_link_2":"课程","nav_link_3":"学习计划","nav_link_4":"社区"},"interactions":["mobile-menu-toggle","search-focus-expand"],"notes":"搜索框在小屏折叠为图标按钮，点击展开"},{"id":"hero-welcome","type":"hero-centered","purpose":"欢迎区域，展示用户学习统计和每日学习目标","elements":{"greeting":true,"streak_badge":true,"daily_goal_progress":true,"total_learning_hours":true,"visual_hint":"渐变几何背景 + 学习成就装饰","cta_primary":true},"copy":{"greeting":"早上好，继续你的学习之旅","subtitle":"今天的目标是完成「React 高级模式」模块","streak_label":"连续学习","streak_value":"12 天","daily_goal_label":"今日进度","daily_goal_value":"65%","total_hours_label":"累计学习","total_hours_value":"128 小时","cta_primary":"继续学习"},"interactions":["counter-animate"],"notes":"greeting 根据时间段动态切换（早上好/下午好/晚上好）"},{"id":"course-categories","type":"feature-icon-list","purpose":"课程分类导航，支持点击切换筛选课程","elements":{"section_title":true,"category_chips":true,"active_category_indicator":true},"copy":{"section_title":"课程分类","category_1":{"label":"全部","icon":"grid","count":"42"},"category_2":{"label":"前端开发","icon":"code","count":"12"},"category_3":{"label":"后端开发","icon":"server","count":"8"},"category_4":{"label":"数据科学","icon":"chart","count":"6"},"category_5":{"label":"UI/UX 设计","icon":"palette","count":"5"},"category_6":{"label":"移动开发","icon":"smartphone","count":"4"},"category_7":{"label":"DevOps","icon":"cloud","count":"3"},"category_8":{"label":"AI 与机器学习","icon":"brain","count":"4"}},"interactions":["tab-switch"],"notes":"点击分类后触发下方课程列表的筛选切换，active 状态用 primary 色下划线 + 填充背景"},{"id":"continue-learning","type":"feature-grid","purpose":"继续学习卡片，展示用户正在进行的课程及进度","elements":{"section_title":true,"course_cards":3,"progress_bar":true,"continue_button":true},"copy":{"section_title":"继续学习","card_1_title":"React 高级模式与性能优化","card_1_instructor":"李明","card_1_progress":"68%","card_1_lessons":"14/22 课时","card_1_eta":"剩余约 3.5 小时","card_2_title":"TypeScript 4.x 完全指南","card_2_instructor":"王雪","card_2_progress":"42%","card_2_lessons":"8/19 课时","card_2_eta":"剩余约 5 小时","card_3_title":"Node.js 微服务架构","card_3_instructor":"张峰","card_3_progress":"25%","card_3_lessons":"5/20 课时","card_3_eta":"剩余约 8 小时","cta_continue":"继续学习"},"interactions":["scroll-reveal"],"notes":"每张卡片左侧有课程主题色渐变条，进度条用 progress-glow 渐变"},{"id":"learning-progress","type":"stats-row","purpose":"学习进度概览，展示本周学习统计和里程碑","elements":{"section_title":true,"stat_cards":4,"progress_chart_hint":"迷你柱状图展示本周每日学习时长"},"copy":{"section_title":"本周学习概览","stat_1_value":"18.5","stat_1_label":"学习时长 (小时)","stat_1_icon":"clock","stat_2_value":"7","stat_2_label":"完成课时","stat_2_icon":"check-circle","stat_3_value":"92%","stat_3_label":"课程完成率","stat_3_icon":"target","stat_4_value":"3","stat_4_label":"获得证书","stat_4_icon":"award","chart_weekdays":["周一","周二","周三","周四","周五","周六","周日"],"chart_values":[2.5,3,1.5,4,2,3.5,2]},"interactions":["counter-animate"],"notes":"迷你柱状图用 primary 色填充，hover 时显示具体数值"},{"id":"recommended-courses","type":"feature-bento","purpose":"推荐课程区域，基于用户学习历史和分类筛选展示","elements":{"section_title":true,"filter_tabs":true,"course_cards":4,"rating_stars":true,"enrollment_badge":true},"copy":{"section_title":"为你推荐","filter_all":"全部推荐","filter_popular":"热门","filter_new":"最新","filter_trending":"趋势","card_1_title":"Vue 3 组合式 API 实战","card_1_instructor":"陈思","card_1_rating":"4.8","card_1_students":"2,340","card_1_level":"中级","card_1_duration":"16 小时","card_1_tag":"热门","card_2_title":"Python 数据分析与可视化","card_2_instructor":"刘洋","card_2_rating":"4.9","card_2_students":"4,120","card_2_level":"初级","card_2_duration":"20 小时","card_2_tag":"推荐","card_3_title":"Kubernetes 从入门到生产","card_3_instructor":"赵刚","card_3_rating":"4.7","card_3_students":"1,890","card_3_level":"高级","card_3_duration":"24 小时","card_3_tag":"新课","card_4_title":"Figma 设计系统搭建","card_4_instructor":"林悦","card_4_rating":"4.6","card_4_students":"3,560","card_4_level":"中级","card_4_duration":"12 小时","card_4_tag":"热门"},"interactions":["tab-switch","scroll-reveal"],"notes":"filter_tabs 点击切换推荐维度，卡片包含封面图占位、星级评分、报名人数"},{"id":"leaderboard","type":"ranking-list","purpose":"学习排行榜，展示本周学习时长排名，激励学习竞争","elements":{"section_title":true,"ranking_list":true,"top_3_highlight":true,"current_user_rank":true,"time_period_toggle":true},"copy":{"section_title":"学习排行榜","period_weekly":"本周","period_monthly":"本月","period_alltime":"总榜","rank_1_name":"周子涵","rank_1_hours":"24.5 小时","rank_1_badge":"金牌","rank_1_courses":"3 门","rank_2_name":"王子轩","rank_2_hours":"21.2 小时","rank_2_badge":"银牌","rank_2_courses":"2 门","rank_3_name":"李思琪","rank_3_hours":"19.8 小时","rank_3_badge":"铜牌","rank_3_courses":"4 门","rank_4_name":"张明远","rank_4_hours":"17.3 小时","rank_4_courses":"2 门","rank_5_name":"陈雨桐","rank_5_hours":"15.6 小时","rank_5_courses":"3 门","current_user_name":"你","current_user_rank":"第 8 名","current_user_hours":"12.4 小时","current_user_gap":"距第 5 名差 3.2 小时"},"interactions":["tab-switch","counter-animate"],"notes":"前三名用特殊样式突出（金/银/铜色），当前用户用 primary 色高亮"},{"id":"learning-calendar","type":"calendar-grid","purpose":"学习日历，展示本月学习计划和打卡记录","elements":{"section_title":true,"month_navigation":true,"calendar_grid":true,"study_streak_indicator":true,"today_highlight":true,"event_dots":true},"copy":{"section_title":"学习日历","month_label":"2026 年 7 月","weekday_headers":["一","二","三","四","五","六","日"],"streak_current":"当前连续","streak_days":"12 天","streak_best":"最长记录","streak_best_days":"21 天","today_event_1":"14:00 - React 高级模式 第 15 课","today_event_2":"16:00 - 算法练习 30 分钟","today_event_3":"20:00 - 社区直播：前端性能优化","no_events":"今天没有安排学习任务"},"interactions":["tab-switch"],"notes":"日历格子中已学习日期用 primary 色圆点标记，连续打卡形成 streak 连线"},{"id":"pricing","type":"pricing-table","purpose":"价格方案展示，帮助用户选择适合的订阅计划","elements":{"section_title":true,"plan_cards":3,"feature_list":true,"cta_button":true,"popular_badge":true},"copy":{"section_title":"选择适合你的学习计划","plan_1_name":"免费版","plan_1_price":"¥0/月","plan_1_features":["10 门免费课程","基础学习统计","社区访问"],"plan_1_cta":"免费开始","plan_2_name":"专业版","plan_2_price":"¥49/月","plan_2_features":["全部课程访问","高级学习分析","证书颁发","优先客服"],"plan_2_cta":"订阅专业版","plan_2_popular":true,"plan_3_name":"企业版","plan_3_price":"¥199/月","plan_3_features":["团队管理","定制学习路径","API 集成","专属客户经理"],"plan_3_cta":"联系销售"},"interactions":[],"notes":"专业版卡片用 primary 色边框突出，popular_badge 用 accent 色"},{"id":"cta-community","type":"cta-banner","purpose":"社区号召，鼓励加入学习小组或参与挑战","elements":{"title":true,"subtitle":true,"cta_primary":true,"cta_secondary":true,"visual_hint":"学习小组插画装饰"},"copy":{"title":"一个人学习太孤单？","subtitle":"加入 SkillForge 学习社区，和 50,000+ 学习者一起组队打卡、分享笔记、参与挑战赛。","cta_primary":"加入社区","cta_secondary":"浏览热门小组"},"interactions":["smooth-scroll-to-#community"],"notes":"背景用 hero-glow 渐变，营造温暖社群氛围"},{"id":"footer","type":"footer-columns","purpose":"站点页脚，包含导航链接、社交入口和版权信息","elements":{"brand":true,"col_links":4,"social_icons":true,"newsletter_signup":true,"copyright":true},"copy":{"brand":"SkillForge","brand_desc":"让每一次学习都有迹可循。SkillForge 致力于为终身学习者提供系统化的技能提升路径。","col_1_title":"平台","col_1_link_1":"课程目录","col_1_link_2":"学习路径","col_1_link_3":"价格方案","col_1_link_4":"企业版","col_2_title":"支持","col_2_link_1":"帮助中心","col_2_link_2":"联系客服","col_2_link_3":"常见问题","col_2_link_4":"技术状态","col_3_title":"社区","col_3_link_1":"学习小组","col_3_link_2":"讲师入驻","col_3_link_3":"博客","col_3_link_4":"讨论区","col_4_title":"法律","col_4_link_1":"服务条款","col_4_link_2":"隐私政策","col_4_link_3":"Cookie 声明","newsletter_placeholder":"输入邮箱获取学习资源","newsletter_cta":"订阅","copyright":"© 2026 SkillForge. All rights reserved."},"interactions":[],"notes":"newsletter 输入框 + 按钮组合，小屏折叠为单列"}],"rules":{"dos":["所有进度条使用 progress-glow 渐变，从 primary 渐变到 success，传递成长感","排行榜前三名分别用金/银/铜色徽章突出，当前用户行用 primary 浅色背景高亮","课程卡片包含星级评分、报名人数和难度标签，信息密度适中","日历中已学习日期用 primary 色实心圆点标记，连续学习形成视觉连线","分类切换和排行榜时间周期切换使用 tab-switch 交互，active 态用下划线 + 填充色"],"donts":["不要使用紫色渐变 hero 或居中三列 feature 这种 AI 俗套布局","不要用 Lorem ipsum 或占位文案，所有课程名、讲师名、数据必须 mock 真实感","不要使用纯白色背景加纯黑色文字这种无层次的设计","不要堆砌过多动画导致页面卡顿，仅 counter-animate 和 scroll-reveal 两种交互动效","不要在移动端隐藏核心功能入口，采用折叠而非删除策略"]},"promptGuide":{"quickRef":"暖蓝+紫渐变主色调 + 圆角卡片 + 进度驱动视觉 + 排行榜金/银/铜徽章 + 8pt 间距系统","examples":["用 SkillForge 风格做一个课程详情页","用学习平台风格设计一个学习路径时间线组件","用相同设计系统做一个讲师入驻表单页","用排行榜+日历组合做一个学习打卡页"]}}}],"planId":"a8f3c7d1-9e5b-4f2a-8c6d-3e1b7a9d0f4c"}```
角色
assistant
content
total_tokens
34920
summary
生成SkillForge在线学习平台首页，含11个功能区块与交互
uiParsing
关闭