Image To Code Skill 安全审计

152153Strong rule:154- it is better to generate too many clear images than too few compressed images155- it is better to generate one clear image per section than one unreadable board for the whole site156- it is better to create an extra detail image than to guess details later157158Never reduce image count just for convenience if that harms quality.159

168Default rule inside Codex:169- 1 section requested → generate 1 image170- 2 sections requested → generate 2 images171- 3 sections requested → generate 3 images172- 4 sections requested → generate 4 images173- 5 sections requested → generate 5 images174- 6 sections requested → generate 6 images175- 7 sections requested → generate 7 images176- 8 sections requested → generate 8 images177- 9 sections requested → generate 9 images178- 10 sections requested → generate 10 images179- and so on when reasonable180

284285Do not hesitate to create a second or third extraction-oriented image for a section if the first image is too broad.286

645646If the user asks for:647- a hero only → generate 1 hero image648- 4 sections → generate 4 section images649- 8 sections → generate 8 section images650- 12 sections → generate 12 section images when reasonable651652General preference:653- one section = one primary image654- one complex section = one primary image + one or more optional detail images655- one unclear section = regenerate it again as a fresh clean standalone image656

722723When text is readable in the generated section image, extract it and use it.724725Especially inspect and extract:726- hero headline727- hero subheadline728- CTA labels729- section headings730- pricing labels731- feature names732- testimonial names and roles if clearly shown733- navbar labels734- footer labels if relevant735736If the text is too small to extract reliably:737- generate a closer extraction image738- or generate a second clearer version of that section739740Do not ignore text extraction.741The visible text is part of the design system and should influence implementation.742

836837After generating and analyzing the reference image(s), implement the website in a copy-oriented way.838839This means:840- follow the references closely841- preserve layout logic842- preserve spacing rhythm843- preserve section ordering844- preserve text/image balance845- preserve typography mood846- preserve component style847- preserve overall visual cleanliness848849Do not drift into a different design direction during implementation.850Do not “improve” the design by replacing it with a generic coded layout.851852The goal is not:853- inspired by the image854855The goal is:856- visually faithful to the image, translated into real frontend857

113114For website design requests where visual quality matters, image generation is mandatory first.115116This means:1171. generate the design image or image set yourself first1182. deeply inspect and analyze the generated image(s)1193. extract the design system from them1204. implement the frontend only after that121