# Habilidad de Agente de Tarjetas Sociales > Genera tarjetas sociales visualmente impactantes para carruseles de Xiaohongshu y pares de portada de WeChat a partir de diversas fuentes de contenido. Aprovecha los sistemas de diseño editorial o suizo para crear visuales atractivos para tus artículos y publicaciones. - Canonical: https://nanoskill.ai/es/skills/social-card-generation - Markdown: https://nanoskill.ai/es/skills/social-card-generation.md - Author: op7418 - Published: 2026-06-01T07:18:11.391Z - Updated: 2026-07-21T18:32:43.637Z - Language: es - Source type: github - Popularity signal: 2219 ## Sources - https://github.com/op7418/guizang-social-card-skill ## Install ```shell npx skills add https://github.com/op7418/guizang-social-card-skill/blob/main/README.en.md ``` ## About La Habilidad de Tarjeta Social Guizang es una capacidad avanzada de agente diseñada para agilizar la generación de tarjetas sociales para plataformas como Xiaohongshu y WeChat. Permite a los usuarios transformar contenido diverso, desde artículos y notas de producto hasta capturas de pantalla y fotos, en visuales pulidos y optimizados para la plataforma. Al ofrecer distintos sistemas de diseño Editorial y Suizo Internacional, la habilidad garantiza que, ya sea que tu objetivo sea la narración de historias o la explicación basada en datos, tus tarjetas sociales sean atractivas y estéticamente consistentes, listas para captar la atención de la audiencia. Esta habilidad se destaca por su flujo de trabajo estructurado, proporcionando 28 esqueletos de diseño y 10 ajustes preestablecidos de tema para guiar la presentación del contenido. Automatiza la obtención de imágenes de plataformas populares e incluye un validador robusto basado en Playwright para mantener la calidad visual al detectar problemas comunes de diseño. El resultado se entrega como HTML de un solo archivo, renderizado directamente a PNG, lo que lo hace altamente compatible con entornos de agente de codificación como Claude Code y Codex. Los usuarios pueden aprovechar la Habilidad de Tarjeta Social Guizang para una variedad de casos de uso, como crear carruseles de varias tarjetas para Xiaohongshu a partir de artículos largos, diseñar pares visualmente armoniosos de hero (21:9) y tarjeta de compartir (1:1) para WeChat, o producir visuales claros de tutoriales a partir de capturas de pantalla. Sus principios de diseño priorizan la moderación, la estructura y el manejo de imágenes centrado en el usuario, asegurando un contenido profesional e impactante para redes sociales sin requerir una amplia experiencia en diseño. ## Key features - **Sistemas Visuales Duales**: Elija entre un estilo Editorial para narración (Monocle, Kinfolk) o un estilo Internacional Suizo para datos y estructura (basado en cuadrícula, líneas finas nítidas) para combinar con el tono de su contenido. - **Múltiples Tamaños de Lienzo**: Admite Xiaohongshu 3:4 (1080x1440), WeChat 21:9 (2100x900) y WeChat 1:1 (1080x1080) para una presencia versátil en redes sociales. - **Amplios Esqueletos de Diseño**: Acceda a 28 esqueletos de diseño prediseñados (16 Editoriales, 12 Suizos) que incluyen portadas con imágenes, torres de KPI y gráficos de barras horizontales para una estructuración rápida del contenido. - **Obtención Automatizada de Imágenes**: Obtiene imágenes automáticamente de Unsplash, Pexels, Flickr CC, Wallhaven o búsqueda directa, descargándolas localmente con un archivo SOURCES.md generado automáticamente. - **Validador de Diseño**: Incluye un validador basado en Playwright para detectar desbordamientos, violaciones de límite de texto, brechas de densidad y colisiones de pie de página, asegurando una generación de tarjetas sociales de alta calidad. ## Use cases - **Crear Carruseles de Xiaohongshu**: Transforme artículos largos, reseñas de productos o guías de viaje en carruseles atractivos de múltiples tarjetas para Xiaohongshu, utilizando diseños Editorial o Suizo. - **Diseñar Pares de Portada de WeChat**: Genere imágenes destacadas 21:9 y tarjetas de compartir 1:1 visualmente consistentes para WeChat Moments y Channels a partir de cualquier fuente de contenido. - **Producir Visuales de Tutoriales**: Convierta tutoriales con capturas de pantalla, guías de juegos o recorridos de herramientas en tarjetas sociales estructuradas con capturas de pantalla embellecidas y diseños claros. - **Resumir Datos y Reseñas**: Presente reseñas de productos, resúmenes de datos o contenido de resúmenes anuales utilizando diseños de estilo suizo con gráficos y matrices para una comunicación clara. ## Result preview Explora un carrusel profesional de redes sociales impulsado por esta Habilidad. ![A minimalist horizontal bar chart titled 'Top Use Cases by Enterprise Adoption.' The chart presents six enterprise applications of AI agents ranked by adoption rate. Each category is displayed with a blue progress bar against a light gray background track, with percentage values aligned on the right side. The highest adoption category is Intelligent Customer Support at 82%, followed by Automated Data Processing at 74%, Code Development and Review at 68%, Marketing Content Generation at 61%, Supply Chain Planning at 47%, and Legal Document Review at 39%. The bars use varying shades of blue to visually distinguish the categories while maintaining a cohesive design. The layout emphasizes comparative adoption levels across business functions, highlighting customer support and data processing as the most widely adopted AI agent use cases in enterprise environments. The overall design features clean typography, ample whitespace, and a professional business-report aesthetic suitable for executive presentations, technology trend reports, and AI adoption studies.](https://file.nanoskill.ai/social-card-outcome1.png) ![A clean, executive-style industry transformation overview slide titled 'Industries Being Transformed.' The layout presents four major sectors where AI agents are driving measurable business impact, arranged in a structured table-like format with horizontal dividers between rows. Each industry category appears in bold black text on the left, followed by representative AI agent applications in the center, and a highlighted blue percentage growth figure on the far right. The industries featured include Healthcare, Financial Services, Manufacturing, and Retail & eCommerce. Healthcare highlights clinical decision support, patient triage, and radiology reading assistance, showing a 32% impact metric. Financial Services focuses on fraud detection, automated reporting, and compliance monitoring, with the highest displayed value of 41%. Manufacturing showcases predictive maintenance, supply chain optimization, and quality control, associated with a 28% increase. Retail and eCommerce emphasizes personalized shopping experiences, dynamic pricing, and inventory automation, showing a 36% impact figure. The design uses a minimalist business-report aesthetic with a light gray background, bold typography, generous whitespace, subtle divider lines, and bright blue percentage indicators that draw attention to performance improvements. The slide communicates how AI agents are transforming operational workflows across multiple industries and is suitable for executive presentations, consulting reports, digital transformation strategies, and enterprise AI adoption studies.](https://file.nanoskill.ai/social-card-outcome2.png) ![A professional executive presentation slide titled 'What to Watch For,' highlighting three critical risks and implementation challenges organizations should consider when deploying AI agents at scale. The slide uses a minimalist consulting-style layout with a light gray background and three horizontally stacked warning cards featuring orange accent borders and caution icons. The first section, 'Security & Privacy,' warns that AI agents with system-level access create new attack surfaces and increase cybersecurity exposure. It notes that 72% of enterprises identify data governance as a primary concern and recommends least-privilege access controls, audit trails, and strong security frameworks from the start. The second section, 'Integration Complexity,' explains that legacy systems remain the largest deployment obstacle. It emphasizes that modern enterprises operate hundreds of interconnected applications, requiring robust APIs, workflow orchestration, fallback mechanisms, and resilient system integration to prevent fragile automation failures. The third section, 'Trust & Oversight,' addresses the risks of black-box decision making. It highlights the need for human-in-the-loop review processes, explainability layers, transparent governance, accountability structures, and escalation procedures to ensure responsible AI deployment and maintain user confidence. The visual design follows a modern enterprise-report aesthetic with bold section headings, soft neutral panels, orange warning indicators, generous whitespace, and clear information hierarchy. The slide communicates strategic risk management considerations for AI agent adoption and is suitable for board presentations, technology strategy reports, digital transformation roadmaps, enterprise AI governance discussions, and executive briefings.](https://file.nanoskill.ai/sociai-card-outcome3.png) ![A premium executive presentation closing slide titled 'The Agent Era Starts Now,' designed in a modern consulting-report style with a bold deep-blue background, minimalist typography, and strong visual hierarchy. At the top-left, a small section label reading 'WHAT COMES NEXT' introduces the concluding chapter, accompanied by a subtle orange accent line that serves as a visual anchor and brand motif. The center-left features a large, bold headline stating 'The Agent Era Starts Now,' emphasizing urgency, transformation, and the beginning of a new technological era driven by autonomous AI agents. Beneath the headline, a concise strategic statement explains that organizations that move first—guided by clear strategy, governance, responsible oversight, and human-centered design—will shape how work is performed over the coming decade. The message frames AI agents not merely as tools, but as a foundational shift in business operations, productivity, and organizational structure. The slide functions as a call-to-action and executive conclusion, encouraging decision-makers to prepare for widespread AI agent adoption. It communicates themes of innovation leadership, competitive advantage, digital transformation, future-of-work strategy, and responsible AI implementation. The visual design uses extensive whitespace, high-contrast white typography, subtle gray supporting text, and a restrained orange accent to create a polished, enterprise-grade aesthetic. The overall appearance resembles a strategy consulting presentation, boardroom briefing, technology foresight report, or executive keynote deck focused on the future impact of AI agents and autonomous systems.](https://file.nanoskill.ai/social-card-outcome4.png) ## Result walkthrough ### Instalar Añade la Habilidad de Generación de Tarjetas Sociales a tu agente de IA. ![A screenshot showing the installation and verification process of the 'guizang-social-card-skill' for an AI agent environment. At the top, a dark blue command banner displays an NPX installation command pointing to a GitHub repository containing the skill. Below, a gray chat-style response panel explains that the installation initially paused because the command requested interactive agent selection. The system reruns the installation using a '-y' flag to bypass prompts and successfully installs the skill for the Hermes Agent environment. The response confirms that the skill has been installed and symbolically linked under the Hermes skills directory. A summary section explains that the skill generates Guizang-style social media card image sets for multiple platforms, including Xiaohongshu or RedNote carousel posts, WeChat Official Account cover image pairs, social cards, article covers, and platform thumbnails. Additional details mention built-in layout recipes, design systems, platform specifications, theme presets, and HTML templates such as Editorial Magazine and Swiss International styles. The interface uses a clean conversational layout with highlighted code snippets, numbered installation steps, bullet-point feature lists, and clear confirmation messages describing the skill's capabilities and readiness for use.](https://file.nanoskill.ai/social-card-install.png) ### Describir Contenido Proporciona el contenido, tema o mensaje clave que deseas transformar en tarjetas de redes sociales. ![A screenshot of an AI-powered social media content design workflow. The upper section contains a large dark blue prompt panel describing a role as an award-winning Social Media Content Designer and Visual Storytelling Director. The prompt requests the creation of a premium social media card series titled 'The Future of AI Agents,' focused on how AI agents will transform productivity, business operations, and everyday work. Detailed requirements specify a carousel-style content format with cover cards, key insights, examples, data highlights, and actionable takeaways. The instructions emphasize clean and modern visual design, strong information hierarchy, platform optimization for Xiaohongshu, LinkedIn, X, and WeChat, concise copywriting, and highly shareable layouts. Additional directives include critiquing the initial content structure, improving readability and engagement, refining storytelling flow, and producing a publication-ready social card series. The final deliverable is described as a visually striking PDF with editorial-style layouts, colorful content sections, infographics, and swipe-friendly designs. Beneath the prompt, a gray response panel shows the AI beginning its workflow by loading the social card skill, reviewing its capabilities, loading reference materials, and accessing template and production workflow resources before generating the final content package. The interface uses a chat-style layout with rounded panels, white text on a dark blue background, and structured formatting to present a professional content design brief.](https://file.nanoskill.ai/social-card-task.png) ### Generar Tarjetas Sociales Crea diseños de tarjetas visualmente atractivos y optimizados para plataformas con una jerarquía de información clara, un flujo narrativo sólido y diseños listos para publicar. ![A professional report cover page titled 'The Future of AI Agents.' The design features a deep royal blue background with a clean, minimalist editorial style. At the top left, small uppercase text reads 'SPECIAL REPORT • 2026,' accompanied by a short orange accent line that serves as a visual divider. The main headline, 'The Future of AI Agents,' appears in large bold white typography positioned on the left side of the page, creating strong visual hierarchy and emphasis. Below the title, a descriptive subtitle explains the report’s focus: how autonomous AI agents will transform productivity, reshape business operations, and redefine the way people work every day. The layout uses generous whitespace, modern sans-serif typography, and a limited color palette of blue, white, and orange, giving the cover a sophisticated corporate-report aesthetic. The overall design communicates themes of technology, innovation, business transformation, automation, and the future of work.](https://file.nanoskill.ai/social-card-outcome.png) ## Skill definition Una habilidad de agente para Claude Code, Codex y entornos similares de agentes de codificación. Genera **imágenes de carrusel de Xiaohongshu / Rednote** y **pares de portada de WeChat 21:9 + 1:1** a partir de artículos, textos, capturas de pantalla, notas de producto, subtítulos o fotos. Dos sistemas visuales comparten un flujo de trabajo: - **Editorial**. Diseños contenidos con el espíritu de *Monocle* / *Kinfolk* / *Cereal*. Ideal para narrativa, estilo de vida, viajes, lectura, cine y observación personal. - **Suizo internacional**. Prioridad a la retícula, un solo color ancla, líneas finas y contraste tipográfico extremo. Ideal para reseñas de productos, datos, frameworks, tutoriales y herramientas de IA. > Proyecto hermano de [guizang-ppt-skill](https://github.com/op7418/guizang-ppt-skill). Lenguaje visual compartido, mantenimiento separado. PPT resuelve las "charlas de deslizamiento horizontal"; este resuelve las "imágenes estáticas para feeds." ![Vista previa de Guizang Social Card Skill](https://file.nanoskill.ai/d370abcc-1fc4-4de1-903a-09020a6556ce.png) ## Inicio en 30 segundos ```bash npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill ``` O pega esto a un agente de IA con acceso a shell: ```text Instala guizang-social-card-skill para mí. Clona https://github.com/op7418/guizang-social-card-skill en ~/.claude/skills/guizang-social-card-skill, luego verifica que SKILL.md, assets/ y references/ existan. ``` Si ya lo tienes instalado, actualiza con: ```text Actualiza guizang-social-card-skill para mí. Ve a ~/.claude/skills/guizang-social-card-skill, ejecuta git pull y dime el último commit. ``` Luego pídele a tu agente: ```text Hazme un carrusel de Xiaohongshu estilo suizo a partir de este artículo, 5 tarjetas, azul IKB. ``` Otros mensajes útiles: ```text Hazme un conjunto de Xiaohongshu 3:4 a partir de esta reseña de producto, con títulos de estilo editorial. Convierte este artículo en un par de portada de WeChat: hero 21:9 + tarjeta de compartir 1:1, visualmente consistente. Tengo 3 fotos de camping — hazme un carrusel de Xiaohongshu basado en imágenes. Convierte este texto de guía de juego en un conjunto de Xiaohongshu; obtén algunas ilustraciones del juego de Wallhaven. ``` ## Lo que obtienes - 🖋 **Dos sistemas visuales**: Editorial para atmósfera y narrativa, Suizo para hechos y estructura, compartiendo un flujo de trabajo - 📐 **3 tamaños de lienzo**: `.poster.xhs` 1080×1440 (Xiaohongshu 3:4), `.poster.wide` 2100×900 (WeChat 21:9), `.poster.square` 1080×1080 (WeChat 1:1) - 🧩 **28 esqueletos de diseño**: 16 Editorial (`M01-M16`, incluyendo Portada basada en imagen, Pipeline, Antes/Después) + 12 Suizo (`S01-S12`, incluyendo Torre de KPI, Gráfico de barras H, Matriz + Hero) - 🎨 **10 ajustes preestablecidos de tema**: 6 Editorial (Tinta clásica, Porcelana índigo, Tinta bosque, Papel kraft, Duna, **Tinta medianoche** oscuro) + 4 colores ancla suizos (Azul Klein IKB, Limón, Verde limón, Naranja de seguridad) - 🖼 **Flujo de obtención de imágenes**: primero imágenes del usuario; si no, en cascada a través de Unsplash → Pexels → Flickr CC → Wallhaven → búsqueda directa, descargadas localmente con `SOURCES.md` generado automáticamente - 🌫 **Fondo de flujo de tinta WebGL**: las páginas hero editoriales pueden incluir una animación de tinta en vivo; se puede desactivar para dispositivos de bajo consumo o modo captura de pantalla - 🪧 **Superposición de imagen + seguridad facial**: las imágenes a sangre completa deben llevar una máscara; las zonas de texto deben evitar al sujeto. Reglas estrictas en `references/image-overlay.md` - 🧰 **Recursos de embellecimiento de capturas de pantalla**: 9 fondos WebP con texturas reales (5 Editorial / 4 Suizo), combinados con utilidades `.frame-shot` / `.device-browser` / `.device-phone` - 🗺 **Componente de mapa**: MapLibre + mosaicos reales OSM, múltiples pines + conectores, hecho para guías de viaje - ✅ **Validador**: `validate-social-deck.mjs` detecta automáticamente desbordamientos, violaciones de límites tipográficos, brechas de densidad de 4 bandas y colisiones de pie de página - 📄 **Renderizado con un solo archivo HTML + Playwright**: sin pipeline de construcción de frontend; `node render.mjs` genera PNG directamente ## Encaja / No encaja **✅ Encaja**: Carruseles de Xiaohongshu / Pares de portada de WeChat / Portadas de Moments / Portadas de Channels / Visuales de artículos / Páginas de tutoriales / Resúmenes de datos / Guías de viaje / Reseñas de productos / Explicaciones de capturas de pantalla **❌ No encaja**: Barajas de deslizamiento horizontal (usa [guizang-ppt-skill](https://github.com/op7418/guizang-ppt-skill)) / generación de video de formato largo / retoque fotográfico puro / edición de texto plano sin diseño ## 11 categorías de Xiaohongshu Jerarquizadas por "círculo de competencia" — consulta [`references/category-cookbook.md`](./references/category-cookbook.md): **Fuertes de extremo a extremo** (texto / estructura / imágenes todo dentro del alcance): - Viajes, carrera, recomendaciones (después de especificar un subgénero) **Fuertes en texto y estructura, imágenes dependen del usuario o arte obtenido:** - Juegos, cine, comida (orientada a recetas), maquillaje (orientado a tutoriales), fitness, hogar, moda (selecciones curadas) **Fuera de alcance, declarado de antemano** (no se forzará el ajuste): - Fotos en vivo de OOTD / dreamcore / gradación de emulación de película / maquillaje de prueba de piel real — cualquier cosa que dependa en gran medida de la fotografía o la posproducción ## Escenarios comunes | Tarea | Flujo recomendado | |-------|-------------------| | Artículo largo → Carrusel de Xiaohongshu | Extraer las ideas clave; Editorial para ritmo narrativo, Suizo para desgloses de datos | | Reseña de producto / Resumen de herramienta | Suizo + Azul IKB, preferir `S09 Torre de KPI` / `S10 Gráfico de barras H` | | Viajes / Estilo de vida | Editorial + Tinta medianoche o Duna, `M16 Portada basada en imagen` para hero a sangre completa | | Par de portada de WeChat | Renderizar el mismo contenido dos veces: `.poster.wide` 21:9 + `.poster.square` 1:1, visualmente consistente | | Tutorial de captura de pantalla / Recorrido de herramienta | `.frame-shot` + `.device-browser`, preferir base de retícula Suiza | | Guía de juego / Resumen de película | Editorial + Tinta medianoche, obtener arte del juego de Wallhaven para hero a sangre completa | | Resumen de datos / Año en revisión | Suizo + Limón o Naranja de seguridad, combinación de matriz + libro mayor | ## Por qué un solo archivo HTML a PNG - **Amigable con agentes**: HTML + CSS es texto: los agentes pueden escribir, leer, editar y validar directamente - **Precisión de diseño**: CSS Grid + reglas estrictas de tipografía / márgenes / retícula superan con creces el alcance de diseño de Markdown - **Obtención abierta de imágenes**: conectar con Unsplash / Pexels / Wallhaven / Mapbox / OSM / cualquier recurso web - **Calidad verificable**: `validate-social-deck.mjs` ejecuta medición DOM con Playwright, no suposiciones - **Entrega simple**: `output/*.png` se entrega directamente: sin despliegues, sin herramientas de exportación ## Soporte de plataformas | Plataforma | Estado | Notas | |------------|--------|-------| | Claude Code | Soportado | Flujo de trabajo nativo de Skills, ideal para generar e iterar tarjetas | | Codex | Soportado | Bueno para generación de tarjetas de formato largo, obtención de imágenes, control de calidad visual | | Cursor / otros agentes locales | Funciona | Requiere lectura/escritura del sistema de archivos + ejecución de shell | | Chatbot simple | No recomendado | Sin sistema de archivos y pipeline de renderizado, no puede entregar imágenes de forma fiable | ## Instalación ### Opción 1: Instalación en una línea (recomendada) ```bash npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill ``` ### Opción 2: Pega esto a una IA > Instala la skill de Claude Code `guizang-social-card-skill` para mí. Pasos: > > 1. Asegúrate de que `~/.claude/skills/` exista (crea si no) > 2. Ejecuta `git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill` > 3. Verifica: `ls ~/.claude/skills/guizang-social-card-skill/` debería mostrar `SKILL.md`, `assets/`, `references/` > 4. Avísame cuando termines. Luego, decir cosas como "hazme un carrusel de Xiaohongshu" activará esta skill. Pega el bloque anterior en Claude Code / Cursor / cualquier agente de IA con acceso a shell. ### Opción 3: CLI manual ```bash git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill ``` ### Cómo activarlo Una vez instalado, Claude Code detecta automáticamente la skill. Frases de activación: - "Hazme un carrusel de Xiaohongshu / Rednote" - "Hazme tarjetas de Rednote" - "Haz una portada hero 21:9 de WeChat + tarjeta de compartir 1:1" - "Genera tarjetas sociales / tarjetas sociales estilo revista" - "Convierte este artículo en un carrusel tutorial" - "Haz una reseña de Xiaohongshu estilo suizo / tarjetas estilo IKB" ## Flujo de trabajo La skill es un flujo de trabajo estructurado. El agente recorre 7 pasos: 1. **Recepción** — captura 4 cosas: plataforma objetivo / estilo / contenido fuente / imágenes del usuario. Cuando no haya imágenes disponibles, presenta las opciones A/B/C una vez (toma las tuyas / genera con IA / obtén en línea); no lo vuelvas a proponer. 2. **Estilo y tema** — elige Editorial o Suizo, luego elige uno de los 10 ajustes preestablecidos de tema. No se permiten valores hexadecimales personalizados. 3. **Selección de diseño** — elige / pega / adapta el texto de los 28 esqueletos de diseño. 16 Editorial / 12 Suizo. 4. **Preparación de recursos** — obtén imágenes (Unsplash / Pexels / Flickr CC / Wallhaven / búsqueda directa), descarga localmente + escribe `SOURCES.md`; pregunta si se deben dar créditos a las fuentes. 5. **Componer y renderizar** — copia la plantilla semilla → reemplaza `` → `node render.mjs` 6. **Entregar y revisar** — muestra los PNG primero, pregunta "¿quieres verlas tú mismo, o prefieres que ejecute el validador?" — no se hace la validación automática. 7. **Iterar** — aplica la retroalimentación del usuario, ajusta estilos en línea o intercambia diseños / imágenes, vuelve a renderizar. Especificación completa en [`SKILL.md`](./SKILL.md). Detalles profundos en los archivos `references/*.md` correspondientes. ## Validador ```bash node validate-social-deck.mjs path/to/task-dir ``` 6 reglas, basadas en mediciones de renderizado real con Playwright, no en escaneo estático: - **R1** Desbordamiento — cualquier sección que se desborde de `.poster` falla inmediatamente - **R2** Límites tipográficos — combinaciones de tamaño + peso de `.h-xl` / `.h-display` que excedan las definiciones semilla - **R3** Colisión de pie de página — contenido que presiona el pie de página inferior / número de página - **R4** Densidad de 4 bandas — lienzo de 1440 de alto dividido en 4 bandas horizontales; cada una debe contener contenido o tener una razón explícita para el espacio en blanco - **R5** Desbordamiento de marco — elementos hijos de `.frame-img` / `.frame-shot` que se desbordan del marco - **R6** Identidad Suiza — las plantillas suizas con `font-weight >= 700` en línea advierten (viola "más grande significa más fino") El Paso 7 de `SKILL.md` establece explícitamente que **el validador no se ejecuta automáticamente** — espera a que el usuario vea las imágenes primero, ahorrando decenas de segundos por ronda. ## Ajustes preestablecidos de tema Elige de [`references/theme-presets.md`](./references/theme-presets.md). **No se permiten valores hexadecimales personalizados** — proteger la estética importa más que la libertad de elección. ### Editorial (6) | Tema | Tonos | Ideal para | |------|-------|------------| | 🖋 **Tinta clásica** | `#0a0a0b` / `#f1efea` | Predeterminado general, temas comerciales, en caso de duda | | 🌊 **Porcelana índigo** | `#0a1f3d` / `#f1f3f5` | Tecnología, investigación, IA, escritura técnica | | 🌿 **Tinta bosque** | `#1a2e1f` / `#f5f1e8` | Naturaleza, sostenibilidad, aire libre, no ficción | | 🍂 **Papel kraft** | `#2a1e13` / `#eedfc7` | Nostalgia, humanidades, lectura, literatura | | 🌙 **Duna** | `#1f1a14` / `#f0e6d2` | Arte, diseño, creatividad, moda | | ⚫ **Tinta medianoche** | `#0e0d0c` / `#ece2cf` / `#d4a04a` | Arte clave de juegos / escenas nocturnas / portadas cinematográficas / temas oscuros estilo Black Myth · Elden Ring | ### Suizo (4) | Tema | Ancla | Ideal para | |------|-------|------------| | 🔵 **Azul Klein IKB** | `#002FA7` | Predeterminado general, lanzamientos comerciales, productos de IA, frameworks | | 🟡 **Limón** | `#FFD500` | Juventud, deportes, venta al por menor, consumidor, Y2K | | 🟢 **Verde limón** | `#C5E803` | Eco, salud, Generación Z, marcas verdes | | 🟠 **Naranja de seguridad** | `#FF6B35` | Alertas, noticias, industrial, temas enérgicos | Para cambiar de tema, simplemente reemplaza el atributo `
` en la plantilla semilla; todo el CSS se resuelve a través de `var(--...)`. ## Directorio ``` guizang-social-card-skill/ ├── SKILL.md ← Archivo principal de la skill: flujo de trabajo de 7 pasos ├── README.md ← README en chino ├── README.en.md ← Este archivo ├── HANDOFF.md ← Documento de traspaso: hechos + historial de versiones ├── PRODUCT.md ← Documento del producto: razonamiento + decisiones + hoja de ruta ├── validate-social-deck.mjs ← Validador de diseño con Playwright ├── assets/ │ ├── template-editorial-card.html ← Plantilla semilla Editorial (6 temas / 3 lienzos) │ ├── template-swiss-card.html ← Plantilla semilla Suiza (4 acentos / 3 lienzos) │ ├── magazine-bg-webgl.js ← Fondo de flujo de tinta WebGL │ └── screenshot-backgrounds/ ← 9 fondos de escenario para capturas de pantalla (WebP) │ ├── style-a/ ← 5 Editorial │ └── style-b/ ← 4 Suizo └── references/ ├── platform-specs.md ← Especificaciones de plataforma × resolución × nomenclatura ├── style-system.md ← Reglas estrictas y antipatrones para ambos estilos ├── theme-presets.md ← Las 10 paletas en detalle ├── layout-recipes.md ← 28 esqueletos de diseño (M01-M16 + S01-S12) ├── components.md ← Tipografía / tarjetas / espaciado / iconos ├── background-systems.md ← Flujo de tinta / retícula / capas de papel ├── portrait-fill.md ← Estrategia de espacio en blanco para el tablero 3:4 ├── content-planning.md ← Ganchos / divisiones de página / compresión de texto ├── category-cookbook.md ← Tabla de enrutamiento de 11 categorías de Xiaohongshu ├── image-overlay.md ← Máscara de imagen a sangre completa + reglas de seguridad facial ├── screenshot-treatment.md ← Utilidades `.frame-shot` + embellecimiento de capturas de pantalla ├── map-component.md ← Mapa MapLibre `.map-block` ├── title-shortener.md ← Estrategia de título corto para la portada 1:1 ├── production-workflow.md ← Pipeline de renderizado con Playwright └── qa-checklist.md ← Lista de verificación de calidad ``` ## Principios de diseño fundamentales 1. **Moderación sobre estridencia** — las paletas moderadas destacan en un feed saturado. 2. **Estructura sobre decoración** — la tipografía / contraste / retícula llevan la jerarquía, no las sombras o tarjetas. 3. **Diseños sobre libertad** — elige primero, adapta después; no inventes páginas fuera de los 28 esqueletos. 4. **Primero las imágenes del usuario** — en la recepción, presenta A/B/C una vez; no vuelvas a proponer que tomen las suyas. 5. **Máscara + evitar** — las imágenes a sangre completa siempre llevan máscara; las zonas de texto deben evitar al sujeto (caras / productos / regiones con mucho texto). 6. **Más grande significa más fino** — en Suizo, el tamaño `.h-xl` sube → el peso debe bajar. Editorial sigue la misma regla. 7. **Sin validación automática** — deja que el usuario vea primero, luego pregunta antes de validar; ahorra decenas de segundos por ronda. 8. **Una skill es un producto, no un prompt** — tiene PRODUCT.md, números de versión, CHANGELOG, límites de capacidad. 9. **Las pruebas locales se quedan fuera de git** — todas las demostraciones / pruebas de humo viven en `local-tests/`, ignoradas por git. ## Referencias visuales - *Monocle* / *Kinfolk* / *Cereal* maquetación y espaciado de letras de las revistas - Sistemas de retícula de Massimo Vignelli / Helvetica Forever / Estilo Tipográfico Internacional Suizo - Proporciones imagen-texto y retratos humanos de Apartamento / The Gentlewoman - Muestras de "lo moderado gana el feed" de Xiaohongshu / Rednote - Práctica de tarjetas sociales de Guizang ## Hoja de ruta - Más pruebas de humo para casos límite de límites tipográficos en contenido Editorial largo - Más diseños de datos suizos (esqueletos de gráficos adicionales) - Después de la generación de imágenes: preguntar activamente si se deben hacer correcciones locales / regenerar toda la imagen - Más paquetes de diseño recomendados por categoría (actualmente 7 de 11 son fuertes de extremo a extremo) - Versión de WorkBuddy lista para el mercado ## Contribuciones Errores, problemas de diseño, solicitudes de nuevos diseños — Issues y PRs bienvenidos. Prioridades para los cambios: - Al editar plantillas semilla, actualiza también la tabla de correspondencia en `references/components.md` (tamaños / espaciado / pesos) - Al añadir diseños, añade la receta completa a `references/layout-recipes.md` (límites de texto + densidad mínima) - Al añadir colores de tema, actualiza también el bloque `[data-theme="..."]` en la plantilla semilla + `references/theme-presets.md` - Al añadir reglas suizas, actualiza también la regla correspondiente en `validate-social-deck.mjs` - Los errores que hayas encontrado van en `references/qa-checklist.md` - Las pruebas y demostraciones viven en `local-tests/` — no contamines la raíz de la skill ## Licencia AGPL-3.0 © 2026 [op7418](https://github.com/op7418) Este proyecto está licenciado bajo **GNU AGPL-3.0**. Puntos clave: 1. **Atribución requerida** — Conserva el aviso de copyright 2. **Los derivados deben ser de código abierto** — Cualquier versión modificada, fork o redistribución debe publicarse bajo AGPL-3.0 (o una licencia compatible), con el código fuente completo disponible 3. **El uso en red es distribución** — Incluso si solo ejecutas una versión modificada como SaaS / servicio web sin distribuir el código, debes publicar el código fuente (esto es lo que hace que AGPL sea más estricta que GPL) 4. **Sin distribución de código cerrado, propietario o solo de pago** Términos completos en [`LICENSE`](./LICENSE). ## FAQ ### ¿Qué es la habilidad de Tarjetas Sociales Guizang? La habilidad de Tarjetas Sociales Guizang es una habilidad de agente para Claude Code, Codex y entornos de agentes de codificación similares que genera carruseles de Xiaohongshu y pares de portada de WeChat a partir de diversas entradas de contenido como artículos, notas o fotos, utilizando sistemas de diseño visual distintos. ### ¿Qué tipo de contenido puedo usar para generar tarjetas sociales? Puede usar artículos, textos, capturas de pantalla, notas de productos, subtítulos o fotos como contenido de origen para generar tarjetas sociales. La habilidad se adapta a diversas entradas para crear resultados visualmente atractivos. ### ¿Cuáles son los dos sistemas visuales disponibles para la generación de tarjetas sociales? La habilidad ofrece dos sistemas visuales: 'Editorial' para contenido narrativo, de estilo de vida y storytelling, y 'Swiss International' para reseñas de productos, datos, marcos de trabajo y tutoriales, caracterizado por un enfoque basado en cuadrícula. ### ¿Puedo usar colores personalizados para mis tarjetas sociales? No, no se permiten valores hexadecimales personalizados. La habilidad proporciona 10 preajustes de tema (6 Editoriales, 4 Suizos) para mantener la cohesión visual y la calidad. Puede cambiar de tema actualizando el atributo data-theme en la plantilla semilla. ### ¿Cómo instalo la habilidad de Tarjetas Sociales Guizang? Puede instalarla usando \`npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill\` o clonando el repositorio en el directorio de habilidades de su agente. ### ¿La habilidad admite contenido en inglés? Sí, la habilidad admite contenido en inglés. Ambas fuentes Editorial (Playfair Display + Noto Serif) y Suiza (Inter + Helvetica) cubren chino e inglés, y los esqueletos de diseño son independientes del idioma.