Design extraction demo · 静态站点

Google 风格主页视觉提炼（自适应版）

这是一个“空白内容 + 演示组件”版本。保留了目标站点的配色层级、卡片圆角、按钮主次色关系、内容留白和块级节奏；同时剔除了固定宽度，改为多设备友好的流式宽度。

查看模块示例查看代码片段

背景色#F4F8FF
主色#4285F4
卡片半径16px / 20px

公众号正文预览（静态示意）

标题区域

这是文案落地模板区，可视化展示内容结构。

模块留白、字号层级、按钮色卡与边框样式保持一致。

Style token

配色与布局抽象

基础色板

bg#F4F8FF surface#FFFFFF surfaceSoft#EAF0FF primary#4285F4 accent#FBBC05 stepBlue#4285F4 stepRed#EA4335 stepYellow#FBBC05 stepGreen#34A853

整体页面通过 CSS 变量统一控制，替换主色后可快速换肤，不影响组件结构。

间距与边框策略

页面容器：clamp(18px, 4vw, 34px)
模块内边距：20px 22px 起步
分栏切换：移动端单列，桌面可变为 2-3 列
圆角：卡片 16~20px，按钮 10~14px

Google-style detail

更鲜明的模块分割与状态色

Google 四色带

Blue Red Yellow Green

用于流程分段、状态提示或卡片顶部条，在高密度内容中形成快速识别。

状态块示例

准备中 高优先任务

进行中 阻塞待处理

复审中 重点关注

完成可发布

交付清单区

高亮按钮：主色 + 阴影
边缘状态：4px 侧边色条
卡片留白：16px 起步，桌面更稀疏

Building Blocks

可复用 UI 模块（空白内容演示）

导航 + 英雄区

头部与首屏

演示固定顶部导航、移动端折叠菜单、按钮层级和主视觉按钮布局。

主按钮次按钮

.site-header {
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(16px);
}

卡片系统

信息块与统计块

每个卡片采用统一背景 + 边框 + 阴影，保证信息密集页面也有轻微层次。

指标 A

120+

指标 B

指标 C

稳定

.card {
  border: 1px solid #D8E2FF;
  background: #FFF;
  box-shadow: 0 14px 26px rgba(35, 38, 58, 0.09);
}

交互模块

输入区 + 标签

保留空白输入和标签区，可直接对接 API 或演示表单。

input { border-radius: 12px; padding: 12px 14px; }

流程模块

横向 Step 组件（可滑动）

Step 01

选题提炼

标题结构 + 场景标签 + 内容方向。

Step 02

结构生成

先出框架再填充段落，保持一致节奏。

Step 03

模板匹配

基于文本密度与赛道自动选择样式。

Step 04

素材预览

图片与互动模块自动拼接，可直接发布。

当前为示例内容，不依赖后端；可直接替换文本与按钮事件。

模板展示区

多标签切换演示

热点模板

场景化标题区分与醒目标注。

资讯模板

适配长文结构，段落较密。

方法模板

步骤卡片更易读，适合清单类内容。

情绪模板

更偏关系表达与共鸣场景。

代码演示

示例代码与实际效果对照

HTML

<div class="card">
  <div class="mini-card">卡片块 01</div>
  <button class="btn btn-primary">按钮示例</button>
</div>

CSS

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
}

演示落点

“空白”内容区域

此区域保留给未来功能位，当前展示为占位示例。你可以按模块逐一替换文案和数据。