纸笔记本风格着陆页

纸笔记本风格着陆页 是做什么的？

此技能可将任何产品的真实内容转化为一个自包含的着陆页，采用温暖、手作的“学校笔记本”视觉语言，同时仍保持冷静和可信赖。 参考构建为 example/index.html（Atlasio——一个虚构的留学德国平台，支持TR/EN/DE）。开始之前请打开它； references/components.md 中包含每个模式的即用代码。screenshots/ 显示了每个部分应有的外观。

如果用户指向一个参考站点，请采纳其风格，但绝不使用其标志、插图、产品照片、措辞或文字商标。 请使用客户自己的品牌名称、内容和事实。

1. 设计前：阅读真实网站

1. 打开客户当前网站（以及他们分享的任何宣传册/PDF），提取真实内容：价值主张、 流程步骤、服务、带有来源和日期的数字、推荐语、常见问题回答、联系详情。
2. 找到客户的流程（例如“规划→准备→申请→到达”）。它将成为页面的主干：笔记本标签、 阶段面板、漫画条和文案都计数相同的阶段。如果客户有宣传册，其结构优先于网站的结构。
3. 记录下你不能编造的内容：价格、声明（“最好”、“最便宜”）、统计数据、法律/签证要求。 如果用户要求隐藏价格，用要约语言（“超值优惠 ✦”、“获取报价 →”、“套餐权益 ✦”）替换，而不是假数字。官方金额（例如签证所需余额）是事实，而非价格；保留它们并附带来源和日期。

2. 视觉DNA（全部保留）

元素	规则
底色	奶油色纸张 #fdfbf9，从不纯白；次要色带 #f6efea。仅一个浅色主题，有意为之。
墨水	可可色 #2b1a07 用于文本，炭黑色 #171717 用于轮廓，柔和 #8a7b6a 用于小字。
强调色	标记橙色 #ff6f1e 用于手写、下划线和页脚。如果客户自己的强调色是暖色，则使用客户的；否则保留橙色作为“标记”。
贴纸颜色	绿色 #22c55e，蓝色 #3b82f6，粉色 #ff66cf，黄色便利贴 #fadb4b。每个插图场景拥有其中一种颜色用于其高亮词。
显示字体	粗体、柔和、略带歪斜的衬线字体，例如 Gelica 或 Recoleta（付费）。免费选择：Fraunces，设置 SOFT 100、WONK 1，字重 800–900。
正文/UI字体	Geist（或 Inter）用于列表、按钮小字、说明文字。衬线字体（Fraunces 400）用于副标题和引用。
手写字体	Caveat（包含土耳其语/德语字形）。仅用于注释、便利贴、笔记本标签、漫画对话。永远不要用于段落。
按钮	“预订”按钮：奶油色胶囊，带有 4px 奶油色外环、1.5px 炭黑内边框、衬线标签、微小阴影。
形状	卡片圆角 12px，按钮圆角 20px，页脚顶部圆角 56px。轮廓为 1.5–2px 炭黑色，如钢笔线条。
阴影	柔和且低：0 2px 20px rgba(0,0,0,.06)。物体（笔记本、便利贴）在下方获得更长的投影。
导航	无导航栏。左上角固定圆形标志；右上角语言切换开关、小型“登录”胶囊和预订CTA按钮。
英雄标题	小写，巨大（clamp 60–112px），两行短句，前面带有一个橙色手写问候语（“亲爱的家长们，”）。

3. 区块模式（选择、排序并用真实内容填充）

大致按此顺序使用这些模式。每个模式在 references/components.md 中都有现成的代码片段。

1. 英雄区 + 笔记本封面 – 问候语、小写标题、带手写旁注的单行副标题（“集中一处。真的！”）、预订CTA、小型柔和注释。右侧：一个倾斜的笔记本。两个封面选项：
   • 一个皮革笔记本，带有白色姓名标签（姓名/目标/学期/阶段 1/4），通过示例用户个性化定制；
   • 一个根据客户自己的印刷材料改编的封面。如果客户有宣传册、小册子或传单封面，请在 HTML/SVG 中以封面大小重建（容器查询单位），使网页和印刷品匹配。示例中使用“Passport to your future”小册子：海军蓝、双金框、金色地球和飞机、橙色“Study in Germany”色带。
2. 滚动驱动笔记本 – 英雄笔记本随着用户滚动而移动（变直、放大、居中），然后其封面打开，显示带有眼睛贴纸和“点击开始！”的欢迎页面。一本笔记本，一个连续的运动。
3. 便利贴 – 居中的衬线行，带有一个拉长的单词（“一切切切切都在一处。”）和4张旋转的黄色便利贴，带有最强的证据点。
4. 插图场景 + 罗马数字面板（2–3个）– 全出血CSS/SVG插画，描绘用户的世界（书桌、天空中的飞机和天际线、校园…），奶油色面板，带有衬线标题，其中关键词为彩色，右侧边缘列出编号为I、II、III…的功能，以及一个设备模拟，点击项目时切换内容。其中一个场景应承载客户的阶段流程（面板=阶段，设备=该阶段的步骤+进度条）。
5. 涂鸦网格 – 3×3网格，包含手绘线条图标和手写说明；中心单元格包含区块标题。适用于服务/市场。橙色手写价格或报价文本。
6. 横线纸列表 – 一张倾斜的纸，带有红色边线和蓝色横线，手写清单（✓ 或 ✗），周围有小贴纸标签。适用于要求、“包含内容”、“我们从不做的事情”。
7. 彩色笔记本 – 3本笔记本（云纹蓝色、粉色、钴蓝色），带有姓名标签作为指南/产品的封面。
8. 漫画条 – 每个流程阶段一个画格，扁平SVG角色，炭黑轮廓，自动调整大小的对话气泡，每个画格下方带有罗马数字和阶段名称的说明文字。然后是带虚线顶部边框的简短推荐语。
9. FAQ – <details> 行，由桃色虚线分隔，橙色 +/– 标记。
10. 巨大页脚 – 橙色块，顶部圆角56px，衬线奶油色标题，通讯订阅字段和预订按钮，链接列，以及品牌名称作为巨大的深橙色文字商标。

4. 标志性交互

• 笔记本移动 + 打开 – 单个元素。阶段1（从页面顶部直到开启器区块粘住）：插值平移、旋转（-14° → 0）和缩放，从英雄占位符的矩形到舞台中心。阶段2（当舞台粘性时）：--p 0→1 使封面绕其左边缘旋转 rotateY(-178deg * p)。仅当JS运行且 prefers-reduced-motion 关闭时隐藏英雄占位符；减少运动时显示已打开的静态书籍。
• 面板 → 设备 – 每个罗马数字项目是一个 <button aria-current>；其 data-t（和可选的 data-sub，以竖线分隔的步骤列表）渲染到设备屏幕中。
• 自动调整大小对话气泡 – 切勿手动绘制围绕文本的气泡路径。仅将 <text> 放在 <g class="sb" data-cx data-y data-tx"> 中；JS 在 document.fonts.ready 后测量 getBBox()，如果文本宽度超过画框则缩小字体，绘制圆角矩形和指向说话者的尾部（data-tx），并将气泡限制在 300px 画框内。每次语言切换后重新运行。
• 语言切换 – 在HTML中保留源语言。字典将每个修剪后的源文本节点映射到 [en, de, …]；遍历文本节点一次，存储原始文本+前导/尾随空格，点击时交换；同时翻译 placeholder、data-t、data-sub。设置 <html lang>，在 localStorage 中记住选择（用 try/catch 包裹）。

5. 构建规则

• 一个自包含的HTML文件：内联CSS/JS，仅Google Fonts，每个插图使用内联SVG。不需要外部图片。
• 独立文件需要 <!doctype html>、<meta charset="utf-8"> 和 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">，否则手机渲染桌面布局。
• 使用 main{overflow-x:clip}（而非 hidden）以便移动的笔记本不会导致水平滚动并且 position:sticky 仍能工作。
• 所有颜色作为 :root 令牌；页面有意仅支持浅色，因此设置 color-scheme: light 和显式的 body 背景。
• 按钮是真实的 <button>/<a>，带有可见的 :focus-visible；装饰性SVG设置 aria-hidden="true"；漫画画格设置 role="img" + aria-label 描述场景。
• 尊重 prefers-reduced-motion：无移动，书籍打开，无悬停摇晃。
• 断点：≤980px 堆叠场景并隐藏装饰道具（.hide-sm）；≤600px 仅在角落保留标志+语言切换，漫画每行显示一个画格。

6. 撰写文案

• 对着屏幕另一端的人说话，短句，温暖但事实性。
• 标题小写；其他使用句子大小写。
• 手写旁注是玩笑或强调，1–3个词，每个部分最多一个。
• 将包含彩色词的标题拆分成在每种语言中仍能自然阅读的片段（词序会变化！）。 优先使用“一个计划。四个阶段， 十四个步骤”这样的结构，其中每个片段可以独立翻译。
• 将示例人物标记为示例（“Elif的故事是一个示例旅程”）。

7. 完成清单

• 所有内容均为客户的真实内容；无编造内容；保留来源和“最后检查”日期。
• 英雄笔记本平稳移动并打开；减少运动时显示静态打开的书籍。
• 每个对话气泡在每种语言中都包含其文本（通过 getBBox 或目视检查）。
• 每次语言切换都不会留下源语言文本（扫描文本节点，查找源语言特有的字母，例如ğ ş ı）。
• 在 390px 宽度下无水平滚动；手机角落仅显示标志+语言切换。
• 每个部分的截图，尺寸为 1440×900 和 390×844（参见 scripts/screenshots.mjs）。