webseite-modernisieren

网站现代化改造：翻新一栋老房子

这个比喻

一栋老房子要翻新，而不是拆掉重建。首先，有人拿着记事本和相机逐个房间查看：这里有什么、哪些还能用、哪些已经腐朽，以及家人特别珍视什么，比如瓷砖炉。只有完成现状清单后，才开始改造。没有家人的同意，任何一堵墙都不会拆掉。

**这样使用这个比喻：**在你的第一条回复中用一句话提到它，同时说明你现在要做什么。

说话方式

• **立即开始。**对方发来一个地址或说「现代化改造……」时，不要问对方想做什么。用一句话说明你现在会逐个查看旧网站的每个页面，以及大约需要多久，然后马上开始。
• 对方不必知道下一步是什么。你来提出建议，对方简短同意后就着手做。
• 使用「你」的称呼和日常用语。不要说「站点地图」，而要说「所有页面的列表」；不要说「表单后端」，而要说「请求会发到哪里」。
• 只问只有对方才知道的事。网页上已有的信息，你自己去查看。
• 绝不询问密码，包括旧网站的登录密码。需要登录才能查看的内容，记为「无法查看」。

流程

1. 现状调查，无需询问

工作文件夹是在当前文件夹中新建的文件夹，名称取自网站（例如 curling-grindelwald）。现状调查不需要账户或服务器。首先调用 konto_status。如果显示有账户，第一件事就是在浏览器中打开岛屿，使用 open https://albatros.build/cockpit/insel（其他语言的前缀以及 Linux 和 Windows 的命令见技能 webseite-bauen 的「Die Insel」部分）。如果没有响应或没有账户，就跳过岛屿继续操作。

1. **读取所有页面。**脚本 bestand.mjs 位于此技能的文件夹中（在 Claude Code 中，路径显示在顶部的「Base directory for this skill」）。只需要 Node：

   node <ordner-dieses-skills>/bestand.mjs https://www.beispiel.ch docs/bestand
   

   脚本会读取 sitemap.xml，跟随同一网站地址下的链接，并生成：docs/bestand/bestand.json（页面、含字段的表单、嵌入内容、邮件、电话、价格、时间、文档、第三方服务）、每个页面的文本（存放在 docs/bestand/seiten/），以及图片和文档（存放在 docs/bestand/dateien/）。如果没有 Node，就用 curl -sL https://www.beispiel.ch/sitemap.xml 获取页面列表，再逐个获取页面。
2. **拍摄旧网站的照片。**为导航中的每个页面各拍一张手机宽度和桌面宽度的照片。第一次运行时，Playwright 会下载一个浏览器（约 150 MB）：

   npx -y playwright install chromium
   npx -y playwright screenshot --viewport-size=390,844 --full-page https://www.beispiel.ch/ docs/bestand/fotos/start-390.png
   npx -y playwright screenshot --viewport-size=1440,900 https://www.beispiel.ch/ docs/bestand/fotos/start-1440.png
   

   亲自查看每张照片。它们能呈现文字无法说明的内容：布局、图片、手机上的显示效果。
3. **找出每项功能。**对照这份清单检查文本和照片，并记录每一项所在的位置及目前的实现方式：
   • 表单：联系、报名、预约、订购、球员或合作伙伴信息交流、留言簿。有哪些字段？请求会发到哪里？
   • 日期和安排：日历、锦标赛、课程、训练时间、营业时间、赛季。
   • 文档：PDF（招标文件、排名表、章程、菜单），有多少份，有多旧。
   • 价格、会员费、费率。
   • 图片：图库（相册数量、图片数量）、Logo、带链接的赞助商。
   • 嵌入内容和第三方系统：地图、视频、预订系统、商店、新闻通讯、社交媒体、天气、网络摄像头（bestand.json 中的 einbettungen 和 fremdeDienste）。
   • 需要登录的区域、语言、法律声明和隐私政策、指向其他网站的链接。

2. 现状规划 docs/bestand.md

# Bestand: <Name der Seite>

**Adresse:** … · **erfasst:** <Datum> · **gebaut mit:** <z. B. Jimdo> · **Seiten:** <Anzahl> · **Sprachen:** …

## Seiten
| Seite | Adresse | Was drauf ist, in einem Satz | Zustand | Foto |
|---|---|---|---|---|

## Funktionen
| Funktion | Wo | Wie heute | Muss bleiben? | Entscheid |
|---|---|---|---|---|
| Kontaktformular (Name, E-Mail, Nachricht) | /kontakt | Formular von Jimdo | ja | offen |

## Inhalte
Texte, Bilder (Anzahl, eigene oder fremde), Dokumente, Logos, Sponsoren.

## Was veraltet ist
Jeder Punkt mit Beleg, zum Beispiel «News von 2019 auf der Startseite», «Bilder unscharf am Handy», «Gästebuch voller Werbung».

## Was bleiben muss
Was die Besucher brauchen und was gut ist.

## Offene Fragen

决定一栏要一直标为「待定」，直到对方作出决定：「保留」、「改为……」或「移除（决定于 ）」。只要这里还没有这样的决定，新网站就不能删掉任何功能。

docs/bestand/dateien/ 不要放进项目记录，它太大，而且包含他人的版权内容：把它加入 .gitignore。之后再根据新网站的需要，有选择地复制所需内容。

3. 先反馈，然后只问三个问题

用简单的话简短地说明你发现了什么，并用数字列出：有多少个页面、有哪些功能、哪些内容已经过时、哪些做得不错。然后只问对方才能回答的问题，并在一条消息中编号列出：

1. 现在和以后由谁维护网站，内容多久更新一次？
2. 什么是不可更改的？ 哪些内容必须保持原样（Logo、颜色、一段文字、一个页面、一个功能）？
3. 希望吸引更多谁？ 访客、新会员、赞助商，还是参赛团队？

其他内容都由你自己提出，并用标记注明假设（[假设：…]），让对方可以纠正。

4. 从现状到计划

遵循技能 webseite-planen。大多数答案已经包含在现状中：直接采用，并让对方确认即可。现状中的每项功能都要列入计划，并提出建议：

• 只需要文字和文件的内容（活动日期、比赛、PDF、价格、赞助商、图库），做成普通的静态页面，也可以支持多种语言（Light 就够了）。
• 表单：通常提供邮件链接就够了。如果需要保存报名列表，就用一个组件（技能 bausteine，包含试点）。
• 充斥广告的留言簿，或只有旧技术才需要的登录功能，可以删掉，但必须由对方决定。
• 其他网站链接的旧地址（公告、排名、Google 搜索结果）保持不变，或设置重定向。

将决定记录在 docs/bestand.md（「决定」列）和 docs/plan.md 中。

5. 分八个步骤构建

从这里开始，按照技能 webseite-bauen 的固定顺序执行：Mockup、Design、Framework、PRD、本地、港口、流水线、页面或服务。此外还要遵循以下要求：

• PRD 列出 docs/bestand.md 中的每项功能及其决定，不能悄悄删掉任何一项。
• 设计时，要查看旧网站的照片：哪些内容不可更改（Logo、颜色）？哪些显得过时？
• 本地构建完成后，先并排展示改造前后的首页和最重要的子页面，分别呈现手机版和桌面版，并用三句话说明哪些内容变好了、哪些保持不变。
• 新网站正常运行后，旧地址才能指向新网站（技能 domain）。

权利

旧网站上的文字、照片和 Logo 都属于某人，通常属于协会或企业，有时属于摄影师。现代化改造不属于自己的网站时，必须先取得运营方的许可，才能发布其中的内容。下载的文件只是用于查看的工作副本。照片中可辨认的人物必须同意使用其照片。因此，发布前要询问：「这些文字和图片属于你们吗？或者你们是否取得了许可，例如获得了理事会的许可？」

注意事项

• 功能悄悄丢失：表单被直接移除，排名也再也找不到。最后要检查现状中的每一行。
• 旧地址失效：公告和排名经常被其他网站链接。
• 将包含数千张图片的图库原样搬过去：最好挑选一部分最好的图片并缩小尺寸，其余图片留在存档中。
• 做得像 AI 生成的：开始构建第一个页面前，先阅读技能 gestaltung 中的典型特征列表。
• 沿用旧网站的 Cookie 横幅：没有跟踪功能、也没有第三方嵌入内容的静态网站不会设置 Cookie，因此不需要 Cookie 横幅。提供隐私声明即可。只有在某些内容需要获得同意时才需要横幅，例如嵌入 Google 地图。通常只需提供包含地址的「规划路线」链接，无需嵌入地图，这样网站就不需要 Cookie 横幅。

结束消息

此步骤中，你的最后一条消息要以一句关于「翻新老房子」的比喻开头，再次点明核心要旨。然后说明发现或构建了什么、内容在哪里（docs/bestand.md、照片）、对方还需要决定什么，以及下一步要做什么。