The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Career Compass AI
An AI-powered career navigation platform for students and job seekers in emerging economies.
1. Project Link
2. Short Description
Career Compass AI is an AI-powered career coaching platform designed to help students and early-career professionals navigate their career journey with confidence.
Many learners struggle to understand which skills are valuable, which careers match their strengths, and what steps they should take to become job-ready. Existing solutions often separate learning, career guidance, and job discovery into different platforms.
Career Compass AI brings these experiences together into a single guided journey.
The platform analyzes a user's current skills, recommends suitable career paths, identifies skill gaps, generates personalized learning roadmaps, and tracks career readiness over time.
The core experience follows a simple framework:
Current Skills → Career Goal → Skill Gap Analysis → Learning Roadmap → Job Readiness
The product combines AI coaching, progress tracking, gamification, and data visualization to transform career development into a clear and motivating experience.
3. Key Features
AI Career Assessment
Skill discovery and assessment
Career recommendations
Match percentage scoring
Career Readiness Dashboard
Readiness score
Skill progress tracking
Career milestones
Skill Gap Analysis
Missing skills identification
Progress visualization
Personalized recommendations
Learning Roadmap
Step-by-step growth plan
Learning milestones
Progress tracking
AI Career Coach
Career guidance
Learning recommendations
Interview preparation assistance
Gamification
Achievement badges
Learning streaks
Career progression levels
4. Screenshots
Include:
Screenshot 1 — Dashboard
Caption:
The main dashboard provides an overview of career readiness, skill progress, learning milestones, and AI coaching recommendations.
Screenshot 2 — Skill Gap Analysis
Caption:
Users can compare their current skills against career requirements and identify areas for improvement.
Screenshot 3 — Learning Roadmap
Caption:
Personalized roadmaps guide users through the most effective path toward their target career.
Screenshot 4 — AI Coach
Caption:
The AI Career Coach provides personalized guidance, career insights, and actionable next steps.
5. How I Used Stitch
Stitch was used as the primary interface generation tool for rapidly designing and iterating on product screens.
The workflow included:
Defining the product concept and user journey.
Creating a design system and brand direction.
Using Stitch to generate initial dashboard and workflow screens.
Refining layouts through iterative prompting.
Improving alignment, spacing, visual hierarchy, and branding consistency.
Establishing a consistent component library including cards, navigation patterns, progress indicators, and AI coaching elements.
Using Stitch to expand the design language across multiple screens while maintaining a unified visual identity.
The platform significantly accelerated exploration and iteration, allowing rapid testing of different layouts and user experiences before moving into detailed refinement.
Advanced Workflow
To improve consistency and quality, I used Stitch's design import capability rather than starting from a blank prompt.
The imported Figma file served as the source of truth for:
Branding
Design tokens
Component styling
Typography
Layout patterns
This enabled a scalable workflow where AI-generated screens inherited the established design language instead of creating entirely new visual directions.
By combining manual design system creation with AI-assisted generation, I was able to move from a single dashboard concept to a cohesive multi-screen product experience much faster than a traditional workflow.
6. Design Decisions
The product was intentionally designed as a "career navigation system" rather than a traditional job board.
Key design principles included:
Clarity over complexity
Progress-focused interactions
Visual motivation through gamification
Strong information hierarchy
Career journey storytelling
The visual language emphasizes growth, momentum, and achievement through roadmaps, progress indicators, readiness scores, and milestone-based experiences.
The brand combines the motivational qualities of learning platforms with the clarity and polish of modern SaaS products.
7. Feedback on Stitch
What Worked Well
Fast screen generation
Rapid concept exploration
Helpful for dashboard layouts
Effective starting point for complex interfaces
Accelerated product thinking and iteration
Challenges
Design consistency sometimes varied across generated screens
Alignment and spacing occasionally required manual refinement
Branding needed explicit design system guidance
Visual hierarchy improved significantly when detailed design prompts were provided
Suggestions
Stronger support for reusable design systems
Improved consistency across generated screens
Better preservation of established branding across iterations
Enhanced component-level control
8. Bonus: Workflow Walkthrough
Workflow Summary
Defined product problem.
Created user journey.
Designed brand identity.
Built dashboard concept.
Generated screens using Stitch.
Refined layouts and branding.
Created final prototype.
Bonus: Advanced Elements Used
Interactive Behaviors
Career readiness tracking
Progress-based dashboards
Learning roadmap interactions
Dynamic AI coaching interface
Design System
Custom color palette
Typography scale
Reusable card components
Progress visualization framework
AI Features
Career matching
Skill gap analysis
Personalized learning recommendations
Career coaching assistant
Submission Summary
Project: Career Compass AI
Category: AI + Education + Career Development
Problem Solved:
Helping students and job seekers understand where they are, where they want to go, and how to get there.
Core Value Proposition:
"Tell us your skills today, and we'll show you the fastest path to your future career."
Wow, Kanchan, this is an incredible use case for AI! Framing the product as a "career navigation system" rather than just another job board is such an important distinction for students and early career professionals.
Fantastic work! I also just submitted my project for the...
on.contra.com
Swipe-to-Shop App Transforming Farmers Market Experience
Connect with next-gen talent and tools to get work underway. Hire more independents. Start more projects. Get more creative.
Thank you so much for the kind words! 😊
That distinction was actually one of the core ideas behind the project. I wanted to move beyond the traditional job-board experience and focus on helping users understand where they are today, where they want to go, and the steps needed to...
Love the idea of treating career growth like navigation rather than job searching. The "Current Skills → Career Goal → Skill Gap → Roadmap → Readiness" journey makes the experience feel much more actionable for students and early-career professionals. Great use of Stitch to turn a complex problem into a clear visual workflow. 👏
Thank you! That was exactly the intention behind the concept. I wanted to move away from the traditional "job search" mindset and create a more guided journey that helps users understand where they are, where they want to go, and what steps they need to take next. Glad that approach resonated with you.
Such a fabulous idea of giving students opportunity to think in different direction rather than involve in the rat race. It has a big advantage for students to understand where they stand how they prepare and where they can improve.I genuinely like the concept of Career...
Thank you so much for your thoughtful feedback! 😊
One of the key motivations behind Career Compass AI was exactly what you mentioned—helping students make informed career decisions instead of simply following the crowd. I wanted to create a platform that gives users clarity...
This is a strong use case for AI. The skill-gap analysis and personalized roadmap features could be incredibly valuable for early-career professionals.
Here's my submission for the challenge:
https://on.contra.com/pnfJBQ
Would love your feedback.
on.contra.com
Introducing Voya: Revolutionize Your Travel Planning Experience
Connect with next-gen talent and tools to get work underway. Hire more independents. Start more projects. Get more creative.
Thank you for the kind words! 😊
I really appreciate your feedback. The skill-gap analysis and personalized roadmap were actually at the core of the idea because I wanted users to have a clear understanding of what stands between them and their career goals, along with actionable...
I love the color
Thank you! 😊 I'm happy you liked it. The goal was to create a color palette that feels modern, motivating, and easy on the eyes while reinforcing the idea of growth and progress. Thanks for taking the time to share your thoughts! ✨
👍😊
The Idea is great and ux it sync with it. The solution based on this ux design is accessible and for any user to navigate understand and use this solution.
Great for beginners who are searching job for the first time, as platform like naukari and indeed some time seen to be quite...
Thank you so much for your feedback! 😊
I'm glad the UX felt intuitive and aligned with the solution. One of the main goals behind Career Compass AI was to make career planning more approachable, especially for students and first-time job seekers who can often feel overwhelmed by...
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
1. Project Link
https://stitch.withgoogle.com/projects/9509844389363739472
website link
https://rupendrajnv.github.io/stitch/
----------
What I built:
A cinematic Web3 fintech landing page for a fictional startup called Fluxora — featuring a full-screen AI character video background, glassmorphism stat cards with animated count-ups, a custom cursor, scroll-triggered reveals, and a deep navy-blue color system. The experience is designed to feel alive from the first second — motion-forward, conversion-focused, and premium.
🔧 How I Used Stitch
I came to Stitch with a clear creative direction and one asset — an AI-generated character video from Kling. I prompted Stitch to build a full landing page around it: cinematic overlay system, glassmorphism UI components, animated statistics, and a partner bar. Stitch generated the entire interface in one pass, and I used in-place AI edits to refine the color theme from red to a clean navy-blue system and tighten the typography hierarchy. The native motion and animation support let me get scroll-triggered reveals and count-up animations without writing a single line of JS manually.
💬 Feedback on Stitch
Stitch's streaming canvas generation is genuinely fast — watching the interface build itself in real time made iteration feel low-friction. The in-place edit workflow (prompt + point-and-click) was the standout feature for me. Being able to say "change the overlay to blue" and see it apply contextually — without rebuilding from scratch — is exactly how AI tools should work in a design workflow. The motion and animation support on the HTML canvas is a real differentiator. For someone coming from a video and motion design background, having that baked in natively felt natural. Would love deeper control over animation easing curves in a future update.
--
Post on X
https://x.com/techupd59581740/status/2060750926793879905?s=20
sleek 👌🏽
The Google Stitch Challenge is live.
💰 $10K Prize Pool 🏆 Top 5 win $2K each
Let's stitch it.
#GoogleStitch #StitchChallenge #Contra @Stitch by Google @Contra
What I Built
"InkFusion Studio" is a dark-themed website featuring 20 sections, built entirely using Google Stitch.
How I Used Stitch
I created the website section by section, using a total of 20 prompts. Each prompt included a specific layout, color palette, animations, and interactions. The design used a dark background (#0A0A0A), gold accents (#C8A766), and teal highlights (#2A9D8F). Stitch generated each section sequentially on the canvas using streaming generation.
Features Used
Streaming generations to build each section in real time.
In-place AI editing to refine the design and visual style.
Native motion, hover states, and animated transitions.
Gold progress bar preloader and curtain reveal animations.
Canvas HTML rendering for interactive UI elements.
Feedback on Stitch
Stitch handled complex, sequential prompts surprisingly well. Being able to describe an entire section—including layout, colors, animations, and interactions—in a single prompt and watch it generate live was both fast and intuitive. The built-in motion and interaction capabilities made the final result feel like a real website rather than a static mockup.
Project Link
#StitchChallenge #GoogleStitch @stitchbygoogle
Sharp, polished, and full of intention — love the whole thing.
Challenges
View all
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
portfolioreview
The best portfolios tell a story, not just show a grid. Share yours for feedback.
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?