Inspiration
The Story of DTD: Bridging the "Paper-to-Prosperity" Gap The spark for DTD came from a startling contrast in the 2026 Malaysian landscape. On one hand, the National Semiconductor Strategy (NSS) and the 13th Malaysia Plan are screaming for 60,000 high-skilled engineers and AI specialists. On the other hand, nearly 2 million Malaysians remain underemployed, with one in three graduates working in roles that pay less than RM3,000—far below their potential.
We met brilliant Computer Science graduates working as delivery riders or admin assistants simply because they didn't know how to translate their "University modules" into the "Industry language" of IC Design or AI Modeling. We realized that the "Underemployment Trap" isn't a lack of talent; it’s a lack of a bridge. We wanted to build that bridge.
What it does
What It Does
DTD is an agentic career architect designed to pull Malaysian graduates out of the "Underemployment Trap" by mapping their existing academic DNA to the high-value roles of 2026.
Multimodal Skill Extraction: Upload a photo of your transcript or CV. Using Gemini 1.5 Pro, the system "sees" beyond course titles, identifying core competencies in areas like Digital Logic, Discrete Math, or Systems Architecture.
2026 Industry Mapping: The AI cross-references your skills against the National Semiconductor Strategy (NSS) and Ekonomi MADANI benchmarks. It identifies "Hidden Matches" for roles in IC Design, AI Engineering, and Cloud Infrastructure that you might not even know exist.
The "Salary Leap" Analysis: DTD calculates your current market value versus your potential value in a High-Growth High-Value (HGHV) sector, visualizing the financial impact of a career pivot (e.g., from RM2,800 to RM6,500+).
Spatial Skill Visualization: Your career readiness is modeled as a 3D Skill Orb. Powered by Three.js, this orb physically expands and glows as the AI verifies more of your competencies, providing a tangible sense of your professional growth.
Hyper-Local 90-Day Roadmap: Receive a structured sprint plan to bridge your skill gaps, featuring direct links to local, government-funded certification programs through MDEC, TalentCorp, and CREST
How we built it
We didn't just want a "job board"; we wanted a Spatial Career Architect.
The Brain (Gemini 1.5 Pro): We used Gemini’s massive 2-million-token context window to "ground" the AI in actual 2026 Malaysian data—the NSS policy papers, the RM550 million Khazanah funding details, and PIKOM salary benchmarks.
The Eyes (Multimodal OCR): We built an extraction engine that can "read" a messy smartphone photo of a university transcript. It doesn't just look for keywords; it infers logic. It sees "Discrete Mathematics" and "Digital Logic" and realizes this student is a prime candidate for IC Design.
The Experience (Three.js & Antigravity): To make the data feel "alive," we used Three.js to create the Career Skill Orb. Using vibe-coding techniques, we tethered the Orb’s physical size and glow to the student’s skill density. The more matches Gemini found, the more the Orb expanded and turned from "Entry Blue" to "MADANI Gold."
Technical Explanation
DTD is built as a Full-Stack Agentic Application, leveraging the native integration between Google AI Studio and the Antigravity IDE.
The Stack Frontend: Next.js 16 (App Router) + Tailwind CSS. We utilized shadcn/ui for high-fidelity accessible components.
3D Engine: React Three Fiber and Drei. The "Career Skill Orb" is a SphereGeometry utilizing a custom MeshDistortMaterial that reacts to real-time state changes.
Intelligence Layer: Gemini 1.5 Pro (Model ID: gemini-1.5-pro-002). We specifically chose 1.5 Pro for its Multimodal Vision (transcript parsing) and 2M Token Context Window (economic policy grounding).
IDE & Scaffolding: Google Antigravity. We used the Manager View to orchestrate two parallel agents:
Agent A (The Logic Architect): Handled the backend parsing and salary projection math.
Agent B (The Creative Developer): Simultaneously implemented the Three.js scene and Tailwind styling.
The Architecture Our architecture follows a "Grounding-First" pattern. Instead of a database, we use a Local Knowledge Base containing PDF policy papers. When a user uploads a transcript, the Gemini agent performs a Semantic Join—mapping specific academic modules to the skill requirements extracted from the National Semiconductor Strategy (NSS) documents.
Prompt Design Explanation
Our "Steering" process focused on turning a raw LLM into a specialized Malaysian Career Architect. We utilized three core Prompt Engineering techniques:
- Multimodal Tabular Extraction Transcripts are messy. We used a "Spatial Prompting" technique to help Gemini 1.5 Pro understand the grid layout:
"Act as an expert Registrar. Analyze the uploaded image. Map the 'Course Code' to 'Inferred Industry Skill' using a semantic lookup. For example, 'CSE301' is not just a grade; it is a signal of 'Algorithm Complexity' competence."
- Dynamic System Rules (The Guardrails) We implemented Antigravity Rules (.agent/rules/) to ensure the AI never gave generic advice. These rules were injected into every session:
Rule 1: "All salary data must be benchmarked against the 2026 PIKOM Job Market Outlook."
Rule 2: "Roadmaps must include at least one MDEC or TalentCorp funded certification pathway."
Rule 3: "Output must use JSON Schema for seamless 3D Orb state updates."
- Chain-of-Reasoning for "Salary Leaps" To prevent hallucinations in financial data, we forced the AI to show its work:
"Analyze the gap. Step 1: Estimate current value based on degree. Step 2: Identify the 2026 HGHV sector multiplier. Step 3: Output the 'Salary Leap' delta."
Challenges we ran into
The road to a 3-hour MVP wasn't smooth:
The "Manglish" & Formatting Hurdle: Malaysian transcripts are notoriously diverse. A module called "Sains Komputer" in one uni is "Computer Science" in another. We had to refine our system prompts to ensure Gemini performed cross-lingual semantic mapping without losing accuracy.
The 3D-Layout Struggle: Integrating CSS3DRenderer to make report cards float inside a Three.js scene initially caused "layout drift." We had to pivot our strategy to use a "Z-index Glassmorphism" approach, allowing the 2D UI to look like it was part of the 3D world without the technical instability.
Data Grounding: Finding the exact 2026 salary benchmarks required deep searching. We had to filter out generic global data to ensure our "Salary Leap" calculation (e.g., jumping from RM2,800 to RM6,500) was realistic for the local Klang Valley and Penang markets.
Accomplishments that we're proud of
In just a three-hour sprint, we moved beyond a simple "chatbot" to create a deeply integrated, state-of-the-art career engine. Our key wins include:
Multimodal Precision: Successfully "steering" Gemini 1.5 Pro to accurately parse messy, non-standard Malaysian university transcripts. We achieved a high success rate in mapping BM-labeled modules (e.g., Logik Digital) to high-level engineering competencies required by the NSS (National Semiconductor Strategy).
The "Spatial UI" Bridge: Mastering Three.js within a tight deadline to create the Career Skill Orb. We are proud of making the 3D environment functional—the Orb’s scale and luminosity are directly tied to the real-time JSON output of the Gemini API, turning abstract data into a tangible "vibe."
Zero-Database Grounding: Leveraging Gemini’s 2-million-token context window to ingest the entirety of Malaysia’s 2026 economic policy papers. This allowed us to provide hyper-local, "grounded" salary projections without the overhead of building a traditional backend database.
Meaningful Tech for Malaysia: We didn't just build an app; we built a tool that speaks to the Ekonomi MADANI vision. Seeing the "Salary Leap" calculation work—showing a potential RM3,500 monthly income jump—felt like building something with real-world soul.
What we learned
This project taught us that AI is the ultimate equalizer for information asymmetry. We learned that a student’s degree isn't just a piece of paper; it’s a collection of latent high-value skills waiting for the right "lens" to see them. By combining the reasoning of Gemini with a "spatial" UI, we turned a boring career counseling session into an empowering, data-driven visualization of a better life.
DTD isn't just a tool; it's a mission to ensure no Malaysian talent is left behind in the 13th Malaysia Plan.
What's next for Degree-To-DUIT(DTD)
Our 3-hour MVP is just the foundation. Moving forward, we plan to scale DTD into a national-level talent ecosystem:
The "Apply-with-Orb" Feature: Partnering with TalentCorp and LinkedIn to allow students to export their "Verified Skill Orb" as a 3D-interactive resume that recruiters can explore.
Agentic Interview Simulation: Using Antigravity to spin up "Shadow Interviewers." The agent will play the role of a hiring manager for the student's "Target Role," providing a safe space to practice technical interviews based on the identified gaps.
Real-time Course Integration: Integrating with the MDEC Digital Ninja and Coursera APIs to allow students to "One-Click Enroll" in the specific certification suggested in their 90-day roadmap.
Predictive Market Trends: implementing a "Future-Cast" feature that uses Gemini to analyze global tech shifts, warning students six months in advance if their current skill set is at risk of being disrupted by new AI models.
Built With
- next.js
- three.js
Log in or sign up for Devpost to join the conversation.