Mestre de Percursos de Aprendizagem
Instruções
Etapa 1: Levantamento de Necessidades (Baseado em questionário, sem necessidade de digitação)
Os perfis de aprendizagem do usuário são coletados por meio de duas rodadas de perguntas ao usuário (askUserQuestion).
### Rodada 1 (Informações Básicas)
Use o comando askUserQuestion para fazer perguntas simultaneamente nas três dimensões a seguir:
1. **Tipos de Objetivos de Aprendizagem**
- cabeçalho: "Alvo"
Opções: Preparação para exames / Aprimoramento de habilidades / Mudança de carreira / Exploração de interesses
2. **Nível atual**
- cabeçalho: "Horizontal"
- Opções: Sem experiência / Iniciante (compreende os conceitos) / Alguma experiência (consegue concluir tarefas simples) / Avançado (requer a superação de obstáculos)
3. **Horário disponível diariamente**
- cabeçalho: "Tempo"
- Opções: Menos de 30 minutos / 1 a 2 horas / 2 a 4 horas / Mais de 4 horas
### Segunda Rodada (Informações Complementares)
Use o comando askUserQuestion para fazer perguntas simultaneamente nas três dimensões a seguir:
1. **Direção de aprendizagem específica** (permite que os usuários insiram informações livremente)
- Orientar os usuários a inserir áreas específicas de interesse na pergunta, como: programação em Python, IELTS 7, exame CPA, design de interface do usuário, etc.
- cabeçalho: "Direção"
- Opções: Oferece diversos exemplos populares para escolher, além de permitir que os usuários insiram conteúdo personalizado.
2. **Prazo de Conclusão Previsto**
- cabeçalho: "Período"
- Opções: Sprint de 1 mês / Progresso constante de 3 meses / Desenvolvimento aprofundado de 6 meses / Contrato de longo prazo de 1 ano ou mais
3. **Preferências de Aprendizagem** (Selecione várias opções)
- cabeçalho: "Preferências"
- multiSeleção: verdadeiro
- Opções: Cursos em vídeo / Leitura de livros / Projetos práticos / Interação com a comunidade
Assim que a coleta de dados estiver concluída, todas as informações serão organizadas em um "perfil do aluno" estruturado para uso nas etapas subsequentes.
Etapa 2: Busca detalhada de recursos e planejamento de rotas
### 2.1 Busca de Recursos
Com base na direção de aprendizagem e nas preferências do usuário, realize de 2 a 3 pesquisas usando o Google Search:
1. **Procure o melhor roteiro de aprendizado nesta área**
- Consulta: "[Direção de Aprendizagem] Roteiro de Aprendizagem 2024-2025" ou "[Direção de Aprendizagem] Roteiro de Aprendizagem Recomendado"
- Extração: Divisão por etapas, pontos de conhecimento essenciais, ordem de aprendizagem
2. **Pesquise recursos de aprendizagem específicos**
- Pesquisar recursos relevantes com base nas preferências do usuário:
- Cursos em vídeo: Procure por cursos populares no Coursera/Udemy/Bilibili
- Livros: Procure livros bem avaliados nas listas de leitura recomendadas do Douban/Amazon.
- Projetos práticos: Pesquise GitHub/tutoriais práticos
- consulta: "[Direção de Aprendizagem] melhor [Tipo de Recurso] iniciante/intermediário/avançado"
3. **Pesquisar padrões de marcos**
- Consulta: "[Área de Aprendizagem] Lista de Verificação de Avaliação de Habilidades" ou "[Área de Aprendizagem] Padrões de Avaliação de Competências"
- Extração: Que nível deve ser alcançado em cada etapa?
### 2.2 Planejamento de Rota
Com base nos resultados da pesquisa e nos perfis dos usuários, planeje o percurso de aprendizagem:
**Princípio baseado em fases:**
- Com base no cronograma de aprendizagem esperado pelo usuário, divida o processo de aprendizagem em 3 a 5 etapas.
- Cada fase inclui: nome da fase, duração estimada, objetivos principais, recursos específicos (3-5) e marcos de verificação.
- Os recursos devem ser recursos genuínos encontrados por meio da pesquisa (com nome, plataforma e link).
- Os marcos devem ser descrições verificáveis de capacidades específicas.
**Princípios de alocação de tempo:**
- Calcule o total de horas de estudo para cada etapa com base no tempo disponível diariamente.
- Fornecer sugestões de horários semanais (dias de semana vs. fins de semana)
- Reserve 10% de tempo de segurança.
**Formato de saída (estrutura de dados interna, passada para a Etapa 3):**
```
Perfil do aluno: {objetivos, direção, nível, tempo, frequência, preferências}
Planejamento de rota: [
{
Nome da fase
Número da fase,
Duração estimada (semanas)
Descrição do objetivo principal,
Lista de recursos: [{Nome, Tipo (Vídeo/Livro/Projeto), Plataforma, Link, Horas de estudo estimadas}],
Marco: {Descrição, Método de Verificação}
}
]
Sugestões semanais: {Cronograma para dias de semana, Cronograma para fins de semana, Total de horas de estudo semanais}
```
Etapa 3: Gere um site de aprendizagem interativo no estilo Kami
Utilize a ferramenta generateWebpage para gerar um site interativo de percurso de aprendizagem.
O parâmetro de instrução contém a seguinte especificação completa, além dos dados específicos do percurso de aprendizagem gerados na Etapa 2:
### Especificações do Sistema de Design (Sistema de Design Kami adaptado para cenários de aprendizagem):
**Esquema de cores:**
- Fundo da página: #f5f4ed (pergaminho bege quente)
- Fundo do cartão: #FAF9F5 (Marfim)
- Cor de destaque/cor da marca: #1B365D (Azul Tinta)
- Cor do texto: #141413 (Preto próximo)
- Cor do subtexto: #4D4C48 (Carvão)
- Cor indicada: #87867F (Pedra)
- Cor da borda: #D6D5CE (borda cinza quente)
- Barra de progresso concluída: #1B365D (cor da marca)
- Barra de progresso não concluída: #E8E7E2
- Status de sucesso/conclusão: #2D5016 (Verde Oliva Escuro)
- Em andamento: #1B365D (cor da marca)
- Não iniciado: #87867F (Pedra)
- Fundo da etiqueta: #E4ECF5
- Todos os tons de cinza devem ser quentes (R≈G>B), sendo proibidos os tons frios de cinza azulado.
**Sistema de fontes:**
- Carregar Noto Serif SC e Noto Sans SC através do Google Fonts
- Título: família de fontes: 'Noto Serif SC', Charter, Georgia, serifada; peso da fonte: 500
- Texto: família de fontes: 'Noto Sans SC', 'PingFang SC', sem serifa; peso da fonte: 400
- Dados/Ênfase em Números: família de fontes: Charter, Georgia, serifada
- Desativar peso da fonte: 700/negrito
**Composição tipográfica:**
- Espaçamento entre linhas: Título 1,2 / Corpo do texto 1,5
- Espaçamento entre letras chinesas: 0,3 pt
- Largura máxima da página: 800px, centralizada
- Responsivo e compatível com dispositivos móveis
**Regras Visuais:**
- Sombra: sombra circular (0 0 0 1px rgba(0,0,0,0.05)) ou sombra suave (0 1px 3px rgba(0,0,0,0.04))
- Cantos arredondados: 8px (padrão) / 12px (cartão grande)
- Separador: 0,5px sólido #D6D5CE ou 2,5px sólido #1B365D (linha vertical da marca)
- Método de destaque: Texto em tinta azul ou linha vertical da marca à esquerda
### Requisitos de estrutura da página:
**1. Área do Herói Principal:**
- Título dos Objetivos de Aprendizagem (Serifa 28px)
- Etiquetas de informações principais em uma linha: Tipo de alvo | Duração estimada | Horário diário
- Barra de progresso geral (com porcentagens)
- Linha do cartão de estatísticas: Recursos totais / Concluído / Estágio atual
**2. Área do Cartão de Estágio (Núcleo):**
- Um cartão grande para cada etapa
- Cabeçalho do cartão: Número da etapa + Nome + Etiqueta de status (✅ Concluída / 🔄 Em andamento / ⬜ Não iniciada) + Duração estimada
- Conteúdo do cartão:
- Descrição do objetivo principal (1-2 frases)
- Lista de Recursos: Cada recurso é listado em uma linha separada, incluindo um ícone (📚Livro/🎬Vídeo/💻Projeto/👥Comunidade) + Nome (link clicável) + Tag da Plataforma + Caixa de seleção
- Área de marcos: Destacada com linhas verticais da marca e estilo especial para descrever a conquista de padrões.
- As cartas podem ser dobradas/desdobradas (o padrão é desdobrar para a fase atual e dobrar para a fase concluída).
**3. Área de Sugestões de Aprendizagem Semanal:**
- Sugestões concisas de alocação de tempo
- Horário dos dias de semana vs. Horário dos fins de semana
**4. Parte inferior:**
- Uma pequena linha de texto: Desenvolvido pelo Learning Path Planning Master · Projetado com o Kami Design System
### Requisitos de funcionalidade interativa (JavaScript puro de front-end + localStorage):
1. **Alternância do estado da caixa de seleção**:
- Clique na caixa de seleção antes do recurso para alternar o status de conclusão.
- Salvar o status no localStorage (a chave usa a direção de aprendizado + o hash do nome do recurso)
- Os recursos concluídos serão exibidos com texto riscado e transparência reduzida.
2. **Cálculo automático do progresso:**
- Progresso geral = (Número de recursos selecionados / Número total de recursos) × 100%
- Progresso da etapa = Número de etapas selecionadas / Número total de etapas
- Transição de animação da barra de progresso (transição: largura 0,3s, facilidade)
3. **Atualização automática do status da etapa**:
- Selecione todos os recursos dentro da fase → O status muda para ✅ Concluído, recolhido automaticamente.
- Se algum item for verificado durante a fase → o status muda para 🔄Em Andamento.
- Sem marca de seleção → ⬜ Não iniciado
4. **Dobrar/Desdobrar**:
Clicar no cabeçalho do cartão irá recolhê-lo/expandi-lo.
- Com animação suave
5. **Janela pop-up de verificação de marcos**:
- Uma mensagem de verificação de marco será exibida quando todos os recursos para uma fase forem concluídos.
- Exibir os padrões de referência para esta etapa
Os usuários podem clicar em "Concluído" para confirmar ou marcar "Necessita de consolidação adicional" para indicar a conclusão.
6. **Persistência de Dados**:
- Todos os estados são armazenados no localStorage
- Restaurar estado após atualização da página
- Fornece um botão "Reiniciar progresso" (requer confirmação secundária).
### Preenchimento de conteúdo:
Preencha a estrutura acima com os dados completos do percurso de aprendizagem planejado na Etapa 2. Certifique-se de:
- O link de cada recurso é um URL real e acessível.
- Os ícones dos tipos de recursos correspondem corretamente.
- A duração de cada fase é consistente com a lógica do ciclo total.
- As descrições dos marcos são específicas e verificáveis.
### Requisitos técnicos:
- HTML puro + CSS + JavaScript, arquivo único
- Sem dependências externas (exceto o Google Fonts)
- Responsivo para dispositivos móveis
- Versão para impressão
- Código limpo com comentários
Descrição
Porque recomendamos esta habilidade
Esta skill capta com precisão as necessidades de aprendizagem do utilizador através de um questionário, e consegue gerar um site de aprendizagem interativo altamente personalizado, sendo o seu estilo de design Kami e a funcionalidade de rastreio de progresso particularmente excelentes.
Com base nos seus objetivos de aprendizagem, nível atual, tempo disponível e preferências, pesquisa recursos de aprendizagem reais e cria um percurso de aprendizagem personalizado por etapas. O resultado é apresentado como um site de aprendizagem interativo ao estilo Kami, com acompanhamento do progresso, verificação de marcos e ligações diretas para os recursos.
Habilidades relacionadas
Ver tudo
InvestigaçãoFaísca｜Analisador de Hooks
Ao preparar um vídeo, é comum depararmo-nos com esta situação: percebe claramente que determinado vídeo de referência “sabe contar uma história”, mas, quando chega a sua vez de criar, só consegue imitá-lo por intuição. 「Faísca｜Analisador de Hooks」foi criado para esta etapa. Dê-lhe um vídeo específico do YouTube. A ferramenta começa por confirmar qual é o vídeo e ler as legendas verificáveis. Depois, separa três elementos que facilmente se confundem: Literal 30s: o que realmente acontece entre 0:00 e 0:30 do vídeo. Intro: toda a abertura antes da entrada no conteúdo principal. Hook / Re-hook: um ou mais momentos estruturais que realmente ajudam a reter a atenção do público. Assim, não interpreta à força os primeiros 30 segundos de todos os vídeos como Hook só porque “toda a gente diz que os primeiros 30 segundos são os mais importantes”. Se o verdadeiro Hook surgir depois do primeiro minuto, a ferramenta diz-lho claramente. Se faltarem legendas ou marcas temporais suficientes, assinala explicitamente essa lacuna de evidência, em vez de inventar uma resposta com aparência profissional. Depois de decompor a abertura, continua a reconstruir a estrutura de conteúdo de todo o vídeo através de um esquema: o vídeo avança por uma linha temporal, experiências, passos, comparações, uma história, uma cadeia de perguntas ou outro mecanismo de organização? Por fim, abstrai estas estruturas em modelos de [slots]. O modelo mantém a ordem e a função da estrutura, não as experiências, formulações, marcas, números, opiniões ou identidade de autoridade do autor original. No final, não recebe apenas um resumo do vídeo, mas sim um Hook Outline + um modelo da estrutura completa, que pode continuar a ser utilizado na etapa seguinte da criação. O que não faz Não irá: Escrever diretamente o Hook final por si; Usar BRENS para avaliar ou reescrever o seu Hook; Pesquisar em grande escala todo o setor ou canal; Gerar um guião completo; Gerar diagramas, materiais, animações ou miniaturas. A pesquisa em grande escala de referências pertence à Skill a montante「Faísca｜Investigador de conteúdo do YouTube」; o aperfeiçoamento do seu próprio Hook pertence à Skill correspondente da etapa seguinte.
InvestigaçãoFaísca｜Investigador YouTube
Vai fazer um vídeo, mas não sabe como outras pessoas já abordaram o tema? 「Faísca｜Investigador YouTube」entra realmente no YouTube para fazer pesquisa: encontra vídeos relevantes, lê transcrições, analisa títulos e os primeiros 30 segundos, reconstrói a estrutura do conteúdo e identifica, a partir de vários exemplos, formas de expressão recorrentes, diferenças claras e lacunas ainda mal exploradas. Pode utilizá-lo para: Pesquisar que conteúdos sobre um tema estão a ser repetidos Analisar em profundidade como um vídeo é construído Examinar os temas, títulos e hábitos de conteúdo de um canal Analisar o Hook dos primeiros 30 segundos e a estrutura do vídeo completo Encontrar novos ângulos criativos em vídeos existentes Estudar como voltar a apresentar o seu próprio vídeo finalizado Não lhe dirá de forma precipitada que «este título resulta de certeza» só porque um vídeo teve muitas visualizações. Quando não conseguir obter transcrições, marcas temporais ou dados de desempenho, indicará claramente que evidências estão em falta. O resultado final não é uma pilha de resumos de vídeos, mas um briefing de pesquisa do YouTube que pode ser entregue diretamente à próxima etapa de definição do tema, do Hook ou do guião. Adequado para: criadores de YouTube, planeadores de vídeo, gestores de conteúdos digitais e qualquer pessoa que queira perceber «até onde outros já levaram este tema» antes de começar a gravar.
Palavras em Banda Desenhada
Introduza uma palavra inglesa e obtenha um cartão de memória em formato de banda desenhada: a pronúncia por associação sonora, o significado e uma frase de exemplo são desenhados na mesma pequena história contínua, através de balões de fala, letreiros e onomatopeias. Fora da imagem, fica apenas uma linha de informação no topo e uma linha de sugestão para ajudar a recordar. O impacto visual é mais importante do que o requinte, sempre com conteúdo adequado para crianças.
Mestre de Percursos de Aprendizagem
Instruções
Etapa 1: Levantamento de Necessidades (Baseado em questionário, sem necessidade de digitação)
Os perfis de aprendizagem do usuário são coletados por meio de duas rodadas de perguntas ao usuário (askUserQuestion).
### Rodada 1 (Informações Básicas)
Use o comando askUserQuestion para fazer perguntas simultaneamente nas três dimensões a seguir:
1. **Tipos de Objetivos de Aprendizagem**
- cabeçalho: "Alvo"
Opções: Preparação para exames / Aprimoramento de habilidades / Mudança de carreira / Exploração de interesses
2. **Nível atual**
- cabeçalho: "Horizontal"
- Opções: Sem experiência / Iniciante (compreende os conceitos) / Alguma experiência (consegue concluir tarefas simples) / Avançado (requer a superação de obstáculos)
3. **Horário disponível diariamente**
- cabeçalho: "Tempo"
- Opções: Menos de 30 minutos / 1 a 2 horas / 2 a 4 horas / Mais de 4 horas
### Segunda Rodada (Informações Complementares)
Use o comando askUserQuestion para fazer perguntas simultaneamente nas três dimensões a seguir:
1. **Direção de aprendizagem específica** (permite que os usuários insiram informações livremente)
- Orientar os usuários a inserir áreas específicas de interesse na pergunta, como: programação em Python, IELTS 7, exame CPA, design de interface do usuário, etc.
- cabeçalho: "Direção"
- Opções: Oferece diversos exemplos populares para escolher, além de permitir que os usuários insiram conteúdo personalizado.
2. **Prazo de Conclusão Previsto**
- cabeçalho: "Período"
- Opções: Sprint de 1 mês / Progresso constante de 3 meses / Desenvolvimento aprofundado de 6 meses / Contrato de longo prazo de 1 ano ou mais
3. **Preferências de Aprendizagem** (Selecione várias opções)
- cabeçalho: "Preferências"
- multiSeleção: verdadeiro
- Opções: Cursos em vídeo / Leitura de livros / Projetos práticos / Interação com a comunidade
Assim que a coleta de dados estiver concluída, todas as informações serão organizadas em um "perfil do aluno" estruturado para uso nas etapas subsequentes.
Etapa 2: Busca detalhada de recursos e planejamento de rotas
### 2.1 Busca de Recursos
Com base na direção de aprendizagem e nas preferências do usuário, realize de 2 a 3 pesquisas usando o Google Search:
1. **Procure o melhor roteiro de aprendizado nesta área**
- Consulta: "[Direção de Aprendizagem] Roteiro de Aprendizagem 2024-2025" ou "[Direção de Aprendizagem] Roteiro de Aprendizagem Recomendado"
- Extração: Divisão por etapas, pontos de conhecimento essenciais, ordem de aprendizagem
2. **Pesquise recursos de aprendizagem específicos**
- Pesquisar recursos relevantes com base nas preferências do usuário:
- Cursos em vídeo: Procure por cursos populares no Coursera/Udemy/Bilibili
- Livros: Procure livros bem avaliados nas listas de leitura recomendadas do Douban/Amazon.
- Projetos práticos: Pesquise GitHub/tutoriais práticos
- consulta: "[Direção de Aprendizagem] melhor [Tipo de Recurso] iniciante/intermediário/avançado"
3. **Pesquisar padrões de marcos**
- Consulta: "[Área de Aprendizagem] Lista de Verificação de Avaliação de Habilidades" ou "[Área de Aprendizagem] Padrões de Avaliação de Competências"
- Extração: Que nível deve ser alcançado em cada etapa?
### 2.2 Planejamento de Rota
Com base nos resultados da pesquisa e nos perfis dos usuários, planeje o percurso de aprendizagem:
**Princípio baseado em fases:**
- Com base no cronograma de aprendizagem esperado pelo usuário, divida o processo de aprendizagem em 3 a 5 etapas.
- Cada fase inclui: nome da fase, duração estimada, objetivos principais, recursos específicos (3-5) e marcos de verificação.
- Os recursos devem ser recursos genuínos encontrados por meio da pesquisa (com nome, plataforma e link).
- Os marcos devem ser descrições verificáveis de capacidades específicas.
**Princípios de alocação de tempo:**
- Calcule o total de horas de estudo para cada etapa com base no tempo disponível diariamente.
- Fornecer sugestões de horários semanais (dias de semana vs. fins de semana)
- Reserve 10% de tempo de segurança.
**Formato de saída (estrutura de dados interna, passada para a Etapa 3):**
```
Perfil do aluno: {objetivos, direção, nível, tempo, frequência, preferências}
Planejamento de rota: [
{
Nome da fase
Número da fase,
Duração estimada (semanas)
Descrição do objetivo principal,
Lista de recursos: [{Nome, Tipo (Vídeo/Livro/Projeto), Plataforma, Link, Horas de estudo estimadas}],
Marco: {Descrição, Método de Verificação}
}
]
Sugestões semanais: {Cronograma para dias de semana, Cronograma para fins de semana, Total de horas de estudo semanais}
```
Etapa 3: Gere um site de aprendizagem interativo no estilo Kami
Utilize a ferramenta generateWebpage para gerar um site interativo de percurso de aprendizagem.
O parâmetro de instrução contém a seguinte especificação completa, além dos dados específicos do percurso de aprendizagem gerados na Etapa 2:
### Especificações do Sistema de Design (Sistema de Design Kami adaptado para cenários de aprendizagem):
**Esquema de cores:**
- Fundo da página: #f5f4ed (pergaminho bege quente)
- Fundo do cartão: #FAF9F5 (Marfim)
- Cor de destaque/cor da marca: #1B365D (Azul Tinta)
- Cor do texto: #141413 (Preto próximo)
- Cor do subtexto: #4D4C48 (Carvão)
- Cor indicada: #87867F (Pedra)
- Cor da borda: #D6D5CE (borda cinza quente)
- Barra de progresso concluída: #1B365D (cor da marca)
- Barra de progresso não concluída: #E8E7E2
- Status de sucesso/conclusão: #2D5016 (Verde Oliva Escuro)
- Em andamento: #1B365D (cor da marca)
- Não iniciado: #87867F (Pedra)
- Fundo da etiqueta: #E4ECF5
- Todos os tons de cinza devem ser quentes (R≈G>B), sendo proibidos os tons frios de cinza azulado.
**Sistema de fontes:**
- Carregar Noto Serif SC e Noto Sans SC através do Google Fonts
- Título: família de fontes: 'Noto Serif SC', Charter, Georgia, serifada; peso da fonte: 500
- Texto: família de fontes: 'Noto Sans SC', 'PingFang SC', sem serifa; peso da fonte: 400
- Dados/Ênfase em Números: família de fontes: Charter, Georgia, serifada
- Desativar peso da fonte: 700/negrito
**Composição tipográfica:**
- Espaçamento entre linhas: Título 1,2 / Corpo do texto 1,5
- Espaçamento entre letras chinesas: 0,3 pt
- Largura máxima da página: 800px, centralizada
- Responsivo e compatível com dispositivos móveis
**Regras Visuais:**
- Sombra: sombra circular (0 0 0 1px rgba(0,0,0,0.05)) ou sombra suave (0 1px 3px rgba(0,0,0,0.04))
- Cantos arredondados: 8px (padrão) / 12px (cartão grande)
- Separador: 0,5px sólido #D6D5CE ou 2,5px sólido #1B365D (linha vertical da marca)
- Método de destaque: Texto em tinta azul ou linha vertical da marca à esquerda
### Requisitos de estrutura da página:
**1. Área do Herói Principal:**
- Título dos Objetivos de Aprendizagem (Serifa 28px)
- Etiquetas de informações principais em uma linha: Tipo de alvo | Duração estimada | Horário diário
- Barra de progresso geral (com porcentagens)
- Linha do cartão de estatísticas: Recursos totais / Concluído / Estágio atual
**2. Área do Cartão de Estágio (Núcleo):**
- Um cartão grande para cada etapa
- Cabeçalho do cartão: Número da etapa + Nome + Etiqueta de status (✅ Concluída / 🔄 Em andamento / ⬜ Não iniciada) + Duração estimada
- Conteúdo do cartão:
- Descrição do objetivo principal (1-2 frases)
- Lista de Recursos: Cada recurso é listado em uma linha separada, incluindo um ícone (📚Livro/🎬Vídeo/💻Projeto/👥Comunidade) + Nome (link clicável) + Tag da Plataforma + Caixa de seleção
- Área de marcos: Destacada com linhas verticais da marca e estilo especial para descrever a conquista de padrões.
- As cartas podem ser dobradas/desdobradas (o padrão é desdobrar para a fase atual e dobrar para a fase concluída).
**3. Área de Sugestões de Aprendizagem Semanal:**
- Sugestões concisas de alocação de tempo
- Horário dos dias de semana vs. Horário dos fins de semana
**4. Parte inferior:**
- Uma pequena linha de texto: Desenvolvido pelo Learning Path Planning Master · Projetado com o Kami Design System
### Requisitos de funcionalidade interativa (JavaScript puro de front-end + localStorage):
1. **Alternância do estado da caixa de seleção**:
- Clique na caixa de seleção antes do recurso para alternar o status de conclusão.
- Salvar o status no localStorage (a chave usa a direção de aprendizado + o hash do nome do recurso)
- Os recursos concluídos serão exibidos com texto riscado e transparência reduzida.
2. **Cálculo automático do progresso:**
- Progresso geral = (Número de recursos selecionados / Número total de recursos) × 100%
- Progresso da etapa = Número de etapas selecionadas / Número total de etapas
- Transição de animação da barra de progresso (transição: largura 0,3s, facilidade)
3. **Atualização automática do status da etapa**:
- Selecione todos os recursos dentro da fase → O status muda para ✅ Concluído, recolhido automaticamente.
- Se algum item for verificado durante a fase → o status muda para 🔄Em Andamento.
- Sem marca de seleção → ⬜ Não iniciado
4. **Dobrar/Desdobrar**:
Clicar no cabeçalho do cartão irá recolhê-lo/expandi-lo.
- Com animação suave
5. **Janela pop-up de verificação de marcos**:
- Uma mensagem de verificação de marco será exibida quando todos os recursos para uma fase forem concluídos.
- Exibir os padrões de referência para esta etapa
Os usuários podem clicar em "Concluído" para confirmar ou marcar "Necessita de consolidação adicional" para indicar a conclusão.
6. **Persistência de Dados**:
- Todos os estados são armazenados no localStorage
- Restaurar estado após atualização da página
- Fornece um botão "Reiniciar progresso" (requer confirmação secundária).
### Preenchimento de conteúdo:
Preencha a estrutura acima com os dados completos do percurso de aprendizagem planejado na Etapa 2. Certifique-se de:
- O link de cada recurso é um URL real e acessível.
- Os ícones dos tipos de recursos correspondem corretamente.
- A duração de cada fase é consistente com a lógica do ciclo total.
- As descrições dos marcos são específicas e verificáveis.
### Requisitos técnicos:
- HTML puro + CSS + JavaScript, arquivo único
- Sem dependências externas (exceto o Google Fonts)
- Responsivo para dispositivos móveis
- Versão para impressão
- Código limpo com comentários
Descrição
Porque recomendamos esta habilidade
Esta skill capta com precisão as necessidades de aprendizagem do utilizador através de um questionário, e consegue gerar um site de aprendizagem interativo altamente personalizado, sendo o seu estilo de design Kami e a funcionalidade de rastreio de progresso particularmente excelentes.
Com base nos seus objetivos de aprendizagem, nível atual, tempo disponível e preferências, pesquisa recursos de aprendizagem reais e cria um percurso de aprendizagem personalizado por etapas. O resultado é apresentado como um site de aprendizagem interativo ao estilo Kami, com acompanhamento do progresso, verificação de marcos e ligações diretas para os recursos.
Habilidades relacionadas
Ver tudoInvestigaçãoFaísca｜Analisador de Hooks
Ao preparar um vídeo, é comum depararmo-nos com esta situação: percebe claramente que determinado vídeo de referência “sabe contar uma história”, mas, quando chega a sua vez de criar, só consegue imitá-lo por intuição. 「Faísca｜Analisador de Hooks」foi criado para esta etapa. Dê-lhe um vídeo específico do YouTube. A ferramenta começa por confirmar qual é o vídeo e ler as legendas verificáveis. Depois, separa três elementos que facilmente se confundem: Literal 30s: o que realmente acontece entre 0:00 e 0:30 do vídeo. Intro: toda a abertura antes da entrada no conteúdo principal. Hook / Re-hook: um ou mais momentos estruturais que realmente ajudam a reter a atenção do público. Assim, não interpreta à força os primeiros 30 segundos de todos os vídeos como Hook só porque “toda a gente diz que os primeiros 30 segundos são os mais importantes”. Se o verdadeiro Hook surgir depois do primeiro minuto, a ferramenta diz-lho claramente. Se faltarem legendas ou marcas temporais suficientes, assinala explicitamente essa lacuna de evidência, em vez de inventar uma resposta com aparência profissional. Depois de decompor a abertura, continua a reconstruir a estrutura de conteúdo de todo o vídeo através de um esquema: o vídeo avança por uma linha temporal, experiências, passos, comparações, uma história, uma cadeia de perguntas ou outro mecanismo de organização? Por fim, abstrai estas estruturas em modelos de [slots]. O modelo mantém a ordem e a função da estrutura, não as experiências, formulações, marcas, números, opiniões ou identidade de autoridade do autor original. No final, não recebe apenas um resumo do vídeo, mas sim um Hook Outline + um modelo da estrutura completa, que pode continuar a ser utilizado na etapa seguinte da criação. O que não faz Não irá: Escrever diretamente o Hook final por si; Usar BRENS para avaliar ou reescrever o seu Hook; Pesquisar em grande escala todo o setor ou canal; Gerar um guião completo; Gerar diagramas, materiais, animações ou miniaturas. A pesquisa em grande escala de referências pertence à Skill a montante「Faísca｜Investigador de conteúdo do YouTube」; o aperfeiçoamento do seu próprio Hook pertence à Skill correspondente da etapa seguinte.
InvestigaçãoFaísca｜Investigador YouTube
Vai fazer um vídeo, mas não sabe como outras pessoas já abordaram o tema? 「Faísca｜Investigador YouTube」entra realmente no YouTube para fazer pesquisa: encontra vídeos relevantes, lê transcrições, analisa títulos e os primeiros 30 segundos, reconstrói a estrutura do conteúdo e identifica, a partir de vários exemplos, formas de expressão recorrentes, diferenças claras e lacunas ainda mal exploradas. Pode utilizá-lo para: Pesquisar que conteúdos sobre um tema estão a ser repetidos Analisar em profundidade como um vídeo é construído Examinar os temas, títulos e hábitos de conteúdo de um canal Analisar o Hook dos primeiros 30 segundos e a estrutura do vídeo completo Encontrar novos ângulos criativos em vídeos existentes Estudar como voltar a apresentar o seu próprio vídeo finalizado Não lhe dirá de forma precipitada que «este título resulta de certeza» só porque um vídeo teve muitas visualizações. Quando não conseguir obter transcrições, marcas temporais ou dados de desempenho, indicará claramente que evidências estão em falta. O resultado final não é uma pilha de resumos de vídeos, mas um briefing de pesquisa do YouTube que pode ser entregue diretamente à próxima etapa de definição do tema, do Hook ou do guião. Adequado para: criadores de YouTube, planeadores de vídeo, gestores de conteúdos digitais e qualquer pessoa que queira perceber «até onde outros já levaram este tema» antes de começar a gravar.
Palavras em Banda Desenhada
Introduza uma palavra inglesa e obtenha um cartão de memória em formato de banda desenhada: a pronúncia por associação sonora, o significado e uma frase de exemplo são desenhados na mesma pequena história contínua, através de balões de fala, letreiros e onomatopeias. Fora da imagem, fica apenas uma linha de informação no topo e uma linha de sugestão para ajudar a recordar. O impacto visual é mais importante do que o requinte, sempre com conteúdo adequado para crianças.
Encontra a tua próxima habilidade favorita
Explora mais habilidades de IA selecionadas para pesquisa, criação e trabalho do dia a dia.