Claude Code splitfair-design-system：设计可读的 SwiftUI 账单界面
EnglishClaude Code 安装步骤
- 打开 GitHub 固定提交的 `.claude/skills/splitfair-design-system/SKILL.md`，核对内容与使用条件。
- 在自己的项目中创建 `.claude/skills/splitfair-design-system/`，把核对后的文件保存为 `.claude/skills/splitfair-design-system/SKILL.md`。
- 在该项目根目录启动 Claude Code，在斜杠菜单中选择 `/splitfair-design-system`。
中文摘要
用不透明的账单内容区域、稳定数字与明确状态提示体现 SplitFair 的样式约定。
SKILL.md 中文导读
可复现示例
账单样例 bill-18 的合计显示为“52.40”，当前状态为“Settled”。界面需要在灰度模式下也能区分状态。工作步骤
- 选出承载数字、状态和操作的界面区域，按各自角色选主题变量。
- 用灰度与实际字体预览检查金额可读性及状态表达。
验收方法
为合计采用不透明背景和等宽数字，保留 {amount: '52.40', surface: 'opaque', stateText: 'Settled'}，再核对灰度下的形状或图标提示。
GitHub 原文 · 更新日期
适用环境
在 Claude Code 中打开 SplitFair 源码并保留其颜色、排版和形状等配套规范。涉及 Liquid Glass 时检查系统和 SDK；示例只测试普通账单内容区域。
常见问题
数字区域和底部栏必须用相同背景吗？
账单数字的背景遵循不透明原则。底部栏可按目标系统使用单独的材质，并在减少透明度时显示对应替代方案。