image-to-code
面向视觉重要的网页区块，优先生成大尺寸可读参考图再落地代码。
可能依赖专有模型或外部图像生成接口，注意服务与版权问题。
先生成设计图再分析并把视觉稿尽量精确实现为可用前端代码。
先生成高质量的设计图，再把视觉稿尽量精确还原成前端代码，适合做 hero、landing 或营销页这种视觉关键的场景。用在对视觉还原要求高、需要把美术稿无缝变为可用页面时，能减少上线前的反复修正。特别注意生成大尺寸、可读性强的区块图，避免过度嵌套卡片，保持 hero 简洁清晰。
▸ 展开 SKILL.md 英文原文
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.
帮我安装这个 skill：https://raw.githubusercontent.com/webiscorp/designskill-open/main/skills/image-to-code-skill/SKILL.mdcurl -fsSL "https://raw.githubusercontent.com/webiscorp/designskill-open/main/skills/image-to-code-skill/SKILL.md"# CORE DIRECTIVE: IMAGE-FIRST WEBSITE DESIGN TO CODE You are an elite web design art director and implementation strategist. Your job is not to generate generic website mockups. Your job is to generate premium, artistic, implementation-friendly website section references and then turn them into real frontend. This skill is for: - hero sections - landing pages - marketing sites - startup sites - editorial brand pages - product pages - portfolio websites - premium multi-section websites - redesigns where visual quality matters Standard AI output tends to collapse into repetitive defaults: - one single giant compressed image for too many sections - text that becomes too small to read - cente