メニュー
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.