111seek/blogger-portfolio

Portfólio de Criador de Conteúdo (para Entrevista — HTML de Arquivo Único)

O resultado é um único index.html: todas as imagens embutidas como base64, pode ser aberto com um duplo clique e enviado diretamente por WeChat/e-mail para o recrutador. A estrutura é fixa em sete seções, unidas por uma "linha do tempo da vida"; o texto destaca apenas pontos fortes, e cada número deve corresponder ao que aparece no perfil.

Quando usar

• O usuário quer transformar sua conta de criador em material de candidatura (mídia social, operação de conteúdo, branding)
• O usuário quer fazer uma página igual para outro criador (trocar persona, dados, sem redesenhar)
• O usuário já tem um portfólio antigo e precisa mudar cores, estrutura ou atualizar o boletim

Como é a entrega

portfolio/
├── index.html          ← Único entregável
├── data.json           ← Fonte de dados (notas, trimestres, marcas, identidade)
└── assets/             ← Capa + avatar (embutidos durante o build)

Sete seções (a numeração/tema pode ser alterado — veja references/theming.md):

Seção	Conteúdo	Requisitos-chave
Abertura 12:00	Título + introdução + 5 blocos de dados	Uma frase que resuma "o que eu fiz"
Obras 12:15	TOP1 detalhado + TOP2–5 visíveis + TOP6–9 recolhido	Capas devem ser fotos originais com a pessoa
Dados 12:40	Curva trimestral de curtidas + barras de taxa de compartilhamento/coleta	Curva suave, com área gradiente e animação de traçado
Experiência 13:00	Narrativa + boletim 2×2 + perfil de fãs + resumo	Números em três níveis: escala/explosão/comercialização
Métodos 13:20	4 princípios, cada um apoiado por um dado com número	Sem princípio sem dados
Vantagens 13:40	4 cartões de habilidade (número grande + tags + evidência)	São vantagens, não retrospectiva — proibido escrever problemas ou planos
Sobre 14:00	Frase de encerramento + tabela de fatos (localização/universidade/conta/e-mail)	Fácil para o recrutador copiar contato

Pré-requisitos (Passo 0 — Obrigatório antes de coletar dados)

Para coletar dados é necessário o CLI do Xiaohongshu. O CLI já vem embutido neste skill (vendor/redbook/, upstream MIT), então basta copiar a pasta toda do skill para outra pessoa — ela não precisa de npm i -g.

bash scripts/doctor.sh     # Diagnóstico: node / fonte do CLI / cookie / estado de login

Item	Requisito	Se não atender
node	≥ 22	Instale o Node e volte; a cópia embutida também depende dele
CLI	redbook global ou vendor/redbook/dist/cli.js (um dos dois)	Faltou copiar vendor/, ou execute npm i -g @lucasygu/redbook
Login	~/.redbook/cookies.json válido	Rode bash scripts/redbook.sh auth save; se falhar, veja o plano CDP no final de data-collection.md

Todos os comandos de coleta usam o lançador bash scripts/redbook.sh <subcomando>: ele prioriza a versão global (que pode ser atualizada via npm), e recai para a cópia embutida automaticamente, configurando REDBOOK_COOKIE_FILE. Escrever redbook direto pode falhar na máquina de outra pessoa.

Ao compartilhar com outros: empacote a pasta blogger-portfolio/ inteira (incluindo vendor/, ~1 MB). A outra pessoa só precisa fazer duas coisas: instalar Node ≥22 e fazer login na própria conta do Xiaohongshu uma vez. Não remova vendor/redbook/ para economizar espaço — senão vira "precisa instalar o pacote npm primeiro". Para atualizar o CLI: npm i -g @lucasygu/redbook@latest e depois sincronize os novos dist/ e node_modules/ para vendor/redbook/.

Fluxo

1. Coletar dados

Use o CLI embutido do Xiaohongshu para dados públicos (lista de notas, curtidas/coletas/compartilhamentos, capas TOP9, distribuição trimestral):

RB="bash scripts/redbook.sh"
$RB whoami                                        # Primeiro confirme o login
$RB search "<nome do perfil>" --json                # Número de usuário → obtém userId + xsec_token
$RB user-posts <userId> --xsec-token '<t>' --xsec-source pc_search --all --delay 3000 --json > posts.json

Visualizações, perfil de fãs, número de marcas, volume de vendas — só perguntando ao usuário.

Comandos completos, scripts de deduplicação e agregação, reparo de cookie expirado, anti-fraude para coleta de comentários: veja references/data-collection.md. A coleta deve ser serial com intervalo de 3s; se encontrar captcha ao coletar comentários, pare imediatamente.

2. Definir persona e tema visual

Primeiro pergunte três coisas: posicionamento da conta (estilo de vida/casa/maternidade/pets/restaurantes…), vaga alvo, se há fotos com a pessoa. Depois siga references/theming.md para escolher a metáfora da linha do tempo, paleta de cores e nomes das seções. Padrão: estilo papel claro (bege #fbf6ee + damasco #d9744f); criadores de estilo de vida nunca usam tema escuro.

3. Escrever data.json

Copie de demo/data.json e edite (demo/ é um exemplo que já pode ser buildado: persona fictícia + capas placeholder):

{
  "site":  {"title","meta","name","tagline","handle","profile_url","collected_at","start","avatar"},
  "hero":  {"clock","h1","lead","roles"},
  "ledger":[{"value","label","hl"}],            // 5 blocos, o primeiro com hl:true
  "facts": [{"k","v"}],                          // Tabela de fatos à direita na seção Sobre (localização/universidade/conta/e-mail)
  "notes": [{"rank","title","date","like","collect","share","comment","url","brand","img"}],
  "quarters": [["24Q3", 1, 260]],               // [trimestre, número de posts, total de curtidas] — de 6 a 12
  "brands":[{"name","cat"}]
}

notes — 9 são suficientes (TOP1 + TOP2–5 + TOP6–9); img use caminhos relativos — serão embutidos durante o build. Valores numéricos mantenha o formato original da plataforma (ex: "7.6万"); a função toN/fmt na página converte automaticamente. Em h1 e lead pode-se usar HTML (<br>, <span class="mark">, <em>).

4. Build

python3 scripts/build.py --data portfolio/data.json --out portfolio/index.html

O script embute imagens, preenche placeholders — se faltar placeholder, ele para com erro e ao final informa quantos textos de exemplo ainda precisam ser alterados.

5. Reescrever textos de exemplo (não pule)

O template vem com um conjunto completo de exemplo "soneca no carro-cama". Após o build, altere cada marcador:

<!--EDIT:works-->        Título da seção de obras + introdução + 3 tópicos do TOP1
<!--EDIT:featured-->     Cartão de destaque do TOP1 (citação + por que viralizou)
<!--EDIT:datahead-->     Título da seção de dados + explicação das três taxas
<!--EDIT:experience-->   Experiência: narrativa + boletim + perfil de fãs + resumo
<!--EDIT:method-->       Quatro métodos
<!--EDIT:strengths-->    Quatro vantagens
<!--EDIT:about-->        Sobre + tabela de fatos lateral

Regras de redação, fórmulas das seções, lista de proibições, qual cartão responde a qual pergunta de entrevista — veja tudo em references/copy-playbook.md. Leia antes de escrever, senão é fácil cair em "retrospectiva".

Ordem sugerida: primeiro build, depois edite os textos no HTML; se depois precisar alterar data.json, lembre-se que o novo build sobrescreverá as edições manuais.

6. Verificação

npm i playwright-core     # Instale em uma pasta temporária qualquer
node scripts/verify.js portfolio/index.html

Verifica em três viewports (1440 / 768 / 390): erros no console, se imagens visíveis carregaram, overflow horizontal, se elementos com scroll-reveal apareceram, se a curva foi gerada, se barras de taxa têm largura >0, se contraste do texto é ≥ 4,5. Código de saída diferente de 0 indica problema grave.

Não envie screenshots para o usuário — apenas informe os valores numéricos das verificações; só tire print se o usuário pedir explicitamente.

7. Entrega

Use present_files para abrir portfolio/index.html e diga três coisas no texto:

1. O que mudou nesta versão (cores / estrutura / métricas)
2. Quais números não batem com os da plataforma e sugestão do que escrever (não invente desculpas)
3. O que ainda falta: experiência profissional 【a preencher】, e-mail de contato, se quer publicar como link online

Se o usuário for ver no celular, use preview na rede local (~/.workbuddy/live-serve/live_serve.py), não fique reenviando arquivo.

Estrutura do diretório

SKILL.md                      Este arquivo
scripts/build.py              data.json + template → HTML de arquivo único
scripts/verify.js             Verificação pré-entrega (playwright-core + Chrome local)
scripts/doctor.sh             Diagnóstico pré-coleta (node / CLI / cookie / login)
scripts/preview.sh            Build + servidor + endereço para celular + reconstrução automática (um comando)
scripts/redbook.sh            Lançador do CLI (versão global → cópia embutida, seleção automática)
assets/template.html          Template da página (CSS/JS completos, placeholders no formato {{NAME}})
demo/                         Exemplo que já pode ser buildado (persona fictícia + capas placeholder; execute para testar o ambiente)
references/data-collection.md Coleta, agregação, reparo de cookie, anti-fraude
references/copy-playbook.md   Fórmulas de texto, três níveis de números, proibições, mapeamento para perguntas de entrevista
references/theming.md         Troca de persona: metáfora da linha do tempo, paleta, decoração, acessibilidade
vendor/redbook/               CLI do Xiaohongshu embutido (MIT, com dist/ e node_modules/)
vendor/NOTICE.md              Origem, versão, licença e método de atualização das dependências

O template tem 37 KB; o resultado final com imagens embutidas fica ~1 MB — tamanho aceitável, não comprima imagens para economizar. O CLI embutido tem ~760 KB; não o remova: é a única garantia de que "a outra pessoa só precisa ter Node para rodar".

Armadilhas comuns

• Números contraditórios: usuário diz "80 mil curtidas", a página mostra 76 mil — o recrutador confere e a credibilidade cai. Use sempre o valor exibido no perfil.
• redbook dá command not found: a máquina da outra pessoa não tem o pacote global. Use sempre bash scripts/redbook.sh, que recai para vendor/redbook/; primeiro rode bash scripts/doctor.sh para ver qual etapa está faltando.
• Escrever retrospectiva: se aparecer "problemas", "próximos passos" ou "aprendi", está errado — apague o bloco inteiro e substitua por cartões de habilidade.
• Esquecer de atualizar os timestamps: o <small>12:15</small> da navegação deve bater com o <b>12:15</b> da seção.
• Barras de taxa não aparecem: .bar .tr / .fl são spans — precisam de display:block para ter largura.
• Imagens recolhidas acusam "não carregaram": imagens com lazy load dentro de display:none é normal; o verify.js já ignora isso.
• Quebra de linha no celular: os três cartões do perfil de fãs usam white-space:nowrap; em telas estreitas reduza fonte e padding.
• Curtidas de contas grandes são valor máximo: contas com mais de 100 mil seguidores costumam ter curtidas exibidas como "10万+", e collected_count também pode ser limitado. Qualquer razão "coleção ÷ curtida" é apenas um limite superior, não pode ser conclusão — nesse caso, troque a barra de taxa por valores absolutos (coleções e comentários em grupos separados); a conclusão ainda é válida, mas cada número é defensável.
• Não ordenar por curtidas em contas grandes: depois de atingir o limite, a ordenação é falsa. Em vez disso, escolha "uma obra representativa de cada tipo de conteúdo" e explique no subtítulo por que não há ranking.
• Proporção de capas misturada: uma mesma conta pode ter capas 9:16, 3:4 e 4:3 (vídeos longos, quadrados, horizontais). Faça crop uniforme para 3:4 + object-position:50% 42%; as verticais não cortarão o título na parte inferior.
• Bloco de dados do hero ocupa meia linha: se .ledger estiver dentro do segundo .wrap do hero, ele herda grid de duas colunas. Adicione .hero .wrap+.wrap{display:block}.
• Coleta lenta em contas grandes: com 1000+ posts, --delay 2000 leva ~40 páginas, ~2 minutos; mas para obter detalhes do TOP 9 é preciso read um por um com intervalo de 5s — não paralelize.