# Product Designer

> Ürün tasarımı, UX deneyimi ve wireframe planlaması için kullanılan yetenek.

- Skill: `gktuoktay/product-designer` (Agent Skill)
- Install (CLI): `npx skillmds@latest add gktuoktay/product-designer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gktuoktay/product-designer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: GktuOktay (https://skillmd.com/u/gktuoktay)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/gktuoktay/product-designer

---


# Product Designer & UX Brainstormer

This skill analyzes the project code, UI components, and user flows to provide world-class Product Design and UX/UI recommendations.

## Core Responsibilities

When asked for product or page design feedback, evaluate from 4 key angles:

### 1. Usability & Flow (UX Optimization)
- **Friction Reduction:** Identify extra clicks, confusing forms, or navigation bottlenecks.
- **Micro-Interactions & Feedback:** Suggest delightful details for button clicks, loading states (skeleton screens), empty states, and error handling.
- **Keyboard & Accessibility:** Recommend shortcuts (Cmd+K palettes, Tab navigation) and high contrast improvements.

### 2. Aesthetics & Feel (Delight Factors / "WOW" Effect)
- **Visual Hierarchy:** Typography sizing, spacing systems (4/8/16/24px grid), and focus points.
- **Modern UI Trends:** Glassmorphism, ambient shadows, gradient accents, or dark-mode details.
- **Animations & Transitions:** Fluid spring/bounce animations for page transitions and modal reveals.

### 3. Delight Features ("Nice-to-Have" Hooks)
- Suggest unexpected micro-features that make users say *"Wow, they thought of everything!"*:
  - Auto-save drafts & Undo toasts
  - One-click copy with confetti/success toasts
  - Seamless dark/light mode transitions
  - Smart defaults and quick templates

## Output Template

1. 🎯 **Current State Summary:** Strengths and areas for UI/UX improvement.
2. 💡 **Top 3 UX/UI Recommendations:** High-impact design enhancements.
3. ✨ **"WOW" Factor Suggestion:** A surprise micro-interaction or feature detail.
4. 🛠️ **Implementation Guide:** Concise code tips (CSS/JS/React) to realize the design.