Background
HR spends every day pulling numbers scattered across systems, stitching them into a sheet, and handing it to leadership. High-frequency, time-consuming, and all judgment by hand. As Special Assistant to the CEO at HOLO+FACE Co., Ltd., I wanted to prove one thing: this can be re-architected into analyzable, traceable, decision-supporting tools, and HR can build it themselves.
What I did
- Built a full-module “HR command center” independently via Vibe Coding, connecting the previously siloed data of HR, finance and operations.
- Turned the weekly manual report into a dashboard leadership and the HR team could query in real time.
- Saved leadership and HR ~11 hours a week of reporting time, handing that time back to judgment and decisions.
The system is split into eight modules, each covering a different HR function. Screens follow in order below (all sample data; names, store names and financial figures are all fictitious):
00 · Command Center: global filters and eight headline KPIs, covering org-growth and cost trends, attrition-risk departments, and a strategic-risk radar.
01 · HR Data Dashboard: active / departed / new-hire headcount and turnover, plus gender, location and tenure breakdowns.
02 · Recruiting Dashboard: hiring-funnel conversion and candidate age structure, with a per-store comparison of recruiting cycle time.
03 · Compensation Dashboard: total pay and bonus, cost per head, and pay ranked by department and job title.
04 · Performance Dashboard: grade distribution against the normal curve, competency average scores, and the list flagged for a PIP.
05 · Training Dashboard: training hours and cost, L1–L4 effectiveness tracking, plus insights and action plans generated on demand by an AI CHRO.
06 · Department Workload Dashboard: a daily-hours trend across roughly 19,000 logged work records, broken down into 22 task categories.
07 · P&L Strategic Report: company-wide revenue, cost and profit rolled up into monthly output and cost per head.
System Architecture
The whole command center is a zero-backend, zero-build single HTML file: no Node, no npm, no server. Open it in a browser and it runs, and you can hand the whole thing to the next HR person over email or on a USB drive.
The shell (navigation, theming, settings) is plain JavaScript: tab switching runs on a data-target attribute and classList, decoupled from any frontend framework. Dark mode is a single line of CSS, filter: invert(1), applied globally, saving the work of maintaining a second colour palette. The eight modules are each their own React 18 component tree: Babel Standalone compiles the JSX in the browser at load time, and each module calls its own ReactDOM.createRoot() into its own container. That means the eight modules were genuinely built and debugged independently. If one breaks, the other seven keep running.
Architecture
Data comes in two ways: upload a CSV, or paste a Google Sheet link (the app builds the export URL itself and fetches it through a public CORS relay). Both paths run through a hand-written CSV parser (strips the BOM, auto-detects comma vs. tab, corrects misaligned columns), then write into the global store and IndexedDB, so a refresh or a restart never loses the data. Every module can also ask AI directly: it packages the filtered data into a role-played prompt (something like, “as the CHRO, benchmark against Taiwan’s retail and photo-services industries, give 10 key insights and 10 action items”), calls the Gemini API, and renders what comes back as a report card.
The eight modules were built one at a time, each in its own back-and-forth with AI, saved version by version under dated filenames as a lightweight history. Every time a new module got packaged into the main shell, I gave the AI a strict instruction: touch only this tab, don’t touch the main frame or the other modules, to keep it from quietly breaking things elsewhere in one large file. Later I wrote a custom Copilot agent whose only job is auditing the data folder for normalization, so AI checks its own data structure.
This system is the direct precursor to the HR Data Lake, MCP server and OAuth-scoped governance I later built at CMoney Technology Co., Ltd. Same judgment, a stricter stack.
Takeaway
This project moved me from someone who uses tools to someone who builds them. HR’s scarcest resource has never been data. It’s the interface that turns data into decisions, and an HR person who understands the organization can now build that themselves.
More: later, at CMoney Technology Co., Ltd., I turned this approach into a fuller set of systems (a data lake, a screening agent, ops automation), collected in an HR × AI Portfolio.