mcpField
W
webseite-bauen

webseite-bauen

github.com/dischen87其他011 次安装今天更新
代码仓库

关于 webseite-bauen

webseite-bauen 是指导网站项目按八个阶段推进的技能，从线框稿和设计确认到部署上线。它面向使用 Albatros 建站的用户，强调按固定顺序审批后再实施。

主要功能

  1. 01八阶段网站构建流程
  2. 02制作并审阅线框稿和设计方案
  3. 03要求 PRD 获批后再构建
  4. 04构建并预览静态 Astro 网站
  5. 05推送代码并检查部署

适用场景

  1. 01在实施前规划新网站
  2. 02按流程确认设计与需求
  3. 03使用 Albatros 构建并发布静态网站

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/dischen87/albatros-skills --skill webseite-bauen

安装后在 Claude Code 中输入/webseite-bauen确认已加载。

详细介绍

构建网站：从平面图到成品房屋

这个比喻

房屋按固定顺序建成：先画草图，再选择设计方案，然后签署施工图，接着施工，最后入住。家人还没签署方案之前，没人会浇筑地基。在控制舱的岛屿上，房屋会随着每一步逐渐建成。

如何使用这个比喻： 在你的第一条回复中，用一句话说明你们目前进行到哪一步。

沟通方式

  • 顺序是固定的。不要跳过任何步骤，也不要在对方批准 PRD 之前开始建造。
  • 提议下一步，得到简短的肯定后就执行。对方不需要知道接下来要做什么。
  • 使用「你」的称呼和日常用语。第一次提到「PRD」时要解释：一页纸上的签字版施工图。
  • 网站保持静态，不使用自有服务。只有在对方确实需要时，才添加一个组件（Skill bausteine）。
  • 对方需要查看的内容（岛屿、Mockup、设计方案、预览、港口、成品网站），由你亲自在浏览器中打开：open <adresse oder datei>（Linux 使用 xdg-open，Windows 使用 start）。只提供地址是不够的。

岛屿

一开始就要在浏览器中打开对方的岛屿。在 https://albatros.build/cockpit/insel 上，每个项目都有一栋会随着每一步逐渐建成的房屋。法语、意大利语和英语页面需要在地址前加上语言前缀，例如 /fr/cockpit/insel：

open https://albatros.build/cockpit/insel        # macOS; Linux: xdg-open, Windows: start

岛屿会自动刷新，打开一次就够了。

每完成一步后，调用 Albatros 的工具 schritt_melden，传入 schritt（mockup、entwuerfe、prd、lokal、hafen、fliessband、live、domain）和 sprache（对话所用的语言）。通常不传入 projekt：此时使用港口中的项目日志（[email protected]:<name>/projekt.git），即使它要到稍后才创建。只有另一个仅存于电脑上的项目，才传入由小写字母、数字和「-」组成的简短名称。回复会指出步骤和岛屿地址。用一句话告诉对方，他们的房屋又建成了一步。

  • 岛屿上的进度只能向前。如果你报告的步骤已经完成，就不会有任何变化。回复会说明这一点，不要再次尝试。
  • Albatros 也会自行识别 hafen、fliessband、live 和 domain。完成后仍要报告这些步骤。
  • 如果回复为「Ungültige Angaben」，说明步骤或名称拼写错误：修正后重新调用一次。
  • 如果没有该工具，或回复为「unbekannt」，就不使用岛屿，继续进行。

八个步骤

1. Mockup（schritt: mockup）

快速制作粗略的灰度稿：将首页和最重要的子页面放在一个 HTML 文件 docs/mockup.html 中，使用真实的标题和来自平面图（docs/plan.md）或现有网站（docs/bestand.md）的内容。它展示布局和顺序，不包含颜色或图片（使用灰色占位区）。在浏览器中打开它，只问：「顺序对吗？」

2. 设计（schritt: entwuerfe）

遵循 Skill gestaltung 的「Drei Richtungen」部分。先询问网站的个性，而不是颜色。然后在 Mockup 的基础上提出两到三个明显不同的方案：页面保持相同，每种方向各做一版，以 HTML 格式放在 docs/gestaltung/entwuerfe/ 中。接着根据 AI 特征清单进行检查，并询问是否需要设计元素（图标、插画、照片、吉祥物、3D）。由对方选择一个方向或混合方案。

3. Framework

如果对方没有指定，就选择最合适的方案，并用一句话说明原因。对于静态网站，选择 Astro：它能构建快速、简洁的 HTML 页面，Albatros 可以直接提供这些页面。只有在对方提出要求或网站确实需要时，才使用其他 Framework。

4. 展示 PRD 并请对方验收（schritt: prd）

在一页中编写 docs/prd.md，并展示给对方。只有对方同意后，才开始构建。

# PRD: <Name der Seite>

**Für wen und wozu:** … (aus docs/plan.md)
**Seiten:** Start, …
**Funktionen:** jede Funktion mit Entscheid (bei einer bestehenden Seite alle aus docs/bestand.md)
**Design:** Richtung <Name>, Eigenschaften …, Schrift …, Gestaltungselemente …
**Framework:** Astro (statisch), weil …
**Hosting:** Light (Seite aus dem Hafen, ohne eigenen Server) oder Pilot (eigener Server)
**Domain:** name.aufwind.sh, später eigene Domain (nur mit Pilot)
**Nicht dabei:** …

Abgenommen: <Datum> von <Name>
5. 在本地构建并展示（schritt: lokal）
npm create astro@latest web -- --template minimal --install --no-git --skip-houston --yes
  • 在 web/astro.config.mjs 中设置 outDir: '../seite'。Albatros 会提供 seite/ 目录中的内容：使用 Light 时直接提供，使用 Pilot 时通过流水线提供。
  • gestaltung 技能中的色板位于 web/src/styles/tokens.css。除此之外，不得手动指定颜色或字号。
  • 预约、赛事或赞助商等列表以数据形式存放在 web/src/data/*.json 中，页面会读取这些数据。文档和图片放入 web/public/，图片要缩小。
  • 构建并在浏览器中打开预览： 
    cd web && npm run build && npx astro preview --open
  • 准备手机和桌面尺寸的照片（gestaltung 技能，第 6 步），并与 PRD 对照：逐项检查其中的功能和内容，并在 docs/prd.md 中注明它们在新页面上的位置。如果有缺漏，就在发布前补上。如果缺少素材（例如赞助商徽标），请放置标注清晰的占位符，绝不要用其他图片冒充。
  • 像访客一样亲自检查每张照片：图片上的文字是否清晰易读，是否有内容被裁切或遮挡？不合适的地方要在发布前修正。
  • 浏览器标签页中的图标（web/public/favicon.svg 和 favicon.ico）是 Astro 的「A」：请替换为徽标或其中的一个图形元素。
  • 预览运行后，报告 lokal。
6. 推送到港口（schritt: hafen）

Albatros 的港口（code.aufwind.sh）是对方的训练仓库：代码存放在这里，并且是私有的。如果还需要账户、订阅和密钥，现在请从第 3 步开始执行 start 技能。然后获取日志簿，并将新页面放进去（git-logbuch 技能）：

git clone [email protected]:{name}/projekt.git logbuch
cp -R web docs seite logbuch/        # ohne web/node_modules, das schliesst web/.gitignore aus
echo "docs/bestand/dateien/" >> logbuch/.gitignore   # Arbeitskopie der alten Seite bleibt draussen
cd logbuch && git add .gitignore web docs seite && git commit -m "Neue Seite: <Richtung>" && git push

接着在浏览器中打开港口，让对方看到代码已存放在其中：

open https://code.aufwind.sh/{name}/projekt
7. 流水线（schritt: fliessband）

这只是简单的流水线，没有什么特别之处（pipeline 技能）。使用 Light 时不需要流水线：港口中 main 分支下 seite/ 目录里的内容，大约一分钟后就会由 Albatros 显示。使用 Pilot 时，流水线会通过 .github/workflows/deploy.yml 将页面部署到服务器。

8. 页面或服务器（schritt: live，之后是 schritt: domain）
  • Light： Albatros 会在无需自有服务器的情况下，通过 https://{name}.aufwind.sh 显示页面。
  • Pilot： 页面运行在自有服务器上，地址同样是 https://{name}.aufwind.sh。

你要亲自检查，绝不让对方等待。 不要说「几分钟后再来看看」，而是推送后亲自检查，直到页面上线，最长等待三分钟：

curl -sf -o /dev/null --retry 12 --retry-delay 15 --retry-all-errors https://{name}.aufwind.sh/ && echo "Seite ist da"
  • 已上线： 报告 fliessband 和 live，与对方一起打开地址（open https://{name}.aufwind.sh），并与第 5 步的照片进行对照。
  • 三分钟后仍未上线： 查询 konto_status。使用 Light 时，这里会显示最新版本是否已上线，或还缺少什么。常见原因是港口中缺少 seite/index.html，因为推送前没有构建，或者 seite/ 被列在 .gitignore 中。使用 Pilot 时，在港口的「Actions」中查看流水线停在哪一步（pipeline 技能）。修复问题、创建新提交、推送，然后再次检查。只有仍然无法解决时，才告诉对方你检查了什么，并询问教练（coach_fragen）。

使用 domain 技能添加自有域名（仅限 Pilot），然后报告 domain。

只发布属于对方或已获得其许可的内容（webseite-modernisieren 技能的「权利」部分）。

常见陷阱

  • 在 PRD 之前就开始构建：这样会把错误的页面做得很精美。
  • 三个设计稿只有颜色不同：这不是真正的选择。
  • 忘记构建 seite/：港口里就会留下旧页面。每次推送前，都要在 web/ 中运行 npm run build。
  • 让用户干等（“稍后再来看看”）：你要亲自检查，直到页面就绪（步骤 8）。
  • 没有报告某个步骤：岛上的房子就会一直停在那里。每完成一个步骤，就立即报告。

结束消息

你在此步骤发送的最后一条消息，要先用一句关于“从平面图到建成的房子”的话，再次点明核心。接下来说明：八个步骤中完成了哪一步、结果在哪里、用户需要做出什么决定，以及接下来要进行哪一步。

评论

支持 Markdown