讨论

构建一个完整的创业公司管理系统,在一个HTML文件中

来自 Wikiprompt,自由的提示词百科全书

Eyisha Zyer

2026年7月3日

构建一个完整的创业公司管理系统,在一个HTML文件中 一份全面的提示词,用于生成一个包含仪表盘、任务、发布计划、营销、指标等内容的完整功能的创业管理系统,作为单个HTML文件。

提示词内容收藏

🌐
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LaunchOS · CEO & product manager</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; } :root { --bg: #f8fafc; --surface: #ffffff; --text: #0f172a; --muted: #64748b; --border: #e2e8f0; --primary: #4f46e5; --primary-soft: #eef2ff; --accent: #0ea5e9; --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --shadow: 0 4px 12px rgba(0,0,0,0.04); --radius: 16px; --transition: 0.2s ease; } body.dark { --bg: #0b1120; --surface: #1e293b; --text: #e2e8f0; --muted: #94a3b8; --border: #334155; --primary: #818cf8; --primary-soft: #1e1b4b; --shadow: 0 4px 16px rgba(0,0,0,0.3); } body { background: var(--bg); color: var(--text); transition: background 0.3s, color 0.3s; display: flex; min-height: 100vh; font-size: 14px; } /* sidebar */ .sidebar { width: 240px; background: var(--surface); border-right: 1px solid var(--border); padding: 24px 16px; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; height: 100vh; transition: background 0.3s; } .sidebar .logo { font-weight: 700; font-size: 20px; letter-spacing: -0.02em; padding: 8px 12px; margin-bottom: 24px; color: var(--primary); } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--muted); font-weight: 500; cursor: pointer; transition: all 0.2s; border: none; background: transparent; width: 100%; text-align: left; font-size: 14px; } .nav-item:hover { background: var(--primary-soft); color: var(--primary); } .nav-item.active { background: var(--primary); color: white; } .nav-item svg { width: 18px; height: 18px; } .sidebar-footer { margin-top: auto; padding: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); } /* main */ .main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .topbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: background 0.3s; } .topbar .countdown { background: var(--primary-soft); padding: 6px 14px; border-radius: 40px; font-weight: 600; color: var(--primary); font-size: 13px; } .topbar-actions { display: flex; gap: 12px; align-items: center; } .btn-icon { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; cursor: pointer; color: var(--text); font-weight: 500; transition: 0.2s; } .btn-icon:hover { background: var(--primary-soft); border-color: var(--primary); } .content { padding: 32px; overflow-y: auto; flex: 1; } .card { background: var(--surface); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); border: 1px solid var(--border); margin-bottom: 24px; transition: background 0.3s, border 0.3s; } .card h3 { font-size: 18px; font-weight: 600; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .metric { background: var(--surface); border-radius: 14px; padding: 16px; border: 1px solid var(--border); } .metric .label { color: var(--muted); font-size: 13px; } .metric .value { font-size: 28px; font-weight: 700; margin-top: 4px; } .progress-bar { height: 8px; background: var(--border); border-radius: 20px; overflow: hidden; margin: 12px 0; } .progress-fill { height: 100%; background: var(--primary); border-radius: 20px; transition: width 0.4s; } .task-columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .task-col { background: var(--bg); border-radius: 12px; padding: 12px; min-height: 200px; } .task-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin-bottom: 12px; } .task-item { background: var(--surface); border-radius: 10px; padding: 12px; margin-bottom: 8px; border: 1px solid var(--border); cursor: grab; transition: 0.2s; } .task-item:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(0,0,0,0.02); } .tag { display: inline-block; padding: 4px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; background: var(--primary-soft); color: var(--primary); } .timeline-item { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); } .timeline-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--primary); margin-top: 4px; } .copy-block { background: var(--bg); border-radius: 12px; padding: 16px; margin-bottom: 12px; border: 1px solid var(--border); } .btn { background: var(--primary); color: white; border: none; padding: 8px 16px; border-radius: 10px; font-weight: 500; cursor: pointer; transition: 0.2s; } .btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); } .btn-outline:hover { border-color: var(--primary); color: var(--primary); } input, textarea, select { background: var(--bg); border: 1px solid var(--border); padding: 10px 14px; border-radius: 12px; color: var(--text); width: 100%; margin-bottom: 12px; font-size: 14px; } input:focus, textarea:focus { outline: 2px solid var(--primary); border-color: transparent; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .hidden { display: none; } .note-item { background: var(--bg); padding: 12px; border-radius: 12px; margin-bottom: 8px; border-left: 4px solid var(--primary); } .color-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: 6px; } @media (max-width: 1000px) { .grid-2, .grid-3, .task-columns { grid-template-columns: 1fr; } .sidebar { width: 200px; } } </style> </head> <body> <!-- sidebar --> <aside class="sidebar" id="sidebar"> <div class="logo">⚡ LaunchOS</div> <button class="nav-item active" data-view="dashboard">📊 Dashboard</button> <button class="nav-item" data-view="product">📦 Product</button> <button class="nav-item" data-view="tasks">✅ Tasks</button> <button class="nav-item" data-view="launch">🚀 Launch plan</button> <button class="nav-item" data-view="copy">✍️ Copy</button> <button class="nav-item" data-view="marketing">📣 Marketing</button> <button class="nav-item" data-view="metrics">📈 Metrics</button> <button class="nav-item" data-view="notes">📝 Notes</button> <div class="sidebar-footer"> <div style="display:flex; gap:8px; align-items:center;"> <span>💾</span> <span>localStorage</span> </div> </div> </aside> <!-- main --> <div class="main"> <div class="topbar"> <div style="font-weight:600; font-size:16px;">🚀 Startup OS</div> <div style="display:flex; gap:16px; align-items:center;"> <div class="countdown" id="countdownDisplay">⏳ launch in 12d</div> <button class="btn-icon" id="themeToggle">🌙 dark</button> <button class="btn-icon" id="exportBtn">⬇️ export</button> <button class="btn-icon" id="importBtn">⬆️ import</button> </div> </div> <div class="content" id="appContent"> <!-- dynamic views injected --> </div> </div> <script> (function(){ // ---------- state ---------- const defaultState = { product: { name: 'NovaBoard', tagline: 'AI-powered analytics for indie hackers', audience: 'Solo founders & small teams', problem: 'Spreadsheets are too slow for real-time decisions', features: ['Real-time dashboards', 'AI insights', 'Slack integration'], revenueModel: 'Subscription $29/mo', launchDate: new Date(Date.now() + 12*86400000).toISOString().slice(0,10) }, tasks: [ { id: 1, title: 'Design landing page', desc: 'Hero + waitlist', priority: 'high', status: 'todo', assignee: 'AI', due: '2025-04-10', deps: [] }, { id: 2, title: 'Build MVP core', desc: 'Auth + dashboard', priority: 'high', status: 'inprogress', assignee: 'Dev', due: '2025-04-15', deps: [1] }, { id: 3, title: 'Write launch email', desc: 'Sequence for waitlist', priority: 'medium', status: 'review', assignee: 'AI', due: '2025-04-12', deps: [] }, { id: 4, title: 'Setup analytics', desc: 'Mixpanel + GA4', priority: 'medium', status: 'done', assignee: 'Dev', due: '2025-04-05', deps: [] }, { id: 5, title: 'Create social posts', desc: 'Linkedin + X', priority: 'low', status: 'todo', assignee: 'AI', due: '2025-04-18', deps: [] }, ], milestones: [ { phase: 'Product Development', tasks: ['Build MVP', 'Beta test'], done: false }, { phase: 'Marketing Prep', tasks: ['Landing page', 'Email list'], done: false }, { phase: 'Pre-Launch', tasks: ['Waitlist', 'Social buzz'], done: false }, { phase: 'Launch Day', tasks: ['Product Hunt', 'Email blast'], done: false }, { phase: 'Post-Launch', tasks: ['Retention', 'Iterate'], done: false } ], copy: { description: 'NovaBoard turns your raw data into actionable insights with AI.', tagline: 'Decisions faster, backed by data.', pitch: 'Stop guessing. NovaBoard gives you real-time clarity.', valueProp: 'Save 10 hours/week with automated reporting.', email: 'Hey {{user}}, ready to launch smarter?', social: '🚀 We are building NovaBoard – join the waitlist!' }, marketing: [ { channel: 'Twitter / X', status: 'inprogress', notes: 'Post 3x/week' }, { channel: 'LinkedIn', status: 'todo', notes: 'Founder story' }, { channel: 'Email', status: 'todo', notes: 'Welcome sequence' }, { channel: 'Product Hunt', status: 'todo', notes: 'Launch day' } ], metrics: { revenue: 1200, users: 340, signups: 89, engagement: 42 }, goals: { revenue: 5000, users: 1000, signups: 300, engagement: 70 }, notes: [ { id: 1, text: 'Idea: referral program for early users', tag: 'Marketing' }, { id: 2, text: 'Interview 5 beta users', tag: 'Product' } ], activity: [ { text: 'Task "Design landing page" moved to In Progress', time: '2h ago' }, { text: 'New note added: referral program', time: '5h ago' }, { text: 'Goal updated: revenue target $5k', time: '1d ago' } ], launchReadiness: 65, darkMode: false, primaryColor: '#4f46e5' }; let state = JSON.parse(localStorage.getItem('launchOS_state')) || defaultState; let currentView = 'dashboard'; // ---------- helpers ---------- function save() { localStorage.setItem('launchOS_state', JSON.stringify(state)); } function getCountdown() { const launch = new Date(state.product.launchDate); const now = new Date(); const diff = Math.ceil((launch - now) / (1000*60*60*24)); return diff > 0 ? `${diff}d` : 'launched'; } // ---------- render ---------- function render() { document.getElementById('countdownDisplay').innerText = `⏳ launch in ${getCountdown()}`; const app = document.getElementById('appContent'); let html = ''; switch(currentView) { case 'dashboard': html = renderDashboard(); break; case 'product': html = renderProduct(); break; case 'tasks': html = renderTasks(); break; case 'launch': html = renderLaunch(); break; case 'copy': html = renderCopy(); break; case 'marketing': html = renderMarketing(); break; case 'metrics': html = renderMetrics(); break; case 'notes': html = renderNotes(); break; } app.innerHTML = html; attachEvents(); } function renderDashboard() { const tasks = state.tasks; const todo = tasks.filter(t=>t.status==='todo').length; const inprog = tasks.filter(t=>t.status==='inprogress').length; const review = tasks.filter(t=>t.status==='review').length; const done = tasks.filter(t=>t.status==='done').length; const readiness = state.launchReadiness; return ` <div class="grid-2"> <div class="card"> <h3>📋 Launch readiness</h3> <div class="progress-bar"><div class="progress-fill" style="width:${readiness}%"></div></div> <p style="color:var(--muted)">${readiness}% complete</p> <div style="display:flex; gap:16px; margin-top:16px;"> <div class="metric"><div class="label">Revenue</div><div class="value">$${state.metrics.revenue}</div></div> <div class="metric"><div class="label">Users</div><div class="value">${state.metrics.users}</div></div> <div class="metric"><div class="label">Sign-ups</div><div class="value">${state.metrics.signups}</div></div> </div> </div> <div class="card"> <h3>⚡ Recent activity</h3> ${state.activity.map(a=>`<div style="padding:8px 0; border-bottom:1px solid var(--border)"><span>${a.text}</span><div style="font-size:12px;color:var(--muted)">${a.time}</div></div>`).join('')} </div> </div> <div class="card"> <h3>📌 Quick add</h3> <div style="display:flex; gap:12px; flex-wrap:wrap;"> <button class="btn" onclick="quickAddTask()">+ Task</button> <button class="btn btn-outline" onclick="quickAddNote()">+ Note</button> <button class="btn btn-outline" onclick="quickMilestone()">+ Milestone</button> </div> </div> <div class="card"> <h3>📊 Tasks by status</h3> <div style="display:flex; gap:24px; justify-content:space-around;"> <div><span class="tag">To Do</span> ${todo}</div> <div><span class="tag">In Progress</span> ${inprog}</div> <div><span class="tag">Review</span> ${review}</div> <div><span class="tag">Done</span> ${done}</div> </div> </div> `; } function renderProduct() { const p = state.product; return ` <div class="card"> <h3>📦 Product definition</h3> <input id="prodName" value="${p.name}" placeholder="Product name"> <input id="prodTagline" value="${p.tagline}" placeholder="One-line description"> <input id="prodAudience" value="${p.audience}" placeholder="Target audience"> <textarea id="prodProblem" rows="2">${p.problem}</textarea> <input id="prodFeatures" value="${p.features.join(', ')}" placeholder="Key features (comma separated)"> <input id="prodRevenue" value="${p.revenueModel}" placeholder="Revenue model"> <input id="prodLaunch" type="date" value="${p.launchDate}"> <button class="btn" onclick="updateProduct()">Update product</button> </div> <div class="card"> <h3>📄 Product brief</h3> <div style="background:var(--bg); padding:16px; border-radius:12px;"> <h2>${p.name}</h2> <p><strong>Tagline:</strong> ${p.tagline}</p> <p><strong>Audience:</strong> ${p.audience}</p> <p><strong>Problem:</strong> ${p.problem}</p> <p><strong>Features:</strong> ${p.features.join(', ')}</p> <p><strong>Revenue:</strong> ${p.revenueModel}</p> <p><strong>Launch:</strong> ${p.launchDate}</p> </div> </div> `; } function renderTasks() { const cols = ['todo','inprogress','review','done']; const labels = ['To Do','In Progress','Review','Done']; return ` <div class="card"> <h3>✅ Task board <span style="font-size:14px; font-weight:400;">(drag to change status)</span></h3> <div class="task-columns"> ${cols.map((c,i)=>` <div class="task-col" data-col="${c}"> <h4>${labels[i]}</h4> ${state.tasks.filter(t=>t.status===c).map(t=>` <div class="task-item" draggable="true" data-task-id="${t.id}" data-status="${c}"> <strong>${t.title}</strong> <div style="font-size:12px; color:var(--muted)">${t.desc}</div> <div style="display:flex; gap:8px; margin-top:8px;"> <span class="tag">${t.priority}</span> <span class="tag">${t.assignee}</span> </div> </div> `).join('')} </div> `).join('')} </div> </div> <div class="card"> <h3>➕ Add custom task</h3> <input id="newTaskTitle" placeholder="Task title"> <input id="newTaskDesc" placeholder="Description"> <select id="newTaskPriority"><option>high</option><option>medium</option><option>low</option></select> <button class="btn" onclick="addCustomTask()">Add task</button> </div> `; } function renderLaunch() { return ` <div class="card"> <h3>🚀 Launch timeline</h3> ${state.milestones.map((m,i)=>` <div class="timeline-item"> <div class="timeline-dot" style="background:${m.done?'var(--success)':'var(--primary)'}"></div> <div style="flex:1"> <div style="display:flex; justify-content:space-between;"> <strong>${m.phase}</strong> <span class="tag">${m.done?'✓ done':'pending'}</span> </div> <div style="color:var(--muted); font-size:13px;">${m.tasks.join(' · ')}</div> </div> </div> `).join('')} </div> <div class="card"> <h3>⏳ Countdown</h3> <div style="font-size:48px; font-weight:800; color:var(--primary);">${getCountdown()}</div> <p>until launch day (${state.product.launchDate})</p> </div> `; } function renderCopy() { const c = state.copy; return ` <div class="card"> <h3>✍️ Generated copy</h3> <div class="copy-block"><strong>Description:</strong> ${c.description}</div> <div class="copy-block"><strong>Tagline:</strong> ${c.tagline}</div> <div class="copy-block"><strong>Elevator pitch:</strong> ${c.pitch}</div> <div class="copy-block"><strong>Value prop:</strong> ${c.valueProp}</div> <div class="copy-block"><strong>Email:</strong> ${c.email}</div> <div class="copy-block"><strong>Social:</strong> ${c.social}</div> <button class="btn" onclick="regenerateCopy()">🔄 Regenerate</button> </div> `; } function renderMarketing() { return ` <div class="card"> <h3>📣 Outreach channels</h3> ${state.marketing.map((m,i)=>` <div style="display:flex; justify-content:space-between; padding:12px; border-bottom:1px solid var(--border);"> <div><strong>${m.channel}</strong><div style="font-size:12px;color:var(--muted)">${m.notes}</div></div> <div><span class="tag">${m.status}</span></div> </div> `).join('')} </div> `; } function renderMetrics() { const m = state.metrics, g = state.goals; return ` <div class="grid-2"> <div class="card"><h3>📈 Metrics</h3> <div>Revenue: $${m.revenue} / $${g.revenue}</div> <div>Users: ${m.users} / ${g.users}</div> <div>Sign-ups: ${m.signups} / ${g.signups}</div> <div>Engagement: ${m.engagement}% / ${g.engagement}%</div> </div> <div class="card"><h3>🎯 Update metrics</h3> <input id="metricRevenue" value="${m.revenue}" placeholder="Revenue"> <input id="metricUsers" value="${m.users}" placeholder="Users"> <button class="btn" onclick="updateMetrics()">Update</button> </div> </div> `; } function renderNotes() { return ` <div class="card"> <h3>📝 Notes & brainstorming</h3> <input id="noteText" placeholder="Write a note..."> <select id="noteTag"><option>Product</option><option>Marketing</option><option>Launch</option><option>Operations</option></select> <button class="btn" onclick="addNote()">Add note</button> <div style="margin-top:16px;"> ${state.notes.map(n=>`<div class="note-item"><span class="tag">${n.tag}</span> ${n.text}</div>`).join('')} </div> </div> `; } // ---------- actions ---------- function attachEvents() { document.querySelectorAll('.nav-item').forEach(btn=>{ btn.addEventListener('click', (e)=>{ document.querySelectorAll('.nav-item').forEach(b=>b.classList.remove('active')); btn.classList.add('active'); currentView = btn.dataset.view; render(); }); }); // drag & drop document.querySelectorAll('.task-item').forEach(item=>{ item.addEventListener('dragstart', (e)=>{ e.dataTransfer.setData('text/plain', item.dataset.taskId); }); }); document.querySelectorAll('.task-col').forEach(col=>{ col.addEventListener('dragover', e=>e.preventDefault()); col.addEventListener('drop', (e)=>{ e.preventDefault(); const taskId = e.dataTransfer.getData('text/plain'); const newStatus = col.dataset.col; const task = state.tasks.find(t=>t.id == taskId); if(task) { task.status = newStatus; save(); render(); } }); }); // theme toggle const themeBtn = document.getElementById('themeToggle'); if(themeBtn) themeBtn.addEventListener('click', ()=>{ state.darkMode = !state.darkMode; document.body.classList.toggle('dark', state.darkMode); save(); render(); }); // export/import document.getElementById('exportBtn').addEventListener('click', ()=>{ const blob = new Blob([JSON.stringify(state,null,2)], {type:'application/json'}); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download='launchos-backup.json'; a.click(); }); document.getElementById('importBtn').addEventListener('click', ()=>{ const input = document.createElement('input'); input.type='file'; input.accept='application/json'; input.onchange = (e)=>{ const file = e.target.files[0]; if(!file) return; const reader = new FileReader(); reader.onload = (ev)=>{ try { state = JSON.parse(ev.target.result); save(); render(); } catch(err){ alert('invalid json'); } }; reader.readAsText(file); }; input.click(); }); } // global functions window.quickAddTask = function(){ state.tasks.push({id:Date.now(), title:'New task', desc:'', priority:'medium', status:'todo', assignee:'AI', due:'2025-05-01', deps:[]}); save(); render(); }; window.quickAddNote = function(){ state.notes.push({id:Date.now(), text:'New idea', tag:'Product'}); save(); render(); }; window.quickMilestone = function(){ state.milestones.push({phase:'New phase', tasks:['task'], done:false}); save(); render(); }; window.updateProduct = function(){ const p = state.product; p.name = document.getElementById('prodName').value; p.tagline = document.getElementById('prodTagline').value; p.audience = document.getElementById('prodAudience').value; p.problem = document.getElementById('prodProblem').value; p.features = document.getElementById('prodFeatures').value.split(',').map(s=>s.trim()); p.revenueModel = document.getElementById('prodRevenue').value; p.launchDate = document.getElementById('prodLaunch').value; save(); render(); }; window.addCustomTask = function(){ const title = document.getElementById('newTaskTitle').value; if(!title) return; state.tasks.push({id:Date.now(), title, desc:document.getElementById('newTaskDesc').value, priority:document.getElementById('newTaskPriority').value, status:'todo', assignee:'AI', due:'2025-05-01', deps:[]}); save(); render(); }; window.regenerateCopy = function(){ state.copy.description = state.product.name + ' helps ' + state.product.audience + ' with ' + state.product.problem; state.copy.tagline = 'Launch smarter with ' + state.product.name; state.copy.pitch = 'Stop guessing. ' + state.product.name + ' gives you clarity.'; state.copy.valueProp = 'Save 10 hours/week with ' + state.product.name; state.copy.email = 'Hey {{user}}, ready to launch ' + state.product.name + '?'; state.copy.social = '🚀 We are building ' + state.product.name + ' – join the waitlist!'; save(); render(); }; window.updateMetrics = function(){ state.metrics.revenue = parseFloat(document.getElementById('metricRevenue').value) || 0; state.metrics.users = parseFloat(document.getElementById('metricUsers').value) || 0; save(); render(); }; window.addNote = function(){ const text = document.getElementById('noteText').value; if(!text) return; const tag = document.getElementById('noteTag').value; state.notes.push({id:Date.now(), text, tag}); save(); render(); }; // init document.body.classList.toggle('dark', state.darkMode); render(); })(); </script> </body> </html>

登录以查看完整提示词

继续使用:

登录即表示你同意我们的 使用条款 和 隐私政策

用法

此提示词专为 coding 设计。复制上方内容并粘贴到你常用的 AI 工具中。

为获得最佳效果,可将占位符(方括号或大写字母标示)替换为你的具体需求。

参考资料

分类:coding| twitter| startup-management| html-css-javascript

讨论