{
"整体布局": {

{
"整体布局": {
"类型": "多列布局",
"布局特征": "使用12栏Grid系统",
"间距特征": "元素间距统一使用gap-x-4，行间距gap-y-6"
},
"网格系统": {
"主容器": "grid grid-cols-12 gap-x-4 gap-y-6",
"嵌套布局": {
"导航区": "flex justify-between items-center",
"产品展示区": "grid grid-cols-4 gap-x-4",
"动态内容区": "grid grid-cols-3 gap-x-4"
}
},
"颜色方案": {
"主色调": "#007BFF",
"辅助色": "#FF6B00",
"中性色": ["#F8F9FA", "#E9ECEF", "#DEE2E6", "#6C757D", "#343A40"],
"渐变": {
"banner": "linear-gradient(135deg, #007BFF 0%, #0056b3 100%)"
},
"透明度": {
"hover": "0.85",
"overlay": "0.7"
}
},
"排版细节": {
"标题": {
"h1": "text-[clamp(2rem,5vw,3rem)] font-bold leading-tight",
"h2": "text-[clamp(1.5rem,3vw,2rem)] font-semibold leading-relaxed",
"h3": "text-xl font-medium leading-normal",
"h4": "text-lg font-medium leading-tight"
},
"正文": {
"normal": "text-base leading-relaxed",
"small": "text-sm leading-tight",
"xsmall": "text-xs leading-tight"
},
"特殊样式": {
"highlight": "font-bold text-primary",
"muted": "text-gray-500"
}
},
"组件特征": {
"按钮": {
"primary": "bg-primary text-white px-6 py-3 rounded-lg shadow-md hover:shadow-lg transition-all duration-300",
"secondary": "bg-white text-primary border border-primary px-6 py-3 rounded-lg hover:bg-gray-50 transition-all duration-300",
"icon": "flex items-center gap-2"
},
"卡片": {
"product": "rounded-xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden",
"feature": "rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-all duration-300"
},
"表单": {
"input": "w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all duration-300",
"select": "w-full px-4 py-3 rounded-lg border border-gray-300 appearance-none bg-white focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all duration-300"
}
},
"响应式特征": {
"breakpoints": {
"mobile": "max-w-xs",
"tablet": "max-w-md md:grid-cols-6",
"desktop": "max-w-6xl lg:grid-cols-12"
},
"elementVisibility": {
"hiddenMobile": "hidden sm:block",
"hiddenDesktop": "block sm:hidden"
}
},
"特殊效果": {
"transitions": {
"hover": "transition-all duration-300",
"fadeIn": "transition-opacity duration-500"
},
"shadows": {
"card": "shadow-md",
"hover": "shadow-xl",
"button": "shadow-sm"
},
"decorativeElements": {
"divider": "h-px bg-gray-200 my-6",
"accentLine": "h-1 w-16 bg-primary rounded-full my-4",
"badge": "absolute top-3 right-3 bg-secondary text-white text-xs font-bold px-2 py-1 rounded-full"
}
},
"元素结构顺序": {
"导航栏": [
{
"logo": "TEST",
"样式": "text-2xl font-bold text-primary"
},
{
"导航项": ["首页", "产品中心", "新闻动态", "关于我们", "联系我们"],
"样式": "text-gray-700 hover:text-primary transition-colors duration-300"
},
{
"功能按钮": ["搜索", "用户", "购物车"],
"图标": ["heroicons:search", "heroicons:user", "heroicons:shopping-cart"]
}
],
"banner区域": [
{
"背景": "一个视频展示",
"装饰元素": "绝对定位"
},
],
}
}