# Sosyal Kart Ajan Becerisi > Çeşitli içerik kaynaklarından Xiaohongshu karuselleri ve WeChat kapak çiftleri için görsel olarak çarpıcı sosyal kartlar oluşturun. Makaleleriniz ve gönderileriniz için ilgi çekici görseller oluşturmak üzere editoryal veya İsviçre tasarım sistemlerinden yararlanın. - Canonical: https://nanoskill.ai/tr/skills/social-card-generation - Markdown: https://nanoskill.ai/tr/skills/social-card-generation.md - Author: op7418 - Published: 2026-06-01T07:18:11.391Z - Updated: 2026-07-21T18:32:43.637Z - Language: tr - 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 Guizang Sosyal Kart Becerisi, Xiaohongshu ve WeChat gibi platformlar için sosyal kart oluşturmayı kolaylaştırmak üzere tasarlanmış gelişmiş bir ajan yeteneğidir. Kullanıcıların makaleler, ürün notları, ekran görüntüleri ve fotoğraflar gibi çeşitli içerikleri, platforma optimize edilmiş şık görsellere dönüştürmesini sağlar. Belirgin Editoryal ve İsviçre Uluslararası tasarım sistemleri sunarak, ister hikaye anlatımı ister veri odaklı açıklama hedefiniz olsun, sosyal kartlarınızın hem ilgi çekici hem de estetik açıdan tutarlı olmasını ve izleyici dikkatini çekmeye hazır olmasını sağlar. Bu beceri, içerik sunumuna rehberlik etmek için 28 düzen iskeleti ve 10 tema ön ayarı sağlayan yapılandırılmış iş akışıyla öne çıkar. Popüler platformlardan görüntü kaynağını otomatikleştirir ve yaygın düzen sorunlarını tespit ederek görsel kaliteyi korumak için sağlam bir Playwright tabanlı doğrulayıcı içerir. Çıktı, doğrudan PNG'ye dönüştürülen tek dosyalı HTML olarak sunulur, bu da onu Claude Code ve Codex gibi kodlama ajanı ortamlarıyla yüksek oranda uyumlu hale getirir. Kullanıcılar, Guizang Sosyal Kart Becerisi'ni uzun makalelerden çok kartlı Xiaohongshu karuselleri oluşturmak, görsel olarak uyumlu WeChat 21:9 kahraman ve 1:1 paylaşım kartı çiftleri tasarlamak veya ekran görüntülerinden net öğretici görseller üretmek gibi çeşitli kullanım durumları için kullanabilir. Tasarım ilkeleri, kısıtlama, yapı ve kullanıcı odaklı görüntü işlemeye öncelik vererek, kapsamlı tasarım uzmanlığı gerektirmeden profesyonel ve etkili sosyal medya içeriği sağlar. ## Key features - **İkili Görsel Sistemler**: İçeriğinizin tonuna uyması için hikaye anlatımı için Editoryal stil (Monocle, Kinfolk) veya veri ve yapı için İsviçre Uluslararası stil (ızgara öncelikli, keskin kıllar) arasında seçim yapın. - **Çoklu Tuval Boyutları**: Çok yönlü sosyal medya varlığı için Xiaohongshu 3:4 (1080x1440), WeChat 21:9 (2100x900) ve WeChat 1:1 (1080x1080) boyutlarını destekler. - **Kapsamlı Düzen İskeletleri**: Hızlı içerik yapılandırması için görsel öncelikli kapaklar, KPI kuleleri ve H-çubuk grafikleri dahil 28 önceden tasarlanmış düzen iskeletine (16 Editoryal, 12 İsviçre) erişin. - **Otomatik Görsel Kaynak Bulma**: Unsplash, Pexels, Flickr CC, Wallhaven veya doğrudan arama yoluyla otomatik olarak görsel bulur ve bunları otomatik oluşturulan bir SOURCES.md dosyasıyla yerel olarak indirir. - **Düzen Doğrulayıcı**: Taşma, tür sınırı ihlalleri, yoğunluk boşlukları ve alt bilgi çarpışmalarını tespit etmek için Playwright tabanlı bir doğrulayıcı içerir, böylece yüksek kaliteli sosyal kart oluşturmayı sağlar. ## Use cases - **Xiaohongshu Döngüleri Oluşturun**: Uzun makaleleri, ürün incelemelerini veya seyahat rehberlerini, Editoryal veya İsviçre tasarımını kullanarak Xiaohongshu için ilgi çekici çok kartlı döngülere dönüştürün. - **WeChat Kapak Çiftleri Tasarlayın**: Herhangi bir içerik kaynağından WeChat Moments ve Kanallar için görsel olarak tutarlı 21:9 kahraman görüntüleri ve 1:1 paylaşım kartları oluşturun. - **Eğitim Görselleri Üretin**: Ekran görüntüsü eğitimlerini, oyun rehberlerini veya araç tanıtımlarını, güzelleştirilmiş ekran görüntüleri ve net düzenlerle yapılandırılmış sosyal kartlara dönüştürün. - **Verileri ve İncelemeleri Özetleyin**: Net iletişim için grafikler ve matrisler içeren İsviçre tarzı düzenler kullanarak ürün incelemelerini, veri özetlerini veya yılın değerlendirmesi içeriklerini sunun. ## Result preview Bu Beceri tarafından desteklenen profesyonel bir sosyal medya karuselini keşfedin. ![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 ### Yükle Sosyal Kart Oluşturma Becerisini AI ajanınıza ekleyin. ![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) ### İçeriği Tanımlayın Sosyal medya kartlarına dönüştürmek istediğiniz içeriği, konuyu veya ana mesajı sağlayın. ![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) ### Sosyal Kartlar Oluştur Net bilgi hiyerarşisi, güçlü hikaye akışı ve yayına hazır düzenlerle görsel olarak ilgi çekici, platforma optimize edilmiş kart tasarımları oluşturun. ![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 ve benzeri kodlama ajanı ortamları için bir ajan becerisi. Makaleler, reklam metinleri, ekran görüntüleri, ürün notları, altyazılar veya fotoğraflardan **Xiaohongshu / Rednote karusel görselleri** ve **WeChat 21:9 + 1:1 kapak çiftleri** oluşturur. İki görsel sistem tek bir iş akışını paylaşır: - **Editoryal**. *Monocle* / *Kinfolk* / *Cereal* ruhunda sade düzenler. Hikaye anlatımı, yaşam tarzı, seyahat, okuma, film ve kişisel gözlemler için en iyisi. - **İsviçre Uluslararası**. Izgara öncelikli, tek vurgu rengi, keskin ince çizgiler, aşırı tip kontrastı. Ürün incelemeleri, veri, çerçeveler, öğreticiler ve yapay zeka araçları için en iyisi. > Kardeş proje: [guizang-ppt-skill](https://github.com/op7418/guizang-ppt-skill). Ortak görsel dil, ayrı bakım. PPT "yatay kaydırmalı konuşmaları" çözer; bu ise "statik akış görsellerini" çözer. ![Guizang Sosyal Kart Becerisi önizleme](https://file.nanoskill.ai/d370abcc-1fc4-4de1-903a-09020a6556ce.png) ## 30 saniyede başlangıç ```bash npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill ``` Veya kabuk erişimi olan bir yapay zeka ajanına şunu yapıştırın: ```text Benim için guizang-social-card-skill'i yükle. https://github.com/op7418/guizang-social-card-skill deposunu ~/.claude/skills/guizang-social-card-skill içine klonla, sonra SKILL.md, assets/ ve references/ dosyalarının var olduğunu doğrula. ``` Zaten yüklüyse, şununla güncelleyin: ```text Benim için guizang-social-card-skill'i güncelle. ~/.claude/skills/guizang-social-card-skill dizinine git, git pull çalıştır, sonra bana en son commit'i söyle. ``` Sonra ajanınıza sorun: ```text Bu makaleden İsviçre tarzı bir Xiaohongshu karuseli yap, 5 kart, IKB mavisi. ``` Diğer faydalı istemler: ```text Bu ürün incelemesinden editoryal tarz başlıklarla 3:4 Xiaohongshu seti yap. Bu makaleyi bir WeChat kapak çiftine dönüştür: 21:9 kahraman + 1:1 paylaşım kartı, görsel olarak tutarlı. 3 kamp fotoğrafım var — görsel ağırlıklı bir Xiaohongshu karuseli yap. Bu oyun kılavuzu metnini bir Xiaohongshu setine dönüştür; Wallhaven'dan biraz oyun sanatı al. ``` ## Elde edecekleriniz - 🖋 **İki görsel sistem**: Atmosfer ve anlatı için Editoryal, olgular ve yapı için İsviçre, tek bir iş akışını paylaşır - 📐 **3 tuval boyutu**: `.poster.xhs` 1080×1440 (Xiaohongshu 3:4), `.poster.wide` 2100×900 (WeChat 21:9), `.poster.square` 1080×1080 (WeChat 1:1) - 🧩 **28 düzen iskeleti**: 16 Editoryal (`M01-M16`, Görsel Ağırlıklı Kapak, İşlem Hattı, Önce/Sonra dahil) + 12 İsviçre (`S01-S12`, KPI Kulesi, H-Çubuk Grafiği, Matris + Kahraman dahil) - 🎨 **10 tema ön ayarı**: 6 Editoryal (Mürekkep Klasik, İndigo Porselen, Orman Mürekkebi, Kraft Kağıt, Kumul, **Gece Yarısı Mürekkebi** koyu) + 4 İsviçre vurgu rengi (IKB Klein Mavisi, Limon, Limon Yeşili, Güvenlik Turuncusu) - 🖼 **Görsel bulma iş akışı**: önce kullanıcı görselleri; yoksa Unsplash → Pexels → Flickr CC → Wallhaven → doğrudan arama sırasıyla, yerel olarak indirilir ve otomatik oluşturulan `SOURCES.md` ile birlikte - 🌫 **WebGL mürekkep akışı arka planı**: editoryal kahraman sayfaları canlı bir mürekkep animasyonu sunabilir; düşük güçlü cihazlar veya ekran görüntüsü modu için devre dışı bırakılabilir - 🪧 **Görsel bindirme + yüz güvenliği**: tam kanamalı görseller bir maske taşımalıdır; metin bırakma bölgeleri konudan kaçınmalıdır. `references/image-overlay.md` içinde katı kurallar - 🧰 **Ekran görüntüsü güzelleştirme varlıkları**: 9 gerçek dokulu WebP arka plan (5 Editoryal / 4 İsviçre), `.frame-shot` / `.device-browser` / `.device-phone` yardımcıları ile eşleştirilmiş - 🗺 **Harita bileşeni**: MapLibre + OSM gerçek döşemeler, çoklu iğne + bağlayıcılar, seyahat rehberleri için yapılmış - ✅ **Doğrulayıcı**: `validate-social-deck.mjs` taşma, tip sınırı ihlalleri, 4 bantlı yoğunluk boşlukları ve altbilgi çarpışmalarını otomatik algılar - 📄 **Tek dosya HTML + Playwright işleme**: ön uç derleme hattı yok; `node render.mjs` doğrudan PNG çıktısı verir ## Uygun / Uygun değil **✅ Uygun**: Xiaohongshu karuselleri / WeChat kapak çiftleri / Moments kapakları / Kanallar kapakları / makale görselleri / öğretici sayfaları / veri özetleri / seyahat rehberleri / ürün incelemeleri / ekran görüntüsü açıklayıcıları **❌ Uygun değil**: Yatay kaydırmalı desteler ([guizang-ppt-skill](https://github.com/op7418/guizang-ppt-skill) kullanın) / uzun biçimli video üretimi / saf fotoğraf rötuşu / düzen olmadan düz metin düzenleme ## 11 Xiaohongshu kategorisi "Yetkinlik çemberi"ne göre kademelendirilmiş — bkz. [`references/category-cookbook.md`](./references/category-cookbook.md): **Uçtan uca güçlü** (metin / yapı / görsellerin tümü kapsamda): - Seyahat, kariyer, öneriler (bir alt tür belirledikten sonra) **Metin ve yapı güçlü, görseller kullanıcıya veya bulunan sanata bağlı:** - Oyun, film, yemek (tarif odaklı), makyaj (öğretici odaklı), fitness, ev, moda (seçilmiş parçalar) **Kapsam dışı, baştan beyan edilir** (zorla uydurulmaz): - OOTD canlı çekimler / rüya çekirdeği / film emülasyonu derecelendirme / gerçek cilt testi makyajı — büyük ölçüde fotoğrafçılığa veya post prodüksiyona bağlı her şey ## Yaygın senaryolar | Görev | Önerilen akış | |------|------------------| | Uzun makale → Xiaohongshu karuseli | Temel çıkarımları çıkar; anlatı temposu için Editoryal, veri dağılımları için İsviçre | | Ürün incelemesi / araç özeti | İsviçre + IKB mavisi, `S09 KPI Kulesi` / `S10 H-Çubuk Grafiği` tercih edin | | Seyahat / yaşam tarzı | Editoryal + Gece Yarısı Mürekkebi veya Kumul, tam kanamalı kahraman için `M16 Görsel Ağırlıklı Kapak` | | WeChat kapak çifti | Aynı içeriği iki kez işleyin: `.poster.wide` 21:9 + `.poster.square` 1:1, görsel olarak tutarlı | | Ekran görüntüsü öğreticisi / araç tanıtımı | `.frame-shot` + `.device-browser`, İsviçre ızgara tabanını tercih edin | | Oyun kılavuzu / film özeti | Editoryal + Gece Yarısı Mürekkebi, tam kanamalı kahraman için Wallhaven'dan oyun sanatı alın | | Veri özeti / yılın değerlendirmesi | İsviçre + Limon veya Güvenlik Turuncusu, matris + defter kombinasyonu | ## Neden tek dosya HTML'den PNG'ye - **Ajan dostu**: HTML + CSS metindir — ajanlar doğrudan yazabilir, okuyabilir, düzenleyebilir ve doğrulayabilir - **Düzen hassasiyeti**: CSS Izgara + katı tip / kenar boşluğu / ızgara kuralları Markdown'un düzen erişimini çok aşar - **Açık görsel kaynağı**: Unsplash / Pexels / Wallhaven / Mapbox / OSM / herhangi bir web kaynağına bağlanın - **Doğrulanabilir kalite**: `validate-social-deck.mjs` Playwright DOM ölçümünü çalıştırır, tahmin değil - **Basit teslimat**: `output/*.png` doğrudan gönderilir — dağıtım yok, dışa aktarma aracı yok ## Platform desteği | Platform | Durum | Notlar | |----------|--------|-------| | Claude Code | Destekleniyor | Yerel Beceri iş akışı, kart oluşturmak ve yinelemek için ideal | | Codex | Destekleniyor | Uzun biçimli kart oluşturma, görsel bulma, görsel QA için iyi | | Cursor / diğer yerel ajanlar | Çalışır | Dosya sistemi okuma/yazma + kabuk yürütme gerektirir | | Düz sohbet botu | Önerilmez | Dosya sistemi ve işleme hattı olmadan, görselleri güvenilir şekilde gönderemez | ## Yükle ### Seçenek 1: Tek satırda yükleme (önerilir) ```bash npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill ``` ### Seçenek 2: Bir yapay zekaya şunu yapıştırın > Benim için `guizang-social-card-skill` Claude Code becerisini yükle. Adımlar: > > 1. `~/.claude/skills/` dizininin var olduğundan emin ol (yoksa oluştur) > 2. `git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill` komutunu çalıştır > 3. Doğrula: `ls ~/.claude/skills/guizang-social-card-skill/` çıktısı `SKILL.md`, `assets/`, `references/` göstermeli > 4. Bittiğinde bana söyle. Daha sonra, "bana bir Xiaohongshu karuseli yap" gibi ifadeler bu beceriyi tetikleyecektir. Yukarıdaki bloğu Claude Code / Cursor / kabuk erişimi olan herhangi bir yapay zeka ajanına yapıştırın. ### Seçenek 3: Manuel CLI ```bash git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill ``` ### Nasıl tetiklenir Yüklendikten sonra, Claude Code beceriyi otomatik algılar. Tetikleyici ifadeler: - "Bana bir Xiaohongshu / Rednote karuseli yap" - "Bana Rednote kartları yap" - "Bir WeChat 21:9 kahraman + 1:1 paylaşım kartı yap" - "Sosyal kartlar / dergi tarzı sosyal kartlar oluştur" - "Bu makaleyi bir öğretici karuseline dönüştür" - "İsviçre tarzı bir Xiaohongshu incelemesi / IKB tarzı kartlar yap" ## İş akışı Beceri yapılandırılmış bir iş akışıdır. Ajan 7 adımdan geçer: 1. **Alım** — 4 şeyi yakala: hedef platform / stil / kaynak içerik / kullanıcı görselleri. Görsel yoksa, A/B/C'yi bir kez sun (kendin çek / yapay zeka oluştur / çevrimiçi bul); tekrar sunma 2. **Stil ve Tema** — Editoryal veya İsviçre'yi seç, sonra 10 tema ön ayarından birini seç. Özel hex değerlerine izin verilmez 3. **Düzen Seçimi** — 28 düzen iskeletinden metni seç / yapıştır / uyarla. 16 Editoryal / 12 İsviçre 4. **Varlık Hazırlığı** — görselleri bul (Unsplash / Pexels / Flickr CC / Wallhaven / doğrudan arama), yerel olarak indir + `SOURCES.md` yaz; kaynakları belirtmek isteyip istemediğini sor 5. **Oluştur ve İşle** — tohum şablonu kopyala → `` yorumunu değiştir → `node render.mjs` 6. **Teslim ve İnceleme** — önce PNG'leri göster, "onlara kendin mi bakarsın yoksa doğrulayıcıyı çalıştırmamı ister misin?" diye sor — otomatik doğrulama yapma 7. **Yineleme** — kullanıcı geri bildirimini uygula, satır içi stilleri düzelt veya düzenleri / görselleri değiştir, yeniden işle Tam şartname [`SKILL.md`](./SKILL.md) içinde. Derin ayrıntılar eşleşen `references/*.md` dosyalarında. ## Doğrulayıcı ```bash node validate-social-deck.mjs yol/görev-dizini ``` Playwright gerçek işleme ölçümüne dayalı 6 kural, statik tarama değil: - **R1** Taşma — `.poster` öğesini aşan herhangi bir bölüm hemen başarısız olur - **R2** Tip Sınırları — `.h-xl` / `.h-display` boyut + ağırlık kombinasyonları tohum tanımlarını aşarsa - **R3** Altbilgi Çarpışması — içeriğin alt altbilgiye / sayfa numarasına baskı yapması - **R4** 4 Bantlı Yoğunluk — 1440 yüksekliğindeki tuval 4 yatay banda bölünür; her biri içerik tutmalı veya boşluk için belirtilmiş bir nedeni olmalı - **R5** Çerçeve Taşması — `.frame-img` / `.frame-shot` çocukları çerçeveyi aşarsa - **R6** İsviçre Kimliği — Satır içi `font-weight >= 700` olan İsviçre şablonları uyarır ("daha büyük demek daha ince demektir" kuralını ihlal eder) `SKILL.md` Adım 7, **doğrulayıcının otomatik çalışmadığını** açıkça belirtir — kullanıcının önce görsellere bakmasını bekleyin, böylece tur başına onlarca saniye tasarruf edilir. ## Tema ön ayarları [`references/theme-presets.md`](./references/theme-presets.md) dosyasından seçin. **Özel hex değerlerine izin verilmez** — estetiği korumak seçim özgürlüğünden daha önemlidir. ### Editoryal (6) | Tema | Tonlar | En iyi olduğu alan | |-------|-------|----------| | 🖋 **Mürekkep Klasik** | `#0a0a0b` / `#f1efea` | Genel varsayılan, ticari konular, şüphede kalındığında | | 🌊 **İndigo Porselen** | `#0a1f3d` / `#f1f3f5` | Teknoloji, araştırma, yapay zeka, teknik yazı | | 🌿 **Orman Mürekkebi** | `#1a2e1f` / `#f5f1e8` | Doğa, sürdürülebilirlik, açık hava, kurgu dışı | | 🍂 **Kraft Kağıt** | `#2a1e13` / `#eedfc7` | Nostalji, beşeri bilimler, okuma, edebiyat | | 🌙 **Kumul** | `#1f1a14` / `#f0e6d2` | Sanat, tasarım, yaratıcılık, moda | | ⚫ **Gece Yarısı Mürekkebi** | `#0e0d0c` / `#ece2cf` / `#d4a04a` | Oyun anahtar sanatı / gece sahneleri / sinematik kapaklar / Black Myth · Elden Ring tarzı karanlık temalar | ### İsviçre (4) | Tema | Vurgu | En iyi olduğu alan | |-------|--------|----------| | 🔵 **IKB Klein Mavisi** | `#002FA7` | Genel varsayılan, ticari lansmanlar, yapay zeka ürünleri, çerçeveler | | 🟡 **Limon** | `#FFD500` | Gençlik, spor, perakende, tüketici, Y2K | | 🟢 **Limon Yeşili** | `#C5E803` | Eko, sağlık, Z kuşağı, yeşil markalar | | 🟠 **Güvenlik Turuncusu** | `#FF6B35` | Uyarılar, haberler, endüstriyel, enerjik temalar | Temaları değiştirmek için, tohum şablonundaki `
` özelliğini değiştirmeniz yeterlidir; tüm CSS `var(--...)` üzerinden çözümlenir. ## Dizin ``` guizang-social-card-skill/ ├── SKILL.md ← Ana beceri dosyası: 7 adımlı iş akışı ├── README.md ← Çince BENİOKU ├── README.en.md ← Bu dosya ├── HANDOFF.md ← Devir belgesi: olgular + sürüm geçmişi ├── PRODUCT.md ← Ürün belgesi: düşünce + kararlar + yol haritası ├── validate-social-deck.mjs ← Playwright düzen doğrulayıcı ├── assets/ │ ├── template-editorial-card.html ← Editoryal tohum (6 tema / 3 tuval) │ ├── template-swiss-card.html ← İsviçre tohum (4 vurgu / 3 tuval) │ ├── magazine-bg-webgl.js ← WebGL mürekkep akışı arka planı │ └── screenshot-backgrounds/ ← 9 ekran görüntüsü sahne arka planı (WebP) │ ├── style-a/ ← 5 Editoryal │ └── style-b/ ← 4 İsviçre └── references/ ├── platform-specs.md ← Platform × çözünürlük × adlandırma ├── style-system.md ← Her iki stil için katı kurallar ve anti-desenler ├── theme-presets.md ← 10 paletin tümü ayrıntılı ├── layout-recipes.md ← 28 düzen iskeleti (M01-M16 + S01-S12) ├── components.md ← Tip / kartlar / boşluk / simgeler ├── background-systems.md ← Mürekkep akışı / ızgara / kağıt katmanları ├── portrait-fill.md ← 3:4 pano için boşluk stratejisi ├── content-planning.md ← Kancalar / sayfa bölmeleri / metin sıkıştırma ├── category-cookbook.md ← 11 Xiaohongshu kategori yönlendirme tablosu ├── image-overlay.md ← Tam kanamalı görsel maskesi + yüz güvenliği kuralları ├── screenshot-treatment.md ← `.frame-shot` yardımcıları + ekran görüntüsü güzelleştirme ├── map-component.md ← `.map-block` MapLibre harita ├── title-shortener.md ← 1:1 kapak için kısa başlık stratejisi ├── production-workflow.md ← Playwright işleme hattı └── qa-checklist.md ← Kalite kontrol listesi ``` ## Temel tasarım ilkeleri 1. **Gürültü yerine sınırlama** — doygun bir akışta sade paletler öne çıkar 2. **Süsleme yerine yapı** — hiyerarşiyi gölgeler veya kartlar değil, tip / kontrast / ızgara taşır 3. **Özgürlük yerine düzenler** — önce seç, sonra uyarla; 28 iskelet dışında sayfa icat etme 4. **Önce kullanıcı görselleri** — alımda A/B/C'yi bir kez sun; kendi çekimlerini tekrar sunma 5. **Maskele + kaçın** — tam kanamalı görseller her zaman bir maske taşır; metin bırakma bölgeleri konuyu (yüzler / ürünler / metin yoğun bölgeler) temizlemelidir 6. **Daha büyük demek daha ince demektir** — İsviçre `.h-xl` boyutu arttıkça → ağırlık azalmalıdır. Editoryal aynı kuralı izler 7. **Otomatik doğrulama yok** — önce kullanıcının bakmasına izin ver, sonra doğrulamadan önce sor; tur başına onlarca saniye tasarruf sağlar 8. **Beceri bir üründür, istem değil** — PRODUCT.md, sürüm numaraları, CHANGELOG, yetenek sınırları içerir 9. **Yerel testler git'te kalmaz** — tüm demolar / duman testleri `local-tests/` altında yaşar, gitignore'da ## Görsel referanslar - *Monocle* / *Kinfolk* / *Cereal* dergi düzenleri ve harf aralığı - Massimo Vignelli / Helvetica Forever / İsviçre Uluslararası Tipografik Stili ızgara sistemleri - Apartamento / The Gentlewoman görsel-metin oranları ve insan portreciliği - Xiaohongshu / Rednote'tan sınırlı-kazanan-akış örnekleri - Guizang'ın sosyal kart pratiği ## Yol haritası - Uzun Editoryal içerik altında tip sınırı uç durumları için daha fazla duman testi - Daha fazla İsviçre veri düzeni (ek grafik iskeletleri) - Görüntü oluşturma sonrası: yerel düzeltmeler yapıp yapmama / tüm görüntüyü yeniden oluşturma konusunda aktif olarak sor - Daha fazla kategoriye özgü önerilen düzen paketleri (şu anda 11'in 7'si uçtan uca güçlü) - Pazar yeri için hazır WorkBuddy sürümü ## Katkıda bulunma Hatalar, düzen sorunları, yeni düzen istekleri — Sorunlar ve PR'ler memnuniyetle karşılanır. Değişiklikler için öncelikler: - Tohum şablonlarını düzenlerken, `references/components.md`'deki yazışma tablosunu da güncelleyin (boyutlar / boşluklar / ağırlıklar) - Düzen eklerken, tam tarifi `references/layout-recipes.md`'ye ekleyin (metin sınırları + minimum yoğunluk) - Tema renkleri eklerken, tohum şablonunun `[data-theme="..."]` bloğunu + `references/theme-presets.md`'yi de güncelleyin - İsviçre kuralları eklerken, `validate-social-deck.mjs` içindeki eşleşen kuralı da güncelleyin - Karşılaştığınız hatalar `references/qa-checklist.md`'ye gider - Testler ve demolar `local-tests/` altında yaşar — beceri kökünü kirletmeyin ## Lisans AGPL-3.0 © 2026 [op7418](https://github.com/op7418) Bu proje **GNU AGPL-3.0** altında lisanslanmıştır. Ana noktalar: 1. **Atıf gerekli** — Telif hakkı bildirimini koruyun 2. **Türevler açık kaynak olmalı** — Herhangi bir değiştirilmiş sürüm, çatal veya yeniden dağıtım, tam kaynak koduyla birlikte AGPL-3.0 (veya uyumlu bir lisans) altında yayınlanmalıdır 3. **Ağ kullanımı dağıtımdır** — Değiştirilmiş bir sürümü yalnızca SaaS / web hizmeti olarak çalıştırsanız ve kodu dağıtmasanız bile, kaynağı yayınlamak zorundasınız (AGPL'yi GPL'den daha katı yapan budur) 4. **Kapalı kaynak, özel mülk veya yalnızca ücretli dağıtım yok** Tam şartlar [`LICENSE`](./LICENSE) içinde. ## FAQ ### Guizang Sosyal Kart Yeteneği nedir? Guizang Sosyal Kart Yeteneği, Claude Kodu, Codex ve benzeri kodlama ajanı ortamları için, makaleler, notlar veya fotoğraflar gibi çeşitli içerik girdilerinden Xiaohongshu döngüleri ve WeChat kapak çiftleri oluşturan bir ajan yeteneğidir ve farklı görsel tasarım sistemleri kullanır. ### Sosyal kartlar oluşturmak için ne tür içerikler kullanabilirim? Sosyal kartlar oluşturmak için makaleler, metinler, ekran görüntüleri, ürün notları, alt yazılar veya fotoğraflar gibi kaynak içerikleri kullanabilirsiniz. Yetenek, görsel olarak çekici çıktılar oluşturmak için çeşitli girdilere uyum sağlar. ### Sosyal kart oluşturma için mevcut iki görsel sistem nelerdir? Yetenek, iki görsel sistem sunar: Hikaye anlatımı, yaşam tarzı ve anlatı içerikleri için 'Editoryal', ve ürün incelemeleri, veri, çerçeveler ve eğitimler için 'İsviçre Uluslararası', ızgara öncelikli bir yaklaşımla karakterize edilir. ### Sosyal kartlarım için özel renkler kullanabilir miyim? Hayır, özel hex değerleri kullanılamaz. Yetenek, görsel bütünlüğü ve kaliteyi korumak için 10 tema ön ayarı (6 Editoryal, 4 İsviçre) sağlar. Tohum şablonundaki data-theme özniteliğini güncelleyerek temaları değiştirebilirsiniz. ### Guizang Sosyal Kart Yeteneği'ni nasıl yüklerim? Bunu \`npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill\` kullanarak veya depoyu ajanınızın beceriler dizinine klonlayarak yükleyebilirsiniz. ### Yetenek İngilizce içeriği destekliyor mu? Evet, yetenek İngilizce içeriği destekler. Hem Editoryal (Playfair Display + Noto Serif) hem de İsviçre (Inter + Helvetica) yazı tipleri Çince ve İngilizceyi kapsar ve düzen iskeletleri dilden bağımsızdır.