Hackathon Portal
AI Tinkerers - Hong Kong
Team

Storylayer

Project Concept

Storylayer turns any LinkedIn, X, or Instagram profile into a living, layered story — generated by AI, discovered by the audience.

Drop a link. The agent reads who you are, structures your narrative, and renders a generative UI that unfolds your story layer by layer. No forms. No bios to write. No résumé formatting.

The storyteller could be a jobseeker, a founder, a creator, or anyone who wants their story to land — not just their credentials. On the receiving end, the audience taps through the layers: the hook first, then the arc, then the proof. The interface adapts to who’s reading.

This is what agentic UI was built for. Not returning text — rendering meaning.

Entry

Status: Submitted

Last saved: May 09 at 5:11 PM HKT

Team Roster

You must be registered for the event to view the team message board.

Michael Tam Team Lead RSVP Approved

Founder & CPO at Joyventure.io
Conceived the Storylayer concept and led product architecture — from the agent-per-facet component decision system to the reactive listener experience. Designed the agent system prompt, the layout composition schema (weight / span / emphasis), and the generative UI manifest pattern. Built iteratively using Claude (AI + Code) for vibe coding, Perplexity for research and architecture thinking, and CopilotKit as the agent-to-frontend transport layer. Pushed the prototype from Declarative Generative UI toward Open-ended Generative UI — where the agent composes layout, not just classifies components.
Founder of Joyventure.io — a product venture studio building AI-driven digital products. Former CPO at Preface and IBM Global Design Principal (1 of 73 worldwide; first ever from Hong Kong). 15+ years at the intersection of product, design, and enterprise transformation — from C-suite AI strategy at Fubon Financial Group to products used by 30,000 frontline workers at Frito-Lay. I come to AI Tinkerers as a practitioner, not just a strategist. I vibe code in Claude/Cursor, automate in n8n, prototype in Figma Make. My belief: the best AI products are human-centred first, intelligent second. Embrace ambiguity.
Agentic AI workflows for real business problems · AI for SMB growth and retention · Multimodal AI product design · LLM-powered personalisation · AI + human-centred design patterns · Vibe coding and AI-assisted development tools · Applied AI in regulated industries (fintech, insurance) · Building with and for non-technical founders
Building an AI-powered growth tool for SMBs — focused on customer retention and reactivation. Uses AI agents and automated outreach workflows to help small businesses reconnect with dormant customers through intelligent, personalized campaigns. Also tinkering with agentic workflows using n8n, Cursor, and Figma Make across my broader venture work.

Karmen Yip RSVP Approved

Strategy and Transformation Graduate at HSBC
Built the full-stack workspace UI — the storyteller-facing experience where context is set, story sources are added, and the agent's reasoning is made visible before anything renders. Implemented the glassmorphic design system end-to-end in HTML/CSS with atmospheric backgrounds, role-selector logic, live register-lock preview, and agent rationale panel. Engineered the format preview grid showing all four generative component types (cards, node graph, magazine spread, timeline arc). Used Gemini 2.5 Pro as the inference engine for identity-stripping and 5-layer narrative logic, and CopilotKit for agent-to-UI communication. Delivered a fully responsive, production-quality workspace shell that makes the agent's editorial decisions legible to the storyteller before they share.
Product builder at the intersection of AI, design, and human behaviour. Background runs across AI journalism (award-winning in university), UX design at AI platforms, and AI governance research through BlueDot Impact. Now I ship AI consumer wellness apps — three are live on App Store all built end-to-end with AI tooling. Based in Hong Kong, open to anywhere.
Consumer AI with visual identity that doesn’t look generated. AI safety at the product layer, especially in mental health and behaviour change. Browser-based ML (MediaPipe, transformers.js, WebGPU). Cultural specificity in tech beyond Silicon Valley defaults. Independent studios shipping punchy work.
V2 of my portfolio: a 3D interactive Hong Kong ding-ding tram riding between six worlds, each housing one of my AI products. Built in React Three Fiber + drei + Vite + GSAP. Procedural geometry only — no GLB imports. Mobile 60fps target on iPhone Safari. Cultural detail layer (bamboo scaffolding, fading neon, Vitasoy lemon tea) with toggle-able historical context per scene. Vibecoded entirely in Claude Code.