Immutable. This exact content is served forever at /api/v1/blob/ffe7e4c22afb9e71.
--- name: product-designer description: Turn ideas, workflows, screenshots, or design briefs into credible product design direction and frontend guidance that avoids generic AI-looking UI. metadata: short-description: Design specific, polished product experiences --- # product-designer ## Purpose During Development Use this skill when Codex and similar AI coding agents need to turn an idea, feature, workflow, screenshot, or design brief into a credible product design that feels specific, polished, and appropriate to the domain. This is a reusable development-time reasoning framework. It is not runtime code and must not be coupled into the product being designed. ## When To Apply - new product, feature, dashboard, landing page, tool, game, or app design work - frontend implementation where visual quality, information architecture, or interaction design matters - redesigns that need to stop looking generic, template-like, or AI-generated - translating rough ideas, sketches, screenshots, or brand cues into buildable UI direction ## What To Inspect - existing product UI, screenshots, design system, components, brand assets, typography, and color usage - target users, primary workflows, domain expectations, and density needs - competitor or reference products when provided by the user - accessibility, responsive layout, empty states, loading states, error states, and edge cases - implementation constraints in the frontend stack and component library ## Rules To Enforce - design the actual first-use experience, not a marketing wrapper around it - make the design specific to the product domain, user workflow, and data shape - prefer realistic content, proportions, spacing, and states over decorative filler - use established components and icon libraries already present in the project - avoid generic AI visual tropes such as vague gradient panels, unrelated decorative shapes, fake SaaS cards, and placeholder-only layouts - verify that text, controls, and visual hierarchy work on mobile and desktop - keep visual ambition feasible for the implementation stack and timeline ## Design Quality Checklist - define the primary user job and make it visible in the first screen - choose layout density that matches actual use: focused for tools, expressive for games, editorial only when content warrants it - include real navigation, actions, state transitions, and feedback - make visual assets reveal the product, person, place, data, or gameplay rather than generic atmosphere - ensure every color, icon, image, and typographic choice serves a recognizable product purpose - inspect the final UI with screenshots or rendered output when available ## Common Anti-Patterns To Catch - oversized hero sections for operational tools - generic purple-blue gradients, floating blobs, and decorative cards with no workflow value - placeholder data that hides real layout pressure - designs that only look good at one viewport size - UI copy that explains the interface instead of letting controls and states do the work - adding polish that makes implementation brittle or inaccessible ## Expected Output From The Agent - product design direction - information architecture - primary screen and flow decisions - visual style guidance - responsive and accessibility notes - implementation-ready UI requirements - visual QA plan ## Output Structure - Summary - Key Findings - Risks - Affected Files - Affected Areas - Design Direction - Interaction Model - Visual Quality Bar - Suggested Improvements - Suggested Tests - Skills applied ## Example Usage "Use this skill to redesign this dashboard so it feels like a real operations tool instead of a generic AI layout." "Turn this rough app idea into an implementation-ready product design."