Resume-Matcher 简历模板设计规范全解Swiss 国际主义风格的设计系统与源码实现【免费下载链接】Resume-MatcherThe #1 AI Harness for Building Resumes, PDFs, Cover Letters more, locally with 100 LLMs support.项目地址: https://gitcode.com/GitHub_Trending/re/Resume-Matcher本文以 docs/agent/design/resume-template-design-spec.md 为核心系统拆解 Resume-Matcher 前端模板系统中 Swiss 国际主义风格Swiss International Style简历模板的设计规范包括排版、间距、色彩、章节顺序、双栏布局、CSS 类体系与打印分页约束并结合仓库中swiss-single单栏与swiss-two-column双栏两套模板的源码与样式文件说明规范如何落地为可运行的 React 组件与 CSS Modules。读完本文你将能理解这套规范的全部设计参数掌握其在源码中的对应实现位置并学会通过模板设置项定制间距、字号、页边距等视觉变量。Resume-Matcher 是一套本地化运行的 AI 简历工作台提供简历构建、PDF 导出、求职信与岗位匹配等能力其前端内置多套简历模板其中swiss-single是默认模板。本文聚焦的这份设计规格书正是这两套瑞士风格模板的设计宪法——所有排版、间距、色彩与分页行为都围绕它展开。一、规范定位一份面向模板实现者的设计规格resume-template-design-spec.md是一份非常精炼的设计规格书副标题即点明其性质Swiss International Style specifications for resume templates。它不是面向最终用户的操作手册而是面向实现简历模板的工程师/Agent 的约束清单——任何新模板或对现有模板的修改都必须满足其中的排版参数、色彩取值、章节顺序与打印规则。该规格在仓库中的配套文档还有两份更具体的实现说明docs/agent/design/templates/swiss-single-spec.md单栏模板实现规格IDswiss-singledocs/agent/design/templates/swiss-two-column-spec.md双栏模板实现规格IDswiss-two-column。规格对应的真实模板类型定义在 apps/frontend/lib/types/template-settings.ts 中TemplateType联合类型包含swiss-single、swiss-two-column、modern、modern-two-column、latex、clean、vivid七种默认模板即为swiss-single。React 组件导出则集中在 apps/frontend/components/resume/index.ts其中ResumeSingleColumn与ResumeTwoColumn是本文讨论的两套瑞士风格实现。二、Typography排版规范与系统字体栈规格书首先用一张表定义了六类元素的字体族、字号与字重这是整个瑞士风格少即是多气质的根基ElementFontSizeWeightName姓名serif2xlboldTitle职位头衔seriflgnormalSection heading章节标题seriflgsemiboldJob title职位名sansbasesemiboldCompany公司名sanssmmediumBody text正文sanssmnormalMetadata元信息monoxsnormal2.1 三种字族的落地serif / sans / mono规格中的 serif、sans、mono 在实现层面映射为 apps/frontend/components/resume/styles/_base.module.css 顶部定义的系统字体栈 CSS 变量--header-fontui-serif, Georgia, Cambria, Times New Roman, Times, serif用于姓名、章节标题--body-fontui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji用于正文、职位名、公司名--resume-font-monoui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace定义在 apps/frontend/components/resume/styles/_tokens.css用于日期、元信息等.resume-meta、.resume-date元素。设计要点正文与标题分属 sans / serif 两种字族而元信息年份、地点、技能标签统一使用等宽字体形成信息密度 vs 视觉层级的双重对比——这正是瑞士国际主义风格用字体分类信息的典型手法。2.2 字号缩放机制CSS 变量驱动的比例系统规格书用抽象级别2xl / lg / base / sm / xs描述字号实现则通过基准字号 × 缩放系数的 CSS 变量机制落地见 _base.module.css.resume-name { font-size: calc(var(--font-size-base) * var(--header-scale)); /* 默认 14px × 2 28px */ font-family: var(--header-font); font-weight: 700; color: var(--resume-text-primary); } .resume-section-title { font-size: calc(var(--font-size-base) * var(--section-header-scale)); /* 默认 14px × 1.2 16.8px */ font-family: var(--header-font); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--resume-border-primary); }--font-size-base默认14px--header-scale默认2--section-header-scale默认1.2与 swiss-single-spec.md 中 Name: 2em (28px)、Section Header: 1.2em 的数值完全对应。这套变量由 template-settings.ts 中的映射表驱动FONT_SIZE_MAP基准字号五档11px / 12px / 14px / 15px / 16px默认第 3 档HEADER_SCALE_MAP姓名缩放系数五档1.5 / 1.75 / 2 / 2.25 / 2.5默认 2SECTION_HEADER_SCALE_MAP章节标题缩放系数五档1.0 / 1.1 / 1.2 / 1.3 / 1.4默认 1.2HEADER_FONT_MAP/BODY_FONT_MAP标题与正文字族在serif、sans-serif、mono之间切换的字体栈映射。字体设置还会在双栏模板中产生变体侧栏章节标题使用.resume-section-title-sm字号为base × section-header-scale × 0.88比主栏略小以保证侧栏信息密度对应源码见 _base.module.css 中.resume-section-title-sm的定义。2.3 细节字重与大小写的实现规格表中 Section heading 定义为 semibold实现中.resume-section-title使用font-weight: 700并配合text-transform: uppercase全大写与letter-spacing: 0.05em字距拉开强化章节的视觉分割而职位副标题类元素.resume-item-subtitle使用font-weight: 600公司名.resume-item-subtitle内联渲染则与职位名同级呈现。单栏与双栏组件中姓名统一为.resume-name并附加uppercase tracking-tightTailwind 工具类实现紧凑大写效果见 resume-single-column.tsx 与 resume-two-column.tsx 的 Header 渲染段。三、Spacing间距规范与可调档位规格书定义的间距基线如下ElementSpacingBetween sections章节间距16-24pxBetween items条目间距8-12pxLine height行高1.4-1.6实现层面间距被抽象为两个 CSS 变量与一个行高变量声明在 _base.module.css.resume-body { --section-gap: 1rem; /* 章节间距默认 16px */ --item-gap: 0.25rem; /* 条目间距默认 4px */ --line-height: 1.35; /* 行高默认 1.35 */ --margin-top: 10mm; --margin-bottom: 10mm; --margin-left: 10mm; --margin-right: 10mm; }用户可在格式化控制面板formatting-controls.tsx中通过 5 档间距设置调整这些变量映射关系见 template-settings.tsSECTION_SPACING_MAP章节间距五档6 / 10 / 16 / 20 / 24px默认 16px即 1rem与规格 16-24px 区间吻合ITEM_SPACING_MAP条目间距五档2 / 4 / 8 / 12 / 16px默认 4pxLINE_HEIGHT_MAP行高五档1.15 / 1.25 / 1.35 / 1.45 / 1.55默认 1.35规格推荐 1.4-1.6实现范围覆盖到 1.55 档。说明规格书给出的 16-24px / 8-12px / 1.4-1.6 是设计建议区间而实现通过五档枚举让用户在更广范围内调节默认值则取在区间内的最稳妥档位章节 16px、行高 1.35 与规格下限接近。如需接近规格上限可选择第 4、5 档。间距的消费方式贯穿组件.resume-section使用margin-bottom: var(--section-gap).resume-items、.resume-stack使用gap: var(--item-gap).resume-item使用margin-bottom: var(--item-gap)且末子元素归零。双栏布局的列间空隙同样使用var(--section-gap)保证横纵间距视觉一致见下文双栏小节。3.1 compactMode一键压缩模板设置中还有compactMode紧凑模式开关其实现也落在 template-settings.ts 的settingsToCssVars函数中开启后章节/条目间距乘以COMPACT_MULTIPLIER 0.6行高乘以更温和的COMPACT_LINE_HEIGHT_MULTIPLIER 0.92避免文本重叠页边距不参与压缩。这为一页简历诉求提供了比规格基线更紧的间距档。四、Colors色彩令牌与主题切换规格书用代码块定义了四色体系Text: #000000 (Ink) Links: #1D4ED8 (Hyper Blue) Dividers: #E5E5E0 Background: #FFFFFF这四色在设计层面是黑白 一个高亮蓝 一个浅灰分隔线的极简组合符合瑞士风格对色彩克制的追求。实现层面的落地位于 _tokens.css该文件是所有模板共享的色彩令牌层.resume-body { --resume-text-primary: #000000; --resume-text-secondary: #374151; /* gray-700 */ --resume-text-tertiary: #4b5563; /* gray-600 */ --resume-text-body: #1f2937; /* gray-800 */ --resume-border-primary: #9ca3af; /* gray-400 */ --resume-border-secondary: #d1d5db;/* gray-300 */ --resume-border-tertiary: #e5e7eb; /* gray-200 */ --resume-accent-bg: #f3f4f6; /* gray-100 */ --resume-accent-primary: #1d4ed8; /* blue - default */ --resume-accent-light: #dbeafe; /* blue light - default */ }对应关系如下正文主色Text #000000→--resume-text-primary姓名、条目标题、链接使用链接色Links #1D4ED8→--resume-accent-primary同时作为 Modern 等模板的主题强调色分隔线Dividers #E5E5E0→--resume-border-tertiary: #e5e7eb色值近似作为最浅一级边框背景#FFFFFF→.resume-body未显式设置背景色默认继承页面白色背景。值得注意的是令牌系统为黑白底 强调色扩展了完整的灰阶次级文字、三级文字、三级边框、强调底色各司其职保证打印灰度下的可读性。强调色还支持主题切换——ACCENT_COLOR_MAP定义了blue / green / orange / red四套primary light配色默认 blue由settingsToCssVars在运行时注入--resume-accent-primary与--resume-accent-light变量供强调色模板动态换肤。单栏模板的分隔线还用在 Header 底部边框style{{ borderColor: var(--resume-border-primary) }}见 resume-single-column.tsx 的header渲染。五、Section Order章节顺序与动态渲染机制规格书规定了 6 个标准章节的固定顺序Header姓名、职位、联系方式Summary个人摘要Work Experience工作经历Projects项目Education教育背景Additional技能、语言、证书、奖项该顺序在代码中的权威默认值是 apps/frontend/lib/utils/section-helpers.ts 里的DEFAULT_SECTION_METApersonalInfo(0) → summary(1) → workExperience(2) → education(3) → personalProjects(4) → additional(5)。注意这里默认元数据把 Education 排在 Projects 之前而规格书把 Projects 排在 Education 之前——实际渲染顺序由每个简历的sectionMeta决定用户可以在 Builder 中拖拽调整。5.1 排序与可见性getSortedSections()是模板组件实际消费的排序入口从sectionMeta过滤isVisible的章节后按order升序排列同时getSectionMeta()在简历缺少sectionMeta时回退到默认元数据。单栏组件 resume-single-column.tsx 通过sortedSections.map(renderSection)按顺序渲染除personalInfo作为 Header 单独处理外的所有章节。此外章节标题支持 i18n 本地化localizeDefaultSectionMeta()只对仍保留英文默认名的内置章节翻译标题如 Summary → 摘要不会覆盖用户的自定义命名对应实现同样在 section-helpers.ts与多语言消息文件apps/frontend/messages/zh.json 等配合。5.2 自定义章节除 6 个内置章节外系统支持用户创建自定义章节isDefault: false通过createCustomSection()生成custom_N形式的 ID 并追加到章节列表末尾渲染时由DynamicResumeSectiondynamic-resume-section.tsx按sectionType动态渲染。这就是Additional技能/语言/证书/奖项之外可以无限扩展的第五个维度规格书中的顺序约定因此成为默认顺序而非硬编码顺序。六、Two-Column Layout双栏布局与侧栏分工规格书用 ASCII 图明确了双栏的空间分配与内容分工┌────────────────────┬──────────┐ │ Main (65%) │ Side 35% │ ├────────────────────┼──────────┤ │ Experience │ Summary │ │ Projects │ Education│ │ Certifications │ Skills │ │ │ Languages│ │ │ Awards │ └────────────────────┴──────────┘其设计意图是主栏承载招聘者最关心的经历信息侧栏承载支撑性信息适配技术岗与一页简历。6.1 网格实现该布局在 apps/frontend/components/resume/styles/swiss-two-column.module.css 中实现为 CSS Grid.grid { display: grid; grid-template-columns: 65% 35%; /* Main column 65%, Sidebar 35% */ gap: var(--section-gap); margin-top: var(--section-gap); align-items: start; } .mainColumn { display: flex; flex-direction: column; gap: var(--section-gap); padding-right: 0.875rem; border-right: 1px solid var(--resume-border-tertiary); overflow: hidden; } .sidebarColumn { display: flex; flex-direction: column; gap: var(--section-gap); padding-left: 0.75rem; overflow: hidden; min-width: 0; }细节设计值得注意grid-template-columns: 65% 35%与规格图的 65/35 完全一致主栏右侧通过border-right: 1px solid var(--resume-border-tertiary)实现垂直分隔线对应 swiss-two-column-spec 中 Main column has border-right using --resume-border-tertiary两栏均设置overflow: hidden防止内容溢出侧栏设置min-width: 0确保窄列中日期等white-space: nowrap元素不会把网格撑破align-items: start让两栏顶部对齐而非拉伸等高。6.2 主栏 / 侧栏的源码分工双栏组件 resume-two-column.tsx 的渲染逻辑与规格图一一对应主栏左Summary → Work Experience → Projects → Certifications/Training → 自定义章节侧栏右Education → Skills.resume-skill-pill药丸标签→ Languagesjoin( • )点分隔→ Awards → LinksLinkedIn/GitHub/Website 链接列表。侧栏还使用了两套适配窄列的样式.resume-section-title-sm小号章节标题与.sidebar-text-wrapword-break: break-word; overflow-wrap: break-word; hyphens: auto三件套防止长单词撑破侧栏。6.3 单栏是退化的双栏单栏模板 resume-single-column.tsx 的容器类.container仅设width: 100%见 swiss-single.module.css所有布局交由基础类的纵向堆叠完成Additional 章节则以标签 逗号分隔的横向行Technical Skills: a, b, c形式呈现而不是侧栏的药丸。两份配套规格分别将其描述为最大内容密度、适合详细经历描述单栏与空间效率优先、适合技术岗一页简历双栏——它们共享同一套字体/间距/色彩令牌只在布局结构上分叉。七、CSS Classes类体系全览规格书给出了四个核心类的语义.resume-section /* Section wrapper 章节容器 */ .resume-section-title /* Heading 章节标题 */ .resume-items /* Item container 条目容器 */ .resume-item /* Single entry 单个条目 */这四个类只是整个体系的骨架_base.module.css 中围绕它们建立了一套完整且自洽的类族按职责可分为五组组别类名作用容器.resume-body、.resume-header、.resume-section、.resume-items、.resume-item简历容器含页边距 padding、页眉、章节、条目列表、单条目标题.resume-name、.resume-title、.resume-section-title、.resume-section-title-sm、.resume-item-title、.resume-item-title-sm、.resume-item-subtitle、.resume-item-subtitle-sm姓名/职位/章节标题/条目标题/副标题含主栏与侧栏两种尺寸正文.resume-text、.resume-text-sm、.resume-text-xs、.resume-meta、.resume-meta-sm、.resume-date正文三档字号、等宽元信息、右对齐日期white-space: nowrap防止换行列表.resume-stack、.resume-stack-tight、.resume-list、.resume-row、.resume-row-tight纵向 flex 堆叠与行距控制间距均为var(--item-gap)的倍数特殊.resume-skill-pill、.resume-link-pill、.resume-link、.sidebar-text-wrap、.text-muted技能药丸、链接药丸项目 GitHub/网站、内联链接、侧栏换行、弱化文字这些类通过 CSS Modules 的baseStyles[resume-item-title]形式在组件中引用如 resume-single-column.tsx 中工作经历条目title company bullet list的经典组合.resume-item-title与右侧.resume-date同行 baseline 对齐公司名与地点居中一行描述为带•圆点的.resume-list。富文本内容加粗、斜体、下划线、内联链接通过:global()选择器统一兜底保证编辑器产物在简历中的样式一致。八、Print Considerations打印与分页的工程细节规格书对打印输出提出三条硬性规则Never split.resume-itemacross pages单个条目严禁跨页断裂Never orphan section headers章节标题严禁成为页尾孤行Minimum 50% page fill before break分页前页面至少填充 50%即避免过早分页造成大量留白。这三条规则在 _base.module.css 中均有对应的工程化实现且分为常态声明与打印强化两层。8.1 常态防断裂声明.resume-item { margin-bottom: var(--item-gap); break-inside: avoid; page-break-inside: avoid; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; } .resume-section-title { break-after: avoid; /* 标题后不换页 */ page-break-after: avoid; orphans: 3; /* 段首至少保留 3 行 */ widows: 3; /* 段尾至少保留 3 行 */ }break-inside: avoid系列属性保证条目整体跨页break-after: avoid保证标题与后续内容同页orphans/widows: 3则从排版层面避免标题、段落被切出孤行。8.2 打印强化块文件底部有一段完整的media print块用!important强化上述规则并补齐边界情况media print { .resume-body { page-break-inside: avoid !important; break-inside: avoid-page !important; } .resume-item { break-inside: avoid !important; page-break-inside: avoid !important; } .resume-section-title, .resume-section-title-sm { break-after: avoid !important; page-break-after: avoid !important; } /* 标题与其第一个条目/段落/列表保持同页 */ .resume-section-title .resume-items *:first-child, .resume-section-title p, .resume-section-title ul, .resume-section-title .resume-item { break-before: avoid !important; ... } /* 富文本格式与链接在 PDF 中强制还原 */ .resume-body :global(a) { color: inherit !important; text-decoration: underline !important; } }Minimum 50% page fill 属于内容排版纪律而非纯 CSS 可强制项其实际约束由打印预览页apps/frontend/app/print/resumes/[id]/page.tsx与 PDF 渲染管线后端 apps/backend/app/pdf.py配合实现工程师在写长条目时需人为控制内容密度让分页点落在页面中后部。可参考 docs/agent/design/print-pdf-design-spec.md 与 docs/agent/design/pdf-template-guide.md 了解完整打印/PDF 设计约束。九、从规范到可运行模板配置、渲染与验证链路9.1 设置默认值与 CSS 变量注入模板设置的默认值定义在 template-settings.ts 的DEFAULT_TEMPLATE_SETTINGS{ template: swiss-single, // 默认单栏模板 pageSize: A4, // 页面尺寸 A4 / LETTER margins: { top: 10, bottom: 10, left: 10, right: 10 }, // 单位 mm spacing: { section: 3, item: 2, lineHeight: 3 }, // 均为 1-5 档 fontSize: { base: 3, headerScale: 3, headerFont: serif, bodyFont: sans-serif }, compactMode: false, showContactIcons: false, // 联系方式是否显示图标 accentColor: blue, }这些设置在运行时由settingsToCssVars()统一转换为 CSS 自定义属性--section-gap、--font-size-base、--margin-top等以内联样式注入.resume-body从而同时作用于屏幕预览Builder 与 resume-component.tsx和 PDF 打印渲染——这是所见即所得的关键机制一份设置、两条渲染路径共享同一套 CSS 变量。9.2 模板选择与字体预设用户通过 template-selector.tsx 切换模板TEMPLATE_OPTIONS中的Single Columnswiss-single与Two Columnswiss-two-column描述即对应本文的两套瑞士模板。切换时调用applyTemplatePreset()处理模板的签名字体latex、clean等单字型模板会强制预设其标志性字族而瑞士双模板不在预设表中切换时保留用户当前的字体设置。9.3 测试保障模板注册的完整性由 apps/frontend/tests/template-registration.test.ts 守护它验证每个TemplateType都有对应的可渲染组件注册组件级渲染正确性则由 resume-clean.test.tsx、resume-latex.test.tsx 等模板测试及 apps/frontend/tests/template-registration.test.ts 覆盖。后端侧还有 apps/backend/tests/integration/test_pdf_render.py 验证 PDF 渲染管线确保打印输出与屏幕预览一致。十、给模板贡献者的实践清单综合规格书与源码实现若要新增或修改一套符合规范的瑞士风格模板应逐项对照以下检查点字族姓名/章节标题使用--header-fontserif正文/职位使用--body-fontsans日期/元信息使用--resume-font-mono字号以--font-size-base为基准通过--header-scale默认 2与--section-header-scale默认 1.2等比缩放不要写死像素值间距章节间距消费--section-gap条目间距消费--item-gap行高消费--line-height避免引入第三个硬编码间距色彩文字一律取--resume-text-primary等令牌分隔线取--resume-border-tertiary强调色取--resume-accent-primary禁止硬编码十六进制色值章节遵循 6 内置章节 自定义章节模型渲染顺序交由getSortedSections()驱动不要硬编码顺序双栏使用grid-template-columns: 65% 35%、align-items: start、主栏border-right分隔侧栏元素使用-sm变体与小字号类打印条目必须break-inside: avoid标题必须break-after: avoidorphans/widows: 3并在media print中补充!important强化与标题-首条目同页规则配置新增的视觉自由度如间距档位、字体选择应接入TemplateSettings与settingsToCssVars()使预览与 PDF 两条路径同时生效。结语resume-template-design-spec.md以不足 70 行的篇幅浓缩了瑞士国际主义风格简历的全部设计约束而 apps/frontend/components/resume/styles/_base.module.css、_tokens.css、swiss-single.module.css、swiss-two-column.module.css 四份样式文件与 resume-single-column.tsx、resume-two-column.tsx 两个组件则把每条规范翻译成了可运行、可测试、可被用户配置的工程实现。理解这份设计宪法与它的代码化身之间的关系是继续为 Resume-Matcher 贡献新模板如 Modern、LaTeX、Clean、Vivid 系列的扩展的前提——所有模板共享同一套令牌系统与打印纪律而瑞士双模板正是这套体系最经典的参照样本。【免费下载链接】Resume-MatcherThe #1 AI Harness for Building Resumes, PDFs, Cover Letters more, locally with 100 LLMs support.项目地址: https://gitcode.com/GitHub_Trending/re/Resume-Matcher创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考