visual-design-foundations

此技能为软件代理程序提供了建立与维护专业级设计系统的基础架构。它使代理程序能够担任设计系统工程师的角色，确保界面在复杂的应用程序中保持无障碍、可扩展且视觉一致。通过利用行业标准实践（如 8 点网格系统、WCAG 对比度规范及模块化字体缩放），代理程序可以程序化地构建样式指南、Tailwind CSS 配置文件及组件级间距规则。这对于需要桥接设计意图与代码实现的开发者、前端工程师及 UI 设计师至关重要。

• 实现设计代币，包含品牌、成功、错误与中性状态的语义色彩变量。

• 设置模块化排版系统（例如基于比例的字体大小）与响应式行高规范。

• 应用 8 点网格系统，确保边距、填充与布局空白的一致性。

• 利用符合 WCAG 标准的色彩对比度计算自动执行无障碍审计。

• 使用 CSS clamp 函数与容器感知大小技术定义响应式布局。

• 定义图标大小系统并标准化组件级间距常规。

• 通过 CSS 变量作用域支持深色模式与多主题实现。

• 在启动新项目时使用此技能，通过 Tailwind 配置文件或标准 CSS 自定义属性建立稳健的 CSS 架构。

• 当审计现有代码库以识别并解决视觉层级不一致的问题时使用。

• 非常适合将 Figma 等设计工具的雏型转化为可维护的代码库常数。

• 实现时，请确保代理程序已接收设计系统需求或特定的品牌指南作为背景信息。

• 输入需求通常包含品牌调色盘或特定字体选择；输出通常包含 CSS/Tailwind 配置文件、代币清单或组件特定样式准则。

• 限制条件包含维持语义化无障碍标准，并确保在不同屏幕断点下的流畅响应能力。