Claude Code splitfair-design-system for readable bill screens
Use opaque money surfaces, steady digits, and clear state indicators under SplitFair’s visual conventions.
中文Install in Claude Code
Open SplitFair in Claude Code with its companion color, typography and shape conventions. Check the system and SDK for Liquid Glass work; the exercise covers the ordinary bill surface.
- Review `.claude/skills/splitfair-design-system/SKILL.md` and its requirements at the pinned GitHub commit.
- Create `.claude/skills/splitfair-design-system/` in your project and save the reviewed file as `.claude/skills/splitfair-design-system/SKILL.md`.
- Start Claude Code from that project's root, then select `/splitfair-design-system` in the slash menu.
Example task
Bill fixture bill-18 has total “52.40” and state “Settled”. The state must still be distinguishable in grayscale.What to check
Use an opaque background and monospaced digits. Preserve {amount: '52.40', surface: 'opaque', stateText: 'Settled'} and verify the accompanying shape or icon in grayscale.
Original SKILL.md on GitHub · Updated
Frequently asked question
Must the amount and the bottom rail use the same background?
Keep amounts on opaque surfaces. The rail can use its own material according to system support, with the defined fallback when transparency is reduced.