菜单
Design MoneyBin interfaces and assets on-brand in the "Ledger-grade" style (dark-lead, three-tier metal accent, money in mono, SQL provenance). Use when building, mocking, or theming any MoneyBin UI, screen, artifact, or component.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use when bringing design work created in claude.ai/design — a component, a guideline/specimen card, a token change, or a full screen — back into the repo's design-system/. The inbound direction, opposite of the outbound /design-sync. Triggers: a designer built something in the design tool and handed you a project link (or a zip) to get into the repo.
Update the public-facing documentation surface — README, CHANGELOG, CONTRIBUTING, top-level docs (architecture, audience, comparison, features, licensing, roadmap), docs/guides/, docs/reference/, docs/architecture/, docs/tech/ — to reflect what the in-scope code change means for users. Persona-aware writing per docs/audience.md; assumes the reader is not an expert on internals. Excludes specs and ADRs (those are /update-specs and by-hand respectively). Use this when finishing user-visible work, before opening a PR that adds capability, when a milestone closes, or whenever the user says "update the docs" / "make sure the docs reflect this." Don't wait to be asked — if user-visible work just shipped, suggest running it.
Reconcile docs/specs/ with the implementation that actually shipped in the current scope. Reviews recent code changes, identifies which specs the changes touch via docs/specs/INDEX.md, and updates each spec to reflect design evolutions, refactors, or follow-up work that didn't get its own spec. Auto-edits small drift; surfaces design-intent changes for review. Use this whenever finishing a feature branch, after a follow-up PR adds behavior the original spec didn't describe, after a refactor renames or moves primitives referenced in specs, or whenever the user asks "are the specs still accurate?" / "update the specs" / "sync the specs to the code." If you've just finished implementation work that drifted from the spec it was based on, suggest running it without waiting to be asked.
| name | moneybin-design |
| description | Design MoneyBin interfaces and assets on-brand in the "Ledger-grade" style (dark-lead, three-tier metal accent, money in mono, SQL provenance). Use when building, mocking, or theming any MoneyBin UI, screen, artifact, or component. |
MoneyBin's design system — the source of truth — lives at design-system/ in this
repo (it also feeds the claude.ai/design project via /design-sync). Read these
before producing anything:
design-system/readme.md — brand direction, voice, and content rulesdesign-system/tokens/ — colors, typography, shape (CSS custom properties)design-system/guidelines/*.html — specimen cards (Colors, Type, Shape, Brand, Charts, Iconography, Voice)design-system/charts.md — chart grammar (interpolation, color tiers, provenance ladder, selection)design-system/motion.md — motion doctrine (state-bearing motion only; amounts never animate)design-system/patterns.md — app chrome (rail shell, floating layer, ⌘K palette, table anatomy, import mapper, chord registry)design-system/ai-surface.md — the ask surface, consent tiers, provider policydesign-system/components/<group>/<Name>.jsx + .prompt.md — the real components (Button, Chip, Icon, Amount, WidgetCard, VaultStatusBar, Mark, Wordmark, DuckKey)design-system/ui_kits/web_app/index.html — a full dashboard exemplarNon-negotiables: dark theme leads (light is a first-class peer); one metal accent
in three tiers — brass (--accent-brass) speaks (provenance text), gilt
(--accent-gilt) fills (bars, buttons; identity marks use --brand-gold,
point-markers on a line use ink), verdigris
(--accent-verdigris) responds (selection, filters, links) — never blue; money is ALWAYS JetBrains Mono
with explicit +/- signs on income/expense flows (balances unsigned) — use the Amount component; hairline borders, no resting
shadows; every data widget carries a SQL provenance chip (rung one of a three-rung provenance ladder — a global deep-audit strip, then pinned tooltips snapping to real points; see design-system/charts.md); linear chart
interpolation only; icons come from the Icon component (19 glyphs, 20×20 grid,
1.5px stroke) — never an inline one-off SVG, and the ask/AI surface is the caret
▸_, never an icon; no emoji, no exclamation points, no superlatives.
For throwaway artifacts (mocks, slides, prototypes): copy assets out and produce
self-contained static HTML using the tokens. For production code: follow the token
and component conventions in design-system/. When the design system itself needs
to evolve, edit the source in design-system/ and re-run /design-sync to
republish to claude.ai/design.