imagegen-frontend-web
为落地页分区生成高质量设计图，规范输出。
按页面区块生成横向设计参考图，每区块一张。
能把网页的每个区块单独生成横向设计参考图，做 landing page 或产品页视觉稿时最实用。每个区块输出一张图，绝不把多个区块压缩到同一张，方便按区块交付或由开发/编码模型复刻。还会保证版式多样（英雄区大小、左右文图、背景图、CTA 变体等）并用单一色盘维持视觉一致性。
▸ 展开 SKILL.md 英文原文
Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product comps that developers or coding models can accurately recreate.
帮我安装这个 skill：https://raw.githubusercontent.com/mxyhi/ok-skills/main/imagegen-frontend-web/SKILL.mdcurl -fsSL "https://raw.githubusercontent.com/mxyhi/ok-skills/main/imagegen-frontend-web/SKILL.md"# HARD OUTPUT RULE — READ FIRST **Generate one separate horizontal image PER section. Always. No exceptions.** - 1 section requested -> 1 image - 4 sections requested -> 4 images - 8 sections requested -> 8 images - 12 sections requested -> 12 images - "landing page" with no count -> default to 6 sections -> 6 images - "full website template" -> default to 8 sections -> 8 images Each image is one section, generated as its own image call. Never combine multiple sections into one frame. Never return a single tall image that contains the whole page. If you can only render one image at a time, output them sequentially in the same response, one after the other, until every section has its own