editorial-card-generator
starsforks
How to install editorial-card-generator?
founddream/editorial-card-generator-skill/editorial-card-generator
$npx -y skills add FoundDream/editorial-card-generator-skill --skill editorial-card-generatorTransform text content into modern editorial-style HTML5 informational posters (multiple cards, support PNG export). Use cases: users need to create infographics, knowledge cards, social media posters, or mention keywords like "generate poster", "create cards", "information visua
SKILL.md
| 1 | # Editorial Style Informational Poster Generator |
| 2 | |
| 3 | ## Task |
| 4 | |
| 5 | Transform user-provided text content into a set of 3-6 high-aesthetic, magazine-style HTML5 informational posters (adaptively based on content). |
| 6 | |
| 7 | ## Design Specifications |
| 8 | |
| 9 | ### Core Style |
| 10 | - **Style**: Modern Editorial + Swiss Style (Swiss Internationalism) |
| 11 | - **Visual**: Order, high contrast, large typography, print media texture |
| 12 | - **Size**: Strictly locked to width: 600px, height: 800px (3:4 ratio) |
| 13 | |
| 14 | ### Color Scheme |
| 15 | - **Bg (Paper)**: #f2efe9 (off-white/warm gray) |
| 16 | - **Text (Ink)**: #1a1a1a (dark gray) |
| 17 | - **Accent (Emphasis)**: #d95e00 (Hermès orange) - allowed to fine-tune based on content theme |
| 18 | - **Visual Rhythm**: Cards should have "light-light-dark-light" or "light-dark-light" rhythmic variation |
| 19 | |
| 20 | ### Font Stack (CDN) |
| 21 | Include Google Fonts in HTML Head: |
| 22 | ```html |
| 23 | <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@700;900&family=Noto+Sans+SC:wght@400;500;700&family=Oswald:wght@500;700&display=swap" rel="stylesheet"> |
| 24 | ``` |
| 25 | |
| 26 | ### Texture Requirements |
| 27 | - **SVG Noise**: Global overlay of feTurbulence noise with opacity 0.05~0.08, blend mode using multiply |
| 28 | - **Shadow**: Cards need unified deep shadow (0 25px 80px rgba(0, 0, 0, 0.4)), creating floating effect |
| 29 | |
| 30 | ## Pagination Logic |
| 31 | |
| 32 | Analyze the word count and logical structure of the [Input Content] to automatically determine the number of cards (usually 3-6): |
| 33 | |
| 34 | ### Card 1: The Cover |
| 35 | - **Content**: Extracted main title + very short subtitle/tagline |
| 36 | - **Design**: Huge font size, minimalist, visual impact first |
| 37 | - **Key Elements**: Extra-large numbers/percentages, short powerful titles |
| 38 | |
| 39 | ### Card 2 ~ N-1: The Content |
| 40 | - **Splitting Principle**: Don't crowd! One core point/one chapter = one card |
| 41 | - **List Content**: Use "list layout" (01/02/03) |
| 42 | - **Deep Analysis**: Use "image-text mixed layout" (left text right decoration, or top text bottom summary) |
| 43 | - **Key Emphasis**: Must include a **Dark Mode card** to showcase core data, quotes, or most important concepts |
| 44 | |
| 45 | ### Card N: The Outro |
| 46 | - **Content**: Concluding statement, CTA (Call to Action) or simple closing |
| 47 | - **Design**: More whitespace, steady ending |
| 48 | |
| 49 | ## Output Requirements |
| 50 | |
| 51 | ### HTML Structure |
| 52 | 1. Output a single HTML file containing all CSS/JS |
| 53 | 2. Use Tailwind CSS + FontAwesome (CDN) |
| 54 | 3. Layout: Use flex-wrap to arrange all cards horizontally |
| 55 | 4. **CSS must add `flex-shrink: 0` to cards to prevent compression deformation** |
| 56 | |
| 57 | ### Required Features |
| 58 | - Integrate html2canvas library (CDN: `https://html2canvas.hertzen.com/dist/html2canvas.min.js`) |
| 59 | - Provide "Export All Cards" button: |
| 60 | - Position: Fixed positioning in top-right corner |
| 61 | - Style: Orange button with download icon |
| 62 | - Click to export each card as high-definition PNG (2x resolution) |
| 63 | - Show export progress indicator |
| 64 | - File naming format: `{topic}-card-{number}.png` |
| 65 | |
| 66 | ## Implementation Steps |
| 67 | |
| 68 | 1. **Analyze Content**: Extract key information, data points, core arguments |
| 69 | 2. **Determine Card Count**: Decide 3-6 cards based on content length and structure |
| 70 | 3. **Design Each Card**: |
| 71 | - Card 1: Cover, highlight most shocking numbers/titles |
| 72 | - Card 2-N-1: Content expansion, at least one dark card for data |
| 73 | - Card N: Summary or question |
| 74 | 4. **Write HTML**: |
| 75 | - Import Google Fonts, Tailwind CSS, FontAwesome, html2canvas |
| 76 | - Write complete CSS (including SVG noise, card styles, export button) |
| 77 | - Implement all card HTML structures |
| 78 | - Add JavaScript code for export functionality |
| 79 | 5. **Output File**: Save as `index.html` or specified path |
| 80 | |
| 81 | ## Technical Reference |
| 82 | |
| 83 | ### SVG Noise Implementation |
| 84 | ```html |
| 85 | <svg style="position: absolute; width: 0; height: 0"> |
| 86 | <filter id="noise"> |
| 87 | <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/> |
| 88 | </filter> |
| 89 | </svg> |
| 90 | <!-- Apply in card --> |
| 91 | <svg style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; filter: url(#noise); opacity: 0.06;"></svg> |
| 92 | ``` |
| 93 | |
| 94 | ### Export Button Style |
| 95 | ```css |
| 96 | .export-btn { |
| 97 | position: fixed; |
| 98 | top: 30px; |
| 99 | right: 30px; |
| 100 | background: #d95e00; |
| 101 | color: #f2efe9; |
| 102 | border: none; |
| 103 | padding: 14px 28px; |
| 104 | font-size: 15px; |
| 105 | font-weight: 600; |
| 106 | border-radius: 8px; |
| 107 | cursor: pointer; |
| 108 | box-shadow: 0 4px 20px rgba(217, 94, 0, 0.4); |
| 109 | transition: all 0.3s ease; |
| 110 | z-index: 1000; |
| 111 | } |
| 112 | ``` |
| 113 | |
| 114 | ## Notes |
| 115 | |
| 116 | - Maintain visual simplicity and elegance, avoid over-decoration |
| 117 | - Ensure text is clear and readable, with obvious font size contrast |
| 118 | - Control opacity and contrast for dark cards |
| 119 | - Export functionality must be stable and reliable, avoid memory leaks |
| 120 | - Code should be standardized and clean, easy to modify later |
| 121 | - Card content should not be crowded; whitespac |
People who liked this also viewed
6 picksType
- seo-auditWhen the user wants to audit, review, or diagnose SEO issues on their site. Also use when the user mentions "SEO audit," "technical SEO," "why am I not ranking," "SEO issues," "on-page SEO," "meta tagSkillsJul 2026
- copywritingWhen the user wants to write, rewrite, or improve marketing copy for any page — including homepage, landing pages, pricing pages, feature pages, about pages, or product pages. Also use when the user sSkillsJul 2026
- marketing-psychologyWhen the user wants to apply psychological principles, mental models, or behavioral science to marketing. Also use when the user mentions 'psychology,' 'mental models,' 'cognitive bias,' 'persuasion,'SkillsJul 2026
- content-strategyWhen the user wants to plan a content strategy, decide what content to create, or figure out what topics to cover. Also use when the user mentions "content strategy," "what should I write about," "conSkillsJul 2026
- programmatic-seoWhen the user wants to create SEO-driven pages at scale using templates and data. Also use when the user mentions "programmatic SEO," "template pages," "pages at scale," "directory pages," "location pSkillsJul 2026
- marketing-ideasWhen the user needs marketing ideas, inspiration, or strategies for their SaaS or software product. Also use when the user asks for 'marketing ideas,' 'growth ideas,' 'how to market,' 'marketing stratSkillsJul 2026
