img-to-frontend
Img to Frontend
Overview
Use this skill to run an image-first design-to-code workflow for visually appealing awwward winning websites. It must adapt to the user's brief, audience, content model, interaction needs, and brand intent rather than forcing a fixed category or visual trope.
The workflow is intentionally staged:
- Invoke
$imagegento create four distinct website/page design images. - Stop so the user can select the image or images to use as the design reference.
- Translate only the selected image into a precise implementation prompt.
- Build the real page and iterate against screenshots until structure, hierarchy, typography, spacing, color, media treatment, component geometry, interactions, and responsive behavior are close to the reference.
Load references/visual-iteration-checklist.md for design variety, implementation, close visual replication, premium website work, complex UI sections, or repeated visual refinement.
When To Use
Use this skill when the user asks to:
More from am-will/codex-skills
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
1.3Kfrontend responsive design standards
Build responsive, mobile-first layouts using fluid containers, flexible units, media queries, and touch-friendly design that works across all screen sizes. Use this skill when creating or modifying UI layouts, responsive grids, breakpoint styles, mobile navigation, or any interface that needs to adapt to different screen sizes. Apply when working with responsive CSS, media queries, viewport settings, flexbox/grid layouts, mobile-first styling, breakpoint definitions (mobile, tablet, desktop), touch target sizing, relative units (rem, em, %), image optimization for different screens, or testing layouts across multiple devices. Use for any task involving multi-device support, responsive design patterns, or adaptive layouts.
1.2Kcontext7
|
1.2Kplanner
>
1.2Kread-github
|
1.2Kparallel-task
>
1.2K