UX & Product Design — Vol. 3

Overview

A tight, 8-prompt toolkit — the UX & Product Design — Vol. 3 is built for design & image. You'll get prompts such as “Claude - Proje çalışma promptu”, “UX Conversion Deconstruction Engine” and “Design System Consistency Auditor”. Think of them as scaffolding: the hard part — structure and framing — is done, so your input is what makes each result yours. Copy, paste into ChatGPT, Claude and Gemini, and refine the output in a reply or two.

• 1.Maintenance Prompt for Design System

  Copy

  You are a design system auditor performing a sync check.
  
  Compare the current CLAUDE.md design system documentation against the
  actual codebase and produce a drift report.
  
  ## Inputs
  - **CLAUDE.md:** ${paste_or_reference_file}
  - **Current codebase:** ${path_or_uploaded_files}
  
  ## Check For:
  
  1. **New undocumented tokens**
     - Color values in code not in CLAUDE.md
     - Spacing values used but not defined
     - New font sizes or weights
  
  2. **Deprecated tokens still in code**
     - Tokens documented as deprecated but still used
     - Count of remaining usages per deprecated token
  
  3. **New undocumented components**
     - Components created after last CLAUDE.md update
     - Missing from component library section
  
  4. **Modified components**
     - Props changed (added/removed/renamed)
     - New variants not documented
     - Visual changes (different tokens consumed)
  
  5. **Broken references**
     - CLAUDE.md references tokens that no longer exist
     - File paths that have changed
     - Import paths that are outdated
  
  6. **Convention violations**
     - Code that breaks CLAUDE.md rules (inline colors, missing focus states, etc.)
     - Count and location of each violation type
  
  ## Output
  A markdown report with:
  - **Summary stats:** X new tokens, Y deprecated, Z modified components
  - **Action items** prioritized by severity (breaking → inconsistent → cosmetic)
  - **Updated CLAUDE.md sections** ready to copy-paste (only the changed parts)

• 2.Claude - Proje çalışma promptu

  Copy

  Plan a redesign for this web page before making any edits.
  
  Goal:
  Improve visual hierarchy, clarity, trust, and conversion
  while keeping the current tech stack.
  
  Your process:
  1. Inspect the existing codebase, components, styles, tokens, and layout primitives.
  2. Identify UX/UI issues in the current implementation.
  3. Ask clarifying questions if brand/style/conversion intent is unclear.
  4. Produce a design-first implementation plan in markdown.
  
  Include:
  - Current-state audit
  - Main usability and visual design issues
  - Proposed information architecture
  - Section-by-section page plan
  - Component inventory
  - Reuse vs extend vs create decisions
  - Design token changes needed
  - Responsive behavior notes
  - Accessibility considerations
  - Step-by-step implementation order
  - Risks and open questions
  
  Constraints:
  - Reuse existing components where possible
  - Keep design system consistency
  - Do not implement yet

• 3.UX Conversion Deconstruction Engine

  Copy

  You are a senior UX strategist and behavioral systems analyst.
  
  Your objective is to reverse-engineer why a given product, landing page, or UI converts (or fails to convert).
  
  Analyze with precision — avoid generic advice.
  
  ---
  
  ### 1. Value Clarity
  - What is the core promise within 3–5 seconds?
  - Is it specific, measurable, and outcome-driven?
  
  ### 2. Primary Human Drives
  Identify dominant drivers:
  - Desire (status, wealth, attractiveness)
  - Fear (loss, missing out, risk)
  - Control (clarity, organization, certainty)
  - Relief (pain removal)
  - Belonging (identity, community)
  
  Rank top 2 drivers.
  
  ### 3. UX & Visual Hierarchy
  - What draws attention first?
  - CTA prominence and clarity
  - Information sequencing
  
  ### 4. Conversion Flow
  - Entry hook → engagement → decision trigger
  - Where is the “commitment moment”?
  
  ### 5. Trust & Credibility
  - Proof elements (testimonials, numbers, authority)
  - Risk reduction (guarantees, clarity)
  
  ### 6. Hidden Conversion Mechanics
  - Subtle persuasion patterns
  - Emotional triggers not explicitly stated
  
  ### 7. Friction & Drop-Off Risks
  - Confusion points
  - Overload / missing info
  
  ---
  
  ### Output Format:
  
  **Summary (3–4 lines)**
  **Top Conversion Drivers**
  **UX Breakdown**
  **Hidden Mechanics**
  **Friction Points**
  **Actionable Improvements (prioritized)**

• 4.Design System Consistency Auditor

  Copy

  You are a design systems engineer performing a forensic UI audit.
  
  Your objective is to detect inconsistencies, fragmentation, and hidden design debt.
  
  Be specific. Avoid generic feedback.
  
  ---
  
  ### 1. Typography System
  - Font scale consistency
  - Heading hierarchy clarity
  
  ### 2. Spacing & Layout
  - Margin/padding consistency
  - Layout rhythm vs randomness
  
  ### 3. Color System
  - Semantic consistency
  - Redundant or conflicting colors
  
  ### 4. Component Consistency
  - Buttons (variants, states)
  - Inputs (uniform patterns)
  - Cards, modals, navigation
  
  ### 5. Interaction Consistency
  - Hover / active states
  - Behavioral uniformity
  
  ### 6. Design Debt Signals
  - One-off styles
  - Inline overrides
  - Visual drift across pages
  
  ---
  
  ### Output Format:
  
  **Consistency Score (1–10)**
  **Critical Inconsistencies**
  **System Violations**
  **Design Debt Indicators**
  **Standardization Plan**
  **Priority Fix Roadmap**

• 5.Strategic Business Blueprint Generator

  Copy

  You are a senior strategy consultant (McKinsey-style, hypothesis-driven).
  
  Your task is to convert a raw business idea into a decision-ready business blueprint.
  
  Work top-down. Be structured, concise, and analytical. Avoid generic advice.
  
  ---
  
  ### 0. Initial Hypothesis
  State 1–2 core hypotheses explaining why this business will succeed.
  
  ---
  
  ### 1. Problem & Customer
  - Define the core problem (specific, not abstract)
  - Identify primary customer segment (who feels it most)
  - Current alternatives and their gaps
  
  ---
  
  ### 2. Value Proposition
  - Core value delivered (quantified if possible)
  - Why this solution is superior (cost, speed, experience, outcome)
  
  ---
  
  ### 3. Market Sizing (structured logic)
  - TAM, SAM, SOM (state assumptions clearly)
  - Growth drivers and constraints
  
  ---
  
  ### 4. Business Model
  - Revenue streams (primary vs secondary)
  - Pricing logic (value-based, cost-plus, etc.)
  - Cost structure (fixed vs variable drivers)
  
  ---
  
  ### 5. Competitive Positioning
  - Key competitors (direct + indirect)
  - Differentiation axis (price, UX, tech, distribution, brand)
  - Defensibility potential (moat)
  
  ---
  
  ### 6. Go-To-Market
  - Target entry segment
  - Acquisition channels (ranked by expected efficiency)
  - Distribution logic
  
  ---
  
  ### 7. Operating Model
  - Key activities
  - Critical resources (people, tech, partners)
  
  ---
  
  ### 8. Risks & Assumptions
  - Top 5 assumptions (explicit)
  - Key failure points
  
  ---
  
  ### Output Format:
  
  **Executive Summary (5 lines max)**
  **Core Hypotheses**
  **Structured Analysis (sections above)**
  **Critical Assumptions**
  **Top 3 Strategic Decisions Required**

• 6.🔧 AI App Improvement Loop Prompt

  Copy

  You are an expert software engineer, product designer, and QA analyst.
  
  Your task is to continuously analyze my application and improve it step-by-step using an iterative process.
  
  ## Objective
  Identify and implement one high-impact improvement at a time in the following priority:
  1. Critical bugs
  2. Performance issues
  3. UX/UI improvements
  4. Missing or weak features
  5. Code quality / maintainability
  
  ## Process (STRICT LOOP)
  
  ### Step 1: Analyze
  - Deeply analyze the current app (code, UI, architecture, flows).
  - Identify ONE most impactful improvement (bug, UI, feature, or optimization).
  - Do NOT list multiple items.
  
  ### Step 2: Justify
  - Clearly explain:
    - What the issue/improvement is
    - Why it matters (impact on user or system)
    - Risk if not fixed
  
  ### Step 3: Proposal
  - Provide a precise solution:
    - For bugs → root cause + fix
    - For UI → before/after concept
    - For features → expected behavior + flow
    - For code → refactoring approach
  
  ### Step 4: Ask Permission (MANDATORY)
  - Stop and ask:
    "Do you want me to implement this improvement?"
  
  - DO NOT proceed without explicit approval.
  
  ### Step 5: Implement (Only after approval)
  - Provide:
    - Exact code changes (diff or full code)
    - File-level modifications
    - Any dependencies or setup changes
  
  ### Step 6: Verify
  - Explain:
    - How to test the change
    - Expected result
    - Edge cases covered
  
  ---
  
  ## Continuation Rule
  After implementation:
  - Wait for user input.
  - If user says "next":
    → Restart from Step 1 and find the NEXT best improvement.
  
  ---
  
  ## Constraints
  - Do NOT overwhelm with multiple suggestions.
  - Focus on high-impact improvements only.
  - Prefer practical, production-ready solutions.
  - Avoid theoretical or vague advice.
  
  ## Context Awareness
  - Assume this is a real production app.
  - Optimize for performance, scalability, and user experience.

• 7.High-End Technology-Inspired Website UI Redesign

  Copy

  Act as a UI/UX designer using Image2. Your task is to create several high-end, technology-inspired UI designs for a website front end. You must:
  - Retain all existing functionalities (no additions or deletions)
  - Focus on modifying the layout and theme
  - Design with a high-end, futuristic tech aesthetic
  - Generate multiple style options for client selection
  
  Constraints:
  - Ensure the design is suitable for a modern, high-tech website
  - Keep the user experience intuitive and seamless
  
  Your output will include:
  - A set of image designs showcasing different styles
  - Each design must highlight the website's functionality while offering a fresh aesthetic

• 8.de

  Copy

  Analyze the uploaded project report: ${"D:\de\Document from jd.pdf"}
  
  Analyze the existing prototype: ${"D:\de\canvas"}
  
  Use the additional project documents: ${"D:\de\Document from jd"}
  
  Redesign the complete prototype based on these documents.
  
  I need a prompt for Claude to redesign the prototype (canvas/screens) of my mobile application.
  
  The existing prototype was created manually and does not accurately represent my final project. I want to create a completely new, professional, modern, and logical prototype based on my actual application.
  
  My project resources:
  
  - Google Drive (Project Report, Canvas, Documents, APK, etc.): https://drive.google.com/drive/folders/1pYP_QEiu2Wd7KucZYoOcJWQ07qnCCgn_
  - GitHub Repository (Complete Source Code): https://github.com/kadarkadikadey/CITIZEN-107
  
  Generate a detailed Claude prompt that instructs Claude to:
  
  1. Analyze my GitHub repository to understand the complete application.
  2. Use the project report and other documents from Google Drive for additional context.
  3. Ignore the existing manual prototype and redesign it from scratch according to the actual implemented features.
  4. Create a user flow that matches the real application.
  5. Design every screen required in the application, including authentication, dashboard, emergency features, help directory, medical resources, profile, settings, and any other necessary screens found in the project.
  6. Ensure the navigation flow is logical, clean, and user-friendly.
  7. Use modern Material Design UI principles with a professional color scheme and consistent components.
  8. Include all user interactions, screen transitions, buttons, forms, dialogs, and navigation between screens.
  9. Generate a complete prototype/canvas that can be directly recreated in design tools like Figma or Canva.
  10. Do not assume features that are not present in the project. Base every screen and flow only on the actual implementation in the GitHub repository and project documents.
  
  The final output should be a comprehensive prototype redesign prompt that I can directly use in Claude to generate an accurate application prototype.

1. Step 1

   Pick a prompt

   Browse the 8 prompts and pick the closest match — “Maintenance Prompt for Design System” is a good place to start.

2. Step 2

   Copy it

   Hit Copy on the prompt you want, or grab the whole set with “Copy all 8 prompts”.

3. Step 3

   Fill in the blanks

   Fill in the [bracketed] placeholders with your specifics — that's what makes the output yours.

4. Step 4

   Run and refine

   Drop it into ChatGPT and refine in a reply or two until it fits design & image.

Related packs

• 

  Design & ImageFree

  Image Generation — Vol. 7

  Battle-tested prompts, organized and ready

  9 promptsMidjourney · DALL·E · Stable Diffusion
• 

  Design & ImageFree

  Image Generation — Vol. 16

  A focused toolkit for faster, better output

  9 promptsChatGPT · Claude · Gemini
• 

  Design & ImageFree

  UX & Product Design — Vol. 2

  Everything you need in one collection

  9 promptsChatGPT · Claude · Gemini
• 

  Design & ImageFree

  Image Generation — Vol. 8

  Copy, tweak, and ship in minutes

  9 promptsMidjourney · DALL·E · Stable Diffusion
• 

  Design & ImageFree

  Image Generation — Vol. 9

  Everything you need in one collection

  9 promptsChatGPT · Claude · Gemini
• 

  Design & ImageFree

  Brand Image Prompt Pack for Renewable Energy

  Everything you need in one collection

  6 promptsChatGPT · Claude · Gemini