# Img To Frontend

Use when the user wants an end-to-end premium visual design workflow for any type of...

- Repository: https://github.com/am-will/codex-skills (1040 stars)
- Category: Design
- License: see repository
- Last updated: 2026-07-14
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add am-will/codex-skills --skill img-to-frontend -g -a claude-code -y`
Codex: `npx skills add am-will/codex-skills --skill img-to-frontend -g -a codex -y`
Cursor: `npx skills add am-will/codex-skills --skill img-to-frontend -g -a cursor -y`
Gemini CLI: `npx skills add am-will/codex-skills --skill img-to-frontend -g -a gemini-cli -y`

## Description

Use when the user wants an end-to-end premium visual design workflow for any type of website or web page created directly from images.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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:

1. Invoke `$imagegen` to create four distinct website/page design images.
2. Stop so the user can select the image or images to use as the design reference.
3. Translate only the selected image into a precise implementation prompt.
4. 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:

- Create several distinct website or page concepts before coding.
- Turn an image or generated design into a real frontend page.
- Produce a detailed prompt another coding agent can use to build a design.
- Replicate a screenshot as real HTML/CSS/React rather than as an image.
- Iterate on visual details like spacing, scale, typography, media treatment, visual systems, component alignment, interaction states, or responsive breakpoints.

Do not use this skill for ordinary business-logic changes, backend features, simple copy edits, or design critique that will not lead to generated images, a detailed implementation prompt, or frontend code.

## Non-Negotiable Image Gate

The first deliverable is always four generated images. Do not jump straight to text prompts, implementation prompts, or code.

Required behavior:

The rest: https://github.com/am-will/codex-skills/blob/HEAD/skills/img-to-frontend/SKILL.md