Guizang · Swiss International · Layout Recipes

瑞士风版式菜谱 S01–S12

AI 不是从零排版,而是按固定三步走: 复制种子壳 → 从这 12 个菜谱里选结构 → 把文字填进骨架。 下面每张卡是线框示意,帮你一眼看懂这一页该怎么摆。

1. template-swiss-card.html → 2. 选 S0x 菜谱 → 3. 填内容 · 截图导出
S01强调色封面

什么时候用小红书封面:一个清晰概念,不要装饰色块乱飘。

Cover · 封面
大标题
一句话观点
CATEGORY2026.05
结构说明大标题 + 抽象块 + 底栏元信息
S02双信号对比

什么时候用二选一、两种来源、两个产品方向并排讲。

Compare · 对比
两种做法
A
B
结构说明左右两大模块,一实一虚
S03数据层 / 文件卡

什么时候用讲 Markdown、记忆库、数据源、状态字段这类「对象」。

Source · 数据源
对象是什么
.MD
TYPE
OWNER
PATH
STATE
结构说明文件卡 + 3–4 条属性列表
S04界面 / 浏览器框

什么时候用讲 HTML、UI、演示稿、交互层——要「像产品界面」。

Interface · 界面
输出长这样
结构说明浏览器外框 + 主内容 + 功能模块
S05警示三行

什么时候用讲问题、反模式、「别这么干」清单页。

Trap · 警示
别踩这三坑
01
02
03
结构说明大标题 + 三行「标签 | 后果」
S06流水线 / 架构

什么时候用讲工作流、分层系统:源 → 渲染 → 分享。

Pipeline · 流程
三步怎么走
1
2
3
结构说明三阶段:编号 + 标签 + 动作
S07收束台账

什么时候用结尾页:一个大论点,再用三条收束。

Takeaway · 结尾
记住这一句
01
02
03
结构说明大论点 + 三条编号台账(常配深底)
S08大图英雄页

什么时候用有一张强图时:公众号 21:9 主封面,或小红书封面。

CATEGORY2026.05
Cover
叠在图上的
主标题
132K
STAT A
3.4×
STAT B
98%
STAT C
含完整 HTML 骨架大图区 + 叠字标题 + 底部 3 数字
S09KPI 数据塔

什么时候用产品更新、增长帖:3–4 个数字要比高低一眼看清。

Data · 指标
四组数字
132K
A
3.4M
B
68%
C
8%
D
含完整 HTML 骨架4 根高度编码的塔柱
S10横向排行条

什么时候用TOP N、排名、5–10 项谁更大,用条长编码。

Ranking · TOP
本月排行
Item A
94
Item B
78
Item C
62
Item D
48
Item E
36
Item F
28
含完整 HTML 骨架标签 + 横向条 + 数值
S11堆叠台账行

什么时候用账单、清单、能力库存:每行是「大数字 + 标签 + 图标」。

Ledger · 台账
钱花在哪
¥1280
¥860
¥540
¥320
含完整 HTML 骨架数字 · 标签 · 图标纵向堆叠
S12矩阵 + 底部大数

什么时候用能力矩阵、清单总览:小格子铺开,底部一个总数字收口。

Matrix · 能力
十二件事
01
02
03
04
05
06
07
08
12
含完整 HTML 骨架矩阵格子 + 底部 mega 数字