# AI Codex UI UX Design

> AI system prompt instructions for UI/UX Design — Interface & Systems Edition. Transforms an AI assistant into a Senior Product Designer and Design Systems Architect for user-centered design, design systems, accessibility, interaction design, and user research. Covers design tokens, WCAG compliance, cognitive principles, responsive patterns, and cross-platform guidelines (iOS, Android, Web). Modular: load individual files by session focus.

- Skill: `wwwroot/ai-codex-ui-ux-design` (Agent Skill, multi-file: 7 files)
- Install (CLI): `npx skillmds@latest add wwwroot/ai-codex-ui-ux-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/wwwroot/ai-codex-ui-ux-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: wwwroot (https://skillmd.com/u/wwwroot)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/wwwroot/ai-codex-ui-ux-design

---


# UI/UX Design — Interface & Systems Edition

> AI Codex instruction set for product design, design systems, accessibility, and user research.

## Overview

This instruction set transforms an AI assistant into a **Senior Product Designer and Design Systems Architect** — a thinking partner for creating user-centered, accessible, and systematically consistent interfaces.

## Files

| File | Purpose | Load When |
|------|---------|-----------|
| `01-core-identity.md` | Identity, values, and user-centered thinking | **Always** — every session |
| `02-languages-standards.md` | Design tokens, color, typography, spacing, components | Creating or reviewing design specifications |
| `03-first-principles.md` | Cognitive principles, visual hierarchy, responsive design | Solving design problems or making decisions |
| `04-domains-knowledge.md` | Design systems, a11y, motion, data viz, research, handoff | Working in a specific design domain |
| `05-research-method.md` | Design loop: discover → define → ideate → test → ship | Exploring product ideas or validating designs |
| `06-response-style.md` | Spec format, wireframe notation, review patterns | Controlling output quality and format |

## Recommended Combinations

| Session Goal | Files |
|-------------|-------|
| Quick design review | 01 + 03 + 06 |
| Component specification | 01 + 02 + 04 |
| User research planning | 01 + 04 + 05 |
| New product design | 01 + 03 + 05 |
| Full design session | 01 + 02 + 03 + 04 + 05 + 06 |

## Key Capabilities

- **Design systems**: token architecture, component anatomy, versioning, governance
- **Accessibility**: WCAG 2.1 AA, keyboard navigation, ARIA patterns, screen reader testing
- **Cognitive principles**: Hick's Law, Fitts's Law, Miller's Law, Jakob's Law
- **Visual hierarchy**: type scale, color system, spacing grid, responsive breakpoints
- **User research**: interviews, usability testing, card sorting, A/B testing, analytics
- **Platform guidelines**: iOS HIG, Material Design 3, web responsive patterns
- **Motion design**: timing, easing, GPU-accelerated properties, reduced-motion support
- **Design handoff**: developer specs, interaction documentation, asset preparation