Created
May 14, 2026 07:33
-
-
Save theking2/cdf62c1e4c9b1a1135d44745bd0ab790 to your computer and use it in GitHub Desktop.
App Prompt creator
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="de"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Prompt Creator</title> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css"> | |
| <style> | |
| *{box-sizing:border-box;margin:0;padding:0} | |
| :root{ | |
| --bg:#0f1117;--bg2:#181c27;--bg3:#1e2333; | |
| --border:#2a2f45;--border2:#3a4060; | |
| --text:#e8eaf0;--text2:#8890b0;--text3:#555e7a; | |
| --blue:#378ADD;--blue-bg:#0d2040;--blue-light:#B5D4F4; | |
| --green:#1D9E75; | |
| --radius:10px;--radius-sm:6px; | |
| --font:'Segoe UI',system-ui,sans-serif; | |
| --mono:'Fira Mono','Consolas',monospace; | |
| } | |
| body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;padding:2rem 1rem} | |
| .app{max-width:820px;margin:0 auto} | |
| .app-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;padding-bottom:1rem;border-bottom:0.5px solid var(--border)} | |
| .app-title{font-size:22px;font-weight:600;letter-spacing:-.02em} | |
| .app-title span{color:var(--blue)} | |
| .progress-bar{display:flex;gap:4px;margin-bottom:2rem} | |
| .progress-step{flex:1;height:3px;background:var(--border);border-radius:99px;transition:background .3s} | |
| .progress-step.done{background:var(--green)} | |
| .progress-step.active{background:var(--blue)} | |
| .step-label{font-size:11px;color:var(--text3);margin-bottom:1rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600} | |
| .step-title{font-size:20px;font-weight:600;margin-bottom:.4rem;letter-spacing:-.01em} | |
| .step-sub{font-size:14px;color:var(--text2);margin-bottom:1.5rem;line-height:1.6} | |
| .multi-note{font-size:12px;color:var(--text3);margin-bottom:1rem;display:flex;align-items:center;gap:5px} | |
| .cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:8px;margin-bottom:1.5rem} | |
| .card-opt{border:0.5px solid var(--border);border-radius:var(--radius);padding:13px 15px;cursor:pointer;transition:all .15s;background:var(--bg2);display:flex;flex-direction:column;gap:5px;user-select:none} | |
| .card-opt:hover{border-color:var(--border2);background:var(--bg3)} | |
| .card-opt.selected{border-color:var(--blue);background:var(--blue-bg)} | |
| .card-opt .c-icon{font-size:18px;color:var(--blue)} | |
| .card-opt .c-label{font-size:13px;font-weight:600} | |
| .card-opt .c-desc{font-size:11px;color:var(--text2);line-height:1.4} | |
| .tag-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:1rem} | |
| .tag{padding:5px 13px;border-radius:99px;border:0.5px solid var(--border);font-size:12px;cursor:pointer;background:var(--bg2);transition:all .15s;user-select:none;display:inline-flex;align-items:center;gap:4px} | |
| .tag:hover{border-color:var(--border2)} | |
| .tag.sel{background:var(--blue-bg);border-color:var(--blue);color:var(--blue-light)} | |
| .field{display:flex;flex-direction:column;gap:6px;margin-bottom:1rem} | |
| .field label{font-size:12px;color:var(--text2);font-weight:600;letter-spacing:.03em;text-transform:uppercase} | |
| .field input,.field textarea{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:9px 13px;font-size:14px;font-family:var(--font);outline:none;transition:border .15s;resize:vertical} | |
| .field input:focus,.field textarea:focus{border-color:var(--blue)} | |
| .field input::placeholder,.field textarea::placeholder{color:var(--text3)} | |
| .sdiv{font-size:11px;font-weight:700;color:var(--text3);letter-spacing:.1em;text-transform:uppercase;margin:1.25rem 0 .75rem;padding-bottom:6px;border-bottom:0.5px solid var(--border);display:flex;align-items:center;gap:6px} | |
| .nav-row{display:flex;justify-content:space-between;align-items:center;margin-top:1.75rem} | |
| .btn{padding:8px 20px;border-radius:var(--radius-sm);border:0.5px solid var(--border2);background:transparent;color:var(--text);cursor:pointer;font-size:13px;font-weight:600;transition:all .15s;display:inline-flex;align-items:center;gap:6px;font-family:var(--font)} | |
| .btn:hover{background:var(--bg3)} | |
| .btn.primary{background:var(--blue);color:#fff;border-color:var(--blue)} | |
| .btn.primary:hover{background:#185FA5} | |
| .btn.success{background:var(--green);color:#fff;border-color:var(--green)} | |
| .btn.success:hover{background:#0F6E56} | |
| .output-box{border:0.5px solid var(--border);border-radius:var(--radius);padding:1.5rem;background:var(--bg2);font-family:var(--mono);font-size:13px;line-height:1.85;white-space:pre-wrap;word-break:break-word;color:var(--text);max-height:520px;overflow-y:auto} | |
| .copy-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} | |
| .intro-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:2rem} | |
| .intro-card{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius);padding:14px} | |
| .intro-card i{font-size:20px;color:var(--blue);display:block;margin-bottom:8px} | |
| .intro-card .il{font-size:13px;font-weight:600;margin-bottom:3px} | |
| .intro-card .id{font-size:11px;color:var(--text2);line-height:1.4} | |
| ::-webkit-scrollbar{width:6px} | |
| ::-webkit-scrollbar-track{background:var(--bg)} | |
| ::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="app"> | |
| <div class="app-header"> | |
| <div class="app-title">Prompt <span>Creator</span></div> | |
| <div style="font-size:12px;color:var(--text3)">v3.0 — 9 Schritte</div> | |
| </div> | |
| <div class="progress-bar" id="prog"></div> | |
| <div id="wizard"></div> | |
| </div> | |
| <script> | |
| const state={ | |
| step:0, | |
| tech_fe:[],tech_be:[], | |
| pattern_fe:[],pattern_be:[], | |
| design_fonts:[],design_colors:'',design_layout:[],design_theming:[], | |
| util_components:[],derived_components:[], | |
| versioning:[],branching:[],cicd:[], | |
| extras:[],extras_clean:[], | |
| project_name:'',project_desc:'' | |
| }; | |
| const steps=[ | |
| {id:'intro',type:'intro'}, | |
| {id:'tech_fe',type:'multi',label:'Schritt 1 / 9',title:'Frontend-Technologie',sub:'Welche Frontend-Technologien setzt du ein?',key:'tech_fe',options:[ | |
| {icon:'ti-brand-vue',label:'Vue 3',desc:'Composition API, SFC'}, | |
| {icon:'ti-brand-react',label:'React',desc:'Hooks, JSX, SPA'}, | |
| {icon:'ti-brand-angular',label:'Angular',desc:'TypeScript-first Framework'}, | |
| {icon:'ti-bolt',label:'Svelte',desc:'Kompiliertes UI-Framework'}, | |
| {icon:'ti-brand-nuxt',label:'Nuxt',desc:'Vue SSR / SSG Framework'}, | |
| {icon:'ti-brand-nextjs',label:'Next.js',desc:'React SSR / SSG Framework'}, | |
| {icon:'ti-file-code',label:'Vanilla JS',desc:'Plain JS ohne Framework'}, | |
| {icon:'ti-brand-typescript',label:'TypeScript',desc:'Typsicheres JavaScript'}, | |
| ]}, | |
| {id:'tech_be',type:'multi',label:'Schritt 2 / 9',title:'Backend-Technologie',sub:'Welche Backend-Technologien kommen zum Einsatz?',key:'tech_be',options:[ | |
| {icon:'ti-brand-php',label:'PHP 8.x',desc:'Modern PHP, Attributes'}, | |
| {icon:'ti-brand-nodejs',label:'Node.js',desc:'Express / Fastify'}, | |
| {icon:'ti-brand-python',label:'Python',desc:'FastAPI / Django / Flask'}, | |
| {icon:'ti-coffee',label:'Java',desc:'Spring Boot'}, | |
| {icon:'ti-brand-golang',label:'Go',desc:'Gin / Echo Framework'}, | |
| {icon:'ti-server',label:'Laravel',desc:'PHP MVC Framework'}, | |
| {icon:'ti-api',label:'REST API',desc:'Standard REST-Architektur'}, | |
| {icon:'ti-topology-star',label:'GraphQL',desc:'Query-basierte API'}, | |
| {icon:'ti-brand-docker',label:'Docker',desc:'Container & Compose'}, | |
| ]}, | |
| {id:'patterns',type:'double',label:'Schritt 3 / 9',title:'Design-Patterns',sub:'Welche Architektur- und Entwurfsmuster sollen berücksichtigt werden?',key:'pattern_fe',subkey:'pattern_be', | |
| options_a:[ | |
| {icon:'ti-layout-columns',label:'Component-based',desc:'Atomic Design'}, | |
| {icon:'ti-arrows-right-left',label:'MVC (Frontend)',desc:'Model-View-Controller'}, | |
| {icon:'ti-database-export',label:'State Management',desc:'Zentraler Store (Flux)'}, | |
| {icon:'ti-route',label:'SPA Routing',desc:'Client-Side Navigation'}, | |
| {icon:'ti-refresh',label:'Reactive',desc:'Data-binding Muster'}, | |
| {icon:'ti-layers-intersect',label:'Micro-Frontend',desc:'Modul-Federation'}, | |
| ], | |
| options_b:[ | |
| {icon:'ti-stack',label:'Layered Arch.',desc:'Presentation / Logic / Data'}, | |
| {icon:'ti-git-branch',label:'Repository Pattern',desc:'DAO / Active Record'}, | |
| {icon:'ti-message-2',label:'Event-Driven',desc:'Message Queue / Bus'}, | |
| {icon:'ti-cube',label:'Microservices',desc:'Getrennte Services'}, | |
| {icon:'ti-shield-check',label:'CQRS',desc:'Command Query Separation'}, | |
| {icon:'ti-api-app',label:'API Gateway',desc:'Zentraler Eintrittspunkt'}, | |
| ] | |
| }, | |
| {id:'design',type:'design',label:'Schritt 4 / 9',title:'Grafisches Design',sub:'Definiere den visuellen Stil des Projekts.'}, | |
| {id:'util',type:'multi',label:'Schritt 5 / 9',title:'Utility-Komponenten',sub:'Welche Querschnitts-Komponenten benötigst du?',key:'util_components',options:[ | |
| {icon:'ti-lock',label:'Authentication',desc:'Login, JWT, Sessions'}, | |
| {icon:'ti-shield-lock',label:'Authorization',desc:'RBAC, Permissions'}, | |
| {icon:'ti-bell',label:'Notification',desc:'Toast, Push, Email'}, | |
| {icon:'ti-message-circle',label:'Messaging',desc:'Chat, WebSocket'}, | |
| {icon:'ti-activity',label:'Logging',desc:'Audit Trail, Monitoring'}, | |
| {icon:'ti-refresh',label:'Caching',desc:'Redis, HTTP Cache'}, | |
| {icon:'ti-file-upload',label:'File Upload',desc:'S3, lokale Uploads'}, | |
| {icon:'ti-mail',label:'Mailing',desc:'SMTP, Templates'}, | |
| {icon:'ti-key',label:'OAuth2 / OIDC',desc:'Social Login, SSO'}, | |
| {icon:'ti-device-analytics',label:'Analytics',desc:'Events, Tracking'}, | |
| {icon:'ti-planet',label:'i18n',desc:'Internationalisierung'}, | |
| {icon:'ti-search',label:'Search',desc:'Volltextsuche, Filter'}, | |
| ]}, | |
| {id:'derived',type:'multi',label:'Schritt 6 / 9',title:'Abgeleitete Komponenten',sub:'Welche Bibliotheken und Infrastrukturen planst du zu verwenden?',key:'derived_components',options:[ | |
| {icon:'ti-brand-vue',label:'Pinia',desc:'Vue State Store'}, | |
| {icon:'ti-brand-vue',label:'Vuex',desc:'Vue State (legacy)'}, | |
| {icon:'ti-database',label:'SQLite',desc:'Embedded Datenbank'}, | |
| {icon:'ti-database',label:'MariaDB',desc:'MySQL-kompatibler Server'}, | |
| {icon:'ti-database',label:'MSSQL',desc:'Microsoft SQL Server'}, | |
| {icon:'ti-database',label:'PostgreSQL',desc:'Erweiterte SQL-DB'}, | |
| {icon:'ti-database',label:'MongoDB',desc:'Dokument-Datenbank'}, | |
| {icon:'ti-database-export',label:'Prisma',desc:'Type-safe ORM'}, | |
| {icon:'ti-database-export',label:'Doctrine',desc:'PHP ORM'}, | |
| {icon:'ti-database-export',label:'Eloquent',desc:'Laravel ORM'}, | |
| {icon:'ti-server-2',label:'Redis',desc:'In-Memory Store'}, | |
| {icon:'ti-queue',label:'RabbitMQ',desc:'Message Broker'}, | |
| {icon:'ti-test-pipe',label:'Vitest',desc:'Vue / Vite Tests'}, | |
| {icon:'ti-test-pipe',label:'Jest',desc:'JS Unit Testing'}, | |
| {icon:'ti-test-pipe',label:'PHPUnit',desc:'PHP Testing'}, | |
| {icon:'ti-plug',label:'Axios',desc:'HTTP Client'}, | |
| {icon:'ti-circle-key',label:'Sanctum',desc:'Laravel API Auth'}, | |
| {icon:'ti-brand-github',label:'GitHub Actions',desc:'CI/CD Pipelines'}, | |
| ]}, | |
| {id:'versioning',type:'versioning',label:'Schritt 7 / 9',title:'Versionierung & Workflow',sub:'Plattform, Branching-Strategie, CI/CD und Git-Konventionen für das Projekt.'}, | |
| {id:'extras',type:'multi',label:'Schritt 8 / 9',title:'Weitere Aspekte',sub:'Sollen noch weitere Aspekte im Prompt berücksichtigt werden?',key:'extras_clean',options:[ | |
| {icon:'ti-accessible',label:'Accessibility',desc:'WCAG, ARIA, a11y'}, | |
| {icon:'ti-device-mobile',label:'Mobile First',desc:'Responsive Priorität'}, | |
| {icon:'ti-lock-square',label:'Security',desc:'OWASP Top 10'}, | |
| {icon:'ti-chart-bar',label:'Performance',desc:'Core Web Vitals'}, | |
| {icon:'ti-file-certificate',label:'Dokumentation',desc:'JSDoc, Swagger, ADR'}, | |
| {icon:'ti-scale',label:'Lizenz & OS',desc:'Open-Source Aspekte'}, | |
| {icon:'ti-test-pipe',label:'Testing Strategy',desc:'Unit/Integration/E2E'}, | |
| {icon:'ti-cloud',label:'Cloud / Hosting',desc:'AWS, GCP, VPS'}, | |
| {icon:'ti-puzzle',label:'Plugin-System',desc:'Erweiterbarkeit'}, | |
| {icon:'ti-shield-half',label:'DSGVO / Privacy',desc:'Datenschutz-Konformität'}, | |
| ]}, | |
| {id:'project',type:'project',label:'Schritt 9 / 9',title:'Projektdetails',sub:'Gib dem Projekt einen Namen und eine kurze Beschreibung.'}, | |
| {id:'result',type:'result'}, | |
| ]; | |
| function buildProgress(){ | |
| document.getElementById('prog').innerHTML=steps.slice(1,-1).map((_,i)=>{ | |
| const s=state.step-1; | |
| return `<div class="progress-step ${i<s?'done':i===s?'active':''}"></div>`; | |
| }).join(''); | |
| } | |
| function render(){ | |
| buildProgress(); | |
| const s=steps[state.step]; | |
| const w=document.getElementById('wizard'); | |
| const map={intro:renderIntro,multi:renderMulti,double:renderDouble,design:renderDesign,versioning:renderVersioning,project:renderProject,result:renderResult}; | |
| w.innerHTML=(map[s.type])(s); | |
| attachEvents(); | |
| } | |
| function navRow(showBack=true,label='Weiter',action='next()'){ | |
| return `<div class="nav-row"> | |
| ${showBack?`<button class="btn" onclick="prev()"><i class="ti ti-arrow-left"></i> Zurück</button>`:'<span></span>'} | |
| <button class="btn primary" onclick="${action}">${label} <i class="ti ti-arrow-right"></i></button> | |
| </div>`; | |
| } | |
| function renderIntro(){ | |
| return `<div> | |
| <div class="step-title" style="font-size:26px;margin-bottom:.75rem">Willkommen</div> | |
| <p style="font-size:14px;color:var(--text2);line-height:1.7;margin-bottom:1.5rem">Dieser Wizard führt dich durch <strong style="color:var(--text)">9 Kategorien</strong> und erstellt daraus einen vollständigen, kopierfertigen System-Prompt für deinen Entwicklungskontext — kein API-Key, keine externe Abhängigkeit.</p> | |
| <div class="intro-grid"> | |
| ${[['ti-device-desktop','Frontend & Backend','Technologie-Auswahl'],['ti-layout','Patterns','Architektur-Muster'],['ti-palette','Design','Fonts, Farben, Layout'],['ti-plug','Komponenten','Utility & Libraries'],['ti-git-branch','Versionierung','Git, Branching, CI/CD'],['ti-dots','Weiteres','Security, Docs, Testing']].map(([i,l,d])=>`<div class="intro-card"><i class="ti ${i}"></i><div class="il">${l}</div><div class="id">${d}</div></div>`).join('')} | |
| </div> | |
| ${navRow(false,'Starten')} | |
| </div>`; | |
| } | |
| function renderMulti(s){ | |
| if(!state[s.key]) state[s.key]=[]; | |
| const sel=state[s.key]; | |
| return `<div> | |
| <div class="step-label">${s.label}</div> | |
| <div class="step-title">${s.title}</div> | |
| <div class="step-sub">${s.sub}</div> | |
| <div class="multi-note"><i class="ti ti-info-circle"></i> Mehrfachauswahl möglich</div> | |
| <div class="cards-grid"> | |
| ${s.options.map(o=>`<div class="card-opt ${sel.includes(o.label)?'selected':''}" data-key="${s.key}" data-val="${o.label}"> | |
| <i class="ti ${o.icon} c-icon"></i><div class="c-label">${o.label}</div><div class="c-desc">${o.desc}</div> | |
| </div>`).join('')} | |
| </div>${navRow()} | |
| </div>`; | |
| } | |
| function renderDouble(s){ | |
| if(!state[s.key]) state[s.key]=[]; | |
| if(!state[s.subkey]) state[s.subkey]=[]; | |
| return `<div> | |
| <div class="step-label">${s.label}</div> | |
| <div class="step-title">${s.title}</div> | |
| <div class="step-sub">${s.sub}</div> | |
| <div class="multi-note"><i class="ti ti-info-circle"></i> Mehrfachauswahl möglich in beiden Bereichen</div> | |
| <div class="sdiv"><i class="ti ti-device-desktop"></i> Frontend Patterns</div> | |
| <div class="cards-grid"> | |
| ${s.options_a.map(o=>`<div class="card-opt ${state[s.key].includes(o.label)?'selected':''}" data-key="${s.key}" data-val="${o.label}"> | |
| <i class="ti ${o.icon} c-icon"></i><div class="c-label">${o.label}</div><div class="c-desc">${o.desc}</div> | |
| </div>`).join('')} | |
| </div> | |
| <div class="sdiv"><i class="ti ti-server"></i> Backend Patterns</div> | |
| <div class="cards-grid"> | |
| ${s.options_b.map(o=>`<div class="card-opt ${state[s.subkey].includes(o.label)?'selected':''}" data-key="${s.subkey}" data-val="${o.label}"> | |
| <i class="ti ${o.icon} c-icon"></i><div class="c-label">${o.label}</div><div class="c-desc">${o.desc}</div> | |
| </div>`).join('')} | |
| </div>${navRow()} | |
| </div>`; | |
| } | |
| function renderDesign(){ | |
| const fonts=['Geomanist + Geologica','Syne + DM Sans','DM Mono + DM Sans','Fraunces + DM Sans','IBM Plex Sans + IBM Plex Mono','Bricolage Grotesque + Outfit','Playfair Display + Source Sans','Custom / Eigene']; | |
| const layouts=['Mobile First','Desktop First','Responsive Fluid','Dashboard / App-Shell','Editorial / Magazine','Sidebar + Content','Full-Width Hero']; | |
| const themings=['Dark Mode','Light Mode','System-Preference','User-Toggle','High Contrast']; | |
| const css=['Tailwind CSS','Bootstrap 5','UnoCSS','Sass / SCSS','CSS Modules','Vanilla CSS','Stylex (Meta)']; | |
| return `<div> | |
| <div class="step-label">Schritt 4 / 9</div> | |
| <div class="step-title">Grafisches Design</div> | |
| <div class="step-sub">Definiere den visuellen Stil des Projekts.</div> | |
| <div class="sdiv"><i class="ti ti-typography"></i> Typografie</div> | |
| <div class="tag-row">${fonts.map(f=>`<span class="tag ${state.design_fonts.includes(f)?'sel':''}" data-group="design_fonts" data-val="${f}">${f}</span>`).join('')}</div> | |
| <div class="sdiv"><i class="ti ti-palette"></i> Farbschema</div> | |
| <div class="field"><label>Hauptfarben oder Beschreibung</label><input type="text" id="design_colors" value="${state.design_colors||''}" placeholder='z.B. #1D9E75, dunkel editorial, teal + slate'></div> | |
| <div class="sdiv"><i class="ti ti-code"></i> CSS-Framework</div> | |
| <div class="tag-row">${css.map(f=>`<span class="tag ${state.design_layout.includes(f)?'sel':''}" data-group="design_layout" data-val="${f}">${f}</span>`).join('')}</div> | |
| <div class="sdiv"><i class="ti ti-layout"></i> Screen-Layout</div> | |
| <div class="tag-row">${layouts.map(f=>`<span class="tag ${state.design_theming.includes(f)?'sel':''}" data-group="design_theming" data-val="${f}">${f}</span>`).join('')}</div> | |
| <div class="sdiv"><i class="ti ti-moon"></i> Theming</div> | |
| <div class="tag-row">${themings.map(f=>`<span class="tag ${state.extras.includes('__theme__'+f)?'sel':''}" data-group="extras" data-val="__theme__${f}">${f}</span>`).join('')}</div> | |
| ${navRow()} | |
| </div>`; | |
| } | |
| function renderVersioning(){ | |
| const platforms=[ | |
| {icon:'ti-brand-github',label:'GitHub',desc:'github.com, Actions, Pages'}, | |
| {icon:'ti-brand-gitlab',label:'GitLab',desc:'Self-hosted oder Cloud'}, | |
| {icon:'ti-brand-bitbucket',label:'Bitbucket',desc:'Atlassian, Pipelines'}, | |
| {icon:'ti-server-2',label:'Gitea',desc:'Self-hosted, leichtgewichtig'}, | |
| {icon:'ti-server-2',label:'Forgejo',desc:'Gitea Fork, Community'}, | |
| {icon:'ti-brand-azure',label:'Azure DevOps',desc:'Microsoft, Repos, Boards'}, | |
| ]; | |
| const branching=[ | |
| {icon:'ti-git-branch',label:'Git Flow',desc:'main / develop / feature'}, | |
| {icon:'ti-git-branch',label:'GitHub Flow',desc:'main + feature branches'}, | |
| {icon:'ti-git-branch',label:'Trunk-Based',desc:'Direktes Mergen in main'}, | |
| {icon:'ti-git-branch',label:'GitLab Flow',desc:'Env-Branches (prod/staging)'}, | |
| {icon:'ti-git-compare',label:'Release Branches',desc:'Stabile Release-Linien'}, | |
| ]; | |
| const cicd=[ | |
| {icon:'ti-brand-github',label:'GitHub Actions',desc:'Workflows, Marketplace'}, | |
| {icon:'ti-brand-gitlab',label:'GitLab CI/CD',desc:'.gitlab-ci.yml Pipelines'}, | |
| {icon:'ti-settings-automation',label:'Jenkins',desc:'Self-hosted CI-Server'}, | |
| {icon:'ti-brand-docker',label:'Docker Hub',desc:'Image Registry & Builds'}, | |
| {icon:'ti-cloud-upload',label:'Deployer (PHP)',desc:'PHP Deployment Tool'}, | |
| {icon:'ti-terminal-2',label:'Makefile / Shell',desc:'Skript-basiertes Deploy'}, | |
| {icon:'ti-brand-vercel',label:'Vercel',desc:'Auto-Deploy, Previews'}, | |
| {icon:'ti-cloud',label:'Coolify',desc:'Self-hosted PaaS'}, | |
| ]; | |
| const practices=[ | |
| {icon:'ti-file-description',label:'Conventional Commits'}, | |
| {icon:'ti-tag',label:'Semantic Versioning'}, | |
| {icon:'ti-checklist',label:'Pull Requests'}, | |
| {icon:'ti-eye-check',label:'Branch Protection'}, | |
| {icon:'ti-file-text',label:'CHANGELOG.md'}, | |
| {icon:'ti-shield-check',label:'Signed Commits'}, | |
| {icon:'ti-git-merge',label:'Squash Merge'}, | |
| {icon:'ti-package',label:'Release Tags'}, | |
| ]; | |
| if(!state.versioning) state.versioning=[]; | |
| if(!state.branching) state.branching=[]; | |
| if(!state.cicd) state.cicd=[]; | |
| const selP=state.extras.filter(e=>e.startsWith('__vcs__')); | |
| return `<div> | |
| <div class="step-label">Schritt 7 / 9</div> | |
| <div class="step-title">Versionierung & Workflow</div> | |
| <div class="step-sub">Plattform, Branching-Strategie, CI/CD und Git-Konventionen für das Projekt.</div> | |
| <div class="sdiv"><i class="ti ti-brand-github"></i> Plattform</div> | |
| <div class="cards-grid"> | |
| ${platforms.map(o=>`<div class="card-opt ${state.versioning.includes(o.label)?'selected':''}" data-key="versioning" data-val="${o.label}"> | |
| <i class="ti ${o.icon} c-icon"></i><div class="c-label">${o.label}</div><div class="c-desc">${o.desc}</div> | |
| </div>`).join('')} | |
| </div> | |
| <div class="sdiv"><i class="ti ti-git-branch"></i> Branching-Strategie</div> | |
| <div class="cards-grid"> | |
| ${branching.map(o=>`<div class="card-opt ${state.branching.includes(o.label)?'selected':''}" data-key="branching" data-val="${o.label}"> | |
| <i class="ti ${o.icon} c-icon"></i><div class="c-label">${o.label}</div><div class="c-desc">${o.desc}</div> | |
| </div>`).join('')} | |
| </div> | |
| <div class="sdiv"><i class="ti ti-settings-automation"></i> CI/CD & Deployment</div> | |
| <div class="cards-grid"> | |
| ${cicd.map(o=>`<div class="card-opt ${state.cicd.includes(o.label)?'selected':''}" data-key="cicd" data-val="${o.label}"> | |
| <i class="ti ${o.icon} c-icon"></i><div class="c-label">${o.label}</div><div class="c-desc">${o.desc}</div> | |
| </div>`).join('')} | |
| </div> | |
| <div class="sdiv"><i class="ti ti-checkup-list"></i> Git-Konventionen</div> | |
| <div class="tag-row"> | |
| ${practices.map(o=>`<span class="tag ${selP.includes('__vcs__'+o.label)?'sel':''}" data-group="extras" data-val="__vcs__${o.label}"> | |
| <i class="ti ${o.icon}" style="font-size:12px;vertical-align:-1px"></i> ${o.label} | |
| </span>`).join('')} | |
| </div> | |
| ${navRow()} | |
| </div>`; | |
| } | |
| function renderProject(){ | |
| return `<div> | |
| <div class="step-label">Schritt 9 / 9</div> | |
| <div class="step-title">Projektdetails</div> | |
| <div class="step-sub">Name und Kontext — damit der Prompt präziser und projektspezifisch wird.</div> | |
| <div class="field"><label>Projektname</label><input type="text" id="project_name" value="${state.project_name||''}" placeholder="z.B. go321 Dashboard, SBW Insta-Analytics"></div> | |
| <div class="field"><label>Kurzbeschreibung / Kontext</label><textarea id="project_desc" rows="5" placeholder="z.B. Kundenverwaltung für KMU, Vue 3 SPA mit REST-API und MariaDB im Docker-Stack">${state.project_desc||''}</textarea></div> | |
| <div class="nav-row"> | |
| <button class="btn" onclick="prev()"><i class="ti ti-arrow-left"></i> Zurück</button> | |
| <button class="btn primary" onclick="buildAndShow()"><i class="ti ti-sparkles"></i> Prompt erstellen</button> | |
| </div> | |
| </div>`; | |
| } | |
| function buildPromptText(){ | |
| const themeExtras=state.extras.filter(e=>e.startsWith('__theme__')).map(e=>e.replace('__theme__','')); | |
| const vcsExtras=state.extras.filter(e=>e.startsWith('__vcs__')).map(e=>e.replace('__vcs__','')); | |
| const cleanExtras=state.extras_clean||[]; | |
| const n=state.project_name||'(nicht definiert)'; | |
| const d=state.project_desc||'(nicht definiert)'; | |
| const list=arr=>arr.length?arr.map(i=>`- ${i}`).join('\n'):'– (keine Auswahl)'; | |
| const inline=arr=>arr.length?arr.join(', '):'–'; | |
| let prompt=`# System-Prompt: ${n}\n\n`; | |
| prompt+=`## Projektkontext\n`; | |
| prompt+=`Projekt: ${n}\n`; | |
| prompt+=`Beschreibung: ${d}\n\n`; | |
| prompt+=`## Tech-Stack\n\n`; | |
| prompt+=`### Frontend\n${list(state.tech_fe)}\n\n`; | |
| prompt+=`### Backend\n${list(state.tech_be)}\n\n`; | |
| prompt+=`## Architektur & Patterns\n\n`; | |
| prompt+=`### Frontend Patterns\n${list(state.pattern_fe)}\n\n`; | |
| prompt+=`### Backend Patterns\n${list(state.pattern_be)}\n\n`; | |
| prompt+=`## Design-System\n\n`; | |
| prompt+=`Typografie: ${inline(state.design_fonts)}\n`; | |
| prompt+=`Farbschema: ${state.design_colors||'–'}\n`; | |
| prompt+=`CSS-Framework: ${inline(state.design_layout)}\n`; | |
| prompt+=`Layout-Ansatz: ${inline(state.design_theming)}\n`; | |
| prompt+=`Theming: ${inline(themeExtras)}\n\n`; | |
| prompt+=`## Utility-Komponenten\n${list(state.util_components)}\n\n`; | |
| prompt+=`## Bibliotheken & Infrastruktur\n${list(state.derived_components)}\n\n`; | |
| prompt+=`## Versionierung & Workflow\n\n`; | |
| prompt+=`Plattform: ${inline(state.versioning)}\n`; | |
| prompt+=`Branching: ${inline(state.branching)}\n`; | |
| prompt+=`CI/CD: ${inline(state.cicd)}\n`; | |
| prompt+=`Git-Konventionen: ${inline(vcsExtras)}\n\n`; | |
| if(cleanExtras.length){ | |
| prompt+=`## Weitere Aspekte\n${list(cleanExtras)}\n\n`; | |
| } | |
| prompt+=`---\n\n`; | |
| prompt+=`Du bist ein erfahrener Fullstack-Entwickler und technischer Assistent für das Projekt "${n}".\n\n`; | |
| prompt+=`Halte dich stets an den oben definierten Tech-Stack, die Architektur-Patterns, das Design-System und den Versionierungs-Workflow. Schlage keine abweichenden Technologien vor, ausser du wirst explizit darum gebeten.\n\n`; | |
| prompt+=`Schreibe Code immer im Stil der gewählten Frameworks und halte die definierten Git-Konventionen ein. Bei Datenbankfragen beziehe dich auf die gewählten Datenbanksysteme und ORMs. Bei Frontend-Code verwende die definierten CSS-Frameworks und halte dich an den Layout-Ansatz und das Theming.`; | |
| return prompt; | |
| } | |
| function renderResult(){ | |
| const prompt=buildPromptText(); | |
| return `<div> | |
| <div class="step-label">Fertig</div> | |
| <div class="step-title">Generierter System-Prompt</div> | |
| <div class="step-sub">Kopiere diesen Prompt als Projekt-Instruktion, Claude System-Prompt oder Kontext-Block — direkt aus dem Browser, ohne externe API.</div> | |
| <div class="output-box" id="prompt-output">${escHtml(prompt)}</div> | |
| <div class="copy-row"> | |
| <button class="btn success" onclick="copyPrompt()"><i class="ti ti-copy"></i> Kopieren</button> | |
| <button class="btn" onclick="downloadPrompt()"><i class="ti ti-download"></i> Als .txt speichern</button> | |
| <button class="btn" onclick="resetWizard()"><i class="ti ti-refresh"></i> Neu starten</button> | |
| </div> | |
| <div class="nav-row" style="margin-top:1rem"> | |
| <button class="btn" onclick="prev()"><i class="ti ti-arrow-left"></i> Zurück</button> | |
| <span></span> | |
| </div> | |
| </div>`; | |
| } | |
| function escHtml(t){return t.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');} | |
| function attachEvents(){ | |
| document.querySelectorAll('.card-opt').forEach(el=>{ | |
| el.addEventListener('click',()=>{ | |
| const k=el.dataset.key,v=el.dataset.val; | |
| if(!state[k]) state[k]=[]; | |
| const i=state[k].indexOf(v); | |
| if(i>-1) state[k].splice(i,1); else state[k].push(v); | |
| el.classList.toggle('selected'); | |
| }); | |
| }); | |
| document.querySelectorAll('.tag').forEach(el=>{ | |
| el.addEventListener('click',()=>{ | |
| const g=el.dataset.group,v=el.dataset.val; | |
| if(!state[g]) state[g]=[]; | |
| const i=state[g].indexOf(v); | |
| if(i>-1) state[g].splice(i,1); else state[g].push(v); | |
| el.classList.toggle('sel'); | |
| }); | |
| }); | |
| const dc=document.getElementById('design_colors'); | |
| if(dc) dc.addEventListener('input',e=>state.design_colors=e.target.value); | |
| const pn=document.getElementById('project_name'); | |
| if(pn) pn.addEventListener('input',e=>state.project_name=e.target.value); | |
| const pd=document.getElementById('project_desc'); | |
| if(pd) pd.addEventListener('input',e=>state.project_desc=e.target.value); | |
| } | |
| function next(){state.step=Math.min(state.step+1,steps.length-1);render();} | |
| function prev(){state.step=Math.max(state.step-1,0);render();} | |
| function buildAndShow(){ | |
| const pn=document.getElementById('project_name'); | |
| const pd=document.getElementById('project_desc'); | |
| if(pn) state.project_name=pn.value; | |
| if(pd) state.project_desc=pd.value; | |
| state.step=steps.length-1; | |
| render(); | |
| } | |
| function resetWizard(){ | |
| Object.keys(state).forEach(k=>{if(Array.isArray(state[k])) state[k]=[]; else state[k]='';}); | |
| state.step=0;render(); | |
| } | |
| function copyPrompt(){ | |
| const text=buildPromptText(); | |
| navigator.clipboard.writeText(text).then(()=>{ | |
| const b=document.querySelector('.copy-row .btn'); | |
| if(b){b.innerHTML='<i class="ti ti-check"></i> Kopiert!';setTimeout(()=>{b.innerHTML='<i class="ti ti-copy"></i> Kopieren';},1800);} | |
| }); | |
| } | |
| function downloadPrompt(){ | |
| const text=buildPromptText(); | |
| const blob=new Blob([text],{type:'text/plain'}); | |
| const a=document.createElement('a'); | |
| a.href=URL.createObjectURL(blob); | |
| a.download=(state.project_name||'system-prompt').replace(/\s+/g,'-').toLowerCase()+'.txt'; | |
| a.click(); | |
| } | |
| render(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment