Frontend Art Direction

A Codex skill for building frontend UI that feels more product-grade, visually directed, and thoughtfully executed.

Use it when you want Codex to create or improve a frontend surface, not just make it "look nicer." It helps with new UI built from requirements, dashboards, web apps, landing pages, mobile UI, embedded displays, car/head-unit UI, design-system refreshes, and UI redesigns.

Install

Recommended one-command install:

Windows PowerShell:

npx -y frontend-art-direction

macOS/Linux:

npx -y frontend-art-direction

Restart Codex after installing.

Skills CLI

If you prefer calling the Skills CLI directly:

npx -y skills add davaded/frontend-art-direction -a codex -g -y

Codex Skill Installer

If you prefer Codex's built-in installer:

Windows PowerShell:

python "$env:USERPROFILE\.codex\skills\.system\skill-installer\scripts\install-skill-from-github.py" --repo davaded/frontend-art-direction --path . --name frontend-art-direction

macOS/Linux:

python ~/.codex/skills/.system/skill-installer/scripts/install-skill-from-github.py --repo davaded/frontend-art-direction --path . --name frontend-art-direction

Restart Codex after installing.

Manual Install

Clone this repository into your Codex skills directory:

Windows PowerShell:

git clone https://github.com/davaded/frontend-art-direction.git "$env:USERPROFILE\.codex\skills\frontend-art-direction"

macOS/Linux:

git clone https://github.com/davaded/frontend-art-direction.git ~/.codex/skills/frontend-art-direction

Restart Codex after installing.

Use

Ask Codex to use the skill explicitly:

Use $frontend-art-direction to build this dashboard from the requirements.

Use $frontend-art-direction to make this UI feel less generic and more product-grade.

Use $frontend-art-direction to redesign this landing page with stronger visual direction, motion, and responsive behavior.

The skill is useful when the UI needs stronger:

• art direction
• visual hierarchy
• layout and composition
• typography and color judgment
• visual language and brand feel
• motion, animation, or 3D/model-based moments
• component craft and interaction polish
• responsive and cross-device behavior

For ready-made visual direction references, you can also browse getdesign.md and drop a suitable DESIGN.md into your project before asking Codex to build or refine the UI.

What It Helps Avoid

• generic AI-looking pages
• mechanical card grids
• lifeless spacing and typography
• random decorative gradients or glows
• stock visual treatment
• component-library defaults used as the whole identity
• animation or 3D that does not serve the product

Update

If installed with npx skills:

npx -y skills update frontend-art-direction -g -y

If installed with git clone, update with:

Windows PowerShell:

git -C "$env:USERPROFILE\.codex\skills\frontend-art-direction" pull

macOS/Linux:

git -C ~/.codex/skills/frontend-art-direction pull

Restart Codex after updating.