Portfolio design system
本网站具有一个设计系统。在更改任何样式之前，请先阅读仓库根目录下的 DESIGN.md，并以此为依据进行工作。
规则
- 每种颜色、字体大小、间距步长、圆角半径和动效时长都必须在
index.html顶部:root块中定义为CSS自定义属性。在样式规则中应使用这些标记。切勿硬编码任何已被标记覆盖的原始十六进制颜色值、像素大小或时长。 - 新值需要在
:root中添加一个新标记，并在DESIGN.md中添加对应的行，所有这些应在同一个更改中完成。 该设计系统也作为Claude制品存在于Claude中 (https://claude.ai/artifact/2iPwsVBSqA9gs8nkaYC5g1)。当标记、模式或规则在此处发生更改时，应在同一工作中更新该制品的project/tokens.json和project/README.md文件，以确保三个副本始终同步。 - 文本和背景需成对出现。新的面板颜色类必须同时设置两者。请参照
DESIGN.md中的AA级别列表检查配对情况，并在发起拉取请求之前，运行README.md中的axe扫描。 - 没有深色模式。请勿添加
prefers-color-scheme: dark规则。页面有意设置了color-scheme: light。 - 动效使用
--ease和--dur-*标记，并且在prefers-reduced-motion: reduce设置下必须停止。 - 请使用
webapp-testing技能，分别在390像素和1280像素宽的视口下，以及开启和关闭减少动效设置的情况下进行测试。样式重构前后应生成像素级一致的截图。
各部件位置
- 标记：
index.html中的:root - 参考和模式目录：
DESIGN.md - Three.js颜色：
scene.js中的十六进制字面量，手动与调色板保持同步 - Claude中的副本：https://claude.ai/artifact/2iPwsVBSqA9gs8nkaYC5g1（包含标记、品牌手册、组件预览）