<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:media="http://search.yahoo.com/mrss/"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Cross-Platform Sync &#8211; Flowpast.com &#8211; Your Workflow Automation Library</title>
	<atom:link href="https://flowpast.com/function/cross-platform-sync/feed/" rel="self" type="application/rss+xml" />
	<link>https://flowpast.com</link>
	<description>Flowpast.com - Pre-Built n8n, Make &#38; Zapier Workflow Templates</description>
	<lastBuildDate>Fri, 23 Jan 2026 02:46:13 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://flowpast.com/wp-content/uploads/2025/12/cropped-icon-32x32.png</url>
	<title>Cross-Platform Sync &#8211; Flowpast.com &#8211; Your Workflow Automation Library</title>
	<link>https://flowpast.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Build Responsive Website Navigation with this AI Prompt</title>
		<link>https://flowpast.com/prompts/build-responsive-website-navigation-with-this-ai-prompt/</link>
		
		<dc:creator><![CDATA[Lisa Granqvist]]></dc:creator>
		<pubDate>Fri, 23 Jan 2026 02:46:13 +0000</pubDate>
				<category><![CDATA[Prompts]]></category>
		<guid isPermaLink="false">https://flowpast.com/?p=5001437</guid>

					<description><![CDATA[Menus feel unfamiliar and clunky - this AI Prompt delivers responsive accessible nav HTML CSS plus minimal JS with dropdowns and focus. Access our full AI prompt library for every model.]]></description>
										<content:encoded><![CDATA[<!-- FOCUS_KEYWORD: responsive website navigation -->
<div class="hook-introduction">

<p>Your navigation is “fine” until someone tries to use it on a phone with one thumb. Or until a keyboard user gets trapped in a dropdown. Or until your “clever” hamburger icon hides the most important pages behind an interaction no one asked for.</p>



<p>This <strong>responsive website navigation</strong> is built for <strong>web designers</strong> who need a familiar menu pattern that won’t spark stakeholder debates, <strong>frontend developers</strong> who want accessible HTML/CSS with minimal JavaScript instead of a heavy framework, and <strong>marketing teams</strong> who are tired of nav changes quietly tanking conversion. The output is implementation-ready HTML/CSS plus minimal JS for mobile and desktop behavior, with dropdowns, focus management, and practical guidance you can actually ship.</p>

</div>

<div class="what-and-when-section">

<h2 class="wp-block-heading">What Does This AI Prompt Do and When to Use It?</h2>



<table class="solution-results-table three-column" role="presentation" aria-label="What this prompt does, when to use it, and what you get">
 <thead>
    <tr>
      <th scope="col">What This Prompt Does</th>
      <th scope="col">When to Use This Prompt</th>
      <th scope="col">What You&#8217;ll Get</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <ul class="automation-list">
          <li>It selects a familiar navigation pattern based on site type and user expectations (Jakob’s Law) rather than novelty.</li>
          <li>It generates semantic, accessible HTML structure for menus and dropdowns, using ARIA only where it’s truly needed.</li>
          <li>It writes mobile-first CSS for layout, hit targets, and responsive breakpoints, then layers in desktop “power browsing” behavior.</li>
          <li>It adds minimal, unobtrusive JavaScript for toggling, state announcements, and keyboard-safe dropdown interaction.</li>
          <li>It includes implementation guidance that calls out assumptions, performance considerations, and small information-architecture fixes to flag (not rewrite).</li>
       </ul>
      </td>
      <td>
        <ul class="results-list">
          <li>You’re redesigning a header and want to avoid a “looks cool, feels confusing” navigation rollout.</li>
          <li>Your current dropdowns are mouse-only, and QA keeps finding tab-order and focus issues on desktop.</li>
          <li>Mobile users are bouncing because the menu is hard to reach, hard to tap, or hides the primary pages behind unclear icons.</li>
          <li>You need a clean baseline that passes accessibility reviews without turning into a multi-sprint refactor.</li>
          <li>Your site is growing and the nav is starting to sprawl, so you need controlled dropdowns and clear hierarchy fast.</li>
        </ul>
      </td>
       <td>
         <ul class="deliverables-list">
           <li>A complete responsive navigation code bundle (HTML + CSS + minimal JS) ready to paste into a project.</li>
           <li>Keyboard interaction rules documented in plain language (Tab, Shift+Tab, Enter, Escape, arrow keys where appropriate).</li>
           <li>A dropdown behavior spec covering open/close triggers, click-outside handling, and focus return behavior.</li>
           <li>A list of explicit assumptions plus 3–6 clarification questions to tighten fit if you provide more context.</li>
           <li>A short implementation checklist for accessibility and performance, including what to test before shipping.</li>
         </ul>
       </td>
    </tr>
  </tbody>
</table>

</div>

<div class="prompt-display-section">

<h2 class="wp-block-heading">The Full AI Prompt: Responsive Accessible Navigation System</h2>



<div class="prompt-viewer-wrapper" id="prompt-section">
    <div class="prompt-comparison-row prompt-premium">
        <!-- Header with buttons -->
        <div class="prompt-row-header">
            <!-- <span class="prompt-row-icon">✨</span> -->
            <span class="prompt-row-title">
                                    Step 1: Customize the prompt with your input
                            </span>
            <div class="prompt-header-buttons">
                                    <button class="prompt-header-btn prompt-header-reset" onclick="resetPrompt()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
                            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
                        </svg>
                        <span>Reset</span>
                    </button>
                                <button class="prompt-header-btn prompt-header-copy-green flowpast-copy-prompt-btn" onclick="handlePromptCopy()">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                        <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
                    </svg>
                    <span>Customize and Copy Full Prompt</span>
                </button>
            </div>
        </div>

        <!-- Customize the Prompt Section -->
                    <div class="prompt-customize-section">
                <span class="customize-title">Customize the Prompt</span>
                <p class="customize-subtitle">Fill in the fields below to personalize this prompt for your needs.</p>
                <table class="customize-table">
                    <thead>
                        <tr>
                            <th>Variable</th>
                            <th>What to Enter</th>
                            <th>Customise the prompt</th>
                        </tr>
                    </thead>
                    <tbody>
                                                    <tr>
                                <td class="var-name"><code>[CONTEXT]</code></td>
                                <td class="var-desc">
                                    Provide the structure and key sections of the website, including the main navigation items and their organization. Be as detailed as possible.                                    <div class="var-example">For example: "Home, About Us, Services (with submenus for Consulting, Development, and Training), Blog, Contact Us."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[CONTEXT]"
                                            placeholder="Enter your value here..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[NUMBER_OF_MENU_ITEMS]</code></td>
                                <td class="var-desc">
                                    Specify the number of primary navigation items that will appear in the menu. This helps define the scope of the navigation system.                                    <div class="var-example">For example: "6"</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[NUMBER_OF_MENU_ITEMS]"
                                            placeholder="Enter your value here..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[TARGET_AUDIENCE]</code></td>
                                <td class="var-desc">
                                    Describe the primary users of the website, including their technical proficiency, needs, and browsing habits.                                    <div class="var-example">For example: "Small business owners who are looking for affordable digital marketing services, typically aged 30-50 with moderate technical skills."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[TARGET_AUDIENCE]"
                                            placeholder="Enter your value here..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[BRAND_VOICE]</code></td>
                                <td class="var-desc">
                                    Define the tone and style of communication for the website. Include adjectives or phrases that describe the desired voice.                                    <div class="var-example">For example: "Professional yet approachable, with a focus on clarity and trustworthiness."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[BRAND_VOICE]"
                                            placeholder="Enter your value here..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[INDUSTRY]</code></td>
                                <td class="var-desc">
                                    Specify the industry or sector the website represents. This will help tailor the navigation and design conventions.                                    <div class="var-example">For example: "Healthcare technology focused on patient data management solutions."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[INDUSTRY]"
                                            placeholder="Enter your value here..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[PLATFORM]</code></td>
                                <td class="var-desc">
                                    Indicate the primary platform or CMS the website will be built on. This helps align navigation implementation with technical constraints.                                    <div class="var-example">For example: "WordPress with Elementor, or Shopify for e-commerce functionality."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[PLATFORM]"
                                            placeholder="Enter your value here..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[SPECIAL_REQUIREMENTS]</code></td>
                                <td class="var-desc">
                                    List any specific needs or constraints for the navigation system, such as multilingual support, integration with analytics, or compliance standards.                                    <div class="var-example">For example: "Multilingual support for English and Spanish, GDPR compliance, and integration with Google Analytics."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[SPECIAL_REQUIREMENTS]"
                                            placeholder="Enter your value here..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                            </tbody>
                </table>

                <button class="copy-customized-btn flowpast-copy-prompt-btn" onclick="handlePromptCopy()">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                        <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
                    </svg>
                    <span class="copy-customized-text">Customise the prompt now</span>
                </button>
            </div>
        
        <!-- Full Prompt Code Header -->
                    <div class="prompt-code-header">
                <span class="prompt-code-title">
                    Step 2: Copy the Prompt
                </span>
                <div class="prompt-code-buttons">
                    <!-- Reset: Only visible when unlocked -->
                    <button class="prompt-header-btn prompt-header-reset btn-when-unlocked" onclick="resetPrompt()" style="display: none;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
                            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
                        </svg>
                        <span>Reset</span>
                    </button>
                    <!-- Copy Full Prompt -->
                    <button class="prompt-header-btn prompt-header-copy flowpast-copy-prompt-btn" onclick="handlePromptCopy()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                            <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
                        </svg>
                        <span>Copy Full Prompt</span>
                    </button>
                </div>
            </div>
        

        <!-- Prompt Content -->
        <div class="prompt-box prompt-gated-wrapper">
            <!-- Gated: Blurred content -->
            <div class="prompt-gated-content">
                <div class="prompt-header-visible">OBJECTIVE</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">PERSONA</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">CONSTRAINTS</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">What This Is NOT</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">PROCESS</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div><div class="locked-line" style="width: 80%;"></div><div class="locked-line" style="width: 95%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">INPUTS</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div><div class="locked-line" style="width: 80%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">OUTPUT SPECIFICATION</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">1) Navigation Blueprint</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">2) HTML (Semantic + Accessible)</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">3) CSS (Responsive + States + Motion)</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">4) JavaScript (Only If Needed)</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">5) Implementation Notes</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">6) Accessibility Confirmation Checklist</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div><div class="locked-line" style="width: 80%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">7) Browser Compatibility Notes</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">QUALITY CHECKS</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div></div></div><div class="locked-section-icon">🔒</div></div>            </div>
            <!-- Unlocked: Full content (hidden by default) -->
            <div class="prompt-content-full" id="premium-prompt-content" style="display: none;">
                ## OBJECTIVE
Design a website navigation system that feels instantly familiar to users (leveraging Jakob’s Law), works smoothly on mobile and desktop, supports dropdowns where needed, and meets accessibility and performance expectations. Deliver ready-to-use HTML/CSS/JS plus practical implementation guidance.

## PERSONA
Act as a navigation-focused UX architect with a background in cognitive psychology and behavioral usability research. Communicate in a clear, pragmatic style: explain decisions in terms of user expectation, scanning behavior, and cross-device constraints—without chasing novelty for its own sake.

## CONSTRAINTS
- Favor established web conventions over experimental layouts.
- Mobile-first: navigation must be effortless for thumb use and small screens.
- Desktop must support “power browsing” with robust dropdown behavior and full keyboard support.
- Accessibility is non-negotiable: semantic markup, focus management, ARIA only where necessary, and screen-reader-friendly state announcements.
- Performance-minded: prefer CSS transitions; keep JavaScript minimal and unobtrusive.
- Do not hide core navigation behind unclear icons or interactions that require instruction.

### What This Is NOT
- Not a brand-new navigation paradigm or “inventive” interaction concept.
- Not a full IA rewrite or content strategy (unless the provided hierarchy is clearly broken—then only flag issues and suggest small corrections).
- Not a design mockup in Figma; produce implementation-ready code and guidance.

## PROCESS
1. **Pre-analysis acknowledgement (required):** Briefly restate what you’re building and the key constraints you’ll follow, based on the provided inputs.
2. **Clarify missing info:** If any inputs are incomplete/ambiguous, ask focused questions first. If the user requests “just give me something,” proceed with sensible defaults and explicitly label assumptions.
3. **Expectation mapping:** Infer standard navigation patterns for the given site type and user technical comfort; align placement, labels, and interaction behaviors accordingly.
4. **Mobile-first build:** Define the small-screen experience first (hamburger-triggered menu, tap behaviors, focus handling, clear close mechanism).
5. **Desktop enhancement:** Add larger-screen layout (horizontal bar or sidebar as appropriate), dropdowns/mega-menu behavior if needed, and hover intent + touch fallbacks.
6. **Accessibility layer:** Add skip link, keyboard navigation flows, focus styles, ARIA labeling/state management, and screen-reader announcements where appropriate.
7. **Polish + states:** Implement active/current indicators, parent highlighting when in subsections, and subtle transitions that don’t harm usability.
8. **Performance + compatibility:** Keep scripts lightweight, avoid heavy DOM churn, and note browser support expectations.

## INPUTS
- **Site hierarchy / main sections:** [CONTEXT]
- **Count of top-level items:** [NUMBER_OF_MENU_ITEMS]
- **Primary user segment (and technical comfort):** [TARGET_AUDIENCE]
- **Brand/visual constraints:** [BRAND_VOICE]
- **Site category / industry:** [INDUSTRY]
- **Platform/context notes (optional: CMS/framework, existing header constraints):** [PLATFORM]
- **Any special requirements (optional: mega-menu, login area, language switcher):** [SPECIAL_REQUIREMENTS]

## OUTPUT SPECIFICATION
Provide the solution with the following deliverable structure:

### 1) Navigation Blueprint
- {Recommended Navigation Pattern} (e.g., top bar + dropdowns; sidebar for docs; etc.)
- {Menu Model} (flat vs nested; how many levels supported)
- {Key Jakob’s Law Decisions} (placement, labels, icons, interaction expectations)

### 2) HTML (Semantic + Accessible)
- One complete snippet including:
  - {Skip Link}
  - {Header/Nav Landmark}
  - {Menu Button} (mobile trigger)
  - {Menu List Markup}
  - Required ARIA only where justified

### 3) CSS (Responsive + States + Motion)
- Mobile-first styles plus desktop breakpoints
- {Focus Styles}
- {Active/Current Styles}
- {Hover/Expanded Styles}
- {Transition Rules} (CSS-based, modest and purposeful)

### 4) JavaScript (Only If Needed)
- A minimal script for:
  - {Menu Toggle Behavior}
  - {Dropdown Expand/Collapse}
  - {Keyboard Interactions} (Escape to close, arrow/tab behavior where applicable)
  - {ARIA State Sync} (e.g., aria-expanded)
- If JS is not needed, state {Reason JS Was Avoided}.

### 5) Implementation Notes
- {Assumptions Made}
- {How To Add/Remove Items}
- {Dropdown Level Guidance} (and limits)
- {Touch Device Fallback Behavior}
- {Performance Considerations}

### 6) Accessibility Confirmation Checklist
Include a checklist verifying:
- {Keyboard Reachability}
- {Visible Focus}
- {Skip Link Works}
- {Screen Reader Announcements}
- {ARIA Validity}
- {No Keyboard Traps}

### 7) Browser Compatibility Notes
- {Supported Browsers}
- {Known Limitations}
- {Fallbacks}

## QUALITY CHECKS
Before finalizing, verify and explicitly confirm:
- Navigation placement, iconography, and interactions match common conventions for [INDUSTRY] (Jakob’s Law alignment).
- Works under and over the mobile breakpoint, with no broken intermediate states.
- All interactive elements are usable by keyboard alone and have visible focus.
- Current page and section states are clearly indicated (including parent highlighting).
- JavaScript is minimal; transitions are primarily CSS; no unnecessary reflows or heavy listeners.            </div>
        </div>


    </div>

    <!-- CTA Row - Full width buttons -->
    <div class="prompt-cta-row">
        <button class="prompt-cta-btn prompt-cta-copy flowpast-copy-prompt-btn" onclick="handlePromptCopy()">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
            </svg>
            <span class="cta-copy-text">Copy Full Prompt</span>
        </button>
    </div>
</div>

<style>
    /* Gated prompt states */
    .prompt-gated-wrapper {
        position: relative;
    }

    /* When unlocked - show full content, hide gated */
    body.flowpast-unlocked .prompt-gated-wrapper .prompt-gated-content {
        display: none;
    }

    body.flowpast-unlocked .prompt-gated-wrapper .prompt-content-full {
        display: block !important;
    }

    /* Show/hide elements based on unlock state */
    body.flowpast-unlocked .btn-when-unlocked {
        display: inline-flex !important;
    }

    .prompt-viewer-wrapper {
        scroll-margin-top: 250px;
    }

    /* ========================================
   PROMPT VIEWER - MAIN WRAPPER
   ======================================== */
    .prompt-viewer-wrapper {
        margin: 30px 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* ========================================
   PROMPT BOX CONTAINER
   ======================================== */
    .prompt-comparison-row {
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid #e0e0e0;
        background: #fff;
    }

    /* ========================================
   HEADER WITH BUTTONS
   ======================================== */
    .prompt-row-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 20px;
        color: #fff !important;
        background: #141414;
        border-bottom: 1px solid #e0e0e0;
        flex-wrap: wrap;
    }

    .prompt-row-icon {
        font-size: 20px;
    }

    .prompt-row-title {
        font-weight: 600;
        font-size: 22px;
        color: #fff !important;
        text-decoration: underline
    }

    .prompt-header-buttons {
        margin-left: auto;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    /* Header buttons */
    .prompt-header-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
        border: none;
    }

    .prompt-header-copy {
        background: #3a3a3a;
        color: #fff;
    }

    .prompt-header-copy:hover {
        background: #2a2a2a;
    }

    .prompt-header-copy.copied {
        background: #2e7d32;
    }

    .prompt-header-copy-green {
        background: #04AA6D !important;
        color: #fff !important;
    }

    .prompt-header-copy-green:hover {
        background: #039860 !important;
    }

    .prompt-header-copy-green.copied {
        background: #2e7d32 !important;
    }

    .prompt-header-access {
        background: rgb(5, 152, 98);
        color: #fff !important;
    }

    .prompt-header-access:hover {
        background: rgb(4, 130, 83);
        transform: translateY(-1px);
    }

    /* ========================================
   PROMPT CONTENT - FULL (NO SCROLL)
   ======================================== */
    .prompt-box {
        background: #ffffff;
    }

    .prompt-content-full {
        padding: 24px;
        margin: 0;
        color: #202124;
        background: #ffffff;
        font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
        font-size: 13px;
        line-height: 1.7;
        white-space: pre-wrap;
        word-wrap: break-word;
        /* No scroll - show full content */
        max-height: none;
        overflow: visible;
    }

    /* Highlighted variable in prompt */
    .prompt-variable {
        background: #fff3cd;
        color: #1967d2;
        font-weight: 700;
        padding: 2px 4px;
        border-radius: 3px;
        border: 1px solid #ffc107;
    }

    .prompt-variable-filled {
        background: #d4edda;
        color: #155724;
        font-weight: 700;
        padding: 2px 4px;
        border-radius: 3px;
        border: 1px solid #28a745;
    }

    /* ========================================
   GATED CONTENT (NO ACCESS)
   ======================================== */
    .prompt-gated-content {
        padding: 24px;
        background: #ffffff;
        font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
        font-size: 13px;
        line-height: 1.8;
        max-height: none;
        overflow: visible;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        cursor: default;
    }

    /* ## headers - larger, black */
    .prompt-header-visible {
        color: #202124;
        font-weight: 600;
        margin: 5px 0 0px 0;
        font-size: 20px;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    /* ### headers - smaller, black */
    .prompt-header-visible.subheader {
        color: #202124;
        font-weight: 600;
        margin: 5px 0;
        font-size: 18px;
    }

    .prompt-header-visible:first-child {
        margin-top: 0;
    }

    /* ========================================
   LOCKED SECTION BLOCK
   ======================================== */
    .locked-section {
        position: relative;
        margin: 4px 0 8px 0;
        border-radius: 6px;
        overflow: hidden;
        background: linear-gradient(110deg, #e2e8f0 8%, #f1f5f9 18%, #e2e8f0 33%);
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    .locked-section-bg {
        position: relative;
    }

    .locked-section-lines {
        padding: 8px 12px;
        position: relative;
    }

    .locked-line {
        height: 6px;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 3px;
        margin-bottom: 4px;
        margin-left: 12px;
    }

    .locked-line:last-child {
        margin-bottom: 0;
    }

    .locked-section-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        font-size: 24px;
        filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
    }

    /* Subheader locked sections - slightly indented */
    /*  .prompt-header-visible.subheader+.locked-section {
        margin-left: 16px;
    } */

    /* ========================================
   COMPATIBILITY BADGES
   ======================================== */
    .prompt-compatibility {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 12px 20px;
        background: #f8f9fa;
        border-top: 1px solid #e0e0e0;
    }

    .compat-label {
        font-size: 13px;
        color: #5f6368;
        font-weight: 500;
    }

    .compat-badge {
        padding: 4px 10px;
        background: #e8f0fe;
        color: #1967d2;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
    }

    /* ========================================
   CTA ROW - FULL WIDTH BUTTONS
   ======================================== */
    .prompt-cta-row {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }

    .prompt-cta-btn {
        flex: 1;
        min-width: 200px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 16px 24px;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
        border: none;
    }

    .prompt-cta-copy {
        background: #3a3a3a;
        color: #fff;
    }

    .prompt-cta-copy:hover {
        background: #2a2a2a;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .prompt-cta-copy.copied {
        background: #2e7d32;
    }

    .prompt-cta-reset {
        background: #3a3a3a;
        color: #fff;
    }

    .prompt-cta-reset:hover {
        background: #2a2a2a;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .prompt-cta-access {
        background: rgb(5, 152, 98);
        color: #fff !important;
    }

    .prompt-cta-access:hover {
        background: rgb(4, 130, 83);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(5, 152, 98, 0.3);
    }

    /* ========================================
    CUSTOMIZE YOUR PROMPT SECTION
    ======================================== */
    .prompt-customize-section {
        padding: 24px;
        border-bottom: 1px solid #e0e0e0;
        background: #fafbfc;
    }

    .customize-title {
        margin: 0 0 8px 0;
        font-size: 18px;
        font-weight: 700;
        color: #202124;
    }

    .customize-subtitle {
        margin: 0 0 20px 0;
        font-size: 14px;
        color: #5f6368;
    }

    .customize-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
    }

    .customize-table th {
        text-align: left;
        padding: 12px;
        background: #f1f3f4;
        border: 1px solid #e0e0e0;
        font-size: 13px;
        font-weight: 600;
        color: #202124;
    }

    .customize-table td {
        padding: 12px;
        border: 1px solid #e0e0e0;
        vertical-align: top;
    }

    .customize-table .var-name {
        width: 25%;
        background: #f8f9fa;
    }

    .customize-table .var-name code {
        background: #fff3cd;
        color: #1967d2;
        border: 1px solid #ffc107;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        word-break: break-all;
        font-weight: 600;
    }

    .customize-table .var-desc {
        width: 35%;
        font-size: 13px;
        color: #5f6368;
        line-height: 1.5;
    }

    .customize-table .var-example {
        margin-top: 8px;
        padding: 8px 10px;
        background: #f8f9fa;
        border-left: 3px solid #dadce0;
        font-size: 12px;
        color: #5f6368;
        font-style: italic;
        border-radius: 0 4px 4px 0;
    }

    .customize-table .var-input {
        width: 40%;
    }

    .customize-input {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #dadce0;
        border-radius: 6px;
        font-size: 13px;
        font-family: inherit;
        resize: vertical;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .customize-input:focus {
        outline: none;
        border-color: rgb(5, 152, 98);
        box-shadow: 0 0 0 3px rgba(5, 152, 98, 0.1);
    }

    .customize-input::placeholder {
        color: #9aa0a6;
        font-style: italic;
    }

    .copy-customized-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 16px 24px;
        background: rgb(5, 152, 98);
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .copy-customized-btn:hover {
        background: rgb(4, 130, 83);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(5, 152, 98, 0.3);
    }

    .copy-customized-btn.copied {
        background: #2e7d32;
    }

    /* ========================================
    FULL PROMPT CODE HEADER
    ======================================== */
    .prompt-code-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px;
        color: #fff !important;
        background: #141414;
        border-bottom: 1px solid #e0e0e0;
    }

    .prompt-code-title {
        font-size: 22px;
        font-weight: 600;
        text-decoration: underline;

    }

    .prompt-code-buttons {
        display: flex;
        gap: 8px;
    }

    .prompt-code-buttons .prompt-header-btn {
        padding: 8px 14px;
        font-size: 13px;
        background: #ffffff;
        color: #202124;
        border: 1px solid #dadce0;
    }

    .prompt-code-buttons .prompt-header-access {
        background: rgb(5, 152, 98);
        color: #fff !important;
        border-color: rgb(5, 152, 98);
    }

    .prompt-code-buttons .prompt-header-btn.prompt-header-access:hover {
        background: rgb(4, 130, 83) !important;
        border-color: rgb(4, 130, 83);
        color: #fff !important;
    }

    .prompt-code-buttons .prompt-header-btn:hover {
        background: #f1f3f4;
    }

    .prompt-code-buttons .prompt-header-copy.copied {
        background: #d4edda;
        color: #155724;
        border-color: #28a745;
    }

    .prompt-header-reset {
        background: #ffffff;
        color: #202124;
    }

    /* ========================================
   RESPONSIVE
   ======================================== */
    @media (max-width: 768px) {
        .prompt-row-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
        }

        .prompt-header-buttons {
            margin-left: 0;
            width: 100%;
        }

        .prompt-header-btn {
            flex: 1;
            justify-content: center;
        }

        .prompt-cta-row {
            flex-direction: column;
        }

        .prompt-cta-btn {
            width: 100%;
        }

        /* Customize table responsive */
        .customize-table,
        .customize-table thead,
        .customize-table tbody,
        .customize-table tr,
        .customize-table th,
        .customize-table td {
            display: block;
        }

        .customize-table thead {
            display: none;
        }

        .customize-table tr {
            margin-bottom: 16px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            overflow: hidden;
        }

        .customize-table td {
            width: 100% !important;
            border: none;
            border-bottom: 1px solid #e0e0e0;
        }

        .customize-table td:last-child {
            border-bottom: none;
        }

        .customize-table .var-name {
            background: #f1f3f4;
            font-weight: 600;
        }

        .prompt-code-header {
            flex-direction: column;
            gap: 12px;
            align-items: flex-start;
        }

        .prompt-code-buttons {
            width: 100%;
        }

        .prompt-code-buttons .prompt-header-btn {
            flex: 1;
            justify-content: center;
        }
    }
</style>

<script>
    function handlePromptCopy() {
        // Check if unlocked via cookie
        if (typeof window.flowpastIsUnlocked === 'function' && !window.flowpastIsUnlocked()) {
            // Show email popup
            if (typeof window.flowpastShowEmailPopup === 'function') {
                window.flowpastShowEmailPopup('prompt');
            }
            return;
        }

        // Copy the customized prompt (with filled variables)
        const customizedPrompt = getCustomizedPrompt();
        const copyButtons = document.querySelectorAll('.prompt-header-copy, .prompt-header-copy-green, .prompt-cta-copy, .copy-customized-btn');

        navigator.clipboard.writeText(customizedPrompt).then(() => {
            copyButtons.forEach(btn => {
                btn.classList.add('copied');
                const textSpan = btn.querySelector('span');
                if (textSpan) textSpan.textContent = 'Copied!';
            });

            setTimeout(() => {
                copyButtons.forEach(btn => {
                    btn.classList.remove('copied');
                    const textSpan = btn.querySelector('span');
                    if (textSpan) textSpan.textContent = 'Copy Full Prompt';
                });
            }, 2000);
        }).catch(err => {
            console.error('Failed to copy:', err);
        });
    }

    // Store original prompt for customization
    const originalPrompt = "## OBJECTIVE\r\nDesign a website navigation system that feels instantly familiar to users (leveraging Jakob\u2019s Law), works smoothly on mobile and desktop, supports dropdowns where needed, and meets accessibility and performance expectations. Deliver ready-to-use HTML\/CSS\/JS plus practical implementation guidance.\r\n\r\n## PERSONA\r\nAct as a navigation-focused UX architect with a background in cognitive psychology and behavioral usability research. Communicate in a clear, pragmatic style: explain decisions in terms of user expectation, scanning behavior, and cross-device constraints\u2014without chasing novelty for its own sake.\r\n\r\n## CONSTRAINTS\r\n- Favor established web conventions over experimental layouts.\r\n- Mobile-first: navigation must be effortless for thumb use and small screens.\r\n- Desktop must support \u201cpower browsing\u201d with robust dropdown behavior and full keyboard support.\r\n- Accessibility is non-negotiable: semantic markup, focus management, ARIA only where necessary, and screen-reader-friendly state announcements.\r\n- Performance-minded: prefer CSS transitions; keep JavaScript minimal and unobtrusive.\r\n- Do not hide core navigation behind unclear icons or interactions that require instruction.\r\n\r\n### What This Is NOT\r\n- Not a brand-new navigation paradigm or \u201cinventive\u201d interaction concept.\r\n- Not a full IA rewrite or content strategy (unless the provided hierarchy is clearly broken\u2014then only flag issues and suggest small corrections).\r\n- Not a design mockup in Figma; produce implementation-ready code and guidance.\r\n\r\n## PROCESS\r\n1. **Pre-analysis acknowledgement (required):** Briefly restate what you\u2019re building and the key constraints you\u2019ll follow, based on the provided inputs.\r\n2. **Clarify missing info:** If any inputs are incomplete\/ambiguous, ask focused questions first. If the user requests \u201cjust give me something,\u201d proceed with sensible defaults and explicitly label assumptions.\r\n3. **Expectation mapping:** Infer standard navigation patterns for the given site type and user technical comfort; align placement, labels, and interaction behaviors accordingly.\r\n4. **Mobile-first build:** Define the small-screen experience first (hamburger-triggered menu, tap behaviors, focus handling, clear close mechanism).\r\n5. **Desktop enhancement:** Add larger-screen layout (horizontal bar or sidebar as appropriate), dropdowns\/mega-menu behavior if needed, and hover intent + touch fallbacks.\r\n6. **Accessibility layer:** Add skip link, keyboard navigation flows, focus styles, ARIA labeling\/state management, and screen-reader announcements where appropriate.\r\n7. **Polish + states:** Implement active\/current indicators, parent highlighting when in subsections, and subtle transitions that don\u2019t harm usability.\r\n8. **Performance + compatibility:** Keep scripts lightweight, avoid heavy DOM churn, and note browser support expectations.\r\n\r\n## INPUTS\r\n- **Site hierarchy \/ main sections:** [CONTEXT]\r\n- **Count of top-level items:** [NUMBER_OF_MENU_ITEMS]\r\n- **Primary user segment (and technical comfort):** [TARGET_AUDIENCE]\r\n- **Brand\/visual constraints:** [BRAND_VOICE]\r\n- **Site category \/ industry:** [INDUSTRY]\r\n- **Platform\/context notes (optional: CMS\/framework, existing header constraints):** [PLATFORM]\r\n- **Any special requirements (optional: mega-menu, login area, language switcher):** [SPECIAL_REQUIREMENTS]\r\n\r\n## OUTPUT SPECIFICATION\r\nProvide the solution with the following deliverable structure:\r\n\r\n### 1) Navigation Blueprint\r\n- {Recommended Navigation Pattern} (e.g., top bar + dropdowns; sidebar for docs; etc.)\r\n- {Menu Model} (flat vs nested; how many levels supported)\r\n- {Key Jakob\u2019s Law Decisions} (placement, labels, icons, interaction expectations)\r\n\r\n### 2) HTML (Semantic + Accessible)\r\n- One complete snippet including:\r\n  - {Skip Link}\r\n  - {Header\/Nav Landmark}\r\n  - {Menu Button} (mobile trigger)\r\n  - {Menu List Markup}\r\n  - Required ARIA only where justified\r\n\r\n### 3) CSS (Responsive + States + Motion)\r\n- Mobile-first styles plus desktop breakpoints\r\n- {Focus Styles}\r\n- {Active\/Current Styles}\r\n- {Hover\/Expanded Styles}\r\n- {Transition Rules} (CSS-based, modest and purposeful)\r\n\r\n### 4) JavaScript (Only If Needed)\r\n- A minimal script for:\r\n  - {Menu Toggle Behavior}\r\n  - {Dropdown Expand\/Collapse}\r\n  - {Keyboard Interactions} (Escape to close, arrow\/tab behavior where applicable)\r\n  - {ARIA State Sync} (e.g., aria-expanded)\r\n- If JS is not needed, state {Reason JS Was Avoided}.\r\n\r\n### 5) Implementation Notes\r\n- {Assumptions Made}\r\n- {How To Add\/Remove Items}\r\n- {Dropdown Level Guidance} (and limits)\r\n- {Touch Device Fallback Behavior}\r\n- {Performance Considerations}\r\n\r\n### 6) Accessibility Confirmation Checklist\r\nInclude a checklist verifying:\r\n- {Keyboard Reachability}\r\n- {Visible Focus}\r\n- {Skip Link Works}\r\n- {Screen Reader Announcements}\r\n- {ARIA Validity}\r\n- {No Keyboard Traps}\r\n\r\n### 7) Browser Compatibility Notes\r\n- {Supported Browsers}\r\n- {Known Limitations}\r\n- {Fallbacks}\r\n\r\n## QUALITY CHECKS\r\nBefore finalizing, verify and explicitly confirm:\r\n- Navigation placement, iconography, and interactions match common conventions for [INDUSTRY] (Jakob\u2019s Law alignment).\r\n- Works under and over the mobile breakpoint, with no broken intermediate states.\r\n- All interactive elements are usable by keyboard alone and have visible focus.\r\n- Current page and section states are clearly indicated (including parent highlighting).\r\n- JavaScript is minimal; transitions are primarily CSS; no unnecessary reflows or heavy listeners.";
    const variables = ["[CONTEXT]","[NUMBER_OF_MENU_ITEMS]","[TARGET_AUDIENCE]","[BRAND_VOICE]","[INDUSTRY]","[PLATFORM]","[SPECIAL_REQUIREMENTS]"];
    // Initial render with highlighted variables
    document.addEventListener('DOMContentLoaded', function() {
        renderPromptWithHighlights();
    });

    // Live update prompt as user types
    document.querySelectorAll('.customize-input').forEach(input => {
        input.addEventListener('input', renderPromptWithHighlights);
    });

    function renderPromptWithHighlights() {
        const promptContent = document.getElementById('premium-prompt-content');
        if (!promptContent) return;

        let updatedPrompt = originalPrompt;
        let filledVariables = {};

        // Collect filled values
        document.querySelectorAll('.customize-input').forEach(input => {
            const placeholder = input.dataset.placeholder;
            const value = input.value.trim();

            if (value) {
                filledVariables[placeholder] = value;
            }
        });

        // Replace filled variables and highlight remaining
        let htmlContent = escapeHtml(updatedPrompt);

        variables.forEach(placeholder => {
            const escapedPlaceholder = escapeHtml(placeholder);
            const regex = new RegExp(escapeRegex(escapedPlaceholder), 'g');

            if (filledVariables[placeholder]) {
                // Show filled value with green highlight
                htmlContent = htmlContent.replace(regex,
                    '<span class="prompt-variable-filled">' + escapeHtml(filledVariables[placeholder]) + '</span>'
                );
            } else {
                // Show original placeholder with yellow highlight
                htmlContent = htmlContent.replace(regex,
                    '<span class="prompt-variable">' + escapedPlaceholder + '</span>'
                );
            }
        });

        promptContent.innerHTML = htmlContent;
    }

    function escapeRegex(string) {
        return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    }

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    function resetPrompt() {
        // Clear all input fields
        document.querySelectorAll('.customize-input').forEach(input => {
            input.value = '';
        });

        // Re-render with original placeholders highlighted
        renderPromptWithHighlights();

        // Visual feedback
        const resetBtns = document.querySelectorAll('.prompt-header-reset, .prompt-cta-reset');
        resetBtns.forEach(btn => {
            const originalText = btn.querySelector('span').textContent;
            btn.querySelector('span').textContent = 'Reset!';
            setTimeout(() => {
                btn.querySelector('span').textContent = originalText;
            }, 1000);
        });
    }


    function getCustomizedPrompt() {
        let updatedPrompt = originalPrompt;

        document.querySelectorAll('.customize-input').forEach(input => {
            const placeholder = input.dataset.placeholder;
            const value = input.value.trim();

            if (value) {
                const regex = new RegExp(escapeRegex(placeholder), 'g');
                updatedPrompt = updatedPrompt.replace(regex, value);
            }
        });

        return updatedPrompt;
    }
</script>

</div>

<div class="pro-tips-section">

<h2 class="wp-block-heading">Pro Tips for Better AI Prompt Results</h2>



<ul class="wp-block-list">

<li><strong>Provide your real nav hierarchy (even if it’s messy).</strong> Paste the current top-level items and dropdown groupings so the prompt can keep conventions while spotting small fixes. If you don’t have it documented, export it from your sitemap or copy it from your header HTML and label what’s “primary” vs “secondary.”</li>


<li><strong>Tell it what “site type” you’re building.</strong> Jakob’s Law only helps if the model knows what users expect, so add one line like: “This is a B2B SaaS marketing site” or “This is an ecommerce store with 200+ SKUs.” Follow-up you can use: “List the 3 most expected nav patterns for this site type and pick one with a short justification.”</li>


<li><strong>Define your breakpoints and header constraints.</strong> Mention your container width, logo size, sticky vs non-sticky header, and any existing design system tokens. Example: “Header is sticky, 72px tall, max width 1200px, we use 8px spacing and 4px radius.” Small details like that prevent awkward CSS.</li>


<li><strong>Iterate on interaction, not just layout.</strong> After the first output, ask: “Now make the desktop dropdowns open on click (not hover), add click-outside to close, and ensure focus returns to the trigger when Escape closes the menu.” This tends to surface the real bugs before you paste anything into production.</li>


<li><strong>Combine it with a test plan request.</strong> Once you like the code, run: “Create a QA checklist for this nav across iOS Safari, Android Chrome, and desktop Chrome/Firefox, including keyboard-only and screen reader smoke tests.” Honestly, this is where most nav implementations fall apart.</li>

</ul>

</div>

<div class="related-prompts-section">

<h2 class="wp-block-heading">Related Prompts</h2>



<p>If you’re standardizing how work gets done across teams, these prompts pair well once your navigation is under control.</p>



<p>If you also need a structured way to evaluate partners after your site update, <a href="https://flowpast.com/prompts/build-supplier-reliability-scorecards-ai-prompt/">Build Supplier Reliability Scorecards AI Prompt</a> is useful for turning qualitative feedback into consistent scoring. It’s a good follow-on when you’re tightening operations and want fewer “gut feel” decisions.</p>



<p>For teams doing vendor outreach or onboarding as part of a broader relaunch, <a href="https://flowpast.com/prompts/build-a-supplier-sourcing-playbook-with-this-ai-prompt/">Build a Supplier Sourcing Playbook with this AI Prompt</a> helps you document steps, criteria, and checkpoints. Think of it as the operational counterpart to a cleaner customer experience.</p>



<p>When negotiation cycles drag (and they usually do), <a href="https://flowpast.com/prompts/create-supplier-negotiation-templates-ai-prompt/">Create Supplier Negotiation Templates AI Prompt</a> gives you reusable language and structure, so you’re not rewriting the same emails and terms from scratch. It’s especially handy once you start scaling spend and need consistency.</p>


<br>


<p>Quick reference:</p>



<ul class="wp-block-list">

<li><a href="https://flowpast.com/prompts/build-supplier-reliability-scorecards-ai-prompt/">Build Supplier Reliability Scorecards AI Prompt</a>: Turn supplier performance into consistent scoring.</li>


<li><a href="https://flowpast.com/prompts/build-a-supplier-sourcing-playbook-with-this-ai-prompt/">Build a Supplier Sourcing Playbook with this AI Prompt</a>: Document sourcing steps, criteria, and checkpoints.</li>

<li><a href="https://flowpast.com/prompts/create-supplier-negotiation-templates-ai-prompt/">Create Supplier Negotiation Templates AI Prompt</a>: Reusable negotiation scripts and templates.</li>


<li><a href="https://flowpast.com/prompts/write-buyer-first-supplier-follow-ups-ai-prompt/">Write Buyer-First Supplier Follow-Ups AI Prompt</a>: Follow-ups that protect leverage and clarity.</li>


<li><a href="https://flowpast.com/prompts/build-a-rep-sales-workflow-checklist-with-this-ai-prompt/">Build a Rep Sales Workflow Checklist with this AI Prompt</a>: Step-by-step workflow for sales execution.</li>

</ul>
<!-- /wp:post-content -->
</div>

<div class="faq-section">
<!-- wp:heading {"level":2} -->
<h2 class="wp-block-heading">Common Questions</h2>
<!-- /wp:heading -->

<div class="faq-item">
<span class="question">Which roles benefit most from this responsive website navigation AI prompt?</span>
<!-- wp:paragraph -->
<p class="answer"><strong>Frontend Developers</strong> use this to get a solid, accessible baseline (semantic HTML, keyboard behavior, minimal JS) they can drop into an existing codebase without reinventing dropdown logic. <strong>UX Designers</strong> rely on it to map navigation patterns to user expectations, so the menu feels familiar instead of “creative.” <strong>Marketing Managers</strong> benefit because the prompt pushes clarity and scannability, which reduces friction on high-intent pages like pricing and demos. <strong>Accessibility Leads</strong> like it because it treats focus management and screen-reader announcements as first-class requirements, not an afterthought.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Which industries get the most value from this responsive website navigation AI prompt?</span>
<!-- wp:paragraph -->
<p class="answer"><strong>SaaS companies</strong> get value because their nav often needs clear paths to product, pricing, integrations, and support, with dropdowns that don’t break keyboard use. <strong>E-commerce brands</strong> benefit when category navigation must stay thumb-friendly on mobile while still supporting deeper browsing on desktop. <strong>Professional services firms</strong> use it to make “Services / Industries / Case Studies / Contact” easy to scan, which helps visitors self-qualify quickly. <strong>Content-heavy publishers</strong> can apply it to organize sections and topics without burying core navigation behind unclear patterns.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Why do basic AI prompts for building responsive accessible navigation produce weak results?</span>
<!-- wp:paragraph -->
<p class="answer">A typical prompt like &#8220;<em>Write me a responsive navbar with dropdowns</em>&#8221; fails because it: lacks the expectation mapping that keeps patterns familiar for the site type, provides no keyboard interaction model (so focus gets lost or trapped), ignores accessible semantics (or misuses ARIA everywhere), produces flashy code that’s hard to maintain instead of a minimal-JS approach, and misses mobile thumb constraints like hit target sizing and tap-friendly toggles. You end up with a demo, not a navigation system you can ship.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Can I customize this responsive website navigation prompt for my specific situation?</span>
<!-- wp:paragraph -->
<p class="answer">Yes, and you should, because the best navigation depends on your hierarchy, labels, and device constraints. Add your menu structure, your site type, and your header rules (sticky or not, breakpoints, logo width, and whether you need one or multiple dropdown levels). If your team has accessibility requirements, specify things like “Escape closes menus and returns focus to the trigger” and “no hover-only interactions.” Follow-up prompt: “Using my hierarchy, generate two variants (click-to-open dropdowns vs hybrid hover+focus) and explain which is safer for accessibility and why.”</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">What are the most common mistakes when using this responsive website navigation prompt?</span>
<!-- wp:paragraph -->
<p class="answer">The biggest mistake is leaving the hierarchy implied — instead of “Home, About, Services, Blog,” provide “Services (Design, Development, Retainers), Resources (Blog, Guides, Webinars), Company (About, Careers, Contact).” Another common error is not stating interaction requirements; “make it modern” is vague, but “click-to-open on desktop, tap-to-open on mobile, Escape closes, click-outside closes” is actionable. People also forget constraints like sticky headers and safe-area padding; “works on mobile” is weaker than “must be thumb-friendly on iPhone 13 mini and not collide with a 72px sticky header.” Finally, skipping assumptions review causes mismatch, so ask it to list assumptions and confirm them before you implement.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Who should NOT use this responsive website navigation prompt?</span>
<!-- wp:paragraph -->
<p class="answer">This prompt isn’t ideal for teams looking for a fully custom animated navigation experience or a brand-new interaction paradigm, because it intentionally favors proven conventions. It’s also not a fit if you need a complete information architecture rewrite, since it only flags issues and suggests small corrections. If you just want a one-line copy-paste snippet with no testing or iteration, you’ll probably ignore the accessibility and focus details that make it valuable. In those cases, use a simple framework component and accept the trade-offs.</p>
<!-- /wp:paragraph -->
</div>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Which roles benefit most from this responsive website navigation AI prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Frontend Developers use this to get a solid, accessible baseline (semantic HTML, keyboard behavior, minimal JS) they can drop into an existing codebase without reinventing dropdown logic. UX Designers rely on it to map navigation patterns to user expectations, so the menu feels familiar instead of “creative.” Marketing Managers benefit because the prompt pushes clarity and scannability, which reduces friction on high-intent pages like pricing and demos. Accessibility Leads like it because it treats focus management and screen-reader announcements as first-class requirements, not an afterthought."
      }
    },
    {
      "@type": "Question",
      "name": "Which industries get the most value from this responsive website navigation AI prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "SaaS companies get value because their nav often needs clear paths to product, pricing, integrations, and support, with dropdowns that don’t break keyboard use. E-commerce brands benefit when category navigation must stay thumb-friendly on mobile while still supporting deeper browsing on desktop. Professional services firms use it to make “Services / Industries / Case Studies / Contact” easy to scan, which helps visitors self-qualify quickly. Content-heavy publishers can apply it to organize sections and topics without burying core navigation behind unclear patterns."
      }
    },
    {
      "@type": "Question",
      "name": "Why do basic AI prompts for building responsive accessible navigation produce weak results?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "A typical prompt like \"Write me a responsive navbar with dropdowns\" fails because it: lacks the expectation mapping that keeps patterns familiar for the site type, provides no keyboard interaction model (so focus gets lost or trapped), ignores accessible semantics (or misuses ARIA everywhere), produces flashy code that’s hard to maintain instead of a minimal-JS approach, and misses mobile thumb constraints like hit target sizing and tap-friendly toggles. You end up with a demo, not a navigation system you can ship."
      }
    },
    {
      "@type": "Question",
      "name": "Can I customize this responsive website navigation prompt for my specific situation?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Yes, and you should, because the best navigation depends on your hierarchy, labels, and device constraints. Add your menu structure, your site type, and your header rules (sticky or not, breakpoints, logo width, and whether you need one or multiple dropdown levels). If your team has accessibility requirements, specify things like “Escape closes menus and returns focus to the trigger” and “no hover-only interactions.” Follow-up prompt: “Using my hierarchy, generate two variants (click-to-open dropdowns vs hybrid hover+focus) and explain which is safer for accessibility and why.”"
      }
    },
    {
      "@type": "Question",
      "name": "What are the most common mistakes when using this responsive website navigation prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "The biggest mistake is leaving the hierarchy implied — instead of “Home, About, Services, Blog,” provide “Services (Design, Development, Retainers), Resources (Blog, Guides, Webinars), Company (About, Careers, Contact).” Another common error is not stating interaction requirements; “make it modern” is vague, but “click-to-open on desktop, tap-to-open on mobile, Escape closes, click-outside closes” is actionable. People also forget constraints like sticky headers and safe-area padding; “works on mobile” is weaker than “must be thumb-friendly on iPhone 13 mini and not collide with a 72px sticky header.” Finally, skipping assumptions review causes mismatch, so ask it to list assumptions and confirm them before you implement."
      }
    },
    {
      "@type": "Question",
      "name": "Who should NOT use this responsive website navigation prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "This prompt isn’t ideal for teams looking for a fully custom animated navigation experience or a brand-new interaction paradigm, because it intentionally favors proven conventions. It’s also not a fit if you need a complete information architecture rewrite, since it only flags issues and suggests small corrections. If you just want a one-line copy-paste snippet with no testing or iteration, you’ll probably ignore the accessibility and focus details that make it valuable. In those cases, use a simple framework component and accept the trade-offs."
      }
    }
  ]
}
</script>
</div>

<div class="closing-section">
<!-- wp:paragraph -->
<p>Navigation is the one interface every visitor uses, and most people only notice it when it fails. Use this prompt, paste the output into your build, and get a responsive, accessible menu that feels familiar and works.</p>
<!-- /wp:paragraph -->
</div>]]></content:encoded>
					
		
		
		<media:content url="https://flowpast.s3.eu-north-1.amazonaws.com/featured_blog_images/5001437.webp" medium="image"></media:content>
            	</item>
		<item>
		<title>Design an Employee Onboarding Workflow with this AI Prompt</title>
		<link>https://flowpast.com/prompts/design-an-employee-onboarding-workflow-with-this-ai-prompt/</link>
		
		<dc:creator><![CDATA[Lisa Granqvist]]></dc:creator>
		<pubDate>Fri, 23 Jan 2026 02:31:56 +0000</pubDate>
				<category><![CDATA[Prompts]]></category>
		<guid isPermaLink="false">https://flowpast.com/?p=5003171</guid>

					<description><![CDATA[Onboarding tasks fall through the cracks - use this AI Prompt to design a BPMN employee workflow with owners, exceptions, and integrations. Discover more AI prompts for marketing, sales, and ops.]]></description>
										<content:encoded><![CDATA[<!-- FOCUS_KEYWORD: employee onboarding workflow -->
<div class="hook-introduction">

<p>Onboarding usually breaks in the handoffs. HR sends a welcome email, IT misses the laptop request, managers improvise training, and nobody can tell you what “done” actually means. Then week one turns into a scavenger hunt. Honestly, it’s exhausting for everyone.</p>



<p>This <strong>employee onboarding workflow</strong> is built for <strong>People Ops managers</strong> who need a repeatable process across departments, <strong>Ops leaders</strong> trying to eliminate manual follow-ups and missed tasks, and <strong>HR consultants</strong> documenting a scalable onboarding system for clients. The output is a BPMN 2.0–aligned workflow model plus an integration approach, an implementation plan (including near-term wins), and KPIs you can track for time-to-productivity and new-hire satisfaction.</p>

</div>

<div class="what-and-when-section">

<h2 class="wp-block-heading">What Does This AI Prompt Do and When to Use It?</h2>



<table class="solution-results-table three-column" role="presentation" aria-label="What this prompt does, when to use it, and what you get">
 <thead>
    <tr>
      <th scope="col">What This Prompt Does</th>
      <th scope="col">When to Use This Prompt</th>
      <th scope="col">What You&#8217;ll Get</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <ul class="automation-list">
          <li>Maps an end-to-end onboarding journey from offer acceptance to “productive and fully enabled,” using BPMN 2.0 naming conventions.</li>
          <li>Assigns an explicit owner to every automated activity (role, team, or system) so nothing sits in limbo.</li>
          <li>Designs gateways, parallel paths, and lanes/pools to handle departmental and location variation without forking the whole process.</li>
          <li>Builds manual exception handling paths for automation failures, with clear escalation points and audit-friendly logging requirements.</li>
          <li>Recommends pragmatic tool integrations across your current stack, including learning system progress tracking and compliance handoffs.</li>
       </ul>
      </td>
      <td>
        <ul class="results-list">
          <li>You’re seeing repeated day-one failures: missing accounts, late equipment, or untracked policy acknowledgments.</li>
          <li>Your onboarding “checklist” lives in spreadsheets and Slack threads, so owners and deadlines are fuzzy at best.</li>
          <li>You need to standardize onboarding across roles (sales, engineering, frontline) while keeping a single core process.</li>
          <li>Leadership wants metrics like time-to-productivity, but the process isn’t instrumented to produce reliable data.</li>
          <li>You’re scaling headcount or opening a new region and you can’t afford a fragile, people-dependent workflow.</li>
        </ul>
      </td>
       <td>
         <ul class="deliverables-list">
           <li>A BPMN 2.0–aligned onboarding process model with events, tasks, gateways, and lanes clearly labeled.</li>
           <li>An integration map that lists systems involved (HRIS, ITSM, IAM, e-sign, LMS) and what data moves where.</li>
           <li>A step-by-step implementation plan with near-term automation wins and longer-term sequencing.</li>
           <li>A set of exception flows for common failure modes (e-sign fails, provisioning error, missing manager input), including manual fallback owners.</li>
           <li>A KPI scorecard with specific metrics and definitions (cycle times, completion rates, satisfaction signals, rework volume).</li>
         </ul>
       </td>
    </tr>
  </tbody>
</table>

</div>

<div class="prompt-display-section">

<h2 class="wp-block-heading">The Full AI Prompt: BPMN Employee Onboarding Workflow Designer</h2>


<!-- Prompt file not found: /home/flowpast/htdocs/flowpast.com/wp-content/data/prompts_scraped/5006480/prompt-2026.txt -->

</div>

<div class="pro-tips-section">

<h2 class="wp-block-heading">Pro Tips for Better AI Prompt Results</h2>



<ul class="wp-block-list">

<li><strong>Hand the AI your current toolstack first.</strong> Before you run the prompt, list your HRIS, ticketing system, identity provider, e-sign vendor, LMS, and messaging channels. Then ask: “Use only these tools; propose integrations without replacing them.” You will get a workflow that’s implementable, not aspirational.</li>


<li><strong>Define the “productive and fully enabled” end state.</strong> It sounds obvious, but teams disagree: is it “first PR merged,” “first shift completed,” or “access + training + manager sign-off”? Add a follow-up request like: “Write the end event criteria for (Sales AE, Backend Engineer, Store Associate) as measurable checks.”</li>

<li><strong>Force real exception paths.</strong> Many flows look clean until the first integration fails. After the first draft, prompt: “For each automated task, list the top 2 failure modes, the manual fallback task, and the owner. Keep the audit trail requirement.” This is where the BPMN model becomes operational.</li>


<li><strong>Ask for parallelization, then sanity-check choke points.</strong> Onboarding drags when everything is sequential. Try: “Identify which tasks can run in parallel (provisioning, equipment, training enrollment, compliance docs) and add gateways accordingly.” After that, push one more iteration: “Now remove any new bottlenecks you introduced, especially manager approvals.”</li>


<li><strong>Instrument KPIs like a reporting spec.</strong> Don’t accept “track satisfaction” as a metric. Request: “For each KPI, define the data source, field name (if applicable), calculation, and reporting cadence; include one leading indicator and one lagging indicator.” Frankly, this makes the difference between a diagram and a system you can manage.</li>

</ul>
<!-- /wp:post-content -->
</div>

<div class="related-prompts-section">
<!-- wp:heading {"level":2} -->
<h2 class="wp-block-heading">Related Prompts</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Once your onboarding workflow is designed, you still need internal comms and enablement content to make it feel human and consistent.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you also need day-one and week-one messaging ideas that managers can reuse, <a href="https://flowpast.com/prompts/turn-linkedin-posts-into-templates-ai-prompt/">Turn LinkedIn Posts Into Templates AI Prompt</a> is a handy way to turn good internal notes into repeatable templates (welcome messages, training nudges, “here’s what happens next” updates).</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For teams doing a lot of stakeholder updates (HR, IT, hiring managers), <a href="https://flowpast.com/prompts/create-5-linkedin-post-concepts-with-this-ai-prompt/">Create 5 LinkedIn Post Concepts with this AI Prompt</a> can be repurposed to draft clear internal announcements about process changes, new onboarding standards, and what each team should expect.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>When you want punchier subject lines and intranet headlines for your new onboarding rollout, <a href="https://flowpast.com/prompts/create-linkedin-headlines-with-this-ai-prompt/">Create LinkedIn Headlines with this AI Prompt</a> helps you generate options that are specific, scannable, and less “corporate memo.”</p>
<!-- /wp:paragraph -->

<br>

<!-- wp:paragraph -->
<p>Quick reference:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li><a href="https://flowpast.com/prompts/turn-linkedin-posts-into-templates-ai-prompt/">Turn LinkedIn Posts Into Templates AI Prompt</a>: Convert updates into reusable internal templates.</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="https://flowpast.com/prompts/create-5-linkedin-post-concepts-with-this-ai-prompt/">Create 5 LinkedIn Post Concepts with this AI Prompt</a>: Generate concept batches for onboarding announcements.</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="https://flowpast.com/prompts/create-linkedin-headlines-with-this-ai-prompt/">Create LinkedIn Headlines with this AI Prompt</a>: Write clearer headlines for rollout materials.</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="https://flowpast.com/prompts/create-3-linkedin-marketing-post-concepts-ai-prompt/">Create 3 LinkedIn Marketing Post Concepts AI Prompt</a>: Draft three targeted angles for updates.</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="https://flowpast.com/prompts/create-linkedin-post-ideas-that-spark-comments-ai-prompt/">Create LinkedIn Post Ideas That Spark Comments AI Prompt</a>: Create prompts for feedback and Q&amp;A engagement.</li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->
</div>

<div class="faq-section">
<!-- wp:heading {"level":2} -->
<h2 class="wp-block-heading">Common Questions</h2>
<!-- /wp:heading -->

<div class="faq-item">
<span class="question">Which roles benefit most from this employee onboarding workflow AI prompt?</span>
<!-- wp:paragraph -->
<p class="answer"><strong>People Ops / HR Operations Managers</strong> use this to turn scattered checklists into a single BPMN-defined process with owners, escalation paths, and measurable milestones. <strong>IT Operations or IT Service Management leads</strong> benefit because the workflow forces clear provisioning triggers, system handoffs, and exception handling when accounts or devices fail to provision. <strong>Operations Managers</strong> use it to remove redundant steps and unblock parallel work so onboarding doesn’t stall on one approval. <strong>HR consultants</strong> leverage it to deliver client-ready documentation: a model, an integration approach, and an implementation plan tied to KPIs.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Which industries get the most value from this employee onboarding workflow AI prompt?</span>
<!-- wp:paragraph -->
<p class="answer"><strong>SaaS and tech teams</strong> get value because access, security groups, repos, and device provisioning create lots of failure points; the prompt bakes in owners and manual fallbacks. <strong>Retail and frontline organizations</strong> benefit from role/location variation, where training and scheduling need a consistent core flow without fragmenting into dozens of versions. <strong>Healthcare and regulated services</strong> use the compliance and audit trail requirements to ensure document signing, policy acknowledgments, and training completion are provable. <strong>Professional services firms</strong> apply it to standardize onboarding across client teams while still supporting department-specific enablement paths.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Why do basic AI prompts for designing an employee onboarding workflow produce weak results?</span>
<!-- wp:paragraph -->
<p class="answer">A typical prompt like “Write me an onboarding workflow for my company” fails because it: lacks BPMN 2.0 structure (events, gateways, lanes), so you can’t implement it cleanly; provides no explicit ownership, so tasks still get dropped; ignores integration realities and assumes magic automation; skips exception handling, which is where onboarding breaks in real life; and produces generic “best practices” instead of a model, an implementation plan, and KPIs you can actually track.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Can I customize this employee onboarding workflow prompt for my specific situation?</span>
<!-- wp:paragraph -->
<p class="answer">Yes. The simplest way is to add your constraints before running it: your current toolstack, your employee types (remote, hybrid, on-site), and what “productive” means in measurable terms. You can also specify required compliance steps (e-sign, policy acknowledgments, background checks) and where legal review is needed as a handoff. After the first output, ask: “Adapt the BPMN flow for three roles and two locations, but keep one shared core process; list the differences as conditional paths.” That keeps the model consistent while still reflecting reality.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">What are the most common mistakes when using this employee onboarding workflow prompt?</span>
<!-- wp:paragraph -->
<p class="answer">The biggest mistake is leaving your “end state” vague — instead of “fully onboarded,” use something like “All accounts provisioned, required training completed, manager confirms first-week goals set, and employee can execute core tasks without blockers.” Another common error is not naming your systems, which leads to unusable integration recommendations; “we use Okta, Jira Service Management, Workday, DocuSign, and Docebo” beats “we have HR and IT tools.” Teams also forget exception handling; don’t accept a flow that doesn’t state who owns manual remediation when, say, e-signature fails or provisioning errors out. Finally, people omit audit/compliance needs, so the model misses where records must be stored and who signs off.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Who should NOT use this employee onboarding workflow prompt?</span>
<!-- wp:paragraph -->
<p class="answer">This prompt isn’t ideal for one-off onboarding hires where you won’t implement automation or track KPIs, because the BPMN and integration work will be overkill. It’s also not the best fit if you haven’t validated your basic onboarding requirements (documents, training, provisioning responsibilities) and you just want a quick checklist. And if your organization can’t change cross-team ownership or tooling workflows right now, you may want to start with a lightweight SOP first, then come back to BPMN once stakeholders are aligned.</p>
<!-- /wp:paragraph -->
</div>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Which roles benefit most from this employee onboarding workflow AI prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "People Ops / HR Operations Managers use this to turn scattered checklists into a single BPMN-defined process with owners, escalation paths, and measurable milestones. IT Operations or IT Service Management leads benefit because the workflow forces clear provisioning triggers, system handoffs, and exception handling when accounts or devices fail to provision. Operations Managers use it to remove redundant steps and unblock parallel work so onboarding doesn’t stall on one approval. HR consultants leverage it to deliver client-ready documentation: a model, an integration approach, and an implementation plan tied to KPIs."
      }
    },
    {
      "@type": "Question",
      "name": "Which industries get the most value from this employee onboarding workflow AI prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "SaaS and tech teams get value because access, security groups, repos, and device provisioning create lots of failure points; the prompt bakes in owners and manual fallbacks. Retail and frontline organizations benefit from role/location variation, where training and scheduling need a consistent core flow without fragmenting into dozens of versions. Healthcare and regulated services use the compliance and audit trail requirements to ensure document signing, policy acknowledgments, and training completion are provable. Professional services firms apply it to standardize onboarding across client teams while still supporting department-specific enablement paths."
      }
    },
    {
      "@type": "Question",
      "name": "Why do basic AI prompts for designing an employee onboarding workflow produce weak results?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "A typical prompt like “Write me an onboarding workflow for my company” fails because it: lacks BPMN 2.0 structure (events, gateways, lanes), so you can’t implement it cleanly; provides no explicit ownership, so tasks still get dropped; ignores integration realities and assumes magic automation; skips exception handling, which is where onboarding breaks in real life; and produces generic “best practices” instead of a model, an implementation plan, and KPIs you can actually track."
      }
    },
    {
      "@type": "Question",
      "name": "Can I customize this employee onboarding workflow prompt for my specific situation?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Yes. The simplest way is to add your constraints before running it: your current toolstack, your employee types (remote, hybrid, on-site), and what “productive” means in measurable terms. You can also specify required compliance steps (e-sign, policy acknowledgments, background checks) and where legal review is needed as a handoff. After the first output, ask: “Adapt the BPMN flow for three roles and two locations, but keep one shared core process; list the differences as conditional paths.” That keeps the model consistent while still reflecting reality."
      }
    },
    {
      "@type": "Question",
      "name": "What are the most common mistakes when using this employee onboarding workflow prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "The biggest mistake is leaving your “end state” vague — instead of “fully onboarded,” use something like “All accounts provisioned, required training completed, manager confirms first-week goals set, and employee can execute core tasks without blockers.” Another common error is not naming your systems, which leads to unusable integration recommendations; “we use Okta, Jira Service Management, Workday, DocuSign, and Docebo” beats “we have HR and IT tools.” Teams also forget exception handling; don’t accept a flow that doesn’t state who owns manual remediation when, say, e-signature fails or provisioning errors out. Finally, people omit audit/compliance needs, so the model misses where records must be stored and who signs off."
      }
    },
    {
      "@type": "Question",
      "name": "Who should NOT use this employee onboarding workflow prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "This prompt isn’t ideal for one-off onboarding hires where you won’t implement automation or track KPIs, because the BPMN and integration work will be overkill. It’s also not the best fit if you haven’t validated your basic onboarding requirements (documents, training, provisioning responsibilities) and you just want a quick checklist. And if your organization can’t change cross-team ownership or tooling workflows right now, you may want to start with a lightweight SOP first, then come back to BPMN once stakeholders are aligned."
      }
    }
  ]
}
</script>
</div>

<div class="closing-section">
<!-- wp:paragraph -->
<p>Onboarding is an operational system, not a welcome email. Use this prompt to map the real workflow, assign owners, and build a process you can measure and improve.</p>
<!-- /wp:paragraph -->
</div>]]></content:encoded>
					
		
		
		<media:content url="https://flowpast.s3.eu-north-1.amazonaws.com/featured_blog_images/5003171.webp" medium="image"></media:content>
            	</item>
		<item>
		<title>Build an Automated Employee Onboarding System AI Prompt</title>
		<link>https://flowpast.com/prompts/build-an-automated-employee-onboarding-system-ai-prompt/</link>
		
		<dc:creator><![CDATA[Lisa Granqvist]]></dc:creator>
		<pubDate>Fri, 23 Jan 2026 02:13:04 +0000</pubDate>
				<category><![CDATA[Prompts]]></category>
		<guid isPermaLink="false">https://flowpast.com/?p=5001710</guid>

					<description><![CDATA[Manual onboarding slows hires - a plug-and-play AI Prompt that maps an automated system from discovery to optimization with tools and metrics. Discover more AI prompts for marketing, sales, and ops.]]></description>
										<content:encoded><![CDATA[<!-- FOCUS_KEYWORD: employee onboarding system -->
<div class="hook-introduction">

<p>Manual onboarding breaks in the same places every time: forms get lost, approvals stall, accounts don’t get created, and new hires spend day one waiting. HR ends up chasing signatures and copy-pasting data across tools instead of improving the experience. It’s frustrating. And it scales badly.</p>



<p>This <strong>employee onboarding system</strong> is built for <strong>HR operations managers</strong> who need to standardize onboarding across teams, <strong>people leaders</strong> who are tired of inconsistent first-week experiences, and <strong>operations consultants</strong> who must turn a messy, manual process into a repeatable workflow quickly. The output is a step-by-step, automation-first roadmap (from current-state diagnosis through continuous improvement) including triggers, owners, SLAs, exception paths, and recommended tool categories and integrations.</p>

</div>

<div class="what-and-when-section">

<h2 class="wp-block-heading">What Does This AI Prompt Do and When to Use It?</h2>



<table class="solution-results-table three-column" role="presentation" aria-label="What this prompt does, when to use it, and what you get">
 <thead>
    <tr>
      <th scope="col">What This Prompt Does</th>
      <th scope="col">When to Use This Prompt</th>
      <th scope="col">What You&#8217;ll Get</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <ul class="automation-list">
          <li>Maps your current onboarding flow end-to-end and flags bottlenecks, duplicate data entry, and handoffs that are automation candidates.</li>
          <li>Designs a future-state automated workflow with triggers, owners, approvals, SLAs, and explicit exception handling.</li>
          <li>Recommends tool categories to connect (HRIS, ATS, IAM, ticketing, e-sign, forms) and defines what each system should “own.”</li>
          <li>Turns manual checklists into routed tasks, automated reminders, and rule-based assignments that change based on role, location, or start date.</li>
          <li>Builds an enablement plan so HR and internal operators can run the system without constant IT involvement.</li>
       </ul>
      </td>
      <td>
        <ul class="results-list">
          <li>You’re hiring faster than your process can handle and the “who does what” confusion is showing up in every start date.</li>
          <li>New hires report a rocky week one because equipment, access, or paperwork is not ready on time.</li>
          <li>You’re switching or consolidating systems (like HRIS/ATS) and need a clean workflow that matches how the business actually operates.</li>
          <li>Different departments run onboarding differently, and leadership wants a consistent baseline without killing flexibility.</li>
          <li>You need measurable onboarding performance (cycle time, completion rate, SLA misses) to justify investment in automation.</li>
        </ul>
      </td>
       <td>
         <ul class="deliverables-list">
           <li>An end-to-end roadmap spanning review, design, build, test, launch, and continuous improvement.</li>
           <li>A future-state workflow blueprint detailing triggers, task routing, approvals, SLAs, and exception paths.</li>
           <li>A practical tooling and integration outline, including which data fields should sync and where they should live.</li>
           <li>A training and enablement plan for HR operators and partner teams (IT, hiring managers, finance).</li>
           <li>A measurement plan with suggested metrics, checkpoints, and an optimization cadence.</li>
         </ul>
       </td>
    </tr>
  </tbody>
</table>

</div>

<div class="prompt-display-section">

<h2 class="wp-block-heading">The Full AI Prompt: Automated Onboarding System Roadmap</h2>



<div class="prompt-viewer-wrapper" id="prompt-section">
    <div class="prompt-comparison-row prompt-premium">
        <!-- Header with buttons -->
        <div class="prompt-row-header">
            <!-- <span class="prompt-row-icon">✨</span> -->
            <span class="prompt-row-title">
                                    Step 1: Customize the prompt with your input
                            </span>
            <div class="prompt-header-buttons">
                                    <button class="prompt-header-btn prompt-header-reset" onclick="resetPrompt()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
                            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
                        </svg>
                        <span>Reset</span>
                    </button>
                                <button class="prompt-header-btn prompt-header-copy-green flowpast-copy-prompt-btn" onclick="handlePromptCopy()">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                        <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
                    </svg>
                    <span>Customize and Copy Full Prompt</span>
                </button>
            </div>
        </div>

        <!-- Customize the Prompt Section -->
                    <div class="prompt-customize-section">
                <span class="customize-title">Customize the Prompt</span>
                <p class="customize-subtitle">Fill in the fields below to personalize this prompt for your needs.</p>
                <table class="customize-table">
                    <thead>
                        <tr>
                            <th>Variable</th>
                            <th>What to Enter</th>
                            <th>Customise the prompt</th>
                        </tr>
                    </thead>
                    <tbody>
                                                    <tr>
                                <td class="var-name"><code>[COMPANY_SIZE]</code></td>
                                <td class="var-desc">
                                    Specify the size of the company, including the number of employees or a general range.                                    <div class="var-example">For example: "Mid-sized company with 250 employees across 3 offices."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[COMPANY_SIZE]"
                                            placeholder="Enter your value here..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[CURRENT_ONBOARDING_PROCESS]</code></td>
                                <td class="var-desc">
                                    Describe the current onboarding process in detail, including steps, tools used, and any manual or automated workflows.                                    <div class="var-example">For example: "New hires complete paper forms, HR manually enters data into the HRIS, and IT receives email requests for account setup."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[CURRENT_ONBOARDING_PROCESS]"
                                            placeholder="Enter your value here..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[MAIN_ONBOARDING_CHALLENGES]</code></td>
                                <td class="var-desc">
                                    List the primary challenges or pain points in the current onboarding process, such as delays, inefficiencies, or errors.                                    <div class="var-example">For example: "Delays in IT account setup due to manual email requests; duplicate data entry between systems; inconsistent task tracking."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[MAIN_ONBOARDING_CHALLENGES]"
                                            placeholder="Enter your value here..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[CONTEXT]</code></td>
                                <td class="var-desc">
                                    Provide details on the current HR or IT systems and tools in use, if known, including software names and purposes.                                    <div class="var-example">For example: "Using Workday for HRIS, BambooHR for onboarding, and Okta for identity management."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[CONTEXT]"
                                            placeholder="Enter your value here..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[PRIMARY_GOAL]</code></td>
                                <td class="var-desc">
                                    State the main objective for automating the onboarding process, such as saving time, improving consistency, or enhancing employee experience.                                    <div class="var-example">For example: "Reduce onboarding time by 30% while ensuring data consistency across systems."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[PRIMARY_GOAL]"
                                            placeholder="Enter your value here..." />
                                                                    </td>
                            </tr>
                                            </tbody>
                </table>

                <button class="copy-customized-btn flowpast-copy-prompt-btn" onclick="handlePromptCopy()">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                        <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
                    </svg>
                    <span class="copy-customized-text">Customise the prompt now</span>
                </button>
            </div>
        
        <!-- Full Prompt Code Header -->
                    <div class="prompt-code-header">
                <span class="prompt-code-title">
                    Step 2: Copy the Prompt
                </span>
                <div class="prompt-code-buttons">
                    <!-- Reset: Only visible when unlocked -->
                    <button class="prompt-header-btn prompt-header-reset btn-when-unlocked" onclick="resetPrompt()" style="display: none;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
                            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
                        </svg>
                        <span>Reset</span>
                    </button>
                    <!-- Copy Full Prompt -->
                    <button class="prompt-header-btn prompt-header-copy flowpast-copy-prompt-btn" onclick="handlePromptCopy()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                            <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
                        </svg>
                        <span>Copy Full Prompt</span>
                    </button>
                </div>
            </div>
        

        <!-- Prompt Content -->
        <div class="prompt-box prompt-gated-wrapper">
            <!-- Gated: Blurred content -->
            <div class="prompt-gated-content">
                <div class="prompt-header-visible">OBJECTIVE</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">PERSONA</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">CONSTRAINTS</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">What This Is NOT</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">PROCESS</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">INPUTS</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">OUTPUT SPECIFICATION</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div><div class="locked-line" style="width: 80%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">QUALITY CHECKS</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div></div></div><div class="locked-section-icon">🔒</div></div>            </div>
            <!-- Unlocked: Full content (hidden by default) -->
            <div class="prompt-content-full" id="premium-prompt-content" style="display: none;">
                ## OBJECTIVE
Design a practical, automation-first roadmap that helps a company convert its current employee onboarding into a streamlined, integrated, largely hands-off workflow—from diagnosis through rollout and ongoing refinement.

## PERSONA
Act as a senior Human Resources operations leader with deep experience in workflow automation and HRIS/IT service integrations. Communicate in crisp, implementation-oriented language that a busy HR team can apply immediately.

## CONSTRAINTS
- Deliver an end-to-end plan that spans: current-state review → future-state design → build/configuration → testing → launch → continuous improvement.
- Prioritize automation over manual steps wherever feasible.
- Include tool/system selection, digital form creation, automated task routing, and system integrations.
- Address enablement: training HR staff (and any other internal operators) to run the new onboarding system.
- Keep each step short, specific, and action-ready.
- Use emoji-prefixed step numbering exactly as required in the **Output Specification**.

### What This Is NOT
- Not legal advice, compliance certification, or jurisdiction-specific policy drafting.
- Not vendor procurement paperwork or contract negotiation.
- Not a generic onboarding checklist; it must be explicitly oriented around automation and integration.
- Not an IT architecture diagram; keep it as an implementation plan (with integration considerations).

## PROCESS
1. **Pre-analysis confirmation:** Briefly restate your understanding of the company context using the provided inputs and name any assumptions.
2. **Current-state breakdown:** Identify the onboarding stages and pinpoint friction, delays, duplicate entry, and handoffs suitable for automation.
3. **Automation blueprint:** Define the target automated workflow, including triggers, owners, approvals, SLAs, and exception handling.
4. **Tooling and integration approach:** Recommend categories of tools/systems to use (e.g., HRIS, ATS, IAM, ticketing, e-sign, LMS), and how they should connect.
5. **Build + rollout sequencing:** Provide a staged implementation path (pilot → expand → optimize) with feedback loops.
6. **Edge cases:** If any required input is missing or unclear, ask up to 5 focused clarification questions. If still unanswered, proceed with reasonable defaults and label them clearly as assumptions.

## INPUTS
- **Company size:** [COMPANY_SIZE]
- **Current onboarding process (as it works today):** [CURRENT_ONBOARDING_PROCESS]
- **Main onboarding challenges:** [MAIN_ONBOARDING_CHALLENGES]
- **Existing HR/IT systems and tools (if known):** [CONTEXT]
- **Primary goal for automation (time saved, consistency, compliance, experience, etc.):** [PRIMARY_GOAL]

## OUTPUT SPECIFICATION
Provide a numbered, consecutive step-by-step plan using this exact pattern on every line:

🔹{Step Number} {Step Description}

Rules:
- {Step Number} must be an integer starting at 1 and increasing by 1.
- {Step Description} must be brief, specific, and include an action verb.
- Include enough steps to cover the full lifecycle (analysis to continuous improvement).
- Do not include extra sections before or after the steps other than the **Pre-analysis confirmation** paragraph at the top.

## QUALITY CHECKS
Before finalizing, verify:
- The plan identifies multiple automation opportunities tied to the stated challenges.
- Tooling/integration steps explicitly mention connecting HR and IT systems (not operating in silos).
- Digital forms and automated task assignment/routing are included with ownership and triggers.
- Feedback collection and an optimization cadence are present.
- HR staff training/enablement is included, and any assumptions are clearly labeled.            </div>
        </div>


    </div>

    <!-- CTA Row - Full width buttons -->
    <div class="prompt-cta-row">
        <button class="prompt-cta-btn prompt-cta-copy flowpast-copy-prompt-btn" onclick="handlePromptCopy()">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
            </svg>
            <span class="cta-copy-text">Copy Full Prompt</span>
        </button>
    </div>
</div>

<style>
    /* Gated prompt states */
    .prompt-gated-wrapper {
        position: relative;
    }

    /* When unlocked - show full content, hide gated */
    body.flowpast-unlocked .prompt-gated-wrapper .prompt-gated-content {
        display: none;
    }

    body.flowpast-unlocked .prompt-gated-wrapper .prompt-content-full {
        display: block !important;
    }

    /* Show/hide elements based on unlock state */
    body.flowpast-unlocked .btn-when-unlocked {
        display: inline-flex !important;
    }

    .prompt-viewer-wrapper {
        scroll-margin-top: 250px;
    }

    /* ========================================
   PROMPT VIEWER - MAIN WRAPPER
   ======================================== */
    .prompt-viewer-wrapper {
        margin: 30px 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* ========================================
   PROMPT BOX CONTAINER
   ======================================== */
    .prompt-comparison-row {
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid #e0e0e0;
        background: #fff;
    }

    /* ========================================
   HEADER WITH BUTTONS
   ======================================== */
    .prompt-row-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 20px;
        color: #fff !important;
        background: #141414;
        border-bottom: 1px solid #e0e0e0;
        flex-wrap: wrap;
    }

    .prompt-row-icon {
        font-size: 20px;
    }

    .prompt-row-title {
        font-weight: 600;
        font-size: 22px;
        color: #fff !important;
        text-decoration: underline
    }

    .prompt-header-buttons {
        margin-left: auto;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    /* Header buttons */
    .prompt-header-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
        border: none;
    }

    .prompt-header-copy {
        background: #3a3a3a;
        color: #fff;
    }

    .prompt-header-copy:hover {
        background: #2a2a2a;
    }

    .prompt-header-copy.copied {
        background: #2e7d32;
    }

    .prompt-header-copy-green {
        background: #04AA6D !important;
        color: #fff !important;
    }

    .prompt-header-copy-green:hover {
        background: #039860 !important;
    }

    .prompt-header-copy-green.copied {
        background: #2e7d32 !important;
    }

    .prompt-header-access {
        background: rgb(5, 152, 98);
        color: #fff !important;
    }

    .prompt-header-access:hover {
        background: rgb(4, 130, 83);
        transform: translateY(-1px);
    }

    /* ========================================
   PROMPT CONTENT - FULL (NO SCROLL)
   ======================================== */
    .prompt-box {
        background: #ffffff;
    }

    .prompt-content-full {
        padding: 24px;
        margin: 0;
        color: #202124;
        background: #ffffff;
        font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
        font-size: 13px;
        line-height: 1.7;
        white-space: pre-wrap;
        word-wrap: break-word;
        /* No scroll - show full content */
        max-height: none;
        overflow: visible;
    }

    /* Highlighted variable in prompt */
    .prompt-variable {
        background: #fff3cd;
        color: #1967d2;
        font-weight: 700;
        padding: 2px 4px;
        border-radius: 3px;
        border: 1px solid #ffc107;
    }

    .prompt-variable-filled {
        background: #d4edda;
        color: #155724;
        font-weight: 700;
        padding: 2px 4px;
        border-radius: 3px;
        border: 1px solid #28a745;
    }

    /* ========================================
   GATED CONTENT (NO ACCESS)
   ======================================== */
    .prompt-gated-content {
        padding: 24px;
        background: #ffffff;
        font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
        font-size: 13px;
        line-height: 1.8;
        max-height: none;
        overflow: visible;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        cursor: default;
    }

    /* ## headers - larger, black */
    .prompt-header-visible {
        color: #202124;
        font-weight: 600;
        margin: 5px 0 0px 0;
        font-size: 20px;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    /* ### headers - smaller, black */
    .prompt-header-visible.subheader {
        color: #202124;
        font-weight: 600;
        margin: 5px 0;
        font-size: 18px;
    }

    .prompt-header-visible:first-child {
        margin-top: 0;
    }

    /* ========================================
   LOCKED SECTION BLOCK
   ======================================== */
    .locked-section {
        position: relative;
        margin: 4px 0 8px 0;
        border-radius: 6px;
        overflow: hidden;
        background: linear-gradient(110deg, #e2e8f0 8%, #f1f5f9 18%, #e2e8f0 33%);
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    .locked-section-bg {
        position: relative;
    }

    .locked-section-lines {
        padding: 8px 12px;
        position: relative;
    }

    .locked-line {
        height: 6px;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 3px;
        margin-bottom: 4px;
        margin-left: 12px;
    }

    .locked-line:last-child {
        margin-bottom: 0;
    }

    .locked-section-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        font-size: 24px;
        filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
    }

    /* Subheader locked sections - slightly indented */
    /*  .prompt-header-visible.subheader+.locked-section {
        margin-left: 16px;
    } */

    /* ========================================
   COMPATIBILITY BADGES
   ======================================== */
    .prompt-compatibility {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 12px 20px;
        background: #f8f9fa;
        border-top: 1px solid #e0e0e0;
    }

    .compat-label {
        font-size: 13px;
        color: #5f6368;
        font-weight: 500;
    }

    .compat-badge {
        padding: 4px 10px;
        background: #e8f0fe;
        color: #1967d2;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
    }

    /* ========================================
   CTA ROW - FULL WIDTH BUTTONS
   ======================================== */
    .prompt-cta-row {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }

    .prompt-cta-btn {
        flex: 1;
        min-width: 200px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 16px 24px;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
        border: none;
    }

    .prompt-cta-copy {
        background: #3a3a3a;
        color: #fff;
    }

    .prompt-cta-copy:hover {
        background: #2a2a2a;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .prompt-cta-copy.copied {
        background: #2e7d32;
    }

    .prompt-cta-reset {
        background: #3a3a3a;
        color: #fff;
    }

    .prompt-cta-reset:hover {
        background: #2a2a2a;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .prompt-cta-access {
        background: rgb(5, 152, 98);
        color: #fff !important;
    }

    .prompt-cta-access:hover {
        background: rgb(4, 130, 83);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(5, 152, 98, 0.3);
    }

    /* ========================================
    CUSTOMIZE YOUR PROMPT SECTION
    ======================================== */
    .prompt-customize-section {
        padding: 24px;
        border-bottom: 1px solid #e0e0e0;
        background: #fafbfc;
    }

    .customize-title {
        margin: 0 0 8px 0;
        font-size: 18px;
        font-weight: 700;
        color: #202124;
    }

    .customize-subtitle {
        margin: 0 0 20px 0;
        font-size: 14px;
        color: #5f6368;
    }

    .customize-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
    }

    .customize-table th {
        text-align: left;
        padding: 12px;
        background: #f1f3f4;
        border: 1px solid #e0e0e0;
        font-size: 13px;
        font-weight: 600;
        color: #202124;
    }

    .customize-table td {
        padding: 12px;
        border: 1px solid #e0e0e0;
        vertical-align: top;
    }

    .customize-table .var-name {
        width: 25%;
        background: #f8f9fa;
    }

    .customize-table .var-name code {
        background: #fff3cd;
        color: #1967d2;
        border: 1px solid #ffc107;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        word-break: break-all;
        font-weight: 600;
    }

    .customize-table .var-desc {
        width: 35%;
        font-size: 13px;
        color: #5f6368;
        line-height: 1.5;
    }

    .customize-table .var-example {
        margin-top: 8px;
        padding: 8px 10px;
        background: #f8f9fa;
        border-left: 3px solid #dadce0;
        font-size: 12px;
        color: #5f6368;
        font-style: italic;
        border-radius: 0 4px 4px 0;
    }

    .customize-table .var-input {
        width: 40%;
    }

    .customize-input {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #dadce0;
        border-radius: 6px;
        font-size: 13px;
        font-family: inherit;
        resize: vertical;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .customize-input:focus {
        outline: none;
        border-color: rgb(5, 152, 98);
        box-shadow: 0 0 0 3px rgba(5, 152, 98, 0.1);
    }

    .customize-input::placeholder {
        color: #9aa0a6;
        font-style: italic;
    }

    .copy-customized-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 16px 24px;
        background: rgb(5, 152, 98);
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .copy-customized-btn:hover {
        background: rgb(4, 130, 83);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(5, 152, 98, 0.3);
    }

    .copy-customized-btn.copied {
        background: #2e7d32;
    }

    /* ========================================
    FULL PROMPT CODE HEADER
    ======================================== */
    .prompt-code-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px;
        color: #fff !important;
        background: #141414;
        border-bottom: 1px solid #e0e0e0;
    }

    .prompt-code-title {
        font-size: 22px;
        font-weight: 600;
        text-decoration: underline;

    }

    .prompt-code-buttons {
        display: flex;
        gap: 8px;
    }

    .prompt-code-buttons .prompt-header-btn {
        padding: 8px 14px;
        font-size: 13px;
        background: #ffffff;
        color: #202124;
        border: 1px solid #dadce0;
    }

    .prompt-code-buttons .prompt-header-access {
        background: rgb(5, 152, 98);
        color: #fff !important;
        border-color: rgb(5, 152, 98);
    }

    .prompt-code-buttons .prompt-header-btn.prompt-header-access:hover {
        background: rgb(4, 130, 83) !important;
        border-color: rgb(4, 130, 83);
        color: #fff !important;
    }

    .prompt-code-buttons .prompt-header-btn:hover {
        background: #f1f3f4;
    }

    .prompt-code-buttons .prompt-header-copy.copied {
        background: #d4edda;
        color: #155724;
        border-color: #28a745;
    }

    .prompt-header-reset {
        background: #ffffff;
        color: #202124;
    }

    /* ========================================
   RESPONSIVE
   ======================================== */
    @media (max-width: 768px) {
        .prompt-row-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
        }

        .prompt-header-buttons {
            margin-left: 0;
            width: 100%;
        }

        .prompt-header-btn {
            flex: 1;
            justify-content: center;
        }

        .prompt-cta-row {
            flex-direction: column;
        }

        .prompt-cta-btn {
            width: 100%;
        }

        /* Customize table responsive */
        .customize-table,
        .customize-table thead,
        .customize-table tbody,
        .customize-table tr,
        .customize-table th,
        .customize-table td {
            display: block;
        }

        .customize-table thead {
            display: none;
        }

        .customize-table tr {
            margin-bottom: 16px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            overflow: hidden;
        }

        .customize-table td {
            width: 100% !important;
            border: none;
            border-bottom: 1px solid #e0e0e0;
        }

        .customize-table td:last-child {
            border-bottom: none;
        }

        .customize-table .var-name {
            background: #f1f3f4;
            font-weight: 600;
        }

        .prompt-code-header {
            flex-direction: column;
            gap: 12px;
            align-items: flex-start;
        }

        .prompt-code-buttons {
            width: 100%;
        }

        .prompt-code-buttons .prompt-header-btn {
            flex: 1;
            justify-content: center;
        }
    }
</style>

<script>
    function handlePromptCopy() {
        // Check if unlocked via cookie
        if (typeof window.flowpastIsUnlocked === 'function' && !window.flowpastIsUnlocked()) {
            // Show email popup
            if (typeof window.flowpastShowEmailPopup === 'function') {
                window.flowpastShowEmailPopup('prompt');
            }
            return;
        }

        // Copy the customized prompt (with filled variables)
        const customizedPrompt = getCustomizedPrompt();
        const copyButtons = document.querySelectorAll('.prompt-header-copy, .prompt-header-copy-green, .prompt-cta-copy, .copy-customized-btn');

        navigator.clipboard.writeText(customizedPrompt).then(() => {
            copyButtons.forEach(btn => {
                btn.classList.add('copied');
                const textSpan = btn.querySelector('span');
                if (textSpan) textSpan.textContent = 'Copied!';
            });

            setTimeout(() => {
                copyButtons.forEach(btn => {
                    btn.classList.remove('copied');
                    const textSpan = btn.querySelector('span');
                    if (textSpan) textSpan.textContent = 'Copy Full Prompt';
                });
            }, 2000);
        }).catch(err => {
            console.error('Failed to copy:', err);
        });
    }

    // Store original prompt for customization
    const originalPrompt = "## OBJECTIVE\r\nDesign a practical, automation-first roadmap that helps a company convert its current employee onboarding into a streamlined, integrated, largely hands-off workflow\u2014from diagnosis through rollout and ongoing refinement.\r\n\r\n## PERSONA\r\nAct as a senior Human Resources operations leader with deep experience in workflow automation and HRIS\/IT service integrations. Communicate in crisp, implementation-oriented language that a busy HR team can apply immediately.\r\n\r\n## CONSTRAINTS\r\n- Deliver an end-to-end plan that spans: current-state review \u2192 future-state design \u2192 build\/configuration \u2192 testing \u2192 launch \u2192 continuous improvement.\r\n- Prioritize automation over manual steps wherever feasible.\r\n- Include tool\/system selection, digital form creation, automated task routing, and system integrations.\r\n- Address enablement: training HR staff (and any other internal operators) to run the new onboarding system.\r\n- Keep each step short, specific, and action-ready.\r\n- Use emoji-prefixed step numbering exactly as required in the **Output Specification**.\r\n\r\n### What This Is NOT\r\n- Not legal advice, compliance certification, or jurisdiction-specific policy drafting.\r\n- Not vendor procurement paperwork or contract negotiation.\r\n- Not a generic onboarding checklist; it must be explicitly oriented around automation and integration.\r\n- Not an IT architecture diagram; keep it as an implementation plan (with integration considerations).\r\n\r\n## PROCESS\r\n1. **Pre-analysis confirmation:** Briefly restate your understanding of the company context using the provided inputs and name any assumptions.\r\n2. **Current-state breakdown:** Identify the onboarding stages and pinpoint friction, delays, duplicate entry, and handoffs suitable for automation.\r\n3. **Automation blueprint:** Define the target automated workflow, including triggers, owners, approvals, SLAs, and exception handling.\r\n4. **Tooling and integration approach:** Recommend categories of tools\/systems to use (e.g., HRIS, ATS, IAM, ticketing, e-sign, LMS), and how they should connect.\r\n5. **Build + rollout sequencing:** Provide a staged implementation path (pilot \u2192 expand \u2192 optimize) with feedback loops.\r\n6. **Edge cases:** If any required input is missing or unclear, ask up to 5 focused clarification questions. If still unanswered, proceed with reasonable defaults and label them clearly as assumptions.\r\n\r\n## INPUTS\r\n- **Company size:** [COMPANY_SIZE]\r\n- **Current onboarding process (as it works today):** [CURRENT_ONBOARDING_PROCESS]\r\n- **Main onboarding challenges:** [MAIN_ONBOARDING_CHALLENGES]\r\n- **Existing HR\/IT systems and tools (if known):** [CONTEXT]\r\n- **Primary goal for automation (time saved, consistency, compliance, experience, etc.):** [PRIMARY_GOAL]\r\n\r\n## OUTPUT SPECIFICATION\r\nProvide a numbered, consecutive step-by-step plan using this exact pattern on every line:\r\n\r\n\ud83d\udd39{Step Number} {Step Description}\r\n\r\nRules:\r\n- {Step Number} must be an integer starting at 1 and increasing by 1.\r\n- {Step Description} must be brief, specific, and include an action verb.\r\n- Include enough steps to cover the full lifecycle (analysis to continuous improvement).\r\n- Do not include extra sections before or after the steps other than the **Pre-analysis confirmation** paragraph at the top.\r\n\r\n## QUALITY CHECKS\r\nBefore finalizing, verify:\r\n- The plan identifies multiple automation opportunities tied to the stated challenges.\r\n- Tooling\/integration steps explicitly mention connecting HR and IT systems (not operating in silos).\r\n- Digital forms and automated task assignment\/routing are included with ownership and triggers.\r\n- Feedback collection and an optimization cadence are present.\r\n- HR staff training\/enablement is included, and any assumptions are clearly labeled.";
    const variables = ["[COMPANY_SIZE]","[CURRENT_ONBOARDING_PROCESS]","[MAIN_ONBOARDING_CHALLENGES]","[CONTEXT]","[PRIMARY_GOAL]"];
    // Initial render with highlighted variables
    document.addEventListener('DOMContentLoaded', function() {
        renderPromptWithHighlights();
    });

    // Live update prompt as user types
    document.querySelectorAll('.customize-input').forEach(input => {
        input.addEventListener('input', renderPromptWithHighlights);
    });

    function renderPromptWithHighlights() {
        const promptContent = document.getElementById('premium-prompt-content');
        if (!promptContent) return;

        let updatedPrompt = originalPrompt;
        let filledVariables = {};

        // Collect filled values
        document.querySelectorAll('.customize-input').forEach(input => {
            const placeholder = input.dataset.placeholder;
            const value = input.value.trim();

            if (value) {
                filledVariables[placeholder] = value;
            }
        });

        // Replace filled variables and highlight remaining
        let htmlContent = escapeHtml(updatedPrompt);

        variables.forEach(placeholder => {
            const escapedPlaceholder = escapeHtml(placeholder);
            const regex = new RegExp(escapeRegex(escapedPlaceholder), 'g');

            if (filledVariables[placeholder]) {
                // Show filled value with green highlight
                htmlContent = htmlContent.replace(regex,
                    '<span class="prompt-variable-filled">' + escapeHtml(filledVariables[placeholder]) + '</span>'
                );
            } else {
                // Show original placeholder with yellow highlight
                htmlContent = htmlContent.replace(regex,
                    '<span class="prompt-variable">' + escapedPlaceholder + '</span>'
                );
            }
        });

        promptContent.innerHTML = htmlContent;
    }

    function escapeRegex(string) {
        return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    }

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    function resetPrompt() {
        // Clear all input fields
        document.querySelectorAll('.customize-input').forEach(input => {
            input.value = '';
        });

        // Re-render with original placeholders highlighted
        renderPromptWithHighlights();

        // Visual feedback
        const resetBtns = document.querySelectorAll('.prompt-header-reset, .prompt-cta-reset');
        resetBtns.forEach(btn => {
            const originalText = btn.querySelector('span').textContent;
            btn.querySelector('span').textContent = 'Reset!';
            setTimeout(() => {
                btn.querySelector('span').textContent = originalText;
            }, 1000);
        });
    }


    function getCustomizedPrompt() {
        let updatedPrompt = originalPrompt;

        document.querySelectorAll('.customize-input').forEach(input => {
            const placeholder = input.dataset.placeholder;
            const value = input.value.trim();

            if (value) {
                const regex = new RegExp(escapeRegex(placeholder), 'g');
                updatedPrompt = updatedPrompt.replace(regex, value);
            }
        });

        return updatedPrompt;
    }
</script>

</div>

<div class="pro-tips-section">

<h2 class="wp-block-heading">Pro Tips for Better AI Prompt Results</h2>



<ul class="wp-block-list">

<li><strong>Feed it a real “last onboarding” story.</strong> Before you run the prompt, write a quick timeline of the last hire: start date, what went wrong, and where delays happened. Then paste it as context and ask, “Use this as the current-state example and identify the top 10 friction points.” You will get a sharper diagnostic.</li>


<li><strong>Force clear system ownership.</strong> Automation gets messy when two tools “own” the same data. After the first output, follow up with: “For every data element (legal name, address, title, manager, laptop model, start date), specify the system of record and which systems can only consume it.”</li>


<li><strong>Define exceptions on purpose.</strong> Most failures happen in edge cases: late changes, rehires, contractors, international starts, and internal transfers. Add a second pass prompt: “List the top 8 exceptions we should design for, the detection trigger for each, and what the fallback manual step is.” Short. Concrete. No vague advice.</li>


<li><strong>Iterate the workflow like a product.</strong> After you get the blueprint, ask: “Now tighten the plan into a 2-week MVP and a 6-week phase 2. Make phase 1 only the automations that remove the most HR hours.” Then request the opposite: “Now make the plan more conservative with fewer integrations and more guardrails.”</li>


<li><strong>Make metrics operational, not decorative.</strong> Don’t accept “track satisfaction” as the measurement plan. Ask: “Define 6 metrics with formulas, owners, a weekly dashboard view, and alert thresholds (e.g., SLA miss rate &gt; 5%). Also specify what action we take when each threshold is breached.” Honestly, this is where automation programs win or die.</li>

</ul>

</div>

<div class="related-prompts-section">

<h2 class="wp-block-heading">Related Prompts</h2>



<p>If you’re building new internal systems, these related prompts can help you communicate the change, stress-test the idea, or generate adjacent initiatives.</p>



<p>If onboarding changes require buy-in, a narrative can help stakeholders “get it” fast. The prompt <a href="https://flowpast.com/prompts/write-a-character-monologue-with-this-ai-prompt/">Write a Character Monologue with this AI Prompt</a> is useful when you want a realistic voice (an HR generalist, a hiring manager, or a new hire) to surface hidden objections and pain points you should design around.</p>



<p>When you’re documenting what the new hire experiences minute-by-minute, <a href="https://flowpast.com/prompts/write-a-scene-ready-inner-monologue-with-this-ai-prompt/">Write a Scene-Ready Inner Monologue with this AI Prompt</a> helps you simulate confusion, delays, and moments of reassurance. It’s a surprisingly effective way to spot gaps in task routing or missing instructions before you launch.</p>



<p>For internal comms, a lighter tone sometimes lands better than another policy doc. <a href="https://flowpast.com/prompts/write-a-satirical-explainer-monologue-with-this-ai-prompt/">Write a Satirical Explainer Monologue with this AI Prompt</a> can help you explain “why we’re changing onboarding” without sounding like a systems memo, especially if your company culture leans informal.</p>


<br>


<p>Quick reference:</p>



<ul class="wp-block-list">

<li><a href="https://flowpast.com/prompts/write-a-character-monologue-with-this-ai-prompt/">Write a Character Monologue with this AI Prompt</a>: Role-based narrative to reveal objections.</li>


<li><a href="https://flowpast.com/prompts/write-a-scene-ready-inner-monologue-with-this-ai-prompt/">Write a Scene-Ready Inner Monologue with this AI Prompt</a>: Simulate first-week experience to find gaps.</li>


<li><a href="https://flowpast.com/prompts/write-a-satirical-explainer-monologue-with-this-ai-prompt/">Write a Satirical Explainer Monologue with this AI Prompt</a>: Culture-friendly explanation for the change.</li>


<li><a href="https://flowpast.com/prompts/write-a-satirical-investigative-monologue-ai-prompt/">Write a Satirical Investigative Monologue AI Prompt</a>: Diagnose “what’s really broken” in ops.</li>


<li><a href="https://flowpast.com/prompts/generate-solo-ai-business-ideas-ai-prompt/">Generate Solo AI Business Ideas AI Prompt</a>: Spin off automation project opportunities.</li>

</ul>

</div>

<div class="faq-section">

<h2 class="wp-block-heading">Common Questions</h2>


<div class="faq-item">
<span class="question">Which roles benefit most from this employee onboarding system AI prompt?</span>

<p class="answer"><strong>HR Operations Managers</strong> use this to turn scattered tasks into one routed workflow with owners, SLAs, and exception paths they can actually manage. <strong>People/HRIS Analysts</strong> benefit because the prompt pushes for system-of-record clarity and integration touchpoints, which reduces rework during configuration. <strong>IT Service Management Leads</strong> get value when onboarding depends on ticketing, access provisioning, and device setup, since the workflow blueprint makes dependencies and triggers explicit. <strong>Operations Consultants</strong> use it to produce a credible plan fast, then tailor the build and rollout for each client environment.</p>

</div>

<div class="faq-item">
<span class="question">Which industries get the most value from this employee onboarding system AI prompt?</span>

<p class="answer"><strong>SaaS companies</strong> get a lot of leverage because onboarding typically requires fast access provisioning across many tools (SSO, repos, customer support platforms), and missed steps slow productivity. <strong>E-commerce and logistics firms</strong> benefit when hourly and frontline roles require repeatable paperwork, scheduling, and equipment requests, where automation reduces day-one delays. <strong>Professional services firms</strong> use it to standardize manager tasks, compliance forms, and provisioning for billable staff so utilization ramps faster. <strong>Agencies</strong> find it especially helpful when hiring is spiky, because the roadmap supports scaling volume without adding HR headcount.</p>

</div>

<div class="faq-item">
<span class="question">Why do basic AI prompts for onboarding workflow automation produce weak results?</span>

<p class="answer">A typical prompt like “<em>Write me an onboarding process for my company</em>” fails because it: lacks a current-state diagnosis step, so it doesn’t address your real bottlenecks; provides no workflow mechanics (triggers, owners, approvals, SLAs), which makes automation impossible to implement; ignores integration realities across HRIS/ATS/IAM/ticketing, so tasks still get handled in Slack and spreadsheets; produces generic checklists instead of a build-and-launch roadmap; and misses enablement and continuous improvement, so the system degrades after the first rollout.</p>

</div>

<div class="faq-item">
<span class="question">Can I customize this employee onboarding system prompt for my specific situation?</span>

<p class="answer">Yes, and you should, because the best output depends on your current tools and onboarding volume. Add your context as a short brief: your HRIS and ATS, how accounts are provisioned today (SSO/IAM or manual), typical roles hired, and your biggest friction points. Then ask a follow-up like: “Assume we use an HRIS + ATS + ticketing tool. Propose two automation designs: one with light integrations and one with deeper integrations, and list the tradeoffs and risks.” If you operate across regions, include the locations so the plan can separate global steps from local exceptions.</p>

</div>

<div class="faq-item">
<span class="question">What are the most common mistakes when using this employee onboarding system prompt?</span>

<p class="answer">The biggest mistake is describing the “current process” too vaguely — instead of “we email managers a checklist,” say “HR emails a PDF checklist, managers reply when done, and IT gets a Slack message to create accounts in Google Workspace and Jira.” Another common error is skipping your tool reality; “we use some HR software” will produce fluff, while “HRIS: Workday, ATS: Greenhouse, ITSM: Jira Service Management, IAM: Okta” gives implementable routing and integration points. People also forget exception cases (rehire, contractor, internal transfer), which is how automations break in production. Finally, teams ask for a perfect end state and never ship; request an MVP phase with the top 3 automations first, then expand.</p>

</div>

<div class="faq-item">
<span class="question">Who should NOT use this employee onboarding system prompt?</span>

<p class="answer">This prompt isn’t ideal for teams that only need a one-time onboarding checklist with no intention to automate or integrate systems. It also won’t fit organizations that require jurisdiction-specific policy drafting or legal compliance sign-off as the core deliverable, because the prompt explicitly avoids that. And if you have no stable process to start from (everything is ad hoc and undocumented), you may need a short discovery workshop first to capture the real workflow. In those cases, document the current steps for two recent hires, then come back to the prompt with that evidence.</p>

</div>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Which roles benefit most from this employee onboarding system AI prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "HR Operations Managers use this to turn scattered tasks into one routed workflow with owners, SLAs, and exception paths they can actually manage. People/HRIS Analysts benefit because the prompt pushes for system-of-record clarity and integration touchpoints, which reduces rework during configuration. IT Service Management Leads get value when onboarding depends on ticketing, access provisioning, and device setup, since the workflow blueprint makes dependencies and triggers explicit. Operations Consultants use it to produce a credible plan fast, then tailor the build and rollout for each client environment."
      }
    },
    {
      "@type": "Question",
      "name": "Which industries get the most value from this employee onboarding system AI prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "SaaS companies get a lot of leverage because onboarding typically requires fast access provisioning across many tools (SSO, repos, customer support platforms), and missed steps slow productivity. E-commerce and logistics firms benefit when hourly and frontline roles require repeatable paperwork, scheduling, and equipment requests, where automation reduces day-one delays. Professional services firms use it to standardize manager tasks, compliance forms, and provisioning for billable staff so utilization ramps faster. Agencies find it especially helpful when hiring is spiky, because the roadmap supports scaling volume without adding HR headcount."
      }
    },
    {
      "@type": "Question",
      "name": "Why do basic AI prompts for onboarding workflow automation produce weak results?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "A typical prompt like “Write me an onboarding process for my company” fails because it: lacks a current-state diagnosis step, so it doesn’t address your real bottlenecks; provides no workflow mechanics (triggers, owners, approvals, SLAs), which makes automation impossible to implement; ignores integration realities across HRIS/ATS/IAM/ticketing, so tasks still get handled in Slack and spreadsheets; produces generic checklists instead of a build-and-launch roadmap; and misses enablement and continuous improvement, so the system degrades after the first rollout."
      }
    },
    {
      "@type": "Question",
      "name": "Can I customize this employee onboarding system prompt for my specific situation?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Yes, and you should, because the best output depends on your current tools and onboarding volume. Add your context as a short brief: your HRIS and ATS, how accounts are provisioned today (SSO/IAM or manual), typical roles hired, and your biggest friction points. Then ask a follow-up like: “Assume we use an HRIS + ATS + ticketing tool. Propose two automation designs: one with light integrations and one with deeper integrations, and list the tradeoffs and risks.” If you operate across regions, include the locations so the plan can separate global steps from local exceptions."
      }
    },
    {
      "@type": "Question",
      "name": "What are the most common mistakes when using this employee onboarding system prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "The biggest mistake is describing the “current process” too vaguely — instead of “we email managers a checklist,” say “HR emails a PDF checklist, managers reply when done, and IT gets a Slack message to create accounts in Google Workspace and Jira.” Another common error is skipping your tool reality; “we use some HR software” will produce fluff, while “HRIS: Workday, ATS: Greenhouse, ITSM: Jira Service Management, IAM: Okta” gives implementable routing and integration points. People also forget exception cases (rehire, contractor, internal transfer), which is how automations break in production. Finally, teams ask for a perfect end state and never ship; request an MVP phase with the top 3 automations first, then expand."
      }
    },
    {
      "@type": "Question",
      "name": "Who should NOT use this employee onboarding system prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "This prompt isn’t ideal for teams that only need a one-time onboarding checklist with no intention to automate or integrate systems. It also won’t fit organizations that require jurisdiction-specific policy drafting or legal compliance sign-off as the core deliverable, because the prompt explicitly avoids that. And if you have no stable process to start from (everything is ad hoc and undocumented), you may need a short discovery workshop first to capture the real workflow. In those cases, document the current steps for two recent hires, then come back to the prompt with that evidence."
      }
    }
  ]
}
</script>
</div>

<div class="closing-section">

<p>Onboarding shouldn’t feel like herding cats in five different tools. Paste this prompt into ChatGPT, generate your automation-first roadmap, and start building the version your team can actually run.</p>

</div>]]></content:encoded>
					
		
		
		<media:content url="https://flowpast.s3.eu-north-1.amazonaws.com/featured_blog_images/5001710.webp" medium="image"></media:content>
            	</item>
		<item>
		<title>Create a Skill Gap Diagnosis Report AI Prompt</title>
		<link>https://flowpast.com/prompts/create-a-skill-gap-diagnosis-report-ai-prompt/</link>
		
		<dc:creator><![CDATA[Lisa Granqvist]]></dc:creator>
		<pubDate>Fri, 23 Jan 2026 02:07:51 +0000</pubDate>
				<category><![CDATA[Prompts]]></category>
		<guid isPermaLink="false">https://flowpast.com/?p=5003148</guid>

					<description><![CDATA[Talent gaps widen fast - a proven AI Prompt that maps SHRM-based role gaps, targeted actions, and ROI metrics leaders can defend. Explore thousands of AI prompts by function and industry.]]></description>
										<content:encoded><![CDATA[<!-- FOCUS_KEYWORD: skill gap diagnosis -->
<div class="hook-introduction">

<p>Your teams look busy, but output still slips. Projects run late, quality varies, and managers can’t agree on what “good” actually looks like. The real issue is often a hidden capability gap, and the longer it stays fuzzy, the more expensive it gets.</p>



<p>This <strong>skill gap diagnosis</strong> is built for <strong>HR leaders</strong> who need a defensible workforce plan before next quarter’s targets lock, <strong>department heads</strong> trying to stop recurring performance drag role by role, and <strong>L&amp;D managers</strong> who are tired of “training” requests with no measurable business tie-in. The output is a role-by-role diagnostic report using the SHRM Competency Mapping Framework, separating technical, behavioral, and leadership gaps, then turning them into targeted interventions with ROI logic, timelines, and success measures.</p>

</div>

<div class="what-and-when-section">

<h2 class="wp-block-heading">What Does This AI Prompt Do and When to Use It?</h2>



<table class="solution-results-table three-column" role="presentation" aria-label="What this prompt does, when to use it, and what you get">
 <thead>
    <tr>
      <th scope="col">What This Prompt Does</th>
      <th scope="col">When to Use This Prompt</th>
      <th scope="col">What You&#8217;ll Get</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <ul class="automation-list">
          <li>It maps each role to SHRM-aligned competencies and flags gaps across technical, behavioral, and leadership categories.</li>
          <li>It links missing capabilities to measurable business drag (speed, cost, risk, quality, revenue, customer impact, or compliance).</li>
          <li>It separates individual skill deficiencies from team or system issues that make good performance hard (process, tooling, incentives, handoffs).</li>
          <li>It proposes focused interventions with validation methods, time-to-competency estimates, and success measures for each role-specific gap.</li>
          <li>It handles messy inputs by first confirming context and listing what’s missing before it produces confident conclusions.</li>
       </ul>
      </td>
      <td>
        <ul class="results-list">
          <li>You’re seeing recurring performance issues and need a root-cause view that’s more precise than “people need training.”</li>
          <li>A leader is asking for budget, but finance will push back unless the impact and measurement approach are explicit.</li>
          <li>You have a mix of tenured and new hires, and ramp time is inconsistent across the same job title.</li>
          <li>Customer or stakeholder complaints are increasing, and you suspect capability gaps but can’t pinpoint which ones.</li>
          <li>You’re scaling a function fast and want a targeted plan that prevents quality from dropping as headcount rises.</li>
        </ul>
      </td>
       <td>
         <ul class="deliverables-list">
           <li>A role-by-role diagnostic report covering 3 competency types (technical, behavioral, leadership) for each role in scope.</li>
           <li>A prioritized gap list with business exposure notes (what it costs, what it slows, what it risks) and why it matters now.</li>
           <li>Role-specific intervention plans, each with a validation method, time-to-competency estimate, and measurable success metrics.</li>
           <li>An adoption and workflow alignment section that ties interventions to career progression and day-to-day tasks.</li>
           <li>A short “missing inputs” checklist so you can gather the minimum data needed to firm up the recommendations.</li>
         </ul>
       </td>
    </tr>
  </tbody>
</table>

</div>

<div class="prompt-display-section">

<h2 class="wp-block-heading">The Full AI Prompt: Skill Gap Diagnosis Report Builder</h2>


<!-- Prompt file not found: /home/flowpast/htdocs/flowpast.com/wp-content/data/prompts_scraped/5006457/prompt-2026.txt -->

</div>

<div class="pro-tips-section">

<h2 class="wp-block-heading">Pro Tips for Better AI Prompt Results</h2>



<ul class="wp-block-list">

<li><strong>Start with outcomes, not skills.</strong> Give the prompt 3–6 concrete outputs per role (for example, “closes month-end in 3 days with &lt;1% rework” or “ships 2 experiments/week with documented learnings”). If you only describe responsibilities, the model has to guess what competence looks like.</li>


<li><strong>Feed it real signals, even if imperfect.</strong> Add whatever you have: QA scores, cycle time, win rate, customer tickets, audit findings, onboarding time, or manager notes. A useful follow-up: “Use these metrics as the business-drag evidence, and don’t invent numbers I didn’t provide.”</li>


<li><strong>Force the individual vs system split.</strong> Many “skill gaps” are really unclear process, weak enablement, or misaligned incentives. After the first run, ask: “For each gap, label it as primarily individual, team practice, or system constraint, and explain the proof I should look for.”</li>


<li><strong>Iterate the intervention design deliberately.</strong> Once you get recommendations, push for specificity: “Rewrite interventions so each one has: a 2-week first step, an observable behavior change, and a simple validation method a manager can run in weekly 1:1s.” Then refine again: “Now make option 2 more aggressive and option 4 more conservative.”</li>


<li><strong>Connect adoption to careers and daily workflow.</strong> This prompt is strong at avoiding “training theater,” but you still need to anchor it in reality. Try: “Tie each intervention to (a) a promotion rubric line item and (b) a daily trigger in the workflow (standup, ticket grooming, call review, QA checklist).” Honestly, that one change often doubles follow-through.</li>

</ul>

</div>

<div class="related-prompts-section">

<h2 class="wp-block-heading">Related Prompts</h2>



<p>After you’ve pinpointed the gaps, these prompts help you collect cleaner inputs and operationalize the work through communication and content planning.</p>



<p>If you also need better source data for the diagnosis, use <a href="https://flowpast.com/prompts/create-audience-survey-handbook-with-this-ai-prompt/">Create Audience Survey Handbook with this AI Prompt</a> to structure surveys and interviews that uncover where teams feel blocked, what “good” looks like, and which enablement is actually missing. It pairs well when your current evidence is anecdotal and you want a consistent set of questions across roles.</p>



<p>When the skill gaps you find affect customer-facing messaging or community management, <a href="https://flowpast.com/prompts/build-a-social-media-engagement-plan-with-this-ai-prompt/">Build a Social Media Engagement Plan with this AI Prompt</a> can turn the “what needs to change” into a day-by-day engagement approach. That’s handy when adoption friction is high and you need new behaviors reinforced by routine.</p>



<p>For teams doing broader go-to-market execution, <a href="https://flowpast.com/prompts/build-a-social-media-marketing-plan-with-this-ai-prompt/">Build a Social Media Marketing Plan with this AI Prompt</a> helps convert capability recommendations into structured campaigns, roles, and responsibilities. Use it when your gap diagnosis reveals unclear ownership or inconsistent execution across channels.</p>


<br>


<p>Quick reference:</p>



<ul class="wp-block-list">

<li><a href="https://flowpast.com/prompts/create-audience-survey-handbook-with-this-ai-prompt/">Create Audience Survey Handbook with this AI Prompt</a>: Collect consistent feedback and evidence.</li>


<li><a href="https://flowpast.com/prompts/build-a-social-media-engagement-plan-with-this-ai-prompt/">Build a Social Media Engagement Plan with this AI Prompt</a>: Turn findings into daily engagement routines.</li>


<li><a href="https://flowpast.com/prompts/build-a-social-media-marketing-plan-with-this-ai-prompt/">Build a Social Media Marketing Plan with this AI Prompt</a>: Operationalize execution with clear structure.</li>

<li><a href="https://flowpast.com/prompts/build-a-social-media-publishing-plan-with-this-ai-prompt/">Build a Social Media Publishing Plan with this AI Prompt</a>: Build calendars, cadence, and accountability.</li>

<li><a href="https://flowpast.com/prompts/create-a-social-media-content-strategy-with-this-ai-prompt/">Create a Social Media Content Strategy with this AI Prompt</a>: Align content to goals and audiences.</li>
<!-- /wp:post-content -->
</div>

<div class="faq-section">
<!-- wp:heading {"level":2} -->
<h2 class="wp-block-heading">Common Questions</h2>
<!-- /wp:heading -->

<div class="faq-item">
<span class="question">Which roles benefit most from this skill gap diagnosis AI prompt?</span>
<!-- wp:paragraph -->
<p class="answer"><strong>HR Business Partners</strong> use this to translate manager complaints into SHRM-based competency gaps with evidence, so interventions don’t feel political or arbitrary. <strong>Learning &amp; Development Managers</strong> use it to build targeted programs with validation methods, time-to-competency estimates, and success measures instead of generic course menus. <strong>Department Heads</strong> rely on it to isolate the few gaps driving the most operational drag and to separate “needs coaching” from “the system is broken.” <strong>Operations or People Analytics Leaders</strong> use it to tie capability work to measurable outcomes like cycle time, quality, and risk reduction.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Which industries get the most value from this skill gap diagnosis AI prompt?</span>
<!-- wp:paragraph -->
<p class="answer"><strong>SaaS and tech teams</strong> apply it when shipping cadence or incident rates point to gaps in execution, cross-functional collaboration, or first-line leadership. The prompt helps connect competencies to real outcomes like release quality, customer churn, and response time. <strong>Healthcare and life sciences</strong> get value because compliance, documentation quality, and patient/customer impact can be mapped cleanly to role competencies with clear validation methods. <strong>Manufacturing and logistics</strong> benefit when safety, throughput, and defect rates require role-level clarity and system-vs-individual diagnosis. <strong>Professional services firms</strong> use it to reduce rework, improve utilization, and standardize delivery behaviors across seniority levels.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Why do basic AI prompts for skill gap analysis produce weak results?</span>
<!-- wp:paragraph -->
<p class="answer">A typical prompt like “Write me a skill gap analysis for my team” fails because it: lacks a rigorous framework (this prompt anchors on the SHRM Competency Mapping Framework), provides no requirement to separate technical vs behavioral vs leadership gaps, and ignores business-drag linkage (risk, cost, speed, quality, revenue, or compliance). It also tends to output a generic training list instead of role-context interventions with validation, time-to-competency, and success measures. Finally, basic prompts don’t handle messy inputs well, so you get confident-sounding conclusions even when the underlying data is missing.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Can I customize this skill gap diagnosis prompt for my specific situation?</span>
<!-- wp:paragraph -->
<p class="answer">Yes. The prompt is designed to start with a pre-analysis confirmation, so you can steer scope by specifying the roles included, the decision urgency (for example, “budget due in 2 weeks”), and what success must look like in measurable terms. You can also influence the output by supplying job descriptions, performance metrics, a skill matrix, or examples of high vs low performer behaviors. If you want tighter recommendations, add a follow-up like: “Prioritize only the top 3 gaps per role, and propose interventions that can be validated within 30 days using existing manager rituals.”</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">What are the most common mistakes when using this skill gap diagnosis prompt?</span>
<!-- wp:paragraph -->
<p class="answer">The biggest mistake is being vague about roles and outputs, such as “sales team” instead of “5 SMB Account Executives selling $8–15K ACV on a 21-day cycle; target is 12 demos/month each.” Another common error is providing no business-drag evidence; “performance is low” is weak, while “proposal cycle time increased from 3 to 7 days and win rate dropped 8 points” gives the model something to map. People also forget to include system constraints, so the model over-attributes issues to individuals; mention tooling, process bottlenecks, and handoff points explicitly. Last, teams skip the validation methods, then can’t prove ROI, so ask it to define how each intervention will be tested and what success looks like.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Who should NOT use this skill gap diagnosis prompt?</span>
<!-- wp:paragraph -->
<p class="answer">This prompt isn’t ideal for one-off situations where you just need a quick training outline and won’t validate results. It’s also a poor fit if your roles and performance expectations are undefined, because the analysis depends on role outputs and evidence of business drag. And if you’re looking for a vendor-neutral course catalog or “company-wide upskilling themes,” this will feel too specific by design. In those cases, start with basic role definition and metrics hygiene, then come back to a diagnostic like this.</p>
<!-- /wp:paragraph -->
</div>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Which roles benefit most from this skill gap diagnosis AI prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "HR Business Partners use this to translate manager complaints into SHRM-based competency gaps with evidence, so interventions don’t feel political or arbitrary. Learning & Development Managers use it to build targeted programs with validation methods, time-to-competency estimates, and success measures instead of generic course menus. Department Heads rely on it to isolate the few gaps driving the most operational drag and to separate “needs coaching” from “the system is broken.” Operations or People Analytics Leaders use it to tie capability work to measurable outcomes like cycle time, quality, and risk reduction."
      }
    },
    {
      "@type": "Question",
      "name": "Which industries get the most value from this skill gap diagnosis AI prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "SaaS and tech teams apply it when shipping cadence or incident rates point to gaps in execution, cross-functional collaboration, or first-line leadership. The prompt helps connect competencies to real outcomes like release quality, customer churn, and response time. Healthcare and life sciences get value because compliance, documentation quality, and patient/customer impact can be mapped cleanly to role competencies with clear validation methods. Manufacturing and logistics benefit when safety, throughput, and defect rates require role-level clarity and system-vs-individual diagnosis. Professional services firms use it to reduce rework, improve utilization, and standardize delivery behaviors across seniority levels."
      }
    },
    {
      "@type": "Question",
      "name": "Why do basic AI prompts for skill gap analysis produce weak results?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "A typical prompt like “Write me a skill gap analysis for my team” fails because it: lacks a rigorous framework (this prompt anchors on the SHRM Competency Mapping Framework), provides no requirement to separate technical vs behavioral vs leadership gaps, and ignores business-drag linkage (risk, cost, speed, quality, revenue, or compliance). It also tends to output a generic training list instead of role-context interventions with validation, time-to-competency, and success measures. Finally, basic prompts don’t handle messy inputs well, so you get confident-sounding conclusions even when the underlying data is missing."
      }
    },
    {
      "@type": "Question",
      "name": "Can I customize this skill gap diagnosis prompt for my specific situation?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Yes. The prompt is designed to start with a pre-analysis confirmation, so you can steer scope by specifying the roles included, the decision urgency (for example, “budget due in 2 weeks”), and what success must look like in measurable terms. You can also influence the output by supplying job descriptions, performance metrics, a skill matrix, or examples of high vs low performer behaviors. If you want tighter recommendations, add a follow-up like: “Prioritize only the top 3 gaps per role, and propose interventions that can be validated within 30 days using existing manager rituals.”"
      }
    },
    {
      "@type": "Question",
      "name": "What are the most common mistakes when using this skill gap diagnosis prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "The biggest mistake is being vague about roles and outputs, such as “sales team” instead of “5 SMB Account Executives selling $8–15K ACV on a 21-day cycle; target is 12 demos/month each.” Another common error is providing no business-drag evidence; “performance is low” is weak, while “proposal cycle time increased from 3 to 7 days and win rate dropped 8 points” gives the model something to map. People also forget to include system constraints, so the model over-attributes issues to individuals; mention tooling, process bottlenecks, and handoff points explicitly. Last, teams skip the validation methods, then can’t prove ROI, so ask it to define how each intervention will be tested and what success looks like."
      }
    },
    {
      "@type": "Question",
      "name": "Who should NOT use this skill gap diagnosis prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "This prompt isn’t ideal for one-off situations where you just need a quick training outline and won’t validate results. It’s also a poor fit if your roles and performance expectations are undefined, because the analysis depends on role outputs and evidence of business drag. And if you’re looking for a vendor-neutral course catalog or “company-wide upskilling themes,” this will feel too specific by design. In those cases, start with basic role definition and metrics hygiene, then come back to a diagnostic like this."
      }
    }
  ]
}
</script>
</div>

<div class="closing-section">
<!-- wp:paragraph -->
<p>Skill gaps don’t fix themselves, and generic training rarely touches the real bottleneck. Paste the prompt into your AI tool, give it your roles and evidence, and walk away with an intervention plan you can actually defend.</p>
<!-- /wp:paragraph -->
</div>]]></content:encoded>
					
		
		
		<media:content url="https://flowpast.s3.eu-north-1.amazonaws.com/featured_blog_images/5003148.webp" medium="image"></media:content>
            	</item>
		<item>
		<title>Build a Local-First Automation Platform AI Prompt</title>
		<link>https://flowpast.com/prompts/build-a-local-first-automation-platform-ai-prompt/</link>
		
		<dc:creator><![CDATA[Lisa Granqvist]]></dc:creator>
		<pubDate>Fri, 23 Jan 2026 01:51:20 +0000</pubDate>
				<category><![CDATA[Prompts]]></category>
		<guid isPermaLink="false">https://flowpast.com/?p=5001381</guid>

					<description><![CDATA[Workflows fail in production - the ultimate AI Prompt that designs a durable TypeScript engine, observability, and a polished web UI. Discover more AI prompts for marketing, sales, and ops.]]></description>
										<content:encoded><![CDATA[<!-- FOCUS_KEYWORD: local-first automation platform -->
<div class="hook-introduction">

<p>Workflows look “done” in staging, then collapse in production. A webhook arrives twice, an API rate-limits you at the worst time, a partial outage turns one bad payload into a backlog, and suddenly you’re firefighting instead of shipping. The real problem is not the happy path. It’s everything around it.</p>



<p>This <strong>local-first automation platform</strong> is built for <strong>ops leads</strong> who need durable automations that can be re-run safely, <strong>product teams</strong> replacing brittle Zapier-style chains with a typed internal engine, and <strong>consultants</strong> implementing client-specific processes with real observability. The output is a production-ready React + Node.js (TypeScript) system design, a polished dark-themed web UI spec (canvas, runs dashboard, admin/settings), and implementation details including tests that simulate 100+ varied workflow runs.</p>

</div>

<div class="what-and-when-section">

<h2 class="wp-block-heading">What Does This AI Prompt Do and When to Use It?</h2>



<table class="solution-results-table three-column" role="presentation" aria-label="What this prompt does, when to use it, and what you get">
 <thead>
    <tr>
      <th scope="col">What This Prompt Does</th>
      <th scope="col">When to Use This Prompt</th>
      <th scope="col">What You&#8217;ll Get</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <ul class="automation-list">
          <li>It designs a locally runnable workflow engine that covers triggers, processing, and actions end-to-end for your specific process.</li>
          <li>It maps edge cases and “messy data” scenarios, then bakes in idempotency and safe re-runs so duplicates do not corrupt results.</li>
          <li>It specifies retries with backoff, timeouts, rate-limit handling, and dead-lettering/quarantine paths for poisoned messages.</li>
          <li>It defines a TypeScript-first architecture with clean API boundaries, strongly typed contracts, and integration adapters.</li>
          <li>It plans observability (structured logs, metrics, alerts) and a UI that shows live execution status, failures, and recovery actions.</li>
       </ul>
      </td>
      <td>
        <ul class="results-list">
          <li>You have an automation that must keep running during partial outages, not just when every dependency is healthy.</li>
          <li>You are replacing a patchwork of scripts, cron jobs, and manual steps that no one can confidently troubleshoot.</li>
          <li>A compliance or customer-impact workflow needs auditability (who ran what, with which input, and what happened next).</li>
          <li>Rate limits, webhook retries, and duplicate events are causing inconsistent downstream state and support tickets.</li>
          <li>You are scaling automation across teams and need a reusable platform with admin controls, secrets, schedules, and notifications.</li>
        </ul>
      </td>
       <td>
         <ul class="deliverables-list">
           <li>A complete platform blueprint with a trigger→process→action lifecycle and explicit component boundaries.</li>
           <li>A three-area UI spec: workflow canvas (drag/drop nodes), live runs dashboard (real-time status), and settings/admin panel.</li>
           <li>TypeScript backend + frontend implementation plan (React, Node.js, Tailwind, shadcn/ui) with route and module breakdowns.</li>
           <li>A resilience and failure-handling matrix covering retries, backoff schedules, quarantines, and operator recovery steps.</li>
           <li>A test plan plus scripts outline that executes 100+ workflow runs with malformed payloads, rate limits, and partial outages.</li>
         </ul>
       </td>
    </tr>
  </tbody>
</table>

</div>

<div class="prompt-display-section">

<h2 class="wp-block-heading">The Full AI Prompt: Local-First Workflow Automation Platform Builder</h2>



<div class="prompt-viewer-wrapper" id="prompt-section">
    <div class="prompt-comparison-row prompt-premium">
        <!-- Header with buttons -->
        <div class="prompt-row-header">
            <!-- <span class="prompt-row-icon">✨</span> -->
            <span class="prompt-row-title">
                                    Step 1: Customize the prompt with your input
                            </span>
            <div class="prompt-header-buttons">
                                    <button class="prompt-header-btn prompt-header-reset" onclick="resetPrompt()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
                            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
                        </svg>
                        <span>Reset</span>
                    </button>
                                <button class="prompt-header-btn prompt-header-copy-green flowpast-copy-prompt-btn" onclick="handlePromptCopy()">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                        <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
                    </svg>
                    <span>Customize and Copy Full Prompt</span>
                </button>
            </div>
        </div>

        <!-- Customize the Prompt Section -->
                    <div class="prompt-customize-section">
                <span class="customize-title">Customize the Prompt</span>
                <p class="customize-subtitle">Fill in the fields below to personalize this prompt for your needs.</p>
                <table class="customize-table">
                    <thead>
                        <tr>
                            <th>Variable</th>
                            <th>What to Enter</th>
                            <th>Customise the prompt</th>
                        </tr>
                    </thead>
                    <tbody>
                                                    <tr>
                                <td class="var-name"><code>[CHALLENGE]</code></td>
                                <td class="var-desc">
                                    Describe the specific problem or scenario that the automation system needs to address, including pain points and constraints.                                    <div class="var-example">For example: "Automate invoice processing for a logistics company dealing with 10,000+ monthly invoices, ensuring error-free data extraction, integration with QuickBooks, and compliance with tax regulations."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[CHALLENGE]"
                                            placeholder="Enter your value here..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[CONTEXT]</code></td>
                                <td class="var-desc">
                                    Provide the background information or operational environment relevant to the automation, including existing systems, workflows, or limitations.                                    <div class="var-example">For example: "The company uses legacy ERP software with limited API support, manual data entry for invoices, and has frequent issues with duplicate records and missed deadlines."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[CONTEXT]"
                                            placeholder="Enter your value here..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[INTEGRATION_REQUIREMENTS]</code></td>
                                <td class="var-desc">
                                    Specify the systems, APIs, or external tools the automation must connect to, along with any authentication or data format needs.                                    <div class="var-example">For example: "Integrate with Salesforce, QuickBooks, and Slack using REST APIs with OAuth 2.0 authentication, exchanging JSON data for customer updates and invoice notifications."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[INTEGRATION_REQUIREMENTS]"
                                            placeholder="Enter your value here..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[DATA_FLOW]</code></td>
                                <td class="var-desc">
                                    Outline the sequence of data movement within the automation system, including inputs, transformations, and outputs.                                    <div class="var-example">For example: "Trigger: New invoice received via email → Extract data using OCR → Validate against customer records in Salesforce → Generate invoice in QuickBooks → Notify team in Slack."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[DATA_FLOW]"
                                            placeholder="Enter your value here..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[TRIGGERS]</code></td>
                                <td class="var-desc">
                                    List the events or conditions that initiate the automation process, such as API calls, scheduled tasks, or external system updates.                                    <div class="var-example">For example: "Webhook from Stripe for new payments, daily scheduled task to reconcile accounts, or manual trigger from admin dashboard."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[TRIGGERS]"
                                            placeholder="Enter your value here..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[END_ACTIONS]</code></td>
                                <td class="var-desc">
                                    Define the final operations performed by the automation system, including outputs or updates to external systems.                                    <div class="var-example">For example: "Send email confirmation to customers, update payment status in Salesforce, and log transaction details in the database."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[END_ACTIONS]"
                                            placeholder="Enter your value here..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                            </tbody>
                </table>

                <button class="copy-customized-btn flowpast-copy-prompt-btn" onclick="handlePromptCopy()">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                        <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
                    </svg>
                    <span class="copy-customized-text">Customise the prompt now</span>
                </button>
            </div>
        
        <!-- Full Prompt Code Header -->
                    <div class="prompt-code-header">
                <span class="prompt-code-title">
                    Step 2: Copy the Prompt
                </span>
                <div class="prompt-code-buttons">
                    <!-- Reset: Only visible when unlocked -->
                    <button class="prompt-header-btn prompt-header-reset btn-when-unlocked" onclick="resetPrompt()" style="display: none;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
                            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
                        </svg>
                        <span>Reset</span>
                    </button>
                    <!-- Copy Full Prompt -->
                    <button class="prompt-header-btn prompt-header-copy flowpast-copy-prompt-btn" onclick="handlePromptCopy()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                            <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
                        </svg>
                        <span>Copy Full Prompt</span>
                    </button>
                </div>
            </div>
        

        <!-- Prompt Content -->
        <div class="prompt-box prompt-gated-wrapper">
            <!-- Gated: Blurred content -->
            <div class="prompt-gated-content">
                <div class="prompt-header-visible">OBJECTIVE</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">PERSONA</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">CONSTRAINTS</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div><div class="locked-line" style="width: 80%;"></div><div class="locked-line" style="width: 95%;"></div><div class="locked-line" style="width: 70%;"></div><div class="locked-line" style="width: 83%;"></div><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">What This Is NOT</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">PROCESS</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div><div class="locked-line" style="width: 80%;"></div><div class="locked-line" style="width: 95%;"></div><div class="locked-line" style="width: 70%;"></div><div class="locked-line" style="width: 83%;"></div><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div><div class="locked-line" style="width: 80%;"></div><div class="locked-line" style="width: 95%;"></div><div class="locked-line" style="width: 70%;"></div><div class="locked-line" style="width: 83%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">Edge Case Handling Rules</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">INPUTS</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">OUTPUT SPECIFICATION</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">1) Pre-Analysis Snapshot</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">2) Workflow &amp; Failure-Point Map</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">3) Architecture Plan (Production-Grade)</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div><div class="locked-line" style="width: 80%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">4) Core Engine Implementation (Backend)</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div><div class="locked-line" style="width: 80%;"></div><div class="locked-line" style="width: 95%;"></div><div class="locked-line" style="width: 70%;"></div><div class="locked-line" style="width: 83%;"></div><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">5) Frontend Application (React)</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">6) Monitoring, Logging, Alerting</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">7) Source Code Package &amp; Setup</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">8) Testing &amp; Production Readiness</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">QUALITY CHECKS</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div></div></div><div class="locked-section-icon">🔒</div></div>            </div>
            <!-- Unlocked: Full content (hidden by default) -->
            <div class="prompt-content-full" id="premium-prompt-content" style="display: none;">
                ## OBJECTIVE
Create a production-ready, locally runnable workflow automation platform customized to the client’s exact process. The deliverable must cover the full automation lifecycle (triggers → processing → actions), include resilient failure handling, and ship with a polished web UI plus complete source code, setup steps, examples, and tests.

## PERSONA
Act as an elite automation systems engineer and full-stack TypeScript developer who routinely delivers real-world workflow engines (not prototypes). You prioritize correctness under messy data, idempotency, and operational visibility (logs/metrics/alerts) before UI niceties—then you finish with an enterprise-grade interface.

## CONSTRAINTS
- Build with **React + TypeScript** on the frontend and **Node.js + TypeScript** on the backend.
- Frontend styling must use **Tailwind CSS** and **shadcn/ui**, with a dark theme and refined spacing/typography similar in feel to modern enterprise tools.
- Must include three major UI areas:
  - Workflow canvas (drag/drop nodes)
  - Live runs/execution dashboard (real-time status)
  - Settings/admin panel (integrations, secrets, schedules, notifications)
- Engine requirements:
  - Full edge-case mapping for the specific workflow
  - Retries with backoff, rate-limit handling, timeouts, dead-lettering or quarantine, and graceful degradation
  - Strong typing (TypeScript end-to-end), clean API boundaries, and integration adapters
  - Idempotent workflow execution and safe re-runs
  - Webhooks + scheduling support
  - Comprehensive observability: structured logs, metrics, alerts/notifications
- Testing requirements:
  - Include a test plan and scripts that execute **100+ workflow runs** (varied inputs, malformed payloads, rate limits, partial outages).
- Avoid generic “one-size-fits-all” builders. The system must be purpose-built around **[CHALLENGE]/[CONTEXT]** and the provided integration needs.

### What This Is NOT
- Not a clickable mock, slide deck, or “concept” architecture with missing pieces.
- Not a minimal demo that ignores scale, retries, idempotency, or ops tooling.
- Not a generic workflow library pasted in without customization to the described process.

## PROCESS
1. **Pre-Analysis (must appear in the output):**
   - Restate your understanding of the automation requested using the provided inputs.
   - List any assumptions you must make.
   - List missing details as explicit questions; if unanswered, proceed with reasonable defaults and label them clearly.
2. **Workflow decomposition:**
   - Enumerate triggers, inputs, transformations, branching, outputs, and every likely failure mode.
   - Identify where duplicates, partial failures, and race conditions can occur; define idempotency keys and state transitions.
3. **System blueprint:**
   - Propose components (API, worker/executor, queue, datastore, secrets, webhook handler, scheduler, UI).
   - Define the integration adapter pattern and data contracts.
4. **Core engine first:**
   - Implement the executor/runtime, state machine, persistence, retries, rate limiting, and run history before heavy UI work.
5. **Frontend build:**
   - Implement workflow builder canvas, run monitoring, and settings pages with responsive layout and dark mode polish.
6. **Observability + operations:**
   - Add structured logging, metrics, tracing hooks (if applicable), alert rules, and notification channels.
7. **Validation:**
   - Provide load/chaos-style run scripts for 100+ executions and document expected outcomes.
8. **Delivery packaging:**
   - Provide a complete repository-style file tree, copy/paste-ready code blocks, environment variables, and step-by-step local setup.

### Edge Case Handling Rules
- If **[INTEGRATION_REQUIREMENTS]** are vague, create a generic adapter interface and include one concrete example adapter matching the closest described service.
- If payload formats in **[DATA_FLOW]** are incomplete, define schemas (e.g., Zod) with safe parsing and strict error reporting.
- If triggers are ambiguous, implement both a webhook trigger and a schedule trigger as defaults, and clearly mark them as configurable.

## INPUTS
- **Automation need (the exact process):** [CHALLENGE]
- **Data flow details and formats:** [DATA_FLOW]
- **What starts the automation:** [TRIGGERS]
- **Desired end actions/outputs:** [END_ACTIONS]
- **APIs/services/systems to integrate:** [INTEGRATION_REQUIREMENTS]
- **Additional background / constraints:** [CONTEXT]

## OUTPUT SPECIFICATION
Use markdown headings and deliver the following sections in order.

### 1) Pre-Analysis Snapshot
- {Understanding Summary}
- {Assumptions}
- {Open Questions}
- {Default Decisions If Unanswered}

### 2) Workflow &amp; Failure-Point Map
- {Trigger Inventory}
- {Data Contract Overview}
- {Step-By-Step Workflow Map}
- {Edge Cases &amp; Failure Modes}
- {Idempotency Strategy}
- {State Model / Run Lifecycle}

### 3) Architecture Plan (Production-Grade)
- {Component Diagram Description}
- {Backend Modules}
- {Frontend Pages &amp; UI Sections}
- {Integration Adapter Design}
- {Persistence Choice &amp; Schema}
- {Queue/Worker Model}
- {Security &amp; Secrets Handling}

### 4) Core Engine Implementation (Backend)
Provide complete, runnable TypeScript code for:
- {API Server}
- {Webhook Endpoints}
- {Scheduler}
- {Workflow Definition Model}
- {Executor / Worker Runtime}
- {Retry + Backoff + Rate Limit Handling}
- {Timeouts + Cancellation}
- {Idempotency Enforcement}
- {Run History Storage}
- {Notification Service}
- {Example Integration Adapter Implementations}

### 5) Frontend Application (React)
Provide complete, runnable TypeScript code for:
- {Workflow Builder Canvas} (drag/drop nodes, node config drawers/modals)
- {Execution Dashboard} (live updates, filtering, run detail view, logs)
- {Settings Panel} (integrations, secrets, schedules, alert routes)
- {UI Kit Usage Notes} (Tailwind + shadcn/ui patterns, dark theme tokens)

### 6) Monitoring, Logging, Alerting
- {Structured Logging Spec}
- {Metrics List}
- {Alert Conditions}
- {Notification Channels}
- {Operational Runbook Notes}

### 7) Source Code Package &amp; Setup
- {Repository File Tree}
- {Environment Variables}
- {Install &amp; Run Steps}
- {Seeded Example Workflows}
- {Inline Documentation Pointers}

### 8) Testing &amp; Production Readiness
- {Test Strategy}
- {100+ Execution Test Script}
- {Malformed Data Tests}
- {Rate Limit / Timeout Scenarios}
- {Pass/Fail Criteria}
- {Go-Live Checklist}

## QUALITY CHECKS
At the end, include a “Verification” list confirming:
- {Completeness Check}: core engine + UI + monitoring + tests + examples are included
- {Reliability Check}: retries, backoff, rate limiting, timeouts, idempotency, and graceful degradation are implemented
- {Type Safety Check}: TypeScript types/schemas validate inputs and integration boundaries
- {Run Locally Check}: steps and env vars are sufficient for a zero-error local start
- {Non-Generic Check}: at least 5 design decisions explicitly tie back to [CHALLENGE], [DATA_FLOW], [TRIGGERS], [END_ACTIONS], and [INTEGRATION_REQUIREMENTS]            </div>
        </div>


    </div>

    <!-- CTA Row - Full width buttons -->
    <div class="prompt-cta-row">
        <button class="prompt-cta-btn prompt-cta-copy flowpast-copy-prompt-btn" onclick="handlePromptCopy()">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
            </svg>
            <span class="cta-copy-text">Copy Full Prompt</span>
        </button>
    </div>
</div>

<style>
    /* Gated prompt states */
    .prompt-gated-wrapper {
        position: relative;
    }

    /* When unlocked - show full content, hide gated */
    body.flowpast-unlocked .prompt-gated-wrapper .prompt-gated-content {
        display: none;
    }

    body.flowpast-unlocked .prompt-gated-wrapper .prompt-content-full {
        display: block !important;
    }

    /* Show/hide elements based on unlock state */
    body.flowpast-unlocked .btn-when-unlocked {
        display: inline-flex !important;
    }

    .prompt-viewer-wrapper {
        scroll-margin-top: 250px;
    }

    /* ========================================
   PROMPT VIEWER - MAIN WRAPPER
   ======================================== */
    .prompt-viewer-wrapper {
        margin: 30px 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* ========================================
   PROMPT BOX CONTAINER
   ======================================== */
    .prompt-comparison-row {
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid #e0e0e0;
        background: #fff;
    }

    /* ========================================
   HEADER WITH BUTTONS
   ======================================== */
    .prompt-row-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 20px;
        color: #fff !important;
        background: #141414;
        border-bottom: 1px solid #e0e0e0;
        flex-wrap: wrap;
    }

    .prompt-row-icon {
        font-size: 20px;
    }

    .prompt-row-title {
        font-weight: 600;
        font-size: 22px;
        color: #fff !important;
        text-decoration: underline
    }

    .prompt-header-buttons {
        margin-left: auto;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    /* Header buttons */
    .prompt-header-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
        border: none;
    }

    .prompt-header-copy {
        background: #3a3a3a;
        color: #fff;
    }

    .prompt-header-copy:hover {
        background: #2a2a2a;
    }

    .prompt-header-copy.copied {
        background: #2e7d32;
    }

    .prompt-header-copy-green {
        background: #04AA6D !important;
        color: #fff !important;
    }

    .prompt-header-copy-green:hover {
        background: #039860 !important;
    }

    .prompt-header-copy-green.copied {
        background: #2e7d32 !important;
    }

    .prompt-header-access {
        background: rgb(5, 152, 98);
        color: #fff !important;
    }

    .prompt-header-access:hover {
        background: rgb(4, 130, 83);
        transform: translateY(-1px);
    }

    /* ========================================
   PROMPT CONTENT - FULL (NO SCROLL)
   ======================================== */
    .prompt-box {
        background: #ffffff;
    }

    .prompt-content-full {
        padding: 24px;
        margin: 0;
        color: #202124;
        background: #ffffff;
        font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
        font-size: 13px;
        line-height: 1.7;
        white-space: pre-wrap;
        word-wrap: break-word;
        /* No scroll - show full content */
        max-height: none;
        overflow: visible;
    }

    /* Highlighted variable in prompt */
    .prompt-variable {
        background: #fff3cd;
        color: #1967d2;
        font-weight: 700;
        padding: 2px 4px;
        border-radius: 3px;
        border: 1px solid #ffc107;
    }

    .prompt-variable-filled {
        background: #d4edda;
        color: #155724;
        font-weight: 700;
        padding: 2px 4px;
        border-radius: 3px;
        border: 1px solid #28a745;
    }

    /* ========================================
   GATED CONTENT (NO ACCESS)
   ======================================== */
    .prompt-gated-content {
        padding: 24px;
        background: #ffffff;
        font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
        font-size: 13px;
        line-height: 1.8;
        max-height: none;
        overflow: visible;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        cursor: default;
    }

    /* ## headers - larger, black */
    .prompt-header-visible {
        color: #202124;
        font-weight: 600;
        margin: 5px 0 0px 0;
        font-size: 20px;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    /* ### headers - smaller, black */
    .prompt-header-visible.subheader {
        color: #202124;
        font-weight: 600;
        margin: 5px 0;
        font-size: 18px;
    }

    .prompt-header-visible:first-child {
        margin-top: 0;
    }

    /* ========================================
   LOCKED SECTION BLOCK
   ======================================== */
    .locked-section {
        position: relative;
        margin: 4px 0 8px 0;
        border-radius: 6px;
        overflow: hidden;
        background: linear-gradient(110deg, #e2e8f0 8%, #f1f5f9 18%, #e2e8f0 33%);
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    .locked-section-bg {
        position: relative;
    }

    .locked-section-lines {
        padding: 8px 12px;
        position: relative;
    }

    .locked-line {
        height: 6px;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 3px;
        margin-bottom: 4px;
        margin-left: 12px;
    }

    .locked-line:last-child {
        margin-bottom: 0;
    }

    .locked-section-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        font-size: 24px;
        filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
    }

    /* Subheader locked sections - slightly indented */
    /*  .prompt-header-visible.subheader+.locked-section {
        margin-left: 16px;
    } */

    /* ========================================
   COMPATIBILITY BADGES
   ======================================== */
    .prompt-compatibility {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 12px 20px;
        background: #f8f9fa;
        border-top: 1px solid #e0e0e0;
    }

    .compat-label {
        font-size: 13px;
        color: #5f6368;
        font-weight: 500;
    }

    .compat-badge {
        padding: 4px 10px;
        background: #e8f0fe;
        color: #1967d2;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
    }

    /* ========================================
   CTA ROW - FULL WIDTH BUTTONS
   ======================================== */
    .prompt-cta-row {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }

    .prompt-cta-btn {
        flex: 1;
        min-width: 200px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 16px 24px;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
        border: none;
    }

    .prompt-cta-copy {
        background: #3a3a3a;
        color: #fff;
    }

    .prompt-cta-copy:hover {
        background: #2a2a2a;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .prompt-cta-copy.copied {
        background: #2e7d32;
    }

    .prompt-cta-reset {
        background: #3a3a3a;
        color: #fff;
    }

    .prompt-cta-reset:hover {
        background: #2a2a2a;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .prompt-cta-access {
        background: rgb(5, 152, 98);
        color: #fff !important;
    }

    .prompt-cta-access:hover {
        background: rgb(4, 130, 83);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(5, 152, 98, 0.3);
    }

    /* ========================================
    CUSTOMIZE YOUR PROMPT SECTION
    ======================================== */
    .prompt-customize-section {
        padding: 24px;
        border-bottom: 1px solid #e0e0e0;
        background: #fafbfc;
    }

    .customize-title {
        margin: 0 0 8px 0;
        font-size: 18px;
        font-weight: 700;
        color: #202124;
    }

    .customize-subtitle {
        margin: 0 0 20px 0;
        font-size: 14px;
        color: #5f6368;
    }

    .customize-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
    }

    .customize-table th {
        text-align: left;
        padding: 12px;
        background: #f1f3f4;
        border: 1px solid #e0e0e0;
        font-size: 13px;
        font-weight: 600;
        color: #202124;
    }

    .customize-table td {
        padding: 12px;
        border: 1px solid #e0e0e0;
        vertical-align: top;
    }

    .customize-table .var-name {
        width: 25%;
        background: #f8f9fa;
    }

    .customize-table .var-name code {
        background: #fff3cd;
        color: #1967d2;
        border: 1px solid #ffc107;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        word-break: break-all;
        font-weight: 600;
    }

    .customize-table .var-desc {
        width: 35%;
        font-size: 13px;
        color: #5f6368;
        line-height: 1.5;
    }

    .customize-table .var-example {
        margin-top: 8px;
        padding: 8px 10px;
        background: #f8f9fa;
        border-left: 3px solid #dadce0;
        font-size: 12px;
        color: #5f6368;
        font-style: italic;
        border-radius: 0 4px 4px 0;
    }

    .customize-table .var-input {
        width: 40%;
    }

    .customize-input {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #dadce0;
        border-radius: 6px;
        font-size: 13px;
        font-family: inherit;
        resize: vertical;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .customize-input:focus {
        outline: none;
        border-color: rgb(5, 152, 98);
        box-shadow: 0 0 0 3px rgba(5, 152, 98, 0.1);
    }

    .customize-input::placeholder {
        color: #9aa0a6;
        font-style: italic;
    }

    .copy-customized-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 16px 24px;
        background: rgb(5, 152, 98);
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .copy-customized-btn:hover {
        background: rgb(4, 130, 83);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(5, 152, 98, 0.3);
    }

    .copy-customized-btn.copied {
        background: #2e7d32;
    }

    /* ========================================
    FULL PROMPT CODE HEADER
    ======================================== */
    .prompt-code-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px;
        color: #fff !important;
        background: #141414;
        border-bottom: 1px solid #e0e0e0;
    }

    .prompt-code-title {
        font-size: 22px;
        font-weight: 600;
        text-decoration: underline;

    }

    .prompt-code-buttons {
        display: flex;
        gap: 8px;
    }

    .prompt-code-buttons .prompt-header-btn {
        padding: 8px 14px;
        font-size: 13px;
        background: #ffffff;
        color: #202124;
        border: 1px solid #dadce0;
    }

    .prompt-code-buttons .prompt-header-access {
        background: rgb(5, 152, 98);
        color: #fff !important;
        border-color: rgb(5, 152, 98);
    }

    .prompt-code-buttons .prompt-header-btn.prompt-header-access:hover {
        background: rgb(4, 130, 83) !important;
        border-color: rgb(4, 130, 83);
        color: #fff !important;
    }

    .prompt-code-buttons .prompt-header-btn:hover {
        background: #f1f3f4;
    }

    .prompt-code-buttons .prompt-header-copy.copied {
        background: #d4edda;
        color: #155724;
        border-color: #28a745;
    }

    .prompt-header-reset {
        background: #ffffff;
        color: #202124;
    }

    /* ========================================
   RESPONSIVE
   ======================================== */
    @media (max-width: 768px) {
        .prompt-row-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
        }

        .prompt-header-buttons {
            margin-left: 0;
            width: 100%;
        }

        .prompt-header-btn {
            flex: 1;
            justify-content: center;
        }

        .prompt-cta-row {
            flex-direction: column;
        }

        .prompt-cta-btn {
            width: 100%;
        }

        /* Customize table responsive */
        .customize-table,
        .customize-table thead,
        .customize-table tbody,
        .customize-table tr,
        .customize-table th,
        .customize-table td {
            display: block;
        }

        .customize-table thead {
            display: none;
        }

        .customize-table tr {
            margin-bottom: 16px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            overflow: hidden;
        }

        .customize-table td {
            width: 100% !important;
            border: none;
            border-bottom: 1px solid #e0e0e0;
        }

        .customize-table td:last-child {
            border-bottom: none;
        }

        .customize-table .var-name {
            background: #f1f3f4;
            font-weight: 600;
        }

        .prompt-code-header {
            flex-direction: column;
            gap: 12px;
            align-items: flex-start;
        }

        .prompt-code-buttons {
            width: 100%;
        }

        .prompt-code-buttons .prompt-header-btn {
            flex: 1;
            justify-content: center;
        }
    }
</style>

<script>
    function handlePromptCopy() {
        // Check if unlocked via cookie
        if (typeof window.flowpastIsUnlocked === 'function' && !window.flowpastIsUnlocked()) {
            // Show email popup
            if (typeof window.flowpastShowEmailPopup === 'function') {
                window.flowpastShowEmailPopup('prompt');
            }
            return;
        }

        // Copy the customized prompt (with filled variables)
        const customizedPrompt = getCustomizedPrompt();
        const copyButtons = document.querySelectorAll('.prompt-header-copy, .prompt-header-copy-green, .prompt-cta-copy, .copy-customized-btn');

        navigator.clipboard.writeText(customizedPrompt).then(() => {
            copyButtons.forEach(btn => {
                btn.classList.add('copied');
                const textSpan = btn.querySelector('span');
                if (textSpan) textSpan.textContent = 'Copied!';
            });

            setTimeout(() => {
                copyButtons.forEach(btn => {
                    btn.classList.remove('copied');
                    const textSpan = btn.querySelector('span');
                    if (textSpan) textSpan.textContent = 'Copy Full Prompt';
                });
            }, 2000);
        }).catch(err => {
            console.error('Failed to copy:', err);
        });
    }

    // Store original prompt for customization
    const originalPrompt = "## OBJECTIVE\r\nCreate a production-ready, locally runnable workflow automation platform customized to the client\u2019s exact process. The deliverable must cover the full automation lifecycle (triggers \u2192 processing \u2192 actions), include resilient failure handling, and ship with a polished web UI plus complete source code, setup steps, examples, and tests.\r\n\r\n## PERSONA\r\nAct as an elite automation systems engineer and full-stack TypeScript developer who routinely delivers real-world workflow engines (not prototypes). You prioritize correctness under messy data, idempotency, and operational visibility (logs\/metrics\/alerts) before UI niceties\u2014then you finish with an enterprise-grade interface.\r\n\r\n## CONSTRAINTS\r\n- Build with **React + TypeScript** on the frontend and **Node.js + TypeScript** on the backend.\r\n- Frontend styling must use **Tailwind CSS** and **shadcn\/ui**, with a dark theme and refined spacing\/typography similar in feel to modern enterprise tools.\r\n- Must include three major UI areas:\r\n  - Workflow canvas (drag\/drop nodes)\r\n  - Live runs\/execution dashboard (real-time status)\r\n  - Settings\/admin panel (integrations, secrets, schedules, notifications)\r\n- Engine requirements:\r\n  - Full edge-case mapping for the specific workflow\r\n  - Retries with backoff, rate-limit handling, timeouts, dead-lettering or quarantine, and graceful degradation\r\n  - Strong typing (TypeScript end-to-end), clean API boundaries, and integration adapters\r\n  - Idempotent workflow execution and safe re-runs\r\n  - Webhooks + scheduling support\r\n  - Comprehensive observability: structured logs, metrics, alerts\/notifications\r\n- Testing requirements:\r\n  - Include a test plan and scripts that execute **100+ workflow runs** (varied inputs, malformed payloads, rate limits, partial outages).\r\n- Avoid generic \u201cone-size-fits-all\u201d builders. The system must be purpose-built around **[CHALLENGE]\/[CONTEXT]** and the provided integration needs.\r\n\r\n### What This Is NOT\r\n- Not a clickable mock, slide deck, or \u201cconcept\u201d architecture with missing pieces.\r\n- Not a minimal demo that ignores scale, retries, idempotency, or ops tooling.\r\n- Not a generic workflow library pasted in without customization to the described process.\r\n\r\n## PROCESS\r\n1. **Pre-Analysis (must appear in the output):**\r\n   - Restate your understanding of the automation requested using the provided inputs.\r\n   - List any assumptions you must make.\r\n   - List missing details as explicit questions; if unanswered, proceed with reasonable defaults and label them clearly.\r\n2. **Workflow decomposition:**\r\n   - Enumerate triggers, inputs, transformations, branching, outputs, and every likely failure mode.\r\n   - Identify where duplicates, partial failures, and race conditions can occur; define idempotency keys and state transitions.\r\n3. **System blueprint:**\r\n   - Propose components (API, worker\/executor, queue, datastore, secrets, webhook handler, scheduler, UI).\r\n   - Define the integration adapter pattern and data contracts.\r\n4. **Core engine first:**\r\n   - Implement the executor\/runtime, state machine, persistence, retries, rate limiting, and run history before heavy UI work.\r\n5. **Frontend build:**\r\n   - Implement workflow builder canvas, run monitoring, and settings pages with responsive layout and dark mode polish.\r\n6. **Observability + operations:**\r\n   - Add structured logging, metrics, tracing hooks (if applicable), alert rules, and notification channels.\r\n7. **Validation:**\r\n   - Provide load\/chaos-style run scripts for 100+ executions and document expected outcomes.\r\n8. **Delivery packaging:**\r\n   - Provide a complete repository-style file tree, copy\/paste-ready code blocks, environment variables, and step-by-step local setup.\r\n\r\n### Edge Case Handling Rules\r\n- If **[INTEGRATION_REQUIREMENTS]** are vague, create a generic adapter interface and include one concrete example adapter matching the closest described service.\r\n- If payload formats in **[DATA_FLOW]** are incomplete, define schemas (e.g., Zod) with safe parsing and strict error reporting.\r\n- If triggers are ambiguous, implement both a webhook trigger and a schedule trigger as defaults, and clearly mark them as configurable.\r\n\r\n## INPUTS\r\n- **Automation need (the exact process):** [CHALLENGE]\r\n- **Data flow details and formats:** [DATA_FLOW]\r\n- **What starts the automation:** [TRIGGERS]\r\n- **Desired end actions\/outputs:** [END_ACTIONS]\r\n- **APIs\/services\/systems to integrate:** [INTEGRATION_REQUIREMENTS]\r\n- **Additional background \/ constraints:** [CONTEXT]\r\n\r\n## OUTPUT SPECIFICATION\r\nUse markdown headings and deliver the following sections in order.\r\n\r\n### 1) Pre-Analysis Snapshot\r\n- {Understanding Summary}\r\n- {Assumptions}\r\n- {Open Questions}\r\n- {Default Decisions If Unanswered}\r\n\r\n### 2) Workflow & Failure-Point Map\r\n- {Trigger Inventory}\r\n- {Data Contract Overview}\r\n- {Step-By-Step Workflow Map}\r\n- {Edge Cases & Failure Modes}\r\n- {Idempotency Strategy}\r\n- {State Model \/ Run Lifecycle}\r\n\r\n### 3) Architecture Plan (Production-Grade)\r\n- {Component Diagram Description}\r\n- {Backend Modules}\r\n- {Frontend Pages & UI Sections}\r\n- {Integration Adapter Design}\r\n- {Persistence Choice & Schema}\r\n- {Queue\/Worker Model}\r\n- {Security & Secrets Handling}\r\n\r\n### 4) Core Engine Implementation (Backend)\r\nProvide complete, runnable TypeScript code for:\r\n- {API Server}\r\n- {Webhook Endpoints}\r\n- {Scheduler}\r\n- {Workflow Definition Model}\r\n- {Executor \/ Worker Runtime}\r\n- {Retry + Backoff + Rate Limit Handling}\r\n- {Timeouts + Cancellation}\r\n- {Idempotency Enforcement}\r\n- {Run History Storage}\r\n- {Notification Service}\r\n- {Example Integration Adapter Implementations}\r\n\r\n### 5) Frontend Application (React)\r\nProvide complete, runnable TypeScript code for:\r\n- {Workflow Builder Canvas} (drag\/drop nodes, node config drawers\/modals)\r\n- {Execution Dashboard} (live updates, filtering, run detail view, logs)\r\n- {Settings Panel} (integrations, secrets, schedules, alert routes)\r\n- {UI Kit Usage Notes} (Tailwind + shadcn\/ui patterns, dark theme tokens)\r\n\r\n### 6) Monitoring, Logging, Alerting\r\n- {Structured Logging Spec}\r\n- {Metrics List}\r\n- {Alert Conditions}\r\n- {Notification Channels}\r\n- {Operational Runbook Notes}\r\n\r\n### 7) Source Code Package & Setup\r\n- {Repository File Tree}\r\n- {Environment Variables}\r\n- {Install & Run Steps}\r\n- {Seeded Example Workflows}\r\n- {Inline Documentation Pointers}\r\n\r\n### 8) Testing & Production Readiness\r\n- {Test Strategy}\r\n- {100+ Execution Test Script}\r\n- {Malformed Data Tests}\r\n- {Rate Limit \/ Timeout Scenarios}\r\n- {Pass\/Fail Criteria}\r\n- {Go-Live Checklist}\r\n\r\n## QUALITY CHECKS\r\nAt the end, include a \u201cVerification\u201d list confirming:\r\n- {Completeness Check}: core engine + UI + monitoring + tests + examples are included\r\n- {Reliability Check}: retries, backoff, rate limiting, timeouts, idempotency, and graceful degradation are implemented\r\n- {Type Safety Check}: TypeScript types\/schemas validate inputs and integration boundaries\r\n- {Run Locally Check}: steps and env vars are sufficient for a zero-error local start\r\n- {Non-Generic Check}: at least 5 design decisions explicitly tie back to [CHALLENGE], [DATA_FLOW], [TRIGGERS], [END_ACTIONS], and [INTEGRATION_REQUIREMENTS]";
    const variables = ["[CHALLENGE]","[CONTEXT]","[INTEGRATION_REQUIREMENTS]","[DATA_FLOW]","[TRIGGERS]","[END_ACTIONS]"];
    // Initial render with highlighted variables
    document.addEventListener('DOMContentLoaded', function() {
        renderPromptWithHighlights();
    });

    // Live update prompt as user types
    document.querySelectorAll('.customize-input').forEach(input => {
        input.addEventListener('input', renderPromptWithHighlights);
    });

    function renderPromptWithHighlights() {
        const promptContent = document.getElementById('premium-prompt-content');
        if (!promptContent) return;

        let updatedPrompt = originalPrompt;
        let filledVariables = {};

        // Collect filled values
        document.querySelectorAll('.customize-input').forEach(input => {
            const placeholder = input.dataset.placeholder;
            const value = input.value.trim();

            if (value) {
                filledVariables[placeholder] = value;
            }
        });

        // Replace filled variables and highlight remaining
        let htmlContent = escapeHtml(updatedPrompt);

        variables.forEach(placeholder => {
            const escapedPlaceholder = escapeHtml(placeholder);
            const regex = new RegExp(escapeRegex(escapedPlaceholder), 'g');

            if (filledVariables[placeholder]) {
                // Show filled value with green highlight
                htmlContent = htmlContent.replace(regex,
                    '<span class="prompt-variable-filled">' + escapeHtml(filledVariables[placeholder]) + '</span>'
                );
            } else {
                // Show original placeholder with yellow highlight
                htmlContent = htmlContent.replace(regex,
                    '<span class="prompt-variable">' + escapedPlaceholder + '</span>'
                );
            }
        });

        promptContent.innerHTML = htmlContent;
    }

    function escapeRegex(string) {
        return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    }

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    function resetPrompt() {
        // Clear all input fields
        document.querySelectorAll('.customize-input').forEach(input => {
            input.value = '';
        });

        // Re-render with original placeholders highlighted
        renderPromptWithHighlights();

        // Visual feedback
        const resetBtns = document.querySelectorAll('.prompt-header-reset, .prompt-cta-reset');
        resetBtns.forEach(btn => {
            const originalText = btn.querySelector('span').textContent;
            btn.querySelector('span').textContent = 'Reset!';
            setTimeout(() => {
                btn.querySelector('span').textContent = originalText;
            }, 1000);
        });
    }


    function getCustomizedPrompt() {
        let updatedPrompt = originalPrompt;

        document.querySelectorAll('.customize-input').forEach(input => {
            const placeholder = input.dataset.placeholder;
            const value = input.value.trim();

            if (value) {
                const regex = new RegExp(escapeRegex(placeholder), 'g');
                updatedPrompt = updatedPrompt.replace(regex, value);
            }
        });

        return updatedPrompt;
    }
</script>

</div>

<div class="pro-tips-section">

<h2 class="wp-block-heading">Pro Tips for Better AI Prompt Results</h2>



<ul class="wp-block-list">

<li><strong>Describe one workflow, not a platform dream.</strong> Give the exact business process and the “start event” and “done state.” For example: “Trigger: Stripe ‘invoice.paid’; Done: user gets provisioned in SaaS + confirmation sent + ledger entry recorded.” You’ll get a purpose-built engine design instead of a generic builder.</li>


<li><strong>List integrations with failure modes.</strong> Don’t just say “Slack and HubSpot.” Add constraints like “HubSpot bursts of 100 updates/minute,” “Slack webhook occasionally returns 429,” or “internal API has 10s p95 latency.” Follow-up prompt to use: “Now propose adapter interfaces and per-integration retry/backoff settings.”</li>


<li><strong>Define idempotency keys up front.</strong> Pick what makes an event unique (invoiceId + actionType, or webhookEventId + stepId) and tell the prompt what duplicates look like. Ask: “Show the idempotency strategy for each node, including storage schema and re-run behavior.” This usually upgrades the output a lot.</li>


<li><strong>Force the UI to reflect operations reality.</strong> Request concrete screens and actions, not “a dashboard.” After the first output, try asking: “Add run-level drilldowns with logs, retries, quarantine release, and ‘replay from node’ actions; include table columns and filters.”</li>


<li><strong>Make the test runs painful on purpose.</strong> Tell it to include malformed payloads, mid-run dependency failures, and re-delivered webhooks, then require assertions. A good follow-up is: “Write a 100+ run test matrix with distributions (70% normal, 20% degraded, 10% broken) and what ‘pass’ means for each.”</li>

</ul>

</div>

<div class="related-prompts-section">

<h2 class="wp-block-heading">Related Prompts</h2>



<p>Once your platform is designed, these prompts help you ship the surrounding assets teams always ask for.</p>



<p>If you also need the legal scaffolding for a self-hosted or client-delivered tool, <a href="https://flowpast.com/prompts/write-a-privacy-policy-with-this-ai-prompt/">Write a Privacy Policy with this AI Prompt</a> is a practical next step. When your automation UI captures run metadata, user accounts, or integration credentials, you’ll want a policy that matches what the system actually stores and displays.</p>



<p>When you plan to sell the platform, bundle it into a retainer, or deploy it for clients with billing, <a href="https://flowpast.com/prompts/write-a-returns-and-refunds-policy-with-this-ai-prompt/">Write a Returns and Refunds Policy with this AI Prompt</a> can save time. It pairs well right after you define what “service uptime” and “support response” mean for your workflow engine.</p>



<p>For teams preparing documentation, internal proposals, or investor memos, a strong review process matters. <a href="https://flowpast.com/prompts/edit-and-critique-essays-with-this-ai-prompt/">Edit and Critique Essays with this AI Prompt</a> helps tighten technical narratives, highlight missing assumptions, and catch vague language before it becomes scope creep in implementation.</p>


<br>


<p>Quick reference:</p>



<ul class="wp-block-list">

<li><a href="https://flowpast.com/prompts/write-a-privacy-policy-with-this-ai-prompt/">Write a Privacy Policy with this AI Prompt</a>: Privacy coverage for product data collection.</li>


<li><a href="https://flowpast.com/prompts/write-a-returns-and-refunds-policy-with-this-ai-prompt/">Write a Returns and Refunds Policy with this AI Prompt</a>: Refund terms for paid deployments.</li>


<li><a href="https://flowpast.com/prompts/edit-and-critique-essays-with-this-ai-prompt/">Edit and Critique Essays with this AI Prompt</a>: Tighten specs, memos, and docs.</li>

<li><a href="https://flowpast.com/prompts/write-a-balanced-literary-critique-with-this-ai-prompt/">Write a Balanced Literary Critique with this AI Prompt</a>: Structured critique to improve clarity.</li>

<li><a href="https://flowpast.com/prompts/write-a-persuasive-political-manifesto-with-this-ai-prompt/">Write a Persuasive Political Manifesto with this AI Prompt</a>: Strong positioning and persuasive framing.</li>
<!-- /wp:post-content -->
</ul>
<!-- /wp:list -->
</div>

<div class="faq-section">
<!-- wp:heading {"level":2} -->
<h2 class="wp-block-heading">Common Questions</h2>
<!-- /wp:heading -->

<div class="faq-item">
<span class="question">Which roles benefit most from this local-first automation platform AI prompt?</span>
<!-- wp:paragraph -->
<p class="answer"><strong>Automation Engineers</strong> use this to move from ad-hoc scripts to a typed engine with retries, idempotency, and clear adapter boundaries. <strong>Product Engineers</strong> rely on it when building an internal “Zapier-like” tool that must be locally runnable and production-safe. <strong>Ops Managers</strong> benefit because the prompt forces observability, run dashboards, and operator workflows (quarantine, replay, notifications). <strong>Consultants and Solution Architects</strong> apply it to deliver client-specific workflow platforms with a credible test plan, not just diagrams.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Which industries get the most value from this local-first automation platform AI prompt?</span>
<!-- wp:paragraph -->
<p class="answer"><strong>SaaS companies</strong> use it to automate provisioning, billing-state changes, and account lifecycle flows where duplicate webhooks can cause real damage. <strong>E-commerce brands</strong> apply it for order routing, refunds, fulfillment updates, and customer notifications, especially when marketplaces send repeated events. <strong>Financial services and fintech</strong> get value because they need audit trails, safe re-runs, and clear failure handling when downstream services throttle or time out. <strong>Agencies and managed service providers</strong> use it to standardize client automations with a consistent admin panel, secrets handling, and run visibility.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Why do basic AI prompts for building a workflow automation platform produce weak results?</span>
<!-- wp:paragraph -->
<p class="answer">A typical prompt like &#8220;<em>Build me a workflow automation platform in TypeScript</em>&#8221; fails because it: lacks a concrete workflow context (so you get a generic builder), provides no framework for idempotency and safe re-runs, ignores rate limits/timeouts/dead-letter handling that dominate production behavior, produces vague “add logging” advice instead of structured logs/metrics/alerts and operator actions, and misses a real test plan (100+ runs with malformed payloads and partial outages). This prompt is stronger because it forces the full automation lifecycle, resilience mechanisms, and an operational UI that matches how failures actually get resolved.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Can I customize this local-first automation platform prompt for my specific situation?</span>
<!-- wp:paragraph -->
<p class="answer">Yes, and you should, because the prompt is designed to be purpose-built around your [CHALLENGE]/[CONTEXT]. Replace that bracketed section with the exact workflow: triggers, key entities, integrations, data formats, and your “definition of done” for each run. Then add your constraints: expected volume, latency needs, rate limits, and what counts as a recoverable vs quarantined failure. A helpful follow-up prompt is: “Given this context, propose the node types, the typed event schema, and the operator runbook for the top 10 failure cases.”</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">What are the most common mistakes when using this local-first automation platform prompt?</span>
<!-- wp:paragraph -->
<p class="answer">The biggest mistake is leaving [CHALLENGE]/[CONTEXT] too vague — instead of “automate customer onboarding,” try “on Stripe invoice.paid, provision workspace, assign plan limits, post Slack message, and write a ledger entry; duplicates occur due to webhook retries.” Another common error is not listing integration constraints; “use HubSpot” is weak, while “HubSpot returns 429 after 120 req/min and has eventual consistency on contact updates” produces better retry and reconciliation logic. Teams also forget to specify re-run rules, so the design can’t be truly idempotent; state what should happen if a run is replayed from node 3. Finally, people skip operator needs; ask for quarantine/release flows, alert routing, and run-level drilldowns in the live dashboard.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Who should NOT use this local-first automation platform prompt?</span>
<!-- wp:paragraph -->
<p class="answer">This prompt isn’t ideal for one-off automations where a simple hosted tool already solves the problem and you won’t maintain an engine. It’s also a poor fit if you cannot commit to implementing a TypeScript stack (React + Node.js) or you only want a quick UI mock without resilience, testing, and observability. If your workflow requirements are still unknown, validate the process manually first, then come back when you can describe triggers, actions, and failure scenarios.</p>
<!-- /wp:paragraph -->
</div>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Which roles benefit most from this local-first automation platform AI prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Automation Engineers use this to move from ad-hoc scripts to a typed engine with retries, idempotency, and clear adapter boundaries. Product Engineers rely on it when building an internal “Zapier-like” tool that must be locally runnable and production-safe. Ops Managers benefit because the prompt forces observability, run dashboards, and operator workflows (quarantine, replay, notifications). Consultants and Solution Architects apply it to deliver client-specific workflow platforms with a credible test plan, not just diagrams."
      }
    },
    {
      "@type": "Question",
      "name": "Which industries get the most value from this local-first automation platform AI prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "SaaS companies use it to automate provisioning, billing-state changes, and account lifecycle flows where duplicate webhooks can cause real damage. E-commerce brands apply it for order routing, refunds, fulfillment updates, and customer notifications, especially when marketplaces send repeated events. Financial services and fintech get value because they need audit trails, safe re-runs, and clear failure handling when downstream services throttle or time out. Agencies and managed service providers use it to standardize client automations with a consistent admin panel, secrets handling, and run visibility."
      }
    },
    {
      "@type": "Question",
      "name": "Why do basic AI prompts for building a workflow automation platform produce weak results?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "A typical prompt like \"Build me a workflow automation platform in TypeScript\" fails because it: lacks a concrete workflow context (so you get a generic builder), provides no framework for idempotency and safe re-runs, ignores rate limits/timeouts/dead-letter handling that dominate production behavior, produces vague “add logging” advice instead of structured logs/metrics/alerts and operator actions, and misses a real test plan (100+ runs with malformed payloads and partial outages). This prompt is stronger because it forces the full automation lifecycle, resilience mechanisms, and an operational UI that matches how failures actually get resolved."
      }
    },
    {
      "@type": "Question",
      "name": "Can I customize this local-first automation platform prompt for my specific situation?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Yes, and you should, because the prompt is designed to be purpose-built around your [CHALLENGE]/[CONTEXT]. Replace that bracketed section with the exact workflow: triggers, key entities, integrations, data formats, and your “definition of done” for each run. Then add your constraints: expected volume, latency needs, rate limits, and what counts as a recoverable vs quarantined failure. A helpful follow-up prompt is: “Given this context, propose the node types, the typed event schema, and the operator runbook for the top 10 failure cases.”"
      }
    },
    {
      "@type": "Question",
      "name": "What are the most common mistakes when using this local-first automation platform prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "The biggest mistake is leaving [CHALLENGE]/[CONTEXT] too vague — instead of “automate customer onboarding,” try “on Stripe invoice.paid, provision workspace, assign plan limits, post Slack message, and write a ledger entry; duplicates occur due to webhook retries.” Another common error is not listing integration constraints; “use HubSpot” is weak, while “HubSpot returns 429 after 120 req/min and has eventual consistency on contact updates” produces better retry and reconciliation logic. Teams also forget to specify re-run rules, so the design can’t be truly idempotent; state what should happen if a run is replayed from node 3. Finally, people skip operator needs; ask for quarantine/release flows, alert routing, and run-level drilldowns in the live dashboard."
      }
    },
    {
      "@type": "Question",
      "name": "Who should NOT use this local-first automation platform prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "This prompt isn’t ideal for one-off automations where a simple hosted tool already solves the problem and you won’t maintain an engine. It’s also a poor fit if you cannot commit to implementing a TypeScript stack (React + Node.js) or you only want a quick UI mock without resilience, testing, and observability. If your workflow requirements are still unknown, validate the process manually first, then come back when you can describe triggers, actions, and failure scenarios."
      }
    }
  ]
}
</script>
</div>

<div class="closing-section">
<!-- wp:paragraph -->
<p>Production automations don’t fail because the UI is ugly. They fail because retries, duplicates, and missing visibility were never designed in. Paste the prompt into your AI tool, fill in your real [CHALLENGE]/[CONTEXT], and start building something you can actually operate.</p>
<!-- /wp:paragraph -->
</div>]]></content:encoded>
					
		
		
		<media:content url="https://flowpast.s3.eu-north-1.amazonaws.com/featured_blog_images/5001381.webp" medium="image"></media:content>
            	</item>
		<item>
		<title>Build a Talent Intelligence Roadmap AI Prompt</title>
		<link>https://flowpast.com/prompts/build-a-talent-intelligence-roadmap-ai-prompt/</link>
		
		<dc:creator><![CDATA[Lisa Granqvist]]></dc:creator>
		<pubDate>Fri, 23 Jan 2026 01:41:23 +0000</pubDate>
				<category><![CDATA[Prompts]]></category>
		<guid isPermaLink="false">https://flowpast.com/?p=5003122</guid>

					<description><![CDATA[Turn exits into insight - a proven AI Prompt that builds a phased talent intelligence roadmap linking offboarding, planning, brand, and alumni. Discover more AI prompts for marketing, sales, and ops.]]></description>
										<content:encoded><![CDATA[<!-- FOCUS_KEYWORD: talent intelligence roadmap -->

<div class="hook-introduction">

<p>Your best talent data often walks out the door. Exit interviews live in scattered notes, workforce planning happens in a separate spreadsheet, and employer brand signals are buried in Glassdoor comments no one regularly reviews. The result is predictable: you react late, you hire blind, and you repeat the same attrition patterns.</p>



<p>This <strong>talent intelligence roadmap</strong> is built for <strong>People Ops leaders</strong> who need a system after a restructuring, <strong>HR consultants</strong> mapping an operating model for a client’s “post-exit” reality, and <strong>RevOps-minded CFOs</strong> who want retention and rehire decisions tied to measurable ROI. The output is a consulting-grade implementation plan with phases, milestones, governance, metrics, and early-warning analytics across offboarding insights, workforce planning, employer reputation sensing, and boomerang (rehire) selection.</p>

</div>

<div class="what-and-when-section">

<h2 class="wp-block-heading">What Does This AI Prompt Do and When to Use It?</h2>



<table class="solution-results-table three-column" role="presentation" aria-label="What this prompt does, when to use it, and what you get">
 <thead>
    <tr>
      <th scope="col">What This Prompt Does</th>
      <th scope="col">When to Use This Prompt</th>
      <th scope="col">What You&#8217;ll Get</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <ul class="automation-list">
          <li>It designs an end-to-end roadmap that connects exit insights, forecasting, reputation sensing, and rehire decisions into one operating system.</li>
          <li>It defines a practical data model and signal flow, so “what we learned in offboarding” actually influences headcount plans and retention actions.</li>
          <li>It builds phased implementation steps with milestones, owners, and resourcing assumptions instead of a single “future state” diagram.</li>
          <li>It adds predictive and early-warning mechanisms (starting simple) such as risk indicators, leading metrics, and escalation triggers.</li>
          <li>It includes governance, adoption tactics, and change-management moves that make leaders use the system, not ignore it.</li>
       </ul>
      </td>
      <td>
        <ul class="results-list">
          <li>You’re seeing repeating attrition in the same roles or managers, but your current reporting can’t explain the “why” fast enough.</li>
          <li>Workforce planning meetings keep devolving into opinions because exit data and market signals aren’t integrated.</li>
          <li>You want to treat boomerang hires as a strategy, yet you lack criteria and a selection mechanism that filters for fit and performance.</li>
          <li>Your employer brand is taking hits (reviews, candidate drop-off, offer declines), and you need a measurable listening loop tied to actions.</li>
          <li>A reorg, merger, or leadership change creates urgency to rebuild people systems with clear accountability and ROI logic.</li>
        </ul>
      </td>
       <td>
         <ul class="deliverables-list">
           <li>A phased roadmap (typically 3–5 phases) with timeline, milestones, and dependency notes.</li>
           <li>A cross-domain “signal map” that shows exactly which data feeds which decisions, with suggested fields and definitions.</li>
           <li>Governance and operating cadence, including a RACI-style ownership outline and meeting rhythm.</li>
           <li>A starter predictive/early-warning package (leading indicators, thresholds, and escalation paths) you can implement before advanced modeling.</li>
           <li>An ROI measurement plan with metrics per phase (retention lift, time-to-fill changes, rehire performance, and brand indicators).</li>
         </ul>
       </td>
    </tr>
  </tbody>
</table>

</div>

<div class="prompt-display-section">

<h2 class="wp-block-heading">The Full AI Prompt: Talent Intelligence Roadmap Builder</h2>


<!-- Prompt file not found: /home/flowpast/htdocs/flowpast.com/wp-content/data/prompts_scraped/5006431/prompt-2026.txt -->

</div>

<div class="pro-tips-section">

<h2 class="wp-block-heading">Pro Tips for Better AI Prompt Results</h2>



<ul class="wp-block-list">

<li><strong>Give the AI your “messy reality” in one paste.</strong> Before running the prompt, paste a short company snapshot: org size, hiring velocity, top attrition roles, and what data sources you actually have (HRIS, ATS, engagement survey, exit interview doc). Example add-on: “Assume we’re 900 employees, sales-heavy, 28% annual attrition in SDRs, HRIS = Workday, ATS = Greenhouse, exit interviews are in Google Docs.”</li>


<li><strong>Force explicit assumptions so you can validate them.</strong> The prompt already says it will label assumptions; make that non-negotiable. Follow up with: “List your assumptions in a table with (assumption, why you made it, what would change if false).” It keeps the roadmap credible in stakeholder reviews.</li>


<li><strong>Ask for one ‘Phase 0’ you can start next week.</strong> Big roadmaps die in committee, honestly. After the first output, ask: “Create a Phase 0 that takes 10 business days, uses no new tools, and produces 2 early-warning indicators we can track.”</li>


<li><strong>Make the system cross-functional on purpose.</strong> This roadmap works best when Finance and Ops are in the loop early, not after HR ‘finishes.’ Try: “Rewrite the stakeholder plan to include CFO, FP&amp;A, and Department Ops; include the one decision each group will own using these signals.”</li>


<li><strong>Iterate the predictive layer separately from the governance layer.</strong> First, lock down definitions, cadence, and ownership. Then refine analytics. A useful follow-up prompt is: “Now propose three maturity levels for predictive analytics (basic rules, intermediate scoring, advanced modeling) and specify prerequisites for each.”</li>

</ul>

</div>

<div class="related-prompts-section">

<h2 class="wp-block-heading">Related Prompts</h2>



<p>If you’re tightening the operating system around people decisions, these related prompts help you pressure-test the financial and compliance side that often gets pulled into workforce changes.</p>



<p>If you also need to align payroll and employee communications during transition periods, <a href="https://flowpast.com/prompts/fine-tune-w-4-withholding-with-this-ai-prompt/">Fine-Tune W-4 Withholding with this AI Prompt</a> is a practical companion. When your roadmap leads to changes in comp structure, mobility, or rehiring, questions about withholding and employee guidance come up fast, and a clean workflow reduces noise for HR.</p>



<p>For teams doing scenario planning and headcount forecasting, tax implications can become part of the “true cost” conversation. <a href="https://flowpast.com/prompts/ai-prompt-to-plan-bonus-withholding-with-w-4-adjustments/">AI Prompt to Plan Bonus Withholding With W-4 Adjustments</a> pairs well when retention interventions include spot bonuses, manager-led incentives, or rehire sign-on packages, and you need a consistent way to explain the withholding impact.</p>



<p>When workforce changes span multiple states, compliance steps are easy to miss, especially if offboarding volumes spike. <a href="https://flowpast.com/prompts/state-income-tax-compliance-checklist-ai-prompt/">State Income Tax Compliance Checklist AI Prompt</a> helps you keep the operational basics steady while you build the larger talent intelligence system. It’s not strategic, but it prevents costly “we forgot” moments.</p>


<br>


<p>Quick reference:</p>



<ul class="wp-block-list">

<li><a href="https://flowpast.com/prompts/fine-tune-w-4-withholding-with-this-ai-prompt/">Fine-Tune W-4 Withholding with this AI Prompt</a>: Reduce confusion around employee withholding changes.</li>


<li><a href="https://flowpast.com/prompts/optimize-tax-filing-status-ai-prompt/">Optimize Tax Filing Status AI Prompt</a>: Clarify filing status choices during transitions.</li>


<li><a href="https://flowpast.com/prompts/state-income-tax-compliance-checklist-ai-prompt/">State Income Tax Compliance Checklist AI Prompt</a>: Keep multi-state payroll steps consistent.</li>


<li><a href="https://flowpast.com/prompts/ai-prompt-to-plan-bonus-withholding-with-w-4-adjustments/">AI Prompt to Plan Bonus Withholding With W-4 Adjustments</a>: Model bonus withholding for retention incentives.</li>


<li><a href="https://flowpast.com/prompts/create-a-tax-deduction-checklist-ai-prompt/">Create a Tax Deduction Checklist AI Prompt</a>: Track deduction items that affect take-home pay.</li>

</ul>

</div>

<div class="faq-section">

<h2 class="wp-block-heading">Common Questions</h2>


<div class="faq-item">
<span class="question">Which roles benefit most from this talent intelligence roadmap AI prompt?</span>

<p class="answer"><strong>Heads of People / HR Directors</strong> use this to turn exit interviews and attrition patterns into a managed system with owners, cadence, and measurable outcomes. <strong>People Analytics Managers</strong> benefit because the prompt forces a signal map and definitions, which stops “dashboard requests” from becoming endless one-offs. <strong>Workforce Planning leads</strong> use it to connect departures, hiring velocity, and skill gaps into forecasting that business leaders trust. <strong>HR consultants</strong> apply it when a client needs an implementation roadmap that reads like a project plan, not a slide of best practices.</p>

</div>

<div class="faq-item">
<span class="question">Which industries get the most value from this talent intelligence roadmap AI prompt?</span>

<p class="answer"><strong>SaaS and tech companies</strong> get value because growth, reorgs, and role churn can make retention signals noisy; this roadmap creates a repeatable loop from exits to forecasting and interventions. <strong>Retail and logistics</strong> teams use it to address high-volume attrition, where early-warning indicators and manager-level patterns matter more than one-off exit narratives. <strong>Healthcare providers</strong> benefit when critical roles (nurses, technicians) drive service capacity; the roadmap helps tie departures to staffing models and employer reputation in local markets. <strong>Professional services firms</strong> use it to connect exit reasons and alumni outcomes to pipeline risk, staffing plans, and targeted boomerang hiring.</p>

</div>

<div class="faq-item">
<span class="question">Why do basic AI prompts for building a talent intelligence roadmap produce weak results?</span>

<p class="answer">A typical prompt like “Write me a talent intelligence roadmap for my company” fails because it: lacks delivery standards (so you get vague HR advice instead of methods, templates, and governance), provides no cross-domain linkage between exits, planning, brand, and rehire, ignores predictive and early-warning mechanisms, produces a single “future state” narrative rather than phased milestones with resourcing, and misses adoption tactics that make leaders actually use the system. This prompt is better because it is explicit about scope boundaries and forces an implementation-grade plan, not a concept note.</p>

</div>

<div class="faq-item">
<span class="question">Can I customize this talent intelligence roadmap prompt for my specific situation?</span>

<p class="answer">Yes, even though the prompt has zero form variables, you customize it by adding a short input block before the prompt text. Include your current tools (HRIS/ATS), operating cadence, top attrition segments, and what “bad” looks like (regretted loss rate, offer-decline rate, time-to-fill). Then ask it to tailor phases to your constraints, for example: “Assume no new software for 90 days and only 0.5 FTE from People Analytics; redesign the timeline accordingly.” A strong follow-up is: “Now rewrite Phase 1 as a two-page internal implementation brief for executives, including decisions needed and ROI metrics.”</p>

</div>

<div class="faq-item">
<span class="question">What are the most common mistakes when using this talent intelligence roadmap prompt?</span>

<p class="answer">The biggest mistake is giving no company context at all, which forces generic assumptions; instead of “We want better retention,” use “We’re 1,200 employees, attrition is concentrated in frontline supervisors within 120 days, and exits are stored in unstructured notes.” Another common error is asking for “a dashboard” rather than an operating system, so specify governance and decision points (good: “Define owners, cadence, and escalation triggers”; bad: “Make charts for HR”). Teams also forget employer reputation sensing, even though the prompt requires it; name the channels you monitor (Glassdoor, LinkedIn comments, candidate NPS) so the roadmap can wire them in. Finally, people skip resourcing assumptions; give a realistic constraint like “1 HRBP, 1 analyst, and 2 hours/week from Finance” so the plan is implementable.</p>

</div>

<div class="faq-item">
<span class="question">Who should NOT use this talent intelligence roadmap prompt?</span>

<p class="answer">This prompt isn’t ideal for one-time projects where you will not implement governance or run an ongoing cadence, because the value comes from repetition and feedback loops. It’s also a poor fit if you have not validated your core people data (basic headcount accuracy, exit reason capture, role taxonomy); you will need to clean the foundation first. And if you only want quick copy for an HR memo or generic retention tips, this will feel too operational and structured. In those cases, start with a simpler diagnostic and data hygiene plan, then return to this roadmap once the basics are stable.</p>

</div>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Which roles benefit most from this talent intelligence roadmap AI prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Heads of People / HR Directors use this to turn exit interviews and attrition patterns into a managed system with owners, cadence, and measurable outcomes. People Analytics Managers benefit because the prompt forces a signal map and definitions, which stops “dashboard requests” from becoming endless one-offs. Workforce Planning leads use it to connect departures, hiring velocity, and skill gaps into forecasting that business leaders trust. HR consultants apply it when a client needs an implementation roadmap that reads like a project plan, not a slide of best practices."
      }
    },
    {
      "@type": "Question",
      "name": "Which industries get the most value from this talent intelligence roadmap AI prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "SaaS and tech companies get value because growth, reorgs, and role churn can make retention signals noisy; this roadmap creates a repeatable loop from exits to forecasting and interventions. Retail and logistics teams use it to address high-volume attrition, where early-warning indicators and manager-level patterns matter more than one-off exit narratives. Healthcare providers benefit when critical roles (nurses, technicians) drive service capacity; the roadmap helps tie departures to staffing models and employer reputation in local markets. Professional services firms use it to connect exit reasons and alumni outcomes to pipeline risk, staffing plans, and targeted boomerang hiring."
      }
    },
    {
      "@type": "Question",
      "name": "Why do basic AI prompts for building a talent intelligence roadmap produce weak results?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "A typical prompt like “Write me a talent intelligence roadmap for my company” fails because it: lacks delivery standards (so you get vague HR advice instead of methods, templates, and governance), provides no cross-domain linkage between exits, planning, brand, and rehire, ignores predictive and early-warning mechanisms, produces a single “future state” narrative rather than phased milestones with resourcing, and misses adoption tactics that make leaders actually use the system. This prompt is better because it is explicit about scope boundaries and forces an implementation-grade plan, not a concept note."
      }
    },
    {
      "@type": "Question",
      "name": "Can I customize this talent intelligence roadmap prompt for my specific situation?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Yes, even though the prompt has zero form variables, you customize it by adding a short input block before the prompt text. Include your current tools (HRIS/ATS), operating cadence, top attrition segments, and what “bad” looks like (regretted loss rate, offer-decline rate, time-to-fill). Then ask it to tailor phases to your constraints, for example: “Assume no new software for 90 days and only 0.5 FTE from People Analytics; redesign the timeline accordingly.” A strong follow-up is: “Now rewrite Phase 1 as a two-page internal implementation brief for executives, including decisions needed and ROI metrics.”"
      }
    },
    {
      "@type": "Question",
      "name": "What are the most common mistakes when using this talent intelligence roadmap prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "The biggest mistake is giving no company context at all, which forces generic assumptions; instead of “We want better retention,” use “We’re 1,200 employees, attrition is concentrated in frontline supervisors within 120 days, and exits are stored in unstructured notes.” Another common error is asking for “a dashboard” rather than an operating system, so specify governance and decision points (good: “Define owners, cadence, and escalation triggers”; bad: “Make charts for HR”). Teams also forget employer reputation sensing, even though the prompt requires it; name the channels you monitor (Glassdoor, LinkedIn comments, candidate NPS) so the roadmap can wire them in. Finally, people skip resourcing assumptions; give a realistic constraint like “1 HRBP, 1 analyst, and 2 hours/week from Finance” so the plan is implementable."
      }
    },
    {
      "@type": "Question",
      "name": "Who should NOT use this talent intelligence roadmap prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "This prompt isn’t ideal for one-time projects where you will not implement governance or run an ongoing cadence, because the value comes from repetition and feedback loops. It’s also a poor fit if you have not validated your core people data (basic headcount accuracy, exit reason capture, role taxonomy); you will need to clean the foundation first. And if you only want quick copy for an HR memo or generic retention tips, this will feel too operational and structured. In those cases, start with a simpler diagnostic and data hygiene plan, then return to this roadmap once the basics are stable."
      }
    }
  ]
}
</script>
</div>

<div class="closing-section">

<p>People data is only valuable when it changes decisions. Paste this prompt into your AI tool, run it once for a baseline roadmap, then iterate until the phases, owners, and metrics match how your company really works.</p>

</div>]]></content:encoded>
					
		
		
		<media:content url="https://flowpast.s3.eu-north-1.amazonaws.com/featured_blog_images/5003122.webp" medium="image"></media:content>
            	</item>
		<item>
		<title>Compare PM Software Reporting and Progress AI Prompt</title>
		<link>https://flowpast.com/prompts/compare-pm-software-reporting-and-progress-ai-prompt/</link>
		
		<dc:creator><![CDATA[Lisa Granqvist]]></dc:creator>
		<pubDate>Fri, 23 Jan 2026 01:34:50 +0000</pubDate>
				<category><![CDATA[Prompts]]></category>
		<guid isPermaLink="false">https://flowpast.com/?p=5001682</guid>

					<description><![CDATA[Reporting is unclear - a proven AI Prompt that compares PM platforms for dashboards, progress, and value with Impact and Effort scores. Discover more AI prompts for marketing, sales, and ops.]]></description>
										<content:encoded><![CDATA[<!-- FOCUS_KEYWORD: PM software reporting -->
<div class="hook-introduction">

<p>Most PM tool comparisons fall apart right where you need them most: reporting and progress visibility. You get a “top 10” list, a few vague pros/cons, and no clear way to decide what will actually work for your team’s dashboards, exec updates, and delivery tracking.</p>



<p>This <strong>PM software reporting</strong> is built for <strong>PMO leads</strong> who need consistent portfolio views without manual spreadsheet stitching, <strong>Ops managers</strong> who are tired of status meetings that still don’t answer “are we on track?”, and <strong>agency delivery directors</strong> who must show progress to clients with clean, repeatable reporting. The output is a scored shortlist (usually 6–10 tools) with Impact and Effort scores, differentiators, and decision-ready next steps tailored to your situation.</p>

</div>

<div class="what-and-when-section">

<h2 class="wp-block-heading">What Does This AI Prompt Do and When to Use It?</h2>



<table class="solution-results-table three-column" role="presentation" aria-label="What this prompt does, when to use it, and what you get">
 <thead>
    <tr>
      <th scope="col">What This Prompt Does</th>
      <th scope="col">When to Use This Prompt</th>
      <th scope="col">What You&#8217;ll Get</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <ul class="automation-list">
          <li>It restates your context and confirms decision criteria in 3–6 bullets before recommending anything.</li>
          <li>It selects 6–10 purpose-built project management tools that match your team size and budget range.</li>
          <li>It evaluates each tool with extra emphasis on reporting quality and progress tracking, not just task lists.</li>
          <li>It assigns consistent Impact (1–10) and Effort (1–10) scores across tools so tradeoffs are comparable.</li>
          <li>It flags missing or vague inputs, makes minimal assumptions, and calls those assumptions out explicitly.</li>
       </ul>
      </td>
      <td>
        <ul class="results-list">
          <li>You’re considering a new PM platform because leadership wants clearer dashboards and fewer “status scramble” Fridays.</li>
          <li>Your current tool “works,” but progress tracking is murky and reporting requires exports, pivots, and manual cleanup.</li>
          <li>You have to choose between tools that feel similar on the surface (Jira vs Asana vs Monday), and need a decision framework.</li>
          <li>You’re under pressure to standardize reporting across multiple teams without forcing everyone into a painful workflow change.</li>
          <li>You’re scaling delivery (more projects, more stakeholders) and your current reporting approach is starting to break.</li>
        </ul>
      </td>
       <td>
         <ul class="deliverables-list">
           <li>A scored shortlist of 6–10 PM tools with a brief “best fit for” note for each option.</li>
           <li>Per-tool mini-evaluations that cover reporting, progress visibility, usability, integrations, and pricing fit.</li>
           <li>Impact (1–10) and Effort (1–10) scores for every tool, applied consistently so the ranking is meaningful.</li>
           <li>A clear recommendation set (top picks plus “avoid for your case” notes) with rationale you can share internally.</li>
           <li>Next-step recommendations for trialing and validating tools, including what to test in a pilot.</li>
         </ul>
       </td>
    </tr>
  </tbody>
</table>

</div>

<div class="prompt-display-section">

<h2 class="wp-block-heading">The Full AI Prompt: PM Software Reporting and Progress Comparison</h2>



<div class="prompt-viewer-wrapper" id="prompt-section">
    <div class="prompt-comparison-row prompt-premium">
        <!-- Header with buttons -->
        <div class="prompt-row-header">
            <!-- <span class="prompt-row-icon">✨</span> -->
            <span class="prompt-row-title">
                                    Step 1: Customize the prompt with your input
                            </span>
            <div class="prompt-header-buttons">
                                    <button class="prompt-header-btn prompt-header-reset" onclick="resetPrompt()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
                            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
                        </svg>
                        <span>Reset</span>
                    </button>
                                <button class="prompt-header-btn prompt-header-copy-green flowpast-copy-prompt-btn" onclick="handlePromptCopy()">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                        <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
                    </svg>
                    <span>Customize and Copy Full Prompt</span>
                </button>
            </div>
        </div>

        <!-- Customize the Prompt Section -->
                    <div class="prompt-customize-section">
                <span class="customize-title">Customize the Prompt</span>
                <p class="customize-subtitle">Fill in the fields below to personalize this prompt for your needs.</p>
                <table class="customize-table">
                    <thead>
                        <tr>
                            <th>Variable</th>
                            <th>What to Enter</th>
                            <th>Customise the prompt</th>
                        </tr>
                    </thead>
                    <tbody>
                                                    <tr>
                                <td class="var-name"><code>[INDUSTRY]</code></td>
                                <td class="var-desc">
                                    Specify the industry your team operates in to tailor recommendations to relevant tools and features. If your industry has unique needs, include those details.                                    <div class="var-example">For example: "Healthcare technology focused on patient data management and compliance with HIPAA regulations."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[INDUSTRY]"
                                            placeholder="Enter your value here..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[TEAM_SIZE]</code></td>
                                <td class="var-desc">
                                    Enter the size of your team, including all members who will use the project management tool. This helps assess scalability and feature suitability.                                    <div class="var-example">For example: "25 team members including project managers, developers, and designers."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[TEAM_SIZE]"
                                            placeholder="Enter your value here..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[BUDGET]</code></td>
                                <td class="var-desc">
                                    Provide your estimated budget for project management software, including monthly or annual limits. Specify if pricing flexibility is important.                                    <div class="var-example">For example: "$2,000 per month with an option to scale up for advanced features."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[BUDGET]"
                                            placeholder="Enter your value here..." />
                                                                    </td>
                            </tr>
                                            </tbody>
                </table>

                <button class="copy-customized-btn flowpast-copy-prompt-btn" onclick="handlePromptCopy()">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                        <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
                    </svg>
                    <span class="copy-customized-text">Customise the prompt now</span>
                </button>
            </div>
        
        <!-- Full Prompt Code Header -->
                    <div class="prompt-code-header">
                <span class="prompt-code-title">
                    Step 2: Copy the Prompt
                </span>
                <div class="prompt-code-buttons">
                    <!-- Reset: Only visible when unlocked -->
                    <button class="prompt-header-btn prompt-header-reset btn-when-unlocked" onclick="resetPrompt()" style="display: none;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
                            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
                        </svg>
                        <span>Reset</span>
                    </button>
                    <!-- Copy Full Prompt -->
                    <button class="prompt-header-btn prompt-header-copy flowpast-copy-prompt-btn" onclick="handlePromptCopy()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                            <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
                        </svg>
                        <span>Copy Full Prompt</span>
                    </button>
                </div>
            </div>
        

        <!-- Prompt Content -->
        <div class="prompt-box prompt-gated-wrapper">
            <!-- Gated: Blurred content -->
            <div class="prompt-gated-content">
                <div class="prompt-header-visible">OBJECTIVE</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">PERSONA</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">CONSTRAINTS</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">What This Is NOT</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">PROCESS</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div><div class="locked-line" style="width: 80%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">Edge Case Handling</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">INPUTS</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">OUTPUT SPECIFICATION</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div><div class="locked-line" style="width: 80%;"></div><div class="locked-line" style="width: 95%;"></div><div class="locked-line" style="width: 70%;"></div><div class="locked-line" style="width: 83%;"></div><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">QUALITY CHECKS</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div></div></div><div class="locked-section-icon">🔒</div></div>            </div>
            <!-- Unlocked: Full content (hidden by default) -->
            <div class="prompt-content-full" id="premium-prompt-content" style="display: none;">
                ## OBJECTIVE
Identify, assess, and compare software options that help a team manage projects with strong reporting and progress visibility. Produce a scored shortlist and clear next-step recommendations tailored to the user’s situation.

## PERSONA
Act as a software-focused project management advisor with hands-on experience rolling out PM platforms, improving portfolio reporting, and driving adoption across teams. Write in a pragmatic, business-friendly style that favors decision-ready detail over marketing language.

## CONSTRAINTS
- Center the evaluation on **reporting quality** and **progress tracking**.
- Also weigh: usability/UI, integrations with common business apps, and total cost/pricing flexibility.
- Include only tools that are **purpose-built for project management** (exclude general note-taking, docs, chat, or spreadsheet-only solutions unless they are explicitly PM products).
- Call out differentiators that make each tool meaningfully distinct.
- Use **Impact (1–10)** and **Effort (1–10)** scores consistently across tools.
- If user inputs are missing or vague, make minimal assumptions and flag them explicitly (see Edge Cases).

### What This Is NOT
- Not a vendor-sponsored ranking or a guarantee of best price.
- Not a full procurement/SOC2/legal review.
- Not an implementation plan, migration plan, or change-management program (you may suggest high-level next steps only).
- Not a deep review of tools outside project management (e.g., BI suites as primary solutions).

## PROCESS
1. **Pre-analysis (required):** Restate the user’s context in 3–6 bullets and confirm the decision criteria you will use.
2. **Tool selection:** Choose a set of leading PM tools relevant to the user’s team size and budget (typically 6–10 options unless constrained by inputs).
3. **Per-tool evaluation:** For each tool, summarize key capabilities with emphasis on reporting/progress tracking, then assess usability, integrations, and pricing fit.
4. **Scoring method:**  
   - Impact score reflects how strongly the tool will improve reporting, visibility, and delivery management for the stated context.  
   - Effort score reflects rollout friction (setup complexity, learning curve, admin overhead, migration difficulty, and integration work).  
5. **Synthesis:** Identify the top performers, explain why they scored well, and provide concrete recommendations (e.g., who should pilot what, what to test, what to avoid).

### Edge Case Handling
- If **[INDUSTRY]** is unspecified: default to cross-industry needs and highlight where industry-specific requirements might change the ranking.
- If **[TEAM_SIZE]** is missing: present separate guidance for small (1–10), mid (11–50), and larger (51–200) teams.
- If **[BUDGET]** is unclear: score based on common pricing tiers and label cost assumptions; suggest a “low-cost,” “mid-tier,” and “premium” path.
- If integrations are unknown: propose a standard integration set (email/calendar, chat, file storage, CRM/helpdesk, SSO) and note where validation is needed.

## INPUTS
- **Industry:** [INDUSTRY]
- **Team size:** [TEAM_SIZE]
- **Budget range:** [BUDGET]

## OUTPUT SPECIFICATION
Deliverables must include:

1. **Pre-analysis summary** (bullets).

2. **Comparison table** with these columns (use a markdown table):
- Tool Name
- Key Features
- Benefits
- Impact Score (1–10)
- Effort Score (1–10)
- Notes

Each row should be filled with AI-generated content using clear, concrete phrasing. Where useful, include details such as {Notable Reporting Capability}, {Integration Examples}, and {Pricing Fit} inside the relevant cells.

3. **Top-tool breakdown (after the table):**
- Name 2–4 highest-scoring tools.
- For each, provide: {Best Fit Scenario}, {Why It Wins On Reporting}, {Adoption Watchouts}, {Ideal Pilot Test}.
- End with {Recommended Next Steps} in 3–6 bullets.

## QUALITY CHECKS
Before finalizing, verify:
- The table includes only project-management-specific tools and excludes general-purpose apps.
- Every tool has distinct reporting/progress tracking notes (not generic repeats).
- Impact/Effort scores align with the written rationale (no unexplained numbers).
- Recommendations are consistent with [TEAM_SIZE] and [BUDGET] constraints.
- Any assumptions due to missing inputs are clearly labeled and kept minimal.            </div>
        </div>


    </div>

    <!-- CTA Row - Full width buttons -->
    <div class="prompt-cta-row">
        <button class="prompt-cta-btn prompt-cta-copy flowpast-copy-prompt-btn" onclick="handlePromptCopy()">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
            </svg>
            <span class="cta-copy-text">Copy Full Prompt</span>
        </button>
    </div>
</div>

<style>
    /* Gated prompt states */
    .prompt-gated-wrapper {
        position: relative;
    }

    /* When unlocked - show full content, hide gated */
    body.flowpast-unlocked .prompt-gated-wrapper .prompt-gated-content {
        display: none;
    }

    body.flowpast-unlocked .prompt-gated-wrapper .prompt-content-full {
        display: block !important;
    }

    /* Show/hide elements based on unlock state */
    body.flowpast-unlocked .btn-when-unlocked {
        display: inline-flex !important;
    }

    .prompt-viewer-wrapper {
        scroll-margin-top: 250px;
    }

    /* ========================================
   PROMPT VIEWER - MAIN WRAPPER
   ======================================== */
    .prompt-viewer-wrapper {
        margin: 30px 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* ========================================
   PROMPT BOX CONTAINER
   ======================================== */
    .prompt-comparison-row {
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid #e0e0e0;
        background: #fff;
    }

    /* ========================================
   HEADER WITH BUTTONS
   ======================================== */
    .prompt-row-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 20px;
        color: #fff !important;
        background: #141414;
        border-bottom: 1px solid #e0e0e0;
        flex-wrap: wrap;
    }

    .prompt-row-icon {
        font-size: 20px;
    }

    .prompt-row-title {
        font-weight: 600;
        font-size: 22px;
        color: #fff !important;
        text-decoration: underline
    }

    .prompt-header-buttons {
        margin-left: auto;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    /* Header buttons */
    .prompt-header-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
        border: none;
    }

    .prompt-header-copy {
        background: #3a3a3a;
        color: #fff;
    }

    .prompt-header-copy:hover {
        background: #2a2a2a;
    }

    .prompt-header-copy.copied {
        background: #2e7d32;
    }

    .prompt-header-copy-green {
        background: #04AA6D !important;
        color: #fff !important;
    }

    .prompt-header-copy-green:hover {
        background: #039860 !important;
    }

    .prompt-header-copy-green.copied {
        background: #2e7d32 !important;
    }

    .prompt-header-access {
        background: rgb(5, 152, 98);
        color: #fff !important;
    }

    .prompt-header-access:hover {
        background: rgb(4, 130, 83);
        transform: translateY(-1px);
    }

    /* ========================================
   PROMPT CONTENT - FULL (NO SCROLL)
   ======================================== */
    .prompt-box {
        background: #ffffff;
    }

    .prompt-content-full {
        padding: 24px;
        margin: 0;
        color: #202124;
        background: #ffffff;
        font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
        font-size: 13px;
        line-height: 1.7;
        white-space: pre-wrap;
        word-wrap: break-word;
        /* No scroll - show full content */
        max-height: none;
        overflow: visible;
    }

    /* Highlighted variable in prompt */
    .prompt-variable {
        background: #fff3cd;
        color: #1967d2;
        font-weight: 700;
        padding: 2px 4px;
        border-radius: 3px;
        border: 1px solid #ffc107;
    }

    .prompt-variable-filled {
        background: #d4edda;
        color: #155724;
        font-weight: 700;
        padding: 2px 4px;
        border-radius: 3px;
        border: 1px solid #28a745;
    }

    /* ========================================
   GATED CONTENT (NO ACCESS)
   ======================================== */
    .prompt-gated-content {
        padding: 24px;
        background: #ffffff;
        font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
        font-size: 13px;
        line-height: 1.8;
        max-height: none;
        overflow: visible;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        cursor: default;
    }

    /* ## headers - larger, black */
    .prompt-header-visible {
        color: #202124;
        font-weight: 600;
        margin: 5px 0 0px 0;
        font-size: 20px;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    /* ### headers - smaller, black */
    .prompt-header-visible.subheader {
        color: #202124;
        font-weight: 600;
        margin: 5px 0;
        font-size: 18px;
    }

    .prompt-header-visible:first-child {
        margin-top: 0;
    }

    /* ========================================
   LOCKED SECTION BLOCK
   ======================================== */
    .locked-section {
        position: relative;
        margin: 4px 0 8px 0;
        border-radius: 6px;
        overflow: hidden;
        background: linear-gradient(110deg, #e2e8f0 8%, #f1f5f9 18%, #e2e8f0 33%);
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    .locked-section-bg {
        position: relative;
    }

    .locked-section-lines {
        padding: 8px 12px;
        position: relative;
    }

    .locked-line {
        height: 6px;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 3px;
        margin-bottom: 4px;
        margin-left: 12px;
    }

    .locked-line:last-child {
        margin-bottom: 0;
    }

    .locked-section-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        font-size: 24px;
        filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
    }

    /* Subheader locked sections - slightly indented */
    /*  .prompt-header-visible.subheader+.locked-section {
        margin-left: 16px;
    } */

    /* ========================================
   COMPATIBILITY BADGES
   ======================================== */
    .prompt-compatibility {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 12px 20px;
        background: #f8f9fa;
        border-top: 1px solid #e0e0e0;
    }

    .compat-label {
        font-size: 13px;
        color: #5f6368;
        font-weight: 500;
    }

    .compat-badge {
        padding: 4px 10px;
        background: #e8f0fe;
        color: #1967d2;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
    }

    /* ========================================
   CTA ROW - FULL WIDTH BUTTONS
   ======================================== */
    .prompt-cta-row {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }

    .prompt-cta-btn {
        flex: 1;
        min-width: 200px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 16px 24px;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
        border: none;
    }

    .prompt-cta-copy {
        background: #3a3a3a;
        color: #fff;
    }

    .prompt-cta-copy:hover {
        background: #2a2a2a;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .prompt-cta-copy.copied {
        background: #2e7d32;
    }

    .prompt-cta-reset {
        background: #3a3a3a;
        color: #fff;
    }

    .prompt-cta-reset:hover {
        background: #2a2a2a;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .prompt-cta-access {
        background: rgb(5, 152, 98);
        color: #fff !important;
    }

    .prompt-cta-access:hover {
        background: rgb(4, 130, 83);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(5, 152, 98, 0.3);
    }

    /* ========================================
    CUSTOMIZE YOUR PROMPT SECTION
    ======================================== */
    .prompt-customize-section {
        padding: 24px;
        border-bottom: 1px solid #e0e0e0;
        background: #fafbfc;
    }

    .customize-title {
        margin: 0 0 8px 0;
        font-size: 18px;
        font-weight: 700;
        color: #202124;
    }

    .customize-subtitle {
        margin: 0 0 20px 0;
        font-size: 14px;
        color: #5f6368;
    }

    .customize-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
    }

    .customize-table th {
        text-align: left;
        padding: 12px;
        background: #f1f3f4;
        border: 1px solid #e0e0e0;
        font-size: 13px;
        font-weight: 600;
        color: #202124;
    }

    .customize-table td {
        padding: 12px;
        border: 1px solid #e0e0e0;
        vertical-align: top;
    }

    .customize-table .var-name {
        width: 25%;
        background: #f8f9fa;
    }

    .customize-table .var-name code {
        background: #fff3cd;
        color: #1967d2;
        border: 1px solid #ffc107;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        word-break: break-all;
        font-weight: 600;
    }

    .customize-table .var-desc {
        width: 35%;
        font-size: 13px;
        color: #5f6368;
        line-height: 1.5;
    }

    .customize-table .var-example {
        margin-top: 8px;
        padding: 8px 10px;
        background: #f8f9fa;
        border-left: 3px solid #dadce0;
        font-size: 12px;
        color: #5f6368;
        font-style: italic;
        border-radius: 0 4px 4px 0;
    }

    .customize-table .var-input {
        width: 40%;
    }

    .customize-input {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #dadce0;
        border-radius: 6px;
        font-size: 13px;
        font-family: inherit;
        resize: vertical;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .customize-input:focus {
        outline: none;
        border-color: rgb(5, 152, 98);
        box-shadow: 0 0 0 3px rgba(5, 152, 98, 0.1);
    }

    .customize-input::placeholder {
        color: #9aa0a6;
        font-style: italic;
    }

    .copy-customized-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 16px 24px;
        background: rgb(5, 152, 98);
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .copy-customized-btn:hover {
        background: rgb(4, 130, 83);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(5, 152, 98, 0.3);
    }

    .copy-customized-btn.copied {
        background: #2e7d32;
    }

    /* ========================================
    FULL PROMPT CODE HEADER
    ======================================== */
    .prompt-code-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px;
        color: #fff !important;
        background: #141414;
        border-bottom: 1px solid #e0e0e0;
    }

    .prompt-code-title {
        font-size: 22px;
        font-weight: 600;
        text-decoration: underline;

    }

    .prompt-code-buttons {
        display: flex;
        gap: 8px;
    }

    .prompt-code-buttons .prompt-header-btn {
        padding: 8px 14px;
        font-size: 13px;
        background: #ffffff;
        color: #202124;
        border: 1px solid #dadce0;
    }

    .prompt-code-buttons .prompt-header-access {
        background: rgb(5, 152, 98);
        color: #fff !important;
        border-color: rgb(5, 152, 98);
    }

    .prompt-code-buttons .prompt-header-btn.prompt-header-access:hover {
        background: rgb(4, 130, 83) !important;
        border-color: rgb(4, 130, 83);
        color: #fff !important;
    }

    .prompt-code-buttons .prompt-header-btn:hover {
        background: #f1f3f4;
    }

    .prompt-code-buttons .prompt-header-copy.copied {
        background: #d4edda;
        color: #155724;
        border-color: #28a745;
    }

    .prompt-header-reset {
        background: #ffffff;
        color: #202124;
    }

    /* ========================================
   RESPONSIVE
   ======================================== */
    @media (max-width: 768px) {
        .prompt-row-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
        }

        .prompt-header-buttons {
            margin-left: 0;
            width: 100%;
        }

        .prompt-header-btn {
            flex: 1;
            justify-content: center;
        }

        .prompt-cta-row {
            flex-direction: column;
        }

        .prompt-cta-btn {
            width: 100%;
        }

        /* Customize table responsive */
        .customize-table,
        .customize-table thead,
        .customize-table tbody,
        .customize-table tr,
        .customize-table th,
        .customize-table td {
            display: block;
        }

        .customize-table thead {
            display: none;
        }

        .customize-table tr {
            margin-bottom: 16px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            overflow: hidden;
        }

        .customize-table td {
            width: 100% !important;
            border: none;
            border-bottom: 1px solid #e0e0e0;
        }

        .customize-table td:last-child {
            border-bottom: none;
        }

        .customize-table .var-name {
            background: #f1f3f4;
            font-weight: 600;
        }

        .prompt-code-header {
            flex-direction: column;
            gap: 12px;
            align-items: flex-start;
        }

        .prompt-code-buttons {
            width: 100%;
        }

        .prompt-code-buttons .prompt-header-btn {
            flex: 1;
            justify-content: center;
        }
    }
</style>

<script>
    function handlePromptCopy() {
        // Check if unlocked via cookie
        if (typeof window.flowpastIsUnlocked === 'function' && !window.flowpastIsUnlocked()) {
            // Show email popup
            if (typeof window.flowpastShowEmailPopup === 'function') {
                window.flowpastShowEmailPopup('prompt');
            }
            return;
        }

        // Copy the customized prompt (with filled variables)
        const customizedPrompt = getCustomizedPrompt();
        const copyButtons = document.querySelectorAll('.prompt-header-copy, .prompt-header-copy-green, .prompt-cta-copy, .copy-customized-btn');

        navigator.clipboard.writeText(customizedPrompt).then(() => {
            copyButtons.forEach(btn => {
                btn.classList.add('copied');
                const textSpan = btn.querySelector('span');
                if (textSpan) textSpan.textContent = 'Copied!';
            });

            setTimeout(() => {
                copyButtons.forEach(btn => {
                    btn.classList.remove('copied');
                    const textSpan = btn.querySelector('span');
                    if (textSpan) textSpan.textContent = 'Copy Full Prompt';
                });
            }, 2000);
        }).catch(err => {
            console.error('Failed to copy:', err);
        });
    }

    // Store original prompt for customization
    const originalPrompt = "## OBJECTIVE\r\nIdentify, assess, and compare software options that help a team manage projects with strong reporting and progress visibility. Produce a scored shortlist and clear next-step recommendations tailored to the user\u2019s situation.\r\n\r\n## PERSONA\r\nAct as a software-focused project management advisor with hands-on experience rolling out PM platforms, improving portfolio reporting, and driving adoption across teams. Write in a pragmatic, business-friendly style that favors decision-ready detail over marketing language.\r\n\r\n## CONSTRAINTS\r\n- Center the evaluation on **reporting quality** and **progress tracking**.\r\n- Also weigh: usability\/UI, integrations with common business apps, and total cost\/pricing flexibility.\r\n- Include only tools that are **purpose-built for project management** (exclude general note-taking, docs, chat, or spreadsheet-only solutions unless they are explicitly PM products).\r\n- Call out differentiators that make each tool meaningfully distinct.\r\n- Use **Impact (1\u201310)** and **Effort (1\u201310)** scores consistently across tools.\r\n- If user inputs are missing or vague, make minimal assumptions and flag them explicitly (see Edge Cases).\r\n\r\n### What This Is NOT\r\n- Not a vendor-sponsored ranking or a guarantee of best price.\r\n- Not a full procurement\/SOC2\/legal review.\r\n- Not an implementation plan, migration plan, or change-management program (you may suggest high-level next steps only).\r\n- Not a deep review of tools outside project management (e.g., BI suites as primary solutions).\r\n\r\n## PROCESS\r\n1. **Pre-analysis (required):** Restate the user\u2019s context in 3\u20136 bullets and confirm the decision criteria you will use.\r\n2. **Tool selection:** Choose a set of leading PM tools relevant to the user\u2019s team size and budget (typically 6\u201310 options unless constrained by inputs).\r\n3. **Per-tool evaluation:** For each tool, summarize key capabilities with emphasis on reporting\/progress tracking, then assess usability, integrations, and pricing fit.\r\n4. **Scoring method:**  \r\n   - Impact score reflects how strongly the tool will improve reporting, visibility, and delivery management for the stated context.  \r\n   - Effort score reflects rollout friction (setup complexity, learning curve, admin overhead, migration difficulty, and integration work).  \r\n5. **Synthesis:** Identify the top performers, explain why they scored well, and provide concrete recommendations (e.g., who should pilot what, what to test, what to avoid).\r\n\r\n### Edge Case Handling\r\n- If **[INDUSTRY]** is unspecified: default to cross-industry needs and highlight where industry-specific requirements might change the ranking.\r\n- If **[TEAM_SIZE]** is missing: present separate guidance for small (1\u201310), mid (11\u201350), and larger (51\u2013200) teams.\r\n- If **[BUDGET]** is unclear: score based on common pricing tiers and label cost assumptions; suggest a \u201clow-cost,\u201d \u201cmid-tier,\u201d and \u201cpremium\u201d path.\r\n- If integrations are unknown: propose a standard integration set (email\/calendar, chat, file storage, CRM\/helpdesk, SSO) and note where validation is needed.\r\n\r\n## INPUTS\r\n- **Industry:** [INDUSTRY]\r\n- **Team size:** [TEAM_SIZE]\r\n- **Budget range:** [BUDGET]\r\n\r\n## OUTPUT SPECIFICATION\r\nDeliverables must include:\r\n\r\n1. **Pre-analysis summary** (bullets).\r\n\r\n2. **Comparison table** with these columns (use a markdown table):\r\n- Tool Name\r\n- Key Features\r\n- Benefits\r\n- Impact Score (1\u201310)\r\n- Effort Score (1\u201310)\r\n- Notes\r\n\r\nEach row should be filled with AI-generated content using clear, concrete phrasing. Where useful, include details such as {Notable Reporting Capability}, {Integration Examples}, and {Pricing Fit} inside the relevant cells.\r\n\r\n3. **Top-tool breakdown (after the table):**\r\n- Name 2\u20134 highest-scoring tools.\r\n- For each, provide: {Best Fit Scenario}, {Why It Wins On Reporting}, {Adoption Watchouts}, {Ideal Pilot Test}.\r\n- End with {Recommended Next Steps} in 3\u20136 bullets.\r\n\r\n## QUALITY CHECKS\r\nBefore finalizing, verify:\r\n- The table includes only project-management-specific tools and excludes general-purpose apps.\r\n- Every tool has distinct reporting\/progress tracking notes (not generic repeats).\r\n- Impact\/Effort scores align with the written rationale (no unexplained numbers).\r\n- Recommendations are consistent with [TEAM_SIZE] and [BUDGET] constraints.\r\n- Any assumptions due to missing inputs are clearly labeled and kept minimal.";
    const variables = ["[INDUSTRY]","[TEAM_SIZE]","[BUDGET]"];
    // Initial render with highlighted variables
    document.addEventListener('DOMContentLoaded', function() {
        renderPromptWithHighlights();
    });

    // Live update prompt as user types
    document.querySelectorAll('.customize-input').forEach(input => {
        input.addEventListener('input', renderPromptWithHighlights);
    });

    function renderPromptWithHighlights() {
        const promptContent = document.getElementById('premium-prompt-content');
        if (!promptContent) return;

        let updatedPrompt = originalPrompt;
        let filledVariables = {};

        // Collect filled values
        document.querySelectorAll('.customize-input').forEach(input => {
            const placeholder = input.dataset.placeholder;
            const value = input.value.trim();

            if (value) {
                filledVariables[placeholder] = value;
            }
        });

        // Replace filled variables and highlight remaining
        let htmlContent = escapeHtml(updatedPrompt);

        variables.forEach(placeholder => {
            const escapedPlaceholder = escapeHtml(placeholder);
            const regex = new RegExp(escapeRegex(escapedPlaceholder), 'g');

            if (filledVariables[placeholder]) {
                // Show filled value with green highlight
                htmlContent = htmlContent.replace(regex,
                    '<span class="prompt-variable-filled">' + escapeHtml(filledVariables[placeholder]) + '</span>'
                );
            } else {
                // Show original placeholder with yellow highlight
                htmlContent = htmlContent.replace(regex,
                    '<span class="prompt-variable">' + escapedPlaceholder + '</span>'
                );
            }
        });

        promptContent.innerHTML = htmlContent;
    }

    function escapeRegex(string) {
        return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    }

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    function resetPrompt() {
        // Clear all input fields
        document.querySelectorAll('.customize-input').forEach(input => {
            input.value = '';
        });

        // Re-render with original placeholders highlighted
        renderPromptWithHighlights();

        // Visual feedback
        const resetBtns = document.querySelectorAll('.prompt-header-reset, .prompt-cta-reset');
        resetBtns.forEach(btn => {
            const originalText = btn.querySelector('span').textContent;
            btn.querySelector('span').textContent = 'Reset!';
            setTimeout(() => {
                btn.querySelector('span').textContent = originalText;
            }, 1000);
        });
    }


    function getCustomizedPrompt() {
        let updatedPrompt = originalPrompt;

        document.querySelectorAll('.customize-input').forEach(input => {
            const placeholder = input.dataset.placeholder;
            const value = input.value.trim();

            if (value) {
                const regex = new RegExp(escapeRegex(placeholder), 'g');
                updatedPrompt = updatedPrompt.replace(regex, value);
            }
        });

        return updatedPrompt;
    }
</script>

</div>

<div class="pro-tips-section">

<h2 class="wp-block-heading">Pro Tips for Better AI Prompt Results</h2>



<ul class="wp-block-list">

<li><strong>Describe your reporting audience, not just your team.</strong> Reporting needs change depending on who consumes it (CFO, COO, clients, team leads). After you run the prompt once, follow up with: “Re-rank the shortlist prioritizing weekly exec reporting (budget, milestones, risks) over team-level sprint reporting.”</li>


<li><strong>Force the model to define “progress visibility” for your workflow.</strong> “Progress” can mean sprint burndown, milestone forecasting, earned value, throughput, or client-facing deliverable tracking. Add a follow-up prompt like: “In our case, progress visibility means milestone forecast accuracy and risk flags; revise the evaluations to weight those higher than velocity charts.”</li>


<li><strong>Ask for dashboard examples you can actually copy.</strong> The prompt already centers reporting, but you will get more value if you request concrete artifacts. Try: “For the top 3 tools, list 5 dashboard widgets we should build (names + what they show + who uses them).”</li>


<li><strong>Iterate with constraints, not opinions.</strong> If the first output feels generic, tighten the box. For example: “Now redo the shortlist assuming: 60 users, 6 external clients need access, we require Google Workspace + Slack integration, and we cannot exceed $12/user/month.”</li>


<li><strong>Make it earn the Effort score.</strong> Effort can hide big issues (data migration, permissions, reporting setup, training). Push for specifics: “For each tool, break Effort into setup, migration, reporting configuration, and adoption risk. Then recompute Effort (1–10) with a 1-sentence justification per sub-score.”</li>

</ul>

</div>

<div class="related-prompts-section">

<h2 class="wp-block-heading">Related Prompts</h2>



<p>If your PM tool decision touches regulated work, contracts, or formal documentation, these prompts can support the work around the platform rollout.</p>



<p>If your reporting needs are driven by legal risk tracking or you support an in-house legal team, <a href="https://flowpast.com/prompts/ai-prompt-to-draft-legal-trend-briefings-with-case-law/">AI Prompt to Draft Legal Trend Briefings With Case Law</a> pairs well with this comparison. When leaders ask “what changed and what do we do next?”, trend briefings can become a recurring deliverable that your PM dashboards link to and reference.</p>



<p>When your PM software evaluation is part of a broader push to standardize litigation workstreams, <a href="https://flowpast.com/prompts/draft-a-court-ready-litigation-brief-ai-prompt/">Draft a Court-Ready Litigation Brief AI Prompt</a> helps teams produce consistent, reviewable outputs. It’s useful if your delivery process includes formal briefs as milestones and you want progress tracking tied to real document completion.</p>



<p>If you manage matters that begin with intake and escalate into formal filings, <a href="https://flowpast.com/prompts/draft-a-court-ready-civil-complaint-with-this-ai-prompt/">Draft a Court-Ready Civil Complaint with this AI Prompt</a> can complement your tooling decision. In practice, it helps you define what “done” looks like for key work products, which makes your progress reporting far less subjective.</p>


<br>


<p>Quick reference:</p>



<ul class="wp-block-list">

<li><a href="https://flowpast.com/prompts/ai-prompt-to-draft-legal-trend-briefings-with-case-law/">AI Prompt to Draft Legal Trend Briefings With Case Law</a>: Turn updates into decision-ready summaries.</li>


<li><a href="https://flowpast.com/prompts/draft-a-court-ready-litigation-brief-ai-prompt/">Draft a Court-Ready Litigation Brief AI Prompt</a>: Create briefs with consistent structure.</li>


<li><a href="https://flowpast.com/prompts/draft-a-court-ready-civil-complaint-with-this-ai-prompt/">Draft a Court-Ready Civil Complaint with this AI Prompt</a>: Standardize complaint drafting outputs.</li>


<li><a href="https://flowpast.com/prompts/draft-a-court-ready-affidavit-with-this-ai-prompt/">Draft a Court-Ready Affidavit with this AI Prompt</a>: Produce affidavits faster and cleaner.</li>


<li><a href="https://flowpast.com/prompts/ai-prompt-to-build-a-trademark-filing-packet-by-jurisdiction/">AI Prompt to Build a Trademark Filing Packet by Jurisdiction</a>: Assemble jurisdiction-specific filing packets.</li>

</ul>

</div>

<div class="faq-section">

<h2 class="wp-block-heading">Common Questions</h2>


<div class="faq-item">
<span class="question">Which roles benefit most from this PM software reporting AI prompt?</span>

<p class="answer"><strong>PMO Directors</strong> use this to compare tools based on portfolio reporting depth (not just team productivity features) and to justify a shortlist to executives. <strong>Operations Managers</strong> rely on it when weekly progress updates are inconsistent across teams and they need a platform that makes status measurable. <strong>IT/Systems Administrators</strong> benefit because the prompt weighs integrations and usability, which affects rollout complexity and support load. <strong>Agency Delivery Leads</strong> apply it to pick tools that produce client-facing progress views without rebuilding reports every account.</p>

</div>

<div class="faq-item">
<span class="question">Which industries get the most value from this PM software reporting AI prompt?</span>

<p class="answer"><strong>Professional services and agencies</strong> get value because reporting is part of the product; clients want clear progress, risks, and timelines, and the prompt pushes the comparison toward those views. <strong>SaaS product teams</strong> use it to weigh sprint reporting versus roadmap and release progress, especially when leadership needs predictable forecasting. <strong>Construction and field services</strong> benefit when progress tracking must align to milestones, dependencies, and change requests, not just task completion. <strong>Healthcare and regulated teams</strong> use it when auditability and consistent reporting workflows matter, even if the prompt is not a formal compliance review.</p>

</div>

<div class="faq-item">
<span class="question">Why do basic AI prompts for comparing PM platforms produce weak results?</span>

<p class="answer">A typical prompt like “<em>Compare the best project management tools for my team</em>” fails because it: lacks your reporting and progress criteria (dashboards, milestones, forecasting), provides no consistent scoring method like Impact (1–10) and Effort (1–10), ignores adoption realities such as usability and integrations, produces generic feature lists instead of decision-ready tradeoffs, and misses the step where assumptions are flagged when inputs are vague. Frankly, without structure, the “winner” is usually whoever has the loudest marketing narrative. This prompt is built to behave more like an advisor than a search result.</p>

</div>

<div class="faq-item">
<span class="question">Can I customize this PM software reporting prompt for my specific situation?</span>

<p class="answer">Yes. Even though the prompt has no formal variables, you can customize it by adding a few lines of context before running it: team size, budget range, must-have integrations (Slack, Google Workspace, Microsoft 365), and what “reporting” means to you (exec dashboards, client updates, sprint health). You can also specify constraints like “must support external guest access” or “needs Jira integration for dev teams.” A strong follow-up is: “Re-score Impact and Effort assuming a 30-day pilot and list the top 5 pilot test cases for reporting and progress visibility.”</p>

</div>

<div class="faq-item">
<span class="question">What are the most common mistakes when using this PM software reporting prompt?</span>

<p class="answer">The biggest mistake is leaving your reporting needs too vague — instead of “we need better dashboards,” try “we need weekly exec dashboards showing milestone forecast, top risks, and cross-project capacity for 8 teams.” Another common error is not defining progress tracking, where “track progress” becomes ambiguous; “sprint burndown plus release readiness gates” is far clearer than “agile tracking.” People also forget integration requirements (bad: “integrates with our tools,” better: “must integrate with Slack and Google Drive, plus SSO via Okta”). Finally, teams skip pricing constraints, which leads to unrealistic recommendations; give a range like “target $8–$15/user/month with flexibility for external collaborators.”</p>

</div>

<div class="faq-item">
<span class="question">Who should NOT use this PM software reporting prompt?</span>

<p class="answer">This prompt isn’t ideal for teams that already know the exact tool they must buy due to a parent company mandate, since the comparison work won’t change the outcome. It’s also not the right fit if you need a formal procurement, security, or SOC2 review, because the prompt explicitly stops short of that depth. And if you only want a one-paragraph “best tool” answer with no scoring, you’ll find this too structured. In those cases, do a quick requirements workshop first, then come back when you can compare options honestly.</p>

</div>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Which roles benefit most from this PM software reporting AI prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "PMO Directors use this to compare tools based on portfolio reporting depth (not just team productivity features) and to justify a shortlist to executives. Operations Managers rely on it when weekly progress updates are inconsistent across teams and they need a platform that makes status measurable. IT/Systems Administrators benefit because the prompt weighs integrations and usability, which affects rollout complexity and support load. Agency Delivery Leads apply it to pick tools that produce client-facing progress views without rebuilding reports every account."
      }
    },
    {
      "@type": "Question",
      "name": "Which industries get the most value from this PM software reporting AI prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Professional services and agencies get value because reporting is part of the product; clients want clear progress, risks, and timelines, and the prompt pushes the comparison toward those views. SaaS product teams use it to weigh sprint reporting versus roadmap and release progress, especially when leadership needs predictable forecasting. Construction and field services benefit when progress tracking must align to milestones, dependencies, and change requests, not just task completion. Healthcare and regulated teams use it when auditability and consistent reporting workflows matter, even if the prompt is not a formal compliance review."
      }
    },
    {
      "@type": "Question",
      "name": "Why do basic AI prompts for comparing PM platforms produce weak results?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "A typical prompt like “Compare the best project management tools for my team” fails because it: lacks your reporting and progress criteria (dashboards, milestones, forecasting), provides no consistent scoring method like Impact (1–10) and Effort (1–10), ignores adoption realities such as usability and integrations, produces generic feature lists instead of decision-ready tradeoffs, and misses the step where assumptions are flagged when inputs are vague. Frankly, without structure, the “winner” is usually whoever has the loudest marketing narrative. This prompt is built to behave more like an advisor than a search result."
      }
    },
    {
      "@type": "Question",
      "name": "Can I customize this PM software reporting prompt for my specific situation?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Yes. Even though the prompt has no formal variables, you can customize it by adding a few lines of context before running it: team size, budget range, must-have integrations (Slack, Google Workspace, Microsoft 365), and what “reporting” means to you (exec dashboards, client updates, sprint health). You can also specify constraints like “must support external guest access” or “needs Jira integration for dev teams.” A strong follow-up is: “Re-score Impact and Effort assuming a 30-day pilot and list the top 5 pilot test cases for reporting and progress visibility.”"
      }
    },
    {
      "@type": "Question",
      "name": "What are the most common mistakes when using this PM software reporting prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "The biggest mistake is leaving your reporting needs too vague — instead of “we need better dashboards,” try “we need weekly exec dashboards showing milestone forecast, top risks, and cross-project capacity for 8 teams.” Another common error is not defining progress tracking, where “track progress” becomes ambiguous; “sprint burndown plus release readiness gates” is far clearer than “agile tracking.” People also forget integration requirements (bad: “integrates with our tools,” better: “must integrate with Slack and Google Drive, plus SSO via Okta”). Finally, teams skip pricing constraints, which leads to unrealistic recommendations; give a range like “target $8–$15/user/month with flexibility for external collaborators.”"
      }
    },
    {
      "@type": "Question",
      "name": "Who should NOT use this PM software reporting prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "This prompt isn’t ideal for teams that already know the exact tool they must buy due to a parent company mandate, since the comparison work won’t change the outcome. It’s also not the right fit if you need a formal procurement, security, or SOC2 review, because the prompt explicitly stops short of that depth. And if you only want a one-paragraph “best tool” answer with no scoring, you’ll find this too structured. In those cases, do a quick requirements workshop first, then come back when you can compare options honestly."
      }
    }
  ]
}
</script>
</div>

<div class="closing-section">

<p>Reporting should reduce uncertainty, not create more of it. Paste the prompt into ChatGPT, add your real constraints, and use the scored shortlist to make a tool decision you can defend.</p>

</div>]]></content:encoded>
					
		
		
		<media:content url="https://flowpast.s3.eu-north-1.amazonaws.com/featured_blog_images/5001682.webp" medium="image"></media:content>
            	</item>
		<item>
		<title>Documentation-First Library Learning Plan AI Prompt</title>
		<link>https://flowpast.com/prompts/documentation-first-library-learning-plan-ai-prompt/</link>
		
		<dc:creator><![CDATA[Lisa Granqvist]]></dc:creator>
		<pubDate>Fri, 23 Jan 2026 01:32:58 +0000</pubDate>
				<category><![CDATA[Prompts]]></category>
		<guid isPermaLink="false">https://flowpast.com/?p=5001522</guid>

					<description><![CDATA[Stuck learning a new library fast - this AI Prompt maps a docs-first roadmap with mental models, setup, core primitives, and a real feature build. Discover more AI prompts for marketing, sales, and ops.]]></description>
										<content:encoded><![CDATA[<!-- FOCUS_KEYWORD: library learning plan -->
<div class="hook-introduction">

<p>You open the docs, skim the “Getting Started,” and suddenly you’re 12 tabs deep with nothing running. The library might be powerful, but your learning path is scattered. So you either over-study (and stall) or jump straight into code (and hit walls).</p>



<p>This <strong>library learning plan</strong> is built for <strong>engineering leads</strong> who need a new dependency productive in days (not weeks), <strong>consultants</strong> who must ramp up fast across unfamiliar client stacks, and <strong>product-minded builders</strong> who want to ship one real feature while they learn. The output is a docs-first roadmap with a clear mental model, the few high-leverage primitives to focus on, and a guided “build a real use case” plan with clean examples plus optional troubleshooting and optimization.</p>

</div>

<div class="what-and-when-section">

<h2 class="wp-block-heading">What Does This AI Prompt Do and When to Use It?</h2>



<table class="solution-results-table three-column" role="presentation" aria-label="What this prompt does, when to use it, and what you get">
 <thead>
    <tr>
      <th scope="col">What This Prompt Does</th>
      <th scope="col">When to Use This Prompt</th>
      <th scope="col">What You&#8217;ll Get</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <ul class="automation-list">
          <li>It restates your goal and success criteria first, then lists the minimum assumptions it’s making so you can correct them quickly.</li>
          <li>It builds a plain-language mental model of the library (what it is, what it is not, and how it “thinks”) before teaching API details.</li>
          <li>It selects a small, high-leverage set of primitives (concepts, functions, objects) that unlock most real-world use, instead of cataloging everything.</li>
          <li>It designs an adaptive learning track with pacing based on your experience level, urgency, and the library’s scope/complexity.</li>
          <li>It maps the learning to a real feature build with realistic examples, plus optional sections for troubleshooting and optimization when you need them.</li>
       </ul>
      </td>
      <td>
        <ul class="results-list">
          <li>You’ve been told “Just read the docs,” but you can’t tell what matters versus what’s reference noise.</li>
          <li>You need to deliver a feature this sprint using a new library, and you do not have time for a full course.</li>
          <li>You’re switching ecosystems (for example, Python to TypeScript) and the terminology mismatch is slowing you down.</li>
          <li>Your first attempt worked in a toy example, then fell apart in the real codebase with configuration, environment, or integration issues.</li>
          <li>You’re onboarding teammates and want one consistent path that prevents everyone from learning different, conflicting patterns.</li>
        </ul>
      </td>
       <td>
         <ul class="deliverables-list">
           <li>A step-by-step learning roadmap with phases, time estimates, and a recommended pace.</li>
           <li>A mental model explanation plus a “glossary-style” definition of key terms the first time they appear.</li>
           <li>A shortlist of 5–10 core primitives to focus on, with what each one enables and when to reach for it.</li>
           <li>A real-use-case implementation plan with clean example snippets and checkpoints for “working end-to-end.”</li>
           <li>An optional troubleshooting and optimization section that tells you what to inspect, what to measure, and what to try next.</li>
         </ul>
       </td>
    </tr>
  </tbody>
</table>

</div>

<div class="prompt-display-section">

<h2 class="wp-block-heading">The Full AI Prompt: Documentation-First Library Learning Plan</h2>



<div class="prompt-viewer-wrapper" id="prompt-section">
    <div class="prompt-comparison-row prompt-premium">
        <!-- Header with buttons -->
        <div class="prompt-row-header">
            <!-- <span class="prompt-row-icon">✨</span> -->
            <span class="prompt-row-title">
                                    Step 1: Customize the prompt with your input
                            </span>
            <div class="prompt-header-buttons">
                                    <button class="prompt-header-btn prompt-header-reset" onclick="resetPrompt()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
                            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
                        </svg>
                        <span>Reset</span>
                    </button>
                                <button class="prompt-header-btn prompt-header-copy-green flowpast-copy-prompt-btn" onclick="handlePromptCopy()">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                        <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
                    </svg>
                    <span>Customize and Copy Full Prompt</span>
                </button>
            </div>
        </div>

        <!-- Customize the Prompt Section -->
                    <div class="prompt-customize-section">
                <span class="customize-title">Customize the Prompt</span>
                <p class="customize-subtitle">Fill in the fields below to personalize this prompt for your needs.</p>
                <table class="customize-table">
                    <thead>
                        <tr>
                            <th>Variable</th>
                            <th>What to Enter</th>
                            <th>Customise the prompt</th>
                        </tr>
                    </thead>
                    <tbody>
                                                    <tr>
                                <td class="var-name"><code>[LIBRARY_NAME]</code></td>
                                <td class="var-desc">
                                    Enter the name of the programming library you want to learn or use.                                    <div class="var-example">For example: "React, TensorFlow, NumPy"</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[LIBRARY_NAME]"
                                            placeholder="Enter your value here..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[PRIMARY_GOAL]</code></td>
                                <td class="var-desc">
                                    Describe what you want to achieve using the library, including the specific functionality or project you are working on.                                    <div class="var-example">For example: "Build a real-time chat application using WebSocket integration."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[PRIMARY_GOAL]"
                                            placeholder="Enter your value here..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[SKILL_LEVEL]</code></td>
                                <td class="var-desc">
                                    Specify your programming experience level, such as beginner, intermediate, or advanced. Include familiarity with related concepts if relevant.                                    <div class="var-example">For example: "Intermediate: Comfortable with Python and basic data structures, but new to machine learning libraries."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[SKILL_LEVEL]"
                                            placeholder="Enter your value here..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[CONTEXT]</code></td>
                                <td class="var-desc">
                                    Provide the programming language or ecosystem you are working in, such as JavaScript, Python, or .NET, to ensure relevant guidance.                                    <div class="var-example">For example: "Python for data analysis and visualization."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[CONTEXT]"
                                            placeholder="Enter your value here..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[CONTEXT_SIMILAR_EXPERIENCE]</code></td>
                                <td class="var-desc">
                                    List any similar libraries you have used in the past to help tailor the explanation to your existing knowledge.                                    <div class="var-example">For example: "Previously used Pandas and Matplotlib for data manipulation and visualization."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[CONTEXT_SIMILAR_EXPERIENCE]"
                                            placeholder="Enter your value here..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[CONTEXT_ENVIRONMENT]</code></td>
                                <td class="var-desc">
                                    Describe your development environment, including operating system, IDE, package manager, and runtime details.                                    <div class="var-example">For example: "Windows 10, PyCharm IDE, pip package manager, Python 3.10 runtime."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[CONTEXT_ENVIRONMENT]"
                                            placeholder="Enter your value here..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[TIMEFRAME]</code></td>
                                <td class="var-desc">
                                    Indicate how much time you have available to learn and apply the library, such as hours, days, or weeks.                                    <div class="var-example">For example: "2 weeks to prepare for a project deadline."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[TIMEFRAME]"
                                            placeholder="Enter your value here..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[FORMAT]</code></td>
                                <td class="var-desc">
                                    Specify the format in which you&#039;d like the learning material delivered, such as text guides, video tutorials, or interactive examples.                                    <div class="var-example">For example: "Step-by-step text guides with code snippets."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[FORMAT]"
                                            placeholder="Enter your value here..." />
                                                                    </td>
                            </tr>
                                            </tbody>
                </table>

                <button class="copy-customized-btn flowpast-copy-prompt-btn" onclick="handlePromptCopy()">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                        <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
                    </svg>
                    <span class="copy-customized-text">Customise the prompt now</span>
                </button>
            </div>
        
        <!-- Full Prompt Code Header -->
                    <div class="prompt-code-header">
                <span class="prompt-code-title">
                    Step 2: Copy the Prompt
                </span>
                <div class="prompt-code-buttons">
                    <!-- Reset: Only visible when unlocked -->
                    <button class="prompt-header-btn prompt-header-reset btn-when-unlocked" onclick="resetPrompt()" style="display: none;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
                            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
                        </svg>
                        <span>Reset</span>
                    </button>
                    <!-- Copy Full Prompt -->
                    <button class="prompt-header-btn prompt-header-copy flowpast-copy-prompt-btn" onclick="handlePromptCopy()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                            <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
                        </svg>
                        <span>Copy Full Prompt</span>
                    </button>
                </div>
            </div>
        

        <!-- Prompt Content -->
        <div class="prompt-box prompt-gated-wrapper">
            <!-- Gated: Blurred content -->
            <div class="prompt-gated-content">
                <div class="prompt-header-visible">OBJECTIVE</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">PERSONA</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">CONSTRAINTS</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">What This Is NOT</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">PROCESS</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div><div class="locked-line" style="width: 80%;"></div><div class="locked-line" style="width: 95%;"></div><div class="locked-line" style="width: 70%;"></div><div class="locked-line" style="width: 83%;"></div><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">INPUTS</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div><div class="locked-line" style="width: 80%;"></div><div class="locked-line" style="width: 95%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">OUTPUT SPECIFICATION</div><div class="prompt-header-visible subheader">Phase Planning (dynamic)</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div><div class="locked-line" style="width: 80%;"></div><div class="locked-line" style="width: 95%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">Phase 1 — Discovery &amp; Fit</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div><div class="locked-line" style="width: 80%;"></div><div class="locked-line" style="width: 95%;"></div><div class="locked-line" style="width: 70%;"></div><div class="locked-line" style="width: 83%;"></div><div class="locked-line" style="width: 85%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">Phase 2 — Mental Model &amp; Core Ideas</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">Phase 3 — Install &amp; Minimal Verification</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div><div class="locked-line" style="width: 80%;"></div><div class="locked-line" style="width: 95%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">Phase 4 — High-Leverage API Primitives (the 80/20)</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div><div class="locked-line" style="width: 80%;"></div><div class="locked-line" style="width: 95%;"></div><div class="locked-line" style="width: 70%;"></div><div class="locked-line" style="width: 83%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">Phase 5 — Build the User’s Feature</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div><div class="locked-line" style="width: 80%;"></div><div class="locked-line" style="width: 95%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">Phase 6 — Self-Sufficiency &amp; Next Learning Steps</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div><div class="locked-line" style="width: 80%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">Optional Phase — Troubleshooting Clinic</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div><div class="locked-line" style="width: 80%;"></div><div class="locked-line" style="width: 95%;"></div><div class="locked-line" style="width: 70%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">Optional Phase — Advanced Patterns &amp; Optimization</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div><div class="locked-line" style="width: 80%;"></div><div class="locked-line" style="width: 95%;"></div><div class="locked-line" style="width: 70%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">QUALITY CHECKS</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div></div></div><div class="locked-section-icon">🔒</div></div>            </div>
            <!-- Unlocked: Full content (hidden by default) -->
            <div class="prompt-content-full" id="premium-prompt-content" style="display: none;">
                ## OBJECTIVE
Help a user learn and apply any programming library without overload by using a documentation-first teaching flow: clarify purpose, build a mental model, identify the few high-leverage primitives, then implement a real use case with clean examples and optional troubleshooting/optimization.

## PERSONA
You are a **Library Learning Systems Designer**: an ex-software engineer who became obsessive about making APIs understandable after years of fighting unclear docs and later realizing—while coaching a non-technical family member through new tech—that people learn faster when they grasp the intent and model before the mechanics. You explain with plain language, careful scaffolding, and practical examples.

## CONSTRAINTS
- Start with **problem + “why”**, then move to **“how”** only after the mental model is clear.
- Adjust depth and pacing to the user’s skill level, urgency, and the library’s complexity.
- Prioritize the **small set of concepts/functions** that unlock most real-world value.
- Use examples that are realistic but not cluttered with rare edge cases (save those for optional sections).
- Keep terminology consistent; define new terms when first introduced.
- If inputs are missing or vague, ask only the **minimum questions** needed to proceed.

### What This Is NOT
- Not a full replacement for official docs or a complete reference manual.
- Not an exhaustive catalog of every API surface or every edge case.
- Not a guarantee of correctness for undocumented/internal behaviors.
- Not a substitute for running code, tests, or reviewing error logs in the user’s environment.

## PROCESS
1. **Pre-Analysis (mandatory):** Restate your understanding of the user’s goal, constraints, and what success looks like. List any assumptions.
2. **Choose a learning track:** Pick an adaptive phase count and pacing based on:
   - user experience level
   - library scope/complexity
   - urgency/time available
   - immediate deliverable vs long-term comprehension
3. **Run the phases in order**, pausing at the end of each phase with a clear “continue” gate.
4. **Teach via mental models:** Use analogies, diagrams (ASCII is fine), and “common misconception” callouts.
5. **Implement progressively:** Move from minimal setup → core primitives → integrated feature → next steps.
6. **Edge case handling:**  
   - If the library is unusually complex, insert an extra architecture phase and add intermediate examples.  
   - If the user has a deadline, compress phases and bias toward copy-ready solutions.  
   - If the user is advanced, skip basics and emphasize patterns, performance, and failure modes.

## INPUTS
- **Library name:** [LIBRARY_NAME]  
- **User goal / what they want to build:** [PRIMARY_GOAL]  
- **User programming experience level:** [SKILL_LEVEL]  
- **Language / ecosystem:** [CONTEXT]  
- **Similar libraries used before (if any):** [CONTEXT_SIMILAR_EXPERIENCE]  
- **Environment details (OS/IDE/package manager/runtime):** [CONTEXT_ENVIRONMENT]  
- **Time available / deadline:** [TIMEFRAME]  
- **Preferred depth (fast ship vs learn deeply):** [FORMAT]

## OUTPUT SPECIFICATION
### Phase Planning (dynamic)
- Decide on **3–8 phases** (rename phases as needed for the specific library), using these tracks:
  - **Rapid ship:** 3–4 phases
  - **Balanced:** 5–6 phases
  - **Mastery:** 7–8 phases
- Present the plan as:
  - {Phase Count}
  - {Track Name}
  - {Phase List With One-Line Outcomes}

### Phase 1 — Discovery &amp; Fit
**Ask (if not already provided):**
- {Library Confirmation Question}
- {Goal Clarification Question}
- {Skill Level Question}
- {Prior Tools Question}

**Deliver:**
- {Library Purpose Summary}
- {Problem It Solves}
- {Why This Library (vs common alternatives)}
- {Personalized Roadmap}

**Gate:** End with: {Continue Prompt}

### Phase 2 — Mental Model &amp; Core Ideas
**Deliver:**
- {Design Intent In Plain Language}
- {Key Concepts With Analogies}
- {How Pieces Connect Diagram}
- {Beginner Traps / Misconceptions}

**Gate:** {Continue Prompt}

### Phase 3 — Install &amp; Minimal Verification
**Ask (if needed):**
- {Environment Question}

**Deliver:**
- {Setup Steps}
- {Common Setup Failures + Fixes}
- {Minimal Working Example}
- {Suggested Project Layout}

**Gate:** {Continue Prompt}

### Phase 4 — High-Leverage API Primitives (the 80/20)
**Deliver 3–5 items, each with:**
- {Function Or Concept Name}
- {One-Sentence Purpose}
- {Basic Usage}
- {Practical Example}
- {Common Gotcha}
- {When Not To Use It}

Also include:
- {Mini Cheatsheet}

**Gate:** {Continue Prompt}

### Phase 5 — Build the User’s Feature
**Ask (if needed):**
- {Feature Description Question}

**Deliver:**
- {Complete Working Example}
- {Annotated Walkthrough (key lines only)}
- {How To Adapt For Similar Cases}
- {Basic Performance / Safety Notes}

**Gate:** {Continue Prompt}

### Phase 6 — Self-Sufficiency &amp; Next Learning Steps
**Deliver:**
- {Exact Docs Sections To Read Next}
- {Community/Support Channels}
- {Common Patterns &amp; Best Practices}
- {Advanced Topics Worth Parking}
- {Related Libraries (when they’re a better fit)}

**Gate:** {Continue Prompt}

### Optional Phase — Troubleshooting Clinic
Trigger when user reports errors or unexpected behavior.

**Ask:**
- {Error/Behavior Question}
- {Repro Steps Question} (only if needed)

**Deliver:**
- {Likely Cause}
- {Fix Steps}
- {How To Debug Similar Issues}
- {Prevention Tips}

### Optional Phase — Advanced Patterns &amp; Optimization
Trigger when user requests performance, maintainability, or scaling improvements.

**Ask:**
- {Optimization Goal Question}

**Deliver:**
- {Advanced Pattern}
- {Use/ Avoid Guidance}
- {Example Implementation}
- {Tradeoffs &amp; Performance Notes}
- {Code Organization Guidance}

## QUALITY CHECKS
At the end of each phase, verify:
- The user’s stated goal is still being addressed (no scope drift).
- Explanations introduce **why before how**.
- The examples compile conceptually and are not bloated with edge cases.
- The user has clear next actions and a “continue” gate.
- Any missing inputs were requested succinctly, without interrogating the user.            </div>
        </div>


    </div>

    <!-- CTA Row - Full width buttons -->
    <div class="prompt-cta-row">
        <button class="prompt-cta-btn prompt-cta-copy flowpast-copy-prompt-btn" onclick="handlePromptCopy()">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
            </svg>
            <span class="cta-copy-text">Copy Full Prompt</span>
        </button>
    </div>
</div>

<style>
    /* Gated prompt states */
    .prompt-gated-wrapper {
        position: relative;
    }

    /* When unlocked - show full content, hide gated */
    body.flowpast-unlocked .prompt-gated-wrapper .prompt-gated-content {
        display: none;
    }

    body.flowpast-unlocked .prompt-gated-wrapper .prompt-content-full {
        display: block !important;
    }

    /* Show/hide elements based on unlock state */
    body.flowpast-unlocked .btn-when-unlocked {
        display: inline-flex !important;
    }

    .prompt-viewer-wrapper {
        scroll-margin-top: 250px;
    }

    /* ========================================
   PROMPT VIEWER - MAIN WRAPPER
   ======================================== */
    .prompt-viewer-wrapper {
        margin: 30px 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* ========================================
   PROMPT BOX CONTAINER
   ======================================== */
    .prompt-comparison-row {
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid #e0e0e0;
        background: #fff;
    }

    /* ========================================
   HEADER WITH BUTTONS
   ======================================== */
    .prompt-row-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 20px;
        color: #fff !important;
        background: #141414;
        border-bottom: 1px solid #e0e0e0;
        flex-wrap: wrap;
    }

    .prompt-row-icon {
        font-size: 20px;
    }

    .prompt-row-title {
        font-weight: 600;
        font-size: 22px;
        color: #fff !important;
        text-decoration: underline
    }

    .prompt-header-buttons {
        margin-left: auto;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    /* Header buttons */
    .prompt-header-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
        border: none;
    }

    .prompt-header-copy {
        background: #3a3a3a;
        color: #fff;
    }

    .prompt-header-copy:hover {
        background: #2a2a2a;
    }

    .prompt-header-copy.copied {
        background: #2e7d32;
    }

    .prompt-header-copy-green {
        background: #04AA6D !important;
        color: #fff !important;
    }

    .prompt-header-copy-green:hover {
        background: #039860 !important;
    }

    .prompt-header-copy-green.copied {
        background: #2e7d32 !important;
    }

    .prompt-header-access {
        background: rgb(5, 152, 98);
        color: #fff !important;
    }

    .prompt-header-access:hover {
        background: rgb(4, 130, 83);
        transform: translateY(-1px);
    }

    /* ========================================
   PROMPT CONTENT - FULL (NO SCROLL)
   ======================================== */
    .prompt-box {
        background: #ffffff;
    }

    .prompt-content-full {
        padding: 24px;
        margin: 0;
        color: #202124;
        background: #ffffff;
        font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
        font-size: 13px;
        line-height: 1.7;
        white-space: pre-wrap;
        word-wrap: break-word;
        /* No scroll - show full content */
        max-height: none;
        overflow: visible;
    }

    /* Highlighted variable in prompt */
    .prompt-variable {
        background: #fff3cd;
        color: #1967d2;
        font-weight: 700;
        padding: 2px 4px;
        border-radius: 3px;
        border: 1px solid #ffc107;
    }

    .prompt-variable-filled {
        background: #d4edda;
        color: #155724;
        font-weight: 700;
        padding: 2px 4px;
        border-radius: 3px;
        border: 1px solid #28a745;
    }

    /* ========================================
   GATED CONTENT (NO ACCESS)
   ======================================== */
    .prompt-gated-content {
        padding: 24px;
        background: #ffffff;
        font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
        font-size: 13px;
        line-height: 1.8;
        max-height: none;
        overflow: visible;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        cursor: default;
    }

    /* ## headers - larger, black */
    .prompt-header-visible {
        color: #202124;
        font-weight: 600;
        margin: 5px 0 0px 0;
        font-size: 20px;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    /* ### headers - smaller, black */
    .prompt-header-visible.subheader {
        color: #202124;
        font-weight: 600;
        margin: 5px 0;
        font-size: 18px;
    }

    .prompt-header-visible:first-child {
        margin-top: 0;
    }

    /* ========================================
   LOCKED SECTION BLOCK
   ======================================== */
    .locked-section {
        position: relative;
        margin: 4px 0 8px 0;
        border-radius: 6px;
        overflow: hidden;
        background: linear-gradient(110deg, #e2e8f0 8%, #f1f5f9 18%, #e2e8f0 33%);
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    .locked-section-bg {
        position: relative;
    }

    .locked-section-lines {
        padding: 8px 12px;
        position: relative;
    }

    .locked-line {
        height: 6px;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 3px;
        margin-bottom: 4px;
        margin-left: 12px;
    }

    .locked-line:last-child {
        margin-bottom: 0;
    }

    .locked-section-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        font-size: 24px;
        filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
    }

    /* Subheader locked sections - slightly indented */
    /*  .prompt-header-visible.subheader+.locked-section {
        margin-left: 16px;
    } */

    /* ========================================
   COMPATIBILITY BADGES
   ======================================== */
    .prompt-compatibility {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 12px 20px;
        background: #f8f9fa;
        border-top: 1px solid #e0e0e0;
    }

    .compat-label {
        font-size: 13px;
        color: #5f6368;
        font-weight: 500;
    }

    .compat-badge {
        padding: 4px 10px;
        background: #e8f0fe;
        color: #1967d2;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
    }

    /* ========================================
   CTA ROW - FULL WIDTH BUTTONS
   ======================================== */
    .prompt-cta-row {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }

    .prompt-cta-btn {
        flex: 1;
        min-width: 200px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 16px 24px;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
        border: none;
    }

    .prompt-cta-copy {
        background: #3a3a3a;
        color: #fff;
    }

    .prompt-cta-copy:hover {
        background: #2a2a2a;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .prompt-cta-copy.copied {
        background: #2e7d32;
    }

    .prompt-cta-reset {
        background: #3a3a3a;
        color: #fff;
    }

    .prompt-cta-reset:hover {
        background: #2a2a2a;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .prompt-cta-access {
        background: rgb(5, 152, 98);
        color: #fff !important;
    }

    .prompt-cta-access:hover {
        background: rgb(4, 130, 83);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(5, 152, 98, 0.3);
    }

    /* ========================================
    CUSTOMIZE YOUR PROMPT SECTION
    ======================================== */
    .prompt-customize-section {
        padding: 24px;
        border-bottom: 1px solid #e0e0e0;
        background: #fafbfc;
    }

    .customize-title {
        margin: 0 0 8px 0;
        font-size: 18px;
        font-weight: 700;
        color: #202124;
    }

    .customize-subtitle {
        margin: 0 0 20px 0;
        font-size: 14px;
        color: #5f6368;
    }

    .customize-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
    }

    .customize-table th {
        text-align: left;
        padding: 12px;
        background: #f1f3f4;
        border: 1px solid #e0e0e0;
        font-size: 13px;
        font-weight: 600;
        color: #202124;
    }

    .customize-table td {
        padding: 12px;
        border: 1px solid #e0e0e0;
        vertical-align: top;
    }

    .customize-table .var-name {
        width: 25%;
        background: #f8f9fa;
    }

    .customize-table .var-name code {
        background: #fff3cd;
        color: #1967d2;
        border: 1px solid #ffc107;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        word-break: break-all;
        font-weight: 600;
    }

    .customize-table .var-desc {
        width: 35%;
        font-size: 13px;
        color: #5f6368;
        line-height: 1.5;
    }

    .customize-table .var-example {
        margin-top: 8px;
        padding: 8px 10px;
        background: #f8f9fa;
        border-left: 3px solid #dadce0;
        font-size: 12px;
        color: #5f6368;
        font-style: italic;
        border-radius: 0 4px 4px 0;
    }

    .customize-table .var-input {
        width: 40%;
    }

    .customize-input {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #dadce0;
        border-radius: 6px;
        font-size: 13px;
        font-family: inherit;
        resize: vertical;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .customize-input:focus {
        outline: none;
        border-color: rgb(5, 152, 98);
        box-shadow: 0 0 0 3px rgba(5, 152, 98, 0.1);
    }

    .customize-input::placeholder {
        color: #9aa0a6;
        font-style: italic;
    }

    .copy-customized-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 16px 24px;
        background: rgb(5, 152, 98);
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .copy-customized-btn:hover {
        background: rgb(4, 130, 83);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(5, 152, 98, 0.3);
    }

    .copy-customized-btn.copied {
        background: #2e7d32;
    }

    /* ========================================
    FULL PROMPT CODE HEADER
    ======================================== */
    .prompt-code-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px;
        color: #fff !important;
        background: #141414;
        border-bottom: 1px solid #e0e0e0;
    }

    .prompt-code-title {
        font-size: 22px;
        font-weight: 600;
        text-decoration: underline;

    }

    .prompt-code-buttons {
        display: flex;
        gap: 8px;
    }

    .prompt-code-buttons .prompt-header-btn {
        padding: 8px 14px;
        font-size: 13px;
        background: #ffffff;
        color: #202124;
        border: 1px solid #dadce0;
    }

    .prompt-code-buttons .prompt-header-access {
        background: rgb(5, 152, 98);
        color: #fff !important;
        border-color: rgb(5, 152, 98);
    }

    .prompt-code-buttons .prompt-header-btn.prompt-header-access:hover {
        background: rgb(4, 130, 83) !important;
        border-color: rgb(4, 130, 83);
        color: #fff !important;
    }

    .prompt-code-buttons .prompt-header-btn:hover {
        background: #f1f3f4;
    }

    .prompt-code-buttons .prompt-header-copy.copied {
        background: #d4edda;
        color: #155724;
        border-color: #28a745;
    }

    .prompt-header-reset {
        background: #ffffff;
        color: #202124;
    }

    /* ========================================
   RESPONSIVE
   ======================================== */
    @media (max-width: 768px) {
        .prompt-row-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
        }

        .prompt-header-buttons {
            margin-left: 0;
            width: 100%;
        }

        .prompt-header-btn {
            flex: 1;
            justify-content: center;
        }

        .prompt-cta-row {
            flex-direction: column;
        }

        .prompt-cta-btn {
            width: 100%;
        }

        /* Customize table responsive */
        .customize-table,
        .customize-table thead,
        .customize-table tbody,
        .customize-table tr,
        .customize-table th,
        .customize-table td {
            display: block;
        }

        .customize-table thead {
            display: none;
        }

        .customize-table tr {
            margin-bottom: 16px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            overflow: hidden;
        }

        .customize-table td {
            width: 100% !important;
            border: none;
            border-bottom: 1px solid #e0e0e0;
        }

        .customize-table td:last-child {
            border-bottom: none;
        }

        .customize-table .var-name {
            background: #f1f3f4;
            font-weight: 600;
        }

        .prompt-code-header {
            flex-direction: column;
            gap: 12px;
            align-items: flex-start;
        }

        .prompt-code-buttons {
            width: 100%;
        }

        .prompt-code-buttons .prompt-header-btn {
            flex: 1;
            justify-content: center;
        }
    }
</style>

<script>
    function handlePromptCopy() {
        // Check if unlocked via cookie
        if (typeof window.flowpastIsUnlocked === 'function' && !window.flowpastIsUnlocked()) {
            // Show email popup
            if (typeof window.flowpastShowEmailPopup === 'function') {
                window.flowpastShowEmailPopup('prompt');
            }
            return;
        }

        // Copy the customized prompt (with filled variables)
        const customizedPrompt = getCustomizedPrompt();
        const copyButtons = document.querySelectorAll('.prompt-header-copy, .prompt-header-copy-green, .prompt-cta-copy, .copy-customized-btn');

        navigator.clipboard.writeText(customizedPrompt).then(() => {
            copyButtons.forEach(btn => {
                btn.classList.add('copied');
                const textSpan = btn.querySelector('span');
                if (textSpan) textSpan.textContent = 'Copied!';
            });

            setTimeout(() => {
                copyButtons.forEach(btn => {
                    btn.classList.remove('copied');
                    const textSpan = btn.querySelector('span');
                    if (textSpan) textSpan.textContent = 'Copy Full Prompt';
                });
            }, 2000);
        }).catch(err => {
            console.error('Failed to copy:', err);
        });
    }

    // Store original prompt for customization
    const originalPrompt = "## OBJECTIVE\r\nHelp a user learn and apply any programming library without overload by using a documentation-first teaching flow: clarify purpose, build a mental model, identify the few high-leverage primitives, then implement a real use case with clean examples and optional troubleshooting\/optimization.\r\n\r\n## PERSONA\r\nYou are a **Library Learning Systems Designer**: an ex-software engineer who became obsessive about making APIs understandable after years of fighting unclear docs and later realizing\u2014while coaching a non-technical family member through new tech\u2014that people learn faster when they grasp the intent and model before the mechanics. You explain with plain language, careful scaffolding, and practical examples.\r\n\r\n## CONSTRAINTS\r\n- Start with **problem + \u201cwhy\u201d**, then move to **\u201chow\u201d** only after the mental model is clear.\r\n- Adjust depth and pacing to the user\u2019s skill level, urgency, and the library\u2019s complexity.\r\n- Prioritize the **small set of concepts\/functions** that unlock most real-world value.\r\n- Use examples that are realistic but not cluttered with rare edge cases (save those for optional sections).\r\n- Keep terminology consistent; define new terms when first introduced.\r\n- If inputs are missing or vague, ask only the **minimum questions** needed to proceed.\r\n\r\n### What This Is NOT\r\n- Not a full replacement for official docs or a complete reference manual.\r\n- Not an exhaustive catalog of every API surface or every edge case.\r\n- Not a guarantee of correctness for undocumented\/internal behaviors.\r\n- Not a substitute for running code, tests, or reviewing error logs in the user\u2019s environment.\r\n\r\n## PROCESS\r\n1. **Pre-Analysis (mandatory):** Restate your understanding of the user\u2019s goal, constraints, and what success looks like. List any assumptions.\r\n2. **Choose a learning track:** Pick an adaptive phase count and pacing based on:\r\n   - user experience level\r\n   - library scope\/complexity\r\n   - urgency\/time available\r\n   - immediate deliverable vs long-term comprehension\r\n3. **Run the phases in order**, pausing at the end of each phase with a clear \u201ccontinue\u201d gate.\r\n4. **Teach via mental models:** Use analogies, diagrams (ASCII is fine), and \u201ccommon misconception\u201d callouts.\r\n5. **Implement progressively:** Move from minimal setup \u2192 core primitives \u2192 integrated feature \u2192 next steps.\r\n6. **Edge case handling:**  \r\n   - If the library is unusually complex, insert an extra architecture phase and add intermediate examples.  \r\n   - If the user has a deadline, compress phases and bias toward copy-ready solutions.  \r\n   - If the user is advanced, skip basics and emphasize patterns, performance, and failure modes.\r\n\r\n## INPUTS\r\n- **Library name:** [LIBRARY_NAME]  \r\n- **User goal \/ what they want to build:** [PRIMARY_GOAL]  \r\n- **User programming experience level:** [SKILL_LEVEL]  \r\n- **Language \/ ecosystem:** [CONTEXT]  \r\n- **Similar libraries used before (if any):** [CONTEXT_SIMILAR_EXPERIENCE]  \r\n- **Environment details (OS\/IDE\/package manager\/runtime):** [CONTEXT_ENVIRONMENT]  \r\n- **Time available \/ deadline:** [TIMEFRAME]  \r\n- **Preferred depth (fast ship vs learn deeply):** [FORMAT]\r\n\r\n## OUTPUT SPECIFICATION\r\n### Phase Planning (dynamic)\r\n- Decide on **3\u20138 phases** (rename phases as needed for the specific library), using these tracks:\r\n  - **Rapid ship:** 3\u20134 phases\r\n  - **Balanced:** 5\u20136 phases\r\n  - **Mastery:** 7\u20138 phases\r\n- Present the plan as:\r\n  - {Phase Count}\r\n  - {Track Name}\r\n  - {Phase List With One-Line Outcomes}\r\n\r\n### Phase 1 \u2014 Discovery & Fit\r\n**Ask (if not already provided):**\r\n- {Library Confirmation Question}\r\n- {Goal Clarification Question}\r\n- {Skill Level Question}\r\n- {Prior Tools Question}\r\n\r\n**Deliver:**\r\n- {Library Purpose Summary}\r\n- {Problem It Solves}\r\n- {Why This Library (vs common alternatives)}\r\n- {Personalized Roadmap}\r\n\r\n**Gate:** End with: {Continue Prompt}\r\n\r\n### Phase 2 \u2014 Mental Model & Core Ideas\r\n**Deliver:**\r\n- {Design Intent In Plain Language}\r\n- {Key Concepts With Analogies}\r\n- {How Pieces Connect Diagram}\r\n- {Beginner Traps \/ Misconceptions}\r\n\r\n**Gate:** {Continue Prompt}\r\n\r\n### Phase 3 \u2014 Install & Minimal Verification\r\n**Ask (if needed):**\r\n- {Environment Question}\r\n\r\n**Deliver:**\r\n- {Setup Steps}\r\n- {Common Setup Failures + Fixes}\r\n- {Minimal Working Example}\r\n- {Suggested Project Layout}\r\n\r\n**Gate:** {Continue Prompt}\r\n\r\n### Phase 4 \u2014 High-Leverage API Primitives (the 80\/20)\r\n**Deliver 3\u20135 items, each with:**\r\n- {Function Or Concept Name}\r\n- {One-Sentence Purpose}\r\n- {Basic Usage}\r\n- {Practical Example}\r\n- {Common Gotcha}\r\n- {When Not To Use It}\r\n\r\nAlso include:\r\n- {Mini Cheatsheet}\r\n\r\n**Gate:** {Continue Prompt}\r\n\r\n### Phase 5 \u2014 Build the User\u2019s Feature\r\n**Ask (if needed):**\r\n- {Feature Description Question}\r\n\r\n**Deliver:**\r\n- {Complete Working Example}\r\n- {Annotated Walkthrough (key lines only)}\r\n- {How To Adapt For Similar Cases}\r\n- {Basic Performance \/ Safety Notes}\r\n\r\n**Gate:** {Continue Prompt}\r\n\r\n### Phase 6 \u2014 Self-Sufficiency & Next Learning Steps\r\n**Deliver:**\r\n- {Exact Docs Sections To Read Next}\r\n- {Community\/Support Channels}\r\n- {Common Patterns & Best Practices}\r\n- {Advanced Topics Worth Parking}\r\n- {Related Libraries (when they\u2019re a better fit)}\r\n\r\n**Gate:** {Continue Prompt}\r\n\r\n### Optional Phase \u2014 Troubleshooting Clinic\r\nTrigger when user reports errors or unexpected behavior.\r\n\r\n**Ask:**\r\n- {Error\/Behavior Question}\r\n- {Repro Steps Question} (only if needed)\r\n\r\n**Deliver:**\r\n- {Likely Cause}\r\n- {Fix Steps}\r\n- {How To Debug Similar Issues}\r\n- {Prevention Tips}\r\n\r\n### Optional Phase \u2014 Advanced Patterns & Optimization\r\nTrigger when user requests performance, maintainability, or scaling improvements.\r\n\r\n**Ask:**\r\n- {Optimization Goal Question}\r\n\r\n**Deliver:**\r\n- {Advanced Pattern}\r\n- {Use\/ Avoid Guidance}\r\n- {Example Implementation}\r\n- {Tradeoffs & Performance Notes}\r\n- {Code Organization Guidance}\r\n\r\n## QUALITY CHECKS\r\nAt the end of each phase, verify:\r\n- The user\u2019s stated goal is still being addressed (no scope drift).\r\n- Explanations introduce **why before how**.\r\n- The examples compile conceptually and are not bloated with edge cases.\r\n- The user has clear next actions and a \u201ccontinue\u201d gate.\r\n- Any missing inputs were requested succinctly, without interrogating the user.";
    const variables = ["[LIBRARY_NAME]","[PRIMARY_GOAL]","[SKILL_LEVEL]","[CONTEXT]","[CONTEXT_SIMILAR_EXPERIENCE]","[CONTEXT_ENVIRONMENT]","[TIMEFRAME]","[FORMAT]"];
    // Initial render with highlighted variables
    document.addEventListener('DOMContentLoaded', function() {
        renderPromptWithHighlights();
    });

    // Live update prompt as user types
    document.querySelectorAll('.customize-input').forEach(input => {
        input.addEventListener('input', renderPromptWithHighlights);
    });

    function renderPromptWithHighlights() {
        const promptContent = document.getElementById('premium-prompt-content');
        if (!promptContent) return;

        let updatedPrompt = originalPrompt;
        let filledVariables = {};

        // Collect filled values
        document.querySelectorAll('.customize-input').forEach(input => {
            const placeholder = input.dataset.placeholder;
            const value = input.value.trim();

            if (value) {
                filledVariables[placeholder] = value;
            }
        });

        // Replace filled variables and highlight remaining
        let htmlContent = escapeHtml(updatedPrompt);

        variables.forEach(placeholder => {
            const escapedPlaceholder = escapeHtml(placeholder);
            const regex = new RegExp(escapeRegex(escapedPlaceholder), 'g');

            if (filledVariables[placeholder]) {
                // Show filled value with green highlight
                htmlContent = htmlContent.replace(regex,
                    '<span class="prompt-variable-filled">' + escapeHtml(filledVariables[placeholder]) + '</span>'
                );
            } else {
                // Show original placeholder with yellow highlight
                htmlContent = htmlContent.replace(regex,
                    '<span class="prompt-variable">' + escapedPlaceholder + '</span>'
                );
            }
        });

        promptContent.innerHTML = htmlContent;
    }

    function escapeRegex(string) {
        return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    }

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    function resetPrompt() {
        // Clear all input fields
        document.querySelectorAll('.customize-input').forEach(input => {
            input.value = '';
        });

        // Re-render with original placeholders highlighted
        renderPromptWithHighlights();

        // Visual feedback
        const resetBtns = document.querySelectorAll('.prompt-header-reset, .prompt-cta-reset');
        resetBtns.forEach(btn => {
            const originalText = btn.querySelector('span').textContent;
            btn.querySelector('span').textContent = 'Reset!';
            setTimeout(() => {
                btn.querySelector('span').textContent = originalText;
            }, 1000);
        });
    }


    function getCustomizedPrompt() {
        let updatedPrompt = originalPrompt;

        document.querySelectorAll('.customize-input').forEach(input => {
            const placeholder = input.dataset.placeholder;
            const value = input.value.trim();

            if (value) {
                const regex = new RegExp(escapeRegex(placeholder), 'g');
                updatedPrompt = updatedPrompt.replace(regex, value);
            }
        });

        return updatedPrompt;
    }
</script>

</div>

<div class="pro-tips-section">

<h2 class="wp-block-heading">Pro Tips for Better AI Prompt Results</h2>



<ul class="wp-block-list">

<li><strong>Bring one concrete “ship target.”</strong> Instead of “learn Library X,” specify the feature you must deliver, like “ingest webhooks, validate signatures, and store events.” If you’re not sure, tell the AI: “Propose 3 realistic features for a first build in this library, then pick the best one for fast learning.”</li>


<li><strong>State your constraints plainly.</strong> Mention your timeline, environment, and non-negotiables (company stack, CI rules, deployment target). A useful follow-up prompt is: “My constraints are: Node 20, TypeScript strict mode, no new runtime dependencies. Update the plan and examples to match.”</li>


<li><strong>Force the “primitives first” filter.</strong> Ask the model to justify why each primitive makes the cut, so you don’t study trivia. Try: “Limit primitives to 7 max, and for each, include: what it does, the common pitfall, and one tiny example.”</li>


<li><strong>Iterate by tightening the track, not expanding it.</strong> After the first output, ask: “Cut this plan by 30% while keeping the same end feature. What do we drop, and what do we keep?” Then run the shortened plan and only re-add depth where you get stuck.</li>


<li><strong>Use the optional troubleshooting section strategically.</strong> Don’t read it upfront. When you hit an error, paste the message and context and ask: “Given this error and my setup, which part of the library’s mental model am I violating, and what are the top 3 fixes to try in order?” Honestly, this keeps you learning instead of flailing.</li>

</ul>

</div>

<div class="related-prompts-section">

<h2 class="wp-block-heading">Related Prompts</h2>



<p>Once you’ve got a clear docs-first learning path, these prompts help you turn what you learned into crisp stakeholder updates and market-facing narratives:</p>



<p>If you also need to explain “what we’re seeing and why it matters” to non-technical decision-makers, <a href="https://flowpast.com/prompts/write-an-investor-briefing-with-this-ai-prompt/">Write an Investor Briefing with this AI Prompt</a> is a strong companion. It’s useful right after you prototype with a new library and want to summarize outcomes, risks, and next steps in a way that reads like an executive memo.</p>



<p>For teams doing research-heavy planning (new markets, new product lines, or a technical pivot), <a href="https://flowpast.com/prompts/build-an-investor-ready-sector-brief-with-this-ai-prompt/">Build an Investor-Ready Sector Brief with this AI Prompt</a> helps you frame the broader environment. Use it when your library choice is part of a bigger bet and you need supporting context for why now and why this direction.</p>



<p>When sentiment and narrative risk matter (fundraising, major launches, or public roadmap shifts), <a href="https://flowpast.com/prompts/build-an-investor-sentiment-brief-with-this-ai-prompt/">Build an Investor Sentiment Brief with this AI Prompt</a> is a practical add-on. Pair it with your learning plan so your technical execution and external messaging stay aligned.</p>


<br>


<p>Quick reference:</p>



<ul class="wp-block-list">

<li><a href="https://flowpast.com/prompts/write-an-investor-briefing-with-this-ai-prompt/">Write an Investor Briefing with this AI Prompt</a>: Executive-ready summary of outcomes and risks.</li>


<li><a href="https://flowpast.com/prompts/build-an-investor-ready-sector-brief-with-this-ai-prompt/">Build an Investor-Ready Sector Brief with this AI Prompt</a>: Sector context to justify strategic bets.</li>


<li><a href="https://flowpast.com/prompts/build-an-investor-sentiment-brief-with-this-ai-prompt/">Build an Investor Sentiment Brief with this AI Prompt</a>: Market narrative and sentiment signals.</li>


<li><a href="https://flowpast.com/prompts/create-news-driven-market-outlooks-with-this-ai-prompt/">Create News-Driven Market Outlooks with this AI Prompt</a>: News synthesis into forward-looking implications.</li>


<li><a href="https://flowpast.com/prompts/analyst-sentiment-brief-ai-prompt/">Analyst Sentiment Brief AI Prompt</a>: Analyst-angle readouts for positioning and timing.</li>

</ul>

</div>

<div class="faq-section">

<h2 class="wp-block-heading">Common Questions</h2>


<div class="faq-item">
<span class="question">Which roles benefit most from this library learning plan AI prompt?</span>

<p class="answer"><strong>Engineering Managers</strong> use this to get a team onto one shared mental model and avoid four different implementation styles in the same codebase. <strong>Senior Developers</strong> lean on it to identify the 5–10 primitives that matter so they can contribute quickly without rereading the docs all week. <strong>Solutions Architects</strong> apply it when evaluating a library for fit, because the prompt forces “what success looks like” and surfaces assumptions early. <strong>Technical Consultants</strong> use it to ramp up on a client’s chosen stack while still delivering a real feature, not a demo.</p>

</div>

<div class="faq-item">
<span class="question">Which industries get the most value from this library learning plan AI prompt?</span>

<p class="answer"><strong>SaaS companies</strong> get value when adopting SDKs (payments, auth, analytics) and need a fast path from docs to a production-grade integration. The prompt’s emphasis on primitives and a real feature build keeps the work grounded in shipping. <strong>E-commerce brands</strong> use it when implementing libraries for storefront performance, personalization, or order webhooks, where “it worked locally” isn’t enough. <strong>Fintech teams</strong> benefit because the plan encourages consistent terminology, careful assumptions, and optional troubleshooting, which fits regulated, risk-sensitive environments. <strong>Agencies and studios</strong> use it to standardize how developers ramp up across many client codebases without reinventing a learning approach every project.</p>

</div>

<div class="faq-item">
<span class="question">Why do basic AI prompts for learning a programming library produce weak results?</span>

<p class="answer">A typical prompt like “<em>Teach me React Query</em>” fails because it: lacks your goal and success criteria, so the output becomes a generic tutorial. It provides no mental model, which means you memorize APIs without understanding what problems the library is designed to solve. It ignores pacing and urgency, so you might get a long curriculum when you only need to ship one feature by Friday. It doesn’t prioritize high-leverage primitives, so you waste time on edge APIs. And it skips a realistic use-case build plan, leaving you with examples that don’t transfer to your actual codebase.</p>

</div>

<div class="faq-item">
<span class="question">Can I customize this library learning plan prompt for my specific situation?</span>

<p class="answer">Yes, even though the prompt has no form fields, you customize it through the first message you give the model. Include your skill level, your time budget, the library name and version (if you know it), your environment (language, framework, runtime), and the one real feature you want to implement. If details are missing, the prompt is designed to ask only the minimum questions needed, so you won’t get interrogated. A good follow-up is: “Revise the plan for a 2-hour crash track, and make the real use case ‘build X end-to-end’ with checkpoints and common failure points.”</p>

</div>

<div class="faq-item">
<span class="question">What are the most common mistakes when using this library learning plan prompt?</span>

<p class="answer">The biggest mistake is giving a vague goal—“learn the library”—instead of a shippable target like “implement OAuth login and refresh tokens in our Next.js app.” Another common error is hiding constraints; “any setup is fine” leads to generic examples, while “Python 3.12, Poetry, Linux CI” produces steps you can actually run. People also skip context about urgency and depth, so the AI may over-teach; “I have 90 minutes today and need a working prototype” sets the right pacing. Finally, users often omit the library’s intended use, and that blurs the mental model; “We’re using it for background job scheduling, not data pipelines” keeps the plan focused.</p>

</div>

<div class="faq-item">
<span class="question">Who should NOT use this library learning plan prompt?</span>

<p class="answer">This prompt isn’t ideal for situations where you need an exhaustive reference manual or full API coverage, because it intentionally prioritizes a small set of primitives. It’s also not a fit if you can’t run code at all (no environment access, no ability to test), since the “real use case” phase expects you to execute and verify. And if your library relies on undocumented behavior, you will still need official docs, source code, and real logs. In those cases, use the prompt only to structure your questions and narrow where to look, not as the final authority.</p>

</div>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Which roles benefit most from this library learning plan AI prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Engineering Managers use this to get a team onto one shared mental model and avoid four different implementation styles in the same codebase. Senior Developers lean on it to identify the 5–10 primitives that matter so they can contribute quickly without rereading the docs all week. Solutions Architects apply it when evaluating a library for fit, because the prompt forces “what success looks like” and surfaces assumptions early. Technical Consultants use it to ramp up on a client’s chosen stack while still delivering a real feature, not a demo."
      }
    },
    {
      "@type": "Question",
      "name": "Which industries get the most value from this library learning plan AI prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "SaaS companies get value when adopting SDKs (payments, auth, analytics) and need a fast path from docs to a production-grade integration. The prompt’s emphasis on primitives and a real feature build keeps the work grounded in shipping. E-commerce brands use it when implementing libraries for storefront performance, personalization, or order webhooks, where “it worked locally” isn’t enough. Fintech teams benefit because the plan encourages consistent terminology, careful assumptions, and optional troubleshooting, which fits regulated, risk-sensitive environments. Agencies and studios use it to standardize how developers ramp up across many client codebases without reinventing a learning approach every project."
      }
    },
    {
      "@type": "Question",
      "name": "Why do basic AI prompts for learning a programming library produce weak results?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "A typical prompt like “Teach me React Query” fails because it: lacks your goal and success criteria, so the output becomes a generic tutorial. It provides no mental model, which means you memorize APIs without understanding what problems the library is designed to solve. It ignores pacing and urgency, so you might get a long curriculum when you only need to ship one feature by Friday. It doesn’t prioritize high-leverage primitives, so you waste time on edge APIs. And it skips a realistic use-case build plan, leaving you with examples that don’t transfer to your actual codebase."
      }
    },
    {
      "@type": "Question",
      "name": "Can I customize this library learning plan prompt for my specific situation?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Yes, even though the prompt has no form fields, you customize it through the first message you give the model. Include your skill level, your time budget, the library name and version (if you know it), your environment (language, framework, runtime), and the one real feature you want to implement. If details are missing, the prompt is designed to ask only the minimum questions needed, so you won’t get interrogated. A good follow-up is: “Revise the plan for a 2-hour crash track, and make the real use case ‘build X end-to-end’ with checkpoints and common failure points.”"
      }
    },
    {
      "@type": "Question",
      "name": "What are the most common mistakes when using this library learning plan prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "The biggest mistake is giving a vague goal—“learn the library”—instead of a shippable target like “implement OAuth login and refresh tokens in our Next.js app.” Another common error is hiding constraints; “any setup is fine” leads to generic examples, while “Python 3.12, Poetry, Linux CI” produces steps you can actually run. People also skip context about urgency and depth, so the AI may over-teach; “I have 90 minutes today and need a working prototype” sets the right pacing. Finally, users often omit the library’s intended use, and that blurs the mental model; “We’re using it for background job scheduling, not data pipelines” keeps the plan focused."
      }
    },
    {
      "@type": "Question",
      "name": "Who should NOT use this library learning plan prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "This prompt isn’t ideal for situations where you need an exhaustive reference manual or full API coverage, because it intentionally prioritizes a small set of primitives. It’s also not a fit if you can’t run code at all (no environment access, no ability to test), since the “real use case” phase expects you to execute and verify. And if your library relies on undocumented behavior, you will still need official docs, source code, and real logs. In those cases, use the prompt only to structure your questions and narrow where to look, not as the final authority."
      }
    }
  ]
}
</script>
</div>

<div class="closing-section">

<p>Learning a library doesn’t have to mean wandering through docs and hoping it clicks. Paste the prompt into your AI tool, give it your real feature target, and use the plan to get to “working in production” with far less thrash.</p>

</div>]]></content:encoded>
					
		
		
		<media:content url="https://flowpast.s3.eu-north-1.amazonaws.com/featured_blog_images/5001522.webp" medium="image"></media:content>
            	</item>
		<item>
		<title>Convert n8n Screenshots to Workflow JSON AI Prompt</title>
		<link>https://flowpast.com/prompts/convert-n8n-screenshots-to-workflow-json-ai-prompt/</link>
		
		<dc:creator><![CDATA[Lisa Granqvist]]></dc:creator>
		<pubDate>Fri, 23 Jan 2026 01:31:57 +0000</pubDate>
				<category><![CDATA[Prompts]]></category>
		<guid isPermaLink="false">https://flowpast.com/?p=5001679</guid>

					<description><![CDATA[n8n imports failing from manual edits - the ultimate AI Prompt that rebuilds import-ready workflow JSON from screenshots with wiring and layout. Discover more AI prompts for marketing, sales, and ops.]]></description>
										<content:encoded><![CDATA[<!-- FOCUS_KEYWORD: n8n screenshot JSON -->
<div class="hook-introduction">

<p>Your n8n workflow “looks right” on the canvas, then the import fails. Or worse, it imports but the wiring is subtly wrong, so the automation silently breaks downstream. Manual JSON edits are a trap because one missing field or connection shape can turn into hours of guessing.</p>



<p>This <strong>n8n screenshot JSON</strong> prompt is built for <strong>ops leads</strong> trying to recreate a lost workflow from a screenshot archive, <strong>automation consultants</strong> migrating client automations without access to the original instance, and <strong>growth marketers</strong> who inherited half-documented n8n “spaghetti” and just need a clean, import-ready baseline. The output is a valid n8n workflow JSON that mirrors the on-canvas layout (node coordinates), node wiring (connections), and visible settings, with carefully labeled assumptions and safe defaults.</p>

</div>

<div class="what-and-when-section">

<h2 class="wp-block-heading">What Does This AI Prompt Do and When to Use It?</h2>



<table class="solution-results-table three-column" role="presentation" aria-label="What this prompt does, when to use it, and what you get">
 <thead>
    <tr>
      <th scope="col">What This Prompt Does</th>
      <th scope="col">When to Use This Prompt</th>
      <th scope="col">What You&#8217;ll Get</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <ul class="automation-list">
          <li>It reconstructs a complete n8n workflow JSON from one or more screenshots by extracting nodes, connections, and visible configuration panels.</li>
          <li>It mirrors the canvas layout by setting node positions so spacing and branch geometry match what’s shown, not a random reflow.</li>
          <li>It rebuilds connection wiring explicitly (including branches) and follows n8n schema conventions for nodes, connections, settings, and metadata.</li>
          <li>It fills unavoidable gaps with minimally invasive assumptions and “defensive reliability” defaults that reduce import/runtime failures.</li>
          <li>It asks only 1–4 clarifying questions, limited to details that materially change behavior (like credentials, hidden node settings, or ambiguous triggers).</li>
       </ul>
      </td>
      <td>
        <ul class="results-list">
          <li>You have screenshots of a workflow but no export, and you need something you can import today.</li>
          <li>An n8n import keeps failing after manual edits, and you want a clean, schema-correct rebuild instead of more trial and error.</li>
          <li>You’re migrating workflows across environments and the original instance is locked down, gone, or owned by another team.</li>
          <li>A workflow “works” but behaves oddly because the wiring is wrong; you need to verify the exact branching and node order from the canvas.</li>
          <li>You’re documenting or auditing automations and need a faithful JSON baseline before any refactor or optimization work begins.</li>
        </ul>
      </td>
       <td>
         <ul class="deliverables-list">
           <li>One import-ready n8n workflow JSON file that passes structural validation (nodes + connections + settings included).</li>
           <li>A layout-faithful canvas reconstruction with coordinates set to preserve relative placement and branch geometry.</li>
           <li>A short “assumptions and gaps” list that flags inferred settings so you can verify them quickly.</li>
           <li>Up to 4 targeted clarifying questions, only where the screenshot evidence cannot decide behavior or credential requirements.</li>
           <li>Defensive defaults (guards/error-path handling where appropriate) to reduce runtime breakage caused by missing hidden settings.</li>
         </ul>
       </td>
    </tr>
  </tbody>
</table>

</div>

<div class="prompt-display-section">

<h2 class="wp-block-heading">The Full AI Prompt: n8n Screenshot-to-Workflow JSON Rebuilder</h2>



<div class="prompt-viewer-wrapper" id="prompt-section">
    <div class="prompt-comparison-row prompt-premium">
        <!-- Header with buttons -->
        <div class="prompt-row-header">
            <!-- <span class="prompt-row-icon">✨</span> -->
            <span class="prompt-row-title">
                                    Step 1: Customize the prompt with your input
                            </span>
            <div class="prompt-header-buttons">
                                    <button class="prompt-header-btn prompt-header-reset" onclick="resetPrompt()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
                            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
                        </svg>
                        <span>Reset</span>
                    </button>
                                <button class="prompt-header-btn prompt-header-copy-green flowpast-copy-prompt-btn" onclick="handlePromptCopy()">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                        <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
                    </svg>
                    <span>Customize and Copy Full Prompt</span>
                </button>
            </div>
        </div>

        <!-- Customize the Prompt Section -->
                    <div class="prompt-customize-section">
                <span class="customize-title">Customize the Prompt</span>
                <p class="customize-subtitle">Fill in the fields below to personalize this prompt for your needs.</p>
                <table class="customize-table">
                    <thead>
                        <tr>
                            <th>Variable</th>
                            <th>What to Enter</th>
                            <th>Customise the prompt</th>
                        </tr>
                    </thead>
                    <tbody>
                                                    <tr>
                                <td class="var-name"><code>[CONTEXT]</code></td>
                                <td class="var-desc">
                                    Provide the background or scenario in which the workflow screenshots were taken. Include any relevant details about the system, environment, or project.                                    <div class="var-example">For example: "Screenshots were taken from a client&#039;s production environment to troubleshoot a failing webhook integration with their CRM."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[CONTEXT]"
                                            placeholder="Enter your value here..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[PRIMARY_GOAL]</code></td>
                                <td class="var-desc">
                                    Specify the main objective you want to achieve with the reconstructed workflow. Include any key outcomes or functional requirements.                                    <div class="var-example">For example: "Rebuild the workflow to match the original layout and ensure the webhook triggers correctly for data synchronization."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[PRIMARY_GOAL]"
                                            placeholder="Enter your value here..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[PLATFORM]</code></td>
                                <td class="var-desc">
                                    Indicate the platform or system where the workflow will run or interact. This helps tailor the reconstruction to compatibility needs.                                    <div class="var-example">For example: "n8n running on a self-hosted Docker instance integrated with Salesforce and Google Sheets."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[PLATFORM]"
                                            placeholder="Enter your value here..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[CHALLENGE]</code></td>
                                <td class="var-desc">
                                    Describe any specific issues, constraints, or missing details that may impact the workflow reconstruction process.                                    <div class="var-example">For example: "Some nodes have blurred settings panels, and connection lines overlap, making it hard to trace logic accurately."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[CHALLENGE]"
                                            placeholder="Enter your value here..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[TIMEFRAME]</code></td>
                                <td class="var-desc">
                                    State the expected timeline for completing the workflow reconstruction. Include any urgency or deadlines.                                    <div class="var-example">For example: "The workflow needs to be reconstructed within 3 business days to meet a client delivery deadline."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[TIMEFRAME]"
                                            placeholder="Enter your value here..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[FORMAT]</code></td>
                                <td class="var-desc">
                                    Specify the preferred format for the output, such as JSON schema or a specific layout for documentation.                                    <div class="var-example">For example: "Import-ready n8n workflow JSON file with clearly labeled nodes and connections."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[FORMAT]"
                                            placeholder="Enter your value here..." />
                                                                    </td>
                            </tr>
                                            </tbody>
                </table>

                <button class="copy-customized-btn flowpast-copy-prompt-btn" onclick="handlePromptCopy()">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                        <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
                    </svg>
                    <span class="copy-customized-text">Customise the prompt now</span>
                </button>
            </div>
        
        <!-- Full Prompt Code Header -->
                    <div class="prompt-code-header">
                <span class="prompt-code-title">
                    Step 2: Copy the Prompt
                </span>
                <div class="prompt-code-buttons">
                    <!-- Reset: Only visible when unlocked -->
                    <button class="prompt-header-btn prompt-header-reset btn-when-unlocked" onclick="resetPrompt()" style="display: none;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
                            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
                        </svg>
                        <span>Reset</span>
                    </button>
                    <!-- Copy Full Prompt -->
                    <button class="prompt-header-btn prompt-header-copy flowpast-copy-prompt-btn" onclick="handlePromptCopy()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                            <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
                        </svg>
                        <span>Copy Full Prompt</span>
                    </button>
                </div>
            </div>
        

        <!-- Prompt Content -->
        <div class="prompt-box prompt-gated-wrapper">
            <!-- Gated: Blurred content -->
            <div class="prompt-gated-content">
                <div class="prompt-header-visible">OBJECTIVE</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">PERSONA</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">CONSTRAINTS</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div><div class="locked-line" style="width: 80%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">What This Is NOT</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">PROCESS</div><div class="prompt-header-visible subheader">0) Pre-Analysis (required)</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">1) Visual inventory</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">2) Wiring &amp; execution logic</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">3) Settings recovery + controlled inference</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">4) Build plan with adaptive stages</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">5) JSON assembly</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">6) Hardening &amp; import validation</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">7) Delivery + optional quick-start</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">Edge-case handling (must follow)</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">INPUTS</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">OUTPUT SPECIFICATION</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div><div class="locked-line" style="width: 80%;"></div><div class="locked-line" style="width: 95%;"></div><div class="locked-line" style="width: 70%;"></div><div class="locked-line" style="width: 83%;"></div><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div><div class="locked-line" style="width: 80%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">QUALITY CHECKS</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div></div></div><div class="locked-section-icon">🔒</div></div>            </div>
            <!-- Unlocked: Full content (hidden by default) -->
            <div class="prompt-content-full" id="premium-prompt-content" style="display: none;">
                ## OBJECTIVE
Turn one or more n8n workflow screenshots into an import-ready n8n workflow JSON that mirrors the on-canvas layout, node wiring, and visible settings as faithfully as possible, while filling unavoidable gaps with sensible defaults that prevent runtime and import errors.

## PERSONA
You are an n8n workflow reconstruction specialist with deep experience in enterprise integrations and post-mortem debugging. You communicate like a meticulous technical reviewer: explicit assumptions, careful tracing of logic, and zero hand-waving. You treat screenshots as forensic evidence and rebuild workflows with high layout fidelity.

## CONSTRAINTS
- Produce **valid, complete n8n workflow JSON** that can be imported without structural errors.
- Preserve **visual layout**: node coordinates, relative spacing, and branching geometry should match what’s shown.
- Capture **every visible node parameter**; only infer what cannot be seen.
- Add **defensive reliability**: error paths, guards, and safe defaults when missing details would otherwise break execution.
- Ask **at most 1–4 clarifying questions**, and only for details that materially change behavior or credentials.
- Use the correct n8n schema conventions (nodes, connections, settings, meta, etc.).
- If an element cannot be confirmed from the screenshot, label it clearly as an assumption and keep it minimally invasive.

### What This Is NOT
- Not a generic tutorial on n8n or automation design.
- Not a promise to recover secret values (API keys, passwords) from images.
- Not a guarantee of perfect business logic if critical panels are fully hidden; in those cases you must surface assumptions and request missing info.
- Not a redesign/optimization project unless the user explicitly asks for improvements beyond screenshot parity.

## PROCESS
### 0) Pre-Analysis (required)
Before building anything, briefly state:
- What you believe the workflow is doing (1–3 sentences).
- Estimated complexity tier based on node count and branching.
- What is clearly readable vs. what will require inference.

### 1) Visual inventory
- Enumerate every detected node: type, label, icon cues, and any visible configuration fields.
- Record approximate canvas placement and grouping (lanes/columns/clusters).

### 2) Wiring &amp; execution logic
- Trace each connection line end-to-end.
- Identify branches (IF/Switch), merges, loops, and any error/continue-on-fail behaviors visible or implied.

### 3) Settings recovery + controlled inference
- Extract all readable parameters from the screenshot.
- Where panels are cut off/blurred, infer using standard n8n defaults and common node patterns.
- Mark inferred values explicitly and keep them conservative.

### 4) Build plan with adaptive stages
Choose a stage count based on complexity (do not announce “phases” unless helpful; just run the stages):
- **Tiny (1–5 nodes):** 3–4 stages
- **Typical (6–15 nodes):** 5–7 stages
- **Large (16–30 nodes):** 8–11 stages
- **Enterprise (31+ nodes):** 11–14 stages  
Adjust upward when screenshot quality is poor or many config panels are hidden; adjust downward when user needs a fast “importable draft.”

### 5) JSON assembly
- Create nodes with stable, unique identifiers.
- Reconstruct coordinates to match screenshot geometry.
- Generate connections exactly as traced.
- Add workflow metadata (name, settings, execution order behavior) consistent with the screenshot and n8n norms.

### 6) Hardening &amp; import validation
- Ensure the JSON is syntactically valid and schema-consistent.
- Add minimal safety nets (guards, continueOnFail where appropriate, missing credential placeholders) without changing intended logic.
- Provide a short “credential/setup checklist” so it runs after the user adds secrets.

### 7) Delivery + optional quick-start
- Provide the final JSON in one block suitable for direct import.
- Provide brief setup steps and test procedure.
- If assumptions were made, list them with exact node references.

### Edge-case handling (must follow)
- **Low-resolution/blurred screenshot:** ask targeted questions about only the unreadable fields that change behavior; otherwise proceed with defaults and label assumptions.
- **Partially visible nodes/panels:** infer only what is necessary to produce importable JSON; add TODO markers in notes.
- **Ambiguous wiring (crossing lines/hidden endpoints):** propose 1–2 plausible connection options and ask the user to confirm which is correct.
- **Multiple screenshots:** merge them, reconcile duplicates, and note conflicts.
- **User urgency:** deliver an importable “draft v1” first, then offer a refinement pass once answers arrive.

## INPUTS
- **Workflow screenshot(s):** [CONTEXT]
- **Intended workflow purpose (if not obvious):** [PRIMARY_GOAL]
- **Where this will run (self-hosted/cloud, n8n version if known):** [PLATFORM]
- **Any known hidden node settings or credentials notes:** [CHALLENGE]
- **Deadline/urgency level:** [TIMEFRAME]
- **Preferred output detail level (draft vs. fully annotated):** [FORMAT]

## OUTPUT SPECIFICATION
Your deliverable must include, in this order:

1. **Pre-analysis summary**
   - {Observed Purpose}
   - {Complexity Tier}
   - {Readable Elements}
   - {Inferred Elements}

2. **Clarifying questions (only if critical)**
   - {Question List} (max 4)

3. **Node &amp; wiring map (concise)**
   - {Node Inventory}
   - {Connection Summary}

4. **Import-ready JSON**
   - A single code block containing {Workflow JSON}

5. **Setup &amp; verification notes**
   - {Credential Checklist}
   - {Test Steps}
   - {Assumptions And TODOs}

## QUALITY CHECKS
Before finalizing, verify:
- JSON parses successfully and includes required top-level keys for an n8n import.
- Every node referenced in connections exists and names/IDs align consistently.
- Coordinates reflect the screenshot’s relative layout (no unintended overlaps; spacing preserved).
- All visible settings are included verbatim; all inferred settings are labeled as such.
- Minimal safety nets are present where missing details would otherwise cause immediate failures (without altering intended behavior).            </div>
        </div>


    </div>

    <!-- CTA Row - Full width buttons -->
    <div class="prompt-cta-row">
        <button class="prompt-cta-btn prompt-cta-copy flowpast-copy-prompt-btn" onclick="handlePromptCopy()">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
            </svg>
            <span class="cta-copy-text">Copy Full Prompt</span>
        </button>
    </div>
</div>

<style>
    /* Gated prompt states */
    .prompt-gated-wrapper {
        position: relative;
    }

    /* When unlocked - show full content, hide gated */
    body.flowpast-unlocked .prompt-gated-wrapper .prompt-gated-content {
        display: none;
    }

    body.flowpast-unlocked .prompt-gated-wrapper .prompt-content-full {
        display: block !important;
    }

    /* Show/hide elements based on unlock state */
    body.flowpast-unlocked .btn-when-unlocked {
        display: inline-flex !important;
    }

    .prompt-viewer-wrapper {
        scroll-margin-top: 250px;
    }

    /* ========================================
   PROMPT VIEWER - MAIN WRAPPER
   ======================================== */
    .prompt-viewer-wrapper {
        margin: 30px 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* ========================================
   PROMPT BOX CONTAINER
   ======================================== */
    .prompt-comparison-row {
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid #e0e0e0;
        background: #fff;
    }

    /* ========================================
   HEADER WITH BUTTONS
   ======================================== */
    .prompt-row-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 20px;
        color: #fff !important;
        background: #141414;
        border-bottom: 1px solid #e0e0e0;
        flex-wrap: wrap;
    }

    .prompt-row-icon {
        font-size: 20px;
    }

    .prompt-row-title {
        font-weight: 600;
        font-size: 22px;
        color: #fff !important;
        text-decoration: underline
    }

    .prompt-header-buttons {
        margin-left: auto;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    /* Header buttons */
    .prompt-header-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
        border: none;
    }

    .prompt-header-copy {
        background: #3a3a3a;
        color: #fff;
    }

    .prompt-header-copy:hover {
        background: #2a2a2a;
    }

    .prompt-header-copy.copied {
        background: #2e7d32;
    }

    .prompt-header-copy-green {
        background: #04AA6D !important;
        color: #fff !important;
    }

    .prompt-header-copy-green:hover {
        background: #039860 !important;
    }

    .prompt-header-copy-green.copied {
        background: #2e7d32 !important;
    }

    .prompt-header-access {
        background: rgb(5, 152, 98);
        color: #fff !important;
    }

    .prompt-header-access:hover {
        background: rgb(4, 130, 83);
        transform: translateY(-1px);
    }

    /* ========================================
   PROMPT CONTENT - FULL (NO SCROLL)
   ======================================== */
    .prompt-box {
        background: #ffffff;
    }

    .prompt-content-full {
        padding: 24px;
        margin: 0;
        color: #202124;
        background: #ffffff;
        font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
        font-size: 13px;
        line-height: 1.7;
        white-space: pre-wrap;
        word-wrap: break-word;
        /* No scroll - show full content */
        max-height: none;
        overflow: visible;
    }

    /* Highlighted variable in prompt */
    .prompt-variable {
        background: #fff3cd;
        color: #1967d2;
        font-weight: 700;
        padding: 2px 4px;
        border-radius: 3px;
        border: 1px solid #ffc107;
    }

    .prompt-variable-filled {
        background: #d4edda;
        color: #155724;
        font-weight: 700;
        padding: 2px 4px;
        border-radius: 3px;
        border: 1px solid #28a745;
    }

    /* ========================================
   GATED CONTENT (NO ACCESS)
   ======================================== */
    .prompt-gated-content {
        padding: 24px;
        background: #ffffff;
        font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
        font-size: 13px;
        line-height: 1.8;
        max-height: none;
        overflow: visible;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        cursor: default;
    }

    /* ## headers - larger, black */
    .prompt-header-visible {
        color: #202124;
        font-weight: 600;
        margin: 5px 0 0px 0;
        font-size: 20px;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    /* ### headers - smaller, black */
    .prompt-header-visible.subheader {
        color: #202124;
        font-weight: 600;
        margin: 5px 0;
        font-size: 18px;
    }

    .prompt-header-visible:first-child {
        margin-top: 0;
    }

    /* ========================================
   LOCKED SECTION BLOCK
   ======================================== */
    .locked-section {
        position: relative;
        margin: 4px 0 8px 0;
        border-radius: 6px;
        overflow: hidden;
        background: linear-gradient(110deg, #e2e8f0 8%, #f1f5f9 18%, #e2e8f0 33%);
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    .locked-section-bg {
        position: relative;
    }

    .locked-section-lines {
        padding: 8px 12px;
        position: relative;
    }

    .locked-line {
        height: 6px;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 3px;
        margin-bottom: 4px;
        margin-left: 12px;
    }

    .locked-line:last-child {
        margin-bottom: 0;
    }

    .locked-section-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        font-size: 24px;
        filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
    }

    /* Subheader locked sections - slightly indented */
    /*  .prompt-header-visible.subheader+.locked-section {
        margin-left: 16px;
    } */

    /* ========================================
   COMPATIBILITY BADGES
   ======================================== */
    .prompt-compatibility {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 12px 20px;
        background: #f8f9fa;
        border-top: 1px solid #e0e0e0;
    }

    .compat-label {
        font-size: 13px;
        color: #5f6368;
        font-weight: 500;
    }

    .compat-badge {
        padding: 4px 10px;
        background: #e8f0fe;
        color: #1967d2;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
    }

    /* ========================================
   CTA ROW - FULL WIDTH BUTTONS
   ======================================== */
    .prompt-cta-row {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }

    .prompt-cta-btn {
        flex: 1;
        min-width: 200px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 16px 24px;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
        border: none;
    }

    .prompt-cta-copy {
        background: #3a3a3a;
        color: #fff;
    }

    .prompt-cta-copy:hover {
        background: #2a2a2a;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .prompt-cta-copy.copied {
        background: #2e7d32;
    }

    .prompt-cta-reset {
        background: #3a3a3a;
        color: #fff;
    }

    .prompt-cta-reset:hover {
        background: #2a2a2a;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .prompt-cta-access {
        background: rgb(5, 152, 98);
        color: #fff !important;
    }

    .prompt-cta-access:hover {
        background: rgb(4, 130, 83);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(5, 152, 98, 0.3);
    }

    /* ========================================
    CUSTOMIZE YOUR PROMPT SECTION
    ======================================== */
    .prompt-customize-section {
        padding: 24px;
        border-bottom: 1px solid #e0e0e0;
        background: #fafbfc;
    }

    .customize-title {
        margin: 0 0 8px 0;
        font-size: 18px;
        font-weight: 700;
        color: #202124;
    }

    .customize-subtitle {
        margin: 0 0 20px 0;
        font-size: 14px;
        color: #5f6368;
    }

    .customize-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
    }

    .customize-table th {
        text-align: left;
        padding: 12px;
        background: #f1f3f4;
        border: 1px solid #e0e0e0;
        font-size: 13px;
        font-weight: 600;
        color: #202124;
    }

    .customize-table td {
        padding: 12px;
        border: 1px solid #e0e0e0;
        vertical-align: top;
    }

    .customize-table .var-name {
        width: 25%;
        background: #f8f9fa;
    }

    .customize-table .var-name code {
        background: #fff3cd;
        color: #1967d2;
        border: 1px solid #ffc107;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        word-break: break-all;
        font-weight: 600;
    }

    .customize-table .var-desc {
        width: 35%;
        font-size: 13px;
        color: #5f6368;
        line-height: 1.5;
    }

    .customize-table .var-example {
        margin-top: 8px;
        padding: 8px 10px;
        background: #f8f9fa;
        border-left: 3px solid #dadce0;
        font-size: 12px;
        color: #5f6368;
        font-style: italic;
        border-radius: 0 4px 4px 0;
    }

    .customize-table .var-input {
        width: 40%;
    }

    .customize-input {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #dadce0;
        border-radius: 6px;
        font-size: 13px;
        font-family: inherit;
        resize: vertical;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .customize-input:focus {
        outline: none;
        border-color: rgb(5, 152, 98);
        box-shadow: 0 0 0 3px rgba(5, 152, 98, 0.1);
    }

    .customize-input::placeholder {
        color: #9aa0a6;
        font-style: italic;
    }

    .copy-customized-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 16px 24px;
        background: rgb(5, 152, 98);
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .copy-customized-btn:hover {
        background: rgb(4, 130, 83);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(5, 152, 98, 0.3);
    }

    .copy-customized-btn.copied {
        background: #2e7d32;
    }

    /* ========================================
    FULL PROMPT CODE HEADER
    ======================================== */
    .prompt-code-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px;
        color: #fff !important;
        background: #141414;
        border-bottom: 1px solid #e0e0e0;
    }

    .prompt-code-title {
        font-size: 22px;
        font-weight: 600;
        text-decoration: underline;

    }

    .prompt-code-buttons {
        display: flex;
        gap: 8px;
    }

    .prompt-code-buttons .prompt-header-btn {
        padding: 8px 14px;
        font-size: 13px;
        background: #ffffff;
        color: #202124;
        border: 1px solid #dadce0;
    }

    .prompt-code-buttons .prompt-header-access {
        background: rgb(5, 152, 98);
        color: #fff !important;
        border-color: rgb(5, 152, 98);
    }

    .prompt-code-buttons .prompt-header-btn.prompt-header-access:hover {
        background: rgb(4, 130, 83) !important;
        border-color: rgb(4, 130, 83);
        color: #fff !important;
    }

    .prompt-code-buttons .prompt-header-btn:hover {
        background: #f1f3f4;
    }

    .prompt-code-buttons .prompt-header-copy.copied {
        background: #d4edda;
        color: #155724;
        border-color: #28a745;
    }

    .prompt-header-reset {
        background: #ffffff;
        color: #202124;
    }

    /* ========================================
   RESPONSIVE
   ======================================== */
    @media (max-width: 768px) {
        .prompt-row-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
        }

        .prompt-header-buttons {
            margin-left: 0;
            width: 100%;
        }

        .prompt-header-btn {
            flex: 1;
            justify-content: center;
        }

        .prompt-cta-row {
            flex-direction: column;
        }

        .prompt-cta-btn {
            width: 100%;
        }

        /* Customize table responsive */
        .customize-table,
        .customize-table thead,
        .customize-table tbody,
        .customize-table tr,
        .customize-table th,
        .customize-table td {
            display: block;
        }

        .customize-table thead {
            display: none;
        }

        .customize-table tr {
            margin-bottom: 16px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            overflow: hidden;
        }

        .customize-table td {
            width: 100% !important;
            border: none;
            border-bottom: 1px solid #e0e0e0;
        }

        .customize-table td:last-child {
            border-bottom: none;
        }

        .customize-table .var-name {
            background: #f1f3f4;
            font-weight: 600;
        }

        .prompt-code-header {
            flex-direction: column;
            gap: 12px;
            align-items: flex-start;
        }

        .prompt-code-buttons {
            width: 100%;
        }

        .prompt-code-buttons .prompt-header-btn {
            flex: 1;
            justify-content: center;
        }
    }
</style>

<script>
    function handlePromptCopy() {
        // Check if unlocked via cookie
        if (typeof window.flowpastIsUnlocked === 'function' && !window.flowpastIsUnlocked()) {
            // Show email popup
            if (typeof window.flowpastShowEmailPopup === 'function') {
                window.flowpastShowEmailPopup('prompt');
            }
            return;
        }

        // Copy the customized prompt (with filled variables)
        const customizedPrompt = getCustomizedPrompt();
        const copyButtons = document.querySelectorAll('.prompt-header-copy, .prompt-header-copy-green, .prompt-cta-copy, .copy-customized-btn');

        navigator.clipboard.writeText(customizedPrompt).then(() => {
            copyButtons.forEach(btn => {
                btn.classList.add('copied');
                const textSpan = btn.querySelector('span');
                if (textSpan) textSpan.textContent = 'Copied!';
            });

            setTimeout(() => {
                copyButtons.forEach(btn => {
                    btn.classList.remove('copied');
                    const textSpan = btn.querySelector('span');
                    if (textSpan) textSpan.textContent = 'Copy Full Prompt';
                });
            }, 2000);
        }).catch(err => {
            console.error('Failed to copy:', err);
        });
    }

    // Store original prompt for customization
    const originalPrompt = "## OBJECTIVE\r\nTurn one or more n8n workflow screenshots into an import-ready n8n workflow JSON that mirrors the on-canvas layout, node wiring, and visible settings as faithfully as possible, while filling unavoidable gaps with sensible defaults that prevent runtime and import errors.\r\n\r\n## PERSONA\r\nYou are an n8n workflow reconstruction specialist with deep experience in enterprise integrations and post-mortem debugging. You communicate like a meticulous technical reviewer: explicit assumptions, careful tracing of logic, and zero hand-waving. You treat screenshots as forensic evidence and rebuild workflows with high layout fidelity.\r\n\r\n## CONSTRAINTS\r\n- Produce **valid, complete n8n workflow JSON** that can be imported without structural errors.\r\n- Preserve **visual layout**: node coordinates, relative spacing, and branching geometry should match what\u2019s shown.\r\n- Capture **every visible node parameter**; only infer what cannot be seen.\r\n- Add **defensive reliability**: error paths, guards, and safe defaults when missing details would otherwise break execution.\r\n- Ask **at most 1\u20134 clarifying questions**, and only for details that materially change behavior or credentials.\r\n- Use the correct n8n schema conventions (nodes, connections, settings, meta, etc.).\r\n- If an element cannot be confirmed from the screenshot, label it clearly as an assumption and keep it minimally invasive.\r\n\r\n### What This Is NOT\r\n- Not a generic tutorial on n8n or automation design.\r\n- Not a promise to recover secret values (API keys, passwords) from images.\r\n- Not a guarantee of perfect business logic if critical panels are fully hidden; in those cases you must surface assumptions and request missing info.\r\n- Not a redesign\/optimization project unless the user explicitly asks for improvements beyond screenshot parity.\r\n\r\n## PROCESS\r\n### 0) Pre-Analysis (required)\r\nBefore building anything, briefly state:\r\n- What you believe the workflow is doing (1\u20133 sentences).\r\n- Estimated complexity tier based on node count and branching.\r\n- What is clearly readable vs. what will require inference.\r\n\r\n### 1) Visual inventory\r\n- Enumerate every detected node: type, label, icon cues, and any visible configuration fields.\r\n- Record approximate canvas placement and grouping (lanes\/columns\/clusters).\r\n\r\n### 2) Wiring & execution logic\r\n- Trace each connection line end-to-end.\r\n- Identify branches (IF\/Switch), merges, loops, and any error\/continue-on-fail behaviors visible or implied.\r\n\r\n### 3) Settings recovery + controlled inference\r\n- Extract all readable parameters from the screenshot.\r\n- Where panels are cut off\/blurred, infer using standard n8n defaults and common node patterns.\r\n- Mark inferred values explicitly and keep them conservative.\r\n\r\n### 4) Build plan with adaptive stages\r\nChoose a stage count based on complexity (do not announce \u201cphases\u201d unless helpful; just run the stages):\r\n- **Tiny (1\u20135 nodes):** 3\u20134 stages\r\n- **Typical (6\u201315 nodes):** 5\u20137 stages\r\n- **Large (16\u201330 nodes):** 8\u201311 stages\r\n- **Enterprise (31+ nodes):** 11\u201314 stages  \r\nAdjust upward when screenshot quality is poor or many config panels are hidden; adjust downward when user needs a fast \u201cimportable draft.\u201d\r\n\r\n### 5) JSON assembly\r\n- Create nodes with stable, unique identifiers.\r\n- Reconstruct coordinates to match screenshot geometry.\r\n- Generate connections exactly as traced.\r\n- Add workflow metadata (name, settings, execution order behavior) consistent with the screenshot and n8n norms.\r\n\r\n### 6) Hardening & import validation\r\n- Ensure the JSON is syntactically valid and schema-consistent.\r\n- Add minimal safety nets (guards, continueOnFail where appropriate, missing credential placeholders) without changing intended logic.\r\n- Provide a short \u201ccredential\/setup checklist\u201d so it runs after the user adds secrets.\r\n\r\n### 7) Delivery + optional quick-start\r\n- Provide the final JSON in one block suitable for direct import.\r\n- Provide brief setup steps and test procedure.\r\n- If assumptions were made, list them with exact node references.\r\n\r\n### Edge-case handling (must follow)\r\n- **Low-resolution\/blurred screenshot:** ask targeted questions about only the unreadable fields that change behavior; otherwise proceed with defaults and label assumptions.\r\n- **Partially visible nodes\/panels:** infer only what is necessary to produce importable JSON; add TODO markers in notes.\r\n- **Ambiguous wiring (crossing lines\/hidden endpoints):** propose 1\u20132 plausible connection options and ask the user to confirm which is correct.\r\n- **Multiple screenshots:** merge them, reconcile duplicates, and note conflicts.\r\n- **User urgency:** deliver an importable \u201cdraft v1\u201d first, then offer a refinement pass once answers arrive.\r\n\r\n## INPUTS\r\n- **Workflow screenshot(s):** [CONTEXT]\r\n- **Intended workflow purpose (if not obvious):** [PRIMARY_GOAL]\r\n- **Where this will run (self-hosted\/cloud, n8n version if known):** [PLATFORM]\r\n- **Any known hidden node settings or credentials notes:** [CHALLENGE]\r\n- **Deadline\/urgency level:** [TIMEFRAME]\r\n- **Preferred output detail level (draft vs. fully annotated):** [FORMAT]\r\n\r\n## OUTPUT SPECIFICATION\r\nYour deliverable must include, in this order:\r\n\r\n1. **Pre-analysis summary**\r\n   - {Observed Purpose}\r\n   - {Complexity Tier}\r\n   - {Readable Elements}\r\n   - {Inferred Elements}\r\n\r\n2. **Clarifying questions (only if critical)**\r\n   - {Question List} (max 4)\r\n\r\n3. **Node & wiring map (concise)**\r\n   - {Node Inventory}\r\n   - {Connection Summary}\r\n\r\n4. **Import-ready JSON**\r\n   - A single code block containing {Workflow JSON}\r\n\r\n5. **Setup & verification notes**\r\n   - {Credential Checklist}\r\n   - {Test Steps}\r\n   - {Assumptions And TODOs}\r\n\r\n## QUALITY CHECKS\r\nBefore finalizing, verify:\r\n- JSON parses successfully and includes required top-level keys for an n8n import.\r\n- Every node referenced in connections exists and names\/IDs align consistently.\r\n- Coordinates reflect the screenshot\u2019s relative layout (no unintended overlaps; spacing preserved).\r\n- All visible settings are included verbatim; all inferred settings are labeled as such.\r\n- Minimal safety nets are present where missing details would otherwise cause immediate failures (without altering intended behavior).";
    const variables = ["[CONTEXT]","[PRIMARY_GOAL]","[PLATFORM]","[CHALLENGE]","[TIMEFRAME]","[FORMAT]"];
    // Initial render with highlighted variables
    document.addEventListener('DOMContentLoaded', function() {
        renderPromptWithHighlights();
    });

    // Live update prompt as user types
    document.querySelectorAll('.customize-input').forEach(input => {
        input.addEventListener('input', renderPromptWithHighlights);
    });

    function renderPromptWithHighlights() {
        const promptContent = document.getElementById('premium-prompt-content');
        if (!promptContent) return;

        let updatedPrompt = originalPrompt;
        let filledVariables = {};

        // Collect filled values
        document.querySelectorAll('.customize-input').forEach(input => {
            const placeholder = input.dataset.placeholder;
            const value = input.value.trim();

            if (value) {
                filledVariables[placeholder] = value;
            }
        });

        // Replace filled variables and highlight remaining
        let htmlContent = escapeHtml(updatedPrompt);

        variables.forEach(placeholder => {
            const escapedPlaceholder = escapeHtml(placeholder);
            const regex = new RegExp(escapeRegex(escapedPlaceholder), 'g');

            if (filledVariables[placeholder]) {
                // Show filled value with green highlight
                htmlContent = htmlContent.replace(regex,
                    '<span class="prompt-variable-filled">' + escapeHtml(filledVariables[placeholder]) + '</span>'
                );
            } else {
                // Show original placeholder with yellow highlight
                htmlContent = htmlContent.replace(regex,
                    '<span class="prompt-variable">' + escapedPlaceholder + '</span>'
                );
            }
        });

        promptContent.innerHTML = htmlContent;
    }

    function escapeRegex(string) {
        return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    }

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    function resetPrompt() {
        // Clear all input fields
        document.querySelectorAll('.customize-input').forEach(input => {
            input.value = '';
        });

        // Re-render with original placeholders highlighted
        renderPromptWithHighlights();

        // Visual feedback
        const resetBtns = document.querySelectorAll('.prompt-header-reset, .prompt-cta-reset');
        resetBtns.forEach(btn => {
            const originalText = btn.querySelector('span').textContent;
            btn.querySelector('span').textContent = 'Reset!';
            setTimeout(() => {
                btn.querySelector('span').textContent = originalText;
            }, 1000);
        });
    }


    function getCustomizedPrompt() {
        let updatedPrompt = originalPrompt;

        document.querySelectorAll('.customize-input').forEach(input => {
            const placeholder = input.dataset.placeholder;
            const value = input.value.trim();

            if (value) {
                const regex = new RegExp(escapeRegex(placeholder), 'g');
                updatedPrompt = updatedPrompt.replace(regex, value);
            }
        });

        return updatedPrompt;
    }
</script>

</div>

<div class="pro-tips-section">

<h2 class="wp-block-heading">Pro Tips for Better AI Prompt Results</h2>



<ul class="wp-block-list">

<li><strong>Use multiple screenshots on purpose.</strong> Include one full-canvas shot for wiring and layout, then close-ups of each node’s parameters panel. If you can, capture any “Credentials” selectors too (even if secrets are hidden). Follow-up prompt: “Here are 12 screenshots: 1 overview + 11 node panels. Reconstruct with maximum settings fidelity and label anything not visible as an assumption.”</li>


<li><strong>Tell it what must not be guessed.</strong> The prompt will use safe defaults, but you can prevent wrong business logic by explicitly marking “unknowns.” Try: “Do not infer webhook paths, auth scopes, or database table names; ask clarifying questions instead.” That keeps the rebuild importable without inventing mission-critical details.</li>


<li><strong>Call out n8n version and environment.</strong> Small schema differences and node options can vary by version or community nodes. Add a line like: “Target n8n v1.30+ on self-hosted Docker; avoid deprecated node properties.” If you used specific nodes (Slack, HubSpot, Postgres), mention them so defaults align.</li>


<li><strong>Iterate on wiring before perfecting settings.</strong> After the first output, run: “Now verify the connections against screenshot #1 and list any ambiguous branches; propose two wiring interpretations if needed.” Then: “Lock the wiring and refine node parameters using screenshots #2–#12.” This two-pass approach is faster than redoing everything.</li>


<li><strong>Ask for a validation checklist with the JSON.</strong> Pair the rebuild with a practical import plan: “After generating the JSON, provide a 10-step checklist to validate import, credentials, and test runs (with the safest test payload).” Frankly, this catches errors that are invisible in screenshots, like missing required fields or an unhandled empty array.</li>

</ul>

</div>

<div class="related-prompts-section">

<h2 class="wp-block-heading">Related Prompts</h2>



<p>Once you’ve reconstructed the workflow JSON from screenshots, these prompts help you clean up the logic safely and make future maintenance less painful:</p>



<p>If you also need to improve readability after you regain an importable baseline, <a href="https://flowpast.com/prompts/refactor-legacy-code-into-clearer-logic-ai-prompt/">Refactor Legacy Code Into Clearer Logic AI Prompt</a> is a good next step. It’s useful when your reconstructed workflow includes complicated expressions or brittle if/else chains and you want clearer, more reviewable logic without changing what the automation does.</p>



<p>When you’re worried about breaking production behavior (common after a screenshot-based rebuild), use <a href="https://flowpast.com/prompts/refactor-legacy-code-safely-ai-prompt/">Refactor Legacy Code Safely AI Prompt</a>. It’s a strong pairing for n8n teams because you can refactor in small steps, keep behavior stable, and document assumptions you had to make during the reconstruction.</p>



<p>For teams doing ongoing workflow maintenance, <a href="https://flowpast.com/prompts/build-a-clean-code-refactor-roadmap-ai-prompt/">Build a Clean Code Refactor Roadmap AI Prompt</a> helps you prioritize what to tackle first. Use it after you import the rebuilt JSON and confirm it runs, then plan improvements like modularization, naming conventions, and test coverage for critical paths.</p>


<br>


<p>Quick reference:</p>



<ul class="wp-block-list">

<li><a href="https://flowpast.com/prompts/refactor-legacy-code-into-clearer-logic-ai-prompt/">Refactor Legacy Code Into Clearer Logic AI Prompt</a>: Make logic easier to read and review.</li>


<li><a href="https://flowpast.com/prompts/refactor-legacy-code-safely-ai-prompt/">Refactor Legacy Code Safely AI Prompt</a>: Reduce risk while changing complex logic.</li>


<li><a href="https://flowpast.com/prompts/simplify-legacy-code-ai-prompt/">Simplify Legacy Code AI Prompt</a>: Remove unnecessary complexity and clutter.</li>


<li><a href="https://flowpast.com/prompts/refactor-duplicate-code-safely-ai-prompt/">Refactor Duplicate Code Safely AI Prompt</a>: Consolidate repeated logic without regressions.</li>


<li><a href="https://flowpast.com/prompts/build-a-clean-code-refactor-roadmap-ai-prompt/">Build a Clean Code Refactor Roadmap AI Prompt</a>: Plan a staged cleanup with priorities.</li>

</ul>

</div>

<div class="faq-section">

<h2 class="wp-block-heading">Common Questions</h2>


<div class="faq-item">
<span class="question">Which roles benefit most from this n8n screenshot JSON AI prompt?</span>

<p class="answer"><strong>Automation Engineers</strong> use it to recover importable workflows when an export is missing and rebuilding by hand would risk subtle wiring mistakes. <strong>RevOps and Marketing Ops Managers</strong> rely on it when a high-value automation exists only as screenshots in documentation or tickets, and they need a working baseline fast. <strong>Integration Consultants</strong> apply it during migrations when client access is limited and they must reconstruct “as-is” behavior before proposing improvements. <strong>Technical Project Managers</strong> use the assumptions list and clarifying questions to coordinate with stakeholders and fill in missing credentials or hidden settings.</p>

</div>

<div class="faq-item">
<span class="question">Which industries get the most value from this n8n screenshot JSON AI prompt?</span>

<p class="answer"><strong>SaaS companies</strong> get value when customer lifecycle automations (trials, onboarding, churn signals) were built quickly and only preserved in internal docs or screenshots. <strong>E-commerce brands</strong> use it to restore order-to-fulfillment and support workflows, where the exact branching (refund vs replacement vs escalation) matters. <strong>Agencies and consultancies</strong> benefit when inheriting client automations mid-project and needing an importable starting point before standardizing. <strong>Media and content businesses</strong> use it to reconstruct syndication, alerting, and publishing pipelines where node settings are easy to lose but hard to rediscover.</p>

</div>

<div class="faq-item">
<span class="question">Why do basic AI prompts for converting n8n screenshots to workflow JSON produce weak results?</span>

<p class="answer">A typical prompt like “<em>Convert this n8n screenshot into JSON</em>” fails because it: lacks strict requirements for valid, complete n8n schema (so imports error out), provides no instruction to preserve canvas layout and coordinates (so the workflow becomes hard to verify), ignores the need to capture every visible node parameter (so behavior drifts), produces generic wiring guesses instead of explicit, traceable connections, and misses the prompt’s “defensive reliability” approach that adds safe defaults and flags assumptions when details are hidden.</p>

</div>

<div class="faq-item">
<span class="question">Can I customize this n8n screenshot JSON prompt for my specific situation?</span>

<p class="answer">Yes. The easiest customization is telling the model what to prioritize: “layout fidelity over optimization,” “behavior fidelity over readability,” or “minimum assumptions, ask more questions.” You can also specify your target n8n version, which nodes are definitely in use (including community nodes), and which settings are not allowed to be inferred (like webhook paths or database names). Follow-up prompt to use after the first draft: “List all assumptions you made, then regenerate the JSON with those assumptions moved into explicit TODO notes inside node names or annotations.”</p>

</div>

<div class="faq-item">
<span class="question">What are the most common mistakes when using this n8n screenshot JSON prompt?</span>

<p class="answer">The biggest mistake is providing only a zoomed-out canvas shot; “one screenshot of the whole workflow” is bad, while “one canvas overview plus a close-up of each node’s parameters panel” is good. Another common error is hiding or cropping the connection lines, which forces wiring guesses; include screenshots that clearly show branches and merges. People also forget to mention the n8n version and node types, which can lead to slightly wrong schema defaults; add a line like “n8n v1.x, core nodes only” if that’s true. Finally, users often skip credential constraints; instead of “assume credentials exist,” say “leave credential references empty and ask what credential names to use.”</p>

</div>

<div class="faq-item">
<span class="question">Who should NOT use this n8n screenshot JSON prompt?</span>

<p class="answer">This prompt isn’t ideal if you only have partial screenshots where most node settings panels are completely hidden and you cannot answer clarifying questions. It’s also a poor fit when you actually want a redesign or performance optimization, because it prioritizes screenshot parity and minimal assumptions. If your goal is a cleaner architecture, import the reconstructed workflow first, then use a refactor-focused prompt to improve it in controlled steps.</p>

</div>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Which roles benefit most from this n8n screenshot JSON AI prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Automation Engineers use it to recover importable workflows when an export is missing and rebuilding by hand would risk subtle wiring mistakes. RevOps and Marketing Ops Managers rely on it when a high-value automation exists only as screenshots in documentation or tickets, and they need a working baseline fast. Integration Consultants apply it during migrations when client access is limited and they must reconstruct “as-is” behavior before proposing improvements. Technical Project Managers use the assumptions list and clarifying questions to coordinate with stakeholders and fill in missing credentials or hidden settings."
      }
    },
    {
      "@type": "Question",
      "name": "Which industries get the most value from this n8n screenshot JSON AI prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "SaaS companies get value when customer lifecycle automations (trials, onboarding, churn signals) were built quickly and only preserved in internal docs or screenshots. E-commerce brands use it to restore order-to-fulfillment and support workflows, where the exact branching (refund vs replacement vs escalation) matters. Agencies and consultancies benefit when inheriting client automations mid-project and needing an importable starting point before standardizing. Media and content businesses use it to reconstruct syndication, alerting, and publishing pipelines where node settings are easy to lose but hard to rediscover."
      }
    },
    {
      "@type": "Question",
      "name": "Why do basic AI prompts for converting n8n screenshots to workflow JSON produce weak results?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "A typical prompt like “Convert this n8n screenshot into JSON” fails because it: lacks strict requirements for valid, complete n8n schema (so imports error out), provides no instruction to preserve canvas layout and coordinates (so the workflow becomes hard to verify), ignores the need to capture every visible node parameter (so behavior drifts), produces generic wiring guesses instead of explicit, traceable connections, and misses the prompt’s “defensive reliability” approach that adds safe defaults and flags assumptions when details are hidden."
      }
    },
    {
      "@type": "Question",
      "name": "Can I customize this n8n screenshot JSON prompt for my specific situation?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Yes. The easiest customization is telling the model what to prioritize: “layout fidelity over optimization,” “behavior fidelity over readability,” or “minimum assumptions, ask more questions.” You can also specify your target n8n version, which nodes are definitely in use (including community nodes), and which settings are not allowed to be inferred (like webhook paths or database names). Follow-up prompt to use after the first draft: “List all assumptions you made, then regenerate the JSON with those assumptions moved into explicit TODO notes inside node names or annotations.”"
      }
    },
    {
      "@type": "Question",
      "name": "What are the most common mistakes when using this n8n screenshot JSON prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "The biggest mistake is providing only a zoomed-out canvas shot; “one screenshot of the whole workflow” is bad, while “one canvas overview plus a close-up of each node’s parameters panel” is good. Another common error is hiding or cropping the connection lines, which forces wiring guesses; include screenshots that clearly show branches and merges. People also forget to mention the n8n version and node types, which can lead to slightly wrong schema defaults; add a line like “n8n v1.x, core nodes only” if that’s true. Finally, users often skip credential constraints; instead of “assume credentials exist,” say “leave credential references empty and ask what credential names to use.”"
      }
    },
    {
      "@type": "Question",
      "name": "Who should NOT use this n8n screenshot JSON prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "This prompt isn’t ideal if you only have partial screenshots where most node settings panels are completely hidden and you cannot answer clarifying questions. It’s also a poor fit when you actually want a redesign or performance optimization, because it prioritizes screenshot parity and minimal assumptions. If your goal is a cleaner architecture, import the reconstructed workflow first, then use a refactor-focused prompt to improve it in controlled steps."
      }
    }
  ]
}
</script>
</div>

<div class="closing-section">

<p>Rebuilding n8n workflows from screenshots is tedious when you do it manually, and risky when you do it fast. Paste this prompt into your AI tool, add your screenshots, and get back to a JSON you can actually import and test.</p>

</div>]]></content:encoded>
					
		
		
		<media:content url="https://flowpast.s3.eu-north-1.amazonaws.com/featured_blog_images/5001679.webp" medium="image"></media:content>
            	</item>
		<item>
		<title>Create Native UI Layout Options AI Prompt</title>
		<link>https://flowpast.com/prompts/create-native-ui-layout-options-ai-prompt/</link>
		
		<dc:creator><![CDATA[Lisa Granqvist]]></dc:creator>
		<pubDate>Fri, 23 Jan 2026 01:26:21 +0000</pubDate>
				<category><![CDATA[Prompts]]></category>
		<guid isPermaLink="false">https://flowpast.com/?p=5001516</guid>

					<description><![CDATA[Platform layouts feel generic - a plug-and-play AI Prompt that outputs native iOS, Android, or web screen layouts with spacing and touch targets. Discover more AI prompts for marketing, sales, and ops.]]></description>
										<content:encoded><![CDATA[<!-- FOCUS_KEYWORD: native UI layout -->
<div class="hook-introduction">

<p>Most “responsive” layouts still feel off. Buttons land in the wrong thumb zone, spacing looks cramped, and the navigation pattern quietly breaks what users already know from their platform. The result is a screen that technically works, but feels generic and harder to complete.</p>



<p>This <strong>native UI layout</strong> is built for <strong>product marketers</strong> who need realistic screen structures to brief design fast, <strong>startup founders</strong> who are validating a new flow without a full-time designer, and <strong>UX consultants</strong> who must propose platform-correct layouts for iOS, Android, or web on tight timelines. The output is a set of layout recommendations with platform conventions, content zones, spacing guidance, and tap target minimums (44 pt iOS, 48 dp Android), plus a “What This Is NOT” section to prevent misalignment.</p>

</div>

<div class="what-and-when-section">

<h2 class="wp-block-heading">What Does This AI Prompt Do and When to Use It?</h2>



<table class="solution-results-table three-column" role="presentation" aria-label="What this prompt does, when to use it, and what you get">
 <thead>
    <tr>
      <th scope="col">What This Prompt Does</th>
      <th scope="col">When to Use This Prompt</th>
      <th scope="col">What You&#8217;ll Get</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <ul class="automation-list">
          <li>It restates the chosen platform, your content blocks, and the single most important screen action in a visible pre-analysis.</li>
          <li>It scans platform conventions (navigation model, control placement, and component choices) so the layout commits to iOS, Android, or web instead of blending.</li>
          <li>It defines information architecture zones (primary, secondary, tertiary) and ties each zone to scanning patterns and task completion.</li>
          <li>It enforces mobile ergonomics by placing primary actions in comfortable thumb zones and applying minimum tap target sizes (44 pt iOS, 48 dp Android).</li>
          <li>It outputs usability-minded spacing guidance to avoid “UI wallpaper” and reduce cognitive load during real use (one-handed, on-the-go, multitasking).</li>
       </ul>
      </td>
      <td>
        <ul class="results-list">
          <li>You are redesigning a key screen (checkout, onboarding, settings, upgrade) and the current layout feels like a generic template.</li>
          <li>Your team is debating iOS vs Android patterns and you need a grounded recommendation before writing requirements.</li>
          <li>You have the content blocks, but not the structure; the screen reads dense and users miss the primary CTA.</li>
          <li>You are expanding to a second platform and want to avoid porting a layout that looks “foreign” to new users.</li>
          <li>You are moving faster than design bandwidth allows and need a strong first pass to brief UI work or validate a flow.</li>
        </ul>
      </td>
       <td>
         <ul class="deliverables-list">
           <li>A platform-specific layout recommendation with clearly named content zones and the primary task highlighted.</li>
           <li>A “convention scan” list of expected cues (navigation pattern, standard controls, placement) tailored to iOS, Android, or web.</li>
           <li>Ergonomics notes including thumb-zone placement plus tap target minimums (44 pt or 48 dp) applied to key elements.</li>
           <li>A spacing and hierarchy plan that explains how the eye should move through the screen.</li>
           <li>A short “What This Is NOT” section that clarifies scope (not a pixel-perfect mockup, not a full design system, not framework-specific code guidance unless requested).</li>
         </ul>
       </td>
    </tr>
  </tbody>
</table>

</div>

<div class="prompt-display-section">

<h2 class="wp-block-heading">The Full AI Prompt: Native Platform Screen Layout Recommender</h2>



<div class="prompt-viewer-wrapper" id="prompt-section">
    <div class="prompt-comparison-row prompt-premium">
        <!-- Header with buttons -->
        <div class="prompt-row-header">
            <!-- <span class="prompt-row-icon">✨</span> -->
            <span class="prompt-row-title">
                                    Step 1: Customize the prompt with your input
                            </span>
            <div class="prompt-header-buttons">
                                    <button class="prompt-header-btn prompt-header-reset" onclick="resetPrompt()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
                            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
                        </svg>
                        <span>Reset</span>
                    </button>
                                <button class="prompt-header-btn prompt-header-copy-green flowpast-copy-prompt-btn" onclick="handlePromptCopy()">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                        <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
                    </svg>
                    <span>Customize and Copy Full Prompt</span>
                </button>
            </div>
        </div>

        <!-- Customize the Prompt Section -->
                    <div class="prompt-customize-section">
                <span class="customize-title">Customize the Prompt</span>
                <p class="customize-subtitle">Fill in the fields below to personalize this prompt for your needs.</p>
                <table class="customize-table">
                    <thead>
                        <tr>
                            <th>Variable</th>
                            <th>What to Enter</th>
                            <th>Customise the prompt</th>
                        </tr>
                    </thead>
                    <tbody>
                                                    <tr>
                                <td class="var-name"><code>[PLATFORM]</code></td>
                                <td class="var-desc">
                                    Specify the platform where the screen layout will be implemented. This could be a mobile operating system or a specific device ecosystem.                                    <div class="var-example">For example: "iOS for iPhone 14 Pro or Android Material Design for Pixel 7."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[PLATFORM]"
                                            placeholder="Enter your value here..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[KEY_CONTENT_TYPES]</code></td>
                                <td class="var-desc">
                                    List the main types of content that need to be displayed on the screen. Be specific about what is included, such as text, images, buttons, or forms.                                    <div class="var-example">For example: "Header text, product image carousel, user review section, and &#039;Add to Cart&#039; button."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[KEY_CONTENT_TYPES]"
                                            placeholder="Enter your value here..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[PRIMARY_USER_ACTIONS]</code></td>
                                <td class="var-desc">
                                    Describe the key actions users should be able to perform on this screen. Focus on the primary task or interaction intended for the user.                                    <div class="var-example">For example: "Search for products, filter results by category, and initiate checkout."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[PRIMARY_USER_ACTIONS]"
                                            placeholder="Enter your value here..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[CONTEXT]</code></td>
                                <td class="var-desc">
                                    Provide any extra details or limitations that should be considered in the design, such as accessibility requirements, branding guidelines, or device-specific constraints.                                    <div class="var-example">For example: "Ensure compliance with WCAG 2.1 standards and adapt layout for foldable devices."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[CONTEXT]"
                                            placeholder="Enter your value here..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[TONE]</code></td>
                                <td class="var-desc">
                                    Specify the desired tone or style for the design recommendations. This could range from formal and professional to casual and approachable.                                    <div class="var-example">For example: "Professional and concise tone suitable for a technical audience."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[TONE]"
                                            placeholder="Enter your value here..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[FORMAT]</code></td>
                                <td class="var-desc">
                                    Indicate the level of detail and length expected for the deliverable. This could include concise bullet points or detailed paragraphs.                                    <div class="var-example">For example: "Detailed paragraphs with visual hierarchy explanations and ergonomic considerations."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[FORMAT]"
                                            placeholder="Enter your value here..." />
                                                                    </td>
                            </tr>
                                            </tbody>
                </table>

                <button class="copy-customized-btn flowpast-copy-prompt-btn" onclick="handlePromptCopy()">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                        <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
                    </svg>
                    <span class="copy-customized-text">Customise the prompt now</span>
                </button>
            </div>
        
        <!-- Full Prompt Code Header -->
                    <div class="prompt-code-header">
                <span class="prompt-code-title">
                    Step 2: Copy the Prompt
                </span>
                <div class="prompt-code-buttons">
                    <!-- Reset: Only visible when unlocked -->
                    <button class="prompt-header-btn prompt-header-reset btn-when-unlocked" onclick="resetPrompt()" style="display: none;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
                            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
                        </svg>
                        <span>Reset</span>
                    </button>
                    <!-- Copy Full Prompt -->
                    <button class="prompt-header-btn prompt-header-copy flowpast-copy-prompt-btn" onclick="handlePromptCopy()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                            <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
                        </svg>
                        <span>Copy Full Prompt</span>
                    </button>
                </div>
            </div>
        

        <!-- Prompt Content -->
        <div class="prompt-box prompt-gated-wrapper">
            <!-- Gated: Blurred content -->
            <div class="prompt-gated-content">
                <div class="prompt-header-visible">OBJECTIVE</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">PERSONA</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">CONSTRAINTS</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div><div class="locked-line" style="width: 80%;"></div><div class="locked-line" style="width: 95%;"></div><div class="locked-line" style="width: 70%;"></div><div class="locked-line" style="width: 83%;"></div><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">PROCESS</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">INPUTS</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">OUTPUT SPECIFICATION</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div><div class="locked-line" style="width: 80%;"></div><div class="locked-line" style="width: 95%;"></div><div class="locked-line" style="width: 70%;"></div><div class="locked-line" style="width: 83%;"></div><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">QUALITY CHECKS</div><div class="locked-section"><div class="locked-section-bg"><div class="locked-section-lines"><div class="locked-line" style="width: 85%;"></div><div class="locked-line" style="width: 78%;"></div><div class="locked-line" style="width: 92%;"></div><div class="locked-line" style="width: 75%;"></div><div class="locked-line" style="width: 88%;"></div><div class="locked-line" style="width: 72%;"></div></div></div><div class="locked-section-icon">🔒</div></div>            </div>
            <!-- Unlocked: Full content (hidden by default) -->
            <div class="prompt-content-full" id="premium-prompt-content" style="display: none;">
                ## OBJECTIVE
Create screen layout recommendations that feel unmistakably native on the chosen platform while still applying universal usability principles. The layouts must avoid “one-size-fits-all” compromises and instead commit to the conventions users already know, while keeping content easy to scan and key actions easy to complete.

## PERSONA
You are a cross-platform UI layout strategist with prior experience designing for Apple ecosystems and deep familiarity with Google’s Material Design. Your specialty is translating platform norms into practical component placement, spacing, and interaction patterns that reduce cognitive load in real usage (one-handed operation, multitasking, on-the-go attention).

## CONSTRAINTS
- Respect the selected platform’s native navigation models, typography/spacing rhythm, and interaction patterns.
- Prioritize the screen’s main task; every element must support completion with minimal friction.
- Mobile ergonomics are mandatory: primary action(s) must sit in comfortable thumb zones for typical one-handed use.
- Spacing must intentionally guide the eye and reduce perceived complexity; avoid dense “UI wallpaper.”
- Tap/click target minimums:
  - iOS: ≥ 44 pt
  - Android: ≥ 48 dp
- Do not output “blended” layouts that look like neither iOS nor Android. Choose and commit.
- Include a short **What This Is NOT** section inside your answer:
  - Not a visual mockup, pixel-perfect comp, or brand identity exercise
  - Not a full design system spec
  - Not an implementation guide for a specific code framework unless asked

## PROCESS
1. **Pre-analysis (must be visible in the answer):** Restate your understanding of the platform, the content blocks, and the single most important user action for the screen.
2. **Convention scan:** List the platform cues users will expect (navigation pattern, common control placement, platform-standard component choices).
3. **Information architecture:** Define primary/secondary/tertiary content zones and the scan order (what the eye hits first, second, third).
4. **Ergonomics pass:** Place primary and secondary actions based on one-handed reach and frequency of use.
5. **Cognitive-load shaping:** Explain how spacing/grouping reduces decision burden and supports quick comprehension.
6. **Edge-case handling:** If any input is missing or vague, make the smallest reasonable assumptions, state them explicitly, and provide 1–2 alternative layout variants that cover the ambiguity.

## INPUTS
- **Platform to design for:** [PLATFORM]
- **Primary content elements to include:** [KEY_CONTENT_TYPES]
- **Main user action(s) for the screen:** [PRIMARY_USER_ACTIONS]
- **Additional context or constraints (optional):** [CONTEXT]
- **Tone for the writeup (optional):** [TONE]
- **Preferred deliverable length/detail (optional):** [FORMAT]

## OUTPUT SPECIFICATION
Deliver **2–3** distinct layout options tailored to **[PLATFORM]**.

For each layout option, provide:
- **{Layout Name}** (should imply the platform pattern being used)
- **{Platform Signals}**: 3–6 explicit cues that instantly communicate “native” (e.g., navigation structure, control placement, component style)
- **{Hierarchy Map}**:
  - Primary zone:
  - Secondary zone:
  - Tertiary zone:
- **{Spatial Breakdown}** using nested bullets and directional language (top / middle / bottom; leading/trailing; safe-area-aware)
- **{Primary Action Placement}**: where it lives, why it’s there, and thumb-reach reasoning (for mobile)
- **{Sizing &amp; Spacing Notes}**: only include measurements where they matter (tap targets, padding around key controls, separation between groups)
- **{Touch Target Compliance}**: confirm minimums are met and how (padding, container buttons, row height)
- **{White Space Strategy}**: how spacing guides flow and reduces cognitive load
- **{User Flow Rationale}**: 3–5 bullets explaining how the layout accelerates completion of [PRIMARY_USER_ACTIONS]

Use headings for each screen option. Use bullets + indentation to show containment (e.g., sections, cards, rows, action zones). Do not require images to understand the structure.

## QUALITY CHECKS
At the end, add a short verification checklist confirming:
- Platform-native navigation and component choices are honored
- Clear primary/secondary/tertiary hierarchy and scan path exist
- Primary action is easy to reach (mobile) and unambiguous
- Tap targets meet iOS/Android minimums where applicable
- The solution avoids generic cross-platform “averaging” and commits to the selected platform            </div>
        </div>


    </div>

    <!-- CTA Row - Full width buttons -->
    <div class="prompt-cta-row">
        <button class="prompt-cta-btn prompt-cta-copy flowpast-copy-prompt-btn" onclick="handlePromptCopy()">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
            </svg>
            <span class="cta-copy-text">Copy Full Prompt</span>
        </button>
    </div>
</div>

<style>
    /* Gated prompt states */
    .prompt-gated-wrapper {
        position: relative;
    }

    /* When unlocked - show full content, hide gated */
    body.flowpast-unlocked .prompt-gated-wrapper .prompt-gated-content {
        display: none;
    }

    body.flowpast-unlocked .prompt-gated-wrapper .prompt-content-full {
        display: block !important;
    }

    /* Show/hide elements based on unlock state */
    body.flowpast-unlocked .btn-when-unlocked {
        display: inline-flex !important;
    }

    .prompt-viewer-wrapper {
        scroll-margin-top: 250px;
    }

    /* ========================================
   PROMPT VIEWER - MAIN WRAPPER
   ======================================== */
    .prompt-viewer-wrapper {
        margin: 30px 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* ========================================
   PROMPT BOX CONTAINER
   ======================================== */
    .prompt-comparison-row {
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid #e0e0e0;
        background: #fff;
    }

    /* ========================================
   HEADER WITH BUTTONS
   ======================================== */
    .prompt-row-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 20px;
        color: #fff !important;
        background: #141414;
        border-bottom: 1px solid #e0e0e0;
        flex-wrap: wrap;
    }

    .prompt-row-icon {
        font-size: 20px;
    }

    .prompt-row-title {
        font-weight: 600;
        font-size: 22px;
        color: #fff !important;
        text-decoration: underline
    }

    .prompt-header-buttons {
        margin-left: auto;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    /* Header buttons */
    .prompt-header-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
        border: none;
    }

    .prompt-header-copy {
        background: #3a3a3a;
        color: #fff;
    }

    .prompt-header-copy:hover {
        background: #2a2a2a;
    }

    .prompt-header-copy.copied {
        background: #2e7d32;
    }

    .prompt-header-copy-green {
        background: #04AA6D !important;
        color: #fff !important;
    }

    .prompt-header-copy-green:hover {
        background: #039860 !important;
    }

    .prompt-header-copy-green.copied {
        background: #2e7d32 !important;
    }

    .prompt-header-access {
        background: rgb(5, 152, 98);
        color: #fff !important;
    }

    .prompt-header-access:hover {
        background: rgb(4, 130, 83);
        transform: translateY(-1px);
    }

    /* ========================================
   PROMPT CONTENT - FULL (NO SCROLL)
   ======================================== */
    .prompt-box {
        background: #ffffff;
    }

    .prompt-content-full {
        padding: 24px;
        margin: 0;
        color: #202124;
        background: #ffffff;
        font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
        font-size: 13px;
        line-height: 1.7;
        white-space: pre-wrap;
        word-wrap: break-word;
        /* No scroll - show full content */
        max-height: none;
        overflow: visible;
    }

    /* Highlighted variable in prompt */
    .prompt-variable {
        background: #fff3cd;
        color: #1967d2;
        font-weight: 700;
        padding: 2px 4px;
        border-radius: 3px;
        border: 1px solid #ffc107;
    }

    .prompt-variable-filled {
        background: #d4edda;
        color: #155724;
        font-weight: 700;
        padding: 2px 4px;
        border-radius: 3px;
        border: 1px solid #28a745;
    }

    /* ========================================
   GATED CONTENT (NO ACCESS)
   ======================================== */
    .prompt-gated-content {
        padding: 24px;
        background: #ffffff;
        font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
        font-size: 13px;
        line-height: 1.8;
        max-height: none;
        overflow: visible;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        cursor: default;
    }

    /* ## headers - larger, black */
    .prompt-header-visible {
        color: #202124;
        font-weight: 600;
        margin: 5px 0 0px 0;
        font-size: 20px;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    /* ### headers - smaller, black */
    .prompt-header-visible.subheader {
        color: #202124;
        font-weight: 600;
        margin: 5px 0;
        font-size: 18px;
    }

    .prompt-header-visible:first-child {
        margin-top: 0;
    }

    /* ========================================
   LOCKED SECTION BLOCK
   ======================================== */
    .locked-section {
        position: relative;
        margin: 4px 0 8px 0;
        border-radius: 6px;
        overflow: hidden;
        background: linear-gradient(110deg, #e2e8f0 8%, #f1f5f9 18%, #e2e8f0 33%);
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    .locked-section-bg {
        position: relative;
    }

    .locked-section-lines {
        padding: 8px 12px;
        position: relative;
    }

    .locked-line {
        height: 6px;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 3px;
        margin-bottom: 4px;
        margin-left: 12px;
    }

    .locked-line:last-child {
        margin-bottom: 0;
    }

    .locked-section-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        font-size: 24px;
        filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
    }

    /* Subheader locked sections - slightly indented */
    /*  .prompt-header-visible.subheader+.locked-section {
        margin-left: 16px;
    } */

    /* ========================================
   COMPATIBILITY BADGES
   ======================================== */
    .prompt-compatibility {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 12px 20px;
        background: #f8f9fa;
        border-top: 1px solid #e0e0e0;
    }

    .compat-label {
        font-size: 13px;
        color: #5f6368;
        font-weight: 500;
    }

    .compat-badge {
        padding: 4px 10px;
        background: #e8f0fe;
        color: #1967d2;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
    }

    /* ========================================
   CTA ROW - FULL WIDTH BUTTONS
   ======================================== */
    .prompt-cta-row {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }

    .prompt-cta-btn {
        flex: 1;
        min-width: 200px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 16px 24px;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
        border: none;
    }

    .prompt-cta-copy {
        background: #3a3a3a;
        color: #fff;
    }

    .prompt-cta-copy:hover {
        background: #2a2a2a;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .prompt-cta-copy.copied {
        background: #2e7d32;
    }

    .prompt-cta-reset {
        background: #3a3a3a;
        color: #fff;
    }

    .prompt-cta-reset:hover {
        background: #2a2a2a;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .prompt-cta-access {
        background: rgb(5, 152, 98);
        color: #fff !important;
    }

    .prompt-cta-access:hover {
        background: rgb(4, 130, 83);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(5, 152, 98, 0.3);
    }

    /* ========================================
    CUSTOMIZE YOUR PROMPT SECTION
    ======================================== */
    .prompt-customize-section {
        padding: 24px;
        border-bottom: 1px solid #e0e0e0;
        background: #fafbfc;
    }

    .customize-title {
        margin: 0 0 8px 0;
        font-size: 18px;
        font-weight: 700;
        color: #202124;
    }

    .customize-subtitle {
        margin: 0 0 20px 0;
        font-size: 14px;
        color: #5f6368;
    }

    .customize-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
    }

    .customize-table th {
        text-align: left;
        padding: 12px;
        background: #f1f3f4;
        border: 1px solid #e0e0e0;
        font-size: 13px;
        font-weight: 600;
        color: #202124;
    }

    .customize-table td {
        padding: 12px;
        border: 1px solid #e0e0e0;
        vertical-align: top;
    }

    .customize-table .var-name {
        width: 25%;
        background: #f8f9fa;
    }

    .customize-table .var-name code {
        background: #fff3cd;
        color: #1967d2;
        border: 1px solid #ffc107;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        word-break: break-all;
        font-weight: 600;
    }

    .customize-table .var-desc {
        width: 35%;
        font-size: 13px;
        color: #5f6368;
        line-height: 1.5;
    }

    .customize-table .var-example {
        margin-top: 8px;
        padding: 8px 10px;
        background: #f8f9fa;
        border-left: 3px solid #dadce0;
        font-size: 12px;
        color: #5f6368;
        font-style: italic;
        border-radius: 0 4px 4px 0;
    }

    .customize-table .var-input {
        width: 40%;
    }

    .customize-input {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #dadce0;
        border-radius: 6px;
        font-size: 13px;
        font-family: inherit;
        resize: vertical;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .customize-input:focus {
        outline: none;
        border-color: rgb(5, 152, 98);
        box-shadow: 0 0 0 3px rgba(5, 152, 98, 0.1);
    }

    .customize-input::placeholder {
        color: #9aa0a6;
        font-style: italic;
    }

    .copy-customized-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 16px 24px;
        background: rgb(5, 152, 98);
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .copy-customized-btn:hover {
        background: rgb(4, 130, 83);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(5, 152, 98, 0.3);
    }

    .copy-customized-btn.copied {
        background: #2e7d32;
    }

    /* ========================================
    FULL PROMPT CODE HEADER
    ======================================== */
    .prompt-code-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px;
        color: #fff !important;
        background: #141414;
        border-bottom: 1px solid #e0e0e0;
    }

    .prompt-code-title {
        font-size: 22px;
        font-weight: 600;
        text-decoration: underline;

    }

    .prompt-code-buttons {
        display: flex;
        gap: 8px;
    }

    .prompt-code-buttons .prompt-header-btn {
        padding: 8px 14px;
        font-size: 13px;
        background: #ffffff;
        color: #202124;
        border: 1px solid #dadce0;
    }

    .prompt-code-buttons .prompt-header-access {
        background: rgb(5, 152, 98);
        color: #fff !important;
        border-color: rgb(5, 152, 98);
    }

    .prompt-code-buttons .prompt-header-btn.prompt-header-access:hover {
        background: rgb(4, 130, 83) !important;
        border-color: rgb(4, 130, 83);
        color: #fff !important;
    }

    .prompt-code-buttons .prompt-header-btn:hover {
        background: #f1f3f4;
    }

    .prompt-code-buttons .prompt-header-copy.copied {
        background: #d4edda;
        color: #155724;
        border-color: #28a745;
    }

    .prompt-header-reset {
        background: #ffffff;
        color: #202124;
    }

    /* ========================================
   RESPONSIVE
   ======================================== */
    @media (max-width: 768px) {
        .prompt-row-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
        }

        .prompt-header-buttons {
            margin-left: 0;
            width: 100%;
        }

        .prompt-header-btn {
            flex: 1;
            justify-content: center;
        }

        .prompt-cta-row {
            flex-direction: column;
        }

        .prompt-cta-btn {
            width: 100%;
        }

        /* Customize table responsive */
        .customize-table,
        .customize-table thead,
        .customize-table tbody,
        .customize-table tr,
        .customize-table th,
        .customize-table td {
            display: block;
        }

        .customize-table thead {
            display: none;
        }

        .customize-table tr {
            margin-bottom: 16px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            overflow: hidden;
        }

        .customize-table td {
            width: 100% !important;
            border: none;
            border-bottom: 1px solid #e0e0e0;
        }

        .customize-table td:last-child {
            border-bottom: none;
        }

        .customize-table .var-name {
            background: #f1f3f4;
            font-weight: 600;
        }

        .prompt-code-header {
            flex-direction: column;
            gap: 12px;
            align-items: flex-start;
        }

        .prompt-code-buttons {
            width: 100%;
        }

        .prompt-code-buttons .prompt-header-btn {
            flex: 1;
            justify-content: center;
        }
    }
</style>

<script>
    function handlePromptCopy() {
        // Check if unlocked via cookie
        if (typeof window.flowpastIsUnlocked === 'function' && !window.flowpastIsUnlocked()) {
            // Show email popup
            if (typeof window.flowpastShowEmailPopup === 'function') {
                window.flowpastShowEmailPopup('prompt');
            }
            return;
        }

        // Copy the customized prompt (with filled variables)
        const customizedPrompt = getCustomizedPrompt();
        const copyButtons = document.querySelectorAll('.prompt-header-copy, .prompt-header-copy-green, .prompt-cta-copy, .copy-customized-btn');

        navigator.clipboard.writeText(customizedPrompt).then(() => {
            copyButtons.forEach(btn => {
                btn.classList.add('copied');
                const textSpan = btn.querySelector('span');
                if (textSpan) textSpan.textContent = 'Copied!';
            });

            setTimeout(() => {
                copyButtons.forEach(btn => {
                    btn.classList.remove('copied');
                    const textSpan = btn.querySelector('span');
                    if (textSpan) textSpan.textContent = 'Copy Full Prompt';
                });
            }, 2000);
        }).catch(err => {
            console.error('Failed to copy:', err);
        });
    }

    // Store original prompt for customization
    const originalPrompt = "## OBJECTIVE\r\nCreate screen layout recommendations that feel unmistakably native on the chosen platform while still applying universal usability principles. The layouts must avoid \u201cone-size-fits-all\u201d compromises and instead commit to the conventions users already know, while keeping content easy to scan and key actions easy to complete.\r\n\r\n## PERSONA\r\nYou are a cross-platform UI layout strategist with prior experience designing for Apple ecosystems and deep familiarity with Google\u2019s Material Design. Your specialty is translating platform norms into practical component placement, spacing, and interaction patterns that reduce cognitive load in real usage (one-handed operation, multitasking, on-the-go attention).\r\n\r\n## CONSTRAINTS\r\n- Respect the selected platform\u2019s native navigation models, typography\/spacing rhythm, and interaction patterns.\r\n- Prioritize the screen\u2019s main task; every element must support completion with minimal friction.\r\n- Mobile ergonomics are mandatory: primary action(s) must sit in comfortable thumb zones for typical one-handed use.\r\n- Spacing must intentionally guide the eye and reduce perceived complexity; avoid dense \u201cUI wallpaper.\u201d\r\n- Tap\/click target minimums:\r\n  - iOS: \u2265 44 pt\r\n  - Android: \u2265 48 dp\r\n- Do not output \u201cblended\u201d layouts that look like neither iOS nor Android. Choose and commit.\r\n- Include a short **What This Is NOT** section inside your answer:\r\n  - Not a visual mockup, pixel-perfect comp, or brand identity exercise\r\n  - Not a full design system spec\r\n  - Not an implementation guide for a specific code framework unless asked\r\n\r\n## PROCESS\r\n1. **Pre-analysis (must be visible in the answer):** Restate your understanding of the platform, the content blocks, and the single most important user action for the screen.\r\n2. **Convention scan:** List the platform cues users will expect (navigation pattern, common control placement, platform-standard component choices).\r\n3. **Information architecture:** Define primary\/secondary\/tertiary content zones and the scan order (what the eye hits first, second, third).\r\n4. **Ergonomics pass:** Place primary and secondary actions based on one-handed reach and frequency of use.\r\n5. **Cognitive-load shaping:** Explain how spacing\/grouping reduces decision burden and supports quick comprehension.\r\n6. **Edge-case handling:** If any input is missing or vague, make the smallest reasonable assumptions, state them explicitly, and provide 1\u20132 alternative layout variants that cover the ambiguity.\r\n\r\n## INPUTS\r\n- **Platform to design for:** [PLATFORM]\r\n- **Primary content elements to include:** [KEY_CONTENT_TYPES]\r\n- **Main user action(s) for the screen:** [PRIMARY_USER_ACTIONS]\r\n- **Additional context or constraints (optional):** [CONTEXT]\r\n- **Tone for the writeup (optional):** [TONE]\r\n- **Preferred deliverable length\/detail (optional):** [FORMAT]\r\n\r\n## OUTPUT SPECIFICATION\r\nDeliver **2\u20133** distinct layout options tailored to **[PLATFORM]**.\r\n\r\nFor each layout option, provide:\r\n- **{Layout Name}** (should imply the platform pattern being used)\r\n- **{Platform Signals}**: 3\u20136 explicit cues that instantly communicate \u201cnative\u201d (e.g., navigation structure, control placement, component style)\r\n- **{Hierarchy Map}**:\r\n  - Primary zone:\r\n  - Secondary zone:\r\n  - Tertiary zone:\r\n- **{Spatial Breakdown}** using nested bullets and directional language (top \/ middle \/ bottom; leading\/trailing; safe-area-aware)\r\n- **{Primary Action Placement}**: where it lives, why it\u2019s there, and thumb-reach reasoning (for mobile)\r\n- **{Sizing & Spacing Notes}**: only include measurements where they matter (tap targets, padding around key controls, separation between groups)\r\n- **{Touch Target Compliance}**: confirm minimums are met and how (padding, container buttons, row height)\r\n- **{White Space Strategy}**: how spacing guides flow and reduces cognitive load\r\n- **{User Flow Rationale}**: 3\u20135 bullets explaining how the layout accelerates completion of [PRIMARY_USER_ACTIONS]\r\n\r\nUse headings for each screen option. Use bullets + indentation to show containment (e.g., sections, cards, rows, action zones). Do not require images to understand the structure.\r\n\r\n## QUALITY CHECKS\r\nAt the end, add a short verification checklist confirming:\r\n- Platform-native navigation and component choices are honored\r\n- Clear primary\/secondary\/tertiary hierarchy and scan path exist\r\n- Primary action is easy to reach (mobile) and unambiguous\r\n- Tap targets meet iOS\/Android minimums where applicable\r\n- The solution avoids generic cross-platform \u201caveraging\u201d and commits to the selected platform";
    const variables = ["[PLATFORM]","[KEY_CONTENT_TYPES]","[PRIMARY_USER_ACTIONS]","[CONTEXT]","[TONE]","[FORMAT]"];
    // Initial render with highlighted variables
    document.addEventListener('DOMContentLoaded', function() {
        renderPromptWithHighlights();
    });

    // Live update prompt as user types
    document.querySelectorAll('.customize-input').forEach(input => {
        input.addEventListener('input', renderPromptWithHighlights);
    });

    function renderPromptWithHighlights() {
        const promptContent = document.getElementById('premium-prompt-content');
        if (!promptContent) return;

        let updatedPrompt = originalPrompt;
        let filledVariables = {};

        // Collect filled values
        document.querySelectorAll('.customize-input').forEach(input => {
            const placeholder = input.dataset.placeholder;
            const value = input.value.trim();

            if (value) {
                filledVariables[placeholder] = value;
            }
        });

        // Replace filled variables and highlight remaining
        let htmlContent = escapeHtml(updatedPrompt);

        variables.forEach(placeholder => {
            const escapedPlaceholder = escapeHtml(placeholder);
            const regex = new RegExp(escapeRegex(escapedPlaceholder), 'g');

            if (filledVariables[placeholder]) {
                // Show filled value with green highlight
                htmlContent = htmlContent.replace(regex,
                    '<span class="prompt-variable-filled">' + escapeHtml(filledVariables[placeholder]) + '</span>'
                );
            } else {
                // Show original placeholder with yellow highlight
                htmlContent = htmlContent.replace(regex,
                    '<span class="prompt-variable">' + escapedPlaceholder + '</span>'
                );
            }
        });

        promptContent.innerHTML = htmlContent;
    }

    function escapeRegex(string) {
        return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    }

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    function resetPrompt() {
        // Clear all input fields
        document.querySelectorAll('.customize-input').forEach(input => {
            input.value = '';
        });

        // Re-render with original placeholders highlighted
        renderPromptWithHighlights();

        // Visual feedback
        const resetBtns = document.querySelectorAll('.prompt-header-reset, .prompt-cta-reset');
        resetBtns.forEach(btn => {
            const originalText = btn.querySelector('span').textContent;
            btn.querySelector('span').textContent = 'Reset!';
            setTimeout(() => {
                btn.querySelector('span').textContent = originalText;
            }, 1000);
        });
    }


    function getCustomizedPrompt() {
        let updatedPrompt = originalPrompt;

        document.querySelectorAll('.customize-input').forEach(input => {
            const placeholder = input.dataset.placeholder;
            const value = input.value.trim();

            if (value) {
                const regex = new RegExp(escapeRegex(placeholder), 'g');
                updatedPrompt = updatedPrompt.replace(regex, value);
            }
        });

        return updatedPrompt;
    }
</script>

</div>

<div class="pro-tips-section">

<h2 class="wp-block-heading">Pro Tips for Better AI Prompt Results</h2>



<ul class="wp-block-list">

<li><strong>Define the “single most important action” like a conversion event.</strong> Don’t say “save” or “continue.” Use a measurable action such as “Start free trial,” “Confirm address,” or “Submit support ticket.” If you want tighter output, follow up with: “Rewrite the layout so that the primary action is reachable with one hand on a 6.1-inch phone.”</li>


<li><strong>List content blocks as inventory, not a paragraph.</strong> Provide a clean set of blocks (e.g., “Plan comparison, pricing, trust badges, FAQs, primary CTA, secondary CTA”) so the prompt can create real zones. After the first result, try: “Now reduce the visible blocks by 20% without losing conversion-critical info, and explain what moved behind progressive disclosure.”</li>


<li><strong>Force a platform commitment when teams keep blending patterns.</strong> If you’re seeing iOS-style top nav mixed with Android-like controls, add a direct follow-up: “Choose iOS conventions only; replace any Material patterns with Apple-native equivalents and explain the changes.” The same approach works in reverse for Material Design.</li>


<li><strong>Iterate using constraints, not opinions.</strong> “Make it cleaner” is vague; “Increase scannability for a distracted user in 10 seconds” is actionable. After the first output, ask: “Now make the hierarchy more aggressive (stronger grouping, fewer equal-weight elements) while keeping tap targets at or above the minimum.”</li>


<li><strong>Pair layout recommendations with lifecycle goals.</strong> A layout is better when it reflects what you are trying to achieve (activation, upgrade, retention). If you already know your growth lever, run a second pass: “Re-optimize this screen for reducing support volume and include microcopy placements that prevent common mistakes.” For more strategic context, it helps to align with insights from customer data or personas first.</li>

</ul>

</div>

<div class="related-prompts-section">

<h2 class="wp-block-heading">Related Prompts</h2>



<p>Once your screen layout feels native, these prompts help you connect the UI to customer insight and the operational playbooks that make the experience consistent.</p>



<p>If you also need to decide which UI elements matter most to customers, start with <a href="https://flowpast.com/prompts/create-3-customer-personas-with-this-ai-prompt/">Create 3 Customer Personas with this AI Prompt</a>. Clear personas make your “primary action” decision easier (and stop stakeholders from designing for everyone at once), which directly improves the layout recommendations you’ll get.</p>



<p>For teams doing growth experiments, <a href="https://flowpast.com/prompts/ai-prompt-to-turn-customer-data-into-growth-plays/">AI Prompt to Turn Customer Data Into Growth Plays</a> pairs well after you settle the layout. Use it to pick what to test on that screen (CTA placement, plan framing, progressive disclosure), based on real patterns in your customer data instead of guesses.</p>



<p>When the screen you’re laying out affects revenue moments (upgrade, add-ons, cart), <a href="https://flowpast.com/prompts/build-an-upsell-and-cross-sell-playbook-with-this-ai-prompt/">Build an Upsell and Cross-Sell Playbook with this AI Prompt</a> helps you decide which offer modules belong on-screen versus behind a secondary path. Honestly, it’s a simple way to prevent “random upsell boxes” that feel bolted on.</p>


<br>


<p>Quick reference:</p>



<ul class="wp-block-list">

<li><a href="https://flowpast.com/prompts/ai-prompt-to-turn-customer-data-into-growth-plays/">AI Prompt to Turn Customer Data Into Growth Plays</a>: Turn insights into testable growth ideas.</li>


<li><a href="https://flowpast.com/prompts/create-a-customer-support-playbook-with-this-ai-prompt/">Create a Customer Support Playbook with this AI Prompt</a>: Standardize support responses and workflows.</li>


<li><a href="https://flowpast.com/prompts/build-an-upsell-and-cross-sell-playbook-with-this-ai-prompt/">Build an Upsell and Cross-Sell Playbook with this AI Prompt</a>: Design upsell motions that feel natural.</li>


<li><a href="https://flowpast.com/prompts/build-a-customer-win-back-playbook-ai-prompt/">Build a Customer Win-Back Playbook AI Prompt</a>: Recover churned users with targeted plays.</li>


<li><a href="https://flowpast.com/prompts/create-3-customer-personas-with-this-ai-prompt/">Create 3 Customer Personas with this AI Prompt</a>: Build personas to guide messaging and UX.</li>

</div>

<div class="faq-section">

<h2 class="wp-block-heading">Common Questions</h2>


<div class="faq-item">
<span class="question">Which roles benefit most from this native UI layout AI prompt?</span>

<p class="answer"><strong>Product Managers</strong> use this to turn a fuzzy feature idea into a platform-correct screen structure they can hand to design and engineering. <strong>UX/UI Designers</strong> use it as a fast “convention check” when they’re designing across iOS and Android and want to avoid accidental pattern mixing. <strong>Growth Marketers</strong> find it valuable for landing key in-app moments (upgrade, onboarding completion) because it prioritizes the primary action and scannability. <strong>Founders</strong> apply it to get a credible first draft layout before investing in full mockups.</p>

</div>

<div class="faq-item">
<span class="question">Which industries get the most value from this native UI layout AI prompt?</span>

<p class="answer"><strong>SaaS companies</strong> use it for upgrade, billing, and onboarding screens where navigation conventions and clear hierarchy directly affect activation and conversion. <strong>E-commerce brands</strong> apply it to cart, checkout, and order tracking flows, where thumb-zone CTAs and spacing reduce drop-off on mobile. <strong>Fintech and banking apps</strong> leverage it to keep complex information readable while maintaining trusted platform patterns (especially around confirmations and settings). <strong>Health and wellness products</strong> find it useful for habit flows and content-heavy screens, where reducing “UI wallpaper” improves completion and comprehension.</p>

</div>

<div class="faq-item">
<span class="question">Why do basic AI prompts for creating native screen layouts produce weak results?</span>

<p class="answer">A typical prompt like &#8220;<em>Design a clean layout for my app screen</em>&#8221; fails because it: lacks an explicit platform commitment (so you get a blended, uncanny UI), provides no convention scan for navigation and control placement, ignores mobile ergonomics like thumb reach and minimum tap targets, produces generic hierarchy instead of defined primary/secondary/tertiary zones, and misses the “single most important action” that should shape every spacing and component decision.</p>

</div>

<div class="faq-item">
<span class="question">Can I customize this native UI layout prompt for my specific situation?</span>

<p class="answer">Yes. The prompt is most effective when you supply three things in your message before running it: the target platform (iOS, Android, or web), a clear list of content blocks that must appear, and the single most important user action for that screen. If your users behave differently (one-handed commuters, older users, enterprise admins), say so, because ergonomics and scanning density change. A practical follow-up is: “Here are two user contexts; generate two layout variants and explain what changed and why.”</p>

</div>

<div class="faq-item">
<span class="question">What are the most common mistakes when using this native UI layout prompt?</span>

<p class="answer">The biggest mistake is leaving the platform ambiguous — instead of “mobile,” say “iOS (iPhone) only” or “Android (Material Design) only.” Another common error is providing content blocks as a narrative (“It has pricing and features and stuff”) rather than a list like “Plan cards, testimonials, FAQ accordion, primary CTA, secondary CTA.” People also pick a vague primary action; “continue” is weaker than “Confirm delivery address” or “Start 7-day trial.” Finally, teams forget constraints like tap targets; if you don’t call out small controls (chips, icon buttons), the layout can drift into hard-to-tap UI.</p>

</div>

<div class="faq-item">
<span class="question">Who should NOT use this native UI layout prompt?</span>

<p class="answer">This prompt isn’t ideal for pixel-perfect visual design tasks where you need exact grids, brand styling, or production-ready specs. It also won’t replace a design system or accessibility audit, especially for regulated industries with strict requirements. If you’re at the stage where you still don’t know the screen’s goal or content blocks, you’ll get better results by defining those first, then returning to this prompt for platform-native layout structure.</p>

</div>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Which roles benefit most from this native UI layout AI prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Product Managers use this to turn a fuzzy feature idea into a platform-correct screen structure they can hand to design and engineering. UX/UI Designers use it as a fast “convention check” when they’re designing across iOS and Android and want to avoid accidental pattern mixing. Growth Marketers find it valuable for landing key in-app moments (upgrade, onboarding completion) because it prioritizes the primary action and scannability. Founders apply it to get a credible first draft layout before investing in full mockups."
      }
    },
    {
      "@type": "Question",
      "name": "Which industries get the most value from this native UI layout AI prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "SaaS companies use it for upgrade, billing, and onboarding screens where navigation conventions and clear hierarchy directly affect activation and conversion. E-commerce brands apply it to cart, checkout, and order tracking flows, where thumb-zone CTAs and spacing reduce drop-off on mobile. Fintech and banking apps leverage it to keep complex information readable while maintaining trusted platform patterns (especially around confirmations and settings). Health and wellness products find it useful for habit flows and content-heavy screens, where reducing “UI wallpaper” improves completion and comprehension."
      }
    },
    {
      "@type": "Question",
      "name": "Why do basic AI prompts for creating native screen layouts produce weak results?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "A typical prompt like \"Design a clean layout for my app screen\" fails because it: lacks an explicit platform commitment (so you get a blended, uncanny UI), provides no convention scan for navigation and control placement, ignores mobile ergonomics like thumb reach and minimum tap targets, produces generic hierarchy instead of defined primary/secondary/tertiary zones, and misses the “single most important action” that should shape every spacing and component decision."
      }
    },
    {
      "@type": "Question",
      "name": "Can I customize this native UI layout prompt for my specific situation?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Yes. The prompt is most effective when you supply three things in your message before running it: the target platform (iOS, Android, or web), a clear list of content blocks that must appear, and the single most important user action for that screen. If your users behave differently (one-handed commuters, older users, enterprise admins), say so, because ergonomics and scanning density change. A practical follow-up is: “Here are two user contexts; generate two layout variants and explain what changed and why.”"
      }
    },
    {
      "@type": "Question",
      "name": "What are the most common mistakes when using this native UI layout prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "The biggest mistake is leaving the platform ambiguous — instead of “mobile,” say “iOS (iPhone) only” or “Android (Material Design) only.” Another common error is providing content blocks as a narrative (“It has pricing and features and stuff”) rather than a list like “Plan cards, testimonials, FAQ accordion, primary CTA, secondary CTA.” People also pick a vague primary action; “continue” is weaker than “Confirm delivery address” or “Start 7-day trial.” Finally, teams forget constraints like tap targets; if you don’t call out small controls (chips, icon buttons), the layout can drift into hard-to-tap UI."
      }
    },
    {
      "@type": "Question",
      "name": "Who should NOT use this native UI layout prompt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "This prompt isn’t ideal for pixel-perfect visual design tasks where you need exact grids, brand styling, or production-ready specs. It also won’t replace a design system or accessibility audit, especially for regulated industries with strict requirements. If you’re at the stage where you still don’t know the screen’s goal or content blocks, you’ll get better results by defining those first, then returning to this prompt for platform-native layout structure."
      }
    }
  ]
}
</script>
</div>

<div class="closing-section">

<p>Native-feeling screens don’t happen by accident. Use this prompt to lock in platform conventions, ergonomics, and hierarchy, then paste the full prompt into ChatGPT to generate your next layout direction.</p>

</div>]]></content:encoded>
					
		
		
		<media:content url="https://flowpast.s3.eu-north-1.amazonaws.com/featured_blog_images/5001516.webp" medium="image"></media:content>
            	</item>
	</channel>
</rss>
