70 lines
4.9 KiB
Markdown
70 lines
4.9 KiB
Markdown
|
---
|
|||
|
|
name: akefin-design
|
|||
|
|
description: Use this skill to generate well-branded interfaces and assets for Akefin, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping a precision multi-entity finance dashboard with Korean (Hangul) + Latin bilingual support.
|
|||
|
|
user-invocable: true
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# Akefin Design Skill
|
|||
|
|
|
|||
|
|
**Akefin** is a multi-entity personal & business accounting platform for a solo consultant across Korea (KRW), Turkey (TRY), and Japan (JPY). It automates Korean Toss bank imports, runs them through a 3-tier AI categorization pipeline (Rules → LLM → Agent), and outputs plain-text double-entry ledger files. The visual language is **paper-quiet, grid-anchored, type-led** — heavily inspired by pi.dev: warm cream surface, italic-serif display type, monospaced data, hairline borders, no shadows on cards, no rounded everything.
|
|||
|
|
|
|||
|
|
## Read first
|
|||
|
|
|
|||
|
|
1. `README.md` — full context: company, content fundamentals, visual foundations, iconography.
|
|||
|
|
2. `colors_and_type.css` — CSS variables for color + type, and ready-made semantic classes (`.chip`, `.entity-badge`, `.tier`, `.amount`, `.term`, etc).
|
|||
|
|
3. `preview/` — small specimen cards showing every primitive. Skim before designing.
|
|||
|
|
4. `ui_kits/web/` and `ui_kits/mobile/` — full reference implementations to copy components from.
|
|||
|
|
|
|||
|
|
## When invoked
|
|||
|
|
|
|||
|
|
If the user gives you a clear request (e.g. *"design the rules promotion modal"*, *"make a 6-slide deck on Akefin's import pipeline"*), proceed and produce HTML artifacts that:
|
|||
|
|
|
|||
|
|
1. **Import the system stylesheet:** `<link rel="stylesheet" href="path/to/colors_and_type.css">`. Always.
|
|||
|
|
2. **Use the cream grid background** on the page body (`.grid-bg` class, or set `background-image` per the variable scheme).
|
|||
|
|
3. **Use the two-surface system:** cream (`--bg`, `--paper`) for chrome, ink-grey (`--surface`) for data containers. The contrast is the signature.
|
|||
|
|
4. **Use the existing atoms** instead of inventing new ones: `.chip` (confidence), `.entity-badge`, `.tier`, `.amount`, `.btn`, `.term`. Look in `ui_kits/web/dashboard.css` if you need more class definitions.
|
|||
|
|
5. **Handle Korean text gracefully** — `font-family: var(--font-sans-kr)` (Pretendard) on any element that may contain Hangul. Don't romanise unless explicitly for an inferred-name secondary line.
|
|||
|
|
6. **Amounts:** always mono, right-aligned, signed (`+ 1,240,000 KRW` / `− 38,500 KRW`), currency code follows.
|
|||
|
|
7. **Voice:** authoritative, calm, technical. Imperative verbs. UPPERCASE small-tracked mono labels for tab/chrome. Never emoji.
|
|||
|
|
8. **Iconography:** Lucide via CDN, 1.5px stroke, 16–20px. Don't draw new SVG icons.
|
|||
|
|
|
|||
|
|
If the user gives you a vague request (*"design something for Akefin"*), ask 3–5 questions: what surface (web / mobile / slide), what flow, do they want variants, etc.
|
|||
|
|
|
|||
|
|
## Quick reference — the most-used pieces
|
|||
|
|
|
|||
|
|
| Need | Use |
|
|||
|
|
|---|---|
|
|||
|
|
| Background | `class="grid-bg"` on body |
|
|||
|
|
| Page heading | `<h1 class="display-l">…</h1>` (italic serif) |
|
|||
|
|
| Tab/chrome label | `<span class="eyebrow">REVIEW QUEUE</span>` |
|
|||
|
|
| Confidence chip | `<span class="chip high">★ 0.94</span>` (rules/high/mid/low) |
|
|||
|
|
| Entity badge | `<span class="entity-badge personal">Personal</span>` (personal/tfox/finacode) |
|
|||
|
|
| Tier badge | `<span class="tier llm">LLM</span>` |
|
|||
|
|
| Money | `<span class="amount neg">38,500<span class="ccy">KRW</span></span>` |
|
|||
|
|
| Data block | `<div class="term">…mono content…</div>` with `.term-title` header |
|
|||
|
|
| Primary button | `<button class="btn primary">APPROVE</button>` |
|
|||
|
|
| Bracket button (pi.dev style) | `<button class="btn bracket">READ DOCS</button>` |
|
|||
|
|
|
|||
|
|
## What to AVOID
|
|||
|
|
|
|||
|
|
- Emoji of any kind
|
|||
|
|
- Drop shadows on cards (only on popovers)
|
|||
|
|
- Colored gradients
|
|||
|
|
- Border-radius > 4px (chips/pills excepted)
|
|||
|
|
- Heavy borders > 1px
|
|||
|
|
- Color-tinted whole-page backgrounds based on entity (entity is accent, not tint)
|
|||
|
|
- Inter, Roboto, system-default fonts — use Spectral / IBM Plex Sans / JetBrains Mono / Pretendard
|
|||
|
|
- Page-wide rounded "card with left accent border" — explicit anti-pattern
|
|||
|
|
|
|||
|
|
## Output modes
|
|||
|
|
|
|||
|
|
- **Production code:** Copy `colors_and_type.css` and `assets/` into the target project. Reference variables directly; don't redefine.
|
|||
|
|
- **Throwaway prototype:** Reference the system files via relative paths from the project root. Produce ONE HTML file unless explicitly asked for more.
|
|||
|
|
- **Slides:** Use `deck_stage.js` starter, light theme default. Display headings in italic Spectral. Don't pad with filler content.
|
|||
|
|
|
|||
|
|
## Notes from the field
|
|||
|
|
|
|||
|
|
- Plantin MT Pro is the original target display face; `Spectral` is a Google Fonts substitute — flag this if the user expects exact pi.dev parity.
|
|||
|
|
- The akefin-design-system GitHub repo was empty at time of generation. If it's been populated since, prefer its components over what's here.
|
|||
|
|
- This skill is best when paired with screenshots of the existing Akefin product (none were provided originally).
|