{
  "markdown": "# Xiaohongshu Images Skill\n\n[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/H2T024VDBG)\n\nA Claude Code skill that transforms markdown, HTML, or text content into beautifully styled HTML pages with AI-generated cover images, then captures them as sequential screenshots at 3:4 ratio for Xiaohongshu posting.\n\n## Features\n\n- **Content Processing**: Accepts markdown, HTML, or plain text content\n- **AI Cover Images**: Generates editorial-style cover illustrations using `/baoyu-cover-image` skill\n- **Styled HTML Output**: Creates beautifully formatted HTML pages with modern typography\n- **Screenshot Capture**: Takes sequential 3:4 ratio screenshots optimized for Xiaohongshu\n- **Smart Text Boundaries**: Ensures no text is cut off in screenshots\n\n## Installation\n\n### Prerequisites\n\n- Python 3.8 or higher\n- Claude Code CLI\n- `/baoyu-cover-image` skill installed in `~/.claude/skills/`\n\n### Setup\n\n1. **Clone or copy this skill to your Claude skills directory:**\n\n```bash\n# Copy to global skills\ncp -r xiaohongshu-images-skill ~/.claude/skills/\n\n# Or symlink for development\nln -s /path/to/xiaohongshu-images-skill ~/.claude/skills/xiaohongshu-images-skill\n```\n\n2. **Install Python dependencies:**\n\n```bash\npip install playwright\nplaywright install chromium\n```\n\n3. **Ensure baoyu-cover-image skill is installed:**\n\n```bash\n# Verify the skill exists\nls ~/.claude/skills/baoyu-cover-image/SKILL.md\n```\n\n## Usage\n\n### Via Claude Code\n\nInvoke the skill in Claude Code:\n\n```\n/xiaohongshu-images\n```\n\nThen provide your content:\n- Paste markdown/HTML content directly\n- Provide a file path: `/path/to/article.md`\n- Provide a URL to fetch content from\n\n### Example\n\n```markdown\n/xiaohongshu-images\n\n# My Article Title\n\nThis is the introduction paragraph explaining the topic...\n\n## Section 1\n\nContent for section 1 with detailed explanation...\n\n## Section 2\n\nMore content here with examples...\n```\n\n### Output\n\nThe skill generates output in `~/Dev/obsidian/articles/<date-title>/`:\n- `xhs-preview.html` - Styled HTML preview page\n- `_attachments/cover-xhs.png` - AI-generated cover image\n- `_attachments/xhs-01.png, xhs-02.png, ...` - Sequential screenshots\n\n## Directory Structure\n\n```\nxiaohongshu-images-skill/\n├── SKILL.md              # Main skill definition\n├── README.md             # This file\n├── prompts/\n│   └── default.md        # Default HTML/CSS styling prompt\n├── scripts/\n│   └── screenshot.py     # Screenshot capture\n└── .gitignore\n\nOutput directory (outside skill folder):\n~/Dev/obsidian/articles/<date>-<title>/\n├── xhs-preview.html          # Styled HTML preview page\n├── imgs/                     # Created by baoyu-cover-image\n│   ├── prompts/\n│   │   └── cover.md          # Cover image prompt\n│   └── cover.png             # Generated cover (moved to _attachments/)\n└── _attachments/             # Obsidian-style attachments folder\n    ├── cover-xhs.png         # Cover image (moved from imgs/cover.png)\n    ├── xhs-01.png            # Screenshot page 1\n    ├── xhs-02.png            # Screenshot page 2\n    └── ...\n```\n\n## Customization\n\n### Custom Prompt Templates\n\nCreate custom styling templates in the `prompts/` directory:\n\n1. Create a new `.md` file (e.g., `prompts/minimal.md`)\n2. Define your HTML/CSS specifications\n3. Invoke with: \"Use the minimal template for this article\"\n\n### Modifying Styles\n\nEdit `prompts/default.md` to customize:\n- Card dimensions and colors\n- Font families and sizes\n- Typography hierarchy\n- Code block styling\n- Responsive breakpoints\n\n## Configuration\n\n### Screenshot Settings\n\nDefault screenshot dimensions (3:4 ratio for Xiaohongshu):\n- Width: 1080px\n- Height: 1440px\n- Scale factor: 2x (Retina quality)\n\nTo modify, edit `scripts/screenshot.py`:\n```python\nSCREENSHOT_WIDTH = 1080\nSCREENSHOT_HEIGHT = 1440\n```\n\n## Scripts\n\n### screenshot.py\n\nCaptures sequential screenshots of HTML pages.\n\n```bash\npython scripts/screenshot.py ~/Dev/obsidian/articles/<date>-<title>/xhs-preview.html\n```\n\nOutput: `~/Dev/obsidian/articles/<date>-<title>/_attachments/xhs-01.png`, `xhs-02.png`, etc.\n\nFeatures:\n- Automatic page scrolling\n- Smart text boundary detection\n- No text cut-off at boundaries\n- 3:4 aspect ratio output\n\n## Troubleshooting\n\n### Cover Image Issues\n\n- Ensure `/baoyu-cover-image` skill is installed and working\n- Check that the skill has proper access to image generation models\n- Try running `/baoyu-cover-image` directly to debug\n\n### Screenshot Issues\n\n- Install Playwright browsers: `playwright install chromium`\n- Check file paths are correct\n- Ensure HTML file is valid and accessible\n\n### Font Loading\n\nIf fonts don't load in screenshots:\n- Increase wait time in `screenshot.py`\n- Check Google Fonts availability\n- Consider using local fonts\n\n## License\n\nMIT License - See LICENSE file for details.\n\n## Related Skills\n\n- `baoyu-cover-image` - Cover image generation (required dependency)\n- `chinese-viral-writer` - Chinese viral content creation\n- `wechat-article-formatter` - WeChat article formatting\n- `wechat-article-publisher` - WeChat publishing automation\n",
  "bytes": 5055,
  "sha": "f5068e3c4d8567466870cc986d71506b3cfdbb2c27a4c209f83e4a9072af03a3",
  "repo_slug": "iamzifei/xiaohongshu-images-skill",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/skl_iamzifei_xiaohongshu_images_skill_xiaoho_ebf77336/readme"
}