热门角色不仅是灵感来源,更是你的效率助手。通过精挑细选的角色提示词,你可以快速生成高质量内容、提升创作灵感,并找到最契合你需求的解决方案。让创作更轻松,让价值更直接!
我们根据不同用户需求,持续更新角色库,让你总能找到合适的灵感入口。
本提示词专为数字内容创作者和营销人员设计,能够根据特定主题、目标受众和情感基调,生成结构完整、视觉吸引力强的网页故事模板。通过系统化的故事架构分析和创意内容生成,帮助用户快速打造具有沉浸式体验的数字化故事内容。提示词采用分步式工作流程,从主题深度挖掘到视觉元素规划,确保每个故事既符合品牌调性又能有效吸引目标群体。特别适合社交媒体营销、品牌故事传播、产品推广等场景,能够显著提升内容创作效率和质量,让每个故事都能成为吸引眼球的视觉盛宴。
## 网页故事创作方案 ### 故事主题分析 - 核心价值点:绿色通勤的轻盈自由;在城市节奏中寻找个人掌控感;用可持续选择换取更好的心情与健康;微小改变累积城市温度与文明风尚 - 目标受众特征:18-35岁年轻通勤族,时间碎片化、偏爱移动端阅读;注重效率与审美,热爱轻社交;愿为自我提升与环保投入低门槛尝试 - 情感基调设定:清新、克制、向上;以第二人称叙述拉近距离,用自然意象与生活细节营造共鸣与治愈感 ### 故事架构设计 #### 开头部分 - 吸引注意力的开场设计:以“清晨6:58”的具象时刻切入,风、车铃、影子等感官细节瞬间拉入故事 - 背景介绍和情境营造:地铁拥挤与通勤焦虑的对比,骑行成为轻盈替代方案 #### 发展部分 - 情节推进和冲突构建:坡道、红绿灯、小雨、桥上逆风等小型挑战;节奏与呼吸的自我调适 - 关键转折点设计:雨后金色阳光与提前到达,外部环境与内在状态同时转晴 #### 高潮部分 - 情感峰值营造:与陌生骑行者的默契点头;数据反馈与内心自由形成对照 - 核心信息传递:骑行不只是抵达方式,而是找回一天主导权的开始 #### 结尾部分 - 情感收束和价值升华:风留在胸口,工作日也能被温柔打开 - 行动号召或思考引导:订阅连载、规划首条骑行路线、加入城市骑行社群 ### 视觉元素规划 #### 主要视觉焦点 - 关键场景视觉描述:清晨微光的城市天际线;桥上逆风的剪影;雨珠打在车铃与镜面路; 楼下相互致意的骑行者 - 色彩搭配方案:主色薄荷绿(活力与环保);辅色天空蓝(清爽与空气感);点缀暖橙(晨光与人情味);大面积留白与柔和阴影 #### 辅助视觉元素 - 图标和装饰元素:自行车、叶子、时钟、雨滴线性图标;路线丝带式路径 - 动画效果建议:滚动视差的城市背景;章节淡入与微位移;“速度线”轻微流动;数据卡片的上弹式出现 ### 完整故事模板 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>城市骑行连载 · 第1季</title> <meta name="description" content="一部关于年轻通勤族的城市骑行连载。用一阵风,打开你的每个清晨。"> <style> :root{ --bg:#f3fbff; --paper:#ffffff; --ink:#0f2a2a; --sub:#5a6b72; --mint:#2ec4a6; --sky:#59a3ff; --sun:#ffb169; --line:rgba(15,42,42,.08); --shadow:0 12px 28px rgba(0,0,0,.08); --radius:16px; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; color:var(--ink); background:linear-gradient(180deg,var(--bg),#f5fff8 60%,#ffffff); line-height:1.6; } a{color:var(--mint);text-decoration:none} img{max-width:100%;display:block} button,input,select,textarea{font:inherit} header{ position:sticky;top:0;z-index:50; background:rgba(255,255,255,.72); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .nav{ max-width:1080px;margin:0 auto;padding:12px 16px; display:flex;align-items:center;justify-content:space-between;gap:12px; } .brand{ display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.5px; } .brand .logo{ width:32px;height:32px;border-radius:8px; background: conic-gradient(from 180deg at 50% 50%, var(--mint), var(--sky), var(--sun), var(--mint)); box-shadow:0 6px 16px rgba(46,196,166,.35); } .nav a.link{padding:8px 12px;border-radius:10px;color:var(--ink)} .nav a.cta{ padding:8px 14px;background:var(--mint);color:#fff;border-radius:12px;font-weight:600; box-shadow:0 8px 18px rgba(46,196,166,.25); } .progress{ position:absolute;left:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--mint),var(--sky)); width:0%; } .hero{ position:relative;overflow:hidden; max-width:1080px;margin:0 auto;padding:64px 16px 24px; } .hero-grid{ display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center; } @media(max-width:900px){.hero-grid{grid-template-columns:1fr}} .hero h1{ font-size:clamp(28px,5vw,48px);line-height:1.15;margin:0 0 12px 0; } .hero p{color:var(--sub);margin:0 0 18px} .badges{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 18px} .badge{ padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#3b4b51;font-size:14px; } .hero-cta{display:flex;gap:12px;flex-wrap:wrap} .btn{ padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:#fff;cursor:pointer; } .btn.primary{background:var(--ink);color:#fff;border-color:transparent} .scene{ position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow); aspect-ratio:4/3;background:#e8f6ff; } .scene img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.05)} .scene .veil{ position:absolute;inset:0;background:radial-gradient(120% 100% at 70% 30%, transparent 0%, rgba(0,0,0,.15) 60%, rgba(0,0,0,.25) 100%); } .speed-lines{ position:absolute;inset:auto -20% 10% -20%;height:30%; background:repeating-linear-gradient(100deg, rgba(46,196,166,.0) 0, rgba(46,196,166,.25) 2px, transparent 8px); animation:flow 9s linear infinite;mix-blend-mode:multiply;opacity:.35; } @keyframes flow{to{transform:translateX(-20%)}} .catalog{ max-width:1080px;margin:6px auto 12px;padding:0 16px 8px;border-bottom:1px dashed var(--line); } .catalog-list{display:flex;gap:12px;overflow:auto;padding:6px 2px} .tag{ white-space:nowrap;background:#fff;border:1px solid var(--line);padding:8px 12px;border-radius:999px;font-size:14px;color:#314248 } .tag.active{background:var(--mint);color:#fff;border-color:transparent} .section{ max-width:1000px;margin:0 auto;padding:56px 16px 32px;position:relative; } .card{ background:var(--paper);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow); overflow:hidden;display:grid;grid-template-columns:1fr 1fr;gap:0; } @media(max-width:900px){.card{grid-template-columns:1fr}} .card .visual{position:relative} .card .visual img{height:100%;width:100%;object-fit:cover} .card .content{padding:28px 24px} .h2{font-size:24px;margin:0 0 8px} .meta{color:var(--sub);font-size:14px;margin-bottom:14px} .p{margin:0 0 12px;color:#223338} .kpi{ display:flex;gap:12px;flex-wrap:wrap;margin-top:12px } .kpi .pill{ background:linear-gradient(180deg,#f7fffb,#eafff7); border:1px solid rgba(46,196,166,.3);color:#0f3b33;border-radius:12px;padding:8px 12px;font-weight:600 } .gallery{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px} @media(max-width:700px){.gallery{grid-template-columns:1fr}} .block{ background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px } .fade{opacity:0;transform:translateY(12px);transition:all .7s cubic-bezier(.2,.7,.2,1)} .show{opacity:1;transform:translateY(0)} .parallax{transform:translateY(0);transition:transform .4s ease-out;will-change:transform} .metrics{ position:sticky;top:60px;z-index:5;max-width:1000px;margin:0 auto 0;display:flex;gap:12px;padding:0 16px } .chip{ background:#ffffffbd;backdrop-filter:blur(6px); border:1px solid var(--line);border-radius:14px;padding:10px 12px;display:flex;align-items:center;gap:8px;font-size:14px } .dot{width:8px;height:8px;border-radius:50%} .dot.m{background:var(--mint)}.dot.s{background:var(--sky)}.dot.u{background:var(--sun)} .cta{ max-width:1000px;margin:12px auto 80px;padding:0 16px;display:grid;grid-template-columns:1.2fr .8fr;gap:16px } @media(max-width:900px){.cta{grid-template-columns:1fr}} .form{ background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 16px;box-shadow:var(--shadow) } .form h3{margin:0 0 6px} .field{display:grid;gap:6px;margin:10px 0} .input{ width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fbfeff } .actions{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap} .btn.sun{background:var(--sun);color:#222;border:0} .footer{ max-width:1000px;margin:0 auto;padding:28px 16px;color:var(--sub);border-top:1px solid var(--line) } .read-progress{ position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--mint),var(--sky));width:0%;z-index:60 } .notice{ position:fixed;right:16px;bottom:16px;background:#0f2a2a;color:#fff;padding:12px 14px;border-radius:12px;opacity:0;transform:translateY(8px);pointer-events:none;transition:all .4s } .notice.show{opacity:1;transform:translateY(0)} </style> </head> <body> <div class="read-progress" id="progress"></div> <header> <div class="nav"> <div class="brand"><div class="logo" aria-hidden="true"></div>城市骑行连载 · 第1季</div> <nav> <a class="link" href="#ep1">早晨的风</a> <a class="link" href="#ep2">城市的节奏</a> <a class="link" href="#ep3">雨中的路</a> <a class="link" href="#ep4">一起出发</a> <a class="link cta" href="#join">订阅更新</a> </nav> </div> <div class="progress" id="navProgress"></div> </header> <section class="hero"> <div class="hero-grid"> <div> <h1 class="fade">两站地的距离,也值得被温柔地抵达</h1> <p class="fade">清晨6:58,城市还没完全醒来。你跨上车,车铃轻响,风在袖口里笑起来。</p> <div class="badges fade"> <span class="badge">低碳通勤</span> <span class="badge">轻社交</span> <span class="badge">身心平衡</span> </div> <div class="hero-cta fade"> <a class="btn primary" href="#ep1">开始阅读</a> <a class="btn" href="#join">订阅连载</a> </div> </div> <div class="scene fade parallax" data-parallax="12"> <img src="https://images.unsplash.com/photo-1541625602330-2277a4c46182?q=80&w=1600&auto=format&fit=crop" alt="清晨城市天际线与骑行者剪影"> <div class="veil"></div> <div class="speed-lines"></div> </div> </div> </section> <section class="catalog"> <div class="catalog-list"> <a class="tag active" href="#ep1">EP01 · 早晨的风</a> <a class="tag" href="#ep2">EP02 · 城市的节奏</a> <a class="tag" href="#ep3">EP03 · 雨中的路</a> <a class="tag" href="#ep4">EP04 · 一起出发</a> <a class="tag" href="#ep5">EP05 · 抵达之前</a> </div> </section> <div class="metrics"> <div class="chip"><span class="dot m"></span>绿色出行</div> <div class="chip"><span class="dot s"></span>节省时间</div> <div class="chip"><span class="dot u"></span>好心情</div> </div> <section class="section" id="ep1"> <div class="card fade"> <div class="visual parallax" data-parallax="10"> <img src="https://images.unsplash.com/photo-1506956191977-4b9f2703d05e?q=80&w=1600&auto=format&fit=crop" alt="朝阳下的城市桥面与单车"> </div> <div class="content"> <h2 class="h2">EP01 · 早晨的风</h2> <div class="meta">第一天上路 · 6:58 AM</div> <p class="p">电梯前还在排队,公交站已经拥挤。你从人群身边轻轻滑过,红灯前稳稳停下,呼吸不再被催促。</p> <p class="p">坡道像一道小测试,桥上的风有点大,腿也有点酸。你学会把节奏交给呼吸,而不是交给焦虑。</p> <p class="p">第一滴小雨落下,雨披像一片叶子,你放慢一点,绕过水坑。抬头,一条金色的光从云缝里晃出来。</p> <div class="kpi"> <div class="pill">节省 18 分钟</div> <div class="pill">燃烧 236 千卡</div> <div class="pill">少排放 720 克 CO₂</div> </div> <div class="gallery"> <div class="block">你把车停在公司楼下,一个骑行者冲你点头。你们不认识,却像彼此的队友。</div> <div class="block">屏幕上的数字很小,心里的自由很大。风,留在了胸口里。</div> </div> </div> </div> </section> <section class="section" id="ep2"> <div class="card fade"> <div class="content"> <h2 class="h2">EP02 · 城市的节奏</h2> <div class="meta">熟悉路线 · 7:11 AM</div> <p class="p">你记住了每一盏红灯的节拍,哪家面包房几点出炉,哪条小路更顺风。城市的脉搏不再催赶你,而是与你并肩。</p> <p class="p">你发现:骑行不是更快,而是更稳。稳稳地把自己送到今天的开始。</p> </div> <div class="visual parallax" data-parallax="8"> <img src="https://images.unsplash.com/photo-1465447142348-e9952c393450?q=80&w=1600&auto=format&fit=crop" alt="清新街角与晨光面包房"> </div> </div> </section> <section class="section" id="ep3"> <div class="card fade"> <div class="visual parallax" data-parallax="8"> <img src="https://images.unsplash.com/photo-1471879832106-c7ab9e0cee23?q=80&w=1600&auto=format&fit=crop" alt="雨滴打在车铃和镜面路面"> </div> <div class="content"> <h2 class="h2">EP03 · 雨中的路</h2> <div class="meta">慢一点 · 更安全</div> <p class="p">雨天你把速度交给安全,把心交给风景。路面像一面镜子,映出你专注的侧脸。</p> <p class="p">你学会了几件小事:提前刹车、避开井盖、和行人保持礼貌的距离。文明,也是通勤的一部分温度。</p> </div> </div> </section> <section class="section" id="ep4"> <div class="card fade"> <div class="content"> <h2 class="h2">EP04 · 一起出发</h2> <div class="meta">晨光车队 · 互相点亮</div> <p class="p">你加入了“晨光车队”。有人分享夜骑的路线,有人借你一副反光贴。路在延伸,伙伴在增加。</p> <p class="p">你们约定:彼此照应、礼让行人、遇见新手就慢下来。一起到达,比独自更远。</p> </div> <div class="visual parallax" data-parallax="8"> <img src="https://images.unsplash.com/photo-1505330622279-bf7d7fc918f4?q=80&w=1600&auto=format&fit=crop" alt="骑行者并肩穿行的城市清晨"> </div> </div> </section> <section class="section" id="ep5"> <div class="card fade"> <div class="visual parallax" data-parallax="8"> <img src="https://images.unsplash.com/photo-1444492696363-332accfd40c0?q=80&w=1600&auto=format&fit=crop" alt="公司楼下柔和晨光与停靠的单车"> </div> <div class="content"> <h2 class="h2">EP05 · 抵达之前</h2> <div class="meta">提前 10 分钟 · 留给自己</div> <p class="p">你比打卡早到了十分钟。把车擦干净,买一杯温水,给今天一个从容的开场。</p> <p class="p">工作日也可以温柔。真正的抵达,是在心里先抵达。</p> </div> </div> </section> <section class="cta" id="join"> <div class="form fade"> <h3>订阅连载 · 夜骑篇预告</h3> <p class="p">下一集:夜色里的回家路线,如何把疲惫安放在路灯下。</p> <div class="field"> <label for="email">邮箱</label> <input id="email" class="input" type="email" placeholder="例如:ride@city.com" aria-label="邮箱"> </div> <div class="field"> <label for="route">想骑的起点 / 终点</label> <input id="route" class="input" type="text" placeholder="例如:双井地铁站 → 国贸" aria-label="路线"> </div> <div class="actions"> <button class="btn primary" id="subscribe">订阅更新</button> <a class="btn sun" href="#plan">规划我的第一条路线</a> </div> </div> <div class="form fade" id="plan"> <h3>快速规划 · 轻松上路</h3> <div class="field"> <label for="time">出发时间</label> <select id="time" class="input" aria-label="出发时间"> <option>6:30</option><option>7:00</option><option>7:30</option><option>8:00</option> </select> </div> <div class="field"> <label for="preference">路线偏好</label> <select id="preference" class="input" aria-label="路线偏好"> <option>坡度更缓</option><option>红绿灯更少</option><option>景色更好</option> </select> </div> <div class="actions"> <button class="btn" id="preview">生成示例路线</button> <button class="btn primary" id="save">保存我的出发仪式</button> </div> <div class="block fade" id="routeCard" style="display:none;margin-top:10px"> <strong>示例路线:</strong> 河滨绿道 → 桥西辅路 → 社区花园东口<br> 预计 22 分钟 · 4.8 公里 · 减少 600 克 CO₂ </div> </div> </section> <section class="footer"> 城市骑行倡议:文明礼让、安全出行、绿色低碳、互助友爱。让每一次出发,都为城市添一分温度。 </section> <div class="notice" id="toast">已订阅,清晨见!</div> <script> const io = new IntersectionObserver(entries=>{ entries.forEach(e=>{ if(e.isIntersecting) e.target.classList.add('show'); }) },{threshold:.15}); document.querySelectorAll('.fade').forEach(el=>io.observe(el)); const progress = document.getElementById('progress'); document.addEventListener('scroll',()=>{ const h = document.documentElement; const scrolled = (h.scrollTop)/(h.scrollHeight - h.clientHeight); progress.style.width = (scrolled*100)+'%'; }); const parallaxEls = document.querySelectorAll('[data-parallax]'); document.addEventListener('scroll',()=>{ parallaxEls.forEach(el=>{ const speed = parseFloat(el.dataset.parallax)||8; const rect = el.getBoundingClientRect(); const offset = (rect.top - window.innerHeight/2)/window.innerHeight; el.style.transform = `translateY(${offset*speed}px)`; }); }); const subscribe = document.getElementById('subscribe'); const toast = document.getElementById('toast'); if(subscribe){ subscribe.addEventListener('click',e=>{ e.preventDefault(); toast.classList.add('show'); setTimeout(()=>toast.classList.remove('show'),2200); }); } const preview = document.getElementById('preview'); const routeCard = document.getElementById('routeCard'); if(preview){ preview.addEventListener('click',e=>{ e.preventDefault(); routeCard.style.display='block'; setTimeout(()=>routeCard.classList.add('show'),10); }); } const save = document.getElementById('save'); if(save){ save.addEventListener('click',e=>{ e.preventDefault(); toast.textContent='已保存你的出发仪式'; toast.classList.add('show'); setTimeout(()=>{ toast.classList.remove('show'); toast.textContent='已订阅,清晨见!'; },2200); }); } document.querySelectorAll('.catalog-list .tag').forEach(tag=>{ tag.addEventListener('click',()=>{ document.querySelectorAll('.catalog-list .tag').forEach(t=>t.classList.remove('active')); tag.classList.add('active'); }); }); </script> </body> </html>
用它快速搭建品牌故事专题与社媒长图,统一口径与情感基调,批量生成多版本方案做投放测试,缩短提案到上线的周期。
将卖点拆解为场景化故事页,一键生成开场钩子、对比转折与购买引导,并给出视觉焦点与色彩方案,有效提升转化与客单。
按受众画像定制叙述风格,轻松孵化系列化选题与连载网页故事,附带封面、标题与动画建议,显著提高完读率与分享率。
把抽象知识转成可视化故事课件,自动规划章节节奏与互动提示,生成易懂语言与配图方案,提升课堂参与度与记忆效果。
用于策划深度专题与互动长文,快速梳理线索、冲突与高潮,配套视觉时间线与信息图建议,增强权威度与阅读黏性。
在有限人手下高效产出产品发布页与路演故事页,聚焦价值主张与用户痛点,形成清晰转化路径与行动号召,助力获客与融资。
把常见问题与上手流程故事化呈现,生成步骤可视化与温和提示语,降低学习门槛,缩短激活时间并减少重复咨询。
用一次输入,拿走一整套可发布的沉浸式网页故事。面向品牌、运营、内容与电商团队,本提示词帮助你: - 以“主题+受众+情感”三要素,快速产出从主题洞察、故事大纲、完整文案到视觉规划的全链路方案。 - 将抽象创意转化为能够抓住注意力、易于理解、符合品牌调性的故事页面雏形,兼顾美感与转化。 - 将创作周期从“多轮沟通+分工协作”压缩到小时级,稳定交付高质量内容。 - 内置情感曲线与行动号召设计,提升阅读完成度、停留时长与转化效率。 - 一稿多用,覆盖社媒活动页、产品故事页、品牌专题、教育互动内容等多场景,显著降低外包与返工成本。 - 全流程把控合规与用词口径,避免不当内容与过度专业表达,让传播更安心、更通俗。
将模板生成的提示词复制粘贴到您常用的 Chat 应用(如 ChatGPT、Claude 等),即可直接对话使用,无需额外开发。适合个人快速体验和轻量使用场景。
把提示词模板转化为 API,您的程序可任意修改模板参数,通过接口直接调用,轻松实现自动化与批量处理。适合开发者集成与业务系统嵌入。
在 MCP client 中配置对应的 server 地址,让您的 AI 应用自动调用提示词模板。适合高级用户和团队协作,让提示词在不同 AI 工具间无缝衔接。
免费获取高级提示词-优惠即将到期