Image First Frontend

Generate a polished frontend reference screenshot through a configurable GPT-image-2-compatible generations endpoint, save and show versioned previews inside the project, revise selected previews through a configurable /images/edits endpoint, and reproduce only the user-approved design as functional frontend code with high visual fidelity. Use when Codex is asked to design, build, restyle, or recreate a web page, application screen, dashboard, landing page, or UI component through an image-first workflow, design approval loop, screenshot-driven implementation, pixel matching, or a 1:1 frontend

6 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add jinshiqwq/image-first-frontend --skill image-first-frontend

Manual install

git clone --depth 1 https://github.com/jinshiqwq/image-first-frontend.git /tmp/image-first-frontend
mkdir -p ~/.claude/skills
cp -r /tmp/image-first-frontend/. ~/.claude/skills/image-first-frontend

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Image-first Frontend

Generate a visual target before writing UI code. Let the user approve, edit, or redo versioned previews, then recreate the approved target at its exact viewport and adapt it responsively without using the screenshot as the page itself.

## Preconditions

1. Read `scripts/generate_reference.py` before the first API call.
2. Configure `GENERATIONS_API_URL`, `EDITS_API_URL`, and `API_KEY` at the top of the script. The URLs may point to any compatible provider; no OpenAI connection is required. Require the generations URL for a new design and the edits URL only when revising an existing preview.
3. Work inside the user's existing project and preserve its framework, design system, dependency choices, and local conventions.
4. Save every preview inside the current project under `design-previews/<page>/`. Use numbered files such as `reference-v01.png`; the helper refuses to overwrite an existing output.
5. Make one billable generation or edit at a time. Make another request only after technical failure or an explicit user request to revise or redo the design.

## Workflow

### 1. Establish the brief

- Inspect the repository, relevant route, existing styles, assets, and run commands.
- Identify the page purpose, audience, required content, required states, and target viewport. Default to `1536x1024` for a desktop page when no viewport is specified.

Read the full skill on GitHub

Details

Skill name: image-first-frontend
Repository: jinshiqwq/image-first-frontend
License: MIT
Repo updated: 10 July 2026

FAQ

What does the Image First Frontend skill do?

How do I install the Image First Frontend skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add jinshiqwq/image-first-frontend --skill image-first-frontend. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Image First Frontend popular?

It lives in jinshiqwq/image-first-frontend, which has 6 GitHub stars and 0 forks.

Related skills

Interface Polish

Tsavsar/interface-polish

A checklist of concrete UI craft rules covering border radius, shadows, animation timing, typography, color tokens, accessibility, layout spacing, and microcopy. Use this skill whenever building, reviewing, or refining any web UI, component, page, landing page, or design system code, even if the user only says "make it look better", "polish this", "review my component", or asks for a button, menu, modal, form, or any frontend work. Also use it when writing UI copy like button labels, empty states, or confirmation dialogs. Distilled from the interfaces.dev cheat sheet.

Frontend & Design

Elementor Pro Designer Skill

jainshwetank/elementor-pro-designer-skill

Use this skill whenever helping someone build, design, or troubleshoot layouts in Elementor Pro V4 using the visual editor. Triggers on ANY mention of Elementor, page builder, Flexbox widget, Div block, section layout, widget configuration, responsive breakpoints, dark mode, scroll animations, Interactions tab, Variables Manager, Class Manager, Custom Code snippets, or any visual design work inside the Elementor panel. Also trigger when someone asks how to position elements, set spacing, apply typography, configure dark mode, prevent FOUC, or build scroll-triggered effects in Elementor. ALWAYS

Frontend & Design

Oh My Design

favorPotato/oh-my-design

Use this skill when the user asks to design / mock up / prototype a UI, iterate on visual design, compare visual candidates, or explore visual approaches before implementation. Triggered by phrases like "design a UI", "mockup", "prototype the screen", "give me 3 visual options", "make it look like…", or any request that is fundamentally about look-and-feel rather than business logic. The skill writes React 18 prototypes under `<cwd>/.design/<slug>/`, hands the user a Tweaks panel to pick / iterate, and returns the selection plus a self-describing manifest the next agent can implement against.

Frontend & Design

Cockpit UI Skill

KrasAndy/cockpit-ui-skill

暗色 cockpit 风格的 UI/UX 词库与 cheatsheet。Claude 在开发能源 / 工业驾驶舱、暗色 dashboard、B 端 SaaS 前端时加载本 skill,会按 cheatsheet 中的三主题 token、字号 / 间距 / 圆角 / 阴影梯度、6 个核心组件 API(LayoutShell / SplitPane / ResponsiveGrid / DataTable / ThemeProvider / I18nProvider)以及实际可导出的 React + TypeScript 代码。

Frontend & Design

Qiaomu Tldraw Skill

joeseesun/qiaomu-tldraw-skill

Official-first Qiaomu tldraw creation skill and workflow for building, editing, recreating, scripting, linting, testing, migrating, and packaging tldraw canvases or tldraw SDK apps with the official CLI and official LLM-friendly documentation. Use when the user asks to 画 tldraw、复刻成可编辑画布、制作流程图/信息图/课件、创建交互或动画画布、写 custom ShapeUtil/document script、检查 .tldraw 文件， or scaffold and migrate a tldraw React application using official sources only.

Frontend & Design

Build Your Own Component

ethankongee/build-your-own-component

Generate a complete UI component library with 24 components (Accordion through Tooltip). Supports React or Vanilla JS. Can produce 1-3 design variations for side-by-side comparison. Use when the user wants to create a component library, design system, UI kit, or build reusable UI components.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.