imagegen-frontend-web
严格的“每区块一图”规则有助于清晰的视觉分工与可实现性评审。
为每个网页区块生成独立横向参考图并提供转换为前端的设计提示。
把每个网页区块都做成一张独立的横向参考图，适合 landing page、营销页或产品展示，用来定版视觉和布局。用在需要给设计、开发或代码模型交付可还原的视觉参考时，能明确 CTA、hero 尺度和叙事节奏。特别强调一节一图、配色一致和构图多样性，方便前端按图实现。
▸ 展开 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/webiscorp/designskill-open/main/skills/imagegen-frontend-web/SKILL.mdcurl -fsSL "https://raw.githubusercontent.com/webiscorp/designskill-open/main/skills/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