# Openai Frontend Design

Use for new frontend applications, dashboards, games, creative websites, hero sections...

- Repository: https://github.com/fcakyon/claude-codex-settings (1195 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add fcakyon/claude-codex-settings --skill openai-frontend-design -g -a claude-code -y`
Codex: `npx skills add fcakyon/claude-codex-settings --skill openai-frontend-design -g -a codex -y`
Cursor: `npx skills add fcakyon/claude-codex-settings --skill openai-frontend-design -g -a cursor -y`
Gemini CLI: `npx skills add fcakyon/claude-codex-settings --skill openai-frontend-design -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add fcakyon/claude-codex-settings`

## Description

Use for new frontend applications, dashboards, games, creative websites, hero sections, and visually driven UI from scratch, or when the user explicitly asks for a redesign/restyle/modernization. Builds from clean, airy, high-taste, readable image-generated concept design with section-specific references, faithful implementation, and browser testing.

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

# Frontend App Builder

For interface copy and supporting text, read and apply the installed `writing-guidelines` skill.
For rendered UI testing and debugging, use the installed `frontend-testing-debugging` skill.

Use this skill to create polished frontend apps, dashboards, games, creative websites, hero sections, redesigns, and other visually driven UI. Act first as a senior front-end designer, then as an engineer implementing an approved design spec.

## Core Standard

The two priorities of this skill outrank everything else:

1. Create enough great-looking Image Gen design first: clean, airy, distinctive, complete, readable, section-specific when needed, and not repetitive by default.
2. Do not stop until the accepted design and browser implementation match 10/10. Keep fixing visual, interaction, responsive, asset, and typography mismatches until `view_image` comparison would pass agency sign-off.

## Hard Rules

The rest: https://github.com/fcakyon/claude-codex-settings/blob/HEAD/plugins/frontend-design-skills/skills/openai-frontend-design/SKILL.md