111seek/blogger-portfolio

Portafolio de Persona de Creador de Contenido (HTML de una sola página para entrevistas)

El entregable es un solo archivo index.html: todas las imágenes están incrustadas en base64, se abre con doble clic y se puede enviar directamente por WeChat o correo electrónico al reclutador. La estructura es fija con siete secciones, unidas por una "línea de tiempo de vida"; el texto solo destaca fortalezas, y cada número debe coincidir con el perfil de la cuenta.

Cuándo usarlo

• El usuario quiere convertir su cuenta de creador en material de postulación (puestos de Nuevos Medios / Content Operations / Brand PR)
• El usuario quiere hacer la misma página para otro creador (cambiar persona, cambiar datos, sin rediseñar)
• El usuario ya tiene un portafolio anterior y necesita cambiar colores, estructura o actualizar el boletín de calificaciones

Cómo se ve el entregable

portfolio/
├── index.html          ← Único entregable
├── data.json           ← Fuente de datos (notas, trimestres, marcas, identidad)
└── assets/             ← Imagen de portada + avatar (se incrustan durante la compilación)

Siete secciones (el tema numerado se puede cambiar, ver references/theming.md):

Sección	Contenido	Requisitos clave
12:00 Apertura	Título + introducción + 5 barras de datos	Una frase que resuma "qué logré"
12:15 Obras	Desglose TOP1 + TOP2–5 visibles + TOP6–9 plegables	La portada debe ser una foto original del creador
12:40 Datos	Curva trimestral de likes + barras de ratio de compartidos/favoritos	Curva suave, con área degradada y animación de línea
13:00 Experiencia	Narrativa + boletín 2×2 + perfil de seguidores + resumen	Números en tres niveles: escala/explosión/comercialización
13:20 Metodología	4 principios, cada uno respaldado por un número con evidencia	No escribir principios sin datos
13:40 Fortalezas	4 tarjetas de habilidad (número grande + etiquetas + evidencia)	Son fortalezas, no autoevaluaciones. Prohibido escribir problemas y planes
14:00 Acerca de	Frase de cierre + tabla de hechos (ubicación/universidad/cuenta/correo)	Para que el reclutador copie fácilmente los datos de contacto

Dependencias previas (Paso 0, obligatorio antes de recolectar datos)

Para la recolección de datos se necesita el CLI de Xiaohongshu. El CLI ya está integrado en esta habilidad (vendor/redbook/, upstream MIT), por lo que copiar todo el directorio de la habilidad al usuario es suficiente; no necesita npm i -g.

bash scripts/doctor.sh     # Diagnóstico: node / fuente del CLI / cookie / estado de inicio de sesión

Elemento a verificar	Requisito	Si no se cumple
node	≥ 22	Instalar node y volver; la copia interna también lo necesita
CLI	redbook global o vendor/redbook/dist/cli.js (al menos uno)	Falta vendor, o npm i -g @lucasygu/redbook
Estado de sesión	~/.redbook/cookies.json válido	bash scripts/redbook.sh auth save, si falla ver esquema CDP al final de data-collection

Todos los comandos de recolección usan el lanzador bash scripts/redbook.sh <subcomando>: prioriza la versión global (se actualiza con npm), y si no existe, recurre a la copia interna, configurando automáticamente REDBOOK_COOKIE_FILE. Escribir redbook directamente puede fallar en la máquina del otro.

Compartir con otros: Empaquetar todo el directorio blogger-portfolio/ (incluye vendor/, ~1MB). El receptor solo tiene que hacer dos cosas: instalar node ≥22 e iniciar sesión en su cuenta de Xiaohongshu una vez. No elimines vendor/redbook/ para ahorrar espacio; quitarlo degrada a "primero hay que instalar el paquete npm". Para actualizar el CLI: npm i -g @lucasygu/redbook@latest y luego sincronizar los nuevos dist/ y node_modules/ en vendor/redbook/.

Flujo de trabajo

1. Recolectar datos

Los datos públicos se obtienen con el CLI integrado de Xiaohongshu (lista de notas, likes/favoritos/compartidos, portadas TOP9, distribución trimestral):

RB="bash scripts/redbook.sh"
$RB whoami                                        # Primero confirmar el estado de sesión
$RB search "<nombre de la cuenta>" --json          # Número rojo pequeño → obtener userId + xsec_token
$RB user-posts <userId> --xsec-token '<t>' --xsec-source pc_search --all --delay 3000 --json > posts.json

Las vistas, el perfil de seguidores, el número de marcas y el volumen de ventas solo se pueden preguntar al usuario.

Comandos completos, scripts de deduplicación y agregación, reparación de cookies caducadas y anti-bloqueo para captura de comentarios, ver references/data-collection.md. La captura debe ser en serie con intervalos de 3s. Si aparece un captcha en los comentarios, detenerse inmediatamente.

2. Definir el tema de la persona

Primero preguntar tres cosas: Posicionamiento de la cuenta (vida/hogar/maternidad/mascotas/exploración…), Puesto objetivo, Si aparece el creador en persona. Luego, según references/theming.md, seleccionar la metáfora de la línea de tiempo, la paleta de colores y los nombres de las secciones. Por defecto: estilo papel claro (blanco roto #fbf6ee + albaricoque-naranja #d9744f); para creadores de estilo de vida, nunca usar colores oscuros.

3. Escribir data.json

Copiar y modificar desde demo/data.json (demo/ es un ejemplo compilable: personaje ficticio + portadas placeholder):

{
  "site":  {"title","meta","name","tagline","handle","profile_url","collected_at","start","avatar"},
  "hero":  {"clock","h1","lead","roles"},
  "ledger":[{"value","label","hl"}],            // 5 celdas, primera con hl:true
  "facts": [{"k","v"}],                          // Tabla de hechos en la sección Acerca de (ubicación/universidad/cuenta/correo)
  "notes": [{"rank","title","date","like","collect","share","comment","url","brand","img"}],
  "quarters": [["24Q3", 1, 260]],               // [trimestre, número de notas, total de likes], de 6 a 12 está bien
  "brands":[{"name","cat"}]
}

notes: con 9 es suficiente (TOP1 + TOP2–5 + TOP6–9); img usar ruta relativa, se incrusta automáticamente al compilar. Los valores numéricos conservan el formato original de la plataforma ("7.6万"), la página los unifica con toN/fmt. h1 y lead pueden contener HTML (<br>, <span class="mark">, <em>).

4. Compilar

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

El script se encarga de incrustar imágenes y llenar los placeholders. Si faltan placeholders, sale con error, y finalmente imprime cuántos textos de ejemplo quedan por modificar.

5. Reescribir los textos de ejemplo (no se puede omitir)

La plantilla incluye un conjunto completo de ejemplo "siesta en el coche-cama". Después de compilar, modificar uno por uno según las marcas:

<!--EDIT:works-->       Título/introducción de la sección de obras + 3 desgloses del TOP1
<!--EDIT:featured-->    Tarjeta destacada del TOP1 (cita + por qué se volvió viral)
<!--EDIT:datahead-->    Título de la sección de datos + explicación de los tres ratios
<!--EDIT:experience-->  Experiencia: narrativa + boletín + perfil de seguidores + resumen
<!--EDIT:method-->      Cuatro principios
<!--EDIT:strengths-->   Cuatro tarjetas de fortalezas
<!--EDIT:about-->       Acerca de + tabla de hechos lateral

Reglas de redacción, fórmulas de sección, lista de prohibiciones, mapeo de cada tarjeta a preguntas de entrevista, ver references/copy-playbook.md. Leerlo antes de escribir, de lo contrario es fácil caer en autoevaluación.

Orden recomendado: compilar primero, luego modificar el texto en el HTML; si después se cambia data.json, recordar que recompilar sobrescribe los cambios manuales.

6. Verificar

npm i playwright-core     # Instalar una vez en cualquier directorio temporal
node scripts/verify.js portfolio/index.html

Revisar en tres tamaños de ventana (1440 / 768 / 390): errores de consola, carga de imágenes visibles, desbordamiento horizontal, si la animación de aparición al hacer scroll se completa, si la curva se genera, si las barras de ratio tienen ancho 0, si el contraste de texto es ≥4.5. Si hay errores graves, el código de salida no es 0.

No enviar capturas de pantalla al usuario, solo reportar conclusiones numéricas; solo tomar captura si el usuario lo pide explícitamente.

7. Entregar

Usar present_files para abrir portfolio/index.html. En el texto, explicar claramente tres cosas:

1. Qué cambió en esta versión (colores / estructura / criterios de números)
2. Qué números no coinciden con la plataforma y sugerencias de cómo escribirlos (no inventar excusas)
3. Qué falta: experiencia laboral [por completar], correo de contacto, si se debe publicar como enlace en línea

Si el usuario suele verlo en el móvil, usar vista previa en red local (~/.workbuddy/live-serve/live_serve.py), no enviar archivos repetidamente.

Estructura del directorio

SKILL.md                      Este archivo
scripts/build.py              data.json + plantilla → HTML de un solo archivo
scripts/verify.js             Verificación previa a la entrega (playwright-core + Chrome local)
scripts/doctor.sh             Diagnóstico previo a la recolección (node / CLI / cookie / estado de sesión)
scripts/preview.sh            Compilar + iniciar servidor + dirección para móvil + reconstrucción automática (un solo comando)
scripts/redbook.sh            Lanzador del CLI (versión global → copia interna, selección automática)
assets/template.html          Plantilla de página (CSS/JS completo, placeholders en formato {{NOMBRE}})
demo/                         Ejemplo compilable (personaje ficticio + portadas placeholder, ejecutar para verificar el entorno)
references/data-collection.md Captura de datos, agregación, reparación de cookies, anti-bloqueo
references/copy-playbook.md   Fórmulas de texto, números de tres niveles, prohibiciones, mapeo de preguntas de entrevista
references/theming.md         Cambio de persona: metáfora de línea de tiempo, paleta de colores, decoración, accesibilidad mínima
vendor/redbook/               CLI integrado de Xiaohongshu (MIT, incluye dist/ y node_modules/)
vendor/NOTICE.md              Origen, versión, licencia y método de actualización de dependencias internas

La plantilla pesa 37KB, el producto final con imágenes incrustadas es de aproximadamente 1MB; este tamaño es aceptable, no comprimir imágenes para reducir. El CLI interno pesa ~760KB, no eliminarlo: es la única garantía de que "el otro solo necesita instalar node para funcionar".

Errores comunes

• Números contradictorios: El usuario dice "80k likes" y la página pone 76k; el reclutador lo nota al instante. Unificar con el valor que muestra el perfil.
• Escribir redbook y obtener "command not found": En la máquina del otro no está instalado el paquete global. Usar siempre bash scripts/redbook.sh, que recurre a vendor/redbook/; primero ejecutar bash scripts/doctor.sh para ver qué falta.
• Escribir una autoevaluación: Si aparecen "problema", "próximo paso", "aprendido", es una señal de desviación; eliminar todo el bloque y reemplazar con tarjetas de habilidad.
• Olvidar actualizar las marcas de tiempo: La navegación <small>12:15</small> debe sincronizarse con <b>12:15</b> de la sección.
• Las barras de ratio no se muestran: .bar .tr / .fl son spans, deben tener display:block para tener ancho.
• Imágenes plegadas que muestran "no cargado": Las imágenes lazy-load en display:none son normales, verify.js ya las excluye.
• Saltos de línea en móvil: Las tres tarjetas pequeñas del perfil de seguidores usan white-space:nowrap; en pantallas estrechas reducir tamaño de fuente y padding.
• Los likes de cuentas grandes son valores máximos: Para cuentas con más de 100k seguidores, los likes se muestran como "10万+" y collected_count también puede estar limitado. Cualquier ratio "favoritos / likes" es solo un límite superior, no se puede escribir como conclusión; en ese caso, cambiar las barras de ratio a valores absolutos (número de favoritos, número de comentarios), la conclusión sigue siendo válida y cada número es defendible.
• No ordenar por likes en cuentas grandes: Después del límite máximo, el orden es falso. Cambiar a "seleccionar una obra representativa por tipo de contenido" y explicar en el subtítulo por qué no se ordena.
• Proporciones de portada mezcladas: Una misma cuenta puede tener portadas en 9:16, 3:4 y 4:3 (video largo, cuadrado, horizontal). Unificar recortando a 3:4 + object-position:50% 42%; la versión vertical no corta el título inferior.
• Las barras de datos del héroe solo ocupan media línea: .ledger dentro del segundo .wrap de hero hereda el grid de dos columnas; agregar .hero .wrap+.wrap{display:block}.
• La recolección de cuentas grandes es lenta: Con 1000+ notas, --delay 2000 son ~40 páginas, unos 2 minutos; pero para obtener los detalles del TOP 9 hay que leer una por una con read, intervalo de 5s, no concurrente.