{"skill":{"slug":"macaron-card-generator","displayName":"Macaron Card Generator","summary":"Generate beautiful macaron-color cartoon illustration-style card images from text content. Supports various types such as book recommendation cards, concept...","description":"---\nname: macaron-card-generator\ndescription: Generate beautiful macaron-color cartoon illustration-style card images from text content. Supports various types such as book recommendation cards, concept cards, quote cards, and comparison cards, with multiple aspect ratios including 3:4, 9:16, and 1:1.\n---\n\n# Macaron Card Generator\n\nGenerate beautiful card images from text content with one click, in a macaron-color cartoon illustration style.\n\n## Trigger Words\n\nGenerate card, make a card, draw a card, generate image, book card, recommendation card, concept card, quote card, comparison card, create an image.\n\n## Workflow\n\n1. Understand user requirements → Confirm card type, content, and aspect ratio\n2. Construct JSON content → Organize data by card type (see references/design_guide.md for field descriptions)\n3. Run `scripts/generate_card.py` → Generate HTML file\n4. Screenshot with Playwright/CDP → Render HTML as PNG\n5. Send PNG to user\n\n## Quick Start\n\n```powershell\npython scripts/generate_card.py \\\n  --type book \\\n  --content '{\"title\":\"The Little Prince\",\"author\":\"Antoine de Saint-Exupéry\",\"recommendation_reason\":\"...\",\"key_takeaway\":\"...\",\"rating\":\"5\",\"tags\":[\"Classic\"],\"ratio\":\"3:4\"}' \\\n  --output card.html\n```\n\nThen render `card.html` as a PNG using a browser screenshot tool.\n\n## Card Types\n\n| Type | --type | Description |\n|------|--------|-------------|\n| Book Recommendation Card | `book` | Title, author, rating, recommendation reason, quote tags |\n| Concept Card | `concept` | Concept name, definition, examples, related concepts |\n| Quote Card | `quote` | Quoted text, author, source, background |\n| Comparison Card | `compare` | Comparison topic, characteristics of both sides, conclusion |\n\n## Design System\n\nAll cards follow the macaron-color cartoon illustration style:\n- Soft pastel gradient backgrounds + white rounded card\n- Dashed double borders simulating a hand-drawn feel\n- Decorative circle, star, and polka dot elements\n- Each card type is automatically matched with a color scheme\n\nSee **references/design_guide.md** for detailed color palettes, ratio parameters, and JSON field descriptions.\n\n## Screenshot Output\n\nThe generated HTML needs to be rendered as a PNG. Recommended methods:\n\n1. **Playwright** (preferred): Use the playwright MCP tool, set the viewport to the width and height output by the script, then take a screenshot\n2. **xbrowser skill**: Open the HTML and take a full-page screenshot\n3. **browser tool**: If the HTML is accessible via HTTP, use the browser to take a screenshot\n\nOnce the screenshot is taken, the final PNG card image is ready and can be sent directly to the user.","tags":{"latest":"1.0.0"},"stats":{"comments":0,"downloads":348,"installsAllTime":13,"installsCurrent":0,"stars":0,"versions":1},"createdAt":1778203743663,"updatedAt":1778492876503},"latestVersion":{"version":"1.0.0","createdAt":1778203743663,"changelog":"- Initial release of macaron-card-generator.\n- Generate stylish macaron-color cartoon-style card images from text content.\n- Supports multiple card types: book recommendation, concept, quote, and comparison cards.\n- Offers various aspect ratios, including 3:4, 9:16, and 1:1.\n- Quick workflow: accepts structured data, generates HTML, renders to PNG with browser tools.\n- Features a distinctive design system with pastel gradients, playful borders, and decorative elements.","license":"MIT-0"},"metadata":null,"owner":{"handle":"openlark","userId":"s1727wv2g20pc729snzcm4nf8183hy72","displayName":"OpenLark","image":"https://avatars.githubusercontent.com/u/260858787?v=4"},"moderation":null}