gestaltung

设计：先打好地基，再装饰外墙

这个比喻

修缮老房子时，不会先粉刷外墙。首先要打好地基：修好卡住的门，给没有扶手的楼梯加上扶手，把装错位置的电灯开关移到合适的地方。只有房子住起来舒适了，才开始粉刷。坏门还没修好就刷上新漆，只会让问题看起来更漂亮。

粉刷外墙时，可以用一套色卡：一小组固定的颜色、字体和间距。房子里的所有地方都只用这些来装饰。这在专业术语中称为设计令牌。

**如何使用这个比喻：**在你的第一条回复中，先把它告诉对方，再提问或展示命令；即使对方一上来就想要解决方案，也要这样做。

沟通方式

• 如果对方希望页面「更漂亮」或「换个颜色」，你的第一条回复总是先讲打地基再装饰外墙的比喻，再说明五个步骤。之后才询问页面在哪里，以及你如何访问它。
• **不要只提问：**如果缺少项目或某项信息，仍然给出具体步骤，或者把文件写成带有明确标注的草稿（[假设：…]）。最后再询问缺少的信息。
• 使用「你」称呼对方，表达简短。每条批评都要有依据：指出哪个页面、哪个位置，最好附上截图。单说「看起来有点乱」不算依据。
• 由对方决定偏好。你可以提出不同方向，并如实说明每种方向的优势和风险。
• 对方自己的要求（徽标、主题色、称呼、必备文本）优先于任何设计建议。
• 在对方看过截图并同意之前，不得发布任何内容。

流程

如果你还看不到页面（文件夹里没有项目，也没有网址），先用五个简短步骤说明完整流程：检查、修复操作体验、选择三个明显不同的方向、确定色卡、改造。然后才询问页面在哪里。

0. 范围（5 分钟）

从 docs/plan.md（技能 webseite-planen）中沿用以下信息：面向谁、访客最重要的需求、页面。还要询问：哪些内容必须保留（徽标、颜色、字体、文本）？创建 docs/gestaltung/。

1. 从三个角度检查（只读，不做修改）

依次从三个角度检查页面。每个发现都在 docs/gestaltung/pruefung.md 中占一行：

ID	页面和位置	发生了什么、影响谁、为什么不好	依据	严重程度	建议（新文本的逐字内容或新的行为）

• **流程（AB）：**从头到尾走完最重要的流程。需要几步？第一屏是否就给出了答案？有没有死胡同？是否清楚由谁提供服务以及费用是多少？
• **无障碍（ZG）：**使用技能 barrierefreiheit 中的检查清单（对比度、键盘、图片描述、表单、手机）。
• **状态和用语（ZS）：**加载时、表单为空时、出错时、提交后分别会显示什么？同一事物是否始终使用相同的词语？按钮是否说明点击后的结果（例如「申请预约」而不是「提交」）？

严重程度：严重（主要功能无法使用或违反法律）、高（经常导致错误或中途放弃）、中、低。小型页面记录 10 至 15 条有依据的发现即可。同一个错误如果出现在多处，算一条发现，并列出所有位置。最后说明哪些地方做得好，应该保留。

2. 做出决定并修好地基

把需要对方决定的事项集中列出来（附上你的建议），不要一项一项地问。然后开始修复：先修复共用部分（按钮、表单字段、错误提示、确认信息），再修复各个页面。这一步保留现有颜色和字体。

3. 三个方向

1. **参考案例：**查看计划中的两三个网站。它们有哪些做得好的地方？哪些我们不会照搬（它们的 Logo、颜色、字体）？
2. **诊断：**为什么现在的外观不够好？常见问题：所有标题的视觉权重都一样、两种风格并存、一种颜色有多种含义、间距不一致。
3. 三个明显不同的方向，而不只是三种颜色。它们在理念、字体、颜色的作用、形状和层次感上各不相同。例如：「柔和」（温暖、圆润）、「清晰」（像报纸一样沉静）、「醒目」（色块、大标题）。
4. 每个方向都展示相同的两到三个页面（首页、最重要的子页面、联系页面），使用真实文本。占位文本会影响判断。
5. 所有方向都保持一致：Logo、必需文本、每页一个主要按钮、无障碍设计。

docs/gestaltung/richtungen.md：顶部写一行 Entscheid: <Richtung oder Mischung> (<Datum>)，下方写诊断，并为每个方向添加一张表格（理念、字体、颜色、形状、优势、风险）。将设计稿保存为 docs/gestaltung/entwuerfe/ 中的 HTML 文件，方便对方在浏览器中打开。

4. 色板（Tokens）

创建一个 tokens.css 文件，其中包含 CSS 变量：浅色和深色模式的颜色、字体、字号、间距、圆角。每个代码块都用一句注释说明原因。规则：

• 所有可点击元素使用同一种操作色，其他地方不得使用。
• 计算对比度，不要估算：文本至少为 4,5 : 1，按钮和边框至少为 3 : 1（计算公式见 Skill barrierefreiheit）。将数值写入注释。
• 深色模式只替换颜色变量（@media (prefers-color-scheme: dark)）。
• 除 tokens.css 外，代码中不得手动指定颜色和字号。

5. 改造

内容和流程保持不变。先打好基础（引入 Tokens、制作通用部分、完成一个参考页面），然后再处理其他页面。色板中缺少某个值时，应在色板中补充，而不是写入页面代码。

6. 照片和批准

对每个页面拍照，分别使用手机和桌面宽度，并在浅色和深色模式下拍摄：

npx playwright screenshot --viewport-size=375,812 --full-page https://{name}.aufwind.sh docs/gestaltung/fotos/start-375.png
npx playwright screenshot --viewport-size=1440,900 --full-page --color-scheme=dark https://{name}.aufwind.sh docs/gestaltung/fotos/start-1440-dunkel.png

亲自查看每张照片，并与设计稿对比。之后再展示给对方。得到对方同意后：记录日志（Skill git-logbuch），运行流水线（Skill pipeline）。

注意事项

• 先做外观，再考虑易用性：这会让错误定型。
• 三个方向只有颜色不同：这算不上真正的选择。
• 在代码中手动指定颜色：深色模式就会出问题。
• 没有亲自查看照片就说「完成」。

检查任务

使用 mission_pruefen 和 webseite-03-gestaltung。检查会确认 ~/projekt/docs/gestaltung/richtungen.md 中是否包含决策，以及页面是否有响应。

结束消息

此步骤中的最后一条消息，开头要用一句话说明「先打好地基，再做外墙」这一形象表达的核心意思。之后说明：已完成的内容、结果所在位置、尚未解决的问题，以及接下来要做什么。