<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	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>Driftsättning och CI/CD &#8211; Node Nordic &#8211; AI Konsult för företag</title>
	<atom:link href="https://nodenordic.se/function/driftsattning-och-ci-cd/feed/" rel="self" type="application/rss+xml" />
	<link>https://nodenordic.se</link>
	<description>Vi guidar er från AI-strategi och pilot till färdig implementation och skalning.</description>
	<lastBuildDate>Fri, 23 Jan 2026 02:50:32 +0000</lastBuildDate>
	<language>sv-SE</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.1</generator>

<image>
	<url>https://nodenordic.se/wp-content/uploads/2025/12/cropped-icon-32x32.png</url>
	<title>Driftsättning och CI/CD &#8211; Node Nordic &#8211; AI Konsult för företag</title>
	<link>https://nodenordic.se</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Bygg skiktade API-rate limits med AI-prompt</title>
		<link>https://nodenordic.se/prompts/bygg-skiktade-api-rate-limits-med-ai-prompt/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=bygg-skiktade-api-rate-limits-med-ai-prompt</link>
		
		<dc:creator><![CDATA[Rickard Andersson]]></dc:creator>
		<pubDate>Fri, 23 Jan 2026 02:50:32 +0000</pubDate>
				<category><![CDATA[prompts]]></category>
		<guid isPermaLink="false">https://nodenordic.se/?p=5001441</guid>

					<description><![CDATA[<p>Skrapare överbelastar ditt API. En vass AI-prompt som designar skiktade rate limits med kod, 429-hantering, telemetri, tester och utrullning.</p>
<p>&lt;p&gt;The post <a rel="nofollow" href="https://nodenordic.se/prompts/bygg-skiktade-api-rate-limits-med-ai-prompt/">Bygg skiktade API-rate limits med AI-prompt</a> first appeared on <a rel="nofollow" href="https://nodenordic.se">Node Nordic - AI Konsult för företag</a>.&lt;/p&gt;</p>
]]></description>
										<content:encoded><![CDATA[<!-- FOCUS_KEYWORD: API rate limits -->
<div class="hook-introduction">

<p>Ditt API fungerar bra. Tills det inte gör det. En scraper träffar en enda endpoint, gör aggressiva retries, roterar IP-adresser och plötsligt ser legitima användare timeouts, högre latens och en flod av ”varför är det här trasigt?”-meddelanden.</p>



<p>Den här prompten för <strong>API rate limits</strong> är byggd för <strong>backendingenjörer</strong> som behöver en produktionsredo throttling-plan utan veckor av trial-and-error, <strong>plattformansvariga</strong> som vill stoppa missbrukstrafik utan att straffa power users och <strong>DevOps/SRE-team</strong> som måste lägga till synlighet, larm och säkra utrullningar innan nästa spike. Resultatet är en driftsättningsbar blueprint: lager av IP- + identitetskontroller, alternativ för lagringsbackend, kodexempel i middleware-stil, vägledning för 429 + Retry-After, telemetri, tester och en checklista för utrullning med låg risk.</p>

</div>

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

<h2 class="wp-block-heading">Vad gör den här AI-prompten och när ska du använda den?</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">Vad den här prompten gör</th>
      <th scope="col">När du ska använda den här prompten</th>
      <th scope="col">Vad du får</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <ul class="automation-list">
          <li>Den modellerar sannolika missbruksvägar (bursts, retry-stormar, credential stuffing, IP-rotation) och omvandlar dem till konkreta rate-limit-regler.</li>
          <li>Den designar lagerindelad throttling med minst två oberoende enforcement-lager (IP-baserat plus identitetsbaserat), inklusive vägledning för oautentiserad trafik.</li>
          <li>Den specificerar skalbara mönster för lagring av state för räknare och tidsfönster, från lokalt minne till delad cache och distribuerade backends.</li>
          <li>Den genererar kodorienterade exempel i middleware-stil som du kan anpassa till din stack, samtidigt som kärnupplägget är ramverksagnostiskt.</li>
          <li>Den definierar operativ synlighet: loggar, mätvärden, dashboards, larm och vilka signaler du ska bevaka när angripare ändrar taktik.</li>
       </ul>
      </td>
      <td>
        <ul class="results-list">
          <li>Du ser plötsliga 429:or, timeouts eller förhöjd p95-latens vid trafikspikar och behöver skydd utan driftstopp.</li>
          <li>Scrapers tömmer kvoter eller driver upp infra-kostnader, särskilt på endpoints för ”list”, ”search”, ”export” eller ”pricing”.</li>
          <li>Du har autentisering för vissa routes men stödjer också publika endpoints, och du behöver rimliga regler för båda.</li>
          <li>Angripare rundar naiva IP-begränsningar genom att rotera adresser, distribuera requests eller missbruka retry-beteende.</li>
          <li>Du ska snart lansera, bli uppmärksammad eller öppna ett integrationsprogram, och du vill ha skyddsräcken innan tillväxten stresstestar dig.</li>
        </ul>
      </td>
       <td>
         <ul class="deliverables-list">
           <li>En lagerindelad rate-limit-blueprint med minst 2 enforcement-lager plus ett fallback-beteende för edge cases.</li>
           <li>Policyförslag per endpoint (exempel: burst- kontra uthålliga limits) med en kort motivering för varje.</li>
           <li>Middleware/pseudokod som är redo att anpassa och som visar request-keying, uppdatering av räknare och konsekvent utvärdering av limits.</li>
           <li>Ett 429-svarskontrakt inklusive vägledning för Retry-After och klientsäker feltext som inte läcker intern information.</li>
           <li>En validerings- och utrullningsplan: testmatris, upplägg för lastsimulering och en steg-för-steg-checklista för stegvis driftsättning.</li>
         </ul>
       </td>
    </tr>
  </tbody>
</table>

</div>

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

<h2 class="wp-block-heading">Hela AI-prompten: generator för lagerindelad blueprint för API rate-limiting</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">
                                    Steg 1: Anpassa prompten med din information
                            </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>Återställ</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>Anpassa och kopiera hela prompten</span>
                </button>
            </div>
        </div>

        <!-- Customize the Prompt Section -->
                    <div class="prompt-customize-section">
                <span class="customize-title">Anpassa prompten</span>
                <p class="customize-subtitle">Fyll i fälten nedan för att anpassa prompten efter dina behov.</p>
                <table class="customize-table">
                    <thead>
                        <tr>
                            <th>Variabel</th>
                            <th>Vad du ska ange</th>
                            <th>Anpassa prompten</th>
                        </tr>
                    </thead>
                    <tbody>
                                                    <tr>
                                <td class="var-name"><code>[FORMAT]</code></td>
                                <td class="var-desc">
                                    Ange i vilket format leveransen ska presenteras, till exempel text, diagram eller kodutdrag.                                    <div class="var-example">Till exempel: "Ett Markdown-dokument med inbäddade kodexempel och arkitekturdiagram."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[FORMAT]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[KONTEXT]</code></td>
                                <td class="var-desc">
                                    Ge bakgrundsinformation om API:et, inklusive syfte, typiska användningsmönster och trafikegenskaper.                                    <div class="var-example">Till exempel: "Ett offentligt API för en social medieplattform med 10 miljoner dagligt aktiva användare, med frekventa anrop för både hämtning och publicering av data."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[KONTEXT]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[BRANSCH]</code></td>
                                <td class="var-desc">
                                    Beskriv branschen eller domänen som API:et betjänar, eftersom det kan påverka missbruksmönster och strategier för rate limiting.                                    <div class="var-example">Till exempel: "E-handelsplattform med API:er för produktsök, lageruppdateringar och hantering av utcheckning."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[BRANSCH]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[HUVUDUTMANING]</code></td>
                                <td class="var-desc">
                                    Förklara det huvudsakliga problemet eller hotet som rate limiting-lösningen behöver hantera, till exempel trafiktoppar eller riktat missbruk.                                    <div class="var-example">Till exempel: "Att begränsa credential stuffing-attacker och förhindra oautentiserad scraping i samband med flash sales-kampanjer."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[HUVUDUTMANING]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[TIDSRAM]</code></td>
                                <td class="var-desc">
                                    Ange den förväntade tidsplanen för att leverera lösningen, inklusive eventuella milstolpar eller deadlines.                                    <div class="var-example">Till exempel: "Två månader för full implementering, inklusive testning och stegvis utrullning."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[TIDSRAM]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </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">Anpassa prompten nu</span>

                </button>
            </div>
        
        <!-- Full Prompt Code Header -->
                    <div class="prompt-code-header">
                <span class="prompt-code-title">
                    Steg 2: Kopiera prompten
                </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>Återställ</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>Kopiera hela prompten</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">MÅL</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">BEGRÄNSNINGAR</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">Vad detta INTE är (avgränsningar)</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 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">Hantering av edge cases</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></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">OUTPUTSPECIFIKATION</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 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 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">KVALITETSKONTROLLER</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;">
                ## MÅL
Skapa en produktionsredo ritning och implementationsguide för API-rate limiting som klarar trafiktoppar och aktivt missbruk. Leveransen måste täcka lagerbaserad throttling (IP + identitet), skalbar tillståndslagring, säker klientkommunikation och operativ insyn—utan att försämra upplevelsen för legitima användare.

## PERSONA
Agera som en erfaren API-försvarsingenjör som har designat anti-missbrukskontroller för högvolymsplattformar i enterprise-klass. Du prioriterar modellering av angriparbeteenden, adaptiva kontroller och praktiska implementationer som överlever verklig belastning och undvikandetaktiker. Skriv med skarp, ingenjörsfokuserad tydlighet.

## BEGRÄNSNINGAR
- Ge konkreta, driftsättningsbara mönster; undvik generiska råd i stil med ”säkra ditt API”.
- Använd flerskiktsskydd (minst två oberoende enforcement-lager plus ett fallback-beteende).
- Inkludera både IP-baserad och användar-/identitetsbaserad throttling, med vägledning för oautentiserad trafik.
- Erbjud ramverksagnostiska koncept plus kodorienterade middleware-exempel anpassade till den angivna stacken.
- Rekommendera state backends som passar skalan (lokalt minne, delad cache, distribuerade alternativ).
- 429-hantering måste inkludera **Retry-After** och klientsäker meddelandetext som inte läcker interna detaljer.
- Inkludera plan för loggning, övervakning och larm med fokus på att upptäcka föränderliga missbruksmönster.
- Adressera prestandaöverhead och tuning.
- Inkludera en valideringsplan (tester + lastsimulering) och en utrullningsplan med låg risk.

### Vad detta INTE är (avgränsningar)
- Inte en fullständig rapport för val av WAF/CDN-leverantör.
- Inte en komplett omdesign av IAM/auth (täck endast identitetssignaler som behövs för rate limiting).
- Inte malware-forensik eller incident response-playbooks utöver loggning/larm som behövs för throttling.
- Inte juridisk vägledning kring compliance; endast tekniska åtgärder mappade till angivna krav.

## PROCESS
1. **Föranalys (krävs):** Återge din förståelse av API-scenariot, sannolika missbruksformer och framgångskriterier baserat på de givna inputsen. Lista eventuella antaganden.
2. **Hot-till-kontroll-mappning:** Översätt de angivna hoten till specifika throttles (burst, sustained, endpoint-känsligt, credential stuffing-liknande mönster, scraping-heuristiker).
3. **Lagerbaserad design:** Specificera minst:
   - Edge- eller gateway-kontroll (grov begränsning)
   - Applikations-middleware-kontroll (finmaskig begränsning)
   - Ett fallback-/containment-läge när beroenden fallerar (t.ex. lagringsavbrott)
4. **Byggplan för middleware:** Ge implementationsmönster för:
   - IP-nyckling (inklusive vägledning för hantering av proxy/CDN-headers)
   - Användar-/identitetsnyckling (user ID, API-nyckel, session, device fingerprint där lämpligt)
   - Kombinerade nycklar (t.ex. per-användare-per-endpoint) och endpoint-viktning
5. **Beslutsunderlag för state storage:** Rekommendera backend(s) med tydliga trösklar för när man ska gå från in-process till delade/distribuerade stores. Inkludera installations-/setup-noteringar.
6. **Klientresponsbeteende:** Definiera 429-struktur, headers och meddelandemallar som hjälper klienter att återhämta sig utan att avslöja arkitektur.
7. **Observability:** Definiera loggschema, metrics, dashboards och larmregler; inkludera exempel på queries/mönster för att upptäcka hur missbruk utvecklas.
8. **Prestanda &amp; tuning:** Lista optimeringar (hot paths, sampling, async logging, lokala caches, Lua/scripts om Redis, etc.).
9. **Validering:** Ge enhets-/integrationstester, adversarial testfall och lasttester. Inkludera acceptanskriterier.
10. **Utrullning:** Ge en stegvis driftsättningsplan över **4–6 faser** med övervakningsgrindar och rollback-triggers.

### Hantering av edge cases
- Om någon input saknas eller är tvetydig, ställ först riktade förtydligande frågor. Om användaren ändå begär omedelbar output, fortsätt med rimliga standardval och märk dem tydligt som antaganden.
- Om stacken inte kan stödja en rekommenderad taktik, ge ett alternativ som bevarar samma säkerhetsintention.
- Om strikt begränsning krockar med prestandakrav, föreslå adaptiva gränser och ”grace”-mekanismer för betrodda klienter.

## INPUTS
- **Applikationstyp:** [FORMAT]
- **Trafikprofil (baseline + peak + spike-form):** [KONTEXT]
- **Teknikstack (ramverk, runtime, infra, DB):** [BRANSCH]
- **Säkerhetskrav (hot + compliance):** [HUVUDUTMANING]
- **Prestandabegränsningar (latens/throughput SLO:er):** [TIDSRAM]

## OUTPUTSPECIFIKATION
Använd markdown-rubriker och tillhandahåll avsnitt i exakt denna ordning:

1. **Rate limiting-arkitektur**
   - {Threat Model Summary}
   - {Layered Controls Overview}
   - {Keying Strategy} (IP, user, combined, endpoint sensitivity)
   - {Adaptive Rules} (burst vs sustained, anomaly triggers)

2. **Middleware-implementation**
   - {Middleware Approach} (var den körs, hur den komponeras)
   - {IP Throttle Example} (kodorienterad pseudokod eller stack-specifikt exempel)
   - {User/Identity Throttle Example}
   - {Composite &amp; Endpoint-Weighted Limits}
   - {Failure Modes &amp; Fallback Behavior}

3. **State storage &amp; konfiguration**
   - {When In-Memory Is Acceptable}
   - {When Shared/Distributed Storage Is Required}
   - {Redis/Upstash-Style Setup Notes}
   - {Key Design, TTLs, Atomicity Notes}

4. **429-svar &amp; klientvägledning**
   - {Response Schema}
   - {Retry-After Strategy}
   - {Safe Message Examples} (omskrivna, icke-avslöjande)
   - {Handling for Auth vs Unauth Clients}

5. **Loggning, övervakning och larm**
   - {Log Fields &amp; Structure}
   - {Metrics to Emit}
   - {Dashboards}
   - {Alert Rules}
   - {Abuse Pattern Detection Examples}

6. **Prestandaoptimering**
   - {Hot Path Optimizations}
   - {Caching &amp; Sampling Guidance}
   - {Distributed Store Latency Mitigations}

7. **Testning &amp; validering**
   - {Unit Tests}
   - {Integration Tests}
   - {Adversarial Scenarios}
   - {Load/Spike Tests}
   - {Pass/Fail Criteria}

8. **Driftsättning &amp; gradvis utrullning**
   - {Phase Plan}
   - {Monitoring Gates}
   - {Rollback Triggers}
   - {Post-Launch Tuning Loop}

## KVALITETSKONTROLLER
Innan du finaliserar, verifiera:
- Planen inkluderar minst två enforcement-lager plus ett definierat fallback-läge.
- Både IP-baserade och identitetsbaserade throttles implementeras med tydliga nyckeldefinitioner.
- 429-hantering inkluderar Retry-After och klientsäker formulering som undviker att läcka interna detaljer.
- Lagringsrekommendationer är kopplade till den angivna trafikskalan och prestandabegränsningarna.
- Test- och utrullningssteg är handlingsbara och inkluderar mätbara acceptanskriterier.            </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">Kopiera hela prompten</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 span {
        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 !important;
    }


    .prompt-cta-copy span {
        background: #3a3a3a;
        color: #fff !important;
    }


    .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 !important;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .copy-customized-btn span {
        color: #fff !important
    }

    .copy-customized-text span {
        color: #fff !important
    }

    .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;
        color: #fff !important;

    }

    .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 = 'Kopierad!';
            });

            setTimeout(() => {
                copyButtons.forEach(btn => {
                    btn.classList.remove('copied');
                    const textSpan = btn.querySelector('span');
                    if (textSpan) textSpan.textContent = 'Kopiera hela prompten';
                });
            }, 2000);
        }).catch(err => {
            console.error('Failed to copy:', err);
        });
    }

    // Store original prompt for customization
    const originalPrompt = "## M\u00c5L\r\nSkapa en produktionsredo ritning och implementationsguide f\u00f6r API-rate limiting som klarar trafiktoppar och aktivt missbruk. Leveransen m\u00e5ste t\u00e4cka lagerbaserad throttling (IP + identitet), skalbar tillst\u00e5ndslagring, s\u00e4ker klientkommunikation och operativ insyn\u2014utan att f\u00f6rs\u00e4mra upplevelsen f\u00f6r legitima anv\u00e4ndare.\r\n\r\n## PERSONA\r\nAgera som en erfaren API-f\u00f6rsvarsingenj\u00f6r som har designat anti-missbrukskontroller f\u00f6r h\u00f6gvolymsplattformar i enterprise-klass. Du prioriterar modellering av angriparbeteenden, adaptiva kontroller och praktiska implementationer som \u00f6verlever verklig belastning och undvikandetaktiker. Skriv med skarp, ingenj\u00f6rsfokuserad tydlighet.\r\n\r\n## BEGR\u00c4NSNINGAR\r\n- Ge konkreta, drifts\u00e4ttningsbara m\u00f6nster; undvik generiska r\u00e5d i stil med \u201ds\u00e4kra ditt API\u201d.\r\n- Anv\u00e4nd flerskiktsskydd (minst tv\u00e5 oberoende enforcement-lager plus ett fallback-beteende).\r\n- Inkludera b\u00e5de IP-baserad och anv\u00e4ndar-\/identitetsbaserad throttling, med v\u00e4gledning f\u00f6r oautentiserad trafik.\r\n- Erbjud ramverksagnostiska koncept plus kodorienterade middleware-exempel anpassade till den angivna stacken.\r\n- Rekommendera state backends som passar skalan (lokalt minne, delad cache, distribuerade alternativ).\r\n- 429-hantering m\u00e5ste inkludera **Retry-After** och klients\u00e4ker meddelandetext som inte l\u00e4cker interna detaljer.\r\n- Inkludera plan f\u00f6r loggning, \u00f6vervakning och larm med fokus p\u00e5 att uppt\u00e4cka f\u00f6r\u00e4nderliga missbruksm\u00f6nster.\r\n- Adressera prestanda\u00f6verhead och tuning.\r\n- Inkludera en valideringsplan (tester + lastsimulering) och en utrullningsplan med l\u00e5g risk.\r\n\r\n### Vad detta INTE \u00e4r (avgr\u00e4nsningar)\r\n- Inte en fullst\u00e4ndig rapport f\u00f6r val av WAF\/CDN-leverant\u00f6r.\r\n- Inte en komplett omdesign av IAM\/auth (t\u00e4ck endast identitetssignaler som beh\u00f6vs f\u00f6r rate limiting).\r\n- Inte malware-forensik eller incident response-playbooks ut\u00f6ver loggning\/larm som beh\u00f6vs f\u00f6r throttling.\r\n- Inte juridisk v\u00e4gledning kring compliance; endast tekniska \u00e5tg\u00e4rder mappade till angivna krav.\r\n\r\n## PROCESS\r\n1. **F\u00f6ranalys (kr\u00e4vs):** \u00c5terge din f\u00f6rst\u00e5else av API-scenariot, sannolika missbruksformer och framg\u00e5ngskriterier baserat p\u00e5 de givna inputsen. Lista eventuella antaganden.\r\n2. **Hot-till-kontroll-mappning:** \u00d6vers\u00e4tt de angivna hoten till specifika throttles (burst, sustained, endpoint-k\u00e4nsligt, credential stuffing-liknande m\u00f6nster, scraping-heuristiker).\r\n3. **Lagerbaserad design:** Specificera minst:\r\n   - Edge- eller gateway-kontroll (grov begr\u00e4nsning)\r\n   - Applikations-middleware-kontroll (finmaskig begr\u00e4nsning)\r\n   - Ett fallback-\/containment-l\u00e4ge n\u00e4r beroenden fallerar (t.ex. lagringsavbrott)\r\n4. **Byggplan f\u00f6r middleware:** Ge implementationsm\u00f6nster f\u00f6r:\r\n   - IP-nyckling (inklusive v\u00e4gledning f\u00f6r hantering av proxy\/CDN-headers)\r\n   - Anv\u00e4ndar-\/identitetsnyckling (user ID, API-nyckel, session, device fingerprint d\u00e4r l\u00e4mpligt)\r\n   - Kombinerade nycklar (t.ex. per-anv\u00e4ndare-per-endpoint) och endpoint-viktning\r\n5. **Beslutsunderlag f\u00f6r state storage:** Rekommendera backend(s) med tydliga tr\u00f6sklar f\u00f6r n\u00e4r man ska g\u00e5 fr\u00e5n in-process till delade\/distribuerade stores. Inkludera installations-\/setup-noteringar.\r\n6. **Klientresponsbeteende:** Definiera 429-struktur, headers och meddelandemallar som hj\u00e4lper klienter att \u00e5terh\u00e4mta sig utan att avsl\u00f6ja arkitektur.\r\n7. **Observability:** Definiera loggschema, metrics, dashboards och larmregler; inkludera exempel p\u00e5 queries\/m\u00f6nster f\u00f6r att uppt\u00e4cka hur missbruk utvecklas.\r\n8. **Prestanda & tuning:** Lista optimeringar (hot paths, sampling, async logging, lokala caches, Lua\/scripts om Redis, etc.).\r\n9. **Validering:** Ge enhets-\/integrationstester, adversarial testfall och lasttester. Inkludera acceptanskriterier.\r\n10. **Utrullning:** Ge en stegvis drifts\u00e4ttningsplan \u00f6ver **4\u20136 faser** med \u00f6vervakningsgrindar och rollback-triggers.\r\n\r\n### Hantering av edge cases\r\n- Om n\u00e5gon input saknas eller \u00e4r tvetydig, st\u00e4ll f\u00f6rst riktade f\u00f6rtydligande fr\u00e5gor. Om anv\u00e4ndaren \u00e4nd\u00e5 beg\u00e4r omedelbar output, forts\u00e4tt med rimliga standardval och m\u00e4rk dem tydligt som antaganden.\r\n- Om stacken inte kan st\u00f6dja en rekommenderad taktik, ge ett alternativ som bevarar samma s\u00e4kerhetsintention.\r\n- Om strikt begr\u00e4nsning krockar med prestandakrav, f\u00f6resl\u00e5 adaptiva gr\u00e4nser och \u201dgrace\u201d-mekanismer f\u00f6r betrodda klienter.\r\n\r\n## INPUTS\r\n- **Applikationstyp:** [FORMAT]\r\n- **Trafikprofil (baseline + peak + spike-form):** [KONTEXT]\r\n- **Teknikstack (ramverk, runtime, infra, DB):** [BRANSCH]\r\n- **S\u00e4kerhetskrav (hot + compliance):** [HUVUDUTMANING]\r\n- **Prestandabegr\u00e4nsningar (latens\/throughput SLO:er):** [TIDSRAM]\r\n\r\n## OUTPUTSPECIFIKATION\r\nAnv\u00e4nd markdown-rubriker och tillhandah\u00e5ll avsnitt i exakt denna ordning:\r\n\r\n1. **Rate limiting-arkitektur**\r\n   - {Threat Model Summary}\r\n   - {Layered Controls Overview}\r\n   - {Keying Strategy} (IP, user, combined, endpoint sensitivity)\r\n   - {Adaptive Rules} (burst vs sustained, anomaly triggers)\r\n\r\n2. **Middleware-implementation**\r\n   - {Middleware Approach} (var den k\u00f6rs, hur den komponeras)\r\n   - {IP Throttle Example} (kodorienterad pseudokod eller stack-specifikt exempel)\r\n   - {User\/Identity Throttle Example}\r\n   - {Composite & Endpoint-Weighted Limits}\r\n   - {Failure Modes & Fallback Behavior}\r\n\r\n3. **State storage & konfiguration**\r\n   - {When In-Memory Is Acceptable}\r\n   - {When Shared\/Distributed Storage Is Required}\r\n   - {Redis\/Upstash-Style Setup Notes}\r\n   - {Key Design, TTLs, Atomicity Notes}\r\n\r\n4. **429-svar & klientv\u00e4gledning**\r\n   - {Response Schema}\r\n   - {Retry-After Strategy}\r\n   - {Safe Message Examples} (omskrivna, icke-avsl\u00f6jande)\r\n   - {Handling for Auth vs Unauth Clients}\r\n\r\n5. **Loggning, \u00f6vervakning och larm**\r\n   - {Log Fields & Structure}\r\n   - {Metrics to Emit}\r\n   - {Dashboards}\r\n   - {Alert Rules}\r\n   - {Abuse Pattern Detection Examples}\r\n\r\n6. **Prestandaoptimering**\r\n   - {Hot Path Optimizations}\r\n   - {Caching & Sampling Guidance}\r\n   - {Distributed Store Latency Mitigations}\r\n\r\n7. **Testning & validering**\r\n   - {Unit Tests}\r\n   - {Integration Tests}\r\n   - {Adversarial Scenarios}\r\n   - {Load\/Spike Tests}\r\n   - {Pass\/Fail Criteria}\r\n\r\n8. **Drifts\u00e4ttning & gradvis utrullning**\r\n   - {Phase Plan}\r\n   - {Monitoring Gates}\r\n   - {Rollback Triggers}\r\n   - {Post-Launch Tuning Loop}\r\n\r\n## KVALITETSKONTROLLER\r\nInnan du finaliserar, verifiera:\r\n- Planen inkluderar minst tv\u00e5 enforcement-lager plus ett definierat fallback-l\u00e4ge.\r\n- B\u00e5de IP-baserade och identitetsbaserade throttles implementeras med tydliga nyckeldefinitioner.\r\n- 429-hantering inkluderar Retry-After och klients\u00e4ker formulering som undviker att l\u00e4cka interna detaljer.\r\n- Lagringsrekommendationer \u00e4r kopplade till den angivna trafikskalan och prestandabegr\u00e4nsningarna.\r\n- Test- och utrullningssteg \u00e4r handlingsbara och inkluderar m\u00e4tbara acceptanskriterier.";
    const variables = ["[FORMAT]","[KONTEXT]","[BRANSCH]","[HUVUDUTMANING]","[TIDSRAM]"];
    // 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 = 'Återställd!';
            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">Proffstips för bättre resultat från AI-prompten</h2>



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

<li><strong>Lista dina ”dyra endpoints” först.</strong> Ge AI:n en liten tabell med routes och varför de är kostsamma (DB-fanout, tredjepartsanrop, exporter). Exempel på följdfråga: ”Här är 8 endpoints; markera vilka som behöver burst-limits kontra uthålliga limits, och föreslå olika tidsfönster för varje.”</li>


<li><strong>Beskriv missbrukstrafiken som en berättelse.</strong> Lägg till vad du observerade: user agents, referrers, IP-ASN, request-mönster, retries och peak RPS. Fråga sedan: ”Baserat på det här mönstret, vilka nycklar ska vi rate-limita på (IP, token, konto, org, API-nyckel), och vilka kringgåenden ska vi förvänta oss härnäst?”</li>

<li><strong>Kräv explicita 429-kontrakt.</strong> Många team glömmer klientupplevelsen. Be modellen att skriva ut exakt JSON-body, headers (inklusive Retry-After) och vilka fält som är säkra: ”Skriv en 429-responsspec för publika endpoints kontra autentiserade endpoints; undvik att avslöja interna trösklar.”</li>


<li><strong>Iterera på tuning, inte bara regler.</strong> Efter första passet, skärp med en kontrollerad prompt: ”Gör nu alternativ A mer aggressivt för anonym trafik, men håll autentiserade power users under 1 % falska positiva. Förklara tradeoffs i 6 punkter.”</li>


<li><strong>Kombinera det med din observability-verklighet.</strong> Berätta vad du faktiskt använder (CloudWatch, Datadog, Grafana, ELK) och be om konkreta metriknamn och larmtrösklar. En bra följdfråga: ”Föreslå 10 mätvärden, 5 dashboards och 6 larm; inkludera vad varje larm betyder och den troliga nästa åtgärden.”</li>

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

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

<!-- wp:paragraph -->
<p>När du väl har designat lagerindelad throttling hjälper de här relaterade promptarna dig att operationalisera arbetet över team, process och kapacitet.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Om du också behöver standardisera hur ingenjörsarbetet rör sig från ”inkommande” till ”klart”, hjälper mognadsramverket i <a href="https://nodenordic.se/prompts/gor-en-mognadsanalys-av-uppgiftshantering-med-ai-prompt">Gör en mognadsanalys av uppgiftshantering med AI-prompt</a> dig att upptäcka flaskhalsar som gör utrullningar av rate limits riskabla (oklart ägarskap, saknade change windows, svaga kontroller efter driftsättning). Den passar bra när problemet inte bara är missbruk, utan långsam exekvering och inkonsekvent uppföljning.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>För team som jobbar med löpande plattformsförstärkning är <a href="https://nodenordic.se/prompts/bygg-en-adaptiv-plan-for-en-aktivitetshanterare-med-ai-prompt">Bygg en adaptiv plan för en aktivitetshanterare med AI-prompt</a> användbar direkt efter att du har genererat din throttling-blueprint. Du kan göra om utrullningsplanen till ett levande system: återkommande tuning-uppgifter, dashboard-granskningar och retrospektiver kring ”attackmönster” som inte glöms bort.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>När rate limits berör flera grupper (API, SRE, support och ibland sälj) blir misskommunikation en incident i sig. <a href="https://nodenordic.se/prompts/skapa-en-spelbok-for-uppgiftsoverlamning">Skapa en spelbok för uppgiftsöverlämning</a> hjälper dig att definiera vem som äger policyändringar, vem som hanterar kundeskaleringar kring 429:or och vad som måste dokumenteras innan du slår på striktare regler.</p>
<!-- /wp:paragraph -->

<br>

<!-- wp:paragraph -->
<p>Snabbreferens:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li><a href="https://nodenordic.se/prompts/gor-en-mognadsanalys-av-uppgiftshantering-med-ai-prompt">Gör en mognadsanalys av uppgiftshantering med AI-prompt</a>: Identifiera processglapp som blockerar säkra utrullningar.</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="https://nodenordic.se/prompts/bygg-en-adaptiv-plan-for-en-aktivitetshanterare-med-ai-prompt">Bygg en adaptiv plan för en aktivitetshanterare med AI-prompt</a>: Gör planen till återkommande driftuppgifter.</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="https://nodenordic.se/prompts/bygg-en-plan-for-talent-management-med-en-ai-prompt">Bygg en plan för talent management med en AI-prompt</a>: Bemanna ägarskap för arbete med plattformens driftsäkerhet.</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="https://nodenordic.se/prompts/bygg-en-ritning-for-lagerstyrning-med-denna-ai-prompt">Bygg en ritning för lagerstyrning med denna AI-prompt</a>: Förbättra spårningen av ”rate-limit-beroenden” som tillgångar.</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="https://nodenordic.se/prompts/skapa-en-spelbok-for-uppgiftsoverlamning">Skapa en spelbok för uppgiftsöverlämning</a>: Förhindra tapp i överlämningar mellan team.</li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->
</div>

<div class="faq-section">
<!-- wp:heading {"level":2} -->
<h2 class="wp-block-heading">Vanliga frågor</h2>
<!-- /wp:heading -->

<div class="faq-item">
<span class="question">Vilka roller har mest nytta av den här AI-prompten för API rate limits?</span>
<!-- wp:paragraph -->
<p class="answer"><strong>Backendingenjörer</strong> använder den för att omvandla diffusa ”lägg till rate limiting”-ärenden till en lagerindelad policy plus implementationsdetaljer för middleware. <strong>Plattform-/SRE-ansvariga</strong> förlitar sig på den för telemetri, larm och utrullningssteg med låg risk som minskar överraskningar i produktion. <strong>API-produktchefer</strong> får en tydligare specifikation för klientupplevelsen (429 + Retry-After, säkra meddelanden) så att integrationer går sönder mer sällan. <strong>Säkerhetsingenjörer</strong> använder den för att koppla angriparbeteenden till kontroller och planera adaptiv tuning i takt med att missbruket utvecklas.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Vilka branscher får mest värde av den här AI-prompten för API rate limits?</span>
<!-- wp:paragraph -->
<p class="answer"><strong>SaaS-bolag</strong> använder den för att skydda multi-tenant-API:er där en enda högljudd kund (eller en läckt token) kan försämra upplevelsen för alla. Den hjälper att separera limits per konto från limits per IP och undviker att bestraffa kontors-NAT-trafik. <strong>E-handel och marknadsplatser</strong> använder den för att avskräcka scraping av priser, lager och sökresultat, särskilt runt kampanjer när trafikspikar är normala men missbruk också ökar. <strong>Fintech- och betalningsteam</strong> använder den för att tygla retry-stormar kopplade till inloggning och för att throttla känsliga endpoints utan att läcka trösklar till angripare. <strong>Media- och dataleverantörer</strong> får värde eftersom innehåll och dataset lockar automatiserad extraktion, så lagerindelad identitets- + IP-throttling plus övervakning är avgörande.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Varför ger grundläggande AI-prompter för att designa API rate limits svaga resultat?</span>
<!-- wp:paragraph -->
<p class="answer">En typisk prompt som ”Skriv en rate limiting-strategi för mitt API” misslyckas eftersom den: saknar modellering av angriparbeteenden (bursts, IP-rotation, retries) så limits blir lätta att kringgå, inte ger någon plan för lagerindelad enforcement (IP plus identitet plus fallback) och slutar som en enda skör regel, ignorerar avvägningar för state-lagring så den föreslår mönster som skapar fel under last eller mellan instanser, ger generiska 429-råd i stället för ett klientsäkert kontrakt med Retry-After, och missar operativ synlighet så du inte kan tunna limits säkert efter lansering.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Kan jag anpassa den här prompten för API rate limits till min specifika situation?</span>
<!-- wp:paragraph -->
<p class="answer">Ja. Snabbaste sättet är att lägga till din stack (språk, ramverk, gateway), din trafikprofil (genomsnittlig/peak RPS, burstighet) och en kort lista med endpoints med ”kostnads”-noteringar så att policyn kan variera per route. Inkludera identitetssignaler du redan har (API-nyckel, användar-ID, org-ID) och förtydliga hur oautentiserad trafik ser ut (publika endpoints, onboarding, webhooks). Ställ sedan en riktad följdfråga som: ”Skriv om blueprinten för Node/Express bakom NGINX, med Redis-räknare, och föreslå per-endpoint-limits för /search, /export, /login och /webhook.”</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Vilka är de vanligaste misstagen när man använder den här prompten för API rate limits?</span>
<!-- wp:paragraph -->
<p class="answer">Det största misstaget är att lämna missbruksscenariot för vagt — i stället för ”vi blir scrapade”, skriv ”/search får bursts på 300 RPS i 2–3 minuter från roterande residential IPs, följt av en 10x retry-spike på 5xx.” Ett annat vanligt fel är att inte lista identitetsnycklar; ”autentiserade användare” är svagt jämfört med ”rate-limita per org_id, sedan user_id, med API-nyckel som fallback.” Folk glömmer också att specificera vilka endpoints som är publika kontra autentiserade, vilket leder till policyer som blockerar onboarding-flöden. Till sist utelämnar team ofta utrullningsbegränsningar (feature flags, procentuell utrullning, shadow mode), så planen är korrekt på papper men riskabel att driftsätta.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Vem ska INTE använda den här prompten för API rate limits?</span>
<!-- wp:paragraph -->
<p class="answer">Den här prompten är inte idealisk för team som vill ha en copy-paste-snutt utan någon tuning, eftersom rate limiting bara fungerar bra när den speglar dina routes, tenants och din trafikprofil. Den passar inte heller om du inte kan ändra applikationskod eller edge-konfiguration alls; då kan du i stället behöva en hanterad gateway/WAF-lösning. Och om du inte har identifierat dina centrala identitetssignaler (API-nycklar, användar-ID:n, org-ID:n) får du en svagare plan tills den grunden finns på plats.</p>
<!-- /wp:paragraph -->
</div>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Vilka roller har mest nytta av den här AI-prompten för API rate limits?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Backendingenjörer använder den för att omvandla diffusa ”lägg till rate limiting”-ärenden till en lagerindelad policy plus implementationsdetaljer för middleware. Plattform-/SRE-ansvariga förlitar sig på den för telemetri, larm och utrullningssteg med låg risk som minskar överraskningar i produktion. API-produktchefer får en tydligare specifikation för klientupplevelsen (429 + Retry-After, säkra meddelanden) så att integrationer går sönder mer sällan. Säkerhetsingenjörer använder den för att koppla angriparbeteenden till kontroller och planera adaptiv tuning i takt med att missbruket utvecklas."
      }
    },
    {
      "@type": "Question",
      "name": "Vilka branscher får mest värde av den här AI-prompten för API rate limits?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "SaaS-bolag använder den för att skydda multi-tenant-API:er där en enda högljudd kund (eller en läckt token) kan försämra upplevelsen för alla. Den hjälper att separera limits per konto från limits per IP och undviker att bestraffa kontors-NAT-trafik. E-handel och marknadsplatser använder den för att avskräcka scraping av priser, lager och sökresultat, särskilt runt kampanjer när trafikspikar är normala men missbruk också ökar. Fintech- och betalningsteam använder den för att tygla retry-stormar kopplade till inloggning och för att throttla känsliga endpoints utan att läcka trösklar till angripare. Media- och dataleverantörer får värde eftersom innehåll och dataset lockar automatiserad extraktion, så lagerindelad identitets- + IP-throttling plus övervakning är avgörande."
      }
    },
    {
      "@type": "Question",
      "name": "Varför ger grundläggande AI-prompter för att designa API rate limits svaga resultat?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "En typisk prompt som ”Skriv en rate limiting-strategi för mitt API” misslyckas eftersom den: saknar modellering av angriparbeteenden (bursts, IP-rotation, retries) så limits blir lätta att kringgå, inte ger någon plan för lagerindelad enforcement (IP plus identitet plus fallback) och slutar som en enda skör regel, ignorerar avvägningar för state-lagring så den föreslår mönster som skapar fel under last eller mellan instanser, ger generiska 429-råd i stället för ett klientsäkert kontrakt med Retry-After, och missar operativ synlighet så du inte kan tunna limits säkert efter lansering."
      }
    },
    {
      "@type": "Question",
      "name": "Kan jag anpassa den här prompten för API rate limits till min specifika situation?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Ja. Snabbaste sättet är att lägga till din stack (språk, ramverk, gateway), din trafikprofil (genomsnittlig/peak RPS, burstighet) och en kort lista med endpoints med ”kostnads”-noteringar så att policyn kan variera per route. Inkludera identitetssignaler du redan har (API-nyckel, användar-ID, org-ID) och förtydliga hur oautentiserad trafik ser ut (publika endpoints, onboarding, webhooks). Ställ sedan en riktad följdfråga som: ”Skriv om blueprinten för Node/Express bakom NGINX, med Redis-räknare, och föreslå per-endpoint-limits för /search, /export, /login och /webhook.”"
      }
    },
    {
      "@type": "Question",
      "name": "Vilka är de vanligaste misstagen när man använder den här prompten för API rate limits?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Det största misstaget är att lämna missbruksscenariot för vagt — i stället för ”vi blir scrapade”, skriv ”/search får bursts på 300 RPS i 2–3 minuter från roterande residential IPs, följt av en 10x retry-spike på 5xx.” Ett annat vanligt fel är att inte lista identitetsnycklar; ”autentiserade användare” är svagt jämfört med ”rate-limita per org_id, sedan user_id, med API-nyckel som fallback.” Folk glömmer också att specificera vilka endpoints som är publika kontra autentiserade, vilket leder till policyer som blockerar onboarding-flöden. Till sist utelämnar team ofta utrullningsbegränsningar (feature flags, procentuell utrullning, shadow mode), så planen är korrekt på papper men riskabel att driftsätta."
      }
    },
    {
      "@type": "Question",
      "name": "Vem ska INTE använda den här prompten för API rate limits?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Den här prompten är inte idealisk för team som vill ha en copy-paste-snutt utan någon tuning, eftersom rate limiting bara fungerar bra när den speglar dina routes, tenants och din trafikprofil. Den passar inte heller om du inte kan ändra applikationskod eller edge-konfiguration alls; då kan du i stället behöva en hanterad gateway/WAF-lösning. Och om du inte har identifierat dina centrala identitetssignaler (API-nycklar, användar-ID:n, org-ID:n) får du en svagare plan tills den grunden finns på plats."
      }
    }
  ]
}
</script>
</div>

<div class="closing-section">
<!-- wp:paragraph -->
<p>Missbruk väntar inte på din roadmap. Använd den här prompten för att designa lagerindelade API rate limits som du faktiskt kan driftsätta, övervaka och tunna, klistra sedan in den i ditt arbetsflöde och börja härda redan i dag.</p>
<!-- /wp:paragraph -->
</div><p>&lt;p&gt;The post <a rel="nofollow" href="https://nodenordic.se/prompts/bygg-skiktade-api-rate-limits-med-ai-prompt/">Bygg skiktade API-rate limits med AI-prompt</a> first appeared on <a rel="nofollow" href="https://nodenordic.se">Node Nordic - AI Konsult för företag</a>.&lt;/p&gt;</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Bygg en tokensäker JWT-autentiseringsritning med AI-prompt</title>
		<link>https://nodenordic.se/prompts/bygg-en-tokensaker-jwt-autentiseringsritning-med-ai-prompt/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=bygg-en-tokensaker-jwt-autentiseringsritning-med-ai-prompt</link>
		
		<dc:creator><![CDATA[Rickard Andersson]]></dc:creator>
		<pubDate>Fri, 23 Jan 2026 02:49:32 +0000</pubDate>
				<category><![CDATA[prompts]]></category>
		<guid isPermaLink="false">https://nodenordic.se/?p=5001440</guid>

					<description><![CDATA[<p>Sessionskapningar fortsätter. En vass AI-prompt som designar JWT med HTTP-only-cookies, CSRF-skydd, rotation, övervakning och kod.</p>
<p>&lt;p&gt;The post <a rel="nofollow" href="https://nodenordic.se/prompts/bygg-en-tokensaker-jwt-autentiseringsritning-med-ai-prompt/">Bygg en tokensäker JWT-autentiseringsritning med AI-prompt</a> first appeared on <a rel="nofollow" href="https://nodenordic.se">Node Nordic - AI Konsult för företag</a>.&lt;/p&gt;</p>
]]></description>
										<content:encoded><![CDATA[<!-- FOCUS_KEYWORD: JWT auth blueprint -->

<div class="hook-introduction">

<p>Sessionskapningar fortsätter att hända eftersom många ”JWT-uppsättningar” i tysthet placerar tokens där angripare älskar dem: i webbläsarens lagring, exponerade för XSS, och kopierade in i headers för hand. Sedan bultas refresh-logik på i efterhand, cookie-flaggor blir fel, och du får slumpmässiga utloggningar eller (värre) stulna sessioner som lever länge. Det är rörigt, och det går att undvika.</p>



<p>Den här <strong>JWT-autentiseringsblueprinten</strong> är byggd för <strong>backendutvecklare</strong> som behöver en cookie-baserad JWT-modell med vettiga rotationsregler, <strong>säkerhetsmedvetna tech leads</strong> som städar upp riskfylld tokenhantering inför en revision eller incident, och <strong>startupgrundare</strong> som vill ha autentisering som är ”secure by default” utan att förstöra UX. Resultatet är en produktionsredo blueprint: headers, cookie-inställningar, endpointflöden, stack-specifika kodsnuttar, tester och en incidentplan vid misstänkt kompromettering av inloggningsuppgifter.</p>

</div>

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

<h2 class="wp-block-heading">Vad gör den här AI-prompten och när ska du använda den?</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">Vad den här prompten gör</th>
      <th scope="col">När du ska använda den här prompten</th>
      <th scope="col">Vad du får</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <ul class="automation-list">
          <li>Den designar en cookie-baserad JWT-sessionsarkitektur där tokens aldrig är åtkomliga för JavaScript.</li>
          <li>Den definierar access- och refresh-livslängder, rotationsregler och felmoder för att hålla inloggningar smidiga men förutsägbara.</li>
          <li>Den levererar konkreta implementationsdetaljer för headers, cookie-flaggor, CORS-beteende och CSRF-skydd.</li>
          <li>Den tar fram kodsnuttar anpassade efter din stack baserat på dina indata för [BACKEND_TECHNOLOGY] och [FRONTEND_TECHNOLOGY].</li>
          <li>Den lägger till övervakning, detekteringssignaler och automatiserade åtgärder för inneslutning vid misstänkt sessionsstöld eller replay.</li>
       </ul>
      </td>
      <td>
        <ul class="results-list">
          <li>Du lagrar idag JWT:er i localStorage eller sessionStorage och vill ta bort den exponeringen utan att skriva om allt.</li>
          <li>Din app har ”mystiska utloggningar” eftersom refresh-logik och cookie-/CORS-inställningar har lappats ihop över tid.</li>
          <li>Du lägger till en ny SPA eller mobil webb-frontend och behöver ett konsekvent authflöde som inte blir en supportmardröm.</li>
          <li>En säkerhetsgranskning flaggade XSS-risk, tokenstöld eller saknat CSRF-skydd i cookie-baserade sessioner.</li>
          <li>Du skalar trafiken och behöver övervakning och incident-playbooks, inte bara ett authdiagram i en slide deck.</li>
        </ul>
      </td>
       <td>
         <ul class="deliverables-list">
           <li>En komplett blueprint för JWT-cookie-sessioner med rekommenderade tokenlivslängder och rotationspolicy.</li>
           <li>Endpoint-för-endpoint-flöde för inloggning, tyst refresh, utloggning och hantering av ”ogiltig session”.</li>
           <li>Stack-specifika kodsnuttar för [BACKEND_TECHNOLOGY] och [FRONTEND_TECHNOLOGY], inklusive headers och cookie-attribut.</li>
           <li>Ett CSRF-skyddspaket: vald metod, konfigurationsnoter och valideringslogik för skyddade routes.</li>
           <li>En checklista för övervakning och inneslutning med larmsignaler plus automatiserade steg för att isolera misstänkta sessioner.</li>
         </ul>
       </td>
    </tr>
  </tbody>
</table>

</div>

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

<h2 class="wp-block-heading">Hela AI-prompten: tokensäker cookie-JWT-auth blueprint</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">
                                    Steg 1: Anpassa prompten med din information
                            </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>Återställ</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>Anpassa och kopiera hela prompten</span>
                </button>
            </div>
        </div>

        <!-- Customize the Prompt Section -->
                    <div class="prompt-customize-section">
                <span class="customize-title">Anpassa prompten</span>
                <p class="customize-subtitle">Fyll i fälten nedan för att anpassa prompten efter dina behov.</p>
                <table class="customize-table">
                    <thead>
                        <tr>
                            <th>Variabel</th>
                            <th>Vad du ska ange</th>
                            <th>Anpassa prompten</th>
                        </tr>
                    </thead>
                    <tbody>
                                                    <tr>
                                <td class="var-name"><code>[BACKEND_TEKNIK]</code></td>
                                <td class="var-desc">
                                    Ange vilket backend-språk eller ramverk som används för att bygga applikationens serversida.                                    <div class="var-example">Till exempel: "Node.js med Express eller Python med Django"</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[BACKEND_TEKNIK]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[FRONTEND_TEKNIK]</code></td>
                                <td class="var-desc">
                                    Ange vilket frontend-ramverk eller bibliotek som används för att bygga applikationens användargränssnitt.                                    <div class="var-example">Till exempel: "React.js eller Angular"</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[FRONTEND_TEKNIK]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[VERSALER_MED_UNDERSTRECK]</code></td>
                                <td class="var-desc">
                                    Ange ett variabel- eller inmatningsnamn som är formaterat med versaler och understreck mellan ord.                                    <div class="var-example">Till exempel: "USER_SESSION_ID eller ACCESS_TOKEN"</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[VERSALER_MED_UNDERSTRECK]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[APPLIKATIONSTYP]</code></td>
                                <td class="var-desc">
                                    Beskriv vilken typ av applikation som utvecklas, inklusive syfte och målgrupp.                                    <div class="var-example">Till exempel: "E-handelswebbapplikation för småföretag"</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[APPLIKATIONSTYP]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[NUVARANDE_SAKERHETSNIVA]</code></td>
                                <td class="var-desc">
                                    Beskriv den nuvarande säkerhetsstrategin eller de mekanismer som är implementerade i applikationen.                                    <div class="var-example">Till exempel: "Använder JWT lagrat i localStorage med grundläggande CSRF-skydd"</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[NUVARANDE_SAKERHETSNIVA]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[UTMANING]</code></td>
                                <td class="var-desc">
                                    Beskriv den specifika autentiserings- eller säkerhetsutmaning som applikationen står inför eller försöker lösa.                                    <div class="var-example">Till exempel: "Förhindra sessionskapning samtidigt som användarupplevelsen förblir smidig"</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[UTMANING]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[KONTEXT]</code></td>
                                <td class="var-desc">
                                    Ange relevant bakgrund eller situationsdetaljer som påverkar säkerhetsarkitekturen eller implementationen.                                    <div class="var-example">Till exempel: "Applikationen används i en högriskmiljö med frekventa nätfiskeförsök som riktas mot användare"</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[KONTEXT]"
                                            placeholder="Ange ditt värde här..."
                                            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">Anpassa prompten nu</span>

                </button>
            </div>
        
        <!-- Full Prompt Code Header -->
                    <div class="prompt-code-header">
                <span class="prompt-code-title">
                    Steg 2: Kopiera prompten
                </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>Återställ</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>Kopiera hela prompten</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">MÅL</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">BEGRÄNSNINGAR</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">Vad detta INTE är (avgränsningar)</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></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">INDATA</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">OUTPUTSPECIFIKATION</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) Säkerhetsarkitektur</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">2) Cookie-implementering (HTTP-only)</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) Sessionshantering &amp; tyst refresh</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">4) Middleware-design (validering + användarkontext)</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) Hotdetektion &amp; automatiserad respons</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">6) Kodexempel (anpassade)</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) Säkerhetstestplan</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) Driftsättningschecklista</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">KVALITETSKONTROLLER</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;">
                ## MÅL
Skapa en produktionsklar blueprint för JWT-autentisering som tar bort all klient-side lagring/hantering av tokens, står emot XSS/tokenstöld/sessionkapning, bevarar en smidig inloggningsupplevelse och inkluderar konkreta implementeringsdetaljer (kod, headers, inställningar, tester och incidenthantering).

## PERSONA
Agera som en erfaren applikationssäkerhetsarkitekt som har byggt och granskat autentiseringssystem i verkligheten under pågående attacker. Kommunicera i en pragmatisk, ingenjörsdriven stil: precis, skeptisk till plattityder om ”best practice” och fokuserad på driftsättbara mönster med tydliga tradeoffs.

## BEGRÄNSNINGAR
- Prioritera designer där tokens aldrig är åtkomliga för JavaScript (ingen localStorage/sessionStorage/tokencirkus i minnet i webbläsaren).
- Använd HTTP-only cookies som primär transport/lagring för sessionsuppgifter.
- Ge stack-specifika snippets anpassade till [BACKEND_TEKNIK] och [FRONTEND_TEKNIK].
- Föredra handlingsbar konfiguration framför generiska råd.
- Bevara UX: tyst refresh, minimalt antal återinloggningar, förutsägbara felmoder.
- Inkludera övervakning samt automatiserade inneslutningsåtgärder vid misstänkt kompromettering av autentiseringsuppgifter.
- **Efterlevnad av variabelformat:** användarens inmatade poster måste vara i **[VERSALER_MED_UNDERSTRECK]**; alla mallfält som AI:n fyller i måste använda **{Title Case}**.

### Vad detta INTE är (avgränsningar)
- Inte en komplett guide för val av IAM/SSO-leverantör.
- Inte en fullständig pentestrapport eller ett formellt hotmodellsdokument.
- Inte en ersättning för juridiska/compliance-krav (PCI/HIPAA/etc.).
- Inte ett godkännande av att lägga access tokens i webbläsarlagring ”med extra kryptering”.

## PROCESS
1. **Föranalys (måste skrivas ut först):** Återge kort din förståelse av appkontexten och de sannolika hotvägarna, baserat på de givna indata. Lista eventuella antaganden.
2. **Arkitekturuppbyggnad:** Föreslå en cookie-baserad JWT-sessionsmodell (access + refresh eller motsvarande) med tydliga livslängder och rotationsregler.
3. **Implementeringsdetaljer:** Ange headers, cookie-attribut, CORS/CSRF-hållning samt serverrutter/handlers som behövs för login, refresh, logout och återkallning.
4. **Middleware &amp; request-flöde:** Definiera hur varje request autentiseras, hur användarkontext kopplas på, och hur fel hanteras utan att läcka information.
5. **Hotrespons:** Beskriv detektionssignaler (loggar/mått), larmtrösklar och automatiserade åtgärder (återkalla, rotera, step-up auth, lockouts).
6. **Testplan:** Ge repeterbara tester (unit/integration/e2e) samt en liten checklista för ”attack-simulering”.
7. **Edge cases:** Om indata är ofullständiga eller motsägelsefulla, ställ riktade frågor och ge en säker standardväg märkt som {Assumed Default}.
8. **Avsluta med validering:** Ge en kort verifieringschecklista (4–5 punkter).

## INDATA
- **Applikationstyp:** [APPLIKATIONSTYP]
- **Backend-teknik/ramverk:** [BACKEND_TEKNIK]
- **Frontend-teknik/ramverk:** [FRONTEND_TEKNIK]
- **Nuvarande JWT/säkerhetsupplägg:** [NUVARANDE_SAKERHETSNIVA]
- **Specifika säkerhetsrisker/krav:** [UTMANING]
- **Miljödetaljer (domäner, hosting, reverse proxy, etc.):** [KONTEXT]

## OUTPUTSPECIFIKATION
Använd följande sektioner och inkludera stack-specifik kod/konfiguration där det är möjligt:

### 1) Säkerhetsarkitektur
Ange:
- {Session Model} (t.ex. ”kortlivad access token + roterande refresh token i HTTP-only cookie”)
- {Token Contents} (claims, issuer/audience, vägledning för minimal PII)
- {Lifetime Policy} (access TTL, refresh TTL, idle timeout, absolute timeout)
- {Rotation &amp; Revocation Strategy} (refresh-rotation, återanvändningsdetektion, server-side denylist/allowlist-upplägg)
- {UX Behavior} (vad användaren upplever vid refresh/utgång)

### 2) Cookie-implementering (HTTP-only)
Inkludera:
- {Cookie Names} och syften
- Exakta cookie-attribut: HttpOnly, Secure, SameSite, Path, Domain, Max-Age/Expires
- Nödvändiga säkerhetsheaders (minst): CSP-vägledning, HSTS, X-Content-Type-Options, Referrer-Policy, Permissions-Policy
- CORS-inställningar kompatibla med cookie-auth
- CSRF-strategi kompatibel med SameSite-policy (double-submit, origin checks, CSRF token cookie pattern, etc.)

### 3) Sessionshantering &amp; tyst refresh
Inkludera:
- {Auth Endpoints} (login/refresh/logout/me)
- {Refresh Flow} beskrivet som steg (server-centriskt; frontend ska inte röra tokens)
- Samtidighetshantering (flera flikar, refresh-stormar)
- Logout-semantik (server + klientens cookie-rensning)
- Felhantering (när man ska tvinga re-auth vs retry)

### 4) Middleware-design (validering + användarkontext)
Inkludera:
- {Middleware Responsibilities}
- Signaturverifiering, issuer/audience-kontroller, hantering av clock skew
- Koppla {User Context} till request
- Auktoriseringshooks (roller/scopes) utan att överbelasta JWT
- Prestandanoteringar (cache av nycklar/JWKS om tillämpligt)

### 5) Hotdetektion &amp; automatiserad respons
Inkludera:
- Vad som ska loggas (auth-händelser, refresh-återanvändning, IP/UA-ändringar, anomaliesignaler)
- {Detection Rules} (exempel med trösklar)
- {Automated Actions} (återkalla sessionsfamilj, kräva re-auth, notifiera användare, rate limit, temporärt blockera)
- Vägledning för scenarier med komprometterad refresh token
- Mönster för säkra felmeddelanden

### 6) Kodexempel (anpassade)
Ge:
- {Backend Implementation Snippets} för [BACKEND_TEKNIK]
- {Frontend Integration Notes} för [FRONTEND_TEKNIK] (cookie-baserade requests, hantering av 401/419, retry-mönster)
- {Configuration Snippets} (proxy/load balancer, miljövariabler, säkra standardvärden)
- Ett minimalt exempel för varje: login-handler, refresh-handler, auth-middleware, logout-handler

### 7) Säkerhetstestplan
Inkludera:
- Unit-tester (tokenvalidering, utgång, rotation, CSRF-kontroller)
- Integrationstester (cookie-attribut, CORS-beteende, korrekt refresh-rotation)
- E2E-tester (tyst refresh, multi-tab, logout)
- ”Adversary checks” (XSS-försök att läsa tokens, replay av refresh, försök till session fixation)

### 8) Driftsättningschecklista
En steg-för-steg-lista inför pre-prod som inkluderar:
- Cookie-flaggor verifierade i prod
- TLS/HSTS aktiverat och testat
- CSP i report-only och därefter enforcement
- Loggning/larm inkopplat
- Nyckelrotation/JWKS-strategi bekräftad
- Grunder för incident-runbook (återkallning, tvingad utloggning, rotation av hemligheter)

## KVALITETSKONTROLLER
På slutet ska du skriva ut en **Quality Validation Checklist** med 4–5 punkter som bekräftar:
- Ingen klient-side lagring/läsning av tokens krävs
- Cookies och headers är korrekt specificerade för vald stack
- CSRF-skydd är kompatibla med cookie-baserad auth
- Refresh-rotation + hantering vid kompromettering är uttryckligen täckt
- Tester inkluderar minst ett replay/återanvändningsscenario och ett XSS-drivet verifieringsförsök            </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">Kopiera hela prompten</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 span {
        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 !important;
    }


    .prompt-cta-copy span {
        background: #3a3a3a;
        color: #fff !important;
    }


    .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 !important;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .copy-customized-btn span {
        color: #fff !important
    }

    .copy-customized-text span {
        color: #fff !important
    }

    .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;
        color: #fff !important;

    }

    .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 = 'Kopierad!';
            });

            setTimeout(() => {
                copyButtons.forEach(btn => {
                    btn.classList.remove('copied');
                    const textSpan = btn.querySelector('span');
                    if (textSpan) textSpan.textContent = 'Kopiera hela prompten';
                });
            }, 2000);
        }).catch(err => {
            console.error('Failed to copy:', err);
        });
    }

    // Store original prompt for customization
    const originalPrompt = "## M\u00c5L\r\nSkapa en produktionsklar blueprint f\u00f6r JWT-autentisering som tar bort all klient-side lagring\/hantering av tokens, st\u00e5r emot XSS\/tokenst\u00f6ld\/sessionkapning, bevarar en smidig inloggningsupplevelse och inkluderar konkreta implementeringsdetaljer (kod, headers, inst\u00e4llningar, tester och incidenthantering).\r\n\r\n## PERSONA\r\nAgera som en erfaren applikationss\u00e4kerhetsarkitekt som har byggt och granskat autentiseringssystem i verkligheten under p\u00e5g\u00e5ende attacker. Kommunicera i en pragmatisk, ingenj\u00f6rsdriven stil: precis, skeptisk till plattityder om \u201dbest practice\u201d och fokuserad p\u00e5 drifts\u00e4ttbara m\u00f6nster med tydliga tradeoffs.\r\n\r\n## BEGR\u00c4NSNINGAR\r\n- Prioritera designer d\u00e4r tokens aldrig \u00e4r \u00e5tkomliga f\u00f6r JavaScript (ingen localStorage\/sessionStorage\/tokencirkus i minnet i webbl\u00e4saren).\r\n- Anv\u00e4nd HTTP-only cookies som prim\u00e4r transport\/lagring f\u00f6r sessionsuppgifter.\r\n- Ge stack-specifika snippets anpassade till [BACKEND_TEKNIK] och [FRONTEND_TEKNIK].\r\n- F\u00f6redra handlingsbar konfiguration framf\u00f6r generiska r\u00e5d.\r\n- Bevara UX: tyst refresh, minimalt antal \u00e5terinloggningar, f\u00f6ruts\u00e4gbara felmoder.\r\n- Inkludera \u00f6vervakning samt automatiserade inneslutnings\u00e5tg\u00e4rder vid misst\u00e4nkt kompromettering av autentiseringsuppgifter.\r\n- **Efterlevnad av variabelformat:** anv\u00e4ndarens inmatade poster m\u00e5ste vara i **[VERSALER_MED_UNDERSTRECK]**; alla mallf\u00e4lt som AI:n fyller i m\u00e5ste anv\u00e4nda **{Title Case}**.\r\n\r\n### Vad detta INTE \u00e4r (avgr\u00e4nsningar)\r\n- Inte en komplett guide f\u00f6r val av IAM\/SSO-leverant\u00f6r.\r\n- Inte en fullst\u00e4ndig pentestrapport eller ett formellt hotmodellsdokument.\r\n- Inte en ers\u00e4ttning f\u00f6r juridiska\/compliance-krav (PCI\/HIPAA\/etc.).\r\n- Inte ett godk\u00e4nnande av att l\u00e4gga access tokens i webbl\u00e4sarlagring \u201dmed extra kryptering\u201d.\r\n\r\n## PROCESS\r\n1. **F\u00f6ranalys (m\u00e5ste skrivas ut f\u00f6rst):** \u00c5terge kort din f\u00f6rst\u00e5else av appkontexten och de sannolika hotv\u00e4garna, baserat p\u00e5 de givna indata. Lista eventuella antaganden.\r\n2. **Arkitekturuppbyggnad:** F\u00f6resl\u00e5 en cookie-baserad JWT-sessionsmodell (access + refresh eller motsvarande) med tydliga livsl\u00e4ngder och rotationsregler.\r\n3. **Implementeringsdetaljer:** Ange headers, cookie-attribut, CORS\/CSRF-h\u00e5llning samt serverrutter\/handlers som beh\u00f6vs f\u00f6r login, refresh, logout och \u00e5terkallning.\r\n4. **Middleware & request-fl\u00f6de:** Definiera hur varje request autentiseras, hur anv\u00e4ndarkontext kopplas p\u00e5, och hur fel hanteras utan att l\u00e4cka information.\r\n5. **Hotrespons:** Beskriv detektionssignaler (loggar\/m\u00e5tt), larmtr\u00f6sklar och automatiserade \u00e5tg\u00e4rder (\u00e5terkalla, rotera, step-up auth, lockouts).\r\n6. **Testplan:** Ge repeterbara tester (unit\/integration\/e2e) samt en liten checklista f\u00f6r \u201dattack-simulering\u201d.\r\n7. **Edge cases:** Om indata \u00e4r ofullst\u00e4ndiga eller mots\u00e4gelsefulla, st\u00e4ll riktade fr\u00e5gor och ge en s\u00e4ker standardv\u00e4g m\u00e4rkt som {Assumed Default}.\r\n8. **Avsluta med validering:** Ge en kort verifieringschecklista (4\u20135 punkter).\r\n\r\n## INDATA\r\n- **Applikationstyp:** [APPLIKATIONSTYP]\r\n- **Backend-teknik\/ramverk:** [BACKEND_TEKNIK]\r\n- **Frontend-teknik\/ramverk:** [FRONTEND_TEKNIK]\r\n- **Nuvarande JWT\/s\u00e4kerhetsuppl\u00e4gg:** [NUVARANDE_SAKERHETSNIVA]\r\n- **Specifika s\u00e4kerhetsrisker\/krav:** [UTMANING]\r\n- **Milj\u00f6detaljer (dom\u00e4ner, hosting, reverse proxy, etc.):** [KONTEXT]\r\n\r\n## OUTPUTSPECIFIKATION\r\nAnv\u00e4nd f\u00f6ljande sektioner och inkludera stack-specifik kod\/konfiguration d\u00e4r det \u00e4r m\u00f6jligt:\r\n\r\n### 1) S\u00e4kerhetsarkitektur\r\nAnge:\r\n- {Session Model} (t.ex. \u201dkortlivad access token + roterande refresh token i HTTP-only cookie\u201d)\r\n- {Token Contents} (claims, issuer\/audience, v\u00e4gledning f\u00f6r minimal PII)\r\n- {Lifetime Policy} (access TTL, refresh TTL, idle timeout, absolute timeout)\r\n- {Rotation & Revocation Strategy} (refresh-rotation, \u00e5teranv\u00e4ndningsdetektion, server-side denylist\/allowlist-uppl\u00e4gg)\r\n- {UX Behavior} (vad anv\u00e4ndaren upplever vid refresh\/utg\u00e5ng)\r\n\r\n### 2) Cookie-implementering (HTTP-only)\r\nInkludera:\r\n- {Cookie Names} och syften\r\n- Exakta cookie-attribut: HttpOnly, Secure, SameSite, Path, Domain, Max-Age\/Expires\r\n- N\u00f6dv\u00e4ndiga s\u00e4kerhetsheaders (minst): CSP-v\u00e4gledning, HSTS, X-Content-Type-Options, Referrer-Policy, Permissions-Policy\r\n- CORS-inst\u00e4llningar kompatibla med cookie-auth\r\n- CSRF-strategi kompatibel med SameSite-policy (double-submit, origin checks, CSRF token cookie pattern, etc.)\r\n\r\n### 3) Sessionshantering & tyst refresh\r\nInkludera:\r\n- {Auth Endpoints} (login\/refresh\/logout\/me)\r\n- {Refresh Flow} beskrivet som steg (server-centriskt; frontend ska inte r\u00f6ra tokens)\r\n- Samtidighetshantering (flera flikar, refresh-stormar)\r\n- Logout-semantik (server + klientens cookie-rensning)\r\n- Felhantering (n\u00e4r man ska tvinga re-auth vs retry)\r\n\r\n### 4) Middleware-design (validering + anv\u00e4ndarkontext)\r\nInkludera:\r\n- {Middleware Responsibilities}\r\n- Signaturverifiering, issuer\/audience-kontroller, hantering av clock skew\r\n- Koppla {User Context} till request\r\n- Auktoriseringshooks (roller\/scopes) utan att \u00f6verbelasta JWT\r\n- Prestandanoteringar (cache av nycklar\/JWKS om till\u00e4mpligt)\r\n\r\n### 5) Hotdetektion & automatiserad respons\r\nInkludera:\r\n- Vad som ska loggas (auth-h\u00e4ndelser, refresh-\u00e5teranv\u00e4ndning, IP\/UA-\u00e4ndringar, anomaliesignaler)\r\n- {Detection Rules} (exempel med tr\u00f6sklar)\r\n- {Automated Actions} (\u00e5terkalla sessionsfamilj, kr\u00e4va re-auth, notifiera anv\u00e4ndare, rate limit, tempor\u00e4rt blockera)\r\n- V\u00e4gledning f\u00f6r scenarier med komprometterad refresh token\r\n- M\u00f6nster f\u00f6r s\u00e4kra felmeddelanden\r\n\r\n### 6) Kodexempel (anpassade)\r\nGe:\r\n- {Backend Implementation Snippets} f\u00f6r [BACKEND_TEKNIK]\r\n- {Frontend Integration Notes} f\u00f6r [FRONTEND_TEKNIK] (cookie-baserade requests, hantering av 401\/419, retry-m\u00f6nster)\r\n- {Configuration Snippets} (proxy\/load balancer, milj\u00f6variabler, s\u00e4kra standardv\u00e4rden)\r\n- Ett minimalt exempel f\u00f6r varje: login-handler, refresh-handler, auth-middleware, logout-handler\r\n\r\n### 7) S\u00e4kerhetstestplan\r\nInkludera:\r\n- Unit-tester (tokenvalidering, utg\u00e5ng, rotation, CSRF-kontroller)\r\n- Integrationstester (cookie-attribut, CORS-beteende, korrekt refresh-rotation)\r\n- E2E-tester (tyst refresh, multi-tab, logout)\r\n- \u201dAdversary checks\u201d (XSS-f\u00f6rs\u00f6k att l\u00e4sa tokens, replay av refresh, f\u00f6rs\u00f6k till session fixation)\r\n\r\n### 8) Drifts\u00e4ttningschecklista\r\nEn steg-f\u00f6r-steg-lista inf\u00f6r pre-prod som inkluderar:\r\n- Cookie-flaggor verifierade i prod\r\n- TLS\/HSTS aktiverat och testat\r\n- CSP i report-only och d\u00e4refter enforcement\r\n- Loggning\/larm inkopplat\r\n- Nyckelrotation\/JWKS-strategi bekr\u00e4ftad\r\n- Grunder f\u00f6r incident-runbook (\u00e5terkallning, tvingad utloggning, rotation av hemligheter)\r\n\r\n## KVALITETSKONTROLLER\r\nP\u00e5 slutet ska du skriva ut en **Quality Validation Checklist** med 4\u20135 punkter som bekr\u00e4ftar:\r\n- Ingen klient-side lagring\/l\u00e4sning av tokens kr\u00e4vs\r\n- Cookies och headers \u00e4r korrekt specificerade f\u00f6r vald stack\r\n- CSRF-skydd \u00e4r kompatibla med cookie-baserad auth\r\n- Refresh-rotation + hantering vid kompromettering \u00e4r uttryckligen t\u00e4ckt\r\n- Tester inkluderar minst ett replay\/\u00e5teranv\u00e4ndningsscenario och ett XSS-drivet verifieringsf\u00f6rs\u00f6k";
    const variables = ["[BACKEND_TEKNIK]","[FRONTEND_TEKNIK]","[VERSALER_MED_UNDERSTRECK]","[APPLIKATIONSTYP]","[NUVARANDE_SAKERHETSNIVA]","[UTMANING]","[KONTEXT]"];
    // 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 = 'Återställd!';
            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">Proffstips för bättre resultat från AI-prompten</h2>



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

<li><strong>Var brutalt specifik om hur din app är uppbyggd.</strong> Berätta för AI:n om det är en ren SPA, SSR + API, eller en hybrid med flera subdomäner, eftersom cookie-scope och CORS-regler ändras snabbt. Lägg till detaljer som ”api.example.com + app.example.com” och om du måste stödja cross-site-requests. Om du inte gör det får du en generisk design som går sönder i produktion.</li>


<li><strong>Fyll i [BACKEND_TECHNOLOGY] och [FRONTEND_TECHNOLOGY] med versioner, inte etiketter.</strong> ”Node” är otydligt; ”Node 20 + Express 4 bakom Nginx” är användbart. Samma för frontend: ”Next.js 14 App Router” eller ”React + Vite serverat från CloudFront.” Följdfråga: ”Skriv nu om implementationsdelen med Next.js route handlers och Express middleware.”</li>


<li><strong>Be den välja ett CSRF-mönster och motivera det.</strong> Cookie-auth tvingar fram CSRF-diskussionen, och luddiga svar är så team skickar luckor. Prompt: ”Välj double-submit cookie eller synchronizer token för mitt fall, och inkludera exakta cookie-namn, valideringssteg och hur det beter sig med same-site-requests.”</li>


<li><strong>Iterera på livslängder utifrån din faktiska risktolerans.</strong> Första vändan blir ett rimligt standardförslag, men du kan justera efter användarbeteende och hotnivå. Efter första resultatet, testa: ”Gör access tokens 5 minuter, refresh 14 dagar med rotation; förklara nu UX-effekten och hur du undviker överraskande utloggningar.”</li>


<li><strong>Tvinga incidentplanen att vara körbar.</strong> Övervakning hjälper bara om den leder till åtgärder som teamet faktiskt genomför klockan 02.00. Fråga: ”Lägg till detekteringsregler för replay av refresh-token och omöjliga resor; inkludera automatiserade svar (återkalla session, step-up auth) och vad som ska loggas för senare forensik.” Ärligt talat är det här de flesta ”auth-guider” faller isär.</li>

</ul>

</div>

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

<h2 class="wp-block-heading">Relaterade prompts</h2>



<p>När din autentiseringsblueprint är stabil hjälper de här promptarna dig att ta bort prestanda- och processfriktion som ofta dyker upp under implementation och utrullning:</p>



<p>Om du också behöver strama upp leveranspipen runt säkerhetsarbete (granskningar, QA, releasekoordinering) hjälper <a href="https://nodenordic.se/prompts/fixa-flaskhalsar-i-workflow-och-genomstromning">Fixa flaskhalsar i workflow och genomströmning</a> dig att kartlägga var ärenden fastnar och vad du ska ändra först. Den passar bra när ditt authprojekt fortsätter att halka efter eftersom godkännanden, överlämningar och okontrollerade loopar med ”en ändring till” tar över.</p>



<p>För team som gör återkommande authrelaterade fixar över flera tjänster är <a href="https://nodenordic.se/prompts/atgarda-flaskhalsar-i-arbetsfloden-och-oka-throughput">Åtgärda flaskhalsar i arbetsflöden och öka throughput</a> användbar direkt efter att du har valt måldesignen. Använd den för att standardisera genomförandet: checklistor, ansvar och en pragmatisk takt så att blueprinten blir mergad kod, inte ett bortglömt dokument.</p>



<p>När din största smärta är friktion i vardagen (långsamma kodgranskningar, otydliga definitioner av klart, miljödrift) kompletterar <a href="https://nodenordic.se/prompts/los-flaskhalsar-i-det-dagliga-arbetsflodet">Lös flaskhalsar i det dagliga arbetsflödet</a> det här JWT-arbetet bra. Du kommer märka det under authrefactors, eftersom du rör känsliga endpoints och tester, och små ineffektiviteter multipliceras.</p>


<br>


<p>Snabbreferens:</p>



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

<li><a href="https://nodenordic.se/prompts/fixa-flaskhalsar-i-workflow-och-genomstromning">Fixa flaskhalsar i workflow och genomströmning</a>: Hitta överlämningar som bromsar viktiga projekt.</li>


<li><a href="https://nodenordic.se/prompts/atgarda-flaskhalsar-i-arbetsfloden-och-oka-throughput">Åtgärda flaskhalsar i arbetsflöden och öka throughput</a>: Gör planer till repeterbar leverans.</li>


<li><a href="https://nodenordic.se/prompts/los-flaskhalsar-i-det-dagliga-arbetsflodet">Lös flaskhalsar i det dagliga arbetsflödet</a>: Ta bort vardagshinder under refactors.</li>


<li><a href="https://nodenordic.se/prompts/felsok-flaskhalsar-i-runtime-och-atgarder">Felsök flaskhalsar i runtime och åtgärder</a>: Upptäck prestandaproblem efter ändringar.</li>


<li><a href="https://nodenordic.se/prompts/bygg-en-skraddarsydd-io-masteryplan-med-ai-prompt">Bygg en skräddarsydd io-masteryplan med AI-prompt</a>: Träna färdigheter för bättre genomförande.</li>

</ul>

</div>

<div class="faq-section">

<h2 class="wp-block-heading">Vanliga frågor</h2>


<div class="faq-item">
<span class="question">Vilka roller har mest nytta av den här AI-prompten för JWT-auth blueprint?</span>

<p class="answer"><strong>Backendutvecklare</strong> använder den för att implementera cookie-baserade JWT-sessioner med korrekta flaggor, livslängder och rotation så att tokens aldrig når JavaScript. <strong>Säkerhetsingenjörer</strong> lutar sig mot den för att validera CSRF-nivå, skydd mot replay av refresh-token samt loggnings-/övervakningssignaler de kan larma på. <strong>Tech leads</strong> använder den för att standardisera auth över tjänster och minska säkerhetsdrift av typen ”det funkar på min dator”. <strong>Fullstackutvecklare</strong> har nytta av den eftersom den bygger bro mellan frontendbegränsningar (CORS, cookie-beteende) och serverside-krav i en plan som går att driftsätta.</p>

</div>

<div class="faq-item">
<span class="question">Vilka branscher får mest värde av den här AI-prompten för JWT-auth blueprint?</span>

<p class="answer"><strong>SaaS-bolag</strong> får värde eftersom en enda stulen session kan exponera flera tenants, och cookie- + rotationsmönster hjälper att begränsa skadeomfånget. Den här prompten tvingar också fram tydlighet kring livslängder och återkallelse, vilket är viktigt när supportteam hanterar kontoövertaganden. <strong>E-handelsvarumärken</strong> använder den för att minska checkout-bedrägerier och skydda kundkonton utan att införa ständiga ominloggningar som försämrar konverteringen. <strong>Fintech och betalningsnära appar</strong> har nytta av övervaknings- och inneslutningsstegen, eftersom kraven på incidenthantering är högre och ”vi kollar loggarna senare” inte räcker. <strong>Sjukvård och patientportaler</strong> använder den för att strama upp sessionshantering och revisionsvänlig loggning, samtidigt som upplevelsen förblir användbar för icke-tekniska patienter.</p>

</div>

<div class="faq-item">
<span class="question">Varför ger grundläggande AI-prompts för att designa JWT-autentisering svaga resultat?</span>

<p class="answer">En typisk prompt som ”Skriv en JWT-auth setup för min app” misslyckas eftersom den: saknar nyckelkontext som subdomäner, cross-site-requests och din faktiska tech stack, vilket gör att cookie- och CORS-råd blir fel. Den ger ingen tvingande struktur för refresh-rotation och replay-detektering, vilket är där många verkliga attacker landar. Den ignorerar CSRF-avvägningar som uppstår så fort du använder cookies, vilket ger osäkra standarder eller luddiga ”aktivera CSRF”. Den producerar generiska mönster som ”lagra token i localStorage” i stället för en design som håller tokens borta från JavaScript. Och den missar ofta övervakning plus inneslutningssteg, så du saknar en plan när sessioner missbrukas.</p>

</div>

<div class="faq-item">
<span class="question">Kan jag anpassa den här JWT-auth blueprint-prompten för min specifika situation?</span>

<p class="answer">Ja, men du måste mata in rätt variabler i formatet den förväntar sig, särskilt [BACKEND_TECHNOLOGY] och [FRONTEND_TECHNOLOGY]. Lägg till din domänmodell (en domän vs api-/app-subdomäner), dina UX-krav för inloggning (tyst refresh, ”kom ihåg mig”, enhetsbegränsningar) och eventuella begränsningar som ”måste stödja inbäddade tredjepartswidgets”. En bra följdfråga är: ”Givet [BACKEND_TECHNOLOGY] och [FRONTEND_TECHNOLOGY], skriv ut de exakta cookie-namnen, SameSite-värden, CORS-inställningar och pseudokod för refresh-endpointen.” Om du har ett befintligt system, be den ta fram en migreringsplan i faser så att du kan leverera säkert.</p>

</div>

<div class="faq-item">
<span class="question">Vilka är de vanligaste misstagen när man använder den här JWT-auth blueprint-prompten?</span>

<p class="answer">Det största misstaget är att lämna [BACKEND_TECHNOLOGY] för vagt — i stället för ”Python”, prova ”Python 3.12 + FastAPI + Uvicorn bakom Cloudflare”. Ett annat vanligt fel är att specificera [FRONTEND_TECHNOLOGY] för dåligt; ”React” är inte samma sak som ”Next.js med server actions”, och cookie-beteende samt routing spelar roll. Folk glömmer också att beskriva sin domänsetup, vilket gör att du får oanvändbara SameSite-/CORS-råd; ”single origin https://app.example.com” är bra input, ”vi har en webbplats” är det inte. Slutligen hoppar team över UX-krav, så modellen kan välja livslängder som orsakar ständiga inloggningar; säg ”tyst refresh krävs, tolerera ominloggning först efter 14 dagar eller vid lösenordsbyte”.</p>

</div>

<div class="faq-item">
<span class="question">Vem ska INTE använda den här JWT-auth blueprint-prompten?</span>

<p class="answer">Den här prompten är inte idealisk för team som behöver fatta ett fullständigt beslut om SSO-/IAM-leverantör eller en federationsdesign för enterprise, eftersom den fokuserar på driftsättbara cookie-baserade JWT-mönster, inte produktval. Den passar också dåligt om du vill ha en snabb mall på en sida utan iteration, eftersom bästa resultat kommer av att tydliggöra stack, domänmodell och hotantaganden. Och om du inte kan använda HTTP-only-cookies alls (till exempel i en begränsad klientmiljö som förbjuder dem) behöver du en annan approach. I de fallen, börja i stället med en formell arkitekturgranskning eller en dedikerad utvärdering av auth-ramverk.</p>

</div>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Vilka roller har mest nytta av den här AI-prompten för JWT-auth blueprint?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Backendutvecklare använder den för att implementera cookie-baserade JWT-sessioner med korrekta flaggor, livslängder och rotation så att tokens aldrig når JavaScript. Säkerhetsingenjörer lutar sig mot den för att validera CSRF-nivå, skydd mot replay av refresh-token samt loggnings-/övervakningssignaler de kan larma på. Tech leads använder den för att standardisera auth över tjänster och minska säkerhetsdrift av typen ”det funkar på min dator”. Fullstackutvecklare har nytta av den eftersom den bygger bro mellan frontendbegränsningar (CORS, cookie-beteende) och serverside-krav i en plan som går att driftsätta."
      }
    },
    {
      "@type": "Question",
      "name": "Vilka branscher får mest värde av den här AI-prompten för JWT-auth blueprint?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "SaaS-bolag får värde eftersom en enda stulen session kan exponera flera tenants, och cookie- + rotationsmönster hjälper att begränsa skadeomfånget. Den här prompten tvingar också fram tydlighet kring livslängder och återkallelse, vilket är viktigt när supportteam hanterar kontoövertaganden. E-handelsvarumärken använder den för att minska checkout-bedrägerier och skydda kundkonton utan att införa ständiga ominloggningar som försämrar konverteringen. Fintech och betalningsnära appar har nytta av övervaknings- och inneslutningsstegen, eftersom kraven på incidenthantering är högre och ”vi kollar loggarna senare” inte räcker. Sjukvård och patientportaler använder den för att strama upp sessionshantering och revisionsvänlig loggning, samtidigt som upplevelsen förblir användbar för icke-tekniska patienter."
      }
    },
    {
      "@type": "Question",
      "name": "Varför ger grundläggande AI-prompts för att designa JWT-autentisering svaga resultat?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "En typisk prompt som ”Skriv en JWT-auth setup för min app” misslyckas eftersom den: saknar nyckelkontext som subdomäner, cross-site-requests och din faktiska tech stack, vilket gör att cookie- och CORS-råd blir fel. Den ger ingen tvingande struktur för refresh-rotation och replay-detektering, vilket är där många verkliga attacker landar. Den ignorerar CSRF-avvägningar som uppstår så fort du använder cookies, vilket ger osäkra standarder eller luddiga ”aktivera CSRF”. Den producerar generiska mönster som ”lagra token i localStorage” i stället för en design som håller tokens borta från JavaScript. Och den missar ofta övervakning plus inneslutningssteg, så du saknar en plan när sessioner missbrukas."
      }
    },
    {
      "@type": "Question",
      "name": "Kan jag anpassa den här JWT-auth blueprint-prompten för min specifika situation?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Ja, men du måste mata in rätt variabler i formatet den förväntar sig, särskilt [BACKEND_TECHNOLOGY] och [FRONTEND_TECHNOLOGY]. Lägg till din domänmodell (en domän vs api-/app-subdomäner), dina UX-krav för inloggning (tyst refresh, ”kom ihåg mig”, enhetsbegränsningar) och eventuella begränsningar som ”måste stödja inbäddade tredjepartswidgets”. En bra följdfråga är: ”Givet [BACKEND_TECHNOLOGY] och [FRONTEND_TECHNOLOGY], skriv ut de exakta cookie-namnen, SameSite-värden, CORS-inställningar och pseudokod för refresh-endpointen.” Om du har ett befintligt system, be den ta fram en migreringsplan i faser så att du kan leverera säkert."
      }
    },
    {
      "@type": "Question",
      "name": "Vilka är de vanligaste misstagen när man använder den här JWT-auth blueprint-prompten?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Det största misstaget är att lämna [BACKEND_TECHNOLOGY] för vagt — i stället för ”Python”, prova ”Python 3.12 + FastAPI + Uvicorn bakom Cloudflare”. Ett annat vanligt fel är att specificera [FRONTEND_TECHNOLOGY] för dåligt; ”React” är inte samma sak som ”Next.js med server actions”, och cookie-beteende samt routing spelar roll. Folk glömmer också att beskriva sin domänsetup, vilket gör att du får oanvändbara SameSite-/CORS-råd; ”single origin https://app.example.com” är bra input, ”vi har en webbplats” är det inte. Slutligen hoppar team över UX-krav, så modellen kan välja livslängder som orsakar ständiga inloggningar; säg ”tyst refresh krävs, tolerera ominloggning först efter 14 dagar eller vid lösenordsbyte”."
      }
    },
    {
      "@type": "Question",
      "name": "Vem ska INTE använda den här JWT-auth blueprint-prompten?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Den här prompten är inte idealisk för team som behöver fatta ett fullständigt beslut om SSO-/IAM-leverantör eller en federationsdesign för enterprise, eftersom den fokuserar på driftsättbara cookie-baserade JWT-mönster, inte produktval. Den passar också dåligt om du vill ha en snabb mall på en sida utan iteration, eftersom bästa resultat kommer av att tydliggöra stack, domänmodell och hotantaganden. Och om du inte kan använda HTTP-only-cookies alls (till exempel i en begränsad klientmiljö som förbjuder dem) behöver du en annan approach. I de fallen, börja i stället med en formell arkitekturgranskning eller en dedikerad utvärdering av auth-ramverk."
      }
    }
  ]
}
</script>
</div>

<div class="closing-section">

<p>Auth är ett av de där systemen du bara märker när det fallerar — och angripare märker det först. Använd den här prompten för att få en tokensäker, cookie-baserad JWT-blueprint som du faktiskt kan implementera, klistra sedan in den i ditt AI-verktyg och börja täta de verkliga skarvarna.</p>

</div><p>&lt;p&gt;The post <a rel="nofollow" href="https://nodenordic.se/prompts/bygg-en-tokensaker-jwt-autentiseringsritning-med-ai-prompt/">Bygg en tokensäker JWT-autentiseringsritning med AI-prompt</a> first appeared on <a rel="nofollow" href="https://nodenordic.se">Node Nordic - AI Konsult för företag</a>.&lt;/p&gt;</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Skriv API-användningsguider devs litar på</title>
		<link>https://nodenordic.se/prompts/skriv-api-anvandningsguider-devs-litar-pa/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=skriv-api-anvandningsguider-devs-litar-pa</link>
		
		<dc:creator><![CDATA[Rickard Andersson]]></dc:creator>
		<pubDate>Fri, 23 Jan 2026 02:49:10 +0000</pubDate>
				<category><![CDATA[prompts]]></category>
		<guid isPermaLink="false">https://nodenordic.se/?p=5001599</guid>

					<description><![CDATA[<p>API-dokumentation förvirrar användare – en beprövad AI-prompt som gör varje funktionssignatur till en trygg, underhållsvänlig guide.</p>
<p>&lt;p&gt;The post <a rel="nofollow" href="https://nodenordic.se/prompts/skriv-api-anvandningsguider-devs-litar-pa/">Skriv API-användningsguider devs litar på</a> first appeared on <a rel="nofollow" href="https://nodenordic.se">Node Nordic - AI Konsult för företag</a>.&lt;/p&gt;</p>
]]></description>
										<content:encoded><![CDATA[<!-- FOCUS_KEYWORD: API usage guides -->
<div class="hook-introduction">

<p>De flesta API-användningsdokumentationer misslyckas inte för att skribenten är “dålig”. De misslyckas för att de beskriver vad en funktion <em>är</em>, inte hur man anropar den säkert. Då gissar utvecklare, kantfall slinker in i produktion, och förvaltaren blir larmad senare.</p>



<p>Den här <strong>API usage guides</strong> är byggd för <strong>plattformstekniker</strong> som förvaltar äldre endpoints med otydlig avsikt, <strong>SDK-förvaltare</strong> som behöver konsekvent vägledning över en växande yta, och <strong>produktutvecklare</strong> som integrerar en obekant modul under tidspress. Resultatet är en skumläsbar, förvaltarvänlig guide som förklarar parameteravsikt, säkra standardval, risker vid felanvändning och praktiska anropsexempel (plus riktade frågor när detaljer saknas).</p>

</div>

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

<h2 class="wp-block-heading">Vad gör den här AI-prompten och när ska du använda den?</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">Vad den här prompten gör</th>
      <th scope="col">När du ska använda den här prompten</th>
      <th scope="col">Det här får du</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <ul class="automation-list">
          <li>Den omvandlar en funktions- eller metodsignatur till en användningsguide för “hur du anropar den korrekt”, inte bara en omskrivning av parametrar.</li>
          <li>Den gör en kort föranalys som flaggar saknad kontext, lyfter risker och separerar antaganden från fakta som behöver bekräftas.</li>
          <li>Den triagerar gränssnittet och delar upp förklaringen i 4–14 steg baserat på komplexitet, kopplingar och sannolikhet för felanvändning.</li>
          <li>Den extraherar rollen för varje parameter (selektor, konfiguration, callback, kontext, destination) och tydliggör implicita invariants och begränsningar.</li>
          <li>Den dokumenterar säkra mönster och felanvändningsfall, så att gränssnittet blir svårare att anropa fel och lättare att förvalta senare.</li>
       </ul>
      </td>
      <td>
        <ul class="results-list">
          <li>Du tar över en äldre modul och den enda “dokumentationen” är en signatur plus några sköra anropsställen.</li>
          <li>Ett nytt internt API ska användas av flera team, och du behöver konsekvent vägledning som förhindrar vanliga fallgropar.</li>
          <li>Supportärenden visar återkommande integrationsmisstag och du vill ha dokumentation som adresserar felen direkt.</li>
          <li>Du levererar ett SDK och behöver vägledning som följer språkets normer (nullability, valfria argument, namngivning) utan att hitta på detaljer.</li>
          <li>En funktion har många samverkande parametrar och code reviews fastnar hela tiden i “vad gör den här flaggan ens?”</li>
        </ul>
      </td>
       <td>
         <ul class="deliverables-list">
           <li>En strukturerad användningsguide med en föranalysdel plus en stegvis uppdelning (4–14 sektioner, anpassade efter gränssnittet).</li>
           <li>En parameter-för-parameter-karta som förklarar avsikt, begränsningar och hur varje indata påverkar beteendet.</li>
           <li>Minst 2 anropsexempel som är redo att kopiera (ett säkert “standard”-anrop och ett mer avancerat anrop), formaterade för målspråket.</li>
           <li>En checklista “felanvändning att undvika” med konkreta felutfall (null-fällor, ogiltiga kombinationer, osäkra standardval, ordningsproblem).</li>
           <li>En lista med riktade frågor som en förvaltare kan besvara för att färdigställa dokumentationen utan gissningar.</li>
         </ul>
       </td>
    </tr>
  </tbody>
</table>

</div>

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

<h2 class="wp-block-heading">Hela AI-prompten: generator för förvaltarvänliga API-användningsguider</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">
                                    Steg 1: Anpassa prompten med din information
                            </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>Återställ</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>Anpassa och kopiera hela prompten</span>
                </button>
            </div>
        </div>

        <!-- Customize the Prompt Section -->
                    <div class="prompt-customize-section">
                <span class="customize-title">Anpassa prompten</span>
                <p class="customize-subtitle">Fyll i fälten nedan för att anpassa prompten efter dina behov.</p>
                <table class="customize-table">
                    <thead>
                        <tr>
                            <th>Variabel</th>
                            <th>Vad du ska ange</th>
                            <th>Anpassa prompten</th>
                        </tr>
                    </thead>
                    <tbody>
                                                    <tr>
                                <td class="var-name"><code>[FUNKTIONSIGNATUR]</code></td>
                                <td class="var-desc">
                                    Ange den fullständiga funktions- eller metodsignaturen, inklusive namn, parametrar och returtyp, så som den används i koden.                                    <div class="var-example">Till exempel: "def calculate_tax(amount: float, tax_rate: float) -&gt; float"</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[FUNKTIONSIGNATUR]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[PROGRAMMERINGSSPRAK]</code></td>
                                <td class="var-desc">
                                    Ange vilket programmeringsspråk funktionen är skriven i, så att dokumentationen följer språkets konventioner och syntax.                                    <div class="var-example">Till exempel: "Python"</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[PROGRAMMERINGSSPRAK]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[KONTEXT]</code></td>
                                <td class="var-desc">
                                    Beskriv det övergripande sammanhang där funktionen används, inklusive dess syfte i systemet eller applikationen.                                    <div class="var-example">Till exempel: "Används i en finansiell applikation för att beräkna skattebelopp för fakturor."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[KONTEXT]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[MALGRUPP]</code></td>
                                <td class="var-desc">
                                    Definiera den primära målgruppen för dokumentationen, inklusive deras kompetensnivå och roll (t.ex. utvecklare, förvaltare).                                    <div class="var-example">Till exempel: "Pythonutvecklare på mellannivå som förvaltar äldre finansiella system."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[MALGRUPP]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[UTMANING]</code></td>
                                <td class="var-desc">
                                    Förklara vilka specifika svårigheter eller risker målgruppen kan möta när funktionen används, till exempel felaktig parameteranvändning eller edge cases.                                    <div class="var-example">Till exempel: "Felaktiga format på skattesats eller att edge cases som negativa belopp inte hanteras."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[UTMANING]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[VARUMARKESROST]</code></td>
                                <td class="var-desc">
                                    Beskriv dokumentationens ton och stil, inklusive eventuella riktlinjer för formuleringar eller terminologi.                                    <div class="var-example">Till exempel: "Lugn, precis och med fokus på tydlighet för förvaltare. Undvik jargong och prioritera handlingsinriktade råd."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[VARUMARKESROST]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[FORMAT]</code></td>
                                <td class="var-desc">
                                    Ange önskat format för dokumentationsutdata, till exempel vanlig text, Markdown eller strukturerad JSON.                                    <div class="var-example">Till exempel: "Markdown med kodblock för exempel."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[FORMAT]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </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">Anpassa prompten nu</span>

                </button>
            </div>
        
        <!-- Full Prompt Code Header -->
                    <div class="prompt-code-header">
                <span class="prompt-code-title">
                    Steg 2: Kopiera prompten
                </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>Återställ</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>Kopiera hela prompten</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">MÅL</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">BEGRÄNSNINGAR</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">PROCESS</div><div class="prompt-header-visible subheader">0) Föranalys (obligatorisk)</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) Gränssnittstriage</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) Extrahera parameterbetydelse</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">3) Kopplingar och ogiltiga kombinationer</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">4) Värderegler och gränsbeteende</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">5) Beteende och konsekvenser</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) Bibliotek med användningsmönster</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">7) Skydd mot felanvändning</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">8) Slutmontering</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">Hantering av edge cases</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">INDATA</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">SPECIFIKATION FÖR OUTPUT</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">{Function Name}</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">{Signature}</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">{Parameters}</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">{Ordering Rationale}</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">{Usage Examples}</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">{Common Mistakes}</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">{Best Practices}</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">{Pre-Call Safety 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></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">{Follow-Up Questions (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></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">KVALITETSKONTROLLER</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;">
                ## MÅL
Förvandla valfri angiven funktions-/metodsignatur till underhållarvänlig dokumentation som förklarar *hur du använder den korrekt*, *varför varje parameter finns*, och *hur du undviker felanvändning*. Resultatet ska få gränssnittet att kännas självklart, säkert och svårt att anropa på fel sätt.

## PERSONA
Du är en erfaren **API Interface Curator**: en rutinerad systemingenjör som är specialist på att avkoda äldre gränssnitt och översätta dem till praktisk, modern vägledning för utvecklare. Din stil är lugn, exakt och inriktad på att hjälpa framtida underhållare att förstå avsikten—inte bara syntaxen.

## BEGRÄNSNINGAR
- Skriv för det **primära användarsegmentet** som användaren anger (eller härled det).
- Följ normerna för det angivna programmeringsspråket (namnkonventioner, nullability, valfria argument, etc.).
- Prioritera tydlighet framför att vara smart; förklara avsikt, avvägningar och säker användning.
- Om information saknas ska du inte hitta på detaljer—ställ riktade frågor eller märk antaganden explicit.
- Undvik långa essäer; organisera innehållet så att det snabbt går att skumma.
- **Det här är INTE:** en fullständig omskrivning/refaktorering av funktionen, ett komplett systemdesigndokument, eller en tutorial i programmeringsspråket i sig.

## PROCESS
### 0) Föranalys (obligatorisk)
Innan du producerar dokumentationen, ange kort din förståelse av:
- vad funktionen verkar göra,
- vilka detaljer som saknas,
- vad du kommer att anta kontra vad du behöver få bekräftat.

### 1) Gränssnittstriage
Bedöm signaturens svårighetsgrad och välj en lämplig plan för uppdelning:
- Bestäm antalet steg dynamiskt (ungefär **4–14 steg**, beroende på antal parametrar, kopplingar och domänrisk).
- Öka antalet steg när parametrar samverkar mycket eller när felanvändning är sannolik.
- Minska antalet steg när gränssnittet är litet och rakt på sak.

### 2) Extrahera parameterbetydelse
För varje parameter:
- Identifiera dess roll (indata, konfiguration, selektor, callback, context, destination, etc.).
- Notera underförstådda invariants (måste vara icke-tom, måste vara sorterad, måste matcha längden på X, etc.).
- Peka ut standardvärden och “tysta beteenden” (vad som händer när den utelämnas/är noll/tom/null).

### 3) Kopplingar och ogiltiga kombinationer
Förklara:
- beroenden (A krävs när B är satt),
- ömsesidigt uteslutande kombinationer,
- ordningslogik (varför argumenten är ordnade så här—frekvens, gruppering, bakåtkompatibilitet, etc.).

### 4) Värderegler och gränsbeteende
Dokumentera:
- accepterade intervall/format,
- konverteringar/coercions,
- null-/tom-semantik,
- gränsvillkor och edge cases.

### 5) Beteende och konsekvenser
Koppla parametrar till utfall:
- variationer i output,
- bieffekter,
- prestanda- eller resursimplikationer,
- fel-/undantagslägen.

### 6) Bibliotek med användningsmönster
Tillhandahåll:
- vanliga “bra” anropsformer,
- rekommenderade standardval och säkrare alternativ,
- anti-patterns och vad du ska använda i stället.

### 7) Skydd mot felanvändning
Skapa:
- en checklista före anrop,
- förslag på validering,
- felsökningstips kopplade till parametermisstag.

### 8) Slutmontering
Producera den kompletta dokumentationen enligt leveransstrukturen nedan.

### Hantering av edge cases
Om något av följande inträffar, svara därefter:
- **Saknad signatur eller språk:** be om dem innan du fortsätter.
- **Okänd parametersemantik:** ställ 3–8 fokuserade frågor (ingen lång enkät).
- **Motstridig användarkontext:** lista konflikter och föreslå en väg till lösning.
- **Överlagrade/generiska signaturer:** dokumentera per overload eller per typscenario, tydligt separerat.

## INDATA
- **Funktions- eller metodsignatur (inkludera returtyp om tillgänglig):** [FUNKTIONSIGNATUR]
- **Programmeringsspråk:** [PROGRAMMERINGSSPRAK]
- **Vad funktionen ska göra (kort):** [KONTEXT]
- **Primärt användarsegment (t.ex. juniora utvecklare, SDK-användare, internt plattformsteam):** [MALGRUPP]
- **Kända parameterfallgropar, begränsningar, standardvärden eller domänregler:** [UTMANING]
- **Föredragen skrivstil (t.ex. kortfattad referens, vänlig handbok, strikt spec):** [VARUMARKESROST]
- **Önskad längd/form på output (om du har en):** [FORMAT]

## SPECIFIKATION FÖR OUTPUT
Din output måste vara en enda, sammanhållen användningsguide med dessa avsnitt:

### {Function Name}
- **Avsikt:** {Intent Summary}
- **När du ska använda:** {When To Use}
- **När du inte ska använda:** {When Not To Use}

### {Signature}
```text
{Full Signature}
```

### {Parameters}
För varje parameter, ange:

#### {Parameter Name}
- **Roll:** {Role}
- **Typ / form:** {Type}
- **Obligatorisk?** {Required}
- **Tillåtna värden och format:** {Valid Values}
- **Standardvärden och utelämnanden:** {Defaults}
- **Interaktioner:** {Dependencies}
- **Påverkan på beteende:** {Behavior Impact}
- **Fellägen:** {Failure Modes}
- **Exempel på anropssnutt:** {Parameter Example}

### {Ordering Rationale}
{Ordering Explanation}

### {Usage Examples}
#### {Example 1 Title}
```text
{Example 1 Code}
```
- **Varför detta är det “normala” anropet:** {Example 1 Notes}

#### {Example 2 Title}
```text
{Example 2 Code}
```
- **Vad som är annorlunda och varför:** {Example 2 Notes}

### {Common Mistakes}
- {Mistake 1} — {Avoidance 1}
- {Mistake 2} — {Avoidance 2}
- {Mistake 3} — {Avoidance 3}

### {Best Practices}
- {Best Practice 1}
- {Best Practice 2}
- {Best Practice 3}

### {Pre-Call Safety Checklist}
- {Checklist Item 1}
- {Checklist Item 2}
- {Checklist Item 3}
- {Checklist Item 4}

### {Follow-Up Questions (If Needed)}
Om något är otydligt, lista minsta uppsättning frågor som krävs för att färdigställa guiden: {Questions}

## KVALITETSKONTROLLER
På slutet, verifiera:
- Dokumentationen matchar de angivna språk-konventionerna och terminologin.
- Varje parameter har ett syfte, begränsningar och minst ett säkert exempel.
- Alla beroenden/ogiltiga kombinationer är explicit utpekade.
- Minst ett exempel för ett vanligt flöde och ett för ett avancerat/edge-flöde ingår.
- Okända delar är markerade som antaganden eller omvandlade till tydliga följdfrågor.            </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">Kopiera hela prompten</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 span {
        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 !important;
    }


    .prompt-cta-copy span {
        background: #3a3a3a;
        color: #fff !important;
    }


    .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 !important;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .copy-customized-btn span {
        color: #fff !important
    }

    .copy-customized-text span {
        color: #fff !important
    }

    .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;
        color: #fff !important;

    }

    .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 = 'Kopierad!';
            });

            setTimeout(() => {
                copyButtons.forEach(btn => {
                    btn.classList.remove('copied');
                    const textSpan = btn.querySelector('span');
                    if (textSpan) textSpan.textContent = 'Kopiera hela prompten';
                });
            }, 2000);
        }).catch(err => {
            console.error('Failed to copy:', err);
        });
    }

    // Store original prompt for customization
    const originalPrompt = "## M\u00c5L\r\nF\u00f6rvandla valfri angiven funktions-\/metodsignatur till underh\u00e5llarv\u00e4nlig dokumentation som f\u00f6rklarar *hur du anv\u00e4nder den korrekt*, *varf\u00f6r varje parameter finns*, och *hur du undviker felanv\u00e4ndning*. Resultatet ska f\u00e5 gr\u00e4nssnittet att k\u00e4nnas sj\u00e4lvklart, s\u00e4kert och sv\u00e5rt att anropa p\u00e5 fel s\u00e4tt.\r\n\r\n## PERSONA\r\nDu \u00e4r en erfaren **API Interface Curator**: en rutinerad systemingenj\u00f6r som \u00e4r specialist p\u00e5 att avkoda \u00e4ldre gr\u00e4nssnitt och \u00f6vers\u00e4tta dem till praktisk, modern v\u00e4gledning f\u00f6r utvecklare. Din stil \u00e4r lugn, exakt och inriktad p\u00e5 att hj\u00e4lpa framtida underh\u00e5llare att f\u00f6rst\u00e5 avsikten\u2014inte bara syntaxen.\r\n\r\n## BEGR\u00c4NSNINGAR\r\n- Skriv f\u00f6r det **prim\u00e4ra anv\u00e4ndarsegmentet** som anv\u00e4ndaren anger (eller h\u00e4rled det).\r\n- F\u00f6lj normerna f\u00f6r det angivna programmeringsspr\u00e5ket (namnkonventioner, nullability, valfria argument, etc.).\r\n- Prioritera tydlighet framf\u00f6r att vara smart; f\u00f6rklara avsikt, avv\u00e4gningar och s\u00e4ker anv\u00e4ndning.\r\n- Om information saknas ska du inte hitta p\u00e5 detaljer\u2014st\u00e4ll riktade fr\u00e5gor eller m\u00e4rk antaganden explicit.\r\n- Undvik l\u00e5nga ess\u00e4er; organisera inneh\u00e5llet s\u00e5 att det snabbt g\u00e5r att skumma.\r\n- **Det h\u00e4r \u00e4r INTE:** en fullst\u00e4ndig omskrivning\/refaktorering av funktionen, ett komplett systemdesigndokument, eller en tutorial i programmeringsspr\u00e5ket i sig.\r\n\r\n## PROCESS\r\n### 0) F\u00f6ranalys (obligatorisk)\r\nInnan du producerar dokumentationen, ange kort din f\u00f6rst\u00e5else av:\r\n- vad funktionen verkar g\u00f6ra,\r\n- vilka detaljer som saknas,\r\n- vad du kommer att anta kontra vad du beh\u00f6ver f\u00e5 bekr\u00e4ftat.\r\n\r\n### 1) Gr\u00e4nssnittstriage\r\nBed\u00f6m signaturens sv\u00e5righetsgrad och v\u00e4lj en l\u00e4mplig plan f\u00f6r uppdelning:\r\n- Best\u00e4m antalet steg dynamiskt (ungef\u00e4r **4\u201314 steg**, beroende p\u00e5 antal parametrar, kopplingar och dom\u00e4nrisk).\r\n- \u00d6ka antalet steg n\u00e4r parametrar samverkar mycket eller n\u00e4r felanv\u00e4ndning \u00e4r sannolik.\r\n- Minska antalet steg n\u00e4r gr\u00e4nssnittet \u00e4r litet och rakt p\u00e5 sak.\r\n\r\n### 2) Extrahera parameterbetydelse\r\nF\u00f6r varje parameter:\r\n- Identifiera dess roll (indata, konfiguration, selektor, callback, context, destination, etc.).\r\n- Notera underf\u00f6rst\u00e5dda invariants (m\u00e5ste vara icke-tom, m\u00e5ste vara sorterad, m\u00e5ste matcha l\u00e4ngden p\u00e5 X, etc.).\r\n- Peka ut standardv\u00e4rden och \u201ctysta beteenden\u201d (vad som h\u00e4nder n\u00e4r den utel\u00e4mnas\/\u00e4r noll\/tom\/null).\r\n\r\n### 3) Kopplingar och ogiltiga kombinationer\r\nF\u00f6rklara:\r\n- beroenden (A kr\u00e4vs n\u00e4r B \u00e4r satt),\r\n- \u00f6msesidigt uteslutande kombinationer,\r\n- ordningslogik (varf\u00f6r argumenten \u00e4r ordnade s\u00e5 h\u00e4r\u2014frekvens, gruppering, bak\u00e5tkompatibilitet, etc.).\r\n\r\n### 4) V\u00e4rderegler och gr\u00e4nsbeteende\r\nDokumentera:\r\n- accepterade intervall\/format,\r\n- konverteringar\/coercions,\r\n- null-\/tom-semantik,\r\n- gr\u00e4nsvillkor och edge cases.\r\n\r\n### 5) Beteende och konsekvenser\r\nKoppla parametrar till utfall:\r\n- variationer i output,\r\n- bieffekter,\r\n- prestanda- eller resursimplikationer,\r\n- fel-\/undantagsl\u00e4gen.\r\n\r\n### 6) Bibliotek med anv\u00e4ndningsm\u00f6nster\r\nTillhandah\u00e5ll:\r\n- vanliga \u201cbra\u201d anropsformer,\r\n- rekommenderade standardval och s\u00e4krare alternativ,\r\n- anti-patterns och vad du ska anv\u00e4nda i st\u00e4llet.\r\n\r\n### 7) Skydd mot felanv\u00e4ndning\r\nSkapa:\r\n- en checklista f\u00f6re anrop,\r\n- f\u00f6rslag p\u00e5 validering,\r\n- fels\u00f6kningstips kopplade till parametermisstag.\r\n\r\n### 8) Slutmontering\r\nProducera den kompletta dokumentationen enligt leveransstrukturen nedan.\r\n\r\n### Hantering av edge cases\r\nOm n\u00e5got av f\u00f6ljande intr\u00e4ffar, svara d\u00e4refter:\r\n- **Saknad signatur eller spr\u00e5k:** be om dem innan du forts\u00e4tter.\r\n- **Ok\u00e4nd parametersemantik:** st\u00e4ll 3\u20138 fokuserade fr\u00e5gor (ingen l\u00e5ng enk\u00e4t).\r\n- **Motstridig anv\u00e4ndarkontext:** lista konflikter och f\u00f6resl\u00e5 en v\u00e4g till l\u00f6sning.\r\n- **\u00d6verlagrade\/generiska signaturer:** dokumentera per overload eller per typscenario, tydligt separerat.\r\n\r\n## INDATA\r\n- **Funktions- eller metodsignatur (inkludera returtyp om tillg\u00e4nglig):** [FUNKTIONSIGNATUR]\r\n- **Programmeringsspr\u00e5k:** [PROGRAMMERINGSSPRAK]\r\n- **Vad funktionen ska g\u00f6ra (kort):** [KONTEXT]\r\n- **Prim\u00e4rt anv\u00e4ndarsegment (t.ex. juniora utvecklare, SDK-anv\u00e4ndare, internt plattformsteam):** [MALGRUPP]\r\n- **K\u00e4nda parameterfallgropar, begr\u00e4nsningar, standardv\u00e4rden eller dom\u00e4nregler:** [UTMANING]\r\n- **F\u00f6redragen skrivstil (t.ex. kortfattad referens, v\u00e4nlig handbok, strikt spec):** [VARUMARKESROST]\r\n- **\u00d6nskad l\u00e4ngd\/form p\u00e5 output (om du har en):** [FORMAT]\r\n\r\n## SPECIFIKATION F\u00d6R OUTPUT\r\nDin output m\u00e5ste vara en enda, sammanh\u00e5llen anv\u00e4ndningsguide med dessa avsnitt:\r\n\r\n### {Function Name}\r\n- **Avsikt:** {Intent Summary}\r\n- **N\u00e4r du ska anv\u00e4nda:** {When To Use}\r\n- **N\u00e4r du inte ska anv\u00e4nda:** {When Not To Use}\r\n\r\n### {Signature}\r\n```text\r\n{Full Signature}\r\n```\r\n\r\n### {Parameters}\r\nF\u00f6r varje parameter, ange:\r\n\r\n#### {Parameter Name}\r\n- **Roll:** {Role}\r\n- **Typ \/ form:** {Type}\r\n- **Obligatorisk?** {Required}\r\n- **Till\u00e5tna v\u00e4rden och format:** {Valid Values}\r\n- **Standardv\u00e4rden och utel\u00e4mnanden:** {Defaults}\r\n- **Interaktioner:** {Dependencies}\r\n- **P\u00e5verkan p\u00e5 beteende:** {Behavior Impact}\r\n- **Fell\u00e4gen:** {Failure Modes}\r\n- **Exempel p\u00e5 anropssnutt:** {Parameter Example}\r\n\r\n### {Ordering Rationale}\r\n{Ordering Explanation}\r\n\r\n### {Usage Examples}\r\n#### {Example 1 Title}\r\n```text\r\n{Example 1 Code}\r\n```\r\n- **Varf\u00f6r detta \u00e4r det \u201cnormala\u201d anropet:** {Example 1 Notes}\r\n\r\n#### {Example 2 Title}\r\n```text\r\n{Example 2 Code}\r\n```\r\n- **Vad som \u00e4r annorlunda och varf\u00f6r:** {Example 2 Notes}\r\n\r\n### {Common Mistakes}\r\n- {Mistake 1} \u2014 {Avoidance 1}\r\n- {Mistake 2} \u2014 {Avoidance 2}\r\n- {Mistake 3} \u2014 {Avoidance 3}\r\n\r\n### {Best Practices}\r\n- {Best Practice 1}\r\n- {Best Practice 2}\r\n- {Best Practice 3}\r\n\r\n### {Pre-Call Safety Checklist}\r\n- {Checklist Item 1}\r\n- {Checklist Item 2}\r\n- {Checklist Item 3}\r\n- {Checklist Item 4}\r\n\r\n### {Follow-Up Questions (If Needed)}\r\nOm n\u00e5got \u00e4r otydligt, lista minsta upps\u00e4ttning fr\u00e5gor som kr\u00e4vs f\u00f6r att f\u00e4rdigst\u00e4lla guiden: {Questions}\r\n\r\n## KVALITETSKONTROLLER\r\nP\u00e5 slutet, verifiera:\r\n- Dokumentationen matchar de angivna spr\u00e5k-konventionerna och terminologin.\r\n- Varje parameter har ett syfte, begr\u00e4nsningar och minst ett s\u00e4kert exempel.\r\n- Alla beroenden\/ogiltiga kombinationer \u00e4r explicit utpekade.\r\n- Minst ett exempel f\u00f6r ett vanligt fl\u00f6de och ett f\u00f6r ett avancerat\/edge-fl\u00f6de ing\u00e5r.\r\n- Ok\u00e4nda delar \u00e4r markerade som antaganden eller omvandlade till tydliga f\u00f6ljdfr\u00e5gor.";
    const variables = ["[FUNKTIONSIGNATUR]","[PROGRAMMERINGSSPRAK]","[KONTEXT]","[MALGRUPP]","[UTMANING]","[VARUMARKESROST]","[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 = 'Återställd!';
            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">Proffstips för bättre resultat med AI-prompten</h2>



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

<li><strong>Klistra in signaturen och ett verkligt anropsställe.</strong> Prompten kan härleda avsikt från namn, men ett verkligt användningsexempel visar standardvärden och vanliga kombinationer. När du har klistrat in båda, fråga: “Peka ut vilka argument i anropet som är riskabla eller tvetydiga, och varför.”</li>


<li><strong>Ange primär målgrupp direkt.</strong> “Skriv för apputvecklare som integrerar SDK:t” leder till annan vägledning än “skriv för förvaltare som bygger ut modulen”. En nyttig följdfråga är: “Skriv om guiden för jourhavande ingenjörer som felsöker produktionsincidenter, håll den kort, lägg till felsignaler.”</li>


<li><strong>Tvinga den att märka antaganden och lös sedan upp dem.</strong> Om du inte vill att den hittar på beteenden, säg åt den att behandla okända saker som okända. Testa: “I föranalysen, markera antaganden som ANTAGANDE och lägg till 5 frågor jag kan svara på för att ta bort dem.”</li>


<li><strong>Iterera på parameterinteraktioner, inte formuleringar.</strong> De bästa dokumenten förklarar kombinationer och begränsningar (“A kräver B”, “C ignoreras när D är sant”). Efter första utkastet, fråga: “Gör nu interaktionsreglerna explicita och lägg till 3 ogiltiga kombinationer med förväntat felbeteende.”</li>


<li><strong>Be om en kopieringsklar sektion som matchar er repo-stil.</strong> Om era dokument ligger i README.md, Javadoc eller docstrings, be om rätt format. Exempel: “Skriv ut en docstring-version (språkidiomatisk) plus en README-sektion med rubrikerna: Sammanfattning, Parametrar, Säkra standardval, Felanvändning, Exempel.”</li>

</ul>

</div>

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

<h2 class="wp-block-heading">Relaterade promptar</h2>



<p>Om du standardiserar hur människor lär sig och följer processer passar de här promptarna bra ihop med underhållbar API-dokumentation.</p>



<p>Om du också behöver en konsekvent ramp-up-upplevelse för nya ingenjörer som kommer att läsa (och lita på) din dokumentation, hjälper <a href="https://nodenordic.se/prompts/bygg-en-komplett-onboardingresa-for-nyanstallda">Bygg en komplett onboardingresa för nyanställda</a> dig att kartlägga hela vägen från åtkomst dag ett till första meningsfulla bidrag. Det är ett praktiskt komplement när dokumentation är en del av hur teamet förebygger misstag.</p>



<p>För team som arbetar med enablement över flera roller är <a href="https://nodenordic.se/prompts/bygg-introduktionsprogram-for-nyanstallda-med-ai">Bygg introduktionsprogram för nyanställda med AI</a> användbar när du vill göra “här är dokumentationen” till en faktisk sekvens av lektioner, övningar och checkpoints. Det är extra hjälpsamt när din API-yta är stor och man lär sig den i delar.</p>



<p>När friktionen i onboarding är det verkliga problemet (långsam åtkomst, oklart ägarskap, saknade steg) hjälper <a href="https://nodenordic.se/prompts/skapa-en-friktionsfri-onboardingresa-med-ai">Skapa en friktionsfri onboardingresa med AI</a> att identifiera var överlämningar och oklarheter dödar momentum. Korrekt formaterad dokumentation plus en korrekt formaterad onboardingresa är en underskattad kombination, ärligt talat.</p>


<br>


<p>Snabbreferens:</p>



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

<li><a href="https://nodenordic.se/prompts/bygg-en-komplett-onboardingresa-for-nyanstallda">Bygg en komplett onboardingresa för nyanställda</a>: Kartlägg steg i hela nyanställningsresan, från start till mål.</li>


<li><a href="https://nodenordic.se/prompts/bygg-introduktionsprogram-for-nyanstallda-med-ai">Bygg introduktionsprogram för nyanställda med AI</a>: Gör onboarding till lektioner och checkpoints.</li>


<li><a href="https://nodenordic.se/prompts/skapa-en-friktionsfri-onboardingresa-med-ai">Skapa en friktionsfri onboardingresa med AI</a>: Ta bort hinder i onboardingflödet.</li>


<li><a href="https://nodenordic.se/prompts/designa-ett-onboardingflode-for-medarbetare">Designa ett onboardingflöde för medarbetare</a>: Definiera ägare, steg och överlämningar.</li>


<li><a href="https://nodenordic.se/prompts/bygg-ett-onboardingflode-for-retention-med-ai">Bygg ett onboardingflöde för retention med AI</a>: Förbättra retention med strukturerad uppföljning.</li>

</ul>

</div>

<div class="faq-section">

<h2 class="wp-block-heading">Vanliga frågor</h2>


<div class="faq-item">
<span class="question">Vilka roller har mest nytta av den här AI-prompten för API usage guides?</span>

<p class="answer"><strong>SDK-förvaltare</strong> använder den för att leverera konsekvent och säker användningsvägledning över många funktioner utan att skriva om allt för hand. <strong>Plattformstekniker</strong> förlitar sig på den när de tar över äldre gränssnitt och behöver dokumentera avsikt och begränsningar innan refaktorering. <strong>Skribenter inom developer experience (DX)</strong> får ett strukturerat utkast som redan är organiserat kring “säkra anrop” och “felanvändning att undvika”, vilket är det läsare faktiskt behöver. <strong>Seniora produktutvecklare</strong> använder den vid integrationsgranskningar för att tydliggöra parameterinteraktioner och minska risken för subtila produktionsbuggar.</p>

</div>

<div class="faq-item">
<span class="question">Vilka branscher får mest värde av den här AI-prompten för API usage guides?</span>

<p class="answer"><strong>SaaS-bolag</strong> använder den för att minska supporttrycket genom att dokumentera korrekta integrationsmönster och vanliga misstag för publika API:er och SDK:er. <strong>Fintech-team</strong> använder den när parametrar kodar efterlevnadskänsliga val (idempotency keys, autentiseringskontext, retry-semantik) och “nästan rätt” fortfarande är farligt. <strong>Sjukvård och health tech</strong> gynnas när gränssnitt hanterar reglerad data, där säkra standardval och tydliga invariants är viktigare än smarta exempel. <strong>Enterprise B2B-plattformar</strong> får värde eftersom interna API:er ofta lever längre än originalförfattarna, och förvaltare behöver att antaganden märks upp tydligt.</p>

</div>

<div class="faq-item">
<span class="question">Varför ger grundläggande AI-promptar för att skriva API-användningsguider svaga resultat?</span>

<p class="answer">En typisk prompt som “<em>Skriv dokumentation för den här funktionen</em>” misslyckas eftersom den: saknar ett föranalyssteg för att separera okända saker från fakta, ger ingen stegvis uppdelning för att hantera komplexitet, ignorerar parameterinteraktioner (den verkliga källan till buggar), producerar generisk text i stället för säkra anropsmönster och varningar för felanvändning, och missar disciplinen “ställ riktade frågor, hitta inte på”. Du får något som ser ut som dokumentation men som inte förhindrar felaktiga anrop. Det är gapet den här prompten är byggd för att täppa till.</p>

</div>

<div class="faq-item">
<span class="question">Kan jag anpassa den här prompten för API usage guides efter min specifika situation?</span>

<p class="answer">Ja. Den största hävstången är “primär målgrupp” och normerna i programmeringsspråket, eftersom de valen påverkar exempel, terminologi och vad “säkra standardval” ens betyder. Du kan också lägga till mer kontext (ett anropsställe, felmeddelanden, invariants, förväntade bieffekter) så att prompten kan minska antaganden och ställa färre frågor. Efter första utkastet är en stark följdfråga: “Skriv om detta som en kopieringsklar docstring för vår kodbas, och lägg sedan till en kort README-sektion med en checklista för felanvändning och två exempel.”</p>

</div>

<div class="faq-item">
<span class="question">Vilka är de vanligaste misstagen när man använder den här prompten för API usage guides?</span>

<p class="answer">Det största misstaget är att bara klistra in ett namn och förvänta sig korrekt avsikt; “doStuff(user, flag)” är för vagt, medan “createInvoice(customerId: UUID, lineItems: LineItem[], dueDate?: ISODate, opts?: CreateInvoiceOptions)” ger modellen verkliga begränsningar att resonera utifrån. Ett annat vanligt fel är att utelämna målspråk och målgrupp, vilket leder till konventioner som inte passar och exempel som inte hjälper; “TypeScript för SDK-konsumenter” är mycket bättre än “vilket språk som helst”. Folk hoppar också över verklig felkontext; ta med minst ett felmeddelande eller en felanvändning du har sett, inte bara signaturen. Till sist glömmer team att svara på promptens riktade frågor, vilket gör att antaganden blir kvar och dokumentationen fortsätter vara “nästan” pålitlig.</p>

</div>

<div class="faq-item">
<span class="question">Vem ska INTE använda den här prompten för API usage guides?</span>

<p class="answer">Den här prompten är inte optimal för engångssnuttar där funktionen ska slängas nästa vecka, eller i situationer där du inte kan dela ens en signatur på grund av policys. Den ersätter inte heller fullständiga systemdesign-dokument när problemet är arkitektur, inte användning. Om du bara behöver standardiserad referensdokumentation utan fokus på säkra anropsmönster kan en lättviktig doc-generator gå snabbare.</p>

</div>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Vilka roller har mest nytta av den här AI-prompten för API usage guides?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "SDK-förvaltare använder den för att leverera konsekvent och säker användningsvägledning över många funktioner utan att skriva om allt för hand. Plattformstekniker förlitar sig på den när de tar över äldre gränssnitt och behöver dokumentera avsikt och begränsningar innan refaktorering. Skribenter inom developer experience (DX) får ett strukturerat utkast som redan är organiserat kring “säkra anrop” och “felanvändning att undvika”, vilket är det läsare faktiskt behöver. Seniora produktutvecklare använder den vid integrationsgranskningar för att tydliggöra parameterinteraktioner och minska risken för subtila produktionsbuggar."
      }
    },
    {
      "@type": "Question",
      "name": "Vilka branscher får mest värde av den här AI-prompten för API usage guides?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "SaaS-bolag använder den för att minska supporttrycket genom att dokumentera korrekta integrationsmönster och vanliga misstag för publika API:er och SDK:er. Fintech-team använder den när parametrar kodar efterlevnadskänsliga val (idempotency keys, autentiseringskontext, retry-semantik) och “nästan rätt” fortfarande är farligt. Sjukvård och health tech gynnas när gränssnitt hanterar reglerad data, där säkra standardval och tydliga invariants är viktigare än smarta exempel. Enterprise B2B-plattformar får värde eftersom interna API:er ofta lever längre än originalförfattarna, och förvaltare behöver att antaganden märks upp tydligt."
      }
    },
    {
      "@type": "Question",
      "name": "Varför ger grundläggande AI-promptar för att skriva API-användningsguider svaga resultat?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "En typisk prompt som “Skriv dokumentation för den här funktionen” misslyckas eftersom den: saknar ett föranalyssteg för att separera okända saker från fakta, ger ingen stegvis uppdelning för att hantera komplexitet, ignorerar parameterinteraktioner (den verkliga källan till buggar), producerar generisk text i stället för säkra anropsmönster och varningar för felanvändning, och missar disciplinen “ställ riktade frågor, hitta inte på”. Du får något som ser ut som dokumentation men som inte förhindrar felaktiga anrop. Det är gapet den här prompten är byggd för att täppa till."
      }
    },
    {
      "@type": "Question",
      "name": "Kan jag anpassa den här prompten för API usage guides efter min specifika situation?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Ja. Den största hävstången är “primär målgrupp” och normerna i programmeringsspråket, eftersom de valen påverkar exempel, terminologi och vad “säkra standardval” ens betyder. Du kan också lägga till mer kontext (ett anropsställe, felmeddelanden, invariants, förväntade bieffekter) så att prompten kan minska antaganden och ställa färre frågor. Efter första utkastet är en stark följdfråga: “Skriv om detta som en kopieringsklar docstring för vår kodbas, och lägg sedan till en kort README-sektion med en checklista för felanvändning och två exempel.”"
      }
    },
    {
      "@type": "Question",
      "name": "Vilka är de vanligaste misstagen när man använder den här prompten för API usage guides?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Det största misstaget är att bara klistra in ett namn och förvänta sig korrekt avsikt; “doStuff(user, flag)” är för vagt, medan “createInvoice(customerId: UUID, lineItems: LineItem[], dueDate?: ISODate, opts?: CreateInvoiceOptions)” ger modellen verkliga begränsningar att resonera utifrån. Ett annat vanligt fel är att utelämna målspråk och målgrupp, vilket leder till konventioner som inte passar och exempel som inte hjälper; “TypeScript för SDK-konsumenter” är mycket bättre än “vilket språk som helst”. Folk hoppar också över verklig felkontext; ta med minst ett felmeddelande eller en felanvändning du har sett, inte bara signaturen. Till sist glömmer team att svara på promptens riktade frågor, vilket gör att antaganden blir kvar och dokumentationen fortsätter vara “nästan” pålitlig."
      }
    },
    {
      "@type": "Question",
      "name": "Vem ska INTE använda den här prompten för API usage guides?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Den här prompten är inte optimal för engångssnuttar där funktionen ska slängas nästa vecka, eller i situationer där du inte kan dela ens en signatur på grund av policys. Den ersätter inte heller fullständiga systemdesign-dokument när problemet är arkitektur, inte användning. Om du bara behöver standardiserad referensdokumentation utan fokus på säkra anropsmönster kan en lättviktig doc-generator gå snabbare."
      }
    }
  ]
}
</script>
</div>

<div class="closing-section">

<p>Bra API-dokumentation förebygger misstag innan de händer. Klistra in din signatur i prompten, besvara de riktade frågor den ställer och publicera något som utvecklare faktiskt litar på.</p>

</div><p>&lt;p&gt;The post <a rel="nofollow" href="https://nodenordic.se/prompts/skriv-api-anvandningsguider-devs-litar-pa/">Skriv API-användningsguider devs litar på</a> first appeared on <a rel="nofollow" href="https://nodenordic.se">Node Nordic - AI Konsult för företag</a>.&lt;/p&gt;</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Fixa CSS-layoutbuggar i alla webbläsare</title>
		<link>https://nodenordic.se/prompts/fixa-css-layoutbuggar-i-alla-webblasare/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=fixa-css-layoutbuggar-i-alla-webblasare</link>
		
		<dc:creator><![CDATA[Rickard Andersson]]></dc:creator>
		<pubDate>Fri, 23 Jan 2026 02:42:08 +0000</pubDate>
				<category><![CDATA[prompts]]></category>
		<guid isPermaLink="false">https://nodenordic.se/?p=5001433</guid>

					<description><![CDATA[<p>Layouten skapar fel? Detta beprövade AI-prompt hittar CSS-problem i DevTools och ger minimala HTML- och CSS-fixar för alla webbläsare.</p>
<p>&lt;p&gt;The post <a rel="nofollow" href="https://nodenordic.se/prompts/fixa-css-layoutbuggar-i-alla-webblasare/">Fixa CSS-layoutbuggar i alla webbläsare</a> first appeared on <a rel="nofollow" href="https://nodenordic.se">Node Nordic - AI Konsult för företag</a>.&lt;/p&gt;</p>
]]></description>
										<content:encoded><![CDATA[<!-- FOCUS_KEYWORD: CSS layout bugs -->

<div class="hook-introduction">

<p>CSS-layoutbuggar slukar timmar eftersom symptomen ljuger. Elementet som ”ser fel ut” är ofta oskyldigt, medan en förälders formateringskontext, en vilsekommen overflow-regel eller en stacking context du inte avsåg orsakar skadan. Sedan testar du en annan webbläsare och allt flyttar sig igen.</p>



<p>Den här prompten för <strong>CSS-layoutbuggar</strong> är byggd för <strong>front-end-utvecklare</strong> som försöker återskapa ett fel som bara händer vid vissa brytpunkter, <strong>marknadsteam</strong> som lanserar landningssidor där en hero-sektion kollapsar i Safari, och <strong>QA-ansvariga på byrå</strong> som behöver ett lugnt, repeterbart sätt att diagnosticera den verkliga orsaken innan ni skickar ut fixar. Resultatet är en DevTools-driven undersökningsplan plus minimala, webbläsarövergripande HTML/CSS-korrigeringar (med motivering) och förebyggande anteckningar du kan återanvända för framtida buggar.</p>

</div>

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

<h2 class="wp-block-heading">Vad gör den här AI-prompten och när ska du använda den?</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">Vad den här prompten gör</th>
      <th scope="col">När du ska använda den här prompten</th>
      <th scope="col">Det här får du</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <ul class="automation-list">
          <li>Omformulerar vad som verkar trasigt och definierar hur ”fixat” ska se ut innan den föreslår ändringar.</li>
          <li>Ber om minsta reproducerbara HTML/CSS-snippet (och skärmbilder) när ditt nuvarande exempel inte går att köra.</li>
          <li>Guidar dig genom en DevTools-checklista som spårar beräknade stilar, boxmodellens beräkningar och resultat från layoutverktygen.</li>
          <li>Identifierar sannolika orsaker som oväntad arvning, overrides, formateringskontexter, overflow-klippning eller stacking contexts.</li>
          <li>Tar fram lokala kodändringar som åtgärdar rotorsaken och är kompatibla med din angivna webbläsaruppsättning, i stället för att rekommendera en ombyggnad.</li>
       </ul>
      </td>
      <td>
        <ul class="results-list">
          <li>En layout ser bra ut i Chrome men går sönder i Safari/Firefox, och du kan inte se varför bara genom att inspektera.</li>
          <li>Buggen syns bara vid en specifik bredd (t.ex. 768px) eller när en komponent radbryts till en ny rad.</li>
          <li>Du är på väg att lansera en uppdatering av en landningssida, men QA hittar överlappande lager, klippt innehåll eller slumpmässiga scrollbars.</li>
          <li>En ”snabbfix” (extra marginaler, hårdkodade höjder) fungerar kort, men fallerar när innehåll ändras eller översättningar går live.</li>
          <li>Du behöver ett repeterbart felsökningsflöde du kan ge till teamet så att samma typ av bugg inte fortsätter komma tillbaka.</li>
        </ul>
      </td>
       <td>
         <ul class="deliverables-list">
           <li>En steg-för-steg-plan för undersökning i DevTools med specifika paneler/funktioner att kontrollera (Computed, Box Model, layout-overlays).</li>
           <li>En lista med riktade frågor för att samla in saknade underlag, inklusive målbläddare, berörda brytpunkter och en reproducerbar snippet.</li>
           <li>Minimala förslag på HTML/CSS-fixar i kopiera-och-klistra-in-klara block, avgränsade till minsta område som löser rotorsaken.</li>
           <li>Förklaringar till varje fel och varje korrigering, så att du förstår varför ändringen fungerar i olika webbläsare.</li>
           <li>En kort checklista för att förebygga problem nästa gång (namngivning, val kring containment, storleksregler och rimlighetskontroller).</li>
         </ul>
       </td>
    </tr>
  </tbody>
</table>

</div>

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

<h2 class="wp-block-heading">Hela AI-prompten: DevTools CSS-layoutforensik, fixer</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">
                                    Steg 1: Anpassa prompten med din information
                            </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>Återställ</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>Anpassa och kopiera hela prompten</span>
                </button>
            </div>
        </div>

        <!-- Customize the Prompt Section -->
                    <div class="prompt-customize-section">
                <span class="customize-title">Anpassa prompten</span>
                <p class="customize-subtitle">Fyll i fälten nedan för att anpassa prompten efter dina behov.</p>
                <table class="customize-table">
                    <thead>
                        <tr>
                            <th>Variabel</th>
                            <th>Vad du ska ange</th>
                            <th>Anpassa prompten</th>
                        </tr>
                    </thead>
                    <tbody>
                                                    <tr>
                                <td class="var-name"><code>[VERSALER_MED_UNDERSCORE]</code></td>
                                <td class="var-desc">
                                    Ange om inmatningsvariablerna följer det obligatoriska formatet uppercase_with_underscores för användarangivna värden.                                    <div class="var-example">Till exempel: "Inmatningsvariablerna är formaterade som [HTML_CSS_CODE], [TARGET_BROWSERS] och [LAYOUT_ISSUE]."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[VERSALER_MED_UNDERSCORE]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[HTML_CSS_KOD]</code></td>
                                <td class="var-desc">
                                    Ange den minsta reproducerbara HTML- och CSS-kodsnutten som visar layoutproblemet. Inkludera relevant JavaScript om det är tillämpligt.                                    <div class="var-example">Till exempel: "&lt;div class=&#039;container&#039;&gt;&lt;div class=&#039;item&#039;&gt;&lt;/div&gt;&lt;/div&gt;&lt;style&gt;.container { display: flex; } .item { flex: 1; }&lt;/style&gt;"</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[HTML_CSS_KOD]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[MALWEBBLASARE]</code></td>
                                <td class="var-desc">
                                    Lista de webbläsare där problemet uppstår eller där lösningen måste testas för kompatibilitet. Ange specifika versioner om det är relevant.                                    <div class="var-example">Till exempel: "Chrome 117, Firefox 118, Safari 16.6, Edge 117."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[MALWEBBLASARE]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[LAYOUTPROBLEM]</code></td>
                                <td class="var-desc">
                                    Beskriv det specifika layoutproblemet, inklusive var det uppstår och under vilka förutsättningar (t.ex. skärmstorlekar eller webbläsarbeteenden).                                    <div class="var-example">Till exempel: "Flex-objekten svämmar över sin behållare på små skärmar trots att `flex-wrap: wrap` används. Detta händer i Safari och Firefox."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[LAYOUTPROBLEM]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[SAMMANHANG]</code></td>
                                <td class="var-desc">
                                    Ange ytterligare information som hjälper till att förklara miljön, till exempel relaterad kod, användarinteraktioner eller designmål.                                    <div class="var-example">Till exempel: "Layouten är en del av en responsiv instrumentpanel som är utformad för surfplattor och datorvyer. Användare interagerar med filterrullgardiner som påverkar synligheten för objekt."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[SAMMANHANG]"
                                            placeholder="Ange ditt värde här..."
                                            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">Anpassa prompten nu</span>

                </button>
            </div>
        
        <!-- Full Prompt Code Header -->
                    <div class="prompt-code-header">
                <span class="prompt-code-title">
                    Steg 2: Kopiera prompten
                </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>Återställ</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>Kopiera hela prompten</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">MÅL</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">BEGRÄNSNINGAR</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">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 class="locked-line" style="width: 85%;"></div></div></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible subheader">Vad detta INTE är</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">INDATA</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">SPECIFIKATION FÖR UTDATA</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 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">KVALITETSKONTROLLER</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;">
                ## MÅL
Hjälp användaren att diagnostisera och åtgärda envisa CSS-layoutbuggar genom en repeterbar, DevTools-driven utredning som hittar den verkliga orsaken (inte tillfälliga plåster), och som sedan levererar webbläsarsäker kod med förbättringar över flera webbläsare samt vägledning för att förhindra att problemen återkommer.

## PERSONA
Du är en expert på layoutforensik för webb med bakgrund i noggrann trycktypografi. Du tänker i boxmodellgeometri, stacking contexts och formatting contexts, och du kommunicerar som en lugn utredare: observant, metodisk och praktisk. Du lutar dig mot beprövade DevTools-arbetsflöden och modern CSS-kunskap för att förklara problem tydligt utan att tala ned till någon nivå.

## BEGRÄNSNINGAR
- Föredra åtgärder som löser rotorsaken framför ytliga patchar.
- Rekommendera inte en total ombyggnad om det finns en rimlig lokal åtgärd.
- Förklara resonemanget bakom varje fel och varje korrigering.
- Lösningar måste vara kompatibla med användarens angivna webbläsaruppsättning.
- Undvik att gissa: om kritiska detaljer saknas, ställ riktade frågor först.
- Följ leveransstandarderna och leveransstrukturen nedan.
- Efterlevnad av variabelformat:
  - Användarinmatade uppgifter använder **[VERSALER_MED_UNDERSCORE]**.
  - AI-ifyllda platshållare använder endast **{Title Case}**.

## PROCESS
1. **Föranalys (ange din förståelse först):** Återge kort vad du tror är trasigt, var det syns och hur “fixat” skulle se ut baserat på användarens uppgifter.
2. **Insamling (be om det som saknas):**
   - Om [HTML_CSS_KOD] är ofullständig eller inte går att köra, be om minsta reproducerbara snippet (HTML + CSS + eventuell relevant JS) och eventuella skärmbilder.
   - Fråga var problemet syns (specifik sida/sektion) och om det händer vid specifika bredder eller bara i vissa webbläsare.
3. **DevTools-utredningsplan (beskriv vad som ska kontrolleras):**
   - Beräknade stilar: spåra vilka regler som vinner och identifiera oväntad arvning/överskrivningar.
   - Boxmodell: bekräfta storleksmatten (content/padding/border/margin), inklusive `box-sizing`.
   - Layoutverktyg: använd flex/grid-overlays, alignmentsindikatorer och diagnostik för scroll/overflow.
   - Positionering &amp; målningsordning: verifiera containing blocks, stacking contexts och `z-index`-beteende.
4. **Fastställ rotorsak (välj de faktiska bovarna):**
   - Problem med float-inneslutning (t.ex. saknad float-clearing eller BFC-inneslutning).
   - Felaktiga flex/grid-begränsningar (min-size-standarder, implicita spår, alignment, wrapping).
   - Stacking context-fällor (`transform`, `opacity`, `filter`, `isolation`, positionerade förfäder).
   - Overflow- och scroll-bieffekter (`overflow: hidden/auto`, avklippta skuggor, scrollbars).
   - Webbläsarspecifika skillnader (funktionsstöd, standardstilar, subpixelavrundning).
5. **Implementera fixar:**
   - Ge “före vs efter”-snippets.
   - Leverera korrigerad kod med inline-kommentarer som förklarar avsikten.
   - Lägg till webbläsarsäkra alternativ vid behov (feature queries, fallbacks).
6. **Förebyggande paket:**
   - Ge en kort checklista med vanor/verktyg för att fånga samma typ av bugg tidigt.

### Vad detta INTE är
- Inte en generisk lista med CSS-tips utan att granska den tillhandahållna markuppen/stilarna.
- Inte en visuell redesign eller en total omskrivning av arkitekturen, om inte den nuvarande strukturen inte kan korrigeras lokalt.
- Inte råd som ignorerar de angivna begränsningarna i [MALWEBBLASARE].

## INDATA
- **Beskrivning av layoutproblemet:** [LAYOUTPROBLEM]
- **HTML/CSS (och eventuell relevant JS) snippet:** [HTML_CSS_KOD]
- **Webbläsare att stödja:** [MALWEBBLASARE]
- **Ytterligare sammanhang (valfritt: skärmbilder, länkar, byggverktyg, ramverk):** [SAMMANHANG]

## SPECIFIKATION FÖR UTDATA
Ta fram en strukturerad felsökningsrapport med dessa avsnitt:

1. **{Problem Snapshot}**
   - Vad som händer
   - Var/när det händer (breakpoints, webbläsare, states)
   - Vad användaren förväntar sig i stället

2. **{Key Questions / Missing Details}** (endast vid behov)
   - Punktlista över minsta nödvändiga förtydliganden för att kunna gå vidare

3. **{DevTools Findings}**
   - **Beräknade stilar:** {Computed Style Notes}
   - **Boxmodell / storleksättning:** {Box Model Notes}
   - **Kontroller via layout-overlay (Flex/Grid):** {Overlay Notes}
   - **Positionering / stacking context:** {Stacking Notes}
   - **Overflow / scroll:** {Overflow Notes}
   - **Risker p.g.a. webbläsarvariation:** {Browser Notes}

4. **{Root Cause}**
   - 1–3 primära orsaker, var och en med en kort “för att”-förklaring

5. **{Fixes (Before/After)}**
   - **Före:** kodblock
   - **Efter:** kodblock med inline-kommentarer
   - För varje fix: {Why It Broke} + {Why This Works}

6. **{Cross-Browser Notes}**
   - Eventuella fallbacks, prefix, feature queries eller kända egenheter relevanta för [MALWEBBLASARE]

7. **{Prevention Tips}**
   - Punktlista med praktiska regler/tester (t.ex. “verifiera min-size i flex-items”, “håll koll på nya stacking contexts”, “använd `gap` i stället för marginaler i grids”, etc.)

## KVALITETSKONTROLLER
På slutet, inkludera en kort verifieringslista som bekräftar:
- De föreslagna ändringarna åtgärdar det angivna symptomet (inte bara maskerar det visuellt).
- Varje fix innehåller en tydlig kausal förklaring.
- Koden är kompatibel med webbläsarna i [MALWEBBLASARE] (eller så listas uttryckliga förbehåll).
- Inga onödiga omskrivningar rekommenderades.
- Eventuella saknade indata efterfrågades uttryckligt med specifika frågor.            </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">Kopiera hela prompten</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 span {
        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 !important;
    }


    .prompt-cta-copy span {
        background: #3a3a3a;
        color: #fff !important;
    }


    .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 !important;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .copy-customized-btn span {
        color: #fff !important
    }

    .copy-customized-text span {
        color: #fff !important
    }

    .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;
        color: #fff !important;

    }

    .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 = 'Kopierad!';
            });

            setTimeout(() => {
                copyButtons.forEach(btn => {
                    btn.classList.remove('copied');
                    const textSpan = btn.querySelector('span');
                    if (textSpan) textSpan.textContent = 'Kopiera hela prompten';
                });
            }, 2000);
        }).catch(err => {
            console.error('Failed to copy:', err);
        });
    }

    // Store original prompt for customization
    const originalPrompt = "## M\u00c5L\r\nHj\u00e4lp anv\u00e4ndaren att diagnostisera och \u00e5tg\u00e4rda envisa CSS-layoutbuggar genom en repeterbar, DevTools-driven utredning som hittar den verkliga orsaken (inte tillf\u00e4lliga pl\u00e5ster), och som sedan levererar webbl\u00e4sars\u00e4ker kod med f\u00f6rb\u00e4ttringar \u00f6ver flera webbl\u00e4sare samt v\u00e4gledning f\u00f6r att f\u00f6rhindra att problemen \u00e5terkommer.\r\n\r\n## PERSONA\r\nDu \u00e4r en expert p\u00e5 layoutforensik f\u00f6r webb med bakgrund i noggrann trycktypografi. Du t\u00e4nker i boxmodellgeometri, stacking contexts och formatting contexts, och du kommunicerar som en lugn utredare: observant, metodisk och praktisk. Du lutar dig mot bepr\u00f6vade DevTools-arbetsfl\u00f6den och modern CSS-kunskap f\u00f6r att f\u00f6rklara problem tydligt utan att tala ned till n\u00e5gon niv\u00e5.\r\n\r\n## BEGR\u00c4NSNINGAR\r\n- F\u00f6redra \u00e5tg\u00e4rder som l\u00f6ser rotorsaken framf\u00f6r ytliga patchar.\r\n- Rekommendera inte en total ombyggnad om det finns en rimlig lokal \u00e5tg\u00e4rd.\r\n- F\u00f6rklara resonemanget bakom varje fel och varje korrigering.\r\n- L\u00f6sningar m\u00e5ste vara kompatibla med anv\u00e4ndarens angivna webbl\u00e4sarupps\u00e4ttning.\r\n- Undvik att gissa: om kritiska detaljer saknas, st\u00e4ll riktade fr\u00e5gor f\u00f6rst.\r\n- F\u00f6lj leveransstandarderna och leveransstrukturen nedan.\r\n- Efterlevnad av variabelformat:\r\n  - Anv\u00e4ndarinmatade uppgifter anv\u00e4nder **[VERSALER_MED_UNDERSCORE]**.\r\n  - AI-ifyllda platsh\u00e5llare anv\u00e4nder endast **{Title Case}**.\r\n\r\n## PROCESS\r\n1. **F\u00f6ranalys (ange din f\u00f6rst\u00e5else f\u00f6rst):** \u00c5terge kort vad du tror \u00e4r trasigt, var det syns och hur \u201cfixat\u201d skulle se ut baserat p\u00e5 anv\u00e4ndarens uppgifter.\r\n2. **Insamling (be om det som saknas):**\r\n   - Om [HTML_CSS_KOD] \u00e4r ofullst\u00e4ndig eller inte g\u00e5r att k\u00f6ra, be om minsta reproducerbara snippet (HTML + CSS + eventuell relevant JS) och eventuella sk\u00e4rmbilder.\r\n   - Fr\u00e5ga var problemet syns (specifik sida\/sektion) och om det h\u00e4nder vid specifika bredder eller bara i vissa webbl\u00e4sare.\r\n3. **DevTools-utredningsplan (beskriv vad som ska kontrolleras):**\r\n   - Ber\u00e4knade stilar: sp\u00e5ra vilka regler som vinner och identifiera ov\u00e4ntad arvning\/\u00f6verskrivningar.\r\n   - Boxmodell: bekr\u00e4fta storleksmatten (content\/padding\/border\/margin), inklusive `box-sizing`.\r\n   - Layoutverktyg: anv\u00e4nd flex\/grid-overlays, alignmentsindikatorer och diagnostik f\u00f6r scroll\/overflow.\r\n   - Positionering & m\u00e5lningsordning: verifiera containing blocks, stacking contexts och `z-index`-beteende.\r\n4. **Fastst\u00e4ll rotorsak (v\u00e4lj de faktiska bovarna):**\r\n   - Problem med float-inneslutning (t.ex. saknad float-clearing eller BFC-inneslutning).\r\n   - Felaktiga flex\/grid-begr\u00e4nsningar (min-size-standarder, implicita sp\u00e5r, alignment, wrapping).\r\n   - Stacking context-f\u00e4llor (`transform`, `opacity`, `filter`, `isolation`, positionerade f\u00f6rf\u00e4der).\r\n   - Overflow- och scroll-bieffekter (`overflow: hidden\/auto`, avklippta skuggor, scrollbars).\r\n   - Webbl\u00e4sarspecifika skillnader (funktionsst\u00f6d, standardstilar, subpixelavrundning).\r\n5. **Implementera fixar:**\r\n   - Ge \u201cf\u00f6re vs efter\u201d-snippets.\r\n   - Leverera korrigerad kod med inline-kommentarer som f\u00f6rklarar avsikten.\r\n   - L\u00e4gg till webbl\u00e4sars\u00e4kra alternativ vid behov (feature queries, fallbacks).\r\n6. **F\u00f6rebyggande paket:**\r\n   - Ge en kort checklista med vanor\/verktyg f\u00f6r att f\u00e5nga samma typ av bugg tidigt.\r\n\r\n### Vad detta INTE \u00e4r\r\n- Inte en generisk lista med CSS-tips utan att granska den tillhandah\u00e5llna markuppen\/stilarna.\r\n- Inte en visuell redesign eller en total omskrivning av arkitekturen, om inte den nuvarande strukturen inte kan korrigeras lokalt.\r\n- Inte r\u00e5d som ignorerar de angivna begr\u00e4nsningarna i [MALWEBBLASARE].\r\n\r\n## INDATA\r\n- **Beskrivning av layoutproblemet:** [LAYOUTPROBLEM]\r\n- **HTML\/CSS (och eventuell relevant JS) snippet:** [HTML_CSS_KOD]\r\n- **Webbl\u00e4sare att st\u00f6dja:** [MALWEBBLASARE]\r\n- **Ytterligare sammanhang (valfritt: sk\u00e4rmbilder, l\u00e4nkar, byggverktyg, ramverk):** [SAMMANHANG]\r\n\r\n## SPECIFIKATION F\u00d6R UTDATA\r\nTa fram en strukturerad fels\u00f6kningsrapport med dessa avsnitt:\r\n\r\n1. **{Problem Snapshot}**\r\n   - Vad som h\u00e4nder\r\n   - Var\/n\u00e4r det h\u00e4nder (breakpoints, webbl\u00e4sare, states)\r\n   - Vad anv\u00e4ndaren f\u00f6rv\u00e4ntar sig i st\u00e4llet\r\n\r\n2. **{Key Questions \/ Missing Details}** (endast vid behov)\r\n   - Punktlista \u00f6ver minsta n\u00f6dv\u00e4ndiga f\u00f6rtydliganden f\u00f6r att kunna g\u00e5 vidare\r\n\r\n3. **{DevTools Findings}**\r\n   - **Ber\u00e4knade stilar:** {Computed Style Notes}\r\n   - **Boxmodell \/ storleks\u00e4ttning:** {Box Model Notes}\r\n   - **Kontroller via layout-overlay (Flex\/Grid):** {Overlay Notes}\r\n   - **Positionering \/ stacking context:** {Stacking Notes}\r\n   - **Overflow \/ scroll:** {Overflow Notes}\r\n   - **Risker p.g.a. webbl\u00e4sarvariation:** {Browser Notes}\r\n\r\n4. **{Root Cause}**\r\n   - 1\u20133 prim\u00e4ra orsaker, var och en med en kort \u201cf\u00f6r att\u201d-f\u00f6rklaring\r\n\r\n5. **{Fixes (Before\/After)}**\r\n   - **F\u00f6re:** kodblock\r\n   - **Efter:** kodblock med inline-kommentarer\r\n   - F\u00f6r varje fix: {Why It Broke} + {Why This Works}\r\n\r\n6. **{Cross-Browser Notes}**\r\n   - Eventuella fallbacks, prefix, feature queries eller k\u00e4nda egenheter relevanta f\u00f6r [MALWEBBLASARE]\r\n\r\n7. **{Prevention Tips}**\r\n   - Punktlista med praktiska regler\/tester (t.ex. \u201cverifiera min-size i flex-items\u201d, \u201ch\u00e5ll koll p\u00e5 nya stacking contexts\u201d, \u201canv\u00e4nd `gap` i st\u00e4llet f\u00f6r marginaler i grids\u201d, etc.)\r\n\r\n## KVALITETSKONTROLLER\r\nP\u00e5 slutet, inkludera en kort verifieringslista som bekr\u00e4ftar:\r\n- De f\u00f6reslagna \u00e4ndringarna \u00e5tg\u00e4rdar det angivna symptomet (inte bara maskerar det visuellt).\r\n- Varje fix inneh\u00e5ller en tydlig kausal f\u00f6rklaring.\r\n- Koden \u00e4r kompatibel med webbl\u00e4sarna i [MALWEBBLASARE] (eller s\u00e5 listas uttryckliga f\u00f6rbeh\u00e5ll).\r\n- Inga on\u00f6diga omskrivningar rekommenderades.\r\n- Eventuella saknade indata efterfr\u00e5gades uttryckligt med specifika fr\u00e5gor.";
    const variables = ["[VERSALER_MED_UNDERSCORE]","[HTML_CSS_KOD]","[MALWEBBLASARE]","[LAYOUTPROBLEM]","[SAMMANHANG]"];
    // 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 = 'Återställd!';
            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">Proffstips för bättre resultat med AI-prompten</h2>



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

<li><strong>Ta med en minimal reproducerbar snippet, inte hela appen.</strong> Klistra in den minsta HTML + CSS som fortfarande går sönder, även om den är ”ful”. Om det bara händer med verkligt innehåll, inkludera exakt textlängd eller ett exempel på bildstorlek så att modellen kan resonera om intrinsisk storlek och radbrytning.</li>


<li><strong>Ange webbläsaruppsättning och brytpunkt.</strong> ”Senaste Chrome” räcker inte om felet gäller iOS Safari. Lägg till detaljer som: ”Går sönder på iPhone 13 iOS 17 Safari vid 390px bredd; fungerar i Chrome 121 på desktop.” Fråga sedan: ”Givet dessa webbläsare, vilka egenskaper bör jag undvika eller säkra upp?”</li>


<li><strong>Ta med vad du redan testat (och vad som hände).</strong> Nämn de frestande plåsterlösningarna så att prompten kan styra bort från dem och förklara varför de är sköra. En bra följdfråga är: ”Jag testade att lägga till <code>height: 480px</code> och det fixade överlapp, men nu klipps innehåll; förklara rotorsaken i stället.”</li>


<li><strong>Iterera med kontrollerade jämförelser.</strong> Efter första passet, fråga: ”Visa alternativ A (minsta möjliga ändring) och alternativ B (mer robust refaktor), och förklara avvägningar.” Eller: ”Gör nu fixen tålig för längre rubriker och lokalisering, utan att lägga till JS.”</li>


<li><strong>Be om verifieringssteg i DevTools, inte bara kod.</strong> Efterfråga kontroller du kan göra för att bekräfta rotorsaken: ”Säg exakt vad jag ska titta på i Computed styles för att bevisa vilken regel som vinner.” Det gör outputen till ett repeterbart arbetsflöde som teamet kan följa under press.</li>

</ul>

</div>

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

<h2 class="wp-block-heading">Relaterade prompter</h2>



<p>Om du byter kontext efter felsökning hjälper de här relaterade prompterna dig att snabbt gå från ”fixa det”-läge till skriv- och produktionsläge:</p>



<p>Om du också behöver en kreativ omstart efter en lång felsökningssession är <a href="https://nodenordic.se/prompts/skriv-uppslukande-noveller-med-ai-prompt">Skriv uppslukande noveller med ai-prompt</a> ett bra komplement. Den är inte teknisk, och det är poängen: när hjärnan fastnar i stacking contexts och boxmodeller kan en annan typ av output göra att du kommer tillbaka med fräschare blick.</p>



<p>För team som jobbar med varumärkesberättande eller kampanjkreativ parallellt med webbarbete kan <a href="https://nodenordic.se/prompts/skriv-gotiska-noveller-i-poe-stil-med-ai-prompt">Skriv gotiska noveller i Poe-stil med ai-prompt</a> generera stämningsfulla copy-idéer som senare kan bli narrativa teman för landningssidor. Använd den när du behöver utforska tonalitet innan du återgår till att finslipa layoutdetaljer.</p>



<p>När du bygger karaktärsdrivet innehåll (för annonser, mejl eller sociala medier) och vill ha en tydlig berättarvinkel passar <a href="https://nodenordic.se/prompts/ai-prompt-skriv-noveller-med-en-ovantad-hjalte">AI-prompt: skriv noveller med en oväntad hjälte</a> bra ihop. Den är särskilt användbar om din sajtuppdatering stöttar en produktlansering och du behöver storykoncept medan designen stabiliseras.</p>


<br>


<p>Snabbreferens:</p>



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

<li><a href="https://nodenordic.se/prompts/skriv-uppslukande-noveller-med-ai-prompt">Skriv uppslukande noveller med ai-prompt</a>: Scenrika storyutkast med struktur.</li>


<li><a href="https://nodenordic.se/prompts/skriv-gotiska-noveller-i-poe-stil-med-ai-prompt">Skriv gotiska noveller i Poe-stil med ai-prompt</a>: Utforskning av gotisk tonalitet och röst.</li>


<li><a href="https://nodenordic.se/prompts/ai-prompt-skriv-noveller-med-en-ovantad-hjalte">AI-prompt: skriv noveller med en oväntad hjälte</a>: Idéer till karaktärshookar för kampanjer.</li>

<li><a href="https://nodenordic.se/prompts/bygg-ut-berattelser-med-en-ny-parallellhandling">Bygg ut berättelser med en ny parallellhandling</a>: Lägg till en parallellhandling för att fördjupa narrativet.</li>

<li><a href="https://nodenordic.se/prompts/skriv-en-dagboksanteckning-i-hemingway-stil">Skriv en dagboksanteckning i Hemingway-stil</a>: Stram, minimalistisk dagboksröst.</li>
<!-- /wp:post-content -->
</ul>
<!-- /wp:list -->
</div>

<div class="faq-section">
<!-- wp:heading {"level":2} -->
<h2 class="wp-block-heading">Vanliga frågor</h2>
<!-- /wp:heading -->

<div class="faq-item">
<span class="question">Vilka roller har mest nytta av den här AI-prompten för CSS-layoutbuggar?</span>
<!-- wp:paragraph -->
<p class="answer"><strong>Front-end-utvecklare</strong> använder den för att sluta gissa och systematiskt bevisa vilken CSS-regel, formateringskontext eller storleksbegränsning som faktiskt spräcker layouten. <strong>Growth marketers som lanserar landningssidor</strong> får värde eftersom prompten fokuserar på minimala, säkra ändringar som inte spårar ur design-QA precis före en lansering. <strong>QA-ansvariga på byrå</strong> förlitar sig på den repeterbara DevTools-checklistan för att skriva tydliga buggrapporter och göra överlämningar till utveckling snabbare. <strong>Produktdesigners som kan läsa CSS</strong> använder förklaringarna för att förstå varför en layout går sönder vid vissa bredder, så att framtida skisser inte råkar återskapa samma fel.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Vilka branscher får mest värde av den här AI-prompten för CSS-layoutbuggar?</span>
<!-- wp:paragraph -->
<p class="answer"><strong>E-handelsvarumärken</strong> använder den när produktgridar radbryts oförutsägbart, bilders bildförhållanden orsakar layout-hopp eller sticky ”lägg i varukorg”-fält överlappar innehåll i mobil Safari. <strong>SaaS-bolag</strong> använder den för prissidor och onboarding-UI där edge cases i flex och grid dyker upp vid vanliga brytpunkter (768px och 1024px är ofta bovar). <strong>Media- och publiceringsteam</strong> använder den när annonsytor, embeds och långa rubriker skapar overflow, oväntade scrollbars eller klippning. <strong>Byråer</strong> tjänar på den eftersom webbläsarbuggar ofta rapporteras sent, och prompten driver mot åtgärder av rotorsaken i stället för sköra lappar.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Varför ger enkla AI-prompter för att fixa CSS-layoutproblem mellan webbläsare svaga resultat?</span>
<!-- wp:paragraph -->
<p class="answer">En typisk prompt som &#8221;<em>Fix my CSS layout, it’s broken</em>&#8221; misslyckas eftersom den: saknar en körbar snippet och en tydlig definition av vad ”trasigt” betyder, inte ger något DevTools-arbetsflöde för att identifiera vilka beräknade regler som vinner, ignorerar målbläddare och brytpunktsvillkor där buggar kan reproduceras, ger generiska tips (som ”testa flex-wrap” eller ”lägg till en margin”) i stället för minimala kodändringar kopplade till en orsak, och missar djupare mekanik som formateringskontexter, overflow-klippning och stacking contexts som ofta skiljer sig mellan webbläsare. Du får lappar som funkar en gång och sedan regressar när innehållet ändras.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Kan jag anpassa den här prompten för CSS-layoutbuggar till min specifika situation?</span>
<!-- wp:paragraph -->
<p class="answer">Ja, och det bör du. Börja med att ange din [HTML_CSS_CODE] som minsta reproducerbara exempel, och lägg sedan till webbläsaruppsättningen (till exempel: ”iOS Safari 16+, Firefox senaste, Chrome senaste”) och de exakta förutsättningarna där det går sönder (sida/sektion och bredd). Om du har dem, inkludera skärmbilder samt vad du förväntade dig skulle hända jämfört med vad du faktiskt ser. En stark följdfråga är: ”Givet mina målbläddare, föreslå två fixalternativ och lista hur jag kan verifiera var och en i DevTools.”</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Vilka är de vanligaste misstagen när man använder den här prompten för CSS-layoutbuggar?</span>
<!-- wp:paragraph -->
<p class="answer">Det största misstaget är att lämna [HTML_CSS_CODE] för otydlig — i stället för ”här är min stylesheet”, ge en liten snippet som fortfarande reproducerar problemet, även om den bara är 30 rader. Ett annat vanligt fel är att inte ange var det går sönder; ”mobile” är oklart, men ”390px bredd på iPhone Safari; footern överlappar CTA” ger prompten något testbart. Många utelämnar också beteendet ”förväntat vs faktiskt”, vilket spelar roll när layouten är subjektiv; skriv det uttryckligen så att fixar inte glider iväg. Till sist nämner många inte vad de redan försökt (som hårdkodade höjder); ta med det så att prompten kan förklara varför de lapparna är sköra och föreslå en renare ändring som angriper rotorsaken.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Vem ska INTE använda den här prompten för CSS-layoutbuggar?</span>
<!-- wp:paragraph -->
<p class="answer">Den här prompten är inte optimal för team som inte kan dela någon kod eller skärmbilder och ändå förväntar sig precisa fixar, eftersom den är byggd för att undvika gissningar. Den passar också dåligt för engångsönskemål av typen ”gör det snyggt” där du inte bryr dig om rotorsak eller beteende mellan webbläsare. Om du har en i grunden trasig layoutarkitektur som faktiskt kräver en redesign, använd först en separat planeringsprocess och återvänd sedan till den här prompten för lokala, verifierbara fixar.</p>
<!-- /wp:paragraph -->
</div>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Vilka roller har mest nytta av den här AI-prompten för CSS-layoutbuggar?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Front-end-utvecklare använder den för att sluta gissa och systematiskt bevisa vilken CSS-regel, formateringskontext eller storleksbegränsning som faktiskt spräcker layouten. Growth marketers som lanserar landningssidor får värde eftersom prompten fokuserar på minimala, säkra ändringar som inte spårar ur design-QA precis före en lansering. QA-ansvariga på byrå förlitar sig på den repeterbara DevTools-checklistan för att skriva tydliga buggrapporter och göra överlämningar till utveckling snabbare. Produktdesigners som kan läsa CSS använder förklaringarna för att förstå varför en layout går sönder vid vissa bredder, så att framtida skisser inte råkar återskapa samma fel."
      }
    },
    {
      "@type": "Question",
      "name": "Vilka branscher får mest värde av den här AI-prompten för CSS-layoutbuggar?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "E-handelsvarumärken använder den när produktgridar radbryts oförutsägbart, bilders bildförhållanden orsakar layout-hopp eller sticky ”lägg i varukorg”-fält överlappar innehåll i mobil Safari. SaaS-bolag använder den för prissidor och onboarding-UI där edge cases i flex och grid dyker upp vid vanliga brytpunkter (768px och 1024px är ofta bovar). Media- och publiceringsteam använder den när annonsytor, embeds och långa rubriker skapar overflow, oväntade scrollbars eller klippning. Byråer tjänar på den eftersom webbläsarbuggar ofta rapporteras sent, och prompten driver mot åtgärder av rotorsaken i stället för sköra lappar."
      }
    },
    {
      "@type": "Question",
      "name": "Varför ger enkla AI-prompter för att fixa CSS-layoutproblem mellan webbläsare svaga resultat?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "En typisk prompt som \"Fix my CSS layout, it’s broken\" misslyckas eftersom den: saknar en körbar snippet och en tydlig definition av vad ”trasigt” betyder, inte ger något DevTools-arbetsflöde för att identifiera vilka beräknade regler som vinner, ignorerar målbläddare och brytpunktsvillkor där buggar kan reproduceras, ger generiska tips (som ”testa flex-wrap” eller ”lägg till en margin”) i stället för minimala kodändringar kopplade till en orsak, och missar djupare mekanik som formateringskontexter, overflow-klippning och stacking contexts som ofta skiljer sig mellan webbläsare. Du får lappar som funkar en gång och sedan regressar när innehållet ändras."
      }
    },
    {
      "@type": "Question",
      "name": "Kan jag anpassa den här prompten för CSS-layoutbuggar till min specifika situation?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Ja, och det bör du. Börja med att ange din [HTML_CSS_CODE] som minsta reproducerbara exempel, och lägg sedan till webbläsaruppsättningen (till exempel: ”iOS Safari 16+, Firefox senaste, Chrome senaste”) och de exakta förutsättningarna där det går sönder (sida/sektion och bredd). Om du har dem, inkludera skärmbilder samt vad du förväntade dig skulle hända jämfört med vad du faktiskt ser. En stark följdfråga är: ”Givet mina målbläddare, föreslå två fixalternativ och lista hur jag kan verifiera var och en i DevTools.”"
      }
    },
    {
      "@type": "Question",
      "name": "Vilka är de vanligaste misstagen när man använder den här prompten för CSS-layoutbuggar?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Det största misstaget är att lämna [HTML_CSS_CODE] för otydlig — i stället för ”här är min stylesheet”, ge en liten snippet som fortfarande reproducerar problemet, även om den bara är 30 rader. Ett annat vanligt fel är att inte ange var det går sönder; ”mobile” är oklart, men ”390px bredd på iPhone Safari; footern överlappar CTA” ger prompten något testbart. Många utelämnar också beteendet ”förväntat vs faktiskt”, vilket spelar roll när layouten är subjektiv; skriv det uttryckligen så att fixar inte glider iväg. Till sist nämner många inte vad de redan försökt (som hårdkodade höjder); ta med det så att prompten kan förklara varför de lapparna är sköra och föreslå en renare ändring som angriper rotorsaken."
      }
    },
    {
      "@type": "Question",
      "name": "Vem ska INTE använda den här prompten för CSS-layoutbuggar?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Den här prompten är inte optimal för team som inte kan dela någon kod eller skärmbilder och ändå förväntar sig precisa fixar, eftersom den är byggd för att undvika gissningar. Den passar också dåligt för engångsönskemål av typen ”gör det snyggt” där du inte bryr dig om rotorsak eller beteende mellan webbläsare. Om du har en i grunden trasig layoutarkitektur som faktiskt kräver en redesign, använd först en separat planeringsprocess och återvänd sedan till den här prompten för lokala, verifierbara fixar."
      }
    }
  ]
}
</script>
</div>

<div class="closing-section">
<!-- wp:paragraph -->
<p>Layoutbuggar behöver inte fler hacks. De behöver en konsekvent undersökning som visar vad webbläsaren faktiskt gör. Klistra in den här prompten i ditt AI-verktyg, följ DevTools-stegen och leverera en fix du kan stå för.</p>
<!-- /wp:paragraph -->
</div><p>&lt;p&gt;The post <a rel="nofollow" href="https://nodenordic.se/prompts/fixa-css-layoutbuggar-i-alla-webblasare/">Fixa CSS-layoutbuggar i alla webbläsare</a> first appeared on <a rel="nofollow" href="https://nodenordic.se">Node Nordic - AI Konsult för företag</a>.&lt;/p&gt;</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Bygg ett skript för batchvis bildstorleksändring</title>
		<link>https://nodenordic.se/prompts/bygg-ett-skript-for-batchvis-bildstorleksandring/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=bygg-ett-skript-for-batchvis-bildstorleksandring</link>
		
		<dc:creator><![CDATA[Rickard Andersson]]></dc:creator>
		<pubDate>Fri, 23 Jan 2026 02:40:53 +0000</pubDate>
				<category><![CDATA[prompts]]></category>
		<guid isPermaLink="false">https://nodenordic.se/?p=5001590</guid>

					<description><![CDATA[<p>Blandade bildbatchar skapar fel i flöden. Bygg en robust resizer med säkra proportioner, adaptiv komprimering, loggar och säkra utdata.</p>
<p>&lt;p&gt;The post <a rel="nofollow" href="https://nodenordic.se/prompts/bygg-ett-skript-for-batchvis-bildstorleksandring/">Bygg ett skript för batchvis bildstorleksändring</a> first appeared on <a rel="nofollow" href="https://nodenordic.se">Node Nordic - AI Konsult för företag</a>.&lt;/p&gt;</p>
]]></description>
										<content:encoded><![CDATA[<!-- FOCUS_KEYWORD: batch image resizing -->
<div class="hook-introduction">

<p>Blandade bildbatcher är där ”enkel storleksändring”-script faller sönder. Några PNG:er med transparens, en slumpmässig TIFF från en designer eller en delvis korrupt JPEG kan spåra ur hela körningen. Och om ditt script skriver över original eller recomprimerar förstörande format två gånger märker du det först när skadan redan är skedd.</p>



<p>Den här AI-prompten för <strong>batchvis storleksändring av bilder</strong> är byggd för <strong>marketing ops-ansvariga</strong> som behöver konsekventa webb- och tryckutdata för resurser över kampanjer, <strong>e-handelsansvariga</strong> som städar upp tusentals produktbilder från flera leverantörer, och <strong>produktions-team på byrå</strong> som standardiserar kundleveranser utan att riskera originalen. Resultatet är en produktionsklar plan för en storleksändringspipeline (med kodstruktur, loggningsstrategi, formatregler och säkra mappkonventioner) som du kan lämna till en utvecklare eller implementera själv.</p>

</div>

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

<h2 class="wp-block-heading">Vad gör den här AI-prompten och när ska du använda den?</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">Vad den här prompten gör</th>
      <th scope="col">När du ska använda den här prompten</th>
      <th scope="col">Vad du får</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <ul class="automation-list">
          <li>Den designar ett batch-kompatibelt arbetsflöde för storleksändring som bevarar bildförhållandet som standard och bara beskär eller sträcker ut när du uttryckligen väljer det.</li>
          <li>Den specificerar hur JPEG, PNG, WebP, GIF och TIFF ska hanteras olika, inklusive transparenssäkra regler för grafik och rimliga standardval för foton.</li>
          <li>Den definierar två lägen för storleksändring (procentuell skalning och fast bredd × höjd) och klargör vad som händer när bara en dimension anges.</li>
          <li>Den väljer komprimering per bild med innehållsmedveten logik (foto-lik vs grafik-lik) plus en användarpreferens för kvalitet, i stället för ”one-size-fits-all”-inställningar.</li>
          <li>Den beskriver ett strömmande/kö-baserat batchupplägg, med feltålig loggning, felhantering per fil och skydd mot att skriva över original.</li>
       </ul>
      </td>
      <td>
        <ul class="results-list">
          <li>Du har en gigantisk mapp med leverantörsbilder och behöver webbklara versioner utan att gissa vilka som ska förbli PNG.</li>
          <li>Ditt nuvarande script kraschar halvvägs eftersom några filer är korrupta, låsta eller konstigt kodade.</li>
          <li>Du måste skapa två utdata från samma källuppsättning (till exempel: 1600px webb-bilder och tryckresurser med högre kvalitet) samtidigt som namngivningen hålls konsekvent.</li>
          <li>Du har blivit bränd av att köra om ett jobb och råkat recomprimera redan bearbetade JPEG:er, vilket ger synlig kvalitetsförlust.</li>
          <li>Du skalar upp ett arbetsflöde och behöver förutsägbara loggar, organiserade utdata och en repeterbar pipeline som går att ”köra igen nästa månad”.</li>
        </ul>
      </td>
       <td>
         <ul class="deliverables-list">
           <li>En komplett pipelinespecifikation som du kan översätta till Python/Node/bash, inklusive moduler, funktioner och bearbetningssteg.</li>
           <li>Ett tydligt beslutsträd för formathantering (JPEG/PNG/WebP/GIF/TIFF) med rekommenderade inställningar och undantag.</li>
           <li>En plan för mappar och namngivningskonventioner som förhindrar överskrivningar och separerar original, arbetsfiler och utdata.</li>
           <li>En design för loggning och felrapportering, inklusive vad som ska loggas per fil och hur fel sammanfattas i slutet.</li>
           <li>En strategi för att undvika upprepad förstörande recomprimering mellan körningar (detektering av utdata, hashar eller manifest-baserad hoppning).</li>
         </ul>
       </td>
    </tr>
  </tbody>
</table>

</div>

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

<h2 class="wp-block-heading">Hela AI-prompten: produktionsklart script för batchvis bildstorleksändring</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">
                                    Steg 1: Anpassa prompten med din information
                            </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>Återställ</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>Anpassa och kopiera hela prompten</span>
                </button>
            </div>
        </div>

        <!-- Customize the Prompt Section -->
                    <div class="prompt-customize-section">
                <span class="customize-title">Anpassa prompten</span>
                <p class="customize-subtitle">Fyll i fälten nedan för att anpassa prompten efter dina behov.</p>
                <table class="customize-table">
                    <thead>
                        <tr>
                            <th>Variabel</th>
                            <th>Vad du ska ange</th>
                            <th>Anpassa prompten</th>
                        </tr>
                    </thead>
                    <tbody>
                                                    <tr>
                                <td class="var-name"><code>[KALLSOKVAGAR]</code></td>
                                <td class="var-desc">
                                    Ange filsökvägarna eller mapparna där bilderna som ska bearbetas finns. Lägg till flera sökvägar om du behöver köra batchbearbetning.                                    <div class="var-example">Till exempel: "/home/user/images/raw_photos, /mnt/external_drive/project_assets"</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[KALLSOKVAGAR]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[MALSTORLEK]</code></td>
                                <td class="var-desc">
                                    Ange önskade mått för storleksändring av bilder. Använd antingen fast bredd och höjd (t.ex. 800x600) eller procentuell skalning (t.ex. 50%).                                    <div class="var-example">Till exempel: "1024x768 eller 75%"</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[MALSTORLEK]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[UTDATAFORMAT]</code></td>
                                <td class="var-desc">
                                    Ange filformatet för de storleksändrade bilderna. Vanliga alternativ är JPEG, PNG, WebP, GIF eller TIFF.                                    <div class="var-example">Till exempel: "JPEG"</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[UTDATAFORMAT]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[KVALITETSPREFERENS]</code></td>
                                <td class="var-desc">
                                    Ange önskad kvalitetsnivå för komprimering. Använd termer som &quot;hög&quot;, &quot;balanserad&quot; eller &quot;låg&quot;, eller ange ett numeriskt värde (t.ex. 80 för JPEG-kvalitet).                                    <div class="var-example">Till exempel: "balanserad eller 85"</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[KVALITETSPREFERENS]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[UTDATASOKVAG]</code></td>
                                <td class="var-desc">
                                    Ange mappen där de storleksändrade bilderna ska sparas. Säkerställ att sökvägen är skrivbar och strukturerad för batchutdata.                                    <div class="var-example">Till exempel: "/home/user/images/resized_outputs"</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[UTDATASOKVAG]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[SKRIV_OVER_KALLOR]</code></td>
                                <td class="var-desc">
                                    Ange om originalbilderna ska skrivas över vid bearbetningen. Använd &quot;ja&quot; för att tillåta överskrivning eller &quot;nej&quot; för att behålla originalen.                                    <div class="var-example">Till exempel: "nej"</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[SKRIV_OVER_KALLOR]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[STORLEKSANDRINGSLAGE]</code></td>
                                <td class="var-desc">
                                    Ange vilken metod för storleksändring som ska användas. Alternativ kan vara &quot;procentuell skalning&quot; eller &quot;fasta mått&quot; beroende på behov.                                    <div class="var-example">Till exempel: "fasta mått"</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[STORLEKSANDRINGSLAGE]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[METALAGE]</code></td>
                                <td class="var-desc">
                                    Definiera hur metadata (t.ex. EXIF, IPTC) ska hanteras. Alternativ är &quot;behåll&quot;, &quot;ta bort&quot; eller &quot;anpassad&quot; för specifika inställningar.                                    <div class="var-example">Till exempel: "behåll"</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[METALAGE]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[ANTAL_ARBETARE]</code></td>
                                <td class="var-desc">
                                    Ange antal parallella arbetare eller trådar som ska användas vid batchbearbetning. Välj ett värde utifrån antal CPU-kärnor och arbetsbelastningens storlek.                                    <div class="var-example">Till exempel: "4"</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[ANTAL_ARBETARE]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[VERSALER_MED_UNDERSCORE]</code></td>
                                <td class="var-desc">
                                    Ange en sträng i versaler med understreck som separerar orden. Detta kan användas för namngivningskonventioner eller identifierare.                                    <div class="var-example">Till exempel: "BILD_STORLEKSANDRING_PIPELINE"</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[VERSALER_MED_UNDERSCORE]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </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">Anpassa prompten nu</span>

                </button>
            </div>
        
        <!-- Full Prompt Code Header -->
                    <div class="prompt-code-header">
                <span class="prompt-code-title">
                    Steg 2: Kopiera prompten
                </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>Återställ</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>Kopiera hela prompten</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">MÅL</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">BEGRÄNSNINGAR</div><div class="prompt-header-visible subheader">Måste-krav</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">Säkerhetsgränser (vad detta INTE är)</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">Om indata saknas eller är tvetydiga</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></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">INDATA</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">SPECIFIKATION FÖR UTDATA</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 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">Kodkrav</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">KVALITETSKONTROLLER</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;">
                ## MÅL
Utforma ett produktionsklart, batch-kapabelt bildstorleksändringsskript som kan bearbeta mycket stora bilduppsättningar med blandade format samtidigt som den visuella kvaliteten hålls hög för både webbpublicering och tryck. Lösningen måste som standard bevara bildförhållandet, välja komprimering intelligent per bild, undvika onödig omkomprimering och producera organiserade, lättlästa utdata.

## PERSONA
Du är en automationssystemsdesigner med ett tidigare liv inom professionell fotografi och postproduktion. Du kommunicerar som en erfaren ingenjör: praktisk, tydlig med avvägningar och fokuserad på tillförlitlighet i stor skala. Du balanserar estetisk integritet (ingen oavsiktlig distorsion) med prestandarealiteter (filstorlek, genomströmning, minnesgränser).

## BEGRÄNSNINGAR
### Måste-krav
- Bevara bildförhållandet om inte användaren uttryckligen begär beskärning eller sträckning.
- Stöd vanliga format: JPEG, PNG, WebP, GIF, TIFF (och hantera varje format på lämpligt sätt).
- Tillhandahåll två storleksändringslägen:
  - Procentskalning
  - Fasta måldimensioner (bredd x höjd)
- Välj komprimeringsstrategi per bild baserat på innehållsegenskaper (fotoliknande vs grafik-liknande) och användarens kvalitetspreferens.
- Batchbearbeta utan att läsa in allt i RAM på en gång; använd strömning/kö-liknande hantering.
- Fortsätt bearbeta efter fel; logga och rapportera fel (korrupta filer, behörighetsproblem, filer som inte stöds).
- Skriv aldrig över originalen om det inte uttryckligen tillåts.
- Undvik upprepad förlustkomprimerande omkodning (t.ex. koda inte om redan bearbetade utdata i efterföljande körningar om det inte efterfrågas).
- Behåll metadata när det är rimligt och konfigurerbart.

### Säkerhetsgränser (vad detta INTE är)
- Inte en GUI-applikation.
- Inte ett fullständigt DAM-/katalogiseringssystem (ingen taggning-/sökdatabas).
- Inte ett AI-verktyg för uppskalning/restaurering.
- Inte en ersättning för ett färghanterat tryck-/prepressflöde (ingen ICC-profileringspipeline utöver grundläggande pass-through om det inte uttryckligen efterfrågas).

### Om indata saknas eller är tvetydiga
- Ställ förtydligande frågor innan du skriver slutlig kod när kritiska indata saknas (sökvägar, avsikt med storleksändring, regler för överskrivning).
- Om bara delvis storleksinformation anges, standardisera till ett bildförhållande-säkert beteende (t.ex. skalning enbart på bredd eller enbart på höjd) och ange tydligt antagandet.
- Om format eller kvalitetspreferens inte anges, standardisera till ”samma som källan” och ”balanserad”.

## PROCESS
1. **Föranalys (obligatorisk)**  
   Återge användarens mål och sammanfatta den valda metoden (storleksändringsläge, format, utdatastruktur, komprimeringslogik, metadatahantering). Lista eventuella antaganden och eventuella frågor som måste besvaras.

2. **Fas A — Räcken &amp; konfiguration**  
   Validera indata-sökvägar, utdatadestination, storleksinställningar, policy för överskrivning och verktygstillgänglighet. Skapa ett konfigurationsblock som användaren kan redigera.

3. **Fas B — Medieinspektion &amp; beslutslogik**  
   För varje fil: upptäck format, läs dimensioner, uppskatta innehållstyp (foto vs grafik) med enkla heuristiker (palett-/alfaförekomst, kanttäthet, proxyer för färgantal, osv.), och besluta sedan:
   - metod för storleksändring (contain/fit, crop-to-fill endast om begärt, stretch endast om begärt)
   - regler för utdataformat
   - komprimerings-/kvalitetsparametrar

4. **Fas C — Batchkörning i stor skala**  
   Bearbeta filer iterativt med kontrollerad samtidighet (worker pool) och isolering per fil. Inkludera:
   - framstegsrapportering
   - strukturerad loggning
   - retry-/skip-beteende
   - minnessäker IO

5. **Fas D — Paketering &amp; namngivning av utdata**  
   Generera ett tidsstämplat mappnamn som kodar operationen (t.ex. datum + åtgärd + målstorlek/skala). Skriv utdata utan kollisioner och producera en slutlig sammanfattningsrapport.

## INDATA
- **Källor för bilder:** [KALLSOKVAGAR]
- **Mål för storleksändring (dimensioner som 1920x1080 eller procent som 50%):** [MALSTORLEK]
- **Föredraget utdataformat (eller samma som källan):** [UTDATAFORMAT]
- **Kvalitetspreferens (maximal kvalitet / balanserad / minsta filstorlek):** [KVALITETSPREFERENS]
- **Destinationskatalog:** [UTDATASOKVAG]
- **Tillåt överskrivning av original (ja/nej):** [SKRIV_OVER_KALLOR]
- **Beteende vid storleksändring (bevara / crop-to-fill / stretch):** [STORLEKSANDRINGSLAGE]
- **Metadatahantering (bevara / ta bort):** [METALAGE]
- **Max samtidighet / workers:** [ANTAL_ARBETARE]

## SPECIFIKATION FÖR UTDATA
Leverera ett enda, komplett skript (välj ett språks ekosystem och håll dig till det) med följande avsnitt och rubriker:

1. **Krav &amp; installation**
   - Beroenden och installationskommandon
   - OS-noteringar om relevant

2. **Konfiguration**
   - Tydligt märkta variabler som användare redigerar:
     - {SourcePaths}
     - {TargetSize}
     - {OutputFormat}
     - {QualityPreference}
     - {OutputPath}
     - {OverwriteSources}
     - {ResizeMode}
     - {MetadataMode}
     - {WorkerCount}

3. **Kärnimplementation**
   - {PathValidationModule}
   - {ImageInspectionModule}
   - {ResizeAndEncodeModule}
   - {BatchRunnerModule}
   - {LoggingAndProgressModule}
   - {OutputOrganizerModule}

4. **Användningsexempel**
   - Ett grundläggande körningsexempel med [KALLSOKVAGAR] och [MALSTORLEK]
   - Ett avancerat exempel som visar crop-to-fill eller formatkonvertering och worker-tuning

5. **Felsökning**
   - Vanliga fel och åtgärder (behörigheter, saknade codecs/libs, korrupta filer, enorma TIFF:er, förväntningar kring GIF-hantering)

### Kodkrav
- Tillhandahåll hela skriptet i kodblock med syntax highlighting.
- Inkludera tydliga inline-kommentarer som förklarar varför beslut tas (särskilt komprimeringsval och bildförhållande-matematik).
- Implementera formatspecifika hanteringsregler (minst):
  - JPEG: kvalitetsbaserad komprimering, valfri progressiv kodning
  - PNG: förlustfri komprimeringsnivå, behåll alfa
  - WebP: val mellan förlust-/förlustfri i linje med innehållstyp
  - GIF: dokumentera begränsningar; undvik destruktiv storleksändring om det förstör animering om det inte uttryckligen stöds
  - TIFF: hantera stora filer säkert; överväg konverteringsalternativ om det efterfrågas
- Inkludera progressutskrift som fungerar vid långa körningar och en slutlig {RunSummary}-rapport (antal bearbetade, hoppade över, misslyckade; totalt antal sparade byte där möjligt).
- Säkerställ att det inte finns något ”läs in allt och bearbeta sedan”-mönster; bearbeta som en ström med begränsad samtidighet.

## KVALITETSKONTROLLER
Innan du presenterar det slutliga skriptet, verifiera och ange att leveransen uppfyller:
- Bildförhållandet bevaras som standard och avviker endast när [STORLEKSANDRINGSLAGE] uttryckligen begär det.
- Komprimering är inte ”one-size-fits-all”; kodningsbeslut varierar efter innehåll och format.
- Batchdesignen är minnessäker och använder begränsad parallellism via [ANTAL_ARBETARE].
- Fel isoleras per fil och avbryter inte hela körningen; misslyckanden loggas och sammanfattas.
- Efterlevnad av variabelformat: användarangivna indata förekommer endast som [VERSALER_MED_UNDERSCORE], och AI-ifyllda platshållare förekommer endast som {Title Case}.            </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">Kopiera hela prompten</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 span {
        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 !important;
    }


    .prompt-cta-copy span {
        background: #3a3a3a;
        color: #fff !important;
    }


    .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 !important;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .copy-customized-btn span {
        color: #fff !important
    }

    .copy-customized-text span {
        color: #fff !important
    }

    .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;
        color: #fff !important;

    }

    .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 = 'Kopierad!';
            });

            setTimeout(() => {
                copyButtons.forEach(btn => {
                    btn.classList.remove('copied');
                    const textSpan = btn.querySelector('span');
                    if (textSpan) textSpan.textContent = 'Kopiera hela prompten';
                });
            }, 2000);
        }).catch(err => {
            console.error('Failed to copy:', err);
        });
    }

    // Store original prompt for customization
    const originalPrompt = "## M\u00c5L\r\nUtforma ett produktionsklart, batch-kapabelt bildstorleks\u00e4ndringsskript som kan bearbeta mycket stora bildupps\u00e4ttningar med blandade format samtidigt som den visuella kvaliteten h\u00e5lls h\u00f6g f\u00f6r b\u00e5de webbpublicering och tryck. L\u00f6sningen m\u00e5ste som standard bevara bildf\u00f6rh\u00e5llandet, v\u00e4lja komprimering intelligent per bild, undvika on\u00f6dig omkomprimering och producera organiserade, l\u00e4ttl\u00e4sta utdata.\r\n\r\n## PERSONA\r\nDu \u00e4r en automationssystemsdesigner med ett tidigare liv inom professionell fotografi och postproduktion. Du kommunicerar som en erfaren ingenj\u00f6r: praktisk, tydlig med avv\u00e4gningar och fokuserad p\u00e5 tillf\u00f6rlitlighet i stor skala. Du balanserar estetisk integritet (ingen oavsiktlig distorsion) med prestandarealiteter (filstorlek, genomstr\u00f6mning, minnesgr\u00e4nser).\r\n\r\n## BEGR\u00c4NSNINGAR\r\n### M\u00e5ste-krav\r\n- Bevara bildf\u00f6rh\u00e5llandet om inte anv\u00e4ndaren uttryckligen beg\u00e4r besk\u00e4rning eller str\u00e4ckning.\r\n- St\u00f6d vanliga format: JPEG, PNG, WebP, GIF, TIFF (och hantera varje format p\u00e5 l\u00e4mpligt s\u00e4tt).\r\n- Tillhandah\u00e5ll tv\u00e5 storleks\u00e4ndringsl\u00e4gen:\r\n  - Procentskalning\r\n  - Fasta m\u00e5ldimensioner (bredd x h\u00f6jd)\r\n- V\u00e4lj komprimeringsstrategi per bild baserat p\u00e5 inneh\u00e5llsegenskaper (fotoliknande vs grafik-liknande) och anv\u00e4ndarens kvalitetspreferens.\r\n- Batchbearbeta utan att l\u00e4sa in allt i RAM p\u00e5 en g\u00e5ng; anv\u00e4nd str\u00f6mning\/k\u00f6-liknande hantering.\r\n- Forts\u00e4tt bearbeta efter fel; logga och rapportera fel (korrupta filer, beh\u00f6righetsproblem, filer som inte st\u00f6ds).\r\n- Skriv aldrig \u00f6ver originalen om det inte uttryckligen till\u00e5ts.\r\n- Undvik upprepad f\u00f6rlustkomprimerande omkodning (t.ex. koda inte om redan bearbetade utdata i efterf\u00f6ljande k\u00f6rningar om det inte efterfr\u00e5gas).\r\n- Beh\u00e5ll metadata n\u00e4r det \u00e4r rimligt och konfigurerbart.\r\n\r\n### S\u00e4kerhetsgr\u00e4nser (vad detta INTE \u00e4r)\r\n- Inte en GUI-applikation.\r\n- Inte ett fullst\u00e4ndigt DAM-\/katalogiseringssystem (ingen taggning-\/s\u00f6kdatabas).\r\n- Inte ett AI-verktyg f\u00f6r uppskalning\/restaurering.\r\n- Inte en ers\u00e4ttning f\u00f6r ett f\u00e4rghanterat tryck-\/prepressfl\u00f6de (ingen ICC-profileringspipeline ut\u00f6ver grundl\u00e4ggande pass-through om det inte uttryckligen efterfr\u00e5gas).\r\n\r\n### Om indata saknas eller \u00e4r tvetydiga\r\n- St\u00e4ll f\u00f6rtydligande fr\u00e5gor innan du skriver slutlig kod n\u00e4r kritiska indata saknas (s\u00f6kv\u00e4gar, avsikt med storleks\u00e4ndring, regler f\u00f6r \u00f6verskrivning).\r\n- Om bara delvis storleksinformation anges, standardisera till ett bildf\u00f6rh\u00e5llande-s\u00e4kert beteende (t.ex. skalning enbart p\u00e5 bredd eller enbart p\u00e5 h\u00f6jd) och ange tydligt antagandet.\r\n- Om format eller kvalitetspreferens inte anges, standardisera till \u201dsamma som k\u00e4llan\u201d och \u201dbalanserad\u201d.\r\n\r\n## PROCESS\r\n1. **F\u00f6ranalys (obligatorisk)**  \r\n   \u00c5terge anv\u00e4ndarens m\u00e5l och sammanfatta den valda metoden (storleks\u00e4ndringsl\u00e4ge, format, utdatastruktur, komprimeringslogik, metadatahantering). Lista eventuella antaganden och eventuella fr\u00e5gor som m\u00e5ste besvaras.\r\n\r\n2. **Fas A \u2014 R\u00e4cken & konfiguration**  \r\n   Validera indata-s\u00f6kv\u00e4gar, utdatadestination, storleksinst\u00e4llningar, policy f\u00f6r \u00f6verskrivning och verktygstillg\u00e4nglighet. Skapa ett konfigurationsblock som anv\u00e4ndaren kan redigera.\r\n\r\n3. **Fas B \u2014 Medieinspektion & beslutslogik**  \r\n   F\u00f6r varje fil: uppt\u00e4ck format, l\u00e4s dimensioner, uppskatta inneh\u00e5llstyp (foto vs grafik) med enkla heuristiker (palett-\/alfaf\u00f6rekomst, kantt\u00e4thet, proxyer f\u00f6r f\u00e4rgantal, osv.), och besluta sedan:\r\n   - metod f\u00f6r storleks\u00e4ndring (contain\/fit, crop-to-fill endast om beg\u00e4rt, stretch endast om beg\u00e4rt)\r\n   - regler f\u00f6r utdataformat\r\n   - komprimerings-\/kvalitetsparametrar\r\n\r\n4. **Fas C \u2014 Batchk\u00f6rning i stor skala**  \r\n   Bearbeta filer iterativt med kontrollerad samtidighet (worker pool) och isolering per fil. Inkludera:\r\n   - framstegsrapportering\r\n   - strukturerad loggning\r\n   - retry-\/skip-beteende\r\n   - minness\u00e4ker IO\r\n\r\n5. **Fas D \u2014 Paketering & namngivning av utdata**  \r\n   Generera ett tidsst\u00e4mplat mappnamn som kodar operationen (t.ex. datum + \u00e5tg\u00e4rd + m\u00e5lstorlek\/skala). Skriv utdata utan kollisioner och producera en slutlig sammanfattningsrapport.\r\n\r\n## INDATA\r\n- **K\u00e4llor f\u00f6r bilder:** [KALLSOKVAGAR]\r\n- **M\u00e5l f\u00f6r storleks\u00e4ndring (dimensioner som 1920x1080 eller procent som 50%):** [MALSTORLEK]\r\n- **F\u00f6redraget utdataformat (eller samma som k\u00e4llan):** [UTDATAFORMAT]\r\n- **Kvalitetspreferens (maximal kvalitet \/ balanserad \/ minsta filstorlek):** [KVALITETSPREFERENS]\r\n- **Destinationskatalog:** [UTDATASOKVAG]\r\n- **Till\u00e5t \u00f6verskrivning av original (ja\/nej):** [SKRIV_OVER_KALLOR]\r\n- **Beteende vid storleks\u00e4ndring (bevara \/ crop-to-fill \/ stretch):** [STORLEKSANDRINGSLAGE]\r\n- **Metadatahantering (bevara \/ ta bort):** [METALAGE]\r\n- **Max samtidighet \/ workers:** [ANTAL_ARBETARE]\r\n\r\n## SPECIFIKATION F\u00d6R UTDATA\r\nLeverera ett enda, komplett skript (v\u00e4lj ett spr\u00e5ks ekosystem och h\u00e5ll dig till det) med f\u00f6ljande avsnitt och rubriker:\r\n\r\n1. **Krav & installation**\r\n   - Beroenden och installationskommandon\r\n   - OS-noteringar om relevant\r\n\r\n2. **Konfiguration**\r\n   - Tydligt m\u00e4rkta variabler som anv\u00e4ndare redigerar:\r\n     - {SourcePaths}\r\n     - {TargetSize}\r\n     - {OutputFormat}\r\n     - {QualityPreference}\r\n     - {OutputPath}\r\n     - {OverwriteSources}\r\n     - {ResizeMode}\r\n     - {MetadataMode}\r\n     - {WorkerCount}\r\n\r\n3. **K\u00e4rnimplementation**\r\n   - {PathValidationModule}\r\n   - {ImageInspectionModule}\r\n   - {ResizeAndEncodeModule}\r\n   - {BatchRunnerModule}\r\n   - {LoggingAndProgressModule}\r\n   - {OutputOrganizerModule}\r\n\r\n4. **Anv\u00e4ndningsexempel**\r\n   - Ett grundl\u00e4ggande k\u00f6rningsexempel med [KALLSOKVAGAR] och [MALSTORLEK]\r\n   - Ett avancerat exempel som visar crop-to-fill eller formatkonvertering och worker-tuning\r\n\r\n5. **Fels\u00f6kning**\r\n   - Vanliga fel och \u00e5tg\u00e4rder (beh\u00f6righeter, saknade codecs\/libs, korrupta filer, enorma TIFF:er, f\u00f6rv\u00e4ntningar kring GIF-hantering)\r\n\r\n### Kodkrav\r\n- Tillhandah\u00e5ll hela skriptet i kodblock med syntax highlighting.\r\n- Inkludera tydliga inline-kommentarer som f\u00f6rklarar varf\u00f6r beslut tas (s\u00e4rskilt komprimeringsval och bildf\u00f6rh\u00e5llande-matematik).\r\n- Implementera formatspecifika hanteringsregler (minst):\r\n  - JPEG: kvalitetsbaserad komprimering, valfri progressiv kodning\r\n  - PNG: f\u00f6rlustfri komprimeringsniv\u00e5, beh\u00e5ll alfa\r\n  - WebP: val mellan f\u00f6rlust-\/f\u00f6rlustfri i linje med inneh\u00e5llstyp\r\n  - GIF: dokumentera begr\u00e4nsningar; undvik destruktiv storleks\u00e4ndring om det f\u00f6rst\u00f6r animering om det inte uttryckligen st\u00f6ds\r\n  - TIFF: hantera stora filer s\u00e4kert; \u00f6verv\u00e4g konverteringsalternativ om det efterfr\u00e5gas\r\n- Inkludera progressutskrift som fungerar vid l\u00e5nga k\u00f6rningar och en slutlig {RunSummary}-rapport (antal bearbetade, hoppade \u00f6ver, misslyckade; totalt antal sparade byte d\u00e4r m\u00f6jligt).\r\n- S\u00e4kerst\u00e4ll att det inte finns n\u00e5got \u201dl\u00e4s in allt och bearbeta sedan\u201d-m\u00f6nster; bearbeta som en str\u00f6m med begr\u00e4nsad samtidighet.\r\n\r\n## KVALITETSKONTROLLER\r\nInnan du presenterar det slutliga skriptet, verifiera och ange att leveransen uppfyller:\r\n- Bildf\u00f6rh\u00e5llandet bevaras som standard och avviker endast n\u00e4r [STORLEKSANDRINGSLAGE] uttryckligen beg\u00e4r det.\r\n- Komprimering \u00e4r inte \u201done-size-fits-all\u201d; kodningsbeslut varierar efter inneh\u00e5ll och format.\r\n- Batchdesignen \u00e4r minness\u00e4ker och anv\u00e4nder begr\u00e4nsad parallellism via [ANTAL_ARBETARE].\r\n- Fel isoleras per fil och avbryter inte hela k\u00f6rningen; misslyckanden loggas och sammanfattas.\r\n- Efterlevnad av variabelformat: anv\u00e4ndarangivna indata f\u00f6rekommer endast som [VERSALER_MED_UNDERSCORE], och AI-ifyllda platsh\u00e5llare f\u00f6rekommer endast som {Title Case}.";
    const variables = ["[KALLSOKVAGAR]","[MALSTORLEK]","[UTDATAFORMAT]","[KVALITETSPREFERENS]","[UTDATASOKVAG]","[SKRIV_OVER_KALLOR]","[STORLEKSANDRINGSLAGE]","[METALAGE]","[ANTAL_ARBETARE]","[VERSALER_MED_UNDERSCORE]"];
    // 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 = 'Återställd!';
            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">Proffstips för bättre resultat från AI-prompten</h2>



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

<li><strong>Definiera dina två utdataprofiler från start.</strong> Prompten är som starkast när du säger exakt vad ”webb” och ”tryck” betyder för dig (dimensioner, kvalitetsmål och formatpreferenser). Testa: ”Skapa utdata: Webb=1600px lång sida, ~200–350KB mål; Tryck=3000px lång sida, minimal komprimering; bevara transparens.”</li>


<li><strong>Säg vad som aldrig får ändras.</strong> Om metadata är viktigt (EXIF-orientering, ICC-pass-through, tidsstämplar), säg det uttryckligen och be om konfigflaggor. En användbar följdfråga: ”Lägg till en metadatapolicy: behåll EXIF som standard, ta bort GPS och normalisera orientering så att storleksändrade utdata visas korrekt överallt.”</li>

<li><strong>Ge den verkliga felscenarier att designa för.</strong> Du får en mer robust scriptplan om du listar de fula edge cases: korrupta filer, CMYK-JPEG:er, 16-bitars PNG:er eller behörighetsfel. Tillägg i prompten: ”Anta att 2% av filerna misslyckas; fortsätt, logga och skapa en sammanfattande CSV i slutet av körningen.”</li>


<li><strong>Iterera på komprimeringsregler, inte bara storlekar.</strong> Efter första utkastet, pressa prompten att vara tydligare kring när JPEG vs WebP vs PNG ska väljas. Fråga: ”Skriv nu om komprimeringsstrategin med trösklar och exempel (foto-lik, skärmdump-lik, transparens, plana färger) och rekommendera rimliga kvalitetsintervall.”</li>


<li><strong>Lägg till en mekanism som tål omkörning.</strong> Ärligt talat är det här de flesta batch-script tyst misslyckas över tid. Begär en manifest-metod: ”Lägg till en manifest.json (eller SQLite vid behov) som registrerar källsökväg, mtime/hash, utdatasökvägar och inställningar, så att omkörningar hoppar över oförändrade filer och undviker dubbel recomprimering.”</li>

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

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

<!-- wp:paragraph -->
<p>Om du också standardiserar den mänskliga delen av ett arbetsflöde passar de här promptarna bra ihop med ett produktionspipeline-tänk:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>För team som dokumenterar hur arbetet utvecklas över tid hjälper <a href="https://nodenordic.se/prompts/skapa-en-karriarutvecklingsplan-med-ai-prompt">AI-prompten Build a Career Growth Playbook</a> dig att omvandla ”tyst kunskap” till en tydlig plan för progression. Den passar bra när du vill att din bildpipeline ska ägas och underhållas, inte bara byggas en gång och sedan glömmas.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>När någon rör sig in i en mer teknisk operationsroll (som att äga automation, script och verktyg) kan <a href="https://nodenordic.se/prompts/optimera-din-kompetensstack-for-karriaren-med-ai">AI-prompten Build a Career Skill Stack Optimizer</a> kartlägga de färdigheter som stödjer stabil leverans. Användbart om du utbildar en marknadsförare som blivit ops-ansvarig att hantera leverantörer och kodgranskningar.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Om din organisation omfördelar ansvar (till exempel att creative ops tar över resursbearbetning som tidigare låg hos engineering) ger <a href="https://nodenordic.se/prompts/bygg-en-plan-for-karriarbyte-med-en-ai-prompt">AI-prompten Build a Career Pivot Roadmap</a> en strukturerad övergångsplan. Det är ett praktiskt komplement när du förändrar processer och behöver att det används i praktiken, inte bara ett script.</p>
<!-- /wp:paragraph -->

<br>

<!-- wp:paragraph -->
<p>Snabbguide:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li><a href="https://nodenordic.se/prompts/skapa-en-karriarutvecklingsplan-med-ai-prompt">AI-prompten Build a Career Growth Playbook</a>: Dokumentera förväntningar, omfattning och utveckling.</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="https://nodenordic.se/prompts/bygg-en-plan-for-karriarbyte-med-en-ai-prompt">AI-prompten Build a Career Pivot Roadmap</a>: Planera en strukturerad rollövergång.</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="https://nodenordic.se/prompts/bygg-en-fardplan-for-lang-karriar-med-ai-prompt">AI-prompten Build a Career Longevity Roadmap</a>: Upprätthåll prestation och undvik utbrändhet.</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="https://nodenordic.se/prompts/skapa-en-plan-for-karriarutveckling-med-ai-prompt">AI-prompten Build a Career Growth Blueprint</a>: Sätt mål, milstolpar och bevis.</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="https://nodenordic.se/prompts/optimera-din-kompetensstack-for-karriaren-med-ai">AI-prompten Build a Career Skill Stack Optimizer</a>: Prioritera färdigheter som ger ökande effekt över tid.</li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->
</div>

<div class="faq-section">
<!-- wp:heading {"level":2} -->
<h2 class="wp-block-heading">Vanliga frågor</h2>
<!-- /wp:heading -->

<div class="faq-item">
<span class="question">Vilka roller har mest nytta av den här AI-prompten för batchvis bildstorleksändring?</span>
<!-- wp:paragraph -->
<p class="answer"><strong>Chefer inom marketing operations</strong> använder den här för att göra röriga kampanjmappar till konsekventa webb- och tryckvarianter, med loggar som gör överlämningar smidiga. <strong>Innehållsansvariga inom e-handel</strong> förlitar sig på den när leverantörsbilder kommer i blandade format och inkonsekventa storlekar, och de behöver säkra utdata utan att skriva över original. <strong>Ansvariga inom creative operations</strong> gynnas eftersom prompten tvingar fram tydliga beslut om formathantering, metadata och namngivningskonventioner som minskar omarbete. <strong>Automationsinriktade utvecklare</strong> använder den också som en specifikation för att snabbt implementera, eftersom den bygger in strömning, feltålighet och omkörningssäkerhet.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Vilka branscher får mest värde av den här AI-prompten för batchvis bildstorleksändring?</span>
<!-- wp:paragraph -->
<p class="answer"><strong>E-handel och retail</strong> får snabbt värde eftersom produktfoton, färgvarianter och leverantörspaket ofta kommer som en kaotisk mix av JPEG, PNG och någon enstaka TIFF. <strong>Media och förlag</strong> använder den för att förbereda stora fotoset för snabb webbleverans, samtidigt som de behåller masters av högre kvalitet för framtida layouter. <strong>Byråer</strong> gynnas när de måste möta olika kundspecar (namngivning, storlekar, format) och behöver en repeterbar pipeline som loggar allt. <strong>Fastighets- och hotellteam</strong> använder den för att bearbeta stora fotograferingar effektivt, skapa webboptimerade set, bevara bildförhållandet och undvika oavsiktlig förvrängning.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Varför ger grundläggande AI-prompts för script för batchvis bildstorleksändring svaga resultat?</span>
<!-- wp:paragraph -->
<p class="answer">En typisk prompt som ”<em>Skriv ett script som ändrar storlek på bilder i en mapp</em>” misslyckas eftersom den: saknar formatspecifik hantering (PNG-transparens, GIF-beteende, TIFF-särdrag), ger inga tydliga regler för storleksändring (procent vs fasta dimensioner och vad som ska hända när bildförhållanden skiljer sig), ignorerar omkörningssäkerhet så att utdata recomprimeras igen, producerar skör kod som kraschar på korrupta eller låsta filer i stället för att logga och fortsätta, och missar operativa detaljer som utdatamappar, namngivningskonventioner och rapportering i slutet av körningen. I praktiken får du något som fungerar på en liten testmapp och faller ihop på riktiga produktionsbatcher.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Kan jag anpassa den här prompten för batchvis bildstorleksändring till min specifika situation?</span>
<!-- wp:paragraph -->
<p class="answer">Ja. Även om prompten saknar formulärvariabler anpassar du den genom att ange dina begränsningar: målstorlekar (procent eller bredd × höjd), om beskärning är tillåten, föredragna utdataformat, kvalitetsmål och en metadatapolicy (behåll, ta bort eller pass-through). Du bör också specificera hur du vill organisera utdata (speglade mappar, datumstämplade körningar eller undermappar per storlek) och om ”skriv aldrig över” är absolut. En bra följdfråga är: ”Innan du skriver den slutliga designen, ställ mig 10 klargörande frågor om storlekar, format, transparens, metadata, namngivning och omkörningsbeteende, och producera sedan scriptupplägget.”</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Vilka är de vanligaste misstagen när man använder den här prompten för batchvis bildstorleksändring?</span>
<!-- wp:paragraph -->
<p class="answer">Det största misstaget är att lämna läget för storleksändring ospecificerat — i stället för ”ändra storlek på bilder för webb”, säg ”Ändra storlek efter lång sida till 1600px; skala inte upp mindre bilder.” Ett annat vanligt fel är att vara vag kring beskärning: ”gör dem 1200×1200” kan innebära tvingade kvadratiska beskärningar, medan ”anpassa inom 1200×1200, bevara bildförhållandet, lägg inte till någon utfyllnad” är entydigt. Många glömmer också att definiera regler för transparens i utdata; ”konvertera allt till JPEG” förstör logotyper, medan ”behåll PNG när alfa finns, annars överväg WebP/JPEG” är säkrare. Slutligen utelämnar många omkörningsbeteende; be om ”hoppa över om utdata finns och matchar inställningar” för att undvika upprepad förstörande recomprimering.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Vem ska INTE använda den här prompten för batchvis bildstorleksändring?</span>
<!-- wp:paragraph -->
<p class="answer">Den här prompten är inte idealisk om du behöver ett dra-och-släpp-GUI-verktyg, eftersom den uttryckligen är designad för scripting och automation. Den passar inte heller när du kräver ett fullständigt system för digital asset management med sök, taggning och godkännanden. Och om du behöver färghanterad prepress för tryck (ICC-konverteringar, proofingflöden, pressprofiler) vill du ha ett dedikerat arbetsflödesverktyg snarare än ett storleksändringsscript. I de fallen: använd ett färdigt DAM eller en professionell prepress-pipeline och applicera sedan storleksändring som ett mindre steg.</p>
<!-- /wp:paragraph -->
</div>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Vilka roller har mest nytta av den här AI-prompten för batchvis bildstorleksändring?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Chefer inom marketing operations använder den här för att göra röriga kampanjmappar till konsekventa webb- och tryckvarianter, med loggar som gör överlämningar smidiga. Innehållsansvariga inom e-handel förlitar sig på den när leverantörsbilder kommer i blandade format och inkonsekventa storlekar, och de behöver säkra utdata utan att skriva över original. Ansvariga inom creative operations gynnas eftersom prompten tvingar fram tydliga beslut om formathantering, metadata och namngivningskonventioner som minskar omarbete. Automationsinriktade utvecklare använder den också som en specifikation för att snabbt implementera, eftersom den bygger in strömning, feltålighet och omkörningssäkerhet."
      }
    },
    {
      "@type": "Question",
      "name": "Vilka branscher får mest värde av den här AI-prompten för batchvis bildstorleksändring?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "E-handel och retail får snabbt värde eftersom produktfoton, färgvarianter och leverantörspaket ofta kommer som en kaotisk mix av JPEG, PNG och någon enstaka TIFF. Media och förlag använder den för att förbereda stora fotoset för snabb webbleverans, samtidigt som de behåller masters av högre kvalitet för framtida layouter. Byråer gynnas när de måste möta olika kundspecar (namngivning, storlekar, format) och behöver en repeterbar pipeline som loggar allt. Fastighets- och hotellteam använder den för att bearbeta stora fotograferingar effektivt, skapa webboptimerade set, bevara bildförhållandet och undvika oavsiktlig förvrängning."
      }
    },
    {
      "@type": "Question",
      "name": "Varför ger grundläggande AI-prompts för script för batchvis bildstorleksändring svaga resultat?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "En typisk prompt som \"Skriv ett script som ändrar storlek på bilder i en mapp\" misslyckas eftersom den: saknar formatspecifik hantering (PNG-transparens, GIF-beteende, TIFF-särdrag), ger inga tydliga regler för storleksändring (procent vs fasta dimensioner och vad som ska hända när bildförhållanden skiljer sig), ignorerar omkörningssäkerhet så att utdata recomprimeras igen, producerar skör kod som kraschar på korrupta eller låsta filer i stället för att logga och fortsätta, och missar operativa detaljer som utdatamappar, namngivningskonventioner och rapportering i slutet av körningen. I praktiken får du något som fungerar på en liten testmapp och faller ihop på riktiga produktionsbatcher."
      }
    },
    {
      "@type": "Question",
      "name": "Kan jag anpassa den här prompten för batchvis bildstorleksändring till min specifika situation?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Ja. Även om prompten saknar formulärvariabler anpassar du den genom att ange dina begränsningar: målstorlekar (procent eller bredd × höjd), om beskärning är tillåten, föredragna utdataformat, kvalitetsmål och en metadatapolicy (behåll, ta bort eller pass-through). Du bör också specificera hur du vill organisera utdata (speglade mappar, datumstämplade körningar eller undermappar per storlek) och om ”skriv aldrig över” är absolut. En bra följdfråga är: ”Innan du skriver den slutliga designen, ställ mig 10 klargörande frågor om storlekar, format, transparens, metadata, namngivning och omkörningsbeteende, och producera sedan scriptupplägget.”"
      }
    },
    {
      "@type": "Question",
      "name": "Vilka är de vanligaste misstagen när man använder den här prompten för batchvis bildstorleksändring?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Det största misstaget är att lämna läget för storleksändring ospecificerat — i stället för ”ändra storlek på bilder för webb”, säg ”Ändra storlek efter lång sida till 1600px; skala inte upp mindre bilder.” Ett annat vanligt fel är att vara vag kring beskärning: ”gör dem 1200×1200” kan innebära tvingade kvadratiska beskärningar, medan ”anpassa inom 1200×1200, bevara bildförhållandet, lägg inte till någon utfyllnad” är entydigt. Många glömmer också att definiera regler för transparens i utdata; ”konvertera allt till JPEG” förstör logotyper, medan ”behåll PNG när alfa finns, annars överväg WebP/JPEG” är säkrare. Slutligen utelämnar många omkörningsbeteende; be om ”hoppa över om utdata finns och matchar inställningar” för att undvika upprepad förstörande recomprimering."
      }
    },
    {
      "@type": "Question",
      "name": "Vem ska INTE använda den här prompten för batchvis bildstorleksändring?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Den här prompten är inte idealisk om du behöver ett dra-och-släpp-GUI-verktyg, eftersom den uttryckligen är designad för scripting och automation. Den passar inte heller när du kräver ett fullständigt system för digital asset management med sök, taggning och godkännanden. Och om du behöver färghanterad prepress för tryck (ICC-konverteringar, proofingflöden, pressprofiler) vill du ha ett dedikerat arbetsflödesverktyg snarare än ett storleksändringsscript. I de fallen: använd ett färdigt DAM eller en professionell prepress-pipeline och applicera sedan storleksändring som ett mindre steg."
      }
    }
  ]
}
</script>
</div>

<div class="closing-section">
<!-- wp:paragraph -->
<p>Batchvis storleksändring är inte svårt förrän det är det. Använd den här prompten för att designa ett script som klarar mappar från verkligheten, skyddar originalen och levererar konsekventa utdata du kan lita på.</p>
<!-- /wp:paragraph -->
</div><p>&lt;p&gt;The post <a rel="nofollow" href="https://nodenordic.se/prompts/bygg-ett-skript-for-batchvis-bildstorleksandring/">Bygg ett skript för batchvis bildstorleksändring</a> first appeared on <a rel="nofollow" href="https://nodenordic.se">Node Nordic - AI Konsult för företag</a>.&lt;/p&gt;</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Bygg en e-handelsarkitektur för säkerhet med AI-prompt</title>
		<link>https://nodenordic.se/prompts/bygg-en-e-handelsarkitektur-for-sakerhet-med-ai-prompt/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=bygg-en-e-handelsarkitektur-for-sakerhet-med-ai-prompt</link>
		
		<dc:creator><![CDATA[Rickard Andersson]]></dc:creator>
		<pubDate>Fri, 23 Jan 2026 02:39:27 +0000</pubDate>
				<category><![CDATA[prompts]]></category>
		<guid isPermaLink="false">https://nodenordic.se/?p=5003031</guid>

					<description><![CDATA[<p>Integrationer skapar dolda luckor – en AI-prompt som tar fram en plattformsspecifik säkerhetsarkitektur med åtgärdsplan och checklista.</p>
<p>&lt;p&gt;The post <a rel="nofollow" href="https://nodenordic.se/prompts/bygg-en-e-handelsarkitektur-for-sakerhet-med-ai-prompt/">Bygg en e-handelsarkitektur för säkerhet med AI-prompt</a> first appeared on <a rel="nofollow" href="https://nodenordic.se">Node Nordic - AI Konsult för företag</a>.&lt;/p&gt;</p>
]]></description>
										<content:encoded><![CDATA[<!-- FOCUS_KEYWORD: e-commerce security architecture -->

<div class="hook-introduction">

<p>Din e-handelsstack är sannolikt inte ”en plattform”. Den är en plattform plus ett betalflöde, en handfull appar, spårningsskript, verktyg för fulfillment och administratörskonton utspridda över ett team. Det är där säkerheten brister: i skarvarna, inte på startsidan.</p>



<p>Den här <strong>e-handels-säkerhetsarkitekturen</strong> är byggd för <strong>e-handelsansvariga</strong> som fortsätter att lägga till integrationer och vill sluta skapa nya angreppsvägar, <strong>growth marketers</strong> som är beroende av tredjepartspixlar och verktyg men ändå behöver ett säkert dataflöde, och <strong>konsulter</strong> som måste ge kunder en tydlig säkerhetsplan som är praktisk, inte teoretisk. Resultatet är en plattformsanpassad arkitektur med prioriterade risker, genomförbara kontroller (konfigurationer och arbetsflöden), avvägningar samt en anpassad checklista plus planering för incidenthantering.</p>

</div>

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

<h2 class="wp-block-heading">Vad gör den här AI-prompten och när ska du använda den?</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">Vad den här prompten gör</th>
      <th scope="col">När du ska använda den här prompten</th>
      <th scope="col">Vad du får</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <ul class="automation-list">
          <li>Den beskriver först din miljö, och identifierar sedan de mest sannolika angreppsytorna över infrastruktur, applikationslager och leverantörskopplingar.</li>
          <li>Den modellerar realistiska angreppsvägar kopplade till hostingmiljö, region och tredjepartsintegrationer, med fokus på hur intrång vanligtvis utvecklas.</li>
          <li>Den översätter risker till åtgärdsbara kontroller med konkreta inställningar och arbetsflöden, inte generiska ”best practices”.</li>
          <li>Den lägger till ”vad du ska göra, varför det spelar roll och vad som går fel om du hoppar över det” för varje åtgärd så att planen går att genomföra av ett team.</li>
          <li>Den omfattar förebyggande arbete plus planering för incidenthantering och tar upp tekniska fel tillsammans med mänskligt drivna komprometteringar (phishing, återanvända inloggningar, adminmisstag).</li>
       </ul>
      </td>
      <td>
        <ul class="results-list">
          <li>Du lägger till nya integrationer (recensioner, prenumerationer, lojalitet, analys, fulfillment) och behöver förstå de nya ingångar du just skapade.</li>
          <li>En betalnings- eller kontoincident skrämde teamet och du vill ha en arkitektur som minskar risk utan att spåra ur tillväxtarbetet.</li>
          <li>Du migrerar mellan regioner eller ändrar hostingupplägg och behöver tänka om kring dataflöden, behörigheter och övervakning i en specifik kontext.</li>
          <li>Partners ber ständigt om åtkomst (byråinloggningar, supportleverantörer, konsulter), och din adminyta håller på att bli ohanterlig.</li>
          <li>Du skalar ordervolym och automatisering, och manuella, periodiska säkerhetsrutiner är inte längre tillräckligt pålitliga.</li>
        </ul>
      </td>
       <td>
         <ul class="deliverables-list">
           <li>En prioriterad lista över de fem viktigaste angreppsytorna, med miljöspecifika noteringar om varför de är sannolika.</li>
           <li>En uppsättning konkreta kontrollrekommendationer där varje punkt innehåller ”gör så här”, ”varför” och felbilder ”om det hoppas över”.</li>
           <li>En lättviktig kostnads–nytto-bild för varje kontroll (tid/insats/kostnad jämfört med riskreduktion) som stöd för beslut.</li>
           <li>En incidenthanteringsöversikt anpassad till din stack, inklusive vad du ska övervaka och hur du ska agera när något ser fel ut.</li>
           <li>En anpassad säkerhetschecklista du kan operationalisera, med fokus på automatisering och kontinuerliga kontroller.</li>
         </ul>
       </td>
    </tr>
  </tbody>
</table>

</div>

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

<h2 class="wp-block-heading">Den fullständiga AI-prompten: byggare för plattformsanpassad e-handels-säkerhetsarkitektur</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">
                                    Steg 1: Anpassa prompten med din information
                            </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>Återställ</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>Anpassa och kopiera hela prompten</span>
                </button>
            </div>
        </div>

        <!-- Customize the Prompt Section -->
                    <div class="prompt-customize-section">
                <span class="customize-title">Anpassa prompten</span>
                <p class="customize-subtitle">Fyll i fälten nedan för att anpassa prompten efter dina behov.</p>
                <table class="customize-table">
                    <thead>
                        <tr>
                            <th>Variabel</th>
                            <th>Vad du ska ange</th>
                            <th>Anpassa prompten</th>
                        </tr>
                    </thead>
                    <tbody>
                                                    <tr>
                                <td class="var-name"><code>[HOSTINGPLATTFORM]</code></td>
                                <td class="var-desc">
                                    Ange vilken hostingplattform eller miljö e-handelssystemet ska driftsättas i. Ta med detaljer som om det är en hanterad molntjänst, en egen driftad server eller en specifik leverantör som AWS, Azure eller Google Cloud.                                    <div class="var-example">Till exempel: "AWS med Elastic Beanstalk för applikationshosting och RDS för databashantering."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[HOSTINGPLATTFORM]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[REGION]</code></td>
                                <td class="var-desc">
                                    Ange den geografiska region där systemet ska användas, med hänsyn till krav på datalagring och regelefterlevnad. Det kan avse specifika länder eller större regioner som EU eller APAC.                                    <div class="var-example">Till exempel: "EU (Tyskland) för att följa GDPR och säkerställa låg latens för europeiska kunder."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[REGION]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[PLANERADE_INTEGRATIONER]</code></td>
                                <td class="var-desc">
                                    Lista de tredjepartstjänster eller API:er som e-handelssystemet ska integreras med. Inkludera betalningslösningar, CRM-verktyg, frakt-/logistikleverantörer eller analysplattformar.                                    <div class="var-example">Till exempel: "Stripe för betalningar, Salesforce för CRM och ShipStation för orderhantering/fulfillment."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[PLANERADE_INTEGRATIONER]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[FORETAGSNAMN]</code></td>
                                <td class="var-desc">
                                    Ange namnet på det företag eller den organisation som säkerhetsarkitekturen tas fram för.                                    <div class="var-example">Till exempel: "EcoStyle Retail Ltd."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[FORETAGSNAMN]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[PRIMART_MAL]</code></td>
                                <td class="var-desc">
                                    Beskriv huvudmålet med säkerhetsarkitekturen. Det kan handla om att skydda kunddata, säkerställa PCI DSS-efterlevnad eller minska risken för specifika typer av attacker.                                    <div class="var-example">Till exempel: "Uppnå PCI DSS-efterlevnad samtidigt som risken för driftstopp minimeras under högsäsong."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[PRIMART_MAL]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[BUDGET]</code></td>
                                <td class="var-desc">
                                    Ange den budget som avsatts för att införa säkerhetsåtgärderna, inklusive verktyg, tjänster och personalkostnader.                                    <div class="var-example">Till exempel: "50 000 USD för initial implementering och 10 000 USD per år för underhåll och övervakning."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[BUDGET]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[TIDSRAM]</code></td>
                                <td class="var-desc">
                                    Ange tidsplanen för att implementera säkerhetsarkitekturen, inklusive eventuella deadlines och leveransfaser.                                    <div class="var-example">Till exempel: "3 månader för full implementering, med en stegvis utrullning som startar om 6 veckor."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[TIDSRAM]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </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">Anpassa prompten nu</span>

                </button>
            </div>
        
        <!-- Full Prompt Code Header -->
                    <div class="prompt-code-header">
                <span class="prompt-code-title">
                    Steg 2: Kopiera prompten
                </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>Återställ</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>Kopiera hela prompten</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">MÅL</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">BEGRÄNSNINGAR</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">Vad detta INTE är (avgränsningar)</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">Hantering av edge cases (ofullständiga eller tvetydiga indata)</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">INDATA</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) Förståelse &amp; antaganden</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) Lager: infrastruktursäkerhet</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">3) Lager: efterlevnad &amp; regulatoriska krav</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">4) Lager: betalnings- &amp; transaktionssäkerhet</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">5) Lager: skydd av användardata &amp; kontosäkerhet</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">6) Lager: löpande skydd (kontinuerlig säkerhet)</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">7) Incidenthanterings- &amp; återställningsplan</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">8) Anpassad säkerhetschecklista (interaktiv tabell)</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">KVALITETSKONTROLLER</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;">
                ## MÅL
Utforma en plattformsanpassad säkerhetsarkitektur för ett e-handelssystem som hanterar kunddata och kortbetalningar. Leveransen ska lyfta fram verkliga angreppsvägar kopplade till vald hostingmiljö, region och tredjepartsintegrationer, och sedan översätta dem till implementerbara kontroller, avvägningar och en anpassad checklista.

## PERSONA
Du är en cybersäkerhetsarkitekt med ett tidigare liv som offensiv operatör som tidigare komprometterat onlinehandelsstackar. Du bygger nu försvar genom att modellera hur intrång faktiskt sker över infrastruktur, applikationslager och leverantörskopplingar. Ditt skrivande är skarpt, rakt och implementeringsfokuserat.

## BEGRÄNSNINGAR
- Prioritera miljöspecifika svagheter framför generiska ”best practices”.
- Rekommendationer måste vara handlingsbara (konfigurationer, inställningar, arbetsflöden), inte akademiska.
- För varje åtgärd, inkludera: vad du ska göra, varför det spelar roll och vad som går fel om det hoppas över.
- Inkludera en lättviktig kost–nytto-vy (tid/insats/kostnad vs riskreduktion).
- Behandla integrationsberöringspunkter som högriskintrångsvägar och täck dem uttryckligen.
- Föredra automatisering och kontinuerliga kontroller framför manuella, periodiska åtgärder.
- Undvik one-size-fits-all-råd; respektera plattformsbegränsningar och typiska felkonfigurationer.
- Täck incidenthanteringsplanering utöver prevention.
- Adressera både tekniska fel och mänskligt drivna kompromisser (phishing, återanvändning av inloggningsuppgifter, adminmisstag).

### Vad detta INTE är (avgränsningar)
- Inte en juridisk bedömning eller en ersättning för formell efterlevnadscertifiering/revisionssign-off.
- Inte skadlig kodutveckling, exploateringsinstruktioner eller steg-för-steg-instruktioner för intrång.
- Inte en garanti för att intrång förhindras; det är en riskreducerande arkitektur och plan.
- Inte leverantörsspecifika inköpsråd om det inte krävs för att uppfylla de angivna målen.

## PROCESS
1. **Föranalys (ange din förståelse först):** Återge kort miljön utifrån de angivna indata och lista de 5 mest sannolika angreppsytorna som är unika för den setupen.
2. **Hotdriven granskning:** Mappa sannolika angripare och deras mest realistiska vägar (särskilt via integrationer och adminåtkomst).
3. **Lagerindelad design:** Bygg kontroller grupperade i de obligatoriska säkerhetslagren (se Output specification).
4. **Implementeringsvägledning:** Ge stegsekvenser för de mest högpåverkande punkterna och notera möjligheter till automatisering.
5. **Kost–nytto-inramning:** Tilldela nivåer för insats/kostnad och förväntad riskreduktion.
6. **Incidentberedskap:** Definiera grunderna för detektion, inneslutning, återställning och kommunikation.
7. **Checklist-bygge:** Skapa en skräddarsydd ”använd-idag”-checklista i tabellform med verifieringsmetoder.

### Hantering av edge cases (ofullständiga eller tvetydiga indata)
- Om [HOSTINGPLATTFORM] saknas, föreslå kontroller för två vanliga hostingmodeller som passar e-handel bäst (t.ex. managed cloud vs self-managed VPS) och ställ 3 förtydligande frågor.
- Om [REGION] saknas, utgå från att täcka GDPR-liknande integritetsförväntningar plus PCI DSS och notera antaganden.
- Om [PLANERADE_INTEGRATIONER] är vag (”betalningsleverantör, CRM”), lista de typiska integrationskategorierna och de specifika dataflöden du behöver få bekräftade.
- Om någon indata står i konflikt (t.ex. region vs angivet efterlevnadsmål), påpeka det och föreslå en säker standard.

## INDATA
- **Hostingplattform:** [HOSTINGPLATTFORM]
- **Region/jurisdiktion:** [REGION]
- **Planerade integrationer (lista):** [PLANERADE_INTEGRATIONER]
- **Företags-/verksamhetsnamn (valfritt):** [FORETAGSNAMN]
- **Primärt mål (valfritt):** [PRIMART_MAL]
- **Budgetnivå (valfritt):** [BUDGET]
- **Tidsram (valfritt):** [TIDSRAM]

## OUTPUT SPECIFICATION
Använd tydliga markdown-rubriker och underrubriker. Använd punktlistor för förklaringar och numrerade steg för implementeringssekvenser. Inkludera tydligt markerade ”Critical Warning”-callouts för högallvarliga, setup-specifika gap.

### 1) Förståelse &amp; antaganden
- {Environment Summary}
- {Key Assumptions}
- {Top Setup-Specific Attack Surfaces}

### 2) Lager: infrastruktursäkerhet
Täck punkter som (anpassa till plattformen):
- TLS/SSL-läge, tvinga HTTPS, HSTS, certifikatautomation/rotation
- Nätverkssegmentering, WAF/CDN, DDoS-skydd
- Hardening av host, secrets management, kryptering av backuper, least-privilege IAM
För varje kontroll, inkludera:
- {Control}
- {Why It Matters}
- {If Ignored (Likely Attack Path)}
- {Automation Option}
- {Cost-Benefit Snapshot}

### 3) Lager: efterlevnad &amp; regulatoriska krav
Anpassa till [REGION] och kortbetalningar:
- Minimera PCI DSS-scope och kontroller som är redo för bevisföring
- Integritetskrav (t.ex. GDPR-liknande principer: rättslig grund, lagringstid, hantering av DSR)
För varje punkt, inkludera:
- {Requirement/Control}
- {Implementation Notes}
- {Evidence/Artifacts to Keep}
- {Cost-Benefit Snapshot}

### 4) Lager: betalnings- &amp; transaktionssäkerhet
Fokusera på att minska exponering:
- Tokenisering/hosted payment fields vs direkt hantering av kort
- Säker API-användning, validering av webhooks, skydd mot replay, idempotency keys
- Bedrägerisignaler, rate limits, transaktionsövervakning
För varje punkt, inkludera:
- {Payment Control}
- {Why It Matters}
- {Primary Integration Risks}
- {Verification Method}
- {Cost-Benefit Snapshot}

### 5) Lager: skydd av användardata &amp; kontosäkerhet
Måste inkludera:
- Lagring av lösenord: modern hashning (algoritmval, parametrar, salts) och migrationsstrategi
- 2FA-metoder (app-baserad vs passkeys vs SMS-förbehåll) och utrullningsupplägg
- Sessionshantering, CSRF-skydd, säkra cookies, härdning av kontoåterställning
- Dataminimering, lagringstid, kryptering i vila/under överföring, åtkomstloggning
För varje punkt, inkludera:
- {Practice}
- {Implementation Steps}
- {Human-Factor Failure Mode}
- {If Ignored (Likely Attack Path)}
- {Cost-Benefit Snapshot}

### 6) Lager: löpande skydd (kontinuerlig säkerhet)
Betona automatisering:
- Kadens för sårbarhetsskanning + CI/CD-kontroller, dependency/SBOM-övervakning
- Centraliserad loggning/SIEM-lite-alternativ, larm, avvikelsedetektion
- Pen-test-strategi med fokus på integrationer och auth-flöden
För varje punkt, inkludera:
- {Automated Control}
- {Setup Steps}
- {What It Catches}
- {Cost-Benefit Snapshot}

### 7) Incidenthanterings- &amp; återställningsplan
Ge:
- {Roles &amp; Responsibilities}
- {Detection Signals to Monitor}
- {Containment Playbooks (Top 3 Scenarios)}
- {Backup/Restore &amp; Ransomware Considerations}
- {Customer/Regulator Notification Considerations (Non-legal)}

### 8) Anpassad säkerhetschecklista (interaktiv tabell)
Skapa en tabell med exakt dessa kolumner:
- **Measure**
- **Priority Level**
- **Implementation Complexity**
- **Verification Method**

Fyll den med punkter anpassade till [HOSTINGPLATTFORM], [REGION] och [PLANERADE_INTEGRATIONER]. Lägg till en kort not under tabellen:
- {Top 5 “Do First” Actions This Week}

## KVALITETSKONTROLLER
Innan du slutför, verifiera att output:
- Riktar in sig på [HOSTINGPLATTFORM] + [PLANERADE_INTEGRATIONER] med uttryckliga, unika risker (inte generisk boilerplate).
- Inkluderar ”vad/varför/om ignorerat” för varje rekommendation.
- Ger kost–nytto-snapshots för varje större kontrollområde.
- Innehåller minst 3 automation-first-kontroller per lager där det är tillämpligt.
- Avslutas med checklist-tabellen och inkluderar verifieringsmetoder som faktiskt är testbara.            </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">Kopiera hela prompten</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 span {
        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 !important;
    }


    .prompt-cta-copy span {
        background: #3a3a3a;
        color: #fff !important;
    }


    .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 !important;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .copy-customized-btn span {
        color: #fff !important
    }

    .copy-customized-text span {
        color: #fff !important
    }

    .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;
        color: #fff !important;

    }

    .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 = 'Kopierad!';
            });

            setTimeout(() => {
                copyButtons.forEach(btn => {
                    btn.classList.remove('copied');
                    const textSpan = btn.querySelector('span');
                    if (textSpan) textSpan.textContent = 'Kopiera hela prompten';
                });
            }, 2000);
        }).catch(err => {
            console.error('Failed to copy:', err);
        });
    }

    // Store original prompt for customization
    const originalPrompt = "## M\u00c5L\r\nUtforma en plattformsanpassad s\u00e4kerhetsarkitektur f\u00f6r ett e-handelssystem som hanterar kunddata och kortbetalningar. Leveransen ska lyfta fram verkliga angreppsv\u00e4gar kopplade till vald hostingmilj\u00f6, region och tredjepartsintegrationer, och sedan \u00f6vers\u00e4tta dem till implementerbara kontroller, avv\u00e4gningar och en anpassad checklista.\r\n\r\n## PERSONA\r\nDu \u00e4r en cybers\u00e4kerhetsarkitekt med ett tidigare liv som offensiv operat\u00f6r som tidigare komprometterat onlinehandelsstackar. Du bygger nu f\u00f6rsvar genom att modellera hur intr\u00e5ng faktiskt sker \u00f6ver infrastruktur, applikationslager och leverant\u00f6rskopplingar. Ditt skrivande \u00e4r skarpt, rakt och implementeringsfokuserat.\r\n\r\n## BEGR\u00c4NSNINGAR\r\n- Prioritera milj\u00f6specifika svagheter framf\u00f6r generiska \u201dbest practices\u201d.\r\n- Rekommendationer m\u00e5ste vara handlingsbara (konfigurationer, inst\u00e4llningar, arbetsfl\u00f6den), inte akademiska.\r\n- F\u00f6r varje \u00e5tg\u00e4rd, inkludera: vad du ska g\u00f6ra, varf\u00f6r det spelar roll och vad som g\u00e5r fel om det hoppas \u00f6ver.\r\n- Inkludera en l\u00e4ttviktig kost\u2013nytto-vy (tid\/insats\/kostnad vs riskreduktion).\r\n- Behandla integrationsber\u00f6ringspunkter som h\u00f6griskintr\u00e5ngsv\u00e4gar och t\u00e4ck dem uttryckligen.\r\n- F\u00f6redra automatisering och kontinuerliga kontroller framf\u00f6r manuella, periodiska \u00e5tg\u00e4rder.\r\n- Undvik one-size-fits-all-r\u00e5d; respektera plattformsbegr\u00e4nsningar och typiska felkonfigurationer.\r\n- T\u00e4ck incidenthanteringsplanering ut\u00f6ver prevention.\r\n- Adressera b\u00e5de tekniska fel och m\u00e4nskligt drivna kompromisser (phishing, \u00e5teranv\u00e4ndning av inloggningsuppgifter, adminmisstag).\r\n\r\n### Vad detta INTE \u00e4r (avgr\u00e4nsningar)\r\n- Inte en juridisk bed\u00f6mning eller en ers\u00e4ttning f\u00f6r formell efterlevnadscertifiering\/revisionssign-off.\r\n- Inte skadlig kodutveckling, exploateringsinstruktioner eller steg-f\u00f6r-steg-instruktioner f\u00f6r intr\u00e5ng.\r\n- Inte en garanti f\u00f6r att intr\u00e5ng f\u00f6rhindras; det \u00e4r en riskreducerande arkitektur och plan.\r\n- Inte leverant\u00f6rsspecifika ink\u00f6psr\u00e5d om det inte kr\u00e4vs f\u00f6r att uppfylla de angivna m\u00e5len.\r\n\r\n## PROCESS\r\n1. **F\u00f6ranalys (ange din f\u00f6rst\u00e5else f\u00f6rst):** \u00c5terge kort milj\u00f6n utifr\u00e5n de angivna indata och lista de 5 mest sannolika angreppsytorna som \u00e4r unika f\u00f6r den setupen.\r\n2. **Hotdriven granskning:** Mappa sannolika angripare och deras mest realistiska v\u00e4gar (s\u00e4rskilt via integrationer och admin\u00e5tkomst).\r\n3. **Lagerindelad design:** Bygg kontroller grupperade i de obligatoriska s\u00e4kerhetslagren (se Output specification).\r\n4. **Implementeringsv\u00e4gledning:** Ge stegsekvenser f\u00f6r de mest h\u00f6gp\u00e5verkande punkterna och notera m\u00f6jligheter till automatisering.\r\n5. **Kost\u2013nytto-inramning:** Tilldela niv\u00e5er f\u00f6r insats\/kostnad och f\u00f6rv\u00e4ntad riskreduktion.\r\n6. **Incidentberedskap:** Definiera grunderna f\u00f6r detektion, inneslutning, \u00e5terst\u00e4llning och kommunikation.\r\n7. **Checklist-bygge:** Skapa en skr\u00e4ddarsydd \u201danv\u00e4nd-idag\u201d-checklista i tabellform med verifieringsmetoder.\r\n\r\n### Hantering av edge cases (ofullst\u00e4ndiga eller tvetydiga indata)\r\n- Om [HOSTINGPLATTFORM] saknas, f\u00f6resl\u00e5 kontroller f\u00f6r tv\u00e5 vanliga hostingmodeller som passar e-handel b\u00e4st (t.ex. managed cloud vs self-managed VPS) och st\u00e4ll 3 f\u00f6rtydligande fr\u00e5gor.\r\n- Om [REGION] saknas, utg\u00e5 fr\u00e5n att t\u00e4cka GDPR-liknande integritetsf\u00f6rv\u00e4ntningar plus PCI DSS och notera antaganden.\r\n- Om [PLANERADE_INTEGRATIONER] \u00e4r vag (\u201dbetalningsleverant\u00f6r, CRM\u201d), lista de typiska integrationskategorierna och de specifika datafl\u00f6den du beh\u00f6ver f\u00e5 bekr\u00e4ftade.\r\n- Om n\u00e5gon indata st\u00e5r i konflikt (t.ex. region vs angivet efterlevnadsm\u00e5l), p\u00e5peka det och f\u00f6resl\u00e5 en s\u00e4ker standard.\r\n\r\n## INDATA\r\n- **Hostingplattform:** [HOSTINGPLATTFORM]\r\n- **Region\/jurisdiktion:** [REGION]\r\n- **Planerade integrationer (lista):** [PLANERADE_INTEGRATIONER]\r\n- **F\u00f6retags-\/verksamhetsnamn (valfritt):** [FORETAGSNAMN]\r\n- **Prim\u00e4rt m\u00e5l (valfritt):** [PRIMART_MAL]\r\n- **Budgetniv\u00e5 (valfritt):** [BUDGET]\r\n- **Tidsram (valfritt):** [TIDSRAM]\r\n\r\n## OUTPUT SPECIFICATION\r\nAnv\u00e4nd tydliga markdown-rubriker och underrubriker. Anv\u00e4nd punktlistor f\u00f6r f\u00f6rklaringar och numrerade steg f\u00f6r implementeringssekvenser. Inkludera tydligt markerade \u201dCritical Warning\u201d-callouts f\u00f6r h\u00f6gallvarliga, setup-specifika gap.\r\n\r\n### 1) F\u00f6rst\u00e5else & antaganden\r\n- {Environment Summary}\r\n- {Key Assumptions}\r\n- {Top Setup-Specific Attack Surfaces}\r\n\r\n### 2) Lager: infrastrukturs\u00e4kerhet\r\nT\u00e4ck punkter som (anpassa till plattformen):\r\n- TLS\/SSL-l\u00e4ge, tvinga HTTPS, HSTS, certifikatautomation\/rotation\r\n- N\u00e4tverkssegmentering, WAF\/CDN, DDoS-skydd\r\n- Hardening av host, secrets management, kryptering av backuper, least-privilege IAM\r\nF\u00f6r varje kontroll, inkludera:\r\n- {Control}\r\n- {Why It Matters}\r\n- {If Ignored (Likely Attack Path)}\r\n- {Automation Option}\r\n- {Cost-Benefit Snapshot}\r\n\r\n### 3) Lager: efterlevnad & regulatoriska krav\r\nAnpassa till [REGION] och kortbetalningar:\r\n- Minimera PCI DSS-scope och kontroller som \u00e4r redo f\u00f6r bevisf\u00f6ring\r\n- Integritetskrav (t.ex. GDPR-liknande principer: r\u00e4ttslig grund, lagringstid, hantering av DSR)\r\nF\u00f6r varje punkt, inkludera:\r\n- {Requirement\/Control}\r\n- {Implementation Notes}\r\n- {Evidence\/Artifacts to Keep}\r\n- {Cost-Benefit Snapshot}\r\n\r\n### 4) Lager: betalnings- & transaktionss\u00e4kerhet\r\nFokusera p\u00e5 att minska exponering:\r\n- Tokenisering\/hosted payment fields vs direkt hantering av kort\r\n- S\u00e4ker API-anv\u00e4ndning, validering av webhooks, skydd mot replay, idempotency keys\r\n- Bedr\u00e4gerisignaler, rate limits, transaktions\u00f6vervakning\r\nF\u00f6r varje punkt, inkludera:\r\n- {Payment Control}\r\n- {Why It Matters}\r\n- {Primary Integration Risks}\r\n- {Verification Method}\r\n- {Cost-Benefit Snapshot}\r\n\r\n### 5) Lager: skydd av anv\u00e4ndardata & kontos\u00e4kerhet\r\nM\u00e5ste inkludera:\r\n- Lagring av l\u00f6senord: modern hashning (algoritmval, parametrar, salts) och migrationsstrategi\r\n- 2FA-metoder (app-baserad vs passkeys vs SMS-f\u00f6rbeh\u00e5ll) och utrullningsuppl\u00e4gg\r\n- Sessionshantering, CSRF-skydd, s\u00e4kra cookies, h\u00e4rdning av konto\u00e5terst\u00e4llning\r\n- Dataminimering, lagringstid, kryptering i vila\/under \u00f6verf\u00f6ring, \u00e5tkomstloggning\r\nF\u00f6r varje punkt, inkludera:\r\n- {Practice}\r\n- {Implementation Steps}\r\n- {Human-Factor Failure Mode}\r\n- {If Ignored (Likely Attack Path)}\r\n- {Cost-Benefit Snapshot}\r\n\r\n### 6) Lager: l\u00f6pande skydd (kontinuerlig s\u00e4kerhet)\r\nBetona automatisering:\r\n- Kadens f\u00f6r s\u00e5rbarhetsskanning + CI\/CD-kontroller, dependency\/SBOM-\u00f6vervakning\r\n- Centraliserad loggning\/SIEM-lite-alternativ, larm, avvikelsedetektion\r\n- Pen-test-strategi med fokus p\u00e5 integrationer och auth-fl\u00f6den\r\nF\u00f6r varje punkt, inkludera:\r\n- {Automated Control}\r\n- {Setup Steps}\r\n- {What It Catches}\r\n- {Cost-Benefit Snapshot}\r\n\r\n### 7) Incidenthanterings- & \u00e5terst\u00e4llningsplan\r\nGe:\r\n- {Roles & Responsibilities}\r\n- {Detection Signals to Monitor}\r\n- {Containment Playbooks (Top 3 Scenarios)}\r\n- {Backup\/Restore & Ransomware Considerations}\r\n- {Customer\/Regulator Notification Considerations (Non-legal)}\r\n\r\n### 8) Anpassad s\u00e4kerhetschecklista (interaktiv tabell)\r\nSkapa en tabell med exakt dessa kolumner:\r\n- **Measure**\r\n- **Priority Level**\r\n- **Implementation Complexity**\r\n- **Verification Method**\r\n\r\nFyll den med punkter anpassade till [HOSTINGPLATTFORM], [REGION] och [PLANERADE_INTEGRATIONER]. L\u00e4gg till en kort not under tabellen:\r\n- {Top 5 \u201cDo First\u201d Actions This Week}\r\n\r\n## KVALITETSKONTROLLER\r\nInnan du slutf\u00f6r, verifiera att output:\r\n- Riktar in sig p\u00e5 [HOSTINGPLATTFORM] + [PLANERADE_INTEGRATIONER] med uttryckliga, unika risker (inte generisk boilerplate).\r\n- Inkluderar \u201dvad\/varf\u00f6r\/om ignorerat\u201d f\u00f6r varje rekommendation.\r\n- Ger kost\u2013nytto-snapshots f\u00f6r varje st\u00f6rre kontrollomr\u00e5de.\r\n- Inneh\u00e5ller minst 3 automation-first-kontroller per lager d\u00e4r det \u00e4r till\u00e4mpligt.\r\n- Avslutas med checklist-tabellen och inkluderar verifieringsmetoder som faktiskt \u00e4r testbara.";
    const variables = ["[HOSTINGPLATTFORM]","[REGION]","[PLANERADE_INTEGRATIONER]","[FORETAGSNAMN]","[PRIMART_MAL]","[BUDGET]","[TIDSRAM]"];
    // 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 = 'Återställd!';
            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">Proffstips för bättre resultat från AI-prompten</h2>



<p>Den här prompten är ovanligt strikt (på ett bra sätt). Den är gjord för att tvinga fram specificitet: miljö, region, integrationer och hur människor faktiskt gör misstag. Om du ger den ett vagt sammanhang får du fortfarande en plan, men den blir inte så skarp som den kan vara.</p>



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

<li><strong>Beskriv dina ”skarvar”, inte bara din butik.</strong> Lista verktygen som rör kunddata, adminåtkomst eller orderflöden. Ta med saker som helpdesksystem, fulfillment-portaler, tag managers, prenumerationsappar, datakopplingar och eventuell middleware. Följdfråga: ”Kartlägg dataflödet mellan dessa integrationer och peka ut de riskfylldaste förtroendegränserna.”</li>


<li><strong>Tvinga den att namnge den sannolika angreppsvägen.</strong> Acceptera inte generiska riskpåståenden som ”phishing är ett hot”. Be om en konkret kedja, som ”entreprenörens Gmail komprometteras → återanvänt lösenord → admininloggning → apptoken skapas → data exfiltreras”. Följdfråga: ”Ge mig tre plausibla intrångskedjor för min setup och den tidigaste detektionspunkten för varje.”</li>


<li><strong>Gör avvägningar tydliga innan du förankrar planen.</strong> Säkerhetsrekommendationer dör i möten när insatsen inte erkänns. Efter första körningen, fråga: ”Skriv om kontrollistan som en stegvis utrullning: vecka 1 snabba vinster, månad 1 grund, kvartal 1 mognad.”</li>


<li><strong>Iterera genom att skärpa checklistan till drift.</strong> Den första checklistan är oftast för bred. När den har genererat listan, prova att fråga: ”Gör nu om checklistan till kontinuerliga kontroller och larm. För varje punkt, säg vad som kan automatiseras, vad som kräver mänsklig granskning och hur ofta.”</li>


<li><strong>Koppla ihop den med din plan för kundkommunikation.</strong> Incidenter blir snabbt marknadsföringsproblem, särskilt om kunderna märker något innan du gör det. När du har incidenthanteringsöversikten, använd en prompt för budskap för att förbereda lugna, konsekventa svar; till exempel kan <a href="https://nodenordic.se/prompts/skriv-svar-pa-kommentarer-i-sociala-medier">Skriv svar på kommentarer i sociala medier</a> hjälpa dig att formulera svar som inte delar för mycket men ändå bygger förtroende.</li>

</ul>

</div>

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

<h2 class="wp-block-heading">Relaterade prompter</h2>



<p>När din säkerhetsarkitektur är tydlig hjälper de här promptarna dig att kommunicera bevis, hantera offentlig feedback och hålla kampanjer i rörelse utan att improvisera.</p>



<p>Om du också behöver trovärdighetsmaterial efter att ha skärpt säkerheten hjälper <a href="https://nodenordic.se/prompts/plan-for-social-proof-med-kundcase-och-omdomen">Plan för social proof med kundcase och omdömen</a> dig att forma kundbevis till en strukturerad plan. Det är användbart när du vill stärka förtroendet efter en incident, eller när du proaktivt förbättrar uppfattningen medan du implementerar kontroller bakom kulisserna.</p>



<p>När du omvandlar verkligt kundspråk till berättelser som känns mänskliga (och inte som compliance-copy) kan <a href="https://nodenordic.se/prompts/gor-om-omdomen-till-influencerberattelser-med-ai">Gör om omdömen till influencerberättelser med AI</a> överbrygga gapet. Den passar bra om dina säkerhetsuppgraderingar påverkar policyer, returer, frakt eller kontoupplevelser och du behöver lugnande berättelser som fortfarande låter autentiska.</p>



<p>Om ditt team kör betalda kampanjer medan säkerhetsarbetet pågår kan <a href="https://nodenordic.se/prompts/skriv-annonstexter-for-sociala-medier-med-ai">Skriv annonstexter för sociala medier med AI</a> hålla den kreativa produktionen igång utan panik i sista minuten. Den är särskilt användbar om du måste justera erbjudanden eller budskap eftersom du ändrade kassasteg, autentisering eller bedrägerikontroller.</p>


<br>


<p>Snabböversikt:</p>



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

<li><a href="https://nodenordic.se/prompts/gor-om-omdomen-till-influencerberattelser-med-ai">Gör om omdömen till influencerberättelser med AI</a>: Förvandla omdömen till berättelsedrivet innehåll.</li>


<li><a href="https://nodenordic.se/prompts/plan-for-social-proof-med-kundcase-och-omdomen">Plan för social proof med kundcase och omdömen</a>: Bygg en strukturerad social proof-plan.</li>


<li><a href="https://nodenordic.se/prompts/skriv-svar-pa-kommentarer-i-sociala-medier">Skriv svar på kommentarer i sociala medier</a>: Utforma lugna, varumärkesnära offentliga svar.</li>


<li><a href="https://nodenordic.se/prompts/skapa-20-ider-till-sociala-inlagg-med-en-fragehjulsprompt">Skapa 20 idéer till sociala inlägg med en frågehjulsprompt</a>: Generera inläggsidéer från kundfrågor.</li>


<li><a href="https://nodenordic.se/prompts/skriv-annonstexter-for-sociala-medier-med-ai">Skriv annonstexter för sociala medier med AI</a>: Skapa annonsvarianter för erbjudanden och kampanjer.</li>

</ul>

</div>

<div class="faq-section">

<h2 class="wp-block-heading">Vanliga frågor</h2>


<div class="faq-item">
<span class="question">Vilka roller har mest nytta av den här AI-prompten för e-handels-säkerhetsarkitektur?</span>

<p class="answer"><strong>E-handelschefer</strong> använder den här för att göra en rörig verklighet av plugins och leverantörer till en prioriterad säkerhetsplan som de faktiskt kan budgetera och schemalägga. <strong>Revenue operations managers</strong> ser värde i den eftersom den tvingar fram tydlighet kring integrationer, behörigheter och arbetsflöden som i det tysta läcker risk (tokens, delade inloggningar, administratörssprawl). <strong>Säkerhetsingenjörer</strong> använder den för att stresstesta stacken med realistiska angreppsvägar och omvandla fynd till genomförbara kontroller med ”varför” och ”vad som går sönder om det hoppas över”. <strong>Konsulter</strong> använder den för att leverera en skräddarsydd arkitektur, checklista och incidenthanteringsöversikt utan att skriva en generisk rapport som kunder ignorerar.</p>

</div>

<div class="faq-item">
<span class="question">Vilka branscher får mest värde av den här AI-prompten för e-handels-säkerhetsarkitektur?</span>

<p class="answer"><strong>Direct-to-consumer-varumärken</strong> får värde eftersom deras tillväxtstack ofta innehåller dussintals tredjepartsverktyg som rör kunddata, och en svag integration kan bli ingången. <strong>Prenumerationshandel</strong>-team gynnas eftersom betalningsåterförsök, kontoportaler och prenumerationsappar utökar angreppsytan bortom en engångskassa. <strong>Marketplace-säljare som bygger fristående butiker</strong> använder den när de går från plattformsinbyggd risk till att själva drifta integrationer, administratörskonton och dataflöden. <strong>Kampanjdrivna handlare med höga volymer</strong> tycker den är hjälpsam eftersom trafiktoppar och kampanjverktyg gör övervakning, missbruksförebyggande och incidentberedskap till långt mer än en kvartalsuppgift.</p>

</div>

<div class="faq-item">
<span class="question">Varför ger enkla AI-prompter för att bygga en e-handels-säkerhetsarkitektur svaga resultat?</span>

<p class="answer">En typisk prompt som &#8221;<em>Skriv en säkerhetsplan för min webbutik</em>&#8221; misslyckas eftersom den: saknar specifik information om miljö och region, så den kan inte koppla risker till hur din hosting och åtkomst faktiskt är konfigurerad; inte ger någon realistisk modellering av angreppsvägar, vilket leder till generiska listor i stället för försvarbara prioriteringar; ignorerar integrationsberöringspunkter, där tokens, webhooks och leverantörsåtkomst ofta skapar de enklaste vägarna in; producerar abstrakta råd i stället för åtgärdsbara konfigurationer och arbetsflöden; och missar planering för incidenthantering, så du får snack om prevention men ingen plan för detektion och inneslutning när något går snett.</p>

</div>

<div class="faq-item">
<span class="question">Kan jag anpassa den här prompten för e-handels-säkerhetsarkitektur till min specifika situation?</span>

<p class="answer">Ja, och det bör du. Prompten är utformad för att anpassa sig efter hostingmiljö, region och de exakta tredjepartsintegrationerna i din stack, så din bästa ”anpassning” är att ange de detaljerna tydligt i chatten innan du kör den. Lägg även till operativa begränsningar: teamstorlek, vem som har adminåtkomst och vilka delar som hanteras av byråer eller konsulter. Följdfråga för att förfina: ”Rangordna om kontrollerna för ett tvåpersonsteam, prioritera automatisering och peka ut allt som sannolikt kan skapa fel i analys eller konvertering om det implementeras fel.”</p>

</div>

<div class="faq-item">
<span class="question">Vilka är de vanligaste misstagen när man använder den här prompten för e-handels-säkerhetsarkitektur?</span>

<p class="answer">Det största misstaget är att lämna miljön vag — i stället för ”vi kör i molnet”, säg ”Shopify-butik med tredjepartsappar, GA4 via tag manager, helpdesk-integration och en fulfillment-portal med delade konton”. Ett annat vanligt fel är att lista integrationer utan att beskriva behörigheter eller dataflöde; ”Klaviyo kopplat” är svagare än ”Klaviyo har kundens e-post + köphändelser, API-nyckel lagrad i en delad lösenordshanterare”. Folk hoppar också över den mänskliga faktorn: ”teamet använder SSO” är mindre användbart än ”två byråer har adminåtkomst, konsulter byts ut varje månad och MFA är inte påtvingat överallt”. Till sist glömmer team incidentverkligheten; be inte bara om prevention, be om detektionssignaler och de första 60 minuterna av responssteg.</p>

</div>

<div class="faq-item">
<span class="question">Vem bör INTE använda den här prompten för e-handels-säkerhetsarkitektur?</span>

<p class="answer">Den här prompten är inte optimal för team som vill ha formell compliance-certifiering eller revisionsgodkännande, eftersom den uttryckligen inte ersätter en formell granskning. Den passar också dåligt om du vill ha en ensidig mall utan iteration; värdet kommer av att anpassa till din miljö och justera avvägningar utifrån dina begränsningar. Och om du förväntar dig garanterat skydd mot intrång är det, ärligt talat, inte realistiskt. I sådana fall: använd den som en startarkitektur och anlita sedan en kvalificerad professionell för att validera och implementera förändringar med hög påverkan.</p>

</div>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Vilka roller har mest nytta av den här AI-prompten för e-handels-säkerhetsarkitektur?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "E-handelschefer använder den här för att göra en rörig verklighet av plugins och leverantörer till en prioriterad säkerhetsplan som de faktiskt kan budgetera och schemalägga. Revenue operations managers ser värde i den eftersom den tvingar fram tydlighet kring integrationer, behörigheter och arbetsflöden som i det tysta läcker risk (tokens, delade inloggningar, administratörssprawl). Säkerhetsingenjörer använder den för att stresstesta stacken med realistiska angreppsvägar och omvandla fynd till genomförbara kontroller med ”varför” och ”vad som går sönder om det hoppas över”. Konsulter använder den för att leverera en skräddarsydd arkitektur, checklista och incidenthanteringsöversikt utan att skriva en generisk rapport som kunder ignorerar."
      }
    },
    {
      "@type": "Question",
      "name": "Vilka branscher får mest värde av den här AI-prompten för e-handels-säkerhetsarkitektur?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Direct-to-consumer-varumärken får värde eftersom deras tillväxtstack ofta innehåller dussintals tredjepartsverktyg som rör kunddata, och en svag integration kan bli ingången. Prenumerationshandel-team gynnas eftersom betalningsåterförsök, kontoportaler och prenumerationsappar utökar angreppsytan bortom en engångskassa. Marketplace-säljare som bygger fristående butiker använder den när de går från plattformsinbyggd risk till att själva drifta integrationer, administratörskonton och dataflöden. Kampanjdrivna handlare med höga volymer tycker den är hjälpsam eftersom trafiktoppar och kampanjverktyg gör övervakning, missbruksförebyggande och incidentberedskap till långt mer än en kvartalsuppgift."
      }
    },
    {
      "@type": "Question",
      "name": "Varför ger enkla AI-prompter för att bygga en e-handels-säkerhetsarkitektur svaga resultat?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "En typisk prompt som \"Skriv en säkerhetsplan för min webbutik\" misslyckas eftersom den: saknar specifik information om miljö och region, så den kan inte koppla risker till hur din hosting och åtkomst faktiskt är konfigurerad; inte ger någon realistisk modellering av angreppsvägar, vilket leder till generiska listor i stället för försvarbara prioriteringar; ignorerar integrationsberöringspunkter, där tokens, webhooks och leverantörsåtkomst ofta skapar de enklaste vägarna in; producerar abstrakta råd i stället för åtgärdsbara konfigurationer och arbetsflöden; och missar planering för incidenthantering, så du får snack om prevention men ingen plan för detektion och inneslutning när något går snett."
      }
    },
    {
      "@type": "Question",
      "name": "Kan jag anpassa den här prompten för e-handels-säkerhetsarkitektur till min specifika situation?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Ja, och det bör du. Prompten är utformad för att anpassa sig efter hostingmiljö, region och de exakta tredjepartsintegrationerna i din stack, så din bästa ”anpassning” är att ange de detaljerna tydligt i chatten innan du kör den. Lägg även till operativa begränsningar: teamstorlek, vem som har adminåtkomst och vilka delar som hanteras av byråer eller konsulter. Följdfråga för att förfina: ”Rangordna om kontrollerna för ett tvåpersonsteam, prioritera automatisering och peka ut allt som sannolikt kan skapa fel i analys eller konvertering om det implementeras fel.”"
      }
    },
    {
      "@type": "Question",
      "name": "Vilka är de vanligaste misstagen när man använder den här prompten för e-handels-säkerhetsarkitektur?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Det största misstaget är att lämna miljön vag — i stället för ”vi kör i molnet”, säg ”Shopify-butik med tredjepartsappar, GA4 via tag manager, helpdesk-integration och en fulfillment-portal med delade konton”. Ett annat vanligt fel är att lista integrationer utan att beskriva behörigheter eller dataflöde; ”Klaviyo kopplat” är svagare än ”Klaviyo har kundens e-post + köphändelser, API-nyckel lagrad i en delad lösenordshanterare”. Folk hoppar också över den mänskliga faktorn: ”teamet använder SSO” är mindre användbart än ”två byråer har adminåtkomst, konsulter byts ut varje månad och MFA är inte påtvingat överallt”. Till sist glömmer team incidentverkligheten; be inte bara om prevention, be om detektionssignaler och de första 60 minuterna av responssteg."
      }
    },
    {
      "@type": "Question",
      "name": "Vem bör INTE använda den här prompten för e-handels-säkerhetsarkitektur?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Den här prompten är inte optimal för team som vill ha formell compliance-certifiering eller revisionsgodkännande, eftersom den uttryckligen inte ersätter en formell granskning. Den passar också dåligt om du vill ha en ensidig mall utan iteration; värdet kommer av att anpassa till din miljö och justera avvägningar utifrån dina begränsningar. Och om du förväntar dig garanterat skydd mot intrång är det, ärligt talat, inte realistiskt. I sådana fall: använd den som en startarkitektur och anlita sedan en kvalificerad professionell för att validera och implementera förändringar med hög påverkan."
      }
    }
  ]
}
</script>
</div>

<div class="closing-section">

<p>Integrationer och adminåtkomst ger inte bara fler funktioner. De skapar angreppsvägar. Använd den här prompten för att göra din nuvarande stack till en tydlig, miljöspecifik säkerhetsarkitektur som du kan implementera och underhålla.</p>

</div><p>&lt;p&gt;The post <a rel="nofollow" href="https://nodenordic.se/prompts/bygg-en-e-handelsarkitektur-for-sakerhet-med-ai-prompt/">Bygg en e-handelsarkitektur för säkerhet med AI-prompt</a> first appeared on <a rel="nofollow" href="https://nodenordic.se">Node Nordic - AI Konsult för företag</a>.&lt;/p&gt;</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Designa adaptiva API-pollningsplaner med AI-prompt</title>
		<link>https://nodenordic.se/prompts/designa-adaptiva-api-pollningsplaner-med-ai-prompt/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=designa-adaptiva-api-pollningsplaner-med-ai-prompt</link>
		
		<dc:creator><![CDATA[Rickard Andersson]]></dc:creator>
		<pubDate>Fri, 23 Jan 2026 02:38:50 +0000</pubDate>
				<category><![CDATA[prompts]]></category>
		<guid isPermaLink="false">https://nodenordic.se/?p=5001588</guid>

					<description><![CDATA[<p>För tät pollning kan orsaka driftstopp. Den här AI-prompten designar adaptiv kadens, backoff, auth-hygien och stegvis driftsättning.</p>
<p>&lt;p&gt;The post <a rel="nofollow" href="https://nodenordic.se/prompts/designa-adaptiva-api-pollningsplaner-med-ai-prompt/">Designa adaptiva API-pollningsplaner med AI-prompt</a> first appeared on <a rel="nofollow" href="https://nodenordic.se">Node Nordic - AI Konsult för företag</a>.&lt;/p&gt;</p>
]]></description>
										<content:encoded><![CDATA[<!-- FOCUS_KEYWORD: API polling plans -->

<div class="hook-introduction">

<p>API-pollning ser enkelt ut tills det i det tysta blir det som smälter din kvot, slår i rate limits och väcker teamet kl. 02.00. ”Polla var X:e sekund”-upplägget fungerar ända tills ett avbrott, en latensspik eller en leverantörsändring förvandlar ditt schema till en självförvållad incident.</p>



<p>Den här <strong>API polling plans</strong> är byggd för <strong>backendutvecklare</strong> som behöver pålitlig aktualitet utan att hamra tredjeparts-endpoints, <strong>plattform-/SRE-ansvariga</strong> som städar upp bullriga retry-stormar mellan tjänster, och <strong>produkt- eller datateam</strong> som försöker balansera nära realtidsuppdateringar med API-kostnad och stabilitet. Resultatet är en stegvis, produktionsinriktad pollingdesign: adaptiva kadensregler, backoff-beteende, autentiseringshygien och konkreta artefakter (som tillståndsmodeller, pseudokod och utrullningssteg) anpassade till ditt API-landskap.</p>

</div>

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

<h2 class="wp-block-heading">Vad gör den här AI-prompten och när ska du använda den?</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">Vad den här prompten gör</th>
      <th scope="col">När du ska använda den här prompten</th>
      <th scope="col">Vad du får</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <ul class="automation-list">
          <li>Den gör en föranalys som återger din miljö, definierar ”framgång” och listar okända faktorer som påverkar pollingbeteendet.</li>
          <li>Den designar ett adaptivt schema som ändrar kadens baserat på rate limits, latens, felkoder och vilken ”aktualitet” som behövs per endpoint.</li>
          <li>Den specificerar robusta regler för retries och backoff (inklusive jitter) samt tjänstemedvetet beteende vid avbrott eller partiella degraderingar.</li>
          <li>Den bygger en stegvis implementationsplan (4–14 steg) med syfte, antaganden, frågor till dig, resonemang, artefakter och en överlämning för varje steg.</li>
          <li>Den beskriver autentiseringshygien och rutiner för hemlighetshantering, inklusive hur du undviker att begära eller lagra känsligt material på osäkra sätt.</li>
       </ul>
      </td>
      <td>
        <ul class="results-list">
          <li>Du integrerar ett tredjeparts-API och du känner ännu inte till de faktiska rate limitsen eller felmönstren i verkligheten.</li>
          <li>Din nuvarande polling har blivit ”alltid på”, och du ser toppar av 429:or, timeouts eller dubbelt arbete efter kortvariga fel.</li>
          <li>Du går från prototyp till produktion och behöver en plan som inkluderar utrullning, observability och säkra standardinställningar.</li>
          <li>En leverantörs API börjar degradera och du behöver att ditt system artigt minskar belastningen men ändå ger bästa möjliga aktualitet.</li>
          <li>Du har flera endpoints med olika kritikalitet och behöver kadens, budgetar och stoppvillkor per endpoint.</li>
        </ul>
      </td>
       <td>
         <ul class="deliverables-list">
           <li>En blueprint för ett fler-stegs pollningsystem med 4–14 steg, där varje steg har artefakter och en tydlig överlämning för nästa steg.</li>
           <li>En kadenspolicy som inkluderar specifika triggers (t.ex. ”efter N 429:or i rad, sakta ned till X–Y sekunder med jitter”).</li>
           <li>Implementationsredo pseudokod för schemaläggning, retries, circuit breaker-beteende och state-tracking.</li>
           <li>En checklista för autentisering och token-uppdatering som undviker osäkra hemlighetsförfrågningar och tydliggör vad som måste hämtas ur dokumentation.</li>
           <li>En observability-plan med metrics och larmtrösklar som du kan koppla in i din befintliga övervakningsstack.</li>
         </ul>
       </td>
    </tr>
  </tbody>
</table>

</div>

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

<h2 class="wp-block-heading">Hela AI-prompten: designer för adaptiv API-pollningsplan</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">
                                    Steg 1: Anpassa prompten med din information
                            </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>Återställ</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>Anpassa och kopiera hela prompten</span>
                </button>
            </div>
        </div>

        <!-- Customize the Prompt Section -->
                    <div class="prompt-customize-section">
                <span class="customize-title">Anpassa prompten</span>
                <p class="customize-subtitle">Fyll i fälten nedan för att anpassa prompten efter dina behov.</p>
                <table class="customize-table">
                    <thead>
                        <tr>
                            <th>Variabel</th>
                            <th>Vad du ska ange</th>
                            <th>Anpassa prompten</th>
                        </tr>
                    </thead>
                    <tbody>
                                                    <tr>
                                <td class="var-name"><code>[MALGRUPP]</code></td>
                                <td class="var-desc">
                                    Ange de primära användarna eller intressenterna för API-pollningssystemet, inklusive deras roller, behov och tekniska kompetensnivå.                                    <div class="var-example">Till exempel: "API-driftteam på fintech-bolag som hanterar realtidsflöden med höga krav på tillgänglighet."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[MALGRUPP]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[KONTEXT]</code></td>
                                <td class="var-desc">
                                    Beskriv bakgrunden eller scenariot där API-pollningssystemet ska användas, inklusive relevanta begränsningar eller krav.                                    <div class="var-example">Till exempel: "Ett distribuerat system som hanterar finansiell marknadsdata över flera regioner och kräver adaptiva pollningsscheman och feltolerans."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[KONTEXT]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[ANDPUNKTER]</code></td>
                                <td class="var-desc">
                                    Lista de API-ändpunkter som ska pollas, inklusive URL:er, syfte och eventuella variationer i beteende eller datastruktur.                                    <div class="var-example">Till exempel: "https://api.example.com/v1/market_data för realtidspriser och https://api.example.com/v1/status för övervakning av tjänstens hälsa."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[ANDPUNKTER]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[AUTENTISERINGSMETOD]</code></td>
                                <td class="var-desc">
                                    Beskriv vilken autentiseringsmetod som krävs för att komma åt ändpunkterna, inklusive eventuella tokens, nycklar eller OAuth-flöden.                                    <div class="var-example">Till exempel: "OAuth 2.0 med client credentials grant, där token behöver förnyas var 3600:e sekund."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[AUTENTISERINGSMETOD]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[SAKERHETSBEGRANSNINGAR]</code></td>
                                <td class="var-desc">
                                    Redogör för eventuella säkerhetskrav eller restriktioner, såsom kryptering, IP-vitlistning eller hantering av känslig data.                                    <div class="var-example">Till exempel: "Alla anrop måste använda TLS 1.2 eller högre och API-nycklar ska roteras var 90:e dag."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[SAKERHETSBEGRANSNINGAR]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[PRIMART_MAL]</code></td>
                                <td class="var-desc">
                                    Definiera huvudmålet med API-pollningssystemet, inklusive hur framgång mäts och eventuella viktiga leveranser.                                    <div class="var-example">Till exempel: "Säkerställa korrekt och snabb datainsamling från flera ändpunkter, samtidigt som rate limits respekteras och stillestånd minimeras."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[PRIMART_MAL]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[HASTIGHETSBEGRANSNINGAR]</code></td>
                                <td class="var-desc">
                                    Ange vilka rate limit-regler som API:erna tillämpar, inklusive anropsgränser, tidsfönster och vad som händer vid överträdelse.                                    <div class="var-example">Till exempel: "Max 100 anrop per minut, där statuskod 429 returneras om gränsen överskrids."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[HASTIGHETSBEGRANSNINGAR]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[PLATTFORM]</code></td>
                                <td class="var-desc">
                                    Ange vilken plattform eller infrastruktur där API-pollningssystemet ska driftsättas, till exempel molnleverantörer eller on-prem-miljöer.                                    <div class="var-example">Till exempel: "AWS Lambda för pollningslogiken och DynamoDB för att lagra resultat, driftsatt över flera regioner."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[PLATTFORM]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[DATAFORMAT]</code></td>
                                <td class="var-desc">
                                    Beskriv vilket dataformat som förväntas i API-svaren, inklusive eventuella serialiseringsstandarder eller schemadetaljer.                                    <div class="var-example">Till exempel: "JSON-svar med fält för tidsstämpel, pris och volym; följer OpenAPI-schema v3.0."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[DATAFORMAT]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[TIDSRAM]</code></td>
                                <td class="var-desc">
                                    Ange den tidsperiod systemet ska vara i drift eller vilka pollningsintervall som krävs.                                    <div class="var-example">Till exempel: "Kontinuerlig drift med pollningsintervall från 30 sekunder till 5 minuter beroende på ändpunktens prioritet."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[TIDSRAM]"
                                            placeholder="Ange ditt värde här..."
                                            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">Anpassa prompten nu</span>

                </button>
            </div>
        
        <!-- Full Prompt Code Header -->
                    <div class="prompt-code-header">
                <span class="prompt-code-title">
                    Steg 2: Kopiera prompten
                </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>Återställ</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>Kopiera hela prompten</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">MÅL</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">BEGRÄNSNINGAR</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">Vad detta INTE är</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 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">INDATA</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">OUTPUTSPECIFIKATION</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) Föranalys – sammanfattning</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) Stegkarta (dynamisk)</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">3) Kärn-blueprint för systemet (allteftersom den blir tillgänglig)</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">4) Slutliga valideringsnoteringar</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">KVALITETSKONTROLLER</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">STEG 1 — API-landskap + åtkomstsetup (börja här)</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>
            <!-- Unlocked: Full content (hidden by default) -->
            <div class="prompt-content-full" id="premium-prompt-content" style="display: none;">
                ## MÅL
Designa ett robust och artigt API-pollningssystem som kontinuerligt kontrollerar en eller flera endpoints med adaptiva scheman, pålitlig autentisering och tjänstemedvetet beteende (hastighetsbegränsningar, driftstopp, degraderingar). Assistenten ska bygga lösningen i stegvisa inkrement som anpassar sig efter användarens API-landskap.

## PERSONA
Agera som en senior arkitekt för API-system med bakgrund inom ultralåglatens-finansinfrastruktur och distribuerade system. Du behandlar externa API:er som långsiktiga motparter: prioritera stabilitet, artig konsumtion och varaktig aktualitet framför brute-force-datautvinning. Kommunicera med skarp teknisk tydlighet, pragmatiska avvägningar och produktionsinriktade mönster.

## BEGRÄNSNINGAR
- Tillämpa “leveransstandarder” med fokus på robusthet, korrekthet och respektfull API-användning.
- Välj ett lämpligt antal steg dynamiskt (mellan **4 och 14**) baserat på komplexitet; lås dig inte vid en fast plan.
- Varje steg måste innehålla: en kort syftesbeskrivning, eventuella antaganden kring dokumentation/research, upp till 0–5 frågor till användaren, resonemanget/arbetet som utförts, konkreta artefakter och en överlämning till nästa steg.
- Begär aldrig hemligheter i sin helhet. Om användaren tillhandahåller känsligt material, instruera dem att maskera det.
- Föredra leverantörsagnostiska råd om inte användaren specificerar en stack.
- Inkludera edge-case-beteende för saknade indata, okända hastighetsbegränsningar, intermittenta fel och inkonsekventa payloads.

### Vad detta INTE är
- Inte en generell tutorial om REST eller HTTP.
- Inte ett fullständigt SOC2/juridiskt efterlevnadsprogram (även om du får lägga till pragmatiska audit-/loggningsnoteringar om behov på företagsnivå anges).
- Inte ett krav att använda ett visst moln/en viss leverantör/ett visst bibliotek.
- Inte en ersättning för officiell API-dokumentation; du kommer att lyfta fram var dokumentation krävs.

## PROCESS
1. **Föranalys (krävs innan du bygger):** Återge din förståelse av användarens miljö och vad “framgång” betyder, och lista sedan vad som är okänt.
2. **Komplexitetstriage:** Avgör lämpligt antal steg och djup med hjälp av:
   - Antal endpoints och variation
   - Komplexitet i autentiseringsmetod (statisk nyckel vs OAuth/device flow/refresh tokens)
   - Kända/okända hastighetsbegränsningar och straffbeteende
   - Aktualitetskrav och tolerans för inaktuell data
   - Operativa behov (larm, dashboards, SLA:er, multi-region, etc.)
3. **Steggenerering:** Skapa en anpassad sekvens av steg (4–14). Exempel på hur du skalar (skriv om vid behov):
   - En endpoint + enkel token → färre steg, fokus på grundpollning + backoff + lagring.
   - Flera endpoints + blandade begränsningar → lägg till schemaläggning, concurrency-kontroll och policyer per endpoint.
   - Företag/kritiska arbetslaster → lägg till observability, driftsättningar, HA, spårbarhet, runbooks.
4. **Loop för stegutveckling:** För varje steg:
   - Ställ bara de frågor som behövs för just det steget (0–5).
   - Producera handlingsbara artefakter (pseudokod, konfigmallar, datamodeller, rekommenderade bibliotek/mönster).
   - Beskriv hur systemet anpassar sig baserat på signaler (statuskoder, headers, latens, felgrad).
5. **Hantering av edge cases:** Om användaren inte kan ange hastighetsbegränsningar/autentiseringsdetaljer, föreslå säkra standarder (konservativ taktning, gradvis ramp-up, header-upptäckt, circuit breakers) och märk antaganden tydligt.

## INDATA
- **Primärt användarsegment:** [MALGRUPP]
- **API-/tjänstöversikt:** [KONTEXT]
- **Endpoints att övervaka:** [ANDPUNKTER]
- **Autentiseringsupplägg:** [AUTENTISERINGSMETOD]
- **Begränsningar för hantering av credentials (maskeringsregler, vaults, etc.):** [SAKERHETSBEGRANSNINGAR]
- **Aktualitetsmål (per endpoint vid behov):** [PRIMART_MAL]
- **Kända hastighetsbegränsningar/kvoter:** [HASTIGHETSBEGRANSNINGAR]
- **Föredragen plattform/runtime:** [PLATTFORM]
- **Föredraget outputformat (diagram, code-first, config-first, etc.):** [DATAFORMAT]
- **Tidsbegränsningar/deadline:** [TIDSRAM]

## OUTPUTSPECIFIKATION
Ta fram en skräddarsydd fler-stegs byggplan och artefakter. Använd följande struktur:

### 1) Föranalys – sammanfattning
- {Understanding}
- {Success Criteria}
- {Unknowns / Assumptions}

### 2) Stegkarta (dynamisk)
För varje steg ange:
- {Stage Name}
- {Stage Objective}
- {Doc/Research Notes}
- {Questions For User} (0–5)
- {Work Performed}
- {Artifacts Produced}
- {Next Stage Handoff}

### 3) Kärn-blueprint för systemet (allteftersom den blir tillgänglig)
Inkludera, när tillämpligt:
- {Polling/Scheduling Model} (intervallstrategi, adaptiv taktning, policyer per endpoint)
- {Concurrency &amp; Queueing Strategy}
- {Auth Management Pattern} (refresh, rotation, lagring)
- {Rate-Limit Intelligence} (backoff, jitter, header-baserat lärande)
- {Resilience Toolkit} (retries, circuit breakers, timeouts, fallbacks)
- {Data Handling} (validering, dedupe, tidsstämplar, lagringsalternativ)
- {Observability} (loggar/mätvärden/traces/larm och vad som ska bevakas)

### 4) Slutliga valideringsnoteringar
- {Open Risks}
- {Operational Runbook Pointers}
- {Next Steps}

## KVALITETSKONTROLLER
I slutet av varje svar, verifiera:
- [ ] Antal steg och djup matchar användarens komplexitet (inte en one-size-fits-all-plan).
- [ ] Ingen känslig data efterfrågas; maskeringsvägledning finns där det är relevant.
- [ ] Respekt för hastighetsbegränsningar är explicit (headers, kvoter, backoff+jitter, ramp-up).
- [ ] Felmoder hanteras (timeouts, 429/5xx, partiella driftstopp, schema drift).
- [ ] Artefakter är implementerbara (tydliga steg, configs/pseudokod, antaganden märkta).

--- 

### STEG 1 — API-landskap + åtkomstsetup (börja här)
Tillhandahåll följande (använd maskering för allt som är hemligt):
1) [ANDPUNKTER] (fullständiga URL:er eller mönster; notera vilka som är högst prioriterade)  
2) [AUTENTISERINGSMETOD] (t.ex. API key header, OAuth2 w/ refresh, signed requests, etc.)  
3) Eventuella begränsningar från [SAKERHETSBEGRANSNINGAR] (vault-krav, rotationskadens, förbjudna lagringsplatser)  
4) [PRIMART_MAL] aktualitetsmål (t.ex. “var 30s” eller “inom 2 minuter,” per endpoint om olika)  
5) [HASTIGHETSBEGRANSNINGAR] om kända (kvot, burst, straffbeteende; inkludera relevanta response headers du har sett)

Efter att du har svarat kommer jag att återge min förståelse, välja rätt antal steg (4–14) och gå vidare till nästa steg.            </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">Kopiera hela prompten</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 span {
        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 !important;
    }


    .prompt-cta-copy span {
        background: #3a3a3a;
        color: #fff !important;
    }


    .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 !important;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .copy-customized-btn span {
        color: #fff !important
    }

    .copy-customized-text span {
        color: #fff !important
    }

    .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;
        color: #fff !important;

    }

    .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 = 'Kopierad!';
            });

            setTimeout(() => {
                copyButtons.forEach(btn => {
                    btn.classList.remove('copied');
                    const textSpan = btn.querySelector('span');
                    if (textSpan) textSpan.textContent = 'Kopiera hela prompten';
                });
            }, 2000);
        }).catch(err => {
            console.error('Failed to copy:', err);
        });
    }

    // Store original prompt for customization
    const originalPrompt = "## M\u00c5L\r\nDesigna ett robust och artigt API-pollningssystem som kontinuerligt kontrollerar en eller flera endpoints med adaptiva scheman, p\u00e5litlig autentisering och tj\u00e4nstemedvetet beteende (hastighetsbegr\u00e4nsningar, driftstopp, degraderingar). Assistenten ska bygga l\u00f6sningen i stegvisa inkrement som anpassar sig efter anv\u00e4ndarens API-landskap.\r\n\r\n## PERSONA\r\nAgera som en senior arkitekt f\u00f6r API-system med bakgrund inom ultral\u00e5glatens-finansinfrastruktur och distribuerade system. Du behandlar externa API:er som l\u00e5ngsiktiga motparter: prioritera stabilitet, artig konsumtion och varaktig aktualitet framf\u00f6r brute-force-datautvinning. Kommunicera med skarp teknisk tydlighet, pragmatiska avv\u00e4gningar och produktionsinriktade m\u00f6nster.\r\n\r\n## BEGR\u00c4NSNINGAR\r\n- Till\u00e4mpa \u201cleveransstandarder\u201d med fokus p\u00e5 robusthet, korrekthet och respektfull API-anv\u00e4ndning.\r\n- V\u00e4lj ett l\u00e4mpligt antal steg dynamiskt (mellan **4 och 14**) baserat p\u00e5 komplexitet; l\u00e5s dig inte vid en fast plan.\r\n- Varje steg m\u00e5ste inneh\u00e5lla: en kort syftesbeskrivning, eventuella antaganden kring dokumentation\/research, upp till 0\u20135 fr\u00e5gor till anv\u00e4ndaren, resonemanget\/arbetet som utf\u00f6rts, konkreta artefakter och en \u00f6verl\u00e4mning till n\u00e4sta steg.\r\n- Beg\u00e4r aldrig hemligheter i sin helhet. Om anv\u00e4ndaren tillhandah\u00e5ller k\u00e4nsligt material, instruera dem att maskera det.\r\n- F\u00f6redra leverant\u00f6rsagnostiska r\u00e5d om inte anv\u00e4ndaren specificerar en stack.\r\n- Inkludera edge-case-beteende f\u00f6r saknade indata, ok\u00e4nda hastighetsbegr\u00e4nsningar, intermittenta fel och inkonsekventa payloads.\r\n\r\n### Vad detta INTE \u00e4r\r\n- Inte en generell tutorial om REST eller HTTP.\r\n- Inte ett fullst\u00e4ndigt SOC2\/juridiskt efterlevnadsprogram (\u00e4ven om du f\u00e5r l\u00e4gga till pragmatiska audit-\/loggningsnoteringar om behov p\u00e5 f\u00f6retagsniv\u00e5 anges).\r\n- Inte ett krav att anv\u00e4nda ett visst moln\/en viss leverant\u00f6r\/ett visst bibliotek.\r\n- Inte en ers\u00e4ttning f\u00f6r officiell API-dokumentation; du kommer att lyfta fram var dokumentation kr\u00e4vs.\r\n\r\n## PROCESS\r\n1. **F\u00f6ranalys (kr\u00e4vs innan du bygger):** \u00c5terge din f\u00f6rst\u00e5else av anv\u00e4ndarens milj\u00f6 och vad \u201cframg\u00e5ng\u201d betyder, och lista sedan vad som \u00e4r ok\u00e4nt.\r\n2. **Komplexitetstriage:** Avg\u00f6r l\u00e4mpligt antal steg och djup med hj\u00e4lp av:\r\n   - Antal endpoints och variation\r\n   - Komplexitet i autentiseringsmetod (statisk nyckel vs OAuth\/device flow\/refresh tokens)\r\n   - K\u00e4nda\/ok\u00e4nda hastighetsbegr\u00e4nsningar och straffbeteende\r\n   - Aktualitetskrav och tolerans f\u00f6r inaktuell data\r\n   - Operativa behov (larm, dashboards, SLA:er, multi-region, etc.)\r\n3. **Steggenerering:** Skapa en anpassad sekvens av steg (4\u201314). Exempel p\u00e5 hur du skalar (skriv om vid behov):\r\n   - En endpoint + enkel token \u2192 f\u00e4rre steg, fokus p\u00e5 grundpollning + backoff + lagring.\r\n   - Flera endpoints + blandade begr\u00e4nsningar \u2192 l\u00e4gg till schemal\u00e4ggning, concurrency-kontroll och policyer per endpoint.\r\n   - F\u00f6retag\/kritiska arbetslaster \u2192 l\u00e4gg till observability, drifts\u00e4ttningar, HA, sp\u00e5rbarhet, runbooks.\r\n4. **Loop f\u00f6r stegutveckling:** F\u00f6r varje steg:\r\n   - St\u00e4ll bara de fr\u00e5gor som beh\u00f6vs f\u00f6r just det steget (0\u20135).\r\n   - Producera handlingsbara artefakter (pseudokod, konfigmallar, datamodeller, rekommenderade bibliotek\/m\u00f6nster).\r\n   - Beskriv hur systemet anpassar sig baserat p\u00e5 signaler (statuskoder, headers, latens, felgrad).\r\n5. **Hantering av edge cases:** Om anv\u00e4ndaren inte kan ange hastighetsbegr\u00e4nsningar\/autentiseringsdetaljer, f\u00f6resl\u00e5 s\u00e4kra standarder (konservativ taktning, gradvis ramp-up, header-uppt\u00e4ckt, circuit breakers) och m\u00e4rk antaganden tydligt.\r\n\r\n## INDATA\r\n- **Prim\u00e4rt anv\u00e4ndarsegment:** [MALGRUPP]\r\n- **API-\/tj\u00e4nst\u00f6versikt:** [KONTEXT]\r\n- **Endpoints att \u00f6vervaka:** [ANDPUNKTER]\r\n- **Autentiseringsuppl\u00e4gg:** [AUTENTISERINGSMETOD]\r\n- **Begr\u00e4nsningar f\u00f6r hantering av credentials (maskeringsregler, vaults, etc.):** [SAKERHETSBEGRANSNINGAR]\r\n- **Aktualitetsm\u00e5l (per endpoint vid behov):** [PRIMART_MAL]\r\n- **K\u00e4nda hastighetsbegr\u00e4nsningar\/kvoter:** [HASTIGHETSBEGRANSNINGAR]\r\n- **F\u00f6redragen plattform\/runtime:** [PLATTFORM]\r\n- **F\u00f6redraget outputformat (diagram, code-first, config-first, etc.):** [DATAFORMAT]\r\n- **Tidsbegr\u00e4nsningar\/deadline:** [TIDSRAM]\r\n\r\n## OUTPUTSPECIFIKATION\r\nTa fram en skr\u00e4ddarsydd fler-stegs byggplan och artefakter. Anv\u00e4nd f\u00f6ljande struktur:\r\n\r\n### 1) F\u00f6ranalys \u2013 sammanfattning\r\n- {Understanding}\r\n- {Success Criteria}\r\n- {Unknowns \/ Assumptions}\r\n\r\n### 2) Stegkarta (dynamisk)\r\nF\u00f6r varje steg ange:\r\n- {Stage Name}\r\n- {Stage Objective}\r\n- {Doc\/Research Notes}\r\n- {Questions For User} (0\u20135)\r\n- {Work Performed}\r\n- {Artifacts Produced}\r\n- {Next Stage Handoff}\r\n\r\n### 3) K\u00e4rn-blueprint f\u00f6r systemet (allteftersom den blir tillg\u00e4nglig)\r\nInkludera, n\u00e4r till\u00e4mpligt:\r\n- {Polling\/Scheduling Model} (intervallstrategi, adaptiv taktning, policyer per endpoint)\r\n- {Concurrency & Queueing Strategy}\r\n- {Auth Management Pattern} (refresh, rotation, lagring)\r\n- {Rate-Limit Intelligence} (backoff, jitter, header-baserat l\u00e4rande)\r\n- {Resilience Toolkit} (retries, circuit breakers, timeouts, fallbacks)\r\n- {Data Handling} (validering, dedupe, tidsst\u00e4mplar, lagringsalternativ)\r\n- {Observability} (loggar\/m\u00e4tv\u00e4rden\/traces\/larm och vad som ska bevakas)\r\n\r\n### 4) Slutliga valideringsnoteringar\r\n- {Open Risks}\r\n- {Operational Runbook Pointers}\r\n- {Next Steps}\r\n\r\n## KVALITETSKONTROLLER\r\nI slutet av varje svar, verifiera:\r\n- [ ] Antal steg och djup matchar anv\u00e4ndarens komplexitet (inte en one-size-fits-all-plan).\r\n- [ ] Ingen k\u00e4nslig data efterfr\u00e5gas; maskeringsv\u00e4gledning finns d\u00e4r det \u00e4r relevant.\r\n- [ ] Respekt f\u00f6r hastighetsbegr\u00e4nsningar \u00e4r explicit (headers, kvoter, backoff+jitter, ramp-up).\r\n- [ ] Felmoder hanteras (timeouts, 429\/5xx, partiella driftstopp, schema drift).\r\n- [ ] Artefakter \u00e4r implementerbara (tydliga steg, configs\/pseudokod, antaganden m\u00e4rkta).\r\n\r\n--- \r\n\r\n### STEG 1 \u2014 API-landskap + \u00e5tkomstsetup (b\u00f6rja h\u00e4r)\r\nTillhandah\u00e5ll f\u00f6ljande (anv\u00e4nd maskering f\u00f6r allt som \u00e4r hemligt):\r\n1) [ANDPUNKTER] (fullst\u00e4ndiga URL:er eller m\u00f6nster; notera vilka som \u00e4r h\u00f6gst prioriterade)  \r\n2) [AUTENTISERINGSMETOD] (t.ex. API key header, OAuth2 w\/ refresh, signed requests, etc.)  \r\n3) Eventuella begr\u00e4nsningar fr\u00e5n [SAKERHETSBEGRANSNINGAR] (vault-krav, rotationskadens, f\u00f6rbjudna lagringsplatser)  \r\n4) [PRIMART_MAL] aktualitetsm\u00e5l (t.ex. \u201cvar 30s\u201d eller \u201cinom 2 minuter,\u201d per endpoint om olika)  \r\n5) [HASTIGHETSBEGRANSNINGAR] om k\u00e4nda (kvot, burst, straffbeteende; inkludera relevanta response headers du har sett)\r\n\r\nEfter att du har svarat kommer jag att \u00e5terge min f\u00f6rst\u00e5else, v\u00e4lja r\u00e4tt antal steg (4\u201314) och g\u00e5 vidare till n\u00e4sta steg.";
    const variables = ["[MALGRUPP]","[KONTEXT]","[ANDPUNKTER]","[AUTENTISERINGSMETOD]","[SAKERHETSBEGRANSNINGAR]","[PRIMART_MAL]","[HASTIGHETSBEGRANSNINGAR]","[PLATTFORM]","[DATAFORMAT]","[TIDSRAM]"];
    // 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 = 'Återställd!';
            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">Proffstips för bättre resultat med AI-prompten</h2>



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

<li><strong>Beskriv ”aktualitet” i verksamhetstermer.</strong> Säg inte ”nära realtid” och lämna det där. Ge tydliga mål per endpoint, som ”orders får vara &lt;30 s gamla, inventory kan vara 5–10 minuter gammal och billing status kan uppdateras timvis.” Om du vill kan du följa upp med: ”Skapa separata kadensnivåer för varje aktualitetsintervall.”</li>


<li><strong>Ta med er felhistorik, även om den är stökig.</strong> Ett fåtal verkliga felmönster gör den stegvisa planen konkret. Klistra in ett avidentifierat exempel som ”429:or vid lunchtid, 502:or i skurar, ibland 200 med saknade fält” och fråga sedan: ”Föreslå en degraderingsstrategi för varje felklass och visa hur schemaläggaren byter tillstånd.”</li>

<li><strong>Tvinga fram explicita antaganden när dokumentationen är otydlig.</strong> Om leverantörens dokumentation är tunn eller motsägelsefull, säg det direkt och be om en ”lista med antaganden” som du kan validera senare. En användbar följdfråga: ”Var bör systemet vara konservativt som standard om den dokumenterade rate limit:en är fel?”</li>


<li><strong>Iterera på steggränserna, inte bara slutdesignen.</strong> Efter första körningen, välj ett steg som känns vagt (ofta observability eller utrullning) och fördjupa det. Testa: ”Skriv om steg 6 som en produktionsutrullningsplan med en canary, säkra avbrottsvillkor och en checklista med metrics att bevaka.”</li>


<li><strong>Be om artefakter i teamets format.</strong> Prompten kan ge pseudokod, men du kan be om konkreta leverabler som en tillståndsmaskinstabell, en YAML-liknande policy eller en ärendeuppdelning. Till exempel: ”Ge artefakter som (1) en tabell för tillståndsövergångar, (2) en konfigmall för budgetar per endpoint och (3) en Jira-färdig tasklista.”</li>

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

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

<!-- wp:paragraph -->
<p>Om du dokumenterar beslutet eller kommunicerar det externt hjälper de här promptarna dig att paketera planen med rätt ton och struktur:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Om du också behöver motivera avvägningar för ledning eller kund (till exempel varför du backar vid leverantörsdegradering) är redaktionellt format en oväntat bra match. Du kan ta din pollningspolicy och göra den till ett tydligt resonemang med <a href="https://nodenordic.se/prompts/skriv-en-nyanserad-ledare-med-denna-ai-prompt">Skriv en nyanserad ledartext med den här AI-prompten</a>, särskilt när du vill förklara ”stabilitet framför råstyrd aktualitet” på klarspråk.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>När en incident inträffar och du behöver en lugn, publik förklaring hjälper ett strukturerat brev dig att undvika att dela för mycket och samtidigt ta ansvar. Para ihop din adaptiva backoff och ditt avbrottsbeteende med <a href="https://nodenordic.se/prompts/skriv-ett-offentligt-oppet-brev">Skriv ett offentligt öppet brev med den här AI-prompten</a> för att kommunicera vad som ändrats, vad användare kan förvänta sig och vad du gör härnäst.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>För team som måste formalisera operativt ansvar (vem äger vad och vad händer om personer slutar) kan juridiskt präglat skrivande synliggöra glapp i processägarskap. Det är ingen ersättning för compliance, men <a href="https://nodenordic.se/prompts/skapa-ett-domstolsgiltigt-testamente-med-ai-prompt">Utkasta ett domstolsklart testamente med den här AI-prompten</a> kan återanvändas som en tankemodell för ”succession planning” i system: åtkomst, ansvar och överlämningar när något ändras plötsligt.</p>
<!-- /wp:paragraph -->

<br>

<!-- wp:paragraph -->
<p>Snabböversikt:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li><a href="https://nodenordic.se/prompts/skriv-en-nyanserad-ledare-med-denna-ai-prompt">Skriv en nyanserad ledartext med den här AI-prompten</a>: Förklara avvägningar i pollning för intressenter.</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="https://nodenordic.se/prompts/skriv-ett-offentligt-oppet-brev">Skriv ett offentligt öppet brev med den här AI-prompten</a>: Incidentuppdateringar utan kaos.</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="https://nodenordic.se/prompts/skapa-ett-domstolsgiltigt-testamente-med-ai-prompt">Utkasta ett domstolsklart testamente med den här AI-prompten</a>: Förtydliga ägarskap, åtkomst och överlämningar.</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="https://nodenordic.se/prompts/skriv-en-litterar-biografi-med-den-har-ai-prompten">Skriv en litterär biografi med den här AI-prompten</a>: Gör systemhistorik till en berättelse.</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="https://nodenordic.se/prompts/skriv-en-dagboksanteckning-i-hemingway-stil">Skriv en journalanteckning i Hemingway-stil med den här AI-prompten</a>: Korta incidentjournaler.</li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->
</div>

<div class="faq-section">
<!-- wp:heading {"level":2} -->
<h2 class="wp-block-heading">Vanliga frågor</h2>
<!-- /wp:heading -->

<div class="faq-item">
<span class="question">Vilka roller har mest nytta av den här AI-prompten för API polling plans?</span>
<!-- wp:paragraph -->
<p class="answer"><strong>Backendutvecklare</strong> använder den för att göra om ”polla varje minut” till en adaptiv schemaläggare med konkreta regler för retries, jitter och tillstånd. <strong>Site reliability engineers</strong> använder den för att minska retry-stormar, definiera säkra degraderingslägen och lägga till observability som fångar problem innan användarna gör det. <strong>Plattformsutvecklare</strong> använder den när flera interna tjänster delar externa API-budgetar och behöver konsekventa mönster mellan team. <strong>Tekniska produktchefer</strong> får värde genom att översätta aktualitetskrav till tydliga kadensnivåer och utrullningssteg som de kan samordna intressenter kring.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Vilka branscher får mest värde av den här AI-prompten för API polling plans?</span>
<!-- wp:paragraph -->
<p class="answer"><strong>Fintech- och tradingteam</strong> använder den för att balansera förväntningar på extremt låg latens med respektfull konsumtion av leverantörens API, särskilt när marknadstider skapar förutsägbara lasttoppar. <strong>E-handelsbolag</strong> använder den för inventory-, fulfillment- och prissättnings-endpoints där ”gammalt men säkert” är bättre än kaskadfel under trafiktoppar. <strong>SaaS-plattformar</strong> lutar sig mot den för integrationer (CRM, billing, analytics) där okända rate limits och partiella avbrott är normala, inte sällsynta. <strong>Rese- och logistikbolag</strong> gynnas när externa status-API:er degraderar, eftersom adaptiv kadens och fallback-beteende håller kundnära uppdateringar stabila.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Varför ger grundläggande AI-promptar för att designa adaptiva API-pollningsplaner svaga resultat?</span>
<!-- wp:paragraph -->
<p class="answer">En typisk prompt som &#8221;<em>Skriv ett API-pollningsystem åt mig</em>&#8221; misslyckas eftersom den: saknar en föranalys som definierar framgång och okända faktorer, inte ger någon stegvis byggplan med artefakter du kan implementera, ignorerar tjänstemedvetet beteende som 429-hantering och degradering vid avbrott, producerar generiska råd som ”retry med exponentiell backoff” i stället för specifika tillståndsövergångar och triggers, och missar autentiseringshygien (inklusive vägledning att inte be om eller klistra in hemligheter). Du får något som ser bra ut på papper men faller ihop vid verkliga felmönster. Är det något som syns direkt, så är det när leverantörens API börjar bete sig dåligt.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Kan jag anpassa den här API polling plans-prompten till min specifika situation?</span>
<!-- wp:paragraph -->
<p class="answer">Ja, genom att ge assistenten de detaljer den förväntar sig under föranalys och komplexitetstriage: vilka endpoints som ingår, dina aktualitetsmål, kända eller misstänkta rate limits och vilka fel du redan ser (429, 5xx, timeouts, inkonsekventa payloads). Du kan också ange begränsningar som ”endast leverantörsagnostiskt”, ”måste köras i Kubernetes” eller ”single-process cron tills vidare”, och då ska stegen anpassas. Klistra aldrig in fullständiga tokens eller privata nycklar; beskriv auth-typen (OAuth refresh token, API key, signerad request) och be om säkra hanteringsmönster. En bra följdfråga är: ”Givet dessa endpoints och SLO:er, föreslå kadensnivåer per endpoint och tillståndsmaskinens övergångar som flyttar mellan dem.”</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Vilka är de vanligaste misstagen när man använder den här API polling plans-prompten?</span>
<!-- wp:paragraph -->
<p class="answer">Det största misstaget är att lämna miljöbeskrivningen för vag — i stället för ”vi anropar ett partner-API”, säg ”tre endpoints (orders, refunds, inventory), 99p-latensmål 800 ms, måste hålla oss under 120 requests/minute och aktualitetsmål på 30 s/2 min/10 min.” Andra vanliga fel: att skriva ”rate limit okänd” men inte dela observerade symptom (dåligt: ”ibland fallerar det”, bra: ”429:or dyker upp efter 20 parallella workers”), att hoppa över avbrottsförväntningar (dåligt: ”hantera downtime”, bra: ”vid 5xx-skurar, gå in i degraderat läge i 15 minuter och notifiera”), och att ignorera inkonsekventa payloads (dåligt: ”JSON-svar”, bra: ”fält saknas ibland; måste behandlas som partiellt och retry:a säkert utan att duplicera writes”). Ju mer specifika dina constraints är, desto mer implementerbara blir artefakterna.</p>
<!-- /wp:paragraph -->
</div>

<div class="faq-item">
<span class="question">Vem ska INTE använda den här API polling plans-prompten?</span>
<!-- wp:paragraph -->
<p class="answer">Den här prompten passar dåligt för engångsskript där du inte kommer att iterera, snabba demos som tål dåligt beteende, eller team som redan har ett händelsedrivet alternativ (webhooks/streaming) som är fullt tillgängligt och pålitligt. Den är också en dålig match om du inte kan svara på grundfrågor om krav på aktualitet eller feltolerans, eftersom designen beror på de avvägningarna. Om det är din situation: börja med att validera kraven med en mindre checklista och generera först därefter en adaptiv plan.</p>
<!-- /wp:paragraph -->
</div>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Vilka roller har mest nytta av den här AI-prompten för API polling plans?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Backendutvecklare använder den för att göra om ”polla varje minut” till en adaptiv schemaläggare med konkreta regler för retries, jitter och tillstånd. Site reliability engineers använder den för att minska retry-stormar, definiera säkra degraderingslägen och lägga till observability som fångar problem innan användarna gör det. Plattformsutvecklare använder den när flera interna tjänster delar externa API-budgetar och behöver konsekventa mönster mellan team. Tekniska produktchefer får värde genom att översätta aktualitetskrav till tydliga kadensnivåer och utrullningssteg som de kan samordna intressenter kring."
      }
    },
    {
      "@type": "Question",
      "name": "Vilka branscher får mest värde av den här AI-prompten för API polling plans?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Fintech- och tradingteam använder den för att balansera förväntningar på extremt låg latens med respektfull konsumtion av leverantörens API, särskilt när marknadstider skapar förutsägbara lasttoppar. E-handelsbolag använder den för inventory-, fulfillment- och prissättnings-endpoints där ”gammalt men säkert” är bättre än kaskadfel under trafiktoppar. SaaS-plattformar lutar sig mot den för integrationer (CRM, billing, analytics) där okända rate limits och partiella avbrott är normala, inte sällsynta. Rese- och logistikbolag gynnas när externa status-API:er degraderar, eftersom adaptiv kadens och fallback-beteende håller kundnära uppdateringar stabila."
      }
    },
    {
      "@type": "Question",
      "name": "Varför ger grundläggande AI-promptar för att designa adaptiva API-pollningsplaner svaga resultat?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "En typisk prompt som \"Skriv ett API-pollningsystem åt mig\" misslyckas eftersom den: saknar en föranalys som definierar framgång och okända faktorer, inte ger någon stegvis byggplan med artefakter du kan implementera, ignorerar tjänstemedvetet beteende som 429-hantering och degradering vid avbrott, producerar generiska råd som ”retry med exponentiell backoff” i stället för specifika tillståndsövergångar och triggers, och missar autentiseringshygien (inklusive vägledning att inte be om eller klistra in hemligheter). Du får något som ser bra ut på papper men faller ihop vid verkliga felmönster. Är det något som syns direkt, så är det när leverantörens API börjar bete sig dåligt."
      }
    },
    {
      "@type": "Question",
      "name": "Kan jag anpassa den här API polling plans-prompten till min specifika situation?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Ja, genom att ge assistenten de detaljer den förväntar sig under föranalys och komplexitetstriage: vilka endpoints som ingår, dina aktualitetsmål, kända eller misstänkta rate limits och vilka fel du redan ser (429, 5xx, timeouts, inkonsekventa payloads). Du kan också ange begränsningar som ”endast leverantörsagnostiskt”, ”måste köras i Kubernetes” eller ”single-process cron tills vidare”, och då ska stegen anpassas. Klistra aldrig in fullständiga tokens eller privata nycklar; beskriv auth-typen (OAuth refresh token, API key, signerad request) och be om säkra hanteringsmönster. En bra följdfråga är: ”Givet dessa endpoints och SLO:er, föreslå kadensnivåer per endpoint och tillståndsmaskinens övergångar som flyttar mellan dem.”"
      }
    },
    {
      "@type": "Question",
      "name": "Vilka är de vanligaste misstagen när man använder den här API polling plans-prompten?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Det största misstaget är att lämna miljöbeskrivningen för vag — i stället för ”vi anropar ett partner-API”, säg ”tre endpoints (orders, refunds, inventory), 99p-latensmål 800 ms, måste hålla oss under 120 requests/minute och aktualitetsmål på 30 s/2 min/10 min.” Andra vanliga fel: att skriva ”rate limit okänd” men inte dela observerade symptom (dåligt: ”ibland fallerar det”, bra: ”429:or dyker upp efter 20 parallella workers”), att hoppa över avbrottsförväntningar (dåligt: ”hantera downtime”, bra: ”vid 5xx-skurar, gå in i degraderat läge i 15 minuter och notifiera”), och att ignorera inkonsekventa payloads (dåligt: ”JSON-svar”, bra: ”fält saknas ibland; måste behandlas som partiellt och retry:a säkert utan att duplicera writes”). Ju mer specifika dina constraints är, desto mer implementerbara blir artefakterna."
      }
    },
    {
      "@type": "Question",
      "name": "Vem ska INTE använda den här API polling plans-prompten?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Den här prompten passar dåligt för engångsskript där du inte kommer att iterera, snabba demos som tål dåligt beteende, eller team som redan har ett händelsedrivet alternativ (webhooks/streaming) som är fullt tillgängligt och pålitligt. Den är också en dålig match om du inte kan svara på grundfrågor om krav på aktualitet eller feltolerans, eftersom designen beror på de avvägningarna. Om det är din situation: börja med att validera kraven med en mindre checklista och generera först därefter en adaptiv plan."
      }
    }
  ]
}
</script>
</div>

<div class="closing-section">
<!-- wp:paragraph -->
<p>Pollning behöver inte vara bullrig eller skör. Använd den här prompten för att designa adaptiva scheman, felmedveten backoff och en stegvis byggplan som du kan leverera med trygghet.</p>
<!-- /wp:paragraph -->
</div><p>&lt;p&gt;The post <a rel="nofollow" href="https://nodenordic.se/prompts/designa-adaptiva-api-pollningsplaner-med-ai-prompt/">Designa adaptiva API-pollningsplaner med AI-prompt</a> first appeared on <a rel="nofollow" href="https://nodenordic.se">Node Nordic - AI Konsult för företag</a>.&lt;/p&gt;</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Skapa en playbook för rollback i produktion</title>
		<link>https://nodenordic.se/prompts/skapa-en-playbook-for-rollback-i-produktion/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=skapa-en-playbook-for-rollback-i-produktion</link>
		
		<dc:creator><![CDATA[Rickard Andersson]]></dc:creator>
		<pubDate>Fri, 23 Jan 2026 02:38:35 +0000</pubDate>
				<category><![CDATA[prompts]]></category>
		<guid isPermaLink="false">https://nodenordic.se/?p=5001430</guid>

					<description><![CDATA[<p>Release fallerar i produktion? AI-prompt för snabb rollback-playbook med beslutspunkter, kommunikationsmallar och insamling av artefakter. Fler prompts för marknad, sälj och drift.</p>
<p>&lt;p&gt;The post <a rel="nofollow" href="https://nodenordic.se/prompts/skapa-en-playbook-for-rollback-i-produktion/">Skapa en playbook för rollback i produktion</a> first appeared on <a rel="nofollow" href="https://nodenordic.se">Node Nordic - AI Konsult för företag</a>.&lt;/p&gt;</p>
]]></description>
										<content:encoded><![CDATA[<!-- FOCUS_KEYWORD: production rollback playbook -->

<div class="hook-introduction">

<p>En produktionsrelease havererar, kunderna märker det direkt och on-call-kanalen fylls snabbt. I det läget är ”snabb rollback” ingen plan. Utan tydliga beslutspunkter, verifieringsgrindar och mallar för kommunikation tappar team tid, förtroende och bevisunderlag.</p>



<p>Den här <strong>production rollback playbook</strong> är byggd för <strong>release managers</strong> som hanterar en utrullning med hög allvarlighetsgrad och behöver en säker återställning, <strong>SRE/on-call-ingenjörer</strong> som måste återställa tjänsten under press samtidigt som de samlar artefakter, och <strong>engineering leaders</strong> som behöver skarp kund- och intressentkommunikation utan att gissa. Resultatet är en komplett incidentredo rollback-playbook: prioriterade steg med tidsestimat, plattformsanpassade kommandon där det är möjligt, checklista för godkänd/underkänd, parallell forensik, fallback-vägar, kommunikationsmallar och en avgränsande ”vad detta INTE är”-sektion.</p>

</div>

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

<h2 class="wp-block-heading">Vad gör den här AI-prompten och när ska du använda den?</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">Vad den här prompten gör</th>
      <th scope="col">När du ska använda den här prompten</th>
      <th scope="col">Det du får</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <ul class="automation-list">
          <li>Den genererar en tidsordnad rollback-procedur som prioriterar genomförandetid och minskar nedtid.</li>
          <li>Den tar fram plattformsanpassade rollback-steg (inklusive kommandon där det är möjligt) i stället för generiska ”rulla tillbaka din release”-råd.</li>
          <li>Den bygger verifieringsgrindar med godkänd/underkänd-kriterier så att responders exakt vet när det är säkert att gå vidare.</li>
          <li>Den separerar parallell forensik från återställningsåtgärder så att utredningsarbete aldrig blockerar rollbacken.</li>
          <li>Den lägger till fallback-vägar, checklistor för artefaktinsamling och en ”Vad detta INTE är”-sektion för att förhindra scope creep under en incident.</li>
       </ul>
      </td>
      <td>
        <ul class="results-list">
          <li>En produktionsutrullning orsakar förhöjda 5xx-nivåer, latensspikar eller partiella avbrott och du behöver återställa tjänsten snabbt.</li>
          <li>Du ser otydliga symptom och kan inte avgöra om orsaken är kod, konfiguration, datamigreringar eller infrastrukturändringar.</li>
          <li>Teamet diskuterar rollback kontra hotfix och du behöver ett beslutsramverk med tydliga kriterier.</li>
          <li>Intressenter efterfrågar uppdateringar och du behöver konsekvent, tillförlitlig kommunikation medan ingenjörerna exekverar.</li>
          <li>Du skalar releasear (fler utrullningar, flera tjänster) och vill ha en repeterbar rollback-playbook som går att öva och borra in.</li>
        </ul>
      </td>
       <td>
         <ul class="deliverables-list">
           <li>En steg-för-steg-rollplan med tidsestimat och tydliga verifieringskontroller.</li>
           <li>Två rollback-spår (snabbaste vägen plus ”näst bästa” fallback) med villkor för när du ska byta.</li>
           <li>Kommunikationsmallar för interna uppdateringar, kundernas statussidor och sammanfattningar efter incident.</li>
           <li>En checklista för parallell felsökning och bevisinsamling (loggar, metrics-snapshots, deploy-metadata, tidslinjer).</li>
           <li>En hardening- och automationsbacklog med prioriterade uppföljningar (skyddsräcken, canaries, roll-forward-alternativ, runbook-luckor).</li>
         </ul>
       </td>
    </tr>
  </tbody>
</table>

</div>

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

<h2 class="wp-block-heading">Hela AI-prompten: incidentredo production rollback playbook</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">
                                    Steg 1: Anpassa prompten med din information
                            </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>Återställ</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>Anpassa och kopiera hela prompten</span>
                </button>
            </div>
        </div>

        <!-- Customize the Prompt Section -->
                    <div class="prompt-customize-section">
                <span class="customize-title">Anpassa prompten</span>
                <p class="customize-subtitle">Fyll i fälten nedan för att anpassa prompten efter dina behov.</p>
                <table class="customize-table">
                    <thead>
                        <tr>
                            <th>Variabel</th>
                            <th>Vad du ska ange</th>
                            <th>Anpassa prompten</th>
                        </tr>
                    </thead>
                    <tbody>
                                                    <tr>
                                <td class="var-name"><code>[VERSALER_MED_UNDERSCORES]</code></td>
                                <td class="var-desc">
                                    Ge ett exempel på en variabel skriven med versaler och understreck, som används i prompts för att markera indata som användaren ska fylla i.                                    <div class="var-example">Till exempel: "[APPLIKATIONSTYP]"</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[VERSALER_MED_UNDERSCORES]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[APPLIKATIONSTYP]</code></td>
                                <td class="var-desc">
                                    Ange vilken typ av applikation som har problemet, inklusive dess huvudsakliga funktion och arkitektur om det är relevant.                                    <div class="var-example">Till exempel: "En e-handelswebbapplikation baserad på mikrotjänster som körs på Kubernetes."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[APPLIKATIONSTYP]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[DRIFTSATTNINGSPLATTFORM]</code></td>
                                <td class="var-desc">
                                    Ange plattformen eller miljön där applikationen är driftsatt, inklusive hostingdetaljer och relevanta konfigurationer.                                    <div class="var-example">Till exempel: "AWS Elastic Kubernetes Service (EKS) med Helm charts för driftsättning och autoskalning aktiverad."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[DRIFTSATTNINGSPLATTFORM]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[GIT_REPOSITORYUPPLAGG]</code></td>
                                <td class="var-desc">
                                    Beskriv Git-repositoryts struktur, inklusive branchstrategi, backuprutiner och eventuella specifika konfigurationer.                                    <div class="var-example">Till exempel: "Monorepo med main- och develop-brancher, feature-brancher för varje uppgift samt dagliga backuper till AWS S3."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[GIT_REPOSITORYUPPLAGG]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[ANVANDARKOMMUNIKATIONSKANALER]</code></td>
                                <td class="var-desc">
                                    Lista de kommunikationskanaler som används för att informera användare eller intressenter om incidenter, uppdateringar och åtgärder.                                    <div class="var-example">Till exempel: "E-postaviseringar via Mailchimp, Slack-uppdateringar för interna team och Twitter för publika meddelanden."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[ANVANDARKOMMUNIKATIONSKANALER]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[TEAMSTRUKTUR]</code></td>
                                <td class="var-desc">
                                    Beskriv teamets sammansättning, inklusive roller, beslutsfattare och eskaleringsvägar vid incidenthantering.                                    <div class="var-example">Till exempel: "Beredskapsingenjörer, en release manager och en produktägare, med eskalering till CTO vid driftstörningar med hög allvarlighetsgrad."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[TEAMSTRUKTUR]"
                                            placeholder="Ange ditt värde här..."
                                            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">Anpassa prompten nu</span>

                </button>
            </div>
        
        <!-- Full Prompt Code Header -->
                    <div class="prompt-code-header">
                <span class="prompt-code-title">
                    Steg 2: Kopiera prompten
                </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>Återställ</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>Kopiera hela prompten</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">MÅL</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">BEGRÄNSNINGAR</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">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">OUTPUTSPECIFIKATION</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) Omedelbara rollback-åtgärder (snabbaste vägen först)</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">2) Plattformspecifika procedurer (kommandon + exakta klick när det behövs)</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) Git- &amp; artefaktåterställningssteg</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">4) Kommunikationsplan för användare &amp; intressenter</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">5) Parallell utredning (icke-blockerande forensik)</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">6) Framtida förebyggande setup (automatisering + skyddsräcken)</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">7) Checklista för rollback-verifiering (tjänstestabilitet)</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">8) Vad detta INTE är (scope-gränser)</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">KVALITETSKONTROLLER</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;">
                ## MÅL
Skapa en incidentredo rollback-playbook för en misslyckad produktionsrelease som snabbt återställer tjänsten, skyddar kundernas förtroende och bevarar bevis för senare rotorsaksanalys. Leveransen måste inkludera plattformsspecifika rollback-steg (med kommandon där det är möjligt), en kommunikationsplan, parallella felsökningsrutiner och långsiktig härdning/automatisering.

## PERSONA
Agera som en härdad release-responder som har hanterat avbrott med hög allvarlighetsgrad i moderna CI/CD-miljöer. Du tänker “stoppa blödningen först”, kör tydliga beslutspunkter och skriver procedurer som går att genomföra under press av ett on-call-team.

## BEGRÄNSNINGAR
- Prioritera åtgärder utifrån **tid att genomföra** och **minskad nedtid**.
- Ge **plattformskänsliga** procedurer (inte generisk teori).
- Inkludera **tydliga checklistor** med godkänd/underkänd-kriterier för varje större steg.
- Utredningsaktiviteter måste köras **parallellt** och får **inte blockera rollback**.
- Inkludera **reservvägar** om den föredragna rollback-metoden misslyckas.
- Bevara diagnostiska artefakter (loggar, metrics-snapshots, deploy-metadata) samtidigt som du rör dig snabbt.
- Om någon input saknas eller är tvetydig, gör den säkraste antagandet, ange det och erbjud 1–2 alternativa grenar.
- Lägg till en sektion “Vad detta INTE är” för att förhindra scope creep.
- Följ regler för variabelformat: användarens inputs använder **[VERSALER_MED_UNDERSCORES]**; modellifyllda platshållare använder **{Title Case}**.

## PROCESS
1. **Föranalys (krävs):** Återge din förståelse av incidentkontexten baserat på de givna inputs. Lista de 3 största omedelbara riskerna och det primära framgångsmåttet (t.ex. felfrekvens, tillgänglighet, latens).
2. **Snabb triage:** Identifiera den snabbaste rollback-vägen och det “näst bästa” alternativet om den misslyckas.
3. **Genomför rollback-planen:** Ge steg-för-steg-åtgärder med tidsestimat och verifieringsgrindar.
4. **Kör parallell forensik:** Beskriv datainsamling och hypotesdrivna kontroller som inte stör rollback.
5. **Kommunicera kontinuerligt:** Ge meddelandemallar och timing för användare/intressenter.
6. **Stabilisera &amp; förhindra återfall:** Rekommendera automatisering, skyddsräcken och förbättringar i övervakning kopplade till detta fel-läge.

## INPUTS
- **Applikationstyp:** [APPLIKATIONSTYP]
- **Driftsättningsplattform:** [DRIFTSATTNINGSPLATTFORM]
- **Git-repo-upplägg (branchning + backuper):** [GIT_REPOSITORYUPPLAGG]
- **Användarkommunikationskanaler:** [ANVANDARKOMMUNIKATIONSKANALER]
- **Teamstruktur / beslutsfattare:** [TEAMSTRUKTUR]

## OUTPUTSPECIFIKATION
Producera ett enda “nödprocedur”-dokument med sektionerna nedan (använd dessa exakta rubriker). Använd korta punkter, numrerade steg och inkludera kommandon där det är tillämpligt.

### 1) Omedelbara rollback-åtgärder (snabbaste vägen först)
För varje åtgärd, inkludera:
- {Action Name}
- {When To Choose This}
- {ETA}
- {Steps}
- {Success Criteria}
- {Failure Signals}
- {Fallback Option}

### 2) Plattformspecifika procedurer (kommandon + exakta klick när det behövs)
Ge separata underavsnitt anpassade till [DRIFTSATTNINGSPLATTFORM]. Om [DRIFTSATTNINGSPLATTFORM] är oklar, inkludera procedurer för de två närmaste större alternativen du drar slutsats om (t.ex. Kubernetes + en managed PaaS). Inkludera:
- {Rollback Method 1}
- {Rollback Method 2}
- {Verification Commands}
- {Traffic Management Steps} (t.ex. lastbalanserare, ingress, vikter)
- {Config/Secrets Notes} (vad som måste/inte får ändras under rollback)

### 3) Git- &amp; artefaktåterställningssteg
Baserat på [GIT_REPOSITORYUPPLAGG], inkludera:
- {Revert Strategy} (t.ex. revert commit vs. driftsätt om tidigare artefakt)
- {Branch Safety Steps}
- {Tag/Release Identification}
- {Artifact Rehydration Steps} (om byggen behövs)
- {Audit Trail Preservation} (vad som ska dokumenteras och var)

### 4) Kommunikationsplan för användare &amp; intressenter
Skapa en tidsatt kommunikationskadens med [ANVANDARKOMMUNIKATIONSKANALER] och [TEAMSTRUKTUR]:
- {Initial Incident Statement} (första uppdateringen)
- {Ongoing Update Template} (var X minut)
- {Rollback In Progress Notice}
- {Service Restored Notice}
- {Customer Support Brief} (intern vägledning)
- {Executive Snapshot} (påverkan, ETA, beslutspunkter)

### 5) Parallell utredning (icke-blockerande forensik)
Inkludera:
- {Evidence To Capture Immediately} (loggar, traces, dashboards, deploy-diffar)
- {Safe Queries/Checks} som inte muterar produktion
- {Likely Failure Themes} mappade till [APPLIKATIONSTYP] och [DRIFTSATTNINGSPLATTFORM]
- {Timeline Notes} (vad som ska skrivas ned under händelsen)
- {Do-Not-Do List} (åtgärder som riskerar att förlänga nedtiden)

### 6) Framtida förebyggande setup (automatisering + skyddsräcken)
Ge genomförbara rekommendationer:
- {Automated Rollback Triggers} (vilka signaler, trösklar)
- {Deployment Safety Gates} (canaries, progressive delivery, feature flags)
- {Monitoring/Alerting Additions}
- {Runbook Automation} (script, rollback med ett klick)
- {Access &amp; Permission Hardening} (vem kan rolla tillbaka, hur godkännanden fungerar)

### 7) Checklista för rollback-verifiering (tjänstestabilitet)
En sista checklista med:
- {User-Facing Checks}
- {System Health Checks}
- {Data Integrity Checks}
- {Performance Baselines}
- {Incident Close Criteria}

### 8) Vad detta INTE är (scope-gränser)
Korta punkter som klargör vad du inte gör (t.ex. komplett RCA-dokument, långsiktig arkitekturomdesign, vendor-upphandling), samtidigt som du pekar på var dessa hör hemma efter incidenten.

## KVALITETSKONTROLLER
I slutet, inkludera ett “Validering”-block som bekräftar:
- Rollback-vägen är det snabbaste genomförbara alternativet och inkluderar minst en fallback.
- Varje större steg har mätbara framgångskriterier och ett verifieringskommando eller en observerbar signal.
- Kommunikationsmallar är redo att skickas och matchade mot [ANVANDARKOMMUNIKATIONSKANALER].
- Stegen för parallell utredning är uttryckligen icke-invasiva och fördröjer inte återställning.
- Alla platshållare följer formateringsregler: inputs som [VERSALER_MED_UNDERSCORES], outputs som {Title Case}.            </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">Kopiera hela prompten</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 span {
        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 !important;
    }


    .prompt-cta-copy span {
        background: #3a3a3a;
        color: #fff !important;
    }


    .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 !important;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .copy-customized-btn span {
        color: #fff !important
    }

    .copy-customized-text span {
        color: #fff !important
    }

    .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;
        color: #fff !important;

    }

    .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 = 'Kopierad!';
            });

            setTimeout(() => {
                copyButtons.forEach(btn => {
                    btn.classList.remove('copied');
                    const textSpan = btn.querySelector('span');
                    if (textSpan) textSpan.textContent = 'Kopiera hela prompten';
                });
            }, 2000);
        }).catch(err => {
            console.error('Failed to copy:', err);
        });
    }

    // Store original prompt for customization
    const originalPrompt = "## M\u00c5L\r\nSkapa en incidentredo rollback-playbook f\u00f6r en misslyckad produktionsrelease som snabbt \u00e5terst\u00e4ller tj\u00e4nsten, skyddar kundernas f\u00f6rtroende och bevarar bevis f\u00f6r senare rotorsaksanalys. Leveransen m\u00e5ste inkludera plattformsspecifika rollback-steg (med kommandon d\u00e4r det \u00e4r m\u00f6jligt), en kommunikationsplan, parallella fels\u00f6kningsrutiner och l\u00e5ngsiktig h\u00e4rdning\/automatisering.\r\n\r\n## PERSONA\r\nAgera som en h\u00e4rdad release-responder som har hanterat avbrott med h\u00f6g allvarlighetsgrad i moderna CI\/CD-milj\u00f6er. Du t\u00e4nker \u201cstoppa bl\u00f6dningen f\u00f6rst\u201d, k\u00f6r tydliga beslutspunkter och skriver procedurer som g\u00e5r att genomf\u00f6ra under press av ett on-call-team.\r\n\r\n## BEGR\u00c4NSNINGAR\r\n- Prioritera \u00e5tg\u00e4rder utifr\u00e5n **tid att genomf\u00f6ra** och **minskad nedtid**.\r\n- Ge **plattformsk\u00e4nsliga** procedurer (inte generisk teori).\r\n- Inkludera **tydliga checklistor** med godk\u00e4nd\/underk\u00e4nd-kriterier f\u00f6r varje st\u00f6rre steg.\r\n- Utredningsaktiviteter m\u00e5ste k\u00f6ras **parallellt** och f\u00e5r **inte blockera rollback**.\r\n- Inkludera **reservv\u00e4gar** om den f\u00f6redragna rollback-metoden misslyckas.\r\n- Bevara diagnostiska artefakter (loggar, metrics-snapshots, deploy-metadata) samtidigt som du r\u00f6r dig snabbt.\r\n- Om n\u00e5gon input saknas eller \u00e4r tvetydig, g\u00f6r den s\u00e4kraste antagandet, ange det och erbjud 1\u20132 alternativa grenar.\r\n- L\u00e4gg till en sektion \u201cVad detta INTE \u00e4r\u201d f\u00f6r att f\u00f6rhindra scope creep.\r\n- F\u00f6lj regler f\u00f6r variabelformat: anv\u00e4ndarens inputs anv\u00e4nder **[VERSALER_MED_UNDERSCORES]**; modellifyllda platsh\u00e5llare anv\u00e4nder **{Title Case}**.\r\n\r\n## PROCESS\r\n1. **F\u00f6ranalys (kr\u00e4vs):** \u00c5terge din f\u00f6rst\u00e5else av incidentkontexten baserat p\u00e5 de givna inputs. Lista de 3 st\u00f6rsta omedelbara riskerna och det prim\u00e4ra framg\u00e5ngsm\u00e5ttet (t.ex. felfrekvens, tillg\u00e4nglighet, latens).\r\n2. **Snabb triage:** Identifiera den snabbaste rollback-v\u00e4gen och det \u201cn\u00e4st b\u00e4sta\u201d alternativet om den misslyckas.\r\n3. **Genomf\u00f6r rollback-planen:** Ge steg-f\u00f6r-steg-\u00e5tg\u00e4rder med tidsestimat och verifieringsgrindar.\r\n4. **K\u00f6r parallell forensik:** Beskriv datainsamling och hypotesdrivna kontroller som inte st\u00f6r rollback.\r\n5. **Kommunicera kontinuerligt:** Ge meddelandemallar och timing f\u00f6r anv\u00e4ndare\/intressenter.\r\n6. **Stabilisera & f\u00f6rhindra \u00e5terfall:** Rekommendera automatisering, skyddsr\u00e4cken och f\u00f6rb\u00e4ttringar i \u00f6vervakning kopplade till detta fel-l\u00e4ge.\r\n\r\n## INPUTS\r\n- **Applikationstyp:** [APPLIKATIONSTYP]\r\n- **Drifts\u00e4ttningsplattform:** [DRIFTSATTNINGSPLATTFORM]\r\n- **Git-repo-uppl\u00e4gg (branchning + backuper):** [GIT_REPOSITORYUPPLAGG]\r\n- **Anv\u00e4ndarkommunikationskanaler:** [ANVANDARKOMMUNIKATIONSKANALER]\r\n- **Teamstruktur \/ beslutsfattare:** [TEAMSTRUKTUR]\r\n\r\n## OUTPUTSPECIFIKATION\r\nProducera ett enda \u201cn\u00f6dprocedur\u201d-dokument med sektionerna nedan (anv\u00e4nd dessa exakta rubriker). Anv\u00e4nd korta punkter, numrerade steg och inkludera kommandon d\u00e4r det \u00e4r till\u00e4mpligt.\r\n\r\n### 1) Omedelbara rollback-\u00e5tg\u00e4rder (snabbaste v\u00e4gen f\u00f6rst)\r\nF\u00f6r varje \u00e5tg\u00e4rd, inkludera:\r\n- {Action Name}\r\n- {When To Choose This}\r\n- {ETA}\r\n- {Steps}\r\n- {Success Criteria}\r\n- {Failure Signals}\r\n- {Fallback Option}\r\n\r\n### 2) Plattformspecifika procedurer (kommandon + exakta klick n\u00e4r det beh\u00f6vs)\r\nGe separata underavsnitt anpassade till [DRIFTSATTNINGSPLATTFORM]. Om [DRIFTSATTNINGSPLATTFORM] \u00e4r oklar, inkludera procedurer f\u00f6r de tv\u00e5 n\u00e4rmaste st\u00f6rre alternativen du drar slutsats om (t.ex. Kubernetes + en managed PaaS). Inkludera:\r\n- {Rollback Method 1}\r\n- {Rollback Method 2}\r\n- {Verification Commands}\r\n- {Traffic Management Steps} (t.ex. lastbalanserare, ingress, vikter)\r\n- {Config\/Secrets Notes} (vad som m\u00e5ste\/inte f\u00e5r \u00e4ndras under rollback)\r\n\r\n### 3) Git- & artefakt\u00e5terst\u00e4llningssteg\r\nBaserat p\u00e5 [GIT_REPOSITORYUPPLAGG], inkludera:\r\n- {Revert Strategy} (t.ex. revert commit vs. drifts\u00e4tt om tidigare artefakt)\r\n- {Branch Safety Steps}\r\n- {Tag\/Release Identification}\r\n- {Artifact Rehydration Steps} (om byggen beh\u00f6vs)\r\n- {Audit Trail Preservation} (vad som ska dokumenteras och var)\r\n\r\n### 4) Kommunikationsplan f\u00f6r anv\u00e4ndare & intressenter\r\nSkapa en tidsatt kommunikationskadens med [ANVANDARKOMMUNIKATIONSKANALER] och [TEAMSTRUKTUR]:\r\n- {Initial Incident Statement} (f\u00f6rsta uppdateringen)\r\n- {Ongoing Update Template} (var X minut)\r\n- {Rollback In Progress Notice}\r\n- {Service Restored Notice}\r\n- {Customer Support Brief} (intern v\u00e4gledning)\r\n- {Executive Snapshot} (p\u00e5verkan, ETA, beslutspunkter)\r\n\r\n### 5) Parallell utredning (icke-blockerande forensik)\r\nInkludera:\r\n- {Evidence To Capture Immediately} (loggar, traces, dashboards, deploy-diffar)\r\n- {Safe Queries\/Checks} som inte muterar produktion\r\n- {Likely Failure Themes} mappade till [APPLIKATIONSTYP] och [DRIFTSATTNINGSPLATTFORM]\r\n- {Timeline Notes} (vad som ska skrivas ned under h\u00e4ndelsen)\r\n- {Do-Not-Do List} (\u00e5tg\u00e4rder som riskerar att f\u00f6rl\u00e4nga nedtiden)\r\n\r\n### 6) Framtida f\u00f6rebyggande setup (automatisering + skyddsr\u00e4cken)\r\nGe genomf\u00f6rbara rekommendationer:\r\n- {Automated Rollback Triggers} (vilka signaler, tr\u00f6sklar)\r\n- {Deployment Safety Gates} (canaries, progressive delivery, feature flags)\r\n- {Monitoring\/Alerting Additions}\r\n- {Runbook Automation} (script, rollback med ett klick)\r\n- {Access & Permission Hardening} (vem kan rolla tillbaka, hur godk\u00e4nnanden fungerar)\r\n\r\n### 7) Checklista f\u00f6r rollback-verifiering (tj\u00e4nstestabilitet)\r\nEn sista checklista med:\r\n- {User-Facing Checks}\r\n- {System Health Checks}\r\n- {Data Integrity Checks}\r\n- {Performance Baselines}\r\n- {Incident Close Criteria}\r\n\r\n### 8) Vad detta INTE \u00e4r (scope-gr\u00e4nser)\r\nKorta punkter som klarg\u00f6r vad du inte g\u00f6r (t.ex. komplett RCA-dokument, l\u00e5ngsiktig arkitekturomdesign, vendor-upphandling), samtidigt som du pekar p\u00e5 var dessa h\u00f6r hemma efter incidenten.\r\n\r\n## KVALITETSKONTROLLER\r\nI slutet, inkludera ett \u201cValidering\u201d-block som bekr\u00e4ftar:\r\n- Rollback-v\u00e4gen \u00e4r det snabbaste genomf\u00f6rbara alternativet och inkluderar minst en fallback.\r\n- Varje st\u00f6rre steg har m\u00e4tbara framg\u00e5ngskriterier och ett verifieringskommando eller en observerbar signal.\r\n- Kommunikationsmallar \u00e4r redo att skickas och matchade mot [ANVANDARKOMMUNIKATIONSKANALER].\r\n- Stegen f\u00f6r parallell utredning \u00e4r uttryckligen icke-invasiva och f\u00f6rdr\u00f6jer inte \u00e5terst\u00e4llning.\r\n- Alla platsh\u00e5llare f\u00f6ljer formateringsregler: inputs som [VERSALER_MED_UNDERSCORES], outputs som {Title Case}.";
    const variables = ["[VERSALER_MED_UNDERSCORES]","[APPLIKATIONSTYP]","[DRIFTSATTNINGSPLATTFORM]","[GIT_REPOSITORYUPPLAGG]","[ANVANDARKOMMUNIKATIONSKANALER]","[TEAMSTRUKTUR]"];
    // 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 = 'Återställd!';
            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">Proffstips för bättre resultat från AI-prompten</h2>



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

<li><strong>Ge den ditt riktiga ”framgångsmått” och det första observerbara symptomet.</strong> Säg inte bara ”produktion ligger nere”. Ange ett mätbart mål som ”sänk 5xx från 18 % till under 1 %” eller ”p95-latens tillbaka under 400 ms”, plus vad som ändrades precis innan incidenten. Fråga sedan: ”Återge de tre största omedelbara riskerna baserat på dessa symptom och välj det primära framgångsmåttet.”</li>


<li><strong>Tvinga fram plattformsspecificitet med en kort miljöheader.</strong> Den här prompten är byggd för att vara plattformsmedveten, men fungerar bäst när du namnger stacken rakt ut (Kubernetes, ECS, Cloud Run, VM-baserat osv.). Följ upp med: ”Anta att vi deployar via GitHub Actions till EKS; inkludera kubectl/helm-kommandon där det passar och lista säkra standardval om en detalj saknas.”</li>


<li><strong>Gör verifieringsgrindarna körbara, inte filosofiska.</strong> Be om kontroller som din on-call kan köra på 60 sekunder, som en syntetisk ping, en nyckelendpoint eller en dashboard-fråga. En bra uppföljning: ”För varje steg, lägg till en godkänd/underkänd-grind med exakt fråga eller kommando, och ange vad vi gör om grinden underkänns.”</li>


<li><strong>Kör ”fallback-vägen” som en riktig gren.</strong> Team skriver ofta en fallback som en vag mening och övar aldrig på den. Efter första output, testa att fråga: ”Skriv nu om fallback-metoden som en komplett andra plan med samma tidsestimat och grindar, och inkludera beslutstriggern för att byta vid minut 10.”</li>


<li><strong>Använd den två gånger: en gång för incidenten, en gång för förebyggande arbete.</strong> Ärligt talat dör de flesta rollback-dokument efter avbrottet. När du har återställt tjänsten, kör en andra vända: ”Gör hardening-sektionen till en 2-veckors backlog med ägare, påverkan och beroenden; inkludera en automationsidé som minskar rollback-tiden med 50 %.”</li>

</ul>

</div>

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

<h2 class="wp-block-heading">Relaterade prompter</h2>



<p>När du har stabiliserat produktionen kan de här prompterna hjälpa dig att skärpa den operativa sidan av verksamheten så att incidenter gör mindre ont och återhämtning faktiskt finansieras.</p>



<p>Om du också behöver ett enkelt sätt att kvantifiera ”hur mycket runway har vi medan vi pausar releaser och fixar stabilitet”, kan vinkeln med veckoplanering hjälpa. När kassaflödestiming spelar roll (återbetalningar, krediter, övertid för support), ger <a href="https://nodenordic.se/prompts/skapa-en-veckovis-kassaflodesprognos-med-ai">Skapa en veckovis kassaflödesprognos med AI</a> en praktisk vecka-för-vecka-bild som du kan använda under en månad med många incidenter.</p>



<p>När ledningen efterfrågar en tajtare kontroll-loop på kostnader efter ett avbrott (verktygsuppgraderingar, mer övervakning, on-call-täckning) kommer budgetar upp direkt. För team som gör operativ hardening och behöver tydliga trade-offs kan <a href="https://nodenordic.se/prompts/skapa-en-nollbasbudget-per-manad-med-ai-prompt">Skapa en nollbasbudget per månad med ai-prompt</a> hjälpa dig planera vart varje krona ska ta vägen innan du binder upp dig till nytt tillförlitlighetsarbete.</p>



<p>Om du försöker ändra beteenden efter återkommande incidenter är problemet ofta beteendemässigt: oplanerat arbete, inkonsekventa ritualer och ”vi fixar det senare”. När du vill ha en struktur för repeterbara operativa beslut hemma eller i ett litet team är <a href="https://nodenordic.se/prompts/bygg-en-beteendebaserad-hushallsbudget">Bygg en beteendebaserad hushållsbudget</a> en oväntat bra följeslagare eftersom den förstärker triggers, regler och uppföljning.</p>


<br>


<p>Snabbguide:</p>



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

<li><a href="https://nodenordic.se/prompts/skapa-en-veckovis-kassaflodesprognos-med-ai">Skapa en veckovis kassaflödesprognos med AI</a>: Veckovis runway och tydlighet i timing.</li>


<li><a href="https://nodenordic.se/prompts/skapa-en-nollbasbudget-per-manad-med-ai-prompt">Skapa en nollbasbudget per månad med ai-prompt</a>: Fördela varje krona med intention.</li>


<li><a href="https://nodenordic.se/prompts/bygg-en-beteendebaserad-hushallsbudget">Bygg en beteendebaserad hushållsbudget</a>: Bygg regler som håller över tid.</li>


<li><a href="https://nodenordic.se/prompts/skapa-en-7-dagars-budgetinkopsplan-med-ai">Skapa en 7-dagars budgetinköpsplan med AI</a>: Minska kostnadsdrift med begränsningar.</li>


<li><a href="https://nodenordic.se/prompts/skapa-en-veckovis-kassaflodesprognos-med-ai">Skapa en veckovis kassaflödesprognos med AI</a>: Scenarioplanera i osäkerhet.</li>

</div>

<div class="faq-section">

<h2 class="wp-block-heading">Vanliga frågor</h2>


<div class="faq-item">
<span class="question">Vilka roller har mest nytta av den här AI-prompten för en production rollback playbook?</span>

<p class="answer"><strong>Site reliability engineers (SRE:er)</strong> använder den för att göra en stressig incident till en sekvens av körbara steg med grindar, fallback-alternativ och artefaktinsamling. <strong>Release managers</strong> förlitar sig på den för att välja den snabbaste säkra rollback-vägen och hålla koordineringen tajt mellan flera tjänster och godkännare. <strong>Engineering managers</strong> får värde eftersom prompten innehåller beslutspunkter och kommunikationsmönster, vilket minskar stök från intressenter medan teamet återställer tjänsten. <strong>Incident commanders</strong> gynnas av strukturen för parallella arbetsströmmar, så att utredning och återhämtning sker samtidigt utan att krocka.</p>

</div>

<div class="faq-item">
<span class="question">Vilka branscher får mest värde av den här AI-prompten för en production rollback playbook?</span>

<p class="answer"><strong>SaaS-bolag</strong> får omedelbart värde eftersom churn är känsligt för nedtid, och den här playbooken betonar snabb återställning plus mallar för kundkommunikation. <strong>E-handelsvarumärken</strong> använder den under peak-perioder (lanseringar, kampanjer, helgdagar) när en trasig checkout eller inventariesynk kan kosta verkliga intäkter varje minut. <strong>Fintech- och betalningsteam</strong> gynnas av stegen för bevisbevarande, eftersom revisionsspår och precisa tidslinjer är viktiga vid sidan av återställningshastighet. <strong>Media- och streamingplattformar</strong> använder den när latens eller partiella avbrott försämrar upplevelsen, eftersom prompten driver mätbara framgångsmått och snabba verifieringsgrindar.</p>

</div>

<div class="faq-item">
<span class="question">Varför ger enkla AI-prompter för att skapa en rollback-playbook svaga resultat?</span>

<p class="answer">En typisk prompt som ”Skriv en rollback-plan för en dålig produktionsdeploy” misslyckas eftersom den: saknar prioriterad sekvensering utifrån genomförandetid och minskad nedtid, ger inga plattformsanpassade kommandon så responders ändå måste gissa, ignorerar verifieringsgrindar så teamet inte vet om de faktiskt återhämtar sig, producerar en plan med en enda väg i stället för en primär rutt plus fallback, och missar bevisinsamling så root cause analysis blir långsammare och mer politisk senare. Den här prompten tvingar fram skarpa beslutspunkter och parallell forensik så att rollback och utredning sker samtidigt. Den innehåller också ”Vad detta INTE är”, vilket är ett av de bästa sätten att hindra att en incident förvandlas till ett kaotiskt förbättringsprojekt mitt under avbrottet.</p>

</div>

<div class="faq-item">
<span class="question">Kan jag anpassa den här production rollback playbook-prompten för min specifika situation?</span>

<p class="answer">Ja. Prompten är utformad för att efterfråga och använda input i ett tydligt format som [PLATFORM], [DEPLOYMENT_METHOD], [PRIMARY_SYMPTOM], [SUCCESS_METRIC], [SERVICES_AFFECTED] och [ROLLBACK_OPTIONS_AVAILABLE] även om själva prompten inte har fasta variabler i visaren. Om du ger de detaljerna blir outputen mycket mer körbar (kommandon, grindar och kommunikation som matchar din miljö). En bra uppföljning är: ”Ställ bara de minsta 8 frågorna som behövs för att skapa en incidentredo playbook, och generera sedan två rollback-grenar baserat på mina svar.”</p>

</div>

<div class="faq-item">
<span class="question">Vilka är de vanligaste misstagen när man använder den här production rollback playbook-prompten?</span>

<p class="answer">Det största misstaget är att lämna [PLATFORM] för vag — i stället för ”cloud”, skriv ”AWS EKS Kubernetes med Helm-releaser och Argo CD”. Ett annat vanligt fel är ett luddigt [SUCCESS_METRIC]; ”gör det stabilt” är svårt att verifiera, medan ”5xx under 1 % i 10 minuter och p95-latens under 400 ms” skapar tydliga grindar. Man underspecificerar också ofta [ROLLBACK_OPTIONS_AVAILABLE]; ”vi kan rulla tillbaka” är inte samma sak som ”vi har föregående container image, feature flags och ett rollback-skript för databasmigrering”. Slutligen glömmer team [COMMS_CHANNELS_AND_AUDIENCES]; ”notify stakeholders” blir praktiskt genomförbart när du namnger ”Statuspage, in-app-banner och en intern exec-Slack-kanal”.</p>

</div>

<div class="faq-item">
<span class="question">Vem ska INTE använda den här production rollback playbook-prompten?</span>

<p class="answer">Den här prompten är inte optimal för miljöer med låg insats där en rollback inte spelar någon roll, eller för team som bara vill ha en ensidig mall utan operativt djup. Den är heller ingen ersättning för plattformsägarskap; om ingen kan köra deploy-kommandon på ett säkert sätt hjälper inte ens världens bästa playbook. Om ni fortfarande är pre-production eller validerar en MVP kan det vara bättre att börja med grundläggande release-hygien (enkel övervakning, manuella rollback-noteringar och en liten on-call-rotation) innan ni genererar en full incident-playbook.</p>

</div>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Vilka roller har mest nytta av den här AI-prompten för en production rollback playbook?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Site reliability engineers (SRE:er) använder den för att göra en stressig incident till en sekvens av körbara steg med grindar, fallback-alternativ och artefaktinsamling. Release managers förlitar sig på den för att välja den snabbaste säkra rollback-vägen och hålla koordineringen tajt mellan flera tjänster och godkännare. Engineering managers får värde eftersom prompten innehåller beslutspunkter och kommunikationsmönster, vilket minskar stök från intressenter medan teamet återställer tjänsten. Incident commanders gynnas av strukturen för parallella arbetsströmmar, så att utredning och återhämtning sker samtidigt utan att krocka."
      }
    },
    {
      "@type": "Question",
      "name": "Vilka branscher får mest värde av den här AI-prompten för en production rollback playbook?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "SaaS-bolag får omedelbart värde eftersom churn är känsligt för nedtid, och den här playbooken betonar snabb återställning plus mallar för kundkommunikation. E-handelsvarumärken använder den under peak-perioder (lanseringar, kampanjer, helgdagar) när en trasig checkout eller inventariesynk kan kosta verkliga intäkter varje minut. Fintech- och betalningsteam gynnas av stegen för bevisbevarande, eftersom revisionsspår och precisa tidslinjer är viktiga vid sidan av återställningshastighet. Media- och streamingplattformar använder den när latens eller partiella avbrott försämrar upplevelsen, eftersom prompten driver mätbara framgångsmått och snabba verifieringsgrindar."
      }
    },
    {
      "@type": "Question",
      "name": "Varför ger enkla AI-prompter för att skapa en rollback-playbook svaga resultat?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "En typisk prompt som ”Skriv en rollback-plan för en dålig produktionsdeploy” misslyckas eftersom den: saknar prioriterad sekvensering utifrån genomförandetid och minskad nedtid, ger inga plattformsanpassade kommandon så responders ändå måste gissa, ignorerar verifieringsgrindar så teamet inte vet om de faktiskt återhämtar sig, producerar en plan med en enda väg i stället för en primär rutt plus fallback, och missar bevisinsamling så root cause analysis blir långsammare och mer politisk senare. Den här prompten tvingar fram skarpa beslutspunkter och parallell forensik så att rollback och utredning sker samtidigt. Den innehåller också ”Vad detta INTE är”, vilket är ett av de bästa sätten att hindra att en incident förvandlas till ett kaotiskt förbättringsprojekt mitt under avbrottet."
      }
    },
    {
      "@type": "Question",
      "name": "Kan jag anpassa den här production rollback playbook-prompten för min specifika situation?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Ja. Prompten är utformad för att efterfråga och använda input i ett tydligt format som [PLATFORM], [DEPLOYMENT_METHOD], [PRIMARY_SYMPTOM], [SUCCESS_METRIC], [SERVICES_AFFECTED] och [ROLLBACK_OPTIONS_AVAILABLE] även om själva prompten inte har fasta variabler i visaren. Om du ger de detaljerna blir outputen mycket mer körbar (kommandon, grindar och kommunikation som matchar din miljö). En bra uppföljning är: ”Ställ bara de minsta 8 frågorna som behövs för att skapa en incidentredo playbook, och generera sedan två rollback-grenar baserat på mina svar.”"
      }
    },
    {
      "@type": "Question",
      "name": "Vilka är de vanligaste misstagen när man använder den här production rollback playbook-prompten?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Det största misstaget är att lämna [PLATFORM] för vag — i stället för ”cloud”, skriv ”AWS EKS Kubernetes med Helm-releaser och Argo CD”. Ett annat vanligt fel är ett luddigt [SUCCESS_METRIC]; ”gör det stabilt” är svårt att verifiera, medan ”5xx under 1 % i 10 minuter och p95-latens under 400 ms” skapar tydliga grindar. Man underspecificerar också ofta [ROLLBACK_OPTIONS_AVAILABLE]; ”vi kan rulla tillbaka” är inte samma sak som ”vi har föregående container image, feature flags och ett rollback-skript för databasmigrering”. Slutligen glömmer team [COMMS_CHANNELS_AND_AUDIENCES]; ”notify stakeholders” blir praktiskt genomförbart när du namnger ”Statuspage, in-app-banner och en intern exec-Slack-kanal”."
      }
    },
    {
      "@type": "Question",
      "name": "Vem ska INTE använda den här production rollback playbook-prompten?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Den här prompten är inte optimal för miljöer med låg insats där en rollback inte spelar någon roll, eller för team som bara vill ha en ensidig mall utan operativt djup. Den är heller ingen ersättning för plattformsägarskap; om ingen kan köra deploy-kommandon på ett säkert sätt hjälper inte ens världens bästa playbook. Om ni fortfarande är pre-production eller validerar en MVP kan det vara bättre att börja med grundläggande release-hygien (enkel övervakning, manuella rollback-noteringar och en liten on-call-rotation) innan ni genererar en full incident-playbook."
      }
    }
  ]
}
</script>
</div>

<div class="closing-section">

<p>Incidenter straffar otydlighet. En tydlig rollback-playbook köper dig tid, återställer kundernas förtroende snabbare och bevarar bevisunderlaget du kommer önska att du hade i morgon. Klistra in prompten i ChatGPT, anpassa antagandena till din stack och håll den redo inför nästa release.</p>

</div><p>&lt;p&gt;The post <a rel="nofollow" href="https://nodenordic.se/prompts/skapa-en-playbook-for-rollback-i-produktion/">Skapa en playbook för rollback i produktion</a> first appeared on <a rel="nofollow" href="https://nodenordic.se">Node Nordic - AI Konsult för företag</a>.&lt;/p&gt;</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Distribuera hemligheter på Vercel och Supabase</title>
		<link>https://nodenordic.se/prompts/distribuera-hemligheter-pa-vercel-och-supabase/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=distribuera-hemligheter-pa-vercel-och-supabase</link>
		
		<dc:creator><![CDATA[Rickard Andersson]]></dc:creator>
		<pubDate>Fri, 23 Jan 2026 02:37:29 +0000</pubDate>
				<category><![CDATA[prompts]]></category>
		<guid isPermaLink="false">https://nodenordic.se/?p=5001429</guid>

					<description><![CDATA[<p>Hemligheter läcker? Beprövad AI-prompt som tar fram plan för Vercel, Supabase och lokal miljö med kod, kontroller och åtgärder. Fler prompts för marknad, sälj och drift.</p>
<p>&lt;p&gt;The post <a rel="nofollow" href="https://nodenordic.se/prompts/distribuera-hemligheter-pa-vercel-och-supabase/">Distribuera hemligheter på Vercel och Supabase</a> first appeared on <a rel="nofollow" href="https://nodenordic.se">Node Nordic - AI Konsult för företag</a>.&lt;/p&gt;</p>
]]></description>
										<content:encoded><![CDATA[<!-- FOCUS_KEYWORD: deploy secrets prompt -->
<div class="hook-introduction">

<p>Hemligheter läcker inte för att ditt team är slarvigt. De läcker för att upplägget är otydligt, gränsen mellan webbläsare och server suddas ut, och ”bara den här gången” blir en vana. Plötsligt roterar du nycklar vid midnatt och undrar var exponeringen egentligen skedde.</p>



<p>Den här <strong>deploy secrets prompt</strong> är byggd för <strong>startup-CTO:er</strong> som behöver en strukturerad Vercel + Supabase-utrullning utan att bromsa leveranser, <strong>fullstackutvecklare</strong> som gång på gång snubblar på scope för env-variabler mellan klient- och serverkod, och <strong>konsulter</strong> som städar upp efter en incident före en förnyelse eller revision. Resultatet är en implementeringsklar, miljöspecifik plan för hemligheter med exakta konfigurationssteg för Vercel, Supabase och lokal utveckling, plus kodmönster, verifieringskontroller och felsökning för vanliga fallgropar.</p>

</div>

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

<h2 class="wp-block-heading">Vad gör den här AI-prompten och när ska du använda den?</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">Vad den här prompten gör</th>
      <th scope="col">När du ska använda den här prompten</th>
      <th scope="col">Vad du får</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <ul class="automation-list">
          <li>Den tar fram en plattformsspecifik plan för hemligheter och env-variabler, anpassad för Vercel, Supabase och lokala utvecklingsflöden.</li>
          <li>Den delar upp rekommendationer per miljö (lokal vs staging vs produktion) så att du slutar ”promota” dev-nycklar till prod av misstag.</li>
          <li>Den definierar en strikt gräns mellan klientsida och serversida, inklusive hur du håller hemligheter borta från webbläsar-bundles och publik runtime-konfiguration.</li>
          <li>Den innehåller konfigurationsexempel och kodsnuttar som visar säkra åtkomstmönster, namngivningskonventioner och skyddsräcken i kodgranskning.</li>
          <li>Den lägger till verifieringssteg och felsökning efter större ändringar, så att du kan bekräfta att du stoppade läckan i stället för att hoppas.</li>
       </ul>
      </td>
      <td>
        <ul class="results-list">
          <li>Du deployar en Next.js-app på Vercel med Supabase och måste avgöra vilka värden som kan vara publika och vilka som måste vara enbart på servern.</li>
          <li>En hemlighet dök upp i en Git-commit, en klientsides-bundle, loggar eller en skärmdump, och du behöver en pragmatisk saneringsplan snabbt.</li>
          <li>Teamet inför staging för första gången och fortsätter att kopiera miljövariabler manuellt mellan projekt.</li>
          <li>Flera utvecklare har olika lokala upplägg (dotenv-filer, shell-exporter, monorepon), och onboarding skapar fel om och om igen.</li>
          <li>Du skalar deployment och vill ha repeterbara kontroller före varje release, inte en engångs ”säkerhetsgenomgång”.</li>
        </ul>
      </td>
       <td>
         <ul class="deliverables-list">
           <li>En utrullningsplan för tre miljöer (lokal, staging, produktion) med tydliga ”lägg in det här här”-steg för Vercel och Supabase.</li>
           <li>En mall för inventering av hemligheter som märker varje värde som endast server vs säkert att exponera, med namngivningsregler som minskar misstag.</li>
           <li>Kopiera/klistra-in-klara kodmönster för säker åtkomst till hemligheter och för att undvika exponering i webbläsaren, plus exempel på placering av mappar/filer.</li>
           <li>En verifieringschecklista efter varje ändring (kontroller av build-output, runtime-kontroller och tester för ”blev det publikt?”).</li>
           <li>Ett felsökningsavsnitt för vanliga felkonfigurationer, inklusive scope-problem, saknade variabler och oavsiktliga git-commits.</li>
         </ul>
       </td>
    </tr>
  </tbody>
</table>

</div>

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

<h2 class="wp-block-heading">Hela AI-prompten: plan för deployment av hemligheter för Vercel + Supabase</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">
                                    Steg 1: Anpassa prompten med din information
                            </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>Återställ</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>Anpassa och kopiera hela prompten</span>
                </button>
            </div>
        </div>

        <!-- Customize the Prompt Section -->
                    <div class="prompt-customize-section">
                <span class="customize-title">Anpassa prompten</span>
                <p class="customize-subtitle">Fyll i fälten nedan för att anpassa prompten efter dina behov.</p>
                <table class="customize-table">
                    <thead>
                        <tr>
                            <th>Variabel</th>
                            <th>Vad du ska ange</th>
                            <th>Anpassa prompten</th>
                        </tr>
                    </thead>
                    <tbody>
                                                    <tr>
                                <td class="var-name"><code>[VERSALER_MED_UNDERSCORES]</code></td>
                                <td class="var-desc">
                                    Ange namnet på miljövariabeln i versaler med understreck, enligt etablerade namnkonventioner för hemligheter eller konfigurationsnycklar.                                    <div class="var-example">Till exempel: "DATABASE_URL eller API_SECRET_KEY"</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[VERSALER_MED_UNDERSCORES]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[PLATTFORM]</code></td>
                                <td class="var-desc">
                                    Ange plattformen där applikationen är driftsatt. Det kan vara en hostingtjänst eller en molnleverantör som används för driftsättning.                                    <div class="var-example">Till exempel: "Vercel, AWS Lambda eller Heroku"</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[PLATTFORM]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[BACKEND_TJANSTER]</code></td>
                                <td class="var-desc">
                                    Lista de backendtjänster eller databaser som applikationen är beroende av. Inkludera vilka tekniker eller tjänster som används.                                    <div class="var-example">Till exempel: "Supabase för databas och autentisering, PostgreSQL för datalagring"</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[BACKEND_TJANSTER]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[FRONTEND_RAMVERK]</code></td>
                                <td class="var-desc">
                                    Ange vilket frontend-ramverk applikationen är byggd med. Det hjälper till att anpassa rekommendationerna för implementation på klientsidan.                                    <div class="var-example">Till exempel: "Next.js eller React"</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[FRONTEND_RAMVERK]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[PROJEKTKONTEXT]</code></td>
                                <td class="var-desc">
                                    Ange relevanta detaljer om projektet, inklusive syfte, omfattning samt eventuella unika krav eller begränsningar.                                    <div class="var-example">Till exempel: "Bygger en SaaS-plattform för gemensam projektledning, riktad mot startups och småföretag."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[PROJEKTKONTEXT]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[TEAMSTORLEK]</code></td>
                                <td class="var-desc">
                                    Ange hur många personer som ingår i utvecklingsteamet. Det hjälper att bedöma komplexiteten i hantering av hemligheter och åtkomstkontroll.                                    <div class="var-example">Till exempel: "5 utvecklare, inklusive 2 backend-specialister och 1 DevOps-ingenjör."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[TEAMSTORLEK]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </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">Anpassa prompten nu</span>

                </button>
            </div>
        
        <!-- Full Prompt Code Header -->
                    <div class="prompt-code-header">
                <span class="prompt-code-title">
                    Steg 2: Kopiera prompten
                </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>Återställ</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>Kopiera hela prompten</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">MÅL</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">BEGRÄNSNINGAR</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">Vad detta INTE är</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></div><div class="locked-section-icon">🔒</div></div><div class="prompt-header-visible">INDATA</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-SPECIFIKATION</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) Säkerhetsöverblick</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">2) Plattformssetup (exakta steg)</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">3) Modell för miljöisolering</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">4) Repository- &amp; git-skydd</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">5) Säker kodat användning (klient vs server)</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">6) Verifierings- &amp; testplan</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">7) Övervakning &amp; löpande underhåll</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">KVALITETSKONTROLLER</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;">
                ## MÅL
Ta fram en färdig att implementera, plattformsspecifik säkerhetsplan för miljövariabler och hemligheter som fungerar över lokal utveckling, staging och produktion. Leveransen måste innehålla exakta installationssteg för Vercel, Supabase och det lokala dev-flödet, samt konkreta kodmönster som förhindrar att hemligheter exponeras i webbläsaren eller råkar committas till git.

## PERSONA
Agera som en incidenttestad DevSecOps-arkitekt som har hanterat en verklig läcka av hemligheter med stor finansiell och compliance-mässig påverkan. Kommunicera som en lugn, pragmatisk byggare: minimalt med föreläsning, maximalt “gör så här / ställ in här / verifiera så här”, där utvecklarupplevelsen behandlas som ett förstahandskrav.

## BEGRÄNSNINGAR
- Prioritera handlingsbara, plattformsbundna instruktioner framför bred säkerhetsteori.
- Inkludera konfigurationsexempel och kodsnuttar anpassade till den angivna stacken.
- Separera tydligt vägledning för:
  - lokal utveckling vs staging vs produktion
  - klientsida (webbläsare) vs serversida exekvering
- Rekommendera konkreta verktyg/tjänster endast när de åtföljs av installationssteg.
- Lägg till verifieringssteg efter större ändringar (hur du bekräftar att det fungerar säkert).
- Ge felsökning för vanliga felkonfigurationer och “gotchas”.
- **Hantering av edge cases:** Om några nödvändiga indata saknas eller är oklara, ställ riktade frågor och ge säkra standardvärden/antaganden som märks upp tydligt.
- **Efterlevnad av variabelformat:** Användarangivna objekt måste visas som `[VERSALER_MED_UNDERSCORES]`. AI-ifyllda platshållare måste använda `{Title Case}`.

### Vad detta INTE är
- Inte en juridisk/compliance-bedömning (SOC2/GDPR/PCI-tolkning).
- Inte en fullständig threat model för hela systemet utanför hantering av env vars/hemligheter.
- Inte exploit-instruktioner eller offensiv vägledning.
- Inte generiska “rotera nycklar”-råd utan att visa *var* och *hur* du implementerar det i de valda plattformarna.

## PROCESS
1. **Föranalyssteg (obligatoriskt):** Återge din förståelse av användarens stack och mål i 3–6 punktlistor, och lista eventuella antaganden.
2. Identifiera sannolika exponeringsvägar för hemligheter i den här stacken (git, build-loggar, preview deployments, klient-bundles, CI, fel-scope:ade variabler).
3. Ta fram en implementeringsplan plattform för plattform (Vercel, Supabase, lokalt), inklusive exakta klickvägar/inställningsnamn där det är relevant.
4. Definiera en modell för miljöisolering (dev/stage/prod) med namngivningskonventioner och åtkomstkontroller.
5. Ge kodmönster för säker åtkomst:
   - runtime-åtkomst endast på servern
   - klientexponerade variabler endast när det är uttryckligen avsett
   - exempel för det angivna ramverket
6. Lägg till git-härdningssteg för att förhindra oavsiktliga commits och minska blast radius.
7. Ge en verifierings-playbook (kontroller/tester) samt vanliga fallgropar och åtgärder.
8. Avsluta med övervaknings-/underhållsrutiner som är lättviktiga men effektiva.

## INDATA
- **Deploy-plattform(ar):** [PLATTFORM]
- **Backend-/databastjänster:** [BACKEND_TJANSTER]
- **Frontend-ramverk:** [FRONTEND_RAMVERK]
- **Beskrivning av nuvarande env-/secrets-setup:** [PROJEKTKONTEXT]
- **Teamstorlek som behöver åtkomst:** [TEAMSTORLEK]

## OUTPUT-SPECIFIKATION
Leverera planen med följande avsnitt och inkludera de efterfrågade artefakterna i varje avsnitt.

### 1) Säkerhetsöverblick
Tillhandahåll:
- {Current State Summary}
- {Highest-Risk Gaps}
- {Likely Leak Paths}
- {Immediate Fixes (Today)}
- {Assumptions &amp; Clarifying Questions}

### 2) Plattformssetup (exakta steg)
Ge separata underavsnitt för:
- {Vercel Configuration}
- {Supabase Configuration}
- {Local Development Configuration}

För varje underavsnitt inkludera:
- {Step-by-Step Actions}
- {Recommended Naming Scheme}
- {Access Control Model} (vem kan läsa/skriva)
- {Example Values Layout} (visa struktur, skriv aldrig ut riktiga hemligheter)
- {CI/CD Notes} (implikationer vid build-time vs runtime)
- {Troubleshooting Notes}

### 3) Modell för miljöisolering
Tillhandahåll:
- {Dev Stage Prod Separation Strategy}
- {Variable Naming Conventions}
- {Rules for Promotion} (hur värden flyttas från dev → stage → prod)
- {Preview/Branch Deployment Rules} (om tillämpligt för [PLATTFORM])
- {Separation of Duties Suggestions} (skalat till [TEAMSTORLEK])

### 4) Repository- &amp; git-skydd
Tillhandahåll:
- {Gitignore Requirements}
- {Pre-Commit / Pre-Push Controls} (verktyg + installationssteg)
- {Secret Scanning Recommendations} (med konfigurationsexempel)
- {Incident Containment Steps} (vad du gör om en hemlighet committas)

Inkludera omskrivna exempelsnuttar såsom:
- ett exempelblock för `.gitignore` relevant för {Framework Files}
- en outline för en pre-commit-hook för {Secret Detection Tool}

### 5) Säker kodat användning (klient vs server)
Tillhandahåll:
- {Server-Only Access Pattern} med kod för [FRONTEND_RAMVERK]
- {Client-Exposed Variables Pattern} med strikta regler och exempel
- {How to Prevent Browser Exposure} (specifika gör/undvik-regler)
- {Backend Service Access Examples} (t.ex. Supabase-nycklar: anon vs service role)
- {Common Mistakes and Fixes}

Inkludera minst:
- en serverside-snutt som använder {Server Runtime Secret}
- en klientside-snutt som använder {Public Variable} (endast icke-känsligt)

### 6) Verifierings- &amp; testplan
Tillhandahåll en checklista med:
- {Build Output Checks} (säkerställ att hemligheter inte bundlas)
- {Runtime Checks} (rätt env väljs per miljö)
- {Log Hygiene Checks} (ingen utskrift av hemligheter)
- {Access Control Checks} (least privilege)
- {Rollback / Rotation Drill} (simulera rotation på ett säkert sätt)

### 7) Övervakning &amp; löpande underhåll
Tillhandahåll:
- {Rotation Cadence} (pragmatisk, inte överdriven)
- {Audit &amp; Alerting Setup} (plattformsnative där möjligt)
- {Key Ownership &amp; Access Reviews}
- {Documentation Template} för teamet (vad som ska dokumenteras, var)

## KVALITETSKONTROLLER
Innan du slutför, validera att svaret:
- Använder plattformsspecifika steg och inställningsnamn (inte generiska råd).
- Skiljer på build-time vs runtime-variabler samt klient- vs serverexponering.
- Innehåller copy-pastable exempel/snuttar som passar [PLATTFORM], [BACKEND_TJANSTER] och [FRONTEND_RAMVERK].
- Innehåller en verifieringschecklista som skulle fånga fel-scope:ade/offentliga hemligheter.
- Pekar ut minst 6 vanliga fallgropar med tydliga åtgärder och säkra alternativ.            </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">Kopiera hela prompten</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 span {
        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 !important;
    }


    .prompt-cta-copy span {
        background: #3a3a3a;
        color: #fff !important;
    }


    .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 !important;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .copy-customized-btn span {
        color: #fff !important
    }

    .copy-customized-text span {
        color: #fff !important
    }

    .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;
        color: #fff !important;

    }

    .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 = 'Kopierad!';
            });

            setTimeout(() => {
                copyButtons.forEach(btn => {
                    btn.classList.remove('copied');
                    const textSpan = btn.querySelector('span');
                    if (textSpan) textSpan.textContent = 'Kopiera hela prompten';
                });
            }, 2000);
        }).catch(err => {
            console.error('Failed to copy:', err);
        });
    }

    // Store original prompt for customization
    const originalPrompt = "## M\u00c5L\r\nTa fram en f\u00e4rdig att implementera, plattformsspecifik s\u00e4kerhetsplan f\u00f6r milj\u00f6variabler och hemligheter som fungerar \u00f6ver lokal utveckling, staging och produktion. Leveransen m\u00e5ste inneh\u00e5lla exakta installationssteg f\u00f6r Vercel, Supabase och det lokala dev-fl\u00f6det, samt konkreta kodm\u00f6nster som f\u00f6rhindrar att hemligheter exponeras i webbl\u00e4saren eller r\u00e5kar committas till git.\r\n\r\n## PERSONA\r\nAgera som en incidenttestad DevSecOps-arkitekt som har hanterat en verklig l\u00e4cka av hemligheter med stor finansiell och compliance-m\u00e4ssig p\u00e5verkan. Kommunicera som en lugn, pragmatisk byggare: minimalt med f\u00f6rel\u00e4sning, maximalt \u201cg\u00f6r s\u00e5 h\u00e4r \/ st\u00e4ll in h\u00e4r \/ verifiera s\u00e5 h\u00e4r\u201d, d\u00e4r utvecklarupplevelsen behandlas som ett f\u00f6rstahandskrav.\r\n\r\n## BEGR\u00c4NSNINGAR\r\n- Prioritera handlingsbara, plattformsbundna instruktioner framf\u00f6r bred s\u00e4kerhetsteori.\r\n- Inkludera konfigurationsexempel och kodsnuttar anpassade till den angivna stacken.\r\n- Separera tydligt v\u00e4gledning f\u00f6r:\r\n  - lokal utveckling vs staging vs produktion\r\n  - klientsida (webbl\u00e4sare) vs serversida exekvering\r\n- Rekommendera konkreta verktyg\/tj\u00e4nster endast n\u00e4r de \u00e5tf\u00f6ljs av installationssteg.\r\n- L\u00e4gg till verifieringssteg efter st\u00f6rre \u00e4ndringar (hur du bekr\u00e4ftar att det fungerar s\u00e4kert).\r\n- Ge fels\u00f6kning f\u00f6r vanliga felkonfigurationer och \u201cgotchas\u201d.\r\n- **Hantering av edge cases:** Om n\u00e5gra n\u00f6dv\u00e4ndiga indata saknas eller \u00e4r oklara, st\u00e4ll riktade fr\u00e5gor och ge s\u00e4kra standardv\u00e4rden\/antaganden som m\u00e4rks upp tydligt.\r\n- **Efterlevnad av variabelformat:** Anv\u00e4ndarangivna objekt m\u00e5ste visas som `[VERSALER_MED_UNDERSCORES]`. AI-ifyllda platsh\u00e5llare m\u00e5ste anv\u00e4nda `{Title Case}`.\r\n\r\n### Vad detta INTE \u00e4r\r\n- Inte en juridisk\/compliance-bed\u00f6mning (SOC2\/GDPR\/PCI-tolkning).\r\n- Inte en fullst\u00e4ndig threat model f\u00f6r hela systemet utanf\u00f6r hantering av env vars\/hemligheter.\r\n- Inte exploit-instruktioner eller offensiv v\u00e4gledning.\r\n- Inte generiska \u201crotera nycklar\u201d-r\u00e5d utan att visa *var* och *hur* du implementerar det i de valda plattformarna.\r\n\r\n## PROCESS\r\n1. **F\u00f6ranalyssteg (obligatoriskt):** \u00c5terge din f\u00f6rst\u00e5else av anv\u00e4ndarens stack och m\u00e5l i 3\u20136 punktlistor, och lista eventuella antaganden.\r\n2. Identifiera sannolika exponeringsv\u00e4gar f\u00f6r hemligheter i den h\u00e4r stacken (git, build-loggar, preview deployments, klient-bundles, CI, fel-scope:ade variabler).\r\n3. Ta fram en implementeringsplan plattform f\u00f6r plattform (Vercel, Supabase, lokalt), inklusive exakta klickv\u00e4gar\/inst\u00e4llningsnamn d\u00e4r det \u00e4r relevant.\r\n4. Definiera en modell f\u00f6r milj\u00f6isolering (dev\/stage\/prod) med namngivningskonventioner och \u00e5tkomstkontroller.\r\n5. Ge kodm\u00f6nster f\u00f6r s\u00e4ker \u00e5tkomst:\r\n   - runtime-\u00e5tkomst endast p\u00e5 servern\r\n   - klientexponerade variabler endast n\u00e4r det \u00e4r uttryckligen avsett\r\n   - exempel f\u00f6r det angivna ramverket\r\n6. L\u00e4gg till git-h\u00e4rdningssteg f\u00f6r att f\u00f6rhindra oavsiktliga commits och minska blast radius.\r\n7. Ge en verifierings-playbook (kontroller\/tester) samt vanliga fallgropar och \u00e5tg\u00e4rder.\r\n8. Avsluta med \u00f6vervaknings-\/underh\u00e5llsrutiner som \u00e4r l\u00e4ttviktiga men effektiva.\r\n\r\n## INDATA\r\n- **Deploy-plattform(ar):** [PLATTFORM]\r\n- **Backend-\/databastj\u00e4nster:** [BACKEND_TJANSTER]\r\n- **Frontend-ramverk:** [FRONTEND_RAMVERK]\r\n- **Beskrivning av nuvarande env-\/secrets-setup:** [PROJEKTKONTEXT]\r\n- **Teamstorlek som beh\u00f6ver \u00e5tkomst:** [TEAMSTORLEK]\r\n\r\n## OUTPUT-SPECIFIKATION\r\nLeverera planen med f\u00f6ljande avsnitt och inkludera de efterfr\u00e5gade artefakterna i varje avsnitt.\r\n\r\n### 1) S\u00e4kerhets\u00f6verblick\r\nTillhandah\u00e5ll:\r\n- {Current State Summary}\r\n- {Highest-Risk Gaps}\r\n- {Likely Leak Paths}\r\n- {Immediate Fixes (Today)}\r\n- {Assumptions & Clarifying Questions}\r\n\r\n### 2) Plattformssetup (exakta steg)\r\nGe separata underavsnitt f\u00f6r:\r\n- {Vercel Configuration}\r\n- {Supabase Configuration}\r\n- {Local Development Configuration}\r\n\r\nF\u00f6r varje underavsnitt inkludera:\r\n- {Step-by-Step Actions}\r\n- {Recommended Naming Scheme}\r\n- {Access Control Model} (vem kan l\u00e4sa\/skriva)\r\n- {Example Values Layout} (visa struktur, skriv aldrig ut riktiga hemligheter)\r\n- {CI\/CD Notes} (implikationer vid build-time vs runtime)\r\n- {Troubleshooting Notes}\r\n\r\n### 3) Modell f\u00f6r milj\u00f6isolering\r\nTillhandah\u00e5ll:\r\n- {Dev Stage Prod Separation Strategy}\r\n- {Variable Naming Conventions}\r\n- {Rules for Promotion} (hur v\u00e4rden flyttas fr\u00e5n dev \u2192 stage \u2192 prod)\r\n- {Preview\/Branch Deployment Rules} (om till\u00e4mpligt f\u00f6r [PLATTFORM])\r\n- {Separation of Duties Suggestions} (skalat till [TEAMSTORLEK])\r\n\r\n### 4) Repository- & git-skydd\r\nTillhandah\u00e5ll:\r\n- {Gitignore Requirements}\r\n- {Pre-Commit \/ Pre-Push Controls} (verktyg + installationssteg)\r\n- {Secret Scanning Recommendations} (med konfigurationsexempel)\r\n- {Incident Containment Steps} (vad du g\u00f6r om en hemlighet committas)\r\n\r\nInkludera omskrivna exempelsnuttar s\u00e5som:\r\n- ett exempelblock f\u00f6r `.gitignore` relevant f\u00f6r {Framework Files}\r\n- en outline f\u00f6r en pre-commit-hook f\u00f6r {Secret Detection Tool}\r\n\r\n### 5) S\u00e4ker kodat anv\u00e4ndning (klient vs server)\r\nTillhandah\u00e5ll:\r\n- {Server-Only Access Pattern} med kod f\u00f6r [FRONTEND_RAMVERK]\r\n- {Client-Exposed Variables Pattern} med strikta regler och exempel\r\n- {How to Prevent Browser Exposure} (specifika g\u00f6r\/undvik-regler)\r\n- {Backend Service Access Examples} (t.ex. Supabase-nycklar: anon vs service role)\r\n- {Common Mistakes and Fixes}\r\n\r\nInkludera minst:\r\n- en serverside-snutt som anv\u00e4nder {Server Runtime Secret}\r\n- en klientside-snutt som anv\u00e4nder {Public Variable} (endast icke-k\u00e4nsligt)\r\n\r\n### 6) Verifierings- & testplan\r\nTillhandah\u00e5ll en checklista med:\r\n- {Build Output Checks} (s\u00e4kerst\u00e4ll att hemligheter inte bundlas)\r\n- {Runtime Checks} (r\u00e4tt env v\u00e4ljs per milj\u00f6)\r\n- {Log Hygiene Checks} (ingen utskrift av hemligheter)\r\n- {Access Control Checks} (least privilege)\r\n- {Rollback \/ Rotation Drill} (simulera rotation p\u00e5 ett s\u00e4kert s\u00e4tt)\r\n\r\n### 7) \u00d6vervakning & l\u00f6pande underh\u00e5ll\r\nTillhandah\u00e5ll:\r\n- {Rotation Cadence} (pragmatisk, inte \u00f6verdriven)\r\n- {Audit & Alerting Setup} (plattformsnative d\u00e4r m\u00f6jligt)\r\n- {Key Ownership & Access Reviews}\r\n- {Documentation Template} f\u00f6r teamet (vad som ska dokumenteras, var)\r\n\r\n## KVALITETSKONTROLLER\r\nInnan du slutf\u00f6r, validera att svaret:\r\n- Anv\u00e4nder plattformsspecifika steg och inst\u00e4llningsnamn (inte generiska r\u00e5d).\r\n- Skiljer p\u00e5 build-time vs runtime-variabler samt klient- vs serverexponering.\r\n- Inneh\u00e5ller copy-pastable exempel\/snuttar som passar [PLATTFORM], [BACKEND_TJANSTER] och [FRONTEND_RAMVERK].\r\n- Inneh\u00e5ller en verifieringschecklista som skulle f\u00e5nga fel-scope:ade\/offentliga hemligheter.\r\n- Pekar ut minst 6 vanliga fallgropar med tydliga \u00e5tg\u00e4rder och s\u00e4kra alternativ.";
    const variables = ["[VERSALER_MED_UNDERSCORES]","[PLATTFORM]","[BACKEND_TJANSTER]","[FRONTEND_RAMVERK]","[PROJEKTKONTEXT]","[TEAMSTORLEK]"];
    // 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 = 'Återställd!';
            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">Proffstips för bättre resultat med AI-prompten</h2>



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

<li><strong>Börja med att lista varje hemlighet och var den ligger i dag.</strong> Innan du klistrar in prompten i ditt AI-verktyg, skriv ner saker som databas-URL:er, service-role-nycklar, webhook-hemligheter, nycklar för e-postleverantörer och analystokens. Fråga sedan: ”Markera varje som endast server, säkert att exponera publikt, eller ’behöver granskas’ och förklara varför.” Bara det här steget förhindrar ärligt talat hälften av de typiska Vercel-felkonfigurationerna.</li>


<li><strong>Se till att den separerar lokal, staging och produktion tydligt.</strong> En vag plan tenderar att falla tillbaka till ”lägg bara in env vars i Vercel”. Följ upp med: ”Ge mig tre avsnitt med rubrikerna Lokal, Staging, Produktion, och inkludera en slutlig checklista för varje.” Om du använder ett Supabase-projekt för staging, säg det och be om ”exakt mappning från Vercel-projekt → Supabase-projekt”.</li>


<li><strong>Be om en granskning av klient-/servergränsen i dina kodvägar.</strong> De dyraste läckorna händer när en serverhemlighet refereras från en fil som hamnar i webbläsarens bundle. Efter första svaret, fråga: ”Lista riskmönster i Next.js som att importera servermoduler i klientkomponenter, exponera env vars via NEXT_PUBLIC och logga konfigurationsobjekt.” Be sedan om ett snabbt exempel på en ”säker omskrivning” för en av dina verkliga filer.</li>


<li><strong>Iterera med ”verifieringssteg” tills det går att testa.</strong> Bra råd blir riktigt bra när det säger hur du bekräftar att det fungerade. Efter första svaret, prova: ”Lägg till verifieringssteg efter varje större ändring, inklusive hur man bekräftar att en hemlighet inte finns i klientbundlen, hur man validerar runtime-tillgänglighet på servern och vilka fel man kan förvänta sig när något saknas.”</li>


<li><strong>Be om säkra standardval och riktade frågor när detaljer saknas.</strong> Den här prompten är byggd för att ställa förtydligande frågor, men du kan pressa den längre. Använd: ”Om du inte vet ett värde, anta ett säkert standardval och märk det tydligt, och ställ sedan bara de 5 frågor som har högst påverkan.” Då får du fart framåt nu, utan att bygga på skakiga antaganden.</li>

</ul>

</div>

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

<h2 class="wp-block-heading">Relaterade promptar</h2>



<p>När ditt secrets-flöde är låst hjälper de här promptarna dig att operationalisera delarna kring ”vad händer sen”: supportprocesser, kundkommunikation och intern enablement.</p>



<p>Om du också behöver ett repeterbart incidenthanteringsflöde för kundnära team är <a href="https://nodenordic.se/prompts/skapa-en-kundsupporthandbok-med-denna-ai-prompt">Bygg en kundsupport-playbook med den här AI-prompten</a> ett starkt nästa steg. När en läcka tvingar fram återställningar, inloggningsfel eller trasiga webhooks behöver supporten tydliga triageflöden, eskaleringsregler och konsekvent kommunikation så att engineering kan fokusera på fixen.</p>



<p>För team som hanterar stora mängder ärenden under driftstörningar hjälper <a href="https://nodenordic.se/prompts/skapa-supportsamtalsmanus-med-denna-ai-prompt">Skapa talk tracks för kundsupport med den här AI-prompten</a> dig att standardisera svar utan att låta robotisk. Den är särskilt användbar när du måste förklara varför användare behöver återansluta integrationer eller autentisera om efter nyckelrotation.</p>



<p>När du har stabiliserat och vill göra återhämtningen till ett förtroendeskapande tillfälle är <a href="https://nodenordic.se/prompts/lansera-en-playbook-for-kundambassadorer">Lansera en customer advocacy-playbook AI-prompt</a> en smart kombination. Den vägleder hur du kommunicerar förbättringar, stärker tillförlitlighet och bygger en berättelse kring den starkare säkerhetsnivå du har infört.</p>


<br>


<p>Snabbreferens:</p>



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

<li><a href="https://nodenordic.se/prompts/skapa-en-kundsupporthandbok-med-denna-ai-prompt">Bygg en kundsupport-playbook med den här AI-prompten</a>: Triage, eskaleringar och struktur för supportverksamheten.</li>


<li><a href="https://nodenordic.se/prompts/skapa-supportsamtalsmanus-med-denna-ai-prompt">Skapa talk tracks för kundsupport med den här AI-prompten</a>: Konsekventa svar under incidenter och åtgärder.</li>


<li><a href="https://nodenordic.se/prompts/lansera-en-playbook-for-kundambassadorer">Lansera en customer advocacy-playbook AI-prompt</a>: Gör förbättringar till kundförtroende.</li>


<li><a href="https://nodenordic.se/prompts/bygg-en-playbook-for-kundernas-kunskapscenter">Bygg en customer learning center-playbook AI-prompt</a>: Självbetjäningsdokumentation för vanliga flöden.</li>


<li><a href="https://nodenordic.se/prompts/skriv-kundtjanstsvar-med-denna-ai-prompt">Skriv kundsupport-svar med den här AI-prompten</a>: Snabba, korrekta svar för ärenden.</li>

</ul>

</div>

<div class="faq-section">

<h2 class="wp-block-heading">Vanliga frågor</h2>


<div class="faq-item">
<span class="question">Vilka roller har mest nytta av den här deploy secrets prompt AI-prompten?</span>

<p class="answer"><strong>DevSecOps-ingenjörer</strong> använder den för att standardisera hur hemligheter skapas, lagras och verifieras mellan miljöer utan att skriva en specialanpassad dokumentation varje sprint. <strong>Fullstackingenjörer (Next.js på Vercel)</strong> förlitar sig på den för att undvika att av misstag importera serverkod i klientkomponenter och exponera env-variabler via webbläsar-bundles. <strong>Startup-CTO:er</strong> använder den när de behöver snabba, friktionsfria skyddsräcken som håller uppe leveranstakten. <strong>Implementationskonsulter</strong> använder den vid överlämningar så att upplägget blir reproducerbart för kundens team i stället för att leva i Slack-meddelanden.</p>

</div>

<div class="faq-item">
<span class="question">Vilka branscher får mest värde av den här deploy secrets prompt AI-prompten?</span>

<p class="answer"><strong>SaaS-bolag</strong> får omedelbart värde eftersom de ofta kör Next.js på Vercel med Supabase och hanterar autentisering, faktureringswebhooks och deployments i flera miljöer som förstärker misstag. <strong>E-handel och prenumerationsvarumärken</strong> gynnas när butiksintegrationer, e-postleverantörer och betalprocessorer kräver nycklar som inte får läcka till klientsideskod eller publika repo:n. <strong>Byråer</strong> använder den när de hanterar flera kunddeployments och behöver ett konsekvent, lärbart mönster för hemligheter mellan projekt. <strong>Fintech-nära team</strong> lutar sig mot verifieringsstegen och avsnitten med ”fallgropar” för att minska operativ risk när credentials roteras eller behörigheter ändras.</p>

</div>

<div class="faq-item">
<span class="question">Varför ger enkla AI-promptar för deployment av hemligheter svaga resultat?</span>

<p class="answer">En typisk prompt som ”Skriv en plan för att hantera env vars säkert” misslyckas eftersom den: saknar plattformsspecifika steg för Vercel och Supabase, ger ingen uppdelning mellan lokal vs staging vs produktion, ignorerar gränsen för körning på klient vs server i moderna ramverk, producerar generiska råd i stället för kopiera/klistra-in-konfiguration och kodmönster, och missar verifiering och felsökning så att du inte kan bekräfta med säkerhet att du stoppade exponeringen. Du landar i goda intentioner och noll implementationsdetaljer. Det glappet är där läckor fortsätter att hända.</p>

</div>

<div class="faq-item">
<span class="question">Kan jag anpassa den här deploy secrets prompten för min specifika situation?</span>

<p class="answer">Ja. Prompten är utformad för att ställa riktade frågor när detaljer i din stack är oklara och sedan fortsätta med säkra standardval som är tydligt märkta som antaganden. För att anpassa, ange ditt ramverk/runtime (till exempel Next.js route handlers vs server actions), hur många Vercel-miljöer du använder och vilka Supabase-nycklar du är beroende av i dag (anon key, service role key, webhook secrets). En bra uppföljning är: ”Anpassa nu planen till min repo-struktur och identifiera exakt vilka filer som måste vara enbart på servern.” Du kan också be om en ”migrationsplan” om du går från en stökig .env-hantering till en tydlig uppdelning.</p>

</div>

<div class="faq-item">
<span class="question">Vilka är de vanligaste misstagen när man använder den här deploy secrets prompten?</span>

<p class="answer">Det största misstaget är att inte beskriva din körningsgräns tydligt — i stället för ”Next.js-app på Vercel”, säg ”Next.js på Vercel med server actions och klientkomponenter; hemligheter får aldrig refereras från klientkomponenter.” Andra vanliga fel: att behandla staging och produktion som samma miljö (dåligt: ”ett Supabase-projekt”, bättre: ”separata Supabase-projekt för staging och produktion med olika nycklar”), att inte specificera vad som faktiskt läcker just nu (dåligt: ”hemligheter är exponerade”, bättre: ”service role key dök upp i en klientbundle eller committades till git”), och att hoppa över verifiering (dåligt: ”lägg in env vars”, bättre: ”lägg till build- och runtime-kontroller som bekräftar att hemligheter saknas i webbläsar-output och finns tillgängliga på servern”). Prompten fungerar bäst när du namnger feltypen och vilka miljöer som är inblandade.</p>

</div>

<div class="faq-item">
<span class="question">Vem ska INTE använda den här deploy secrets prompten?</span>

<p class="answer">Den här prompten är inte optimal för team som vill ha en rent teoretisk översikt av säkerhet, eller för organisationer som behöver en komplett, företagsövergripande hotmodell bortom hantering av hemligheter och miljövariabler. Den passar heller inte om du inte använder Vercel och Supabase (du kan anpassa den, men då tappar du värdet av plattformsspecifik setup). Om du bara behöver en snabb .env-mall utan verifiering eller felsökning kan en enkel checklista vara snabbare. För riktiga deployments är dock den extra strukturen poängen.</p>

</div>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Vilka roller har mest nytta av den här deploy secrets prompt AI-prompten?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "DevSecOps-ingenjörer använder den för att standardisera hur hemligheter skapas, lagras och verifieras mellan miljöer utan att skriva en specialanpassad dokumentation varje sprint. Fullstackingenjörer (Next.js på Vercel) förlitar sig på den för att undvika att av misstag importera serverkod i klientkomponenter och exponera env-variabler via webbläsar-bundles. Startup-CTO:er använder den när de behöver snabba, friktionsfria skyddsräcken som håller uppe leveranstakten. Implementationskonsulter använder den vid överlämningar så att upplägget blir reproducerbart för kundens team i stället för att leva i Slack-meddelanden."
      }
    },
    {
      "@type": "Question",
      "name": "Vilka branscher får mest värde av den här deploy secrets prompt AI-prompten?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "SaaS-bolag får omedelbart värde eftersom de ofta kör Next.js på Vercel med Supabase och hanterar autentisering, faktureringswebhooks och deployments i flera miljöer som förstärker misstag. E-handel och prenumerationsvarumärken gynnas när butiksintegrationer, e-postleverantörer och betalprocessorer kräver nycklar som inte får läcka till klientsideskod eller publika repo:n. Byråer använder den när de hanterar flera kunddeployments och behöver ett konsekvent, lärbart mönster för hemligheter mellan projekt. Fintech-nära team lutar sig mot verifieringsstegen och avsnitten med ”fallgropar” för att minska operativ risk när credentials roteras eller behörigheter ändras."
      }
    },
    {
      "@type": "Question",
      "name": "Varför ger enkla AI-promptar för deployment av hemligheter svaga resultat?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "En typisk prompt som ”Skriv en plan för att hantera env vars säkert” misslyckas eftersom den: saknar plattformsspecifika steg för Vercel och Supabase, ger ingen uppdelning mellan lokal vs staging vs produktion, ignorerar gränsen för körning på klient vs server i moderna ramverk, producerar generiska råd i stället för kopiera/klistra-in-konfiguration och kodmönster, och missar verifiering och felsökning så att du inte kan bekräfta med säkerhet att du stoppade exponeringen. Du landar i goda intentioner och noll implementationsdetaljer. Det glappet är där läckor fortsätter att hända."
      }
    },
    {
      "@type": "Question",
      "name": "Kan jag anpassa den här deploy secrets prompten för min specifika situation?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Ja. Prompten är utformad för att ställa riktade frågor när detaljer i din stack är oklara och sedan fortsätta med säkra standardval som är tydligt märkta som antaganden. För att anpassa, ange ditt ramverk/runtime (till exempel Next.js route handlers vs server actions), hur många Vercel-miljöer du använder och vilka Supabase-nycklar du är beroende av i dag (anon key, service role key, webhook secrets). En bra uppföljning är: ”Anpassa nu planen till min repo-struktur och identifiera exakt vilka filer som måste vara enbart på servern.” Du kan också be om en ”migrationsplan” om du går från en stökig .env-hantering till en tydlig uppdelning."
      }
    },
    {
      "@type": "Question",
      "name": "Vilka är de vanligaste misstagen när man använder den här deploy secrets prompten?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Det största misstaget är att inte beskriva din körningsgräns tydligt — i stället för ”Next.js-app på Vercel”, säg ”Next.js på Vercel med server actions och klientkomponenter; hemligheter får aldrig refereras från klientkomponenter.” Andra vanliga fel: att behandla staging och produktion som samma miljö (dåligt: ”ett Supabase-projekt”, bättre: ”separata Supabase-projekt för staging och produktion med olika nycklar”), att inte specificera vad som faktiskt läcker just nu (dåligt: ”hemligheter är exponerade”, bättre: ”service role key dök upp i en klientbundle eller committades till git”), och att hoppa över verifiering (dåligt: ”lägg in env vars”, bättre: ”lägg till build- och runtime-kontroller som bekräftar att hemligheter saknas i webbläsar-output och finns tillgängliga på servern”). Prompten fungerar bäst när du namnger feltypen och vilka miljöer som är inblandade."
      }
    },
    {
      "@type": "Question",
      "name": "Vem ska INTE använda den här deploy secrets prompten?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Den här prompten är inte optimal för team som vill ha en rent teoretisk översikt av säkerhet, eller för organisationer som behöver en komplett, företagsövergripande hotmodell bortom hantering av hemligheter och miljövariabler. Den passar heller inte om du inte använder Vercel och Supabase (du kan anpassa den, men då tappar du värdet av plattformsspecifik setup). Om du bara behöver en snabb .env-mall utan verifiering eller felsökning kan en enkel checklista vara snabbare. För riktiga deployments är dock den extra strukturen poängen."
      }
    }
  ]
}
</script>
</div>

<div class="closing-section">

<p>Hantering av hemligheter ska inte vara stammens tysta kunskap eller ett skakigt gäng skärmdumpar i ett dokument. Klistra in prompten i ditt AI-verktyg, följ stegen, kör verifieringskontrollerna och lås ner ditt Vercel + Supabase-flöde en gång för alla.</p>

</div><p>&lt;p&gt;The post <a rel="nofollow" href="https://nodenordic.se/prompts/distribuera-hemligheter-pa-vercel-och-supabase/">Distribuera hemligheter på Vercel och Supabase</a> first appeared on <a rel="nofollow" href="https://nodenordic.se">Node Nordic - AI Konsult för företag</a>.&lt;/p&gt;</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Bygg en formelsäker Sheets-synk med prompten</title>
		<link>https://nodenordic.se/prompts/bygg-en-formelsaker-sheets-synk-med-prompten/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=bygg-en-formelsaker-sheets-synk-med-prompten</link>
		
		<dc:creator><![CDATA[Rickard Andersson]]></dc:creator>
		<pubDate>Fri, 23 Jan 2026 02:36:51 +0000</pubDate>
				<category><![CDATA[prompts]]></category>
		<guid isPermaLink="false">https://nodenordic.se/?p=5001586</guid>

					<description><![CDATA[<p>Sheets-uppdateringar skapar fel. Prompten bygger en kvotsäker, idempotent pipeline med formelskydd, revisionsloggar och larm.</p>
<p>&lt;p&gt;The post <a rel="nofollow" href="https://nodenordic.se/prompts/bygg-en-formelsaker-sheets-synk-med-prompten/">Bygg en formelsäker Sheets-synk med prompten</a> first appeared on <a rel="nofollow" href="https://nodenordic.se">Node Nordic - AI Konsult för företag</a>.&lt;/p&gt;</p>
]]></description>
										<content:encoded><![CDATA[<!-- FOCUS_KEYWORD: Sheets sync AI prompt -->

<div class="hook-introduction">

<p>Sheets-synkar fungerar oftast tills de inte gör det. En dag skriver din automatisering över ett formelområde, duplicerar rader efter ett omförsök, eller blir strypt mitt i en skrivning och lämnar en halvuppdaterad flik som ingen litar på.</p>



<p>Den här <strong>Sheets sync AI-prompten</strong> är byggd för <strong>RevOps-ansvariga</strong> som behöver felfri veckorapportering i Sheets utan att sabba CFO:ns formler, <strong>dataanalytiker</strong> som publicerar modellerade datamängder till intressentvänliga kalkylark, och <strong>automationskonsulter</strong> som måste leverera en pålitlig “hands-off”-synk till kunder med verkliga avbrott och samtidiga redaktörer. Resultatet är en komplett automationsblueprint plus körbara kodmönster för en kvotsäker, idempotent publiceringspipeline med formelskydd, granskningsloggar och aviseringar.</p>

</div>

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

<h2 class="wp-block-heading">Vad gör den här AI-prompten och när ska du använda den?</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">Vad den här prompten gör</th>
      <th scope="col">När du ska använda den här prompten</th>
      <th scope="col">Det här får du</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <ul class="automation-list">
          <li>Den kartlägger en staging → transform → publish-pipeline där Sheets förblir presentationslagret, inte modelleringslagret.</li>
          <li>Den designar en idempotent skrivstrategi som förhindrar dubbletter vid omförsök och undviker partiella uppdateringar vid timeouts.</li>
          <li>Den definierar en formelsäker plan för områden så att värden bara hamnar i avsedda “input”-ytor medan formler och formatering förblir intakta.</li>
          <li>Den bygger in kvotmedveten batchning, exponentiell backoff och minimering av anrop i linje med Google Sheets API-gränser.</li>
          <li>Den specificerar operativa skyddsräcken: granskningsloggning, felklassificering, aviseringar och secrets-säker konfiguration via miljövariabler.</li>
       </ul>
      </td>
      <td>
        <ul class="results-list">
          <li>Din nuvarande synk raderar ibland formler, slår sönder pivoter eller gör att intressenter “fixar manuellt” efter varje körning.</li>
          <li>Du ser dubbletter efter nätverksstörningar eftersom jobbet spelar upp skrivningar igen utan en hållbar idempotensnyckel.</li>
          <li>Du behöver publicera kuraterad data till Sheets för ledningsinsyn, men källan är stökig och behöver ett modellerat lager först.</li>
          <li>Kvotbegränsningar tvingar dig till långsamma uppdateringar cell för cell, och flödet är nu både dyrt och skört.</li>
          <li>Flera personer redigerar arket medan automatiseringen körs, och du behöver förutsägbara utfall under samtidighet.</li>
        </ul>
      </td>
       <td>
         <ul class="deliverables-list">
           <li>Ett komplett pipelineupplägg beskrivet i ord, inklusive ansvar för staging, transformering och publicering.</li>
           <li>En publiceringsplan som separerar formelområden från skrivområden, med tydliga blad-/flikkonventioner som du kan kopiera.</li>
           <li>Körbara kodmönster för batchade skrivningar, retry/backoff och idempotenta upserts (inte “spray writes”).</li>
           <li>En design för granskningslogg och körjournal (run ledger), inklusive vad som ska loggas per batch och hur du spårar en dålig synk.</li>
           <li>En aviseringschecklista med tröskelvärden (kvotfel, upprepade omförsök, avvikelse i radantal) och rekommenderade åtgärder.</li>
         </ul>
       </td>
    </tr>
  </tbody>
</table>

</div>

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

<h2 class="wp-block-heading">Hela AI-prompten: blueprint för formelsäker Sheets-synk</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">
                                    Steg 1: Anpassa prompten med din information
                            </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>Återställ</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>Anpassa och kopiera hela prompten</span>
                </button>
            </div>
        </div>

        <!-- Customize the Prompt Section -->
                    <div class="prompt-customize-section">
                <span class="customize-title">Anpassa prompten</span>
                <p class="customize-subtitle">Fyll i fälten nedan för att anpassa prompten efter dina behov.</p>
                <table class="customize-table">
                    <thead>
                        <tr>
                            <th>Variabel</th>
                            <th>Vad du ska ange</th>
                            <th>Anpassa prompten</th>
                        </tr>
                    </thead>
                    <tbody>
                                                    <tr>
                                <td class="var-name"><code>[MALGRUPP]</code></td>
                                <td class="var-desc">
                                    Beskriv den primära gruppen användare eller intressenter som kommer att dra nytta av automationsmallen, inklusive deras roller, behov och utmaningar.                                    <div class="var-example">Till exempel: "Dataanalytiker och driftteam på medelstora SaaS-bolag som behöver tillförlitliga datapipelines för rapportering utan att riskera att formler i Google Sheets påverkas."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[MALGRUPP]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[KALKYLARKS_URL]</code></td>
                                <td class="var-desc">
                                    Ange den fullständiga URL:en till Google-kalkylarket där data ska publiceras. Säkerställ att arket är åtkomligt via vald autentiseringsmetod.                                    <div class="var-example">Till exempel: "https://docs.google.com/spreadsheets/d/1ABcDefGhIJkLmNOPQRStUVwxYZ/edit"</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[KALKYLARKS_URL]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[AUTENTISERINGSMETOD]</code></td>
                                <td class="var-desc">
                                    Ange autentiseringsmetod för åtkomst till Google Sheets, till exempel &quot;Service Account&quot; eller &quot;OAuth&quot;, och inkludera relevanta detaljer för konfigurering.                                    <div class="var-example">Till exempel: "Service Account med JSON-nyckelfil lagrad säkert i en miljövariabel."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[AUTENTISERINGSMETOD]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[DATAKALLA]</code></td>
                                <td class="var-desc">
                                    Identifiera varifrån data som ska bearbetas och publiceras kommer, inklusive typ av system eller databas och hur åtkomst sker.                                    <div class="var-example">Till exempel: "PostgreSQL-databas med rensad och modellerad försäljningsdata, nås via en säker anslutningssträng."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[DATAKALLA]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[UPPDATERINGSSCHEMA]</code></td>
                                <td class="var-desc">
                                    Definiera hur ofta och när automatiseringen ska köras, inklusive tidszon om det är relevant.                                    <div class="var-example">Till exempel: "Varje timme, 15 minuter över hel timme, tidszon UTC."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[UPPDATERINGSSCHEMA]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[NOTIFIERINGSENDPOINT]</code></td>
                                <td class="var-desc">
                                    Ange endpoint eller metod för att skicka notifieringar om automatiseringens status, till exempel en webhook-URL eller e-postadress.                                    <div class="var-example">Till exempel: "Slack-webhook-URL för kanalen #data-pipeline-alerts."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[NOTIFIERINGSENDPOINT]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[BRANSCH]</code></td>
                                <td class="var-desc">
                                    Ange vilken bransch eller sektor som automationsmallen är avsedd för, så att rekommendationer och exempel kan anpassas.                                    <div class="var-example">Till exempel: "E-handelsföretag som hanterar lager och försäljningsrapporter."</div>
                                </td>
                                <td class="var-input">
                                                                            <input
                                            type="text"
                                            class="customize-input"
                                            data-placeholder="[BRANSCH]"
                                            placeholder="Ange ditt värde här..." />
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[VARUMARKESTON]</code></td>
                                <td class="var-desc">
                                    Beskriv den ton och stil som ska återspeglas i kommunikationen eller dokumentationen för automationsmallen.                                    <div class="var-example">Till exempel: "Professionell och detaljfokuserad, med fokus på tydlighet och tillförlitlighet."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[VARUMARKESTON]"
                                            placeholder="Ange ditt värde här..."
                                            rows="3"></textarea>
                                                                    </td>
                            </tr>
                                                    <tr>
                                <td class="var-name"><code>[KONTEXT]</code></td>
                                <td class="var-desc">
                                    Ange eventuell extra bakgrund eller situationsspecifika detaljer som kan påverka utformning eller implementering av automationsmallen.                                    <div class="var-example">Till exempel: "Automatiseringen måste stödja samtidiga datauppdateringar från flera teammedlemmar och hantera import av stora datamängder under försäljningstoppar."</div>
                                </td>
                                <td class="var-input">
                                                                            <textarea
                                            class="customize-input"
                                            data-placeholder="[KONTEXT]"
                                            placeholder="Ange ditt värde här..."
                                            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">Anpassa prompten nu</span>

                </button>
            </div>
        
        <!-- Full Prompt Code Header -->
                    <div class="prompt-code-header">
                <span class="prompt-code-title">
                    Steg 2: Kopiera prompten
                </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>Återställ</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>Kopiera hela prompten</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">MÅL</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">BEGRÄNSNINGAR</div><div class="prompt-header-visible subheader">Leveransstandarder</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">Vad detta INTE är</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">INDATA</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">SPECIFIKATION FÖR UTDATA</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 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">KVALITETSKONTROLLER</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;">
                ## MÅL
Designa en robust automationsblueprint (inklusive körbar kod) som kontinuerligt flyttar rensad, modellerad data från ett källsystem till Google Sheets **som en presentationsyta**, samtidigt som du förhindrar att formler skadas, undviker partiella skrivningar och förblir stabil under kvotbegränsning, instabila nätverk och samtidiga redigeringar.

## PERSONA
Agera som en senior automationsarkitekt som tidigare arbetat med prestanda i Google Sheets och senare byggt data pipelines i enterprise-klass. Du är försiktig som standard: du utgår från att tokens går ut vid sämsta möjliga tillfälle, att användare kommer redigera under skrivningar, och att retries kan duplicera operationer om det inte är korrekt konstruerat. Du tillämpar också Kimball-inspirerat dimensionellt tänkande så att Sheets ligger nedströms modelleringen, inte som modellager i sig.

## BEGRÄNSNINGAR
### Leveransstandarder
- Behandla Google Sheets som det sista publiceringslagret, inte ett datalager.
- Bevara formler och formatering avsiktligt; “spray-skriv” aldrig över blandade områden med formler/värden.
- Föredra batchoperationer och minimering av requests; förutse kvottak (t.ex. ~100 requests/100 sekunder) och implementera backoff.
- Varje skrivväg måste vara **idempotent** och skydda mot partiella uppdateringar.
- Exponera inte hemligheter: inga credentials i loggar/utdata; använd miljövariabler och least-privilege-behörigheter.

### Vad detta INTE är
- Inte en rekommendation att använda Sheets som en operativ databas.
- Inte ett fullständigt design-dokument för ett data warehouse utöver vad som krävs för att stagea/transformera/publicera.
- Inte en UI/BI-dashboard-uppbyggnad; endast automationen för att fylla Sheets pålitligt.
- Inte vägledning för att kringgå Googles begränsningar eller bryta mot API-villkor.

## PROCESS
1. **Föranalys (krävs):** Återge din förståelse av användarens setup och mål, och lista antaganden och oklarheter som kan blockera implementationen.
2. **Arkitekturplan:** Skissa en pipeline som inkluderar staging, transformering och publicering i linje med dimensionell modellering (fakta/dimensioner där lämpligt), med Sheets endast i publiceringssteget.
3. **Autentiseringsstrategi:** Ge både service-account- och OAuth-vägar (med refresh-hantering), och ange tydligt när respektive är lämplig.
4. **Sheets-säkerhetsstrategi:** Förklara hur du ska:
   - identifiera rätt kalkylark + worksheet(flik),
   - definiera skrivintervall,
   - upptäcka och skydda formelceller,
   - hantera samtidiga redigeringar.
5. **API-resiliens:** Specificera batching, exponentiell backoff med jitter och request-validering. Inkludera read-after-write-verifiering.
6. **Integritet + återhämtning:** Använd en idempotency key och ett atomic-ish uppdateringsmönster (t.ex. skriv till en staging-flik/ett staging-intervall och byt/sätt i drift) så att misslyckade körningar inte lämnar halvskrivna tillstånd.
7. **Revision + rollback:** Implementera strukturerad loggning av vad som ändrades, när och av vilken körning; inkludera en praktisk rollback-metod.
8. **Schemaläggning + larm:** Ge tidszonsmedveten schemaläggning och felnotifiering inom det kräva tidsfönstret, med handlingsbara feldetaljer.
9. **Edge cases:** Om någon input saknas/är tvetydig, ställ riktade frågor och ge säkra standardval som inte korrumperar arket.

## INDATA
- **Primärt användarsegment:** [MALGRUPP]
- **Kalkylarks-URL:** [KALKYLARKS_URL]
- **Detaljer för autentiseringsmetod:** [AUTENTISERINGSMETOD]
- **Beskrivning/lokator för datakälla:** [DATAKALLA]
- **Uppdateringsschema:** [UPPDATERINGSSCHEMA]
- **Notifikationsdestination:** [NOTIFIERINGSENDPOINT]
- **Bransch (valfritt):** [BRANSCH]
- **Varumärkeston (valfritt):** [VARUMARKESTON]
- **Extra kontext (valfritt):** [KONTEXT]

## SPECIFIKATION FÖR UTDATA
Producera en enda, självbärande lösning med dessa avsnitt (i denna ordning):

1. **Uppgiftsförståelse &amp; antaganden**
   - {Understanding Summary}
   - {Key Risks}
   - {Open Questions}

2. **Systemdesign**
   - {High Level Architecture}
   - {Kimball-Aligned Data Flow} (staging → transform → publish)
   - {Idempotency &amp; Atomic Update Approach}

3. **Körbar implementation (med syntaxmarkerade kodblock)**
   - {Configuration &amp; Secrets Handling}
   - {Authentication Module} (service account + OAuth refresh)
   - {Extract &amp; Transform Module}
   - {Sheets Publish Module}
     - strategi för att bevara formler
     - intervallvalidering
     - batching
     - exponentiell backoff + jitter
     - read-after-write-verifiering
     - samtidighetsmedvetet beteende
   - {Audit Log &amp; Rollback Utilities}
   - {Monitoring &amp; Notifications}

4. **Driftsättnings-runbook**
   - {Step By Step Setup}
   - {Permissions &amp; Least Privilege Notes}
   - {Scheduling Setup} (cron-liknande, tidszonsmedvetet)
   - {How To Rotate Credentials Safely}

5. **Användning + validering**
   - {Example Run Commands}
   - {Testing Scenarios} (kvotbegränsning, token går ut mitt i körning, nätverksavbrott, samtidiga redigeringar, schemamismatch)
   - {Expected Outputs}

Koden måste innehålla inline-kommentarer som förklarar kritiska val och vilka felmoder de förhindrar.

## KVALITETSKONTROLLER
På slutet, inkludera en kort verifieringslista med 4–5 punkter som bekräftar:
- {Formula Safety Confirmed} (inga överskrivningar av formelceller/-intervall)
- {Idempotent Writes Confirmed} (omkörningar duplicerar eller korrumperar inte)
- {Quota &amp; Retry Policy Confirmed} (backoff + batching implementerat)
- {Secrets Safety Confirmed} (inga credentials loggas; least privilege)
- {Verification &amp; Observability Confirmed} (read-after-write, revisionsloggar, larm)            </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">Kopiera hela prompten</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 span {
        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 !important;
    }


    .prompt-cta-copy span {
        background: #3a3a3a;
        color: #fff !important;
    }


    .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 !important;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .copy-customized-btn span {
        color: #fff !important
    }

    .copy-customized-text span {
        color: #fff !important
    }

    .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;
        color: #fff !important;

    }

    .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 = 'Kopierad!';
            });

            setTimeout(() => {
                copyButtons.forEach(btn => {
                    btn.classList.remove('copied');
                    const textSpan = btn.querySelector('span');
                    if (textSpan) textSpan.textContent = 'Kopiera hela prompten';
                });
            }, 2000);
        }).catch(err => {
            console.error('Failed to copy:', err);
        });
    }

    // Store original prompt for customization
    const originalPrompt = "## M\u00c5L\r\nDesigna en robust automationsblueprint (inklusive k\u00f6rbar kod) som kontinuerligt flyttar rensad, modellerad data fr\u00e5n ett k\u00e4llsystem till Google Sheets **som en presentationsyta**, samtidigt som du f\u00f6rhindrar att formler skadas, undviker partiella skrivningar och f\u00f6rblir stabil under kvotbegr\u00e4nsning, instabila n\u00e4tverk och samtidiga redigeringar.\r\n\r\n## PERSONA\r\nAgera som en senior automationsarkitekt som tidigare arbetat med prestanda i Google Sheets och senare byggt data pipelines i enterprise-klass. Du \u00e4r f\u00f6rsiktig som standard: du utg\u00e5r fr\u00e5n att tokens g\u00e5r ut vid s\u00e4msta m\u00f6jliga tillf\u00e4lle, att anv\u00e4ndare kommer redigera under skrivningar, och att retries kan duplicera operationer om det inte \u00e4r korrekt konstruerat. Du till\u00e4mpar ocks\u00e5 Kimball-inspirerat dimensionellt t\u00e4nkande s\u00e5 att Sheets ligger nedstr\u00f6ms modelleringen, inte som modellager i sig.\r\n\r\n## BEGR\u00c4NSNINGAR\r\n### Leveransstandarder\r\n- Behandla Google Sheets som det sista publiceringslagret, inte ett datalager.\r\n- Bevara formler och formatering avsiktligt; \u201cspray-skriv\u201d aldrig \u00f6ver blandade omr\u00e5den med formler\/v\u00e4rden.\r\n- F\u00f6redra batchoperationer och minimering av requests; f\u00f6rutse kvottak (t.ex. ~100 requests\/100 sekunder) och implementera backoff.\r\n- Varje skrivv\u00e4g m\u00e5ste vara **idempotent** och skydda mot partiella uppdateringar.\r\n- Exponera inte hemligheter: inga credentials i loggar\/utdata; anv\u00e4nd milj\u00f6variabler och least-privilege-beh\u00f6righeter.\r\n\r\n### Vad detta INTE \u00e4r\r\n- Inte en rekommendation att anv\u00e4nda Sheets som en operativ databas.\r\n- Inte ett fullst\u00e4ndigt design-dokument f\u00f6r ett data warehouse ut\u00f6ver vad som kr\u00e4vs f\u00f6r att stagea\/transformera\/publicera.\r\n- Inte en UI\/BI-dashboard-uppbyggnad; endast automationen f\u00f6r att fylla Sheets p\u00e5litligt.\r\n- Inte v\u00e4gledning f\u00f6r att kringg\u00e5 Googles begr\u00e4nsningar eller bryta mot API-villkor.\r\n\r\n## PROCESS\r\n1. **F\u00f6ranalys (kr\u00e4vs):** \u00c5terge din f\u00f6rst\u00e5else av anv\u00e4ndarens setup och m\u00e5l, och lista antaganden och oklarheter som kan blockera implementationen.\r\n2. **Arkitekturplan:** Skissa en pipeline som inkluderar staging, transformering och publicering i linje med dimensionell modellering (fakta\/dimensioner d\u00e4r l\u00e4mpligt), med Sheets endast i publiceringssteget.\r\n3. **Autentiseringsstrategi:** Ge b\u00e5de service-account- och OAuth-v\u00e4gar (med refresh-hantering), och ange tydligt n\u00e4r respektive \u00e4r l\u00e4mplig.\r\n4. **Sheets-s\u00e4kerhetsstrategi:** F\u00f6rklara hur du ska:\r\n   - identifiera r\u00e4tt kalkylark + worksheet(flik),\r\n   - definiera skrivintervall,\r\n   - uppt\u00e4cka och skydda formelceller,\r\n   - hantera samtidiga redigeringar.\r\n5. **API-resiliens:** Specificera batching, exponentiell backoff med jitter och request-validering. Inkludera read-after-write-verifiering.\r\n6. **Integritet + \u00e5terh\u00e4mtning:** Anv\u00e4nd en idempotency key och ett atomic-ish uppdateringsm\u00f6nster (t.ex. skriv till en staging-flik\/ett staging-intervall och byt\/s\u00e4tt i drift) s\u00e5 att misslyckade k\u00f6rningar inte l\u00e4mnar halvskrivna tillst\u00e5nd.\r\n7. **Revision + rollback:** Implementera strukturerad loggning av vad som \u00e4ndrades, n\u00e4r och av vilken k\u00f6rning; inkludera en praktisk rollback-metod.\r\n8. **Schemal\u00e4ggning + larm:** Ge tidszonsmedveten schemal\u00e4ggning och felnotifiering inom det kr\u00e4va tidsf\u00f6nstret, med handlingsbara feldetaljer.\r\n9. **Edge cases:** Om n\u00e5gon input saknas\/\u00e4r tvetydig, st\u00e4ll riktade fr\u00e5gor och ge s\u00e4kra standardval som inte korrumperar arket.\r\n\r\n## INDATA\r\n- **Prim\u00e4rt anv\u00e4ndarsegment:** [MALGRUPP]\r\n- **Kalkylarks-URL:** [KALKYLARKS_URL]\r\n- **Detaljer f\u00f6r autentiseringsmetod:** [AUTENTISERINGSMETOD]\r\n- **Beskrivning\/lokator f\u00f6r datak\u00e4lla:** [DATAKALLA]\r\n- **Uppdateringsschema:** [UPPDATERINGSSCHEMA]\r\n- **Notifikationsdestination:** [NOTIFIERINGSENDPOINT]\r\n- **Bransch (valfritt):** [BRANSCH]\r\n- **Varum\u00e4rkeston (valfritt):** [VARUMARKESTON]\r\n- **Extra kontext (valfritt):** [KONTEXT]\r\n\r\n## SPECIFIKATION F\u00d6R UTDATA\r\nProducera en enda, sj\u00e4lvb\u00e4rande l\u00f6sning med dessa avsnitt (i denna ordning):\r\n\r\n1. **Uppgiftsf\u00f6rst\u00e5else & antaganden**\r\n   - {Understanding Summary}\r\n   - {Key Risks}\r\n   - {Open Questions}\r\n\r\n2. **Systemdesign**\r\n   - {High Level Architecture}\r\n   - {Kimball-Aligned Data Flow} (staging \u2192 transform \u2192 publish)\r\n   - {Idempotency & Atomic Update Approach}\r\n\r\n3. **K\u00f6rbar implementation (med syntaxmarkerade kodblock)**\r\n   - {Configuration & Secrets Handling}\r\n   - {Authentication Module} (service account + OAuth refresh)\r\n   - {Extract & Transform Module}\r\n   - {Sheets Publish Module}\r\n     - strategi f\u00f6r att bevara formler\r\n     - intervallvalidering\r\n     - batching\r\n     - exponentiell backoff + jitter\r\n     - read-after-write-verifiering\r\n     - samtidighetsmedvetet beteende\r\n   - {Audit Log & Rollback Utilities}\r\n   - {Monitoring & Notifications}\r\n\r\n4. **Drifts\u00e4ttnings-runbook**\r\n   - {Step By Step Setup}\r\n   - {Permissions & Least Privilege Notes}\r\n   - {Scheduling Setup} (cron-liknande, tidszonsmedvetet)\r\n   - {How To Rotate Credentials Safely}\r\n\r\n5. **Anv\u00e4ndning + validering**\r\n   - {Example Run Commands}\r\n   - {Testing Scenarios} (kvotbegr\u00e4nsning, token g\u00e5r ut mitt i k\u00f6rning, n\u00e4tverksavbrott, samtidiga redigeringar, schemamismatch)\r\n   - {Expected Outputs}\r\n\r\nKoden m\u00e5ste inneh\u00e5lla inline-kommentarer som f\u00f6rklarar kritiska val och vilka felmoder de f\u00f6rhindrar.\r\n\r\n## KVALITETSKONTROLLER\r\nP\u00e5 slutet, inkludera en kort verifieringslista med 4\u20135 punkter som bekr\u00e4ftar:\r\n- {Formula Safety Confirmed} (inga \u00f6verskrivningar av formelceller\/-intervall)\r\n- {Idempotent Writes Confirmed} (omk\u00f6rningar duplicerar eller korrumperar inte)\r\n- {Quota & Retry Policy Confirmed} (backoff + batching implementerat)\r\n- {Secrets Safety Confirmed} (inga credentials loggas; least privilege)\r\n- {Verification & Observability Confirmed} (read-after-write, revisionsloggar, larm)";
    const variables = ["[MALGRUPP]","[KALKYLARKS_URL]","[AUTENTISERINGSMETOD]","[DATAKALLA]","[UPPDATERINGSSCHEMA]","[NOTIFIERINGSENDPOINT]","[BRANSCH]","[VARUMARKESTON]","[KONTEXT]"];
    // 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 = 'Återställd!';
            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">Proffstips för bättre resultat från AI-prompten</h2>



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

<li><strong>Beskriv ditt ark som ett “kontrakt”, inte som en skärmdump.</strong> Berätta för modellen vad dina fliknamn är, vilka kolumner som är indata och vilka områden som aldrig får röras (till exempel: “Summary!A1:K40 är endast formler”). Om du kan, klistra in ett litet header-exempel som “A: account_id, B: account_name, C: mrr, D: last_invoice_date” så att publiceringsstrategin förblir exakt.</li>


<li><strong>Tvinga fram ett tidigt beslut om idempotensnyckel.</strong> Be om en konkret nyckel och var den lagras, eftersom det styr allt annat. Följ upp med: “Föreslå en idempotensnyckel för varje rad och ett schema för körjournal; anta att omförsök kan ske efter delvis slutförande.”</li>


<li><strong>Berätta vilken tolerans du har för latens kontra färskhet.</strong> Om ledningen vill ha nära realtid behöver du mindre batchar och stramare felhantering; veckorapportering kan använda större batchar med långsammare backoff. En bra uppföljning är: “Optimera för under 2 minuters körtid med 50k rader, men prioritera korrekthet före hastighet.”</li>


<li><strong>Iterera på felbilder, inte formatering.</strong> Efter första resultatet, fråga: “Lista nu de 10 vanligaste felscenarierna (kvotspikar, token-utgång, samtidiga redigeringar, partiella skrivningar) och visa exakt hur designen förhindrar eller upptäcker vart och ett.” Det brukar snabbt avslöja vad som saknas.</li>


<li><strong>Låt den generera en ‘säker publiceringschecklista’ som du kan operationalisera.</strong> Gör designen till något teamet kan köra varje gång: “Skapa en pre-flight-checklista (behörigheter, kontroller av arkets status), in-flight-kontroller (batchstorlekar, omförsök) och validering efter körning (radantal, checksumma) med godkänd/underkänd-kriterier.” Ärligt talat är det här pålitlighet oftast kommer ifrån.</li>

</div>

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

<h2 class="wp-block-heading">Relaterade prompter</h2>



<p>Om du standardiserar drift och rapportering hjälper de här relaterade promptarna dig att bygga planerna på “människosidan” som omger systemet du automatiserar.</p>



<p>Om du också behöver en strukturerad utrullningsplan som inkluderar faser, ägarskap och mätning (samma typ av disciplin som du skulle tillämpa på en stabil synk), använd <a href="https://nodenordic.se/prompts/skapa-en-stegvis-plan-for-arbetsplatsens-valmaende">Skapa en stegvis plan för arbetsplatsens välmående</a>. Den passar bra när du paketerar Sheets-publiceringsflödet i ett bredare internt program med tidslinjer och avstämningar.</p>



<p>För team som gör policy- och beteendeförändring parallellt med verktyg kan <a href="https://nodenordic.se/prompts/ai-prompt-skapa-en-plan-for-digitalt-valmaende">AI-prompt: skapa en plan för digitalt välmående</a> hjälpa till att definiera gränser, kommunikationsnormer och vägledning för införande. Det är användbart när din nya pipeline minskar manuellt arbete och du vill ha tydliga, konsekventa förväntningar på hur arket ska användas och redigeras.</p>



<p>När stress och churn uppstår eftersom rapporteringen är kaotisk (sena siffror, trasiga ark, ständiga “vem ändrade det här?”), kompletterar <a href="https://nodenordic.se/prompts/skapa-en-plan-for-stresslindring-pa-jobbet">Skapa en plan för stresslindring på jobbet</a> den här tekniska prompten. Den hjälper dig att rama in förändringen med praktiskt stöd så att teamet faktiskt får nytta av den förbättrade pålitligheten.</p>


<br>


<p>Snabbreferens:</p>



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

<li><a href="https://nodenordic.se/prompts/skapa-en-stegvis-plan-for-arbetsplatsens-valmaende">Skapa en stegvis plan för arbetsplatsens välmående</a>: Fasindelad utrullningsplan med milstolpar.</li>


<li><a href="https://nodenordic.se/prompts/ai-prompt-skapa-en-plan-for-digitalt-valmaende">AI-prompt: skapa en plan för digitalt välmående</a>: Digitala normer och hållbara arbetsflöden.</li>


<li><a href="https://nodenordic.se/prompts/diagnos-och-atgardsplan-for-arbetsplatsvalmaende">Diagnos och åtgärdsplan för arbetsplatsvälmående</a>: Diagnostisera problem och prioritera insatser.</li>


<li><a href="https://nodenordic.se/prompts/skapa-en-fardplan-for-tillhorighet-pa-jobbet-med-ai-prompt">Skapa en färdplan för tillhörighet på jobbet med AI-prompt</a>: Roadmap för tillhörighetsinitiativ och mätning.</li>


<li><a href="https://nodenordic.se/prompts/skapa-en-plan-for-stresslindring-pa-jobbet">Skapa en plan för stresslindring på jobbet</a>: Praktisk stressreduceringsplan för team.</li>

</ul>

</div>

<div class="faq-section">

<h2 class="wp-block-heading">Vanliga frågor</h2>


<div class="faq-item">
<span class="question">Vilka roller har mest nytta av den här Sheets sync AI-prompten?</span>

<p class="answer"><strong>RevOps-chefer</strong> använder den för att publicera tillförlitliga snapshots av pipeline och intäkter till Sheets utan att förstöra sammanställningar och formler för ledningen. <strong>Dataanalytiker</strong> förlitar sig på den för att hålla modelleringen uppströms (fakta/dimensioner) samtidigt som Sheets används som en strukturerad presentationsyta för intressenter. <strong>Marketing ops-specialister</strong> har nytta av den när kampanj- och lead-data måste landa i ett delat kalkylark som personer aktivt redigerar. <strong>Automationskonsulter</strong> använder den som en repeterbar blueprint för kundimplementationer där omförsök, kvoter och partiella skrivningar är risker man måste hantera.</p>

</div>

<div class="faq-item">
<span class="question">Vilka branscher får mest värde av den här Sheets sync AI-prompten?</span>

<p class="answer"><strong>SaaS-bolag</strong> får värde eftersom ARR-, churn- och pipelinevyer ofta ligger i Sheets för ledningen, men de underliggande källorna (Stripe, CRM, produktevent) kräver noggrann staging och disciplin vid publicering. <strong>E-handelsvarumärken</strong> använder den när SKU-prestanda, lagersnapshots eller marginalrapportering delas i kalkylark som innehåller sköra formler och uppslag. <strong>Professionella tjänsteföretag</strong> har nytta av den när beläggning, projektekonomi och leveransdashboards hanteras i Sheets och behöver pålitliga uppdateringar utan manuell efterstädning. <strong>Byråer</strong> använder den för kundnära rapportflikar där fel siffror eller trasiga formler omedelbart skapar förtroendeproblem.</p>

</div>

<div class="faq-item">
<span class="question">Varför ger grundläggande AI-prompter för att bygga en Google Sheets-synkpipeline svaga resultat?</span>

<p class="answer">En typisk prompt som &#8221;<em>Skriv ett skript som synkar min data till Google Sheets</em>&#8221; misslyckas eftersom den: saknar en formelsäker områdesstrategi (så den skriver över blandade formel-/värdeytor), saknar idempotensdesign (så omförsök duplicerar rader), ignorerar kvotrealiteter (så den gör pratiga uppdateringar per cell och blir strypt), producerar kod för “happy path” som inte kan återhämta sig från partiella skrivningar, och missar operativa skyddsräcken som körjournaler, granskningsloggar och larmtrösklar.</p>

</div>

<div class="faq-item">
<span class="question">Kan jag anpassa den här Sheets sync AI-prompten för min specifika situation?</span>

<p class="answer">Ja. Börja med att lägga in dina källsystem (till exempel: “HubSpot + Stripe”), din målarkstruktur (fliknamn och skyddade formelområden) och din publiceringstakt (varje timme, dagligen, veckovis). Anpassa sedan de tillförlitlighetskrav du faktiskt har, som “50k rader”, “flera redaktörer” eller “token upphör var 60:e minut”. En bra uppföljningsinstruktion är: “Skriv om blueprinten för min arklayout och inkludera en idempotensnyckel, ett schema för körjournal och en backoff-policy som håller sig under kvoten.”</p>

</div>

<div class="faq-item">
<span class="question">Vilka är de vanligaste misstagen när man använder den här Sheets sync AI-prompten?</span>

<p class="answer">Det största misstaget är att lämna målområdena vaga—i stället för “uppdatera dashboard-fliken”, specificera “skriv bara värden till Data!A2:H, bevara formler i Summary!A1:K40.” Ett annat vanligt fel är att ignorera samtidighet; säg inte “anta att ingen redigerar arket”, säg “anta att 3 redaktörer kan ändra filter och anteckningar under publicering.” Många glömmer också kvoter och batchstorlekar: ersätt “skriv rad för rad” med “batcha uppdateringar i block om 500–2 000 rader med exponentiell backoff vid 429/503.” Till sist hoppar många över validering; acceptera inte “logga lyckat”, be om kontroller efter körning som avvikelse i radantal, checksummejämförelser och en körjournalpost per batch.</p>

</div>

<div class="faq-item">
<span class="question">Vem ska INTE använda den här Sheets sync AI-prompten?</span>

<p class="answer">Den här prompten är inte optimal för engångsexporter där du aldrig kommer köra jobbet igen, eller för team som faktiskt behöver en operativ databas snarare än ett publiceringslager. Den är också ett dåligt val om du inte har klargjort vad arket ska representera (förvirring kring “source of truth” kommer bestå även med perfekt synkning). Om det är din situation: börja med datadefinitioner och ägarskap först, och gå tillbaka till automatisering när arkkontraktet är stabilt.</p>

</div>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Vilka roller har mest nytta av den här Sheets sync AI-prompten?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "RevOps-chefer använder den för att publicera tillförlitliga snapshots av pipeline och intäkter till Sheets utan att förstöra sammanställningar och formler för ledningen. Dataanalytiker förlitar sig på den för att hålla modelleringen uppströms (fakta/dimensioner) samtidigt som Sheets används som en strukturerad presentationsyta för intressenter. Marketing ops-specialister har nytta av den när kampanj- och lead-data måste landa i ett delat kalkylark som personer aktivt redigerar. Automationskonsulter använder den som en repeterbar blueprint för kundimplementationer där omförsök, kvoter och partiella skrivningar är risker man måste hantera."
      }
    },
    {
      "@type": "Question",
      "name": "Vilka branscher får mest värde av den här Sheets sync AI-prompten?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "SaaS-bolag får värde eftersom ARR-, churn- och pipelinevyer ofta ligger i Sheets för ledningen, men de underliggande källorna (Stripe, CRM, produktevent) kräver noggrann staging och disciplin vid publicering. E-handelsvarumärken använder den när SKU-prestanda, lagersnapshots eller marginalrapportering delas i kalkylark som innehåller sköra formler och uppslag. Professionella tjänsteföretag har nytta av den när beläggning, projektekonomi och leveransdashboards hanteras i Sheets och behöver pålitliga uppdateringar utan manuell efterstädning. Byråer använder den för kundnära rapportflikar där fel siffror eller trasiga formler omedelbart skapar förtroendeproblem."
      }
    },
    {
      "@type": "Question",
      "name": "Varför ger grundläggande AI-prompter för att bygga en Google Sheets-synkpipeline svaga resultat?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "En typisk prompt som \"Skriv ett skript som synkar min data till Google Sheets\" misslyckas eftersom den: saknar en formelsäker områdesstrategi (så den skriver över blandade formel-/värdeytor), saknar idempotensdesign (så omförsök duplicerar rader), ignorerar kvotrealiteter (så den gör pratiga uppdateringar per cell och blir strypt), producerar kod för “happy path” som inte kan återhämta sig från partiella skrivningar, och missar operativa skyddsräcken som körjournaler, granskningsloggar och larmtrösklar."
      }
    },
    {
      "@type": "Question",
      "name": "Kan jag anpassa den här Sheets sync AI-prompten för min specifika situation?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Ja. Börja med att lägga in dina källsystem (till exempel: “HubSpot + Stripe”), din målarkstruktur (fliknamn och skyddade formelområden) och din publiceringstakt (varje timme, dagligen, veckovis). Anpassa sedan de tillförlitlighetskrav du faktiskt har, som “50k rader”, “flera redaktörer” eller “token upphör var 60:e minut”. En bra uppföljningsinstruktion är: “Skriv om blueprinten för min arklayout och inkludera en idempotensnyckel, ett schema för körjournal och en backoff-policy som håller sig under kvoten.”"
      }
    },
    {
      "@type": "Question",
      "name": "Vilka är de vanligaste misstagen när man använder den här Sheets sync AI-prompten?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Det största misstaget är att lämna målområdena vaga—i stället för “uppdatera dashboard-fliken”, specificera “skriv bara värden till Data!A2:H, bevara formler i Summary!A1:K40.” Ett annat vanligt fel är att ignorera samtidighet; säg inte “anta att ingen redigerar arket”, säg “anta att 3 redaktörer kan ändra filter och anteckningar under publicering.” Många glömmer också kvoter och batchstorlekar: ersätt “skriv rad för rad” med “batcha uppdateringar i block om 500–2 000 rader med exponentiell backoff vid 429/503.” Till sist hoppar många över validering; acceptera inte “logga lyckat”, be om kontroller efter körning som avvikelse i radantal, checksummejämförelser och en körjournalpost per batch."
      }
    },
    {
      "@type": "Question",
      "name": "Vem ska INTE använda den här Sheets sync AI-prompten?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Den här prompten är inte optimal för engångsexporter där du aldrig kommer köra jobbet igen, eller för team som faktiskt behöver en operativ databas snarare än ett publiceringslager. Den är också ett dåligt val om du inte har klargjort vad arket ska representera (förvirring kring “source of truth” kommer bestå även med perfekt synkning). Om det är din situation: börja med datadefinitioner och ägarskap först, och gå tillbaka till automatisering när arkkontraktet är stabilt."
      }
    }
  ]
}
</script>
</div>

<div class="closing-section">

<p>Pålitlig publicering till Sheets handlar mindre om smart kod och mer om skyddsräcken: idempotens, batchning och strikt formelskydd. Klistra in den här prompten i din modell, generera blueprinten och gör ditt kalkylark till något människor äntligen kan lita på.</p>

</div><p>&lt;p&gt;The post <a rel="nofollow" href="https://nodenordic.se/prompts/bygg-en-formelsaker-sheets-synk-med-prompten/">Bygg en formelsäker Sheets-synk med prompten</a> first appeared on <a rel="nofollow" href="https://nodenordic.se">Node Nordic - AI Konsult för företag</a>.&lt;/p&gt;</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
