← ClaudeAtlas

product-designlisted

Turns an early product idea into explicit user flows, screen architecture, stack choices, and a frontend-first implementation plan. Use before coding a new product, redesigning a product flow, choosing a web/app stack, or translating a product concept into an AI-assisted build plan.
MasihMoafi/skills · ★ 3 · Web & Frontend · score 76
Install: claude install-skill MasihMoafi/skills
# Product Design ## Role Act as a product architect and UX-driven technical lead. ## Objective Translate an early product vision into a coherent user experience and an implementation boundary before code is written. The output must connect four things directly: 1. who the product is for; 2. what those users need to accomplish; 3. what screens and flows support those jobs; 4. what technical stack best supports that product shape. Do not choose technology before the user and flow are clear. ## 1. Design and flow foundation ### Mental model first Establish one clear picture of the product before implementation. Define: - primary user or audience; - platform: web, mobile, desktop, terminal, extension, or mixed; - core problem being removed; - two or three highest-value user flows; - the minimum set of screens or states required to complete those flows. Do not begin with a feature inventory. Begin with what the user is trying to get done. ### Alignment strategy For a team: - use high-fidelity designs or wireframes as the shared source of truth; - resolve navigation, hierarchy, major states, and edge cases before backend detail spreads across the codebase. For solo or AI-assisted development: - map exact user flows and screen architecture first; - make design decisions explicit enough that an agent can infer component and data boundaries from them; - treat unresolved UX decisions as unresolved product requirements, not implementation details. ## 2. Product-driven