# Навык агента «Социальные карты» > Создавайте визуально потрясающие социальные карты для каруселей Сяохуншу и пар обложек ВиЧат из различных источников контента. Используйте редакционные или швейцарские системы дизайна для создания привлекательных визуальных материалов для ваших статей и постов. - Canonical: https://nanoskill.ai/ru/skills/social-card-generation - Markdown: https://nanoskill.ai/ru/skills/social-card-generation.md - Author: op7418 - Published: 2026-06-01T07:18:11.391Z - Updated: 2026-07-21T18:32:43.637Z - Language: ru - 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 Навык социальных карт Гуйцзан — это продвинутая возможность агента, предназначенная для упрощения создания социальных карт для таких платформ, как Сяохуншу и ВиЧат. Он позволяет пользователям преобразовывать разнообразный контент — от статей и заметок о продуктах до снимков экрана и фотографий — в отшлифованные, оптимизированные под платформу визуальные материалы. Предлагая различные системы дизайна — редакционную и швейцарскую международную — навык гарантирует, что независимо от того, является ли ваша цель повествовательным рассказом или объяснением на основе данных, ваши социальные карты будут как привлекательными, так и эстетически последовательными, готовыми привлечь внимание аудитории. Этот навык выделяется своим структурированным рабочим процессом, предоставляя 28 макетных каркасов и 10 пресетов тем для управления представлением контента. Он автоматизирует поиск изображений из популярных платформ и включает надежный валидатор на основе Плейрайт для поддержания визуального качества путем обнаружения распространенных проблем макета. Результат предоставляется в виде одностраничного HTML-файла, рендерящегося непосредственно в PNG, что делает его легко совместимым с средами кодинговых агентов, такими как Клод Код и Кодекс. Пользователи могут использовать навык социальных карт Гуйцзан для различных сценариев, таких как создание многокарточных каруселей в Сяохуншу из длинных статей, разработка визуально гармоничных пар обложек для ВиЧат в формате 21:9 и карточек для обмена 1:1 или создание четких визуальных руководств из снимков экрана. Его принципы дизайна ставят во главу угла сдержанность, структуру и ориентированную на пользователя работу с изображениями, обеспечивая профессиональный и эффектный контент для социальных сетей без необходимости обширного опыта в дизайне. ## Key features - **Две визуальные системы**: Выбирайте между стилем «Эдиториал» для сторителлинга (Monocle, Kinfolk) или стилем «Свисс Интернешнл» для данных и структуры (на основе сетки, четкие тонкие линии), чтобы соответствовать тону вашего контента. - **Множество размеров холста**: Поддерживает форматы Сяохуншу 3:4 (1080x1440), Вичат 21:9 (2100x900) и Вичат 1:1 (1080x1080) для универсального присутствия в социальных сетях. - **Обширная библиотека макетов-скелетов**: Доступ к 28 предварительно разработанным макетам-скелетам (16 «Эдиториал», 12 «Свисс»), включая обложки с изображениями, башни KPI и горизонтальные гистограммы для быстрого структурирования контента. - **Автоматический поиск изображений**: Автоматически ищет изображения из Unsplash, Pexels, Flickr CC, Wallhaven или прямого поиска, загружая их локально с автоматически сгенерированным файлом SOURCES.md. - **Валидатор макета**: Включает валидатор на основе Playwright для обнаружения переполнения, нарушений ограничений по тексту, пробелов плотности и коллизий футеров, обеспечивая высокое качество создания социальных карт. ## Use cases - **Создание каруселей для Сяохуншу**: Преобразуйте длинные статьи, обзоры продуктов или путеводители в увлекательные многокарточные карусели для Сяохуншу, используя дизайн «Эдиториал» или «Свисс». - **Дизайн пар обложек для Вичат**: Создавайте визуально согласованные главные изображения 21:9 и карточки для обмена 1:1 для Моментов и Каналов Вичат из любого источника контента. - **Создание визуальных пособий**: Преобразуйте учебные материалы со скриншотами, игровые руководства или пошаговые инструкции по инструментам в структурированные социальные карты с улучшенными скриншотами и четкими макетами. - **Обобщение данных и обзоров**: Представляйте обзоры продуктов, сводки данных или итоговые годовые материалы, используя макеты в стиле «Свисс» с диаграммами и матрицами для четкой коммуникации. ## Result preview Изучите профессиональную карусель для социальных сетей, созданную с помощью этого Навыка. ![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 ### Установить Добавьте Навык создания социальных карт в своего ИИ-агента. ![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) ### Опишите контент Предоставьте контент, тему или ключевое сообщение, которое вы хотите преобразовать в карточки для социальных сетей. ![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) ### Создать социальные карты Создавайте визуально привлекательные, оптимизированные под платформу дизайны карточек с четкой информационной иерархией, сильным повествовательным потоком и макетами, готовыми к публикации. ![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 Навык агента для Claude Code, Codex и подобных сред кодинг-агентов. Генерирует **изображения каруселей для Сяохуншу / Рэднот** и **парные обложки ВиЧат 21:9 + 1:1** из статей, текстов, скриншотов, заметок о продуктах, субтитров или фотографий. Две визуальные системы в одном рабочем процессе: - **Редакционная**. Сдержанные макеты в духе *Монокль* / *Кинфолк* / *Сериал*. Лучше всего для повествования, стиля жизни, путешествий, чтения, кино и личных наблюдений. - **Швейцарский интернациональный**. Сетка прежде всего, один якорный цвет, острые линии, экстремальный контраст шрифта. Лучше всего для обзоров продуктов, данных, фреймворков, туториалов и инструментов ИИ. > Родственный проект [guizang-ppt-skill](https://github.com/op7418/guizang-ppt-skill). Общий визуальный язык, раздельное обслуживание. PPT решает «горизонтальный свайп-докладов»; этот решает «статические изображения для ленты». ![Предварительный просмотр Guizang Social Card Skill](https://file.nanoskill.ai/d370abcc-1fc4-4de1-903a-09020a6556ce.png) ## 30-секундный старт ```bash npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill ``` Или вставьте это агенту ИИ с доступом к оболочке: ```text Установи для меня guizang-social-card-skill. Клонируй https://github.com/op7418/guizang-social-card-skill в ~/.claude/skills/guizang-social-card-skill, затем проверь, что существуют SKILL.md, assets/ и references/. ``` Если уже установили, обновите: ```text Обнови для меня guizang-social-card-skill. Перейди в ~/.claude/skills/guizang-social-card-skill, выполни git pull, затем сообщи последний коммит. ``` Затем попросите своего агента: ```text Сделай мне карусель для Сяохуншу в швейцарском стиле из этой статьи, 5 карточек, синий IKB. ``` Другие полезные запросы: ```text Сделай мне набор для Сяохуншу 3:4 из этого обзора продукта, с заголовками в редакторском стиле. Преврати эту статью в пару обложек для ВиЧат: 21:9 герой + 1:1 карточка для поделиться, визуально согласованно. У меня 3 фотографии кемпинга — сделай мне карусель для Сяохуншу с упором на изображения. Преврати этот текст гайда по игре в набор для Сяохуншу; подтяни немного арта из Уолхейвен. ``` ## Что вы получите - 🖋 **Две визуальные системы**: Редакционная для атмосферы и повествования, Швейцарская для фактов и структуры, объединённые одним рабочим процессом - 📐 **3 размера холста**: `.poster.xhs` 1080×1440 (Сяохуншу 3:4), `.poster.wide` 2100×900 (ВиЧат 21:9), `.poster.square` 1080×1080 (ВиЧат 1:1) - 🧩 **28 скелетов макетов**: 16 Редакционных (`M01-M16`, включая обложку с доминированием изображения, Конвейер, До/После) + 12 Швейцарских (`S01-S12`, включая Башню KPI, Гистограмму H, Матрицу + Героя) - 🎨 **10 предустановок тем**: 6 Редакционных (Классика чернил, Индиго фарфоровый, Лесные чернила, Крафтовая бумага, Дюна, **Темные чернила полуночи**) + 4 Швейцарских якорных цвета (Синий Клейна IKB, Лимонный, Лимонно-зелёный, Оранжевый безопасности) - 🖼 **Процесс поиска изображений**: сначала изображения пользователя; иначе каскадным методом Unsplash → Pexels → Flickr CC → Wallhaven → прямой поиск, загружаются локально с автогенерируемым `SOURCES.md` - 🌫 **Фон с потоковым чернилом WebGL**: редакторские геройские страницы могут содержать анимацию чернил в реальном времени; можно отключить для слабых устройств или режима скриншота - 🪧 **Наложение изображений + безопасность лиц**: изображения на полный экран должны иметь маску; зоны размещения текста должны избегать объекта. Жёсткие правила в `references/image-overlay.md` - 🧰 **Инструменты украшения скриншотов**: 9 фонов WebP с реальной текстурой (5 Редакционных / 4 Швейцарских), в сочетании с утилитами `.frame-shot` / `.device-browser` / `.device-phone` - 🗺 **Компонент карты**: MapLibre + OSM реальные тайлы, несколько точек + соединители, для путеводителей - ✅ **Валидатор**: `validate-social-deck.mjs` автоматически определяет переполнение, нарушения ограничений шрифта, разрывы плотности по 4-м полосам и столкновения с нижним колонтитулом - 📄 **Однофайловый HTML + рендеринг Playwright**: без сборочного конвейера; `node render.mjs` выводит PNG напрямую ## Подходит / Не подходит **✅ Подходит**: карусели для Сяохуншу / пары обложек для ВиЧат / обложки Моментов / обложки Каналов / визуальные материалы для статей / страницы туториалов / сводки данных / путеводители / обзоры продуктов / объяснения со скриншотами **❌ Не подходит**: горизонтальные свайп-деки (используйте [guizang-ppt-skill](https://github.com/op7418/guizang-ppt-skill)) / генерация длинных видео / чистая ретушь фото / редактирование простого текста без макета ## 11 категорий Сяохуншу Разбиты по «кругу компетенции» — см. [`references/category-cookbook.md`](./references/category-cookbook.md): **Сильные сквозные** (копия / структура / изображения все в зоне ответственности): - Путешествия, карьера, рекомендации (после указания поджанра) **Сильные в копии и структуре, изображения зависят от пользователя или подбираемого арта:** - Игры, кино, еда (рецепты), макияж (туториалы), фитнес, дом, мода (подборки) **Вне зоны ответственности, объявляется заранее** (не будем натягивать): - Живые снимки OOTD / дримкор / градинг эмуляции плёнки / реальный тест кожи макияжа — всё, что сильно зависит от фотографии или пост-продакшена ## Типичные сценарии | Задача | Рекомендуемый подход | |------|------------------| | Длинная статья → карусель для Сяохуншу | Извлеките ключевые выводы; Редакционная для темпа повествования, Швейцарская для разбивки данных | | Обзор продукта / подведение итогов инструмента | Швейцарский + синий IKB, предпочтительнее `S09 Башня KPI` / `S10 Гистограмма H` | | Путешествия / стиль жизни | Редакционная + Темные чернила полуночи или Дюна, `M16 Обложка с доминированием изображения` для героя на полный экран | | Пара обложек для ВиЧат | Отрендерить тот же контент дважды: `.poster.wide` 21:9 + `.poster.square` 1:1, визуально согласованно | | Туториал со скриншотами / пошаговое руководство по инструменту | `.frame-shot` + `.device-browser`, предпочтительнее Швейцарская сетка | | Гайд по игре / обзор фильма | Редакционная + Темные чернила полуночи, подтянуть игровой арт из Уолхейвен для героя на полный экран | | Сводка данных / итоги года | Швейцарский + Лимонный или Оранжевый безопасности, комбинация матрицы и учётной книги | ## Почему однофайловый HTML в PNG - **Дружественно к агентам**: HTML + CSS — это текст, агенты могут писать, читать, редактировать и проверять напрямую - **Точность макета**: CSS Grid + строгие правила шрифта / отступов / сетки значительно превосходят возможности Markdown в макетировании - **Открытый поиск изображений**: подключайтесь к Unsplash / Pexels / Wallhaven / Mapbox / OSM / любому веб-ресурсу - **Проверяемое качество**: `validate-social-deck.mjs` выполняет замеры DOM через Playwright, а не догадки - **Простая доставка**: `output/*.png` поставляется напрямую — без деплоев, без инструментов экспорта ## Поддержка платформ | Платформа | Статус | Примечания | |----------|--------|-------| | Claude Code | Поддерживается | Нативный рабочий процесс навыка, идеально для генерации и итерации карточек | | Codex | Поддерживается | Хорошо для генерации длинных карточек, поиска изображений, визуального QA | | Cursor / другие локальные агенты | Работает | Требуется чтение/запись файловой системы + выполнение оболочки | | Простой чат-бот | Не рекомендуется | Без файловой системы и конвейера рендеринга невозможно надёжно поставлять изображения | ## Установка ### Вариант 1: Установка одной строкой (рекомендуется) ```bash npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill ``` ### Вариант 2: Вставьте это ИИ > Установи для меня навык `guizang-social-card-skill` для Claude Code. Шаги: > > 1. Убедись, что существует `~/.claude/skills/` (создай, если нет) > 2. Выполни `git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill` > 3. Проверь: `ls ~/.claude/skills/guizang-social-card-skill/` должен показать `SKILL.md`, `assets/`, `references/` > 4. Сообщи, когда будет готово. Позже, говоря что-то вроде «сделай мне карусель для Сяохуншу», активируешь этот навык. Вставьте блок выше в Claude Code / Cursor / любого агента ИИ с доступом к оболочке. ### Вариант 3: Ручной CLI ```bash git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill ``` ### Как его активировать После установки Claude Code автоматически определяет навык. Фразы-триггеры: - "Сделай мне карусель для Сяохуншу / Rednote" - "Сделай мне карточки Rednote" - "Сделай обложку ВиЧат 21:9 герой + 1:1 карточка для поделиться" - "Сгенерируй социальные карточки / карточки в журнальном стиле" - "Преврати эту статью в карусель-туториал" - "Сделай обзор для Сяохуншу в швейцарском стиле / карточки в стиле IKB" ## Рабочий процесс Навык представляет собой структурированный рабочий процесс. Агент проходит 7 шагов: 1. **Приём** — зафиксировать 4 вещи: целевая платформа / стиль / исходный контент / изображения пользователя. Когда изображения недоступны, предложи A/B/C один раз (снимай сам / сгенерируй ИИ / найди онлайн); не переспрашивай 2. **Стиль и Тема** — выбери Редакционный или Швейцарский, затем одну из 10 предустановок тем. Собственные шестнадцатеричные значения не допускаются 3. **Выбор макета** — выбери / вставь / адаптируй копию из 28 скелетов макетов. 16 Редакционных / 12 Швейцарских 4. **Подготовка ресурсов** — найди изображения (Unsplash / Pexels / Flickr CC / Wallhaven / прямой поиск), загрузи локально + создай `SOURCES.md`; спроси, нужно ли указывать источники 5. **Компоновка и рендеринг** — скопируй шаблон-заготовку → замени `` → `node render.mjs` 6. **Доставка и обзор** — сначала покажи PNG, спроси "посмотри сам или хочешь запустить валидатор?" — автоматическая проверка не запускается 7. **Итерация** — примени обратную связь пользователя, подкорректируй встроенные стили или поменяй макеты / изображения, отрендери заново Полная спецификация в [`SKILL.md`](./SKILL.md). Подробности в соответствующих `references/*.md`. ## Валидатор ```bash node validate-social-deck.mjs path/to/task-dir ``` 6 правил, основанных на реальном замере Playwright, а не статическом сканировании: - **R1** Переполнение — любая секция, выходящая за пределы `.poster`, немедленно проваливается - **R2** Ограничения шрифта — комбинации размера и насыщенности `.h-xl` / `.h-display`, превышающие определения заготовки - **R3** Столкновение с нижним колонтитулом — контент, вдавливающийся в нижний колонтитул / номер страницы - **R4** Плотность по 4 полосам — холст высотой 1440 делится на 4 горизонтальные полосы; каждая должна содержать контент или иметь заявленную причину для пустого пространства - **R5** Переполнение фрейма — дочерние элементы `.frame-img` / `.frame-shot`, выходящие за фрейм - **R6** Швейцарская идентичность — швейцарские шаблоны с встроенным `font-weight >= 700` предупреждают (нарушает правило «больше размер — тоньше начертание») `SKILL.md`, Шаг 7 явно указывает, что **валидатор не запускается автоматически** — дождитесь, пока пользователь посмотрит изображения, экономя десятки секунд на каждом круге. ## Предустановки тем Выбирайте из [`references/theme-presets.md`](./references/theme-presets.md). **Собственные шестнадцатеричные значения не допускаются** — защита эстетики важнее свободы выбора. ### Редакционные (6) | Тема | Тона | Лучше всего для | |-------|-------|----------| | 🖋 **Классика чернил** | `#0a0a0b` / `#f1efea` | Общее по умолчанию, коммерческие темы, когда сомневаешься | | 🌊 **Индиго фарфоровый** | `#0a1f3d` / `#f1f3f5` | Технологии, исследования, ИИ, техническая документация | | 🌿 **Лесные чернила** | `#1a2e1f` / `#f5f1e8` | Природа, устойчивое развитие, отдых на природе, нон-фикшн | | 🍂 **Крафтовая бумага** | `#2a1e13` / `#eedfc7` | Ностальгия, гуманитарные науки, чтение, литература | | 🌙 **Дюна** | `#1f1a14` / `#f0e6d2` | Искусство, дизайн, творчество, мода | | ⚫ **Темные чернила полуночи** | `#0e0d0c` / `#ece2cf` / `#d4a04a` | Ключевой арт игр / ночные сцены / кинематографичные обложки / Black Myth · Elden Ring-стиль тёмных тем | ### Швейцарские (4) | Тема | Якорный цвет | Лучше всего для | |-------|--------|----------| | 🔵 **Синий Клейна IKB** | `#002FA7` | Общее по умолчанию, коммерческие запуски, продукты ИИ, фреймворки | | 🟡 **Лимонный** | `#FFD500` | Молодёжь, спорт, розница, потребительские товары, Y2K | | 🟢 **Лимонно-зелёный** | `#C5E803` | Экология, здоровье, Gen Z, зелёные бренды | | 🟠 **Оранжевый безопасности** | `#FF6B35` | Оповещения, новости, промышленность, энергичные темы | Чтобы переключить тему, просто замените атрибут `
` на шаблоне-заготовке; всё CSS разрешается через `var(--...)`. ## Структура каталога ``` guizang-social-card-skill/ ├── SKILL.md ← Основной файл навыка: 7-шаговый рабочий процесс ├── README.md ← README на китайском ├── README.en.md ← Этот файл ├── HANDOFF.md ← Документ передачи: факты + история версий ├── PRODUCT.md ← Документ продукта: мышление + решения + дорожная карта ├── validate-social-deck.mjs ← Валидатор макета Playwright ├── assets/ │ ├── template-editorial-card.html ← Редакционный шаблон (6 тем / 3 холста) │ ├── template-swiss-card.html ← Швейцарский шаблон (4 акцента / 3 холста) │ ├── magazine-bg-webgl.js ← Фон с потоковым чернилом WebGL │ └── screenshot-backgrounds/ ← 9 фонов для сцены скриншотов (WebP) │ ├── style-a/ ← 5 Редакционных │ └── style-b/ ← 4 Швейцарских └── references/ ├── platform-specs.md ← Платформа × разрешение × именование ├── style-system.md ← Жёсткие правила и антипаттерны для обоих стилей ├── theme-presets.md ← Все 10 палитр подробно ├── layout-recipes.md ← 28 скелетов макетов (M01-M16 + S01-S12) ├── components.md ← Шрифт / карточки / отступы / иконки ├── background-systems.md ← Системы фона: поток чернил / сетка / бумажные слои ├── portrait-fill.md ← Стратегия пустого пространства для доски 3:4 ├── content-planning.md ← Хуки / разбивка на страницы / сжатие текста ├── category-cookbook.md ← Таблица маршрутизации 11 категорий Сяохуншу ├── image-overlay.md ← Правила маски для полноэкранных изображений + безопасность лиц ├── screenshot-treatment.md ← Утилиты `.frame-shot` + украшение скриншотов ├── map-component.md ← Картографический компонент `.map-block` MapLibre ├── title-shortener.md ← Стратегия короткого заголовка для обложки 1:1 ├── production-workflow.md ← Конвейер рендеринга Playwright └── qa-checklist.md ← Чек-лист качества ``` ## Основные принципы дизайна 1. **Сдержанность вместо крикливости** — сдержанные палитры выделяются в насыщенной ленте 2. **Структура вместо украшений** — иерархию несут шрифт / контраст / сетка, а не тени или карточки 3. **Макеты вместо свободы** — сначала выбирай, потом адаптируй; не придумывай страницы вне 28 скелетов 4. **Сначала изображения пользователя** — при приёме предложи A/B/C один раз; не переспрашивай о съёмке своих 5. **Маска + избегание** — полноэкранные изображения всегда имеют маску; зоны текста должны обходить объект (лица / продукты / текстово-насыщенные области) 6. **Больше размер — тоньше начертание** — в швейцарском стиле размер `.h-xl` растёт → насыщенность должна снижаться. Редакционный стиль следует тому же правилу 7. **Без автовалидации** — дайте пользователю сначала посмотреть, затем спросите перед проверкой; экономит десятки секунд на каждом круге 8. **Навык — это продукт, а не промпт** — имеет PRODUCT.md, номера версий, CHANGELOG, границы возможностей 9. **Локальные тесты не попадают в git** — все демо / тесты размещаются в `local-tests/`, добавлены в .gitignore ## Визуальные референсы - Макеты и межбуквенные интервалы журналов *Монокль* / *Кинфолк* / *Сериал* - Системы сеток Массимо Виньелли / Helvetica Forever / Швейцарского интернационального типографического стиля - Соотношения изображения к тексту и человеческая портретность изданий Apartamento / The Gentlewoman - Примеры из Сяохуншу / Rednote, где сдержанность побеждает ленту - Практика социальных карточек Guizang ## Дорожная карта - Больше тестов для граничных случаев ограничений шрифта при длинном редакторском контенте - Больше швейцарских макетов данных (дополнительные скелеты диаграмм) - После генерации изображения: активно спрашивать, делать ли локальные правки / перегенерировать всё изображение - Больше рекомендованных пакетов макетов для конкретных категорий (сейчас 7 из 11 сильные сквозные) - Версия WorkBuddy, готовая для маркетплейса ## Участие Ошибки, проблемы с макетами, запросы на новые макеты — приветствуются Issues и PR. Приоритеты изменений: - При редактировании шаблонов также обновите таблицу соответствия в `references/components.md` (размеры / отступы / насыщенность) - При добавлении макетов добавьте полный рецепт в `references/layout-recipes.md` (ограничения текста + минимальная плотность) - При добавлении цветов темы также обновите блок `[data-theme="..."]` в шаблоне-заготовке + `references/theme-presets.md` - При добавлении швейцарских правил также обновите соответствующее правило в `validate-social-deck.mjs` - Ошибки, с которыми вы столкнулись, заносите в `references/qa-checklist.md` - Тесты и демо живут в `local-tests/` — не загрязняйте корень навыка ## Лицензия AGPL-3.0 © 2026 [op7418](https://github.com/op7418) Этот проект лицензирован под **GNU AGPL-3.0**. Ключевые моменты: 1. **Требуется указание авторства** — Сохраняйте уведомление об авторских правах 2. **Производные должны быть открыты** — Любая изменённая версия, форк или перераспространение должны быть выпущены под AGPL-3.0 (или совместимой лицензией) с предоставлением полного исходного кода 3. **Сетевое использование считается распространением** — Даже если вы только запускаете изменённую версию как SaaS / веб-сервис без распространения кода, вы всё равно должны опубликовать исходный код (это делает AGPL строже, чем GPL) 4. **Никакого закрытого, проприетарного или платного распространения** Полные условия в [`LICENSE`](./LICENSE). ## FAQ ### Что такое навык «Гуизанг Сошиал Кард»? Навык «Гуизанг Сошиал Кард» — это агентский навык для Клод Код, Кодекс и подобных сред кодинг-агентов, который генерирует карусели для Сяохуншу и пары обложек для Вичат из различных входных данных, таких как статьи, заметки или фотографии, используя различные системы визуального дизайна. ### Какой тип контента я могу использовать для создания социальных карт? Вы можете использовать статьи, тексты, скриншоты, заметки о продуктах, субтитры или фотографии в качестве исходного контента для создания социальных карт. Навык адаптируется к различным входным данным, чтобы создавать визуально привлекательные результаты. ### Какие две визуальные системы доступны для создания социальных карт? Навык предлагает две визуальные системы: «Эдиториал» для сторителлинга, лайфстайл- и нарративного контента, и «Свисс Интернешнл» для обзоров продуктов, данных, фреймворков и учебных материалов, характеризующихся подходом на основе сетки. ### Могу ли я использовать пользовательские цвета для моих социальных карт? Нет, пользовательские hex-значения не допускаются. Навык предоставляет 10 предустановленных тем (6 «Эдиториал», 4 «Свисс») для поддержания визуальной целостности и качества. Вы можете переключать темы, обновляя атрибут data-theme в начальном шаблоне. ### Как установить навык «Гуизанг Сошиал Кард»? Вы можете установить его с помощью команды \`npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill\` или клонировав репозиторий в директорию навыков вашего агента. ### Поддерживает ли навык английский контент? Да, навык поддерживает английский контент. Шрифты «Эдиториал» (Playfair Display + Noto Serif) и «Свисс» (Inter + Helvetica) охватывают китайский и английский языки, а макеты скелетов не зависят от языка.