# Graphic Designer > Crea gráficos para posts de LinkedIn, eligiendo entre un HTML/CSS estructurado o una infografía generada por IA según el contenido del post. Fuente: https://skillsagentes.com/skills/charlie947/social-media-skills/graphic-designer Markdown: https://skillsagentes.com/skills/charlie947/social-media-skills/graphic-designer.md Repositorio: https://github.com/charlie947/social-media-skills Autor: charlie947 Licencia: MIT Actualizado: hace 4 meses Coste de contexto: 102 tok instalada, 1.7k tok al activarse, 1.7k tok con todos los archivos del bundle Bundle: 1 archivo, 7 KB Permisos que pide: ninguno declarado ## Instalación Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina. ```bash # Claude Code npx -y skills add charlie947/social-media-skills --skill graphic-designer --agent claude-code # Cursor npx -y skills add charlie947/social-media-skills --skill graphic-designer --agent cursor # Codex npx -y skills add charlie947/social-media-skills --skill graphic-designer --agent codex # Gemini CLI npx -y skills add charlie947/social-media-skills --skill graphic-designer --agent gemini # Windsurf npx -y skills add charlie947/social-media-skills --skill graphic-designer --agent windsurf # Cline npx -y skills add charlie947/social-media-skills --skill graphic-designer --agent cline ``` ## Qué hace - Lee el post más reciente del proyecto o pide uno, y decide entre un gráfico HTML/CSS estructurado o un prompt de infografía generada por IA - Camino A: genera un archivo HTML autocontenido con CSS en línea para frameworks, pasos, comparaciones o datos - Camino B: extrae titular, puntos clave y cifras del post y produce un prompt de imagen estilo pizarra o infografía con marca propia - Nunca copia el post completo: siempre destila el contenido antes de diseñar ## Cuándo usarla - El usuario dice 'diseña un gráfico', 'crea un visual', 'haz una imagen' o 'gráfico para mi post' - Acaba de escribir un post y quiere un gráfico a juego ## Qué la activa - "Diseña un gráfico para este post" - "Hazme un visual que acompañe mi post de LinkedIn" ## Archivos - SKILL.md — 7 KB ## SKILL.md Reproducido tal cual desde charlie947/social-media-skills bajo MIT. Esta sección es el documento original y está en inglés. # Graphic Designer ## CRITICAL: Auto-start on load When this skill triggers, go straight to Step 1. Do not summarise. Do not explain options. Start immediately. ## Step 1. Read the post Check the project for the most recent post file. If found, read it. If not, say: > Paste the post you want a graphic for. Wait for the post, then call AskUserQuestion: ```json [ { "question": "What type of graphic fits this post best?", "header": "Style", "multiSelect": false, "options": [ {"label": "HTML/CSS graphic", "description": "Clean structured layout. Framework, comparison, steps, data. Fully editable, screenshot to export."}, {"label": "Whiteboard infographic", "description": "Hand-drawn marker style on a whiteboard or notebook page. Recaps the post visually. Generated in Gemini."}, {"label": "Branded infographic", "description": "Professional infographic using your brand colours. Recaps the post visually. Generated in Gemini."}, {"label": "You decide", "description": "Analyse the post and pick the best format automatically"} ] } ] ``` If "You decide": analyse the post. If it contains numbered steps, frameworks, comparisons, or data tables, go Path A (HTML/CSS). If it recaps a workflow, shares tips, teaches a concept, or tells a story, go Path B (image prompt) and pick whichever style fits better. ## Path A: HTML/CSS structured graphic Design constraints: - 1200 x 1400 pixels (LinkedIn optimal) - Dark background (#1a1a2e or user's brand colour) with high contrast text - Clean sans-serif font (Inter, system-ui) - White or light text on dark background - One accent colour for highlights and dividers - 40px minimum padding on all sides - No stock photo backgrounds - Let the post content dictate how many sections the graphic has. 3 steps = 3 blocks. 10 tips = 10 blocks. The constraint is legibility, not a fixed number. Every element must be large enough to read on a mobile screen. Single self-contained HTML file with inline CSS. Include viewport meta tag. Extract the core framework or steps from the post. Do not copy the full post. Distil into: - A short headline (5 to 8 words) - Key points as visual blocks (Unicode icons fine) - Footer with author name from about-me.md if available Save the HTML file. Tell the user: > Open the HTML in your browser and screenshot it. ## Path B: Image generation prompt The graphic must recap the post content visually. It is not an abstract illustration or stock photo. It summarises the key information from the post in a visual format the reader can scan. First, extract the content for the infographic from the post: - The main headline or hook (shortened to 5 to 10 words) - 3 to 6 key points, steps, or takeaways (one short line each) - Any numbers, stats, or data worth highlighting - A footer line (author name and CTA if appropriate) Then build the prompt based on the chosen style. ### Style 1: Whiteboard infographic Use this prompt template. Fill in the content sections from the post. ``` Generate a single image of a physical, hand-drawn infographic on a large whiteboard or notebook page. Crucial Style Instructions (Read First): Medium: The image must look like a photograph of a real whiteboard or large paper notepad. Texture: All elements must look created by hand using colored marker pens (black, blue, red, green) and highlighters (yellow/orange). Lines should be slightly imperfect, wobbly, and have the texture of ink on a surface. No Digital Fonts: All text, headings, and bullet points must appear handwritten or hand-printed in marker pen. Layout: Structure the 1080x1350 image as follows: TITLE (large, bold marker, top of page): [Insert headline from the post] CONTENT (hand-drawn sections with marker pen): [Insert 3 to 6 key points, each as a short hand-written line with a bullet, number, or small icon drawn next to it] [If there are stats or numbers, draw them large with a circle or box around them] Use multi-colored markers for emphasis. Keep text large and legible. Make everything look hand-drawn with slight imperfections. Make it look like a photograph of an actual notebook page. Always include the handwritten text "[Author name from about-me.md] | Repost" at the bottom of the image, in the same hand-drawn marker style. ``` ### Style 2: Branded infographic Ask the user for brand colours if not already known. If about-me.md exists, check there first. ``` Generate a professional infographic image at 1080x1350 pixels. Style: Clean, modern, editorial. Flat design with sharp edges and strong typography. No 3D effects, no gradients, no stock photos. Colour palette: - Background: [primary brand colour or dark neutral] - Text: [white or high-contrast colour] - Accent: [secondary brand colour] Layout: HEADLINE (top, large bold text): [Insert headline from the post] BODY (structured sections, each with an icon or number): [Insert 3 to 6 key points as short lines, each with a visual marker: numbered circle, checkmark, or simple icon] [If there are stats, display them as large feature numbers with a label underneath] FOOTER: [Author name from about-me.md] | [CTA or tagline if appropriate] Keep text large and scannable. Maximum 40 words on the entire image. No decorative borders. No watermarks. No logos unless the user provides one. ``` Output the complete prompt in a code block. Tell the user: > Paste this into Gemini or your image generator. The prompt is ready to go. ## After either path Say: > Graphic ready. Say "score my post" when you want feedback before publishing. ## Rules - Always read the post before designing. The graphic must recap the post content, not illustrate an abstract concept. - Structured graphics (Path A) must be a single HTML file with inline CSS. - Image prompts (Path B) must be fully self-contained. The user pastes it cold into Gemini and gets the graphic. - Extract and distil the post content into the graphic. No copying the full post text. - Whiteboard style: always hand-drawn marker look, imperfect lines, coloured pens, notebook/whiteboard texture. - Branded style: always clean, flat, modern, using the user's brand colours. - Never use em dashes in any output. - British English throughout. ## Dónde encaja - Categoría: [Redes sociales](https://skillsagentes.com/categorias/redes-sociales.md) — Escribe, califica y programa posts para Instagram, LinkedIn, X/Twitter y TikTok. - Creador: [charlie947](https://skillsagentes.com/creators/charlie947.md) — 17 skills en el directorio - [Todas las skills](https://skillsagentes.com/skills.md) - [Ranking de instalaciones](https://skillsagentes.com/ranking.md) ## Otras skills del mismo repositorio - [Content Matrix](https://skillsagentes.com/skills/charlie947/social-media-skills/content-matrix.md): Genera 32 o más ideas de post de LinkedIn en una sola tabla, cruzando los pilares de contenido del usuario con 8 formatos probados, según el content matrix de Justin Welsh. - [Gemini Carousel](https://skillsagentes.com/skills/charlie947/social-media-skills/gemini-carousel.md): Genera un carrusel de LinkedIn con marca propia usando Gemini: brief de diseño diapositiva por diapositiva, aprobación del usuario y prompts de imagen listos para pegar, en formato vertical 1080x1350. - [Gemini Infographic](https://skillsagentes.com/skills/charlie947/social-media-skills/gemini-infographic.md): Genera el prompt de una infografía estilo pizarra dibujada a mano a partir de un texto fuente, con brief aprobado por el usuario antes de generar la imagen en Gemini. - [Newsletter Voice](https://skillsagentes.com/skills/charlie947/social-media-skills/newsletter-voice.md): Construye instrucciones de escritura de newsletter dentro de un proyecto de Cowork, a partir de ediciones pasadas o de 6 arquetipos, para que Claude redacte futuras ediciones en la voz del usuario. - [Analytics Dashboard](https://skillsagentes.com/skills/charlie947/social-media-skills/analytics-dashboard.md): Convierte un export de LinkedIn Analytics en un dashboard React interactivo de tema oscuro más un análisis estratégico con 5 recomendaciones de contenido basadas en los datos. ## Skills relacionadas - [X Mastery Mentor](https://skillsagentes.com/skills/alchaincyf/nuwa-skill/x-mastery-mentor.md): Mentor de operación en X/Twitter de nivel experto, basado en las metodologías de seis creadores top y en el algoritmo abierto de X, con manual completo de selección de tema, escritura y crecimiento. - [Analytics Dashboard](https://skillsagentes.com/skills/charlie947/social-media-skills/analytics-dashboard.md): Convierte un export de LinkedIn Analytics en un dashboard React interactivo de tema oscuro más un análisis estratégico con 5 recomendaciones de contenido basadas en los datos. - [Content Matrix](https://skillsagentes.com/skills/charlie947/social-media-skills/content-matrix.md): Genera 32 o más ideas de post de LinkedIn en una sola tabla, cruzando los pilares de contenido del usuario con 8 formatos probados, según el content matrix de Justin Welsh. - [Gemini Carousel](https://skillsagentes.com/skills/charlie947/social-media-skills/gemini-carousel.md): Genera un carrusel de LinkedIn con marca propia usando Gemini: brief de diseño diapositiva por diapositiva, aprobación del usuario y prompts de imagen listos para pegar, en formato vertical 1080x1350. - [Gemini Infographic](https://skillsagentes.com/skills/charlie947/social-media-skills/gemini-infographic.md): Genera el prompt de una infografía estilo pizarra dibujada a mano a partir de un texto fuente, con brief aprobado por el usuario antes de generar la imagen en Gemini. --- Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)