Learning Path Planner
Instructions
## Step 1: Needs Gathering (Questionnaire-based, no typing required)
User learning profiles are collected through two rounds of askUserQuestion.
### Round 1 (Core Information)
Use askUserQuestion to ask questions in the following three dimensions simultaneously:
1. **Types of Learning Objectives**
- header: "Target"
- Options: Exam preparation / Skills enhancement / Career change / Interest exploration
2. **Current Level**
- header: "Horizontal"
- Options: Zero experience / Beginner (understand the concepts) / Some experience (can complete simple tasks) / Advanced (requires breaking through bottlenecks)
3. **Daily available time**
- header: "Time"
- Options: Under 30 minutes / 1-2 hours / 2-4 hours / Over 4 hours
### Second Round (Supplementary Information)
Use askUserQuestion to ask questions in the following three dimensions simultaneously:
1. **Specific learning direction** (allows users to input freely)
- Guide users to input specific areas of interest in the question, such as: Python programming, IELTS 7, CPA exam, UI design, etc.
- header: "Direction"
- Options: Provides several popular examples to choose from, while also allowing users to enter custom content.
2. **Expected Completion Period**
- header: "Period"
- Options: 1-month sprint / 3-month steady progress / 6-month in-depth development / 1 year+ long-term
3. **Learning Preferences** (Multiple selections possible)
- header: "Preferences"
- multiSelect: true
- Options: Video courses / Book reading / Practical projects / Community interaction
Once the data collection is complete, all information will be organized into a structured "learner profile" for use in subsequent steps.
## Step 2: In-depth resource search and path planning
### 2.1 Resource Search
Based on the user's learning direction and preferences, perform 2-3 searches using Google Search:
1. **Search for the best learning roadmap in this field**
- Query: "[Learning Direction] Learning Roadmap 2024 2025" or "[Learning Direction] Recommended Learning Roadmap"
- Extraction: Stage division, core knowledge points, learning order
2. **Search for specific learning resources**
- Search for relevant resources based on user preferences:
- Video courses: Search for popular courses on Coursera/Udemy/Bilibili
- Books: Search for highly rated books on Douban/Amazon recommended reading lists
- Practical projects: Search GitHub/practical tutorials
- query: "[Learning Direction] best [Resource Type] beginner/intermediate/advanced"
3. **Search Milestone Standards**
- query: "[Learning Area] Skill Assessment Checklist" or "[Learning Area] Competency Assessment Standards"
- Extraction: What level should be achieved at each stage?
### 2.2 Path Planning
Based on search results and user profiles, plan the learning path:
**Phase-based principle:**
- Based on the user's expected learning timeline, break down the learning process into 3-5 stages.
- Each phase includes: phase name, estimated duration, core objectives, specific resources (3-5), and milestone checkpoints.
- Resources must be genuine resources found through the search (with name, platform, and link).
- Milestones must be verifiable descriptions of specific capabilities.
**Time allocation principles:**
- Calculate the total study hours for each stage based on daily available time.
- Provide suggested weekly schedules (weekdays vs. weekends)
- Reserve 10% buffer time
**Output format (internal data structure, passed to Step 3):**
```
Learner profile: {goals, direction, level, time, frequency, preferences}
Path planning: [
{
Phase Name
Phase number,
Estimated duration (weeks)
Core objective description,
Resource List: [{Name, Type (Video/Book/Project), Platform, Link, Estimated Study Hours}],
Milestone: {Description, Verification Method}
}
]
Weekly suggestions: {Weekday schedule, Weekend schedule, Total weekly study hours}
```
## Step 3: Generate a Kami-style interactive learning website
Use the generateWebpage tool to generate an interactive learning path website.
The instruction parameter contains the following complete specification plus the specific learning path data generated in Step 2:
### Design System Specifications (Kami Design System adapted for learning scenarios):
**Color Scheme:**
- Page background: #f5f4ed (warm beige Parchment)
- Card background: #FAF9F5 (Ivory)
- Accent color/brand color: #1B365D (Ink Blue)
- Text color: #141413 (Near Black)
- Subtext color: #4D4C48 (Charcoal)
- Note color: #87867F (Stone)
- Border color: #D6D5CE (warm gray border)
- Progress bar complete: #1B365D (brand color)
- Progress bar not completed: #E8E7E2
- Success/Completion Status: #2D5016 (Dark Olive Green)
- In progress: #1B365D (brand color)
- Not started: #87867F (Stone)
- Tag Background: #E4ECF5
- All grays must be warm-toned (R≈G>B), cool blue-grays are prohibited.
**Font System:**
- Load Noto Serif SC and Noto Sans SC via Google Fonts
- Title: font-family: 'Noto Serif SC', Charter, Georgia, serif; font-weight: 500
- Text: font-family: 'Noto Sans SC', 'PingFang SC', sans-serif; font-weight: 400
- Data/Emphasis on Numbers: font-family: Charter, Georgia, serif
- Disable font-weight: 700/bold
**typesetting:**
- Line spacing: Heading 1.2 / Body text 1.5
- Chinese letter-spacing: 0.3pt
- Page max-width: 800px, centered
- Responsive, mobile-friendly
**Visual Rules:**
- Shadow: ring shadow (0 0 0 1px rgba(0,0,0,0.05)) or whisper shadow (0 1px 3px rgba(0,0,0,0.04))
- Rounded corners: 8px (default) / 12px (large card)
- Separator: 0.5px solid #D6D5CE or 2.5px solid #1B365D (brand vertical line)
- Emphasis method: Blue ink text or vertical brand line on the left
### Page Structure Requirements:
**1. Top Hero Area:**
- Learning Objectives Heading (Serif 28px)
- Key information tags in one line: Target type | Estimated duration | Daily time
- Overall progress bar (with percentage numbers)
- Statistics card row: Total resources / Completed / Current stage
**2. Stage Card Area (Core):**
- One large card for each stage
- Card header: Stage number + Name + Status tag (✅ Completed / 🔄 In progress / ⬜ Not started) + Estimated duration
- Card content:
- Core objective description (1-2 sentences)
- Resource List: Each resource is listed on a separate line, including an icon (📚Book/🎬Video/💻Project/👥Community) + Name (clickable link) + Platform Tag + Checkbox
- Milestone area: Highlighted with brand vertical lines and special style to describe the achievement of standards.
- Cards can be folded/unfolded (default is to unfold for the current stage, fold for the stage that has been completed).
**3. Weekly Learning Suggestion Area:**
- Concise time allocation suggestions
- Weekday vs. Weekend Schedule
**4. Bottom:**
- A small line of text: Powered by Learning Path Planning Master · Designed with Kami Design System
### Interactive Functionality Requirements (Pure Front-End JavaScript + localStorage):
1. **Checkbox state toggling**:
- Click the checkbox before the resource to toggle the completion status.
- Save the status to localStorage (key uses learning direction + resource name hash)
- Completed resources will display strikethrough + reduced transparency.
2. **Automatic progress calculation:**
- Overall progress = (Number of selected resources / Total number of resources) × 100%
- Stage progress = Number of stages selected / Total number of stages
- Progress bar animation transition (transition: width 0.3s ease)
3. **Automatic Update of Stage Status**:
- Select all resources within the phase → Status changes to ✅ Completed, automatically collapsed.
- If any item is checked during the phase → the status changes to 🔄In Progress.
- No checkmark → ⬜ Not started
4. **Fold/Unfold**:
- Clicking the card header will collapse/expand.
- With smooth animation
5. **Milestone Check Pop-up Window**:
- A milestone check prompt will pop up when all resources for a phase are completed.
- Display the milestone standards for this stage
Users can click "Achieved" to confirm or mark "Needs Further Consolidation" to indicate completion.
6. **Data Persistence**:
- All states are stored in localStorage
- Restore state after page refresh
- Provides a "Reset Progress" button (requires secondary confirmation).
### Content Fill:
Fill the above structure with the complete learning path data planned in Step 2. Ensure:
- Each resource's link is a real, accessible URL.
- Resource type icons are correctly matched
- The duration of each phase is consistent with the logic of the total cycle.
- Milestone descriptions are specific and verifiable.
### Technical Requirements:
- Pure HTML + CSS + JavaScript, single file
- No external dependencies (except Google Fonts)
- Mobile responsive
- Print-friendly
- Clean code with comments
Description
Why we love this skill
This skill precisely captures user learning needs through a questionnaire format and can generate highly customized interactive learning websites. Its Kami design style and progress tracking features are particularly outstanding.
Based on your learning goals, current level, available time, and preferences, this Skill uses deep search to find real learning resources and create a personalized, step-by-step learning path. It outputs a Kami-style interactive learning website with progress tracking, milestone checks, and direct links to resources.
Related Skills
View all
ResearchSlow Teacher's Keyword Method
Use the keyword learning method to quickly get started in any field: output a table of 20 core keywords (with one-sentence explanations, application scenarios, and best practices), hand-drawn comic-style SVG logic relationship diagrams, simulate a domain expert answering 5 key questions, recommend 3–5 professional books, and assemble them into a well-formatted report; enter 'Interpret [Book Title]' to switch to the seven-part in-depth book interpretation mode.
ResearchSignal Room: Interview Synthesis
YouMind already transcribes your calls, interviews and podcasts. Signal Room is what happens next. Drop in one transcript or twenty and get back a research synthesis an actual analyst would sign: coded themes, verbatim evidence with timestamps, the places people disagree, and a ranked answer to the decision you are trying to make. The method is real qualitative practice, not summarisation: • Open coding that works quote-first — no quote, no code — with codes named in the participant's own words rather than analyst jargon • Every code tagged Behaviour, Belief or Wish, because "I would definitely pay for that" is not the same class of evidence as "I paid for that last month" • Themes stated as falsifiable sentences, with strength counted in participants rather than quotes, and disconfirming evidence hunted for on purpose • A tension map showing where your participants genuinely split and what predicts which side they fall on • An opportunity backlog written as "when [situation], [who] wants [outcome] because [reason]", each rated Strong, Suggestive or Anecdotal • A direct answer to your decision question, with a stated confidence level and what would change it • The three questions this round could not answer, and who to interview next Guardrails that matter: it never invents or polishes a quote, it refuses to report percentages on fewer than twelve participants, it pseudonymises participants by default, and it will tell you to your face when n=1 means you have a hypothesis rather than a finding. For product managers, UX and market researchers, journalists, consultants, founders doing customer discovery, and anyone sitting on hours of recordings and no findings.
ResearchAI Paper Master
Helps product managers, founders, and app developers understand AI papers through historical causal links, turning those insights into product judgments, technical boundaries, engineering intuition, and opportunity analysis.
Learning Path Planner
Instructions
## Step 1: Needs Gathering (Questionnaire-based, no typing required)
User learning profiles are collected through two rounds of askUserQuestion.
### Round 1 (Core Information)
Use askUserQuestion to ask questions in the following three dimensions simultaneously:
1. **Types of Learning Objectives**
- header: "Target"
- Options: Exam preparation / Skills enhancement / Career change / Interest exploration
2. **Current Level**
- header: "Horizontal"
- Options: Zero experience / Beginner (understand the concepts) / Some experience (can complete simple tasks) / Advanced (requires breaking through bottlenecks)
3. **Daily available time**
- header: "Time"
- Options: Under 30 minutes / 1-2 hours / 2-4 hours / Over 4 hours
### Second Round (Supplementary Information)
Use askUserQuestion to ask questions in the following three dimensions simultaneously:
1. **Specific learning direction** (allows users to input freely)
- Guide users to input specific areas of interest in the question, such as: Python programming, IELTS 7, CPA exam, UI design, etc.
- header: "Direction"
- Options: Provides several popular examples to choose from, while also allowing users to enter custom content.
2. **Expected Completion Period**
- header: "Period"
- Options: 1-month sprint / 3-month steady progress / 6-month in-depth development / 1 year+ long-term
3. **Learning Preferences** (Multiple selections possible)
- header: "Preferences"
- multiSelect: true
- Options: Video courses / Book reading / Practical projects / Community interaction
Once the data collection is complete, all information will be organized into a structured "learner profile" for use in subsequent steps.
## Step 2: In-depth resource search and path planning
### 2.1 Resource Search
Based on the user's learning direction and preferences, perform 2-3 searches using Google Search:
1. **Search for the best learning roadmap in this field**
- Query: "[Learning Direction] Learning Roadmap 2024 2025" or "[Learning Direction] Recommended Learning Roadmap"
- Extraction: Stage division, core knowledge points, learning order
2. **Search for specific learning resources**
- Search for relevant resources based on user preferences:
- Video courses: Search for popular courses on Coursera/Udemy/Bilibili
- Books: Search for highly rated books on Douban/Amazon recommended reading lists
- Practical projects: Search GitHub/practical tutorials
- query: "[Learning Direction] best [Resource Type] beginner/intermediate/advanced"
3. **Search Milestone Standards**
- query: "[Learning Area] Skill Assessment Checklist" or "[Learning Area] Competency Assessment Standards"
- Extraction: What level should be achieved at each stage?
### 2.2 Path Planning
Based on search results and user profiles, plan the learning path:
**Phase-based principle:**
- Based on the user's expected learning timeline, break down the learning process into 3-5 stages.
- Each phase includes: phase name, estimated duration, core objectives, specific resources (3-5), and milestone checkpoints.
- Resources must be genuine resources found through the search (with name, platform, and link).
- Milestones must be verifiable descriptions of specific capabilities.
**Time allocation principles:**
- Calculate the total study hours for each stage based on daily available time.
- Provide suggested weekly schedules (weekdays vs. weekends)
- Reserve 10% buffer time
**Output format (internal data structure, passed to Step 3):**
```
Learner profile: {goals, direction, level, time, frequency, preferences}
Path planning: [
{
Phase Name
Phase number,
Estimated duration (weeks)
Core objective description,
Resource List: [{Name, Type (Video/Book/Project), Platform, Link, Estimated Study Hours}],
Milestone: {Description, Verification Method}
}
]
Weekly suggestions: {Weekday schedule, Weekend schedule, Total weekly study hours}
```
## Step 3: Generate a Kami-style interactive learning website
Use the generateWebpage tool to generate an interactive learning path website.
The instruction parameter contains the following complete specification plus the specific learning path data generated in Step 2:
### Design System Specifications (Kami Design System adapted for learning scenarios):
**Color Scheme:**
- Page background: #f5f4ed (warm beige Parchment)
- Card background: #FAF9F5 (Ivory)
- Accent color/brand color: #1B365D (Ink Blue)
- Text color: #141413 (Near Black)
- Subtext color: #4D4C48 (Charcoal)
- Note color: #87867F (Stone)
- Border color: #D6D5CE (warm gray border)
- Progress bar complete: #1B365D (brand color)
- Progress bar not completed: #E8E7E2
- Success/Completion Status: #2D5016 (Dark Olive Green)
- In progress: #1B365D (brand color)
- Not started: #87867F (Stone)
- Tag Background: #E4ECF5
- All grays must be warm-toned (R≈G>B), cool blue-grays are prohibited.
**Font System:**
- Load Noto Serif SC and Noto Sans SC via Google Fonts
- Title: font-family: 'Noto Serif SC', Charter, Georgia, serif; font-weight: 500
- Text: font-family: 'Noto Sans SC', 'PingFang SC', sans-serif; font-weight: 400
- Data/Emphasis on Numbers: font-family: Charter, Georgia, serif
- Disable font-weight: 700/bold
**typesetting:**
- Line spacing: Heading 1.2 / Body text 1.5
- Chinese letter-spacing: 0.3pt
- Page max-width: 800px, centered
- Responsive, mobile-friendly
**Visual Rules:**
- Shadow: ring shadow (0 0 0 1px rgba(0,0,0,0.05)) or whisper shadow (0 1px 3px rgba(0,0,0,0.04))
- Rounded corners: 8px (default) / 12px (large card)
- Separator: 0.5px solid #D6D5CE or 2.5px solid #1B365D (brand vertical line)
- Emphasis method: Blue ink text or vertical brand line on the left
### Page Structure Requirements:
**1. Top Hero Area:**
- Learning Objectives Heading (Serif 28px)
- Key information tags in one line: Target type | Estimated duration | Daily time
- Overall progress bar (with percentage numbers)
- Statistics card row: Total resources / Completed / Current stage
**2. Stage Card Area (Core):**
- One large card for each stage
- Card header: Stage number + Name + Status tag (✅ Completed / 🔄 In progress / ⬜ Not started) + Estimated duration
- Card content:
- Core objective description (1-2 sentences)
- Resource List: Each resource is listed on a separate line, including an icon (📚Book/🎬Video/💻Project/👥Community) + Name (clickable link) + Platform Tag + Checkbox
- Milestone area: Highlighted with brand vertical lines and special style to describe the achievement of standards.
- Cards can be folded/unfolded (default is to unfold for the current stage, fold for the stage that has been completed).
**3. Weekly Learning Suggestion Area:**
- Concise time allocation suggestions
- Weekday vs. Weekend Schedule
**4. Bottom:**
- A small line of text: Powered by Learning Path Planning Master · Designed with Kami Design System
### Interactive Functionality Requirements (Pure Front-End JavaScript + localStorage):
1. **Checkbox state toggling**:
- Click the checkbox before the resource to toggle the completion status.
- Save the status to localStorage (key uses learning direction + resource name hash)
- Completed resources will display strikethrough + reduced transparency.
2. **Automatic progress calculation:**
- Overall progress = (Number of selected resources / Total number of resources) × 100%
- Stage progress = Number of stages selected / Total number of stages
- Progress bar animation transition (transition: width 0.3s ease)
3. **Automatic Update of Stage Status**:
- Select all resources within the phase → Status changes to ✅ Completed, automatically collapsed.
- If any item is checked during the phase → the status changes to 🔄In Progress.
- No checkmark → ⬜ Not started
4. **Fold/Unfold**:
- Clicking the card header will collapse/expand.
- With smooth animation
5. **Milestone Check Pop-up Window**:
- A milestone check prompt will pop up when all resources for a phase are completed.
- Display the milestone standards for this stage
Users can click "Achieved" to confirm or mark "Needs Further Consolidation" to indicate completion.
6. **Data Persistence**:
- All states are stored in localStorage
- Restore state after page refresh
- Provides a "Reset Progress" button (requires secondary confirmation).
### Content Fill:
Fill the above structure with the complete learning path data planned in Step 2. Ensure:
- Each resource's link is a real, accessible URL.
- Resource type icons are correctly matched
- The duration of each phase is consistent with the logic of the total cycle.
- Milestone descriptions are specific and verifiable.
### Technical Requirements:
- Pure HTML + CSS + JavaScript, single file
- No external dependencies (except Google Fonts)
- Mobile responsive
- Print-friendly
- Clean code with comments
Description
Why we love this skill
This skill precisely captures user learning needs through a questionnaire format and can generate highly customized interactive learning websites. Its Kami design style and progress tracking features are particularly outstanding.
Based on your learning goals, current level, available time, and preferences, this Skill uses deep search to find real learning resources and create a personalized, step-by-step learning path. It outputs a Kami-style interactive learning website with progress tracking, milestone checks, and direct links to resources.
Related Skills
View allResearchSlow Teacher's Keyword Method
Use the keyword learning method to quickly get started in any field: output a table of 20 core keywords (with one-sentence explanations, application scenarios, and best practices), hand-drawn comic-style SVG logic relationship diagrams, simulate a domain expert answering 5 key questions, recommend 3–5 professional books, and assemble them into a well-formatted report; enter 'Interpret [Book Title]' to switch to the seven-part in-depth book interpretation mode.
ResearchSignal Room: Interview Synthesis
YouMind already transcribes your calls, interviews and podcasts. Signal Room is what happens next. Drop in one transcript or twenty and get back a research synthesis an actual analyst would sign: coded themes, verbatim evidence with timestamps, the places people disagree, and a ranked answer to the decision you are trying to make. The method is real qualitative practice, not summarisation: • Open coding that works quote-first — no quote, no code — with codes named in the participant's own words rather than analyst jargon • Every code tagged Behaviour, Belief or Wish, because "I would definitely pay for that" is not the same class of evidence as "I paid for that last month" • Themes stated as falsifiable sentences, with strength counted in participants rather than quotes, and disconfirming evidence hunted for on purpose • A tension map showing where your participants genuinely split and what predicts which side they fall on • An opportunity backlog written as "when [situation], [who] wants [outcome] because [reason]", each rated Strong, Suggestive or Anecdotal • A direct answer to your decision question, with a stated confidence level and what would change it • The three questions this round could not answer, and who to interview next Guardrails that matter: it never invents or polishes a quote, it refuses to report percentages on fewer than twelve participants, it pseudonymises participants by default, and it will tell you to your face when n=1 means you have a hypothesis rather than a finding. For product managers, UX and market researchers, journalists, consultants, founders doing customer discovery, and anyone sitting on hours of recordings and no findings.
ResearchAI Paper Master
Helps product managers, founders, and app developers understand AI papers through historical causal links, turning those insights into product judgments, technical boundaries, engineering intuition, and opportunity analysis.
Find your next favorite skill
Explore more curated AI skills for research, creation, and everyday work.