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
ResearchSpark | Video Hook Analyzer
When preparing to make a video, we often run into the same problem: you can clearly see that a reference video “knows how to tell a story,” but when it’s your turn to create, you can only imitate it by feel. 「Spark | Video Hook Analyzer」is designed for this step. Give it a specific YouTube video. It first verifies the video and reads captions that can be checked, then separates three things that are easy to conflate: Literal 30s: What actually happens from 0:00–0:30. Intro: The entire opening before the main content begins. Hook / Re-hook: One or more structural beats that genuinely work to keep viewers watching. So it won’t force the first 30 seconds of every video to be interpreted as the Hook just because “everyone says the first 30 seconds matter most.” If the real Hook comes after the one-minute mark, it will tell you plainly. If the captions or timestamps are insufficient, it will clearly identify the evidence gap instead of filling it with an answer that merely looks professional. After breaking down the opening, it continues by using an outline to reconstruct the structure of the full video: Does it move forward through a timeline, experiment, process, comparison, story, chain of questions, or another organizing device? Finally, it abstracts these structures into [slots] templates. The templates preserve the sequence and function of the structure—not the original creator’s experiences, wording, brand, numbers, opinions, or authority. What you ultimately get is not a video summary, but a Hook Outline + full-video structure template that can be handed off to the next stage of creation. What it does not do It does not: Write the final new Hook for you; Score or rewrite your opening with BRENS; Search the entire niche or channel at scale; Generate a complete script; Generate diagrams, assets, animations, or thumbnails. Finding reference samples at scale belongs to the upstream 「Spark | YouTube Content Researcher」; refining your own Hook belongs to the corresponding follow-up Skill.
ResearchSpark | YouTube Researcher
Planning a video but unsure how others have already covered the topic? “Spark | YouTube Researcher” conducts real research on YouTube: finding relevant videos, reading transcripts, breaking down titles and the first 30 seconds, reconstructing content structures, and identifying recurring approaches, clear differences, and gaps that no one has addressed well across multiple examples. You can use it to: Research which approaches are repeatedly used for a topic Deeply analyze how a video is presented Scan a channel’s topics, titles, and content patterns Break down the first 30-second hook and the full video structure Find new creative angles in existing videos Research how to repackage your own finished video It won’t jump to the conclusion that a title must work simply because one video has high views. When transcripts, timestamps, or performance data are unavailable, it will also clearly tell you what evidence is missing. What you get is not a pile of video summaries, but a YouTube research brief you can hand directly to the next step of topic development, hook creation, or scriptwriting. Ideal for YouTube creators, video planners, social media operators, and anyone who wants to see how far others have taken a topic before starting to film.
Goofy Word Mnemonics
Enter an English word and get a comic-strip memory card: its pronunciation, meaning, and example sentence are all drawn into one continuous mini-scene using speech bubbles, signs, and sound effects. Outside the image, leave only one line of header information and one line of recall prompt. Impact matters more than polish; child-safe.
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 allResearchSpark | Video Hook Analyzer
When preparing to make a video, we often run into the same problem: you can clearly see that a reference video “knows how to tell a story,” but when it’s your turn to create, you can only imitate it by feel. 「Spark | Video Hook Analyzer」is designed for this step. Give it a specific YouTube video. It first verifies the video and reads captions that can be checked, then separates three things that are easy to conflate: Literal 30s: What actually happens from 0:00–0:30. Intro: The entire opening before the main content begins. Hook / Re-hook: One or more structural beats that genuinely work to keep viewers watching. So it won’t force the first 30 seconds of every video to be interpreted as the Hook just because “everyone says the first 30 seconds matter most.” If the real Hook comes after the one-minute mark, it will tell you plainly. If the captions or timestamps are insufficient, it will clearly identify the evidence gap instead of filling it with an answer that merely looks professional. After breaking down the opening, it continues by using an outline to reconstruct the structure of the full video: Does it move forward through a timeline, experiment, process, comparison, story, chain of questions, or another organizing device? Finally, it abstracts these structures into [slots] templates. The templates preserve the sequence and function of the structure—not the original creator’s experiences, wording, brand, numbers, opinions, or authority. What you ultimately get is not a video summary, but a Hook Outline + full-video structure template that can be handed off to the next stage of creation. What it does not do It does not: Write the final new Hook for you; Score or rewrite your opening with BRENS; Search the entire niche or channel at scale; Generate a complete script; Generate diagrams, assets, animations, or thumbnails. Finding reference samples at scale belongs to the upstream 「Spark | YouTube Content Researcher」; refining your own Hook belongs to the corresponding follow-up Skill.
ResearchSpark | YouTube Researcher
Planning a video but unsure how others have already covered the topic? “Spark | YouTube Researcher” conducts real research on YouTube: finding relevant videos, reading transcripts, breaking down titles and the first 30 seconds, reconstructing content structures, and identifying recurring approaches, clear differences, and gaps that no one has addressed well across multiple examples. You can use it to: Research which approaches are repeatedly used for a topic Deeply analyze how a video is presented Scan a channel’s topics, titles, and content patterns Break down the first 30-second hook and the full video structure Find new creative angles in existing videos Research how to repackage your own finished video It won’t jump to the conclusion that a title must work simply because one video has high views. When transcripts, timestamps, or performance data are unavailable, it will also clearly tell you what evidence is missing. What you get is not a pile of video summaries, but a YouTube research brief you can hand directly to the next step of topic development, hook creation, or scriptwriting. Ideal for YouTube creators, video planners, social media operators, and anyone who wants to see how far others have taken a topic before starting to film.
Goofy Word Mnemonics
Enter an English word and get a comic-strip memory card: its pronunciation, meaning, and example sentence are all drawn into one continuous mini-scene using speech bubbles, signs, and sound effects. Outside the image, leave only one line of header information and one line of recall prompt. Impact matters more than polish; child-safe.
Find your next favorite skill
Explore more curated AI skills for research, creation, and everyday work.