高效前端工程AI应用原型规划提示词

角色定义与任务定位

请以「资深前端架构师兼产品原型策划师」的身份，运用本提示词方案。你的核心目标是：将模糊的AI应用创意，转化为一份具备清晰信息架构、模块布局、技术实现思路及界面风格指引的高保真原型规划图，为后续的详细UI设计和前端开发提供可直接参考的视觉与逻辑蓝图。

适用场景

• 在项目初期，需要快速可视化AI工具（如智能表单、内容生成器、数据分析面板）的整体页面流与功能模块。
• 向团队或客户演示AI应用的核心交互逻辑、数据流向与界面分区。
• 为UI设计师提供包含明确组件构成、状态说明及布局约束的输入文档。
• 梳理复杂AI功能（如模型选择、参数调整、结果展示区）在前端界面的集成方案。

核心提示词

可直接用于图像生成或脑图工具的核心描述组合：

• **主提示框架**：A comprehensive, clean wireframe/prototype layout for a “[你的AI应用名称，如：AI代码助手]” web application, showing dashboard, input panel, AI processing flow, and output display.
• **技术氛围词**：Tech-infused, modern web design, with clear visual hierarchy, annotated components, data flow arrows.
• **布局关键词**：Responsive grid layout, sidebar navigation, main content area, modal window for AI settings, collapsible panels, real-time preview section.
• **动态元素**：User flow indicators, interactive element states (default/hover/active), placeholder charts, mock API endpoint labels.

风格方向

• **视觉基调**：采用极简主义与现代科技感融合的风格。避免过度装饰，强调清晰的信息层级与留白。
• **色彩方向**：主色系建议使用深蓝(#1e3a8a)或深灰(#1f2937)搭配亮色（如青色(#06b6d4)或绿色(#10b981)）作为交互高亮色。使用浅灰色(#f3f4f6)作为背景区分区块。
• **线框与标注**：使用精细的灰色线条勾勒组件边界，关键交互点或数据流用带有箭头的彩色线条（建议使用上述高亮色）标注并辅以简短说明文字。
• **材质与质感**：整体为扁平化设计，可对关键按钮或卡片添加细微的阴影或渐变，以提升层次感。

构图建议

• **全景规划图**：采用从上至下的“总-分”构图。顶部为应用Logo与全局导航栏；左侧为垂直的功能模块导航菜单；中部主体区域划分为：参数输入区（左侧）、AI处理状态可视化区（中部）、结果输出与历史记录区（右侧）。
• **细节聚焦图**：针对复杂模块（如“AI模型参数配置面板”），采用弹出层(Modal)或抽屉(Drawer)式构图特写，展示滑块、下拉菜单、开关等控件的布局关系。
• **流程示意图**：在规划图空白处，或用浮动标注的形式，以“1→2→3”的编号箭头清晰展示从用户输入、到AI处理、再到结果反馈的核心交互流程。
• **镜头语言**：整体以俯视的“蓝图视角”为主，营造规划感。关键交互组件可辅以轻微的轴测图角度展示，增强立体感和可读性。

细节强化

• **组件标注**：为每个主要UI区块（如“Prompt输入框”、“模型选择下拉菜单”、“响应流式输出区域”）添加简短的[label]，说明其功能与技术属性（例如：``, `async API call`）。</li> <li>**状态展示**：对于交互元素，展示其不同状态。例如，一个“生成”按钮，可并列展示默认状态、悬停状态(Hover)和加载中状态（带有旋转指示器）。</li> <li>**数据模拟**：在图表或列表区域，使用有意义的占位数据，如“Token使用量: 125/1000”，“处理耗时: 1.2s”，增强原型的真实感与可理解性。</li> <li>**响应式提示**：在规划图角落或边缘，用简短注释标明不同屏幕尺寸（Desktop / Tablet / Mobile）下的布局调整策略，如“侧栏折叠为汉堡菜单”。</li> </ul> <h2>使用建议</h2> <ul> <li>**分步生成**：先生成整体布局框架，再针对复杂模块使用“核心提示词+细节强化词”进行局部细化生成，最后组合成完整方案。</li> <li>**工具结合**：可将AI生成的规划图导入Figma、Axure等设计工具，基于其结构快速绘制可交互的高保真原型。</li> <li>**提示词迭代**：在生成结果基础上，针对不满意的部分进行精准描述调整，如“将输出区域改为卡片式瀑布流布局，并添加复制按钮”。</li> <li>**团队协作**：将此规划图作为团队讨论的基础，利用其清晰的模块划分，分别评估前端实现复杂度与UI设计工作量。</li> </ul> </CONTENT></div> </section> </article> <section class="mobilepromptdetail_section"> <div class="mobilepromptdetail_prevnext"> <a href="https://m.cn486.com/news/4075096/" title="上一篇 Web3项目爆文选题策划结构化提示词"><span>上一篇</span><strong>Web3项目爆文选题策划结构化提示词</strong></a> <a href="https://m.cn486.com/news/4075109/" title="下一篇 SOP手册文档解析总结实战版提示词"><span>下一篇</span><strong>SOP手册文档解析总结实战版提示词</strong></a> </div> </section> <section class="mobilepromptdetail_section"> <div class="mobilepromptdetail_sectionhead"><h2>常见问题</h2></div> <div class="mobilepromptdetail_faqmini"> <a href="/aijiaocheng/1.html">这个提示词适合哪些模型使用？</a> <a href="/aijiaocheng/1.html">提示词效果不稳定怎么优化？</a> <a href="/aijiaocheng/1.html">能不能批量生成同类内容？</a> <a href="/aitsc/1.html">查看更多提示词模板</a> </div> </section> <section class="mobilepromptdetail_section"> <div class="mobilepromptdetail_sectionhead"><h2>相关提示词</h2><a href="/aitsc/1.html">更多</a></div> <div class="mobilepromptdetail_related"> <a href="https://m.cn486.com/news/4075103/" title="高效前端工程AI应用原型规划提示词"><div class="mobilepromptdetail_relatedtop"><span>AI提示词</span><em>05-16</em></div><strong>高效前端工程AI应用原型规划提示词</strong><p>本提示词方案专为前端工程师与产品策划人员设计，旨在...</p></a> </div> </section> <section class="mobilepromptdetail_section"> <div class="mobilepromptdetail_linktabs"> <button class="active" type="button" data-detail-link-tab="tutorial">最新教程</button> <button type="button" data-detail-link-tab="news">最新资讯</button> </div> <div class="mobilepromptdetail_links"> <div class="mobilepromptdetail_linkcol mobilepromptdetail_linkpanel active" data-detail-link-panel="tutorial"> <h3>最新教程</h3> <a href="https://m.cn486.com/news/4012142/" title="BAUHAUS框架的安装与环境配置详细步骤">BAUHAUS框架的安装与环境配置详细步骤</a><a href="https://m.cn486.com/news/4013667/" title="AI 驱动的 video enhancer 工具安装与基础配置指南">AI 驱动的 video enhancer 工具安装与基础配置指南</a><a href="https://m.cn486.com/news/4014087/" title="使用AI拜年黑科技工具的具体步骤与配置方法">使用AI拜年黑科技工具的具体步骤与配置方法</a><a href="https://m.cn486.com/news/4015637/" title="AI 驱动的 video enhancer 工具安装与基础配置指南">AI 驱动的 video enhancer 工具安装与基础配置指南</a><a href="https://m.cn486.com/news/4018145/" title="使用AI拜年黑科技工具的具体步骤与配置方法">使用AI拜年黑科技工具的具体步骤与配置方法</a><a href="https://m.cn486.com/news/4019734/" title="DEEPSEEK 本地部署常见问题与解决方案">DEEPSEEK 本地部署常见问题与解决方案</a> </div> <div class="mobilepromptdetail_linkcol mobilepromptdetail_linkpanel" data-detail-link-panel="news"> <h3>最新资讯</h3> <a href="https://m.cn486.com/news/4080339/" title="AI赋能员工培训：专业制度设计与效率提升全攻略">AI赋能员工培训：专业制度设计与效率提升全攻略</a><a href="https://m.cn486.com/news/4080340/" title="年度员工规章制度总结撰写指南：详细范文与实用提示词">年度员工规章制度总结撰写指南：详细范文与实用提示词</a><a href="https://m.cn486.com/news/4080341/" title="员工考勤制度高效建立指南：详细范文与实操提示词">员工考勤制度高效建立指南：详细范文与实操提示词</a><a href="https://m.cn486.com/news/4080343/" title="AI设计软件测评：2024年重塑行业格局的五大核心工具">AI设计软件测评：2024年重塑行业格局的五大核心工具</a><a href="https://m.cn486.com/news/4080336/" title="初中历史教研计划制定指南：高效范文与实用提示词解析">初中历史教研计划制定指南：高效范文与实用提示词解析</a><a href="https://m.cn486.com/news/4080337/" title="AI简化员工制度撰写指南：高效范文与实用提示词解析">AI简化员工制度撰写指南：高效范文与实用提示词解析</a><a href="https://m.cn486.com/news/4080338/" title="AI简化员工制度撰写：高效范文与提示词指南">AI简化员工制度撰写：高效范文与提示词指南</a><a href="https://m.cn486.com/news/4080328/" title="AI软件SD全称：2024年企业提升开发效率与竞争力的权威指南">AI软件SD全称：2024年企业提升开发效率与竞争力的权威指南</a> </div> </div> </section> </main> <footer class="mobilehome_footer"> <div class="mobilehome_footerbrand"> <img src="/style/style2026/mobile/image/logo.png" alt="菜鸟AI" /> <div class="mobilehome_footerbrandtext"> <strong>菜鸟AI</strong> <span>www.cn486.com</span> </div> </div> <p class="mobilehome_footerslogan">菜鸟AI，聚合 AI 提示词、教程、资讯和实用工具内容。</p> <div class="mobilehome_footerlinks"> <a href="/aitsc/1.html" title="提示词模板">提示词模板</a> <a href="/aijiaocheng/1.html" title="AI教程">AI教程</a> <a href="/zixun/1.html" title="最新资讯">最新资讯</a> <a href="/aiapp/1.html" title="热门应用">热门应用</a> <a href="/tag/" title="标签聚合">标签聚合</a> <a href="/newlist/1" title="最新更新">最新更新</a> </div> <div class="mobilehome_footerdivider"></div> <div class="mobilehome_footercopyright">Copyright © 2019-2020 菜鸟AI All Reserved</div> </footer> <div class="mobilehome_authmask"></div> <div class="mobilehome_authmodal" id="mobilehomeAuthModal"> <div class="mobilehome_authinner"> <div class="mobilehome_authhead"> <div> <strong>欢迎回来</strong> <span>登录或注册后，可保存提示词和历史记录</span> </div> <button class="mobilehome_authclose" type="button" data-auth-close>×</button> </div> <div class="mobilehome_authtabs"> <button class="mobilehome_authtab active" type="button" data-auth-tab="login">登录</button> <button class="mobilehome_authtab" type="button" data-auth-tab="signup">注册</button> </div> <div class="mobilehome_authpanel active" data-auth-panel="login"> <div class="mobilehome_authfield"> <label>用户</label> <input type="text" placeholder="请输入用户" data-auth-login-account autocomplete="username" /> </div> <div class="mobilehome_authfield"> <label>密码</label> <input type="password" placeholder="请输入密码" data-auth-login-password autocomplete="current-password" /> </div> <button class="mobilehome_authsubmit" type="button" data-auth-submit="login">立即登录</button> <div class="mobilehome_authtips" data-auth-message="login">登录后可同步收藏、历史记录和常用模板</div> </div> <div class="mobilehome_authpanel" data-auth-panel="signup"> <div class="mobilehome_authfield"> <label>用户</label> <input type="text" placeholder="请输入用户" data-auth-signup-account autocomplete="username" /> </div> <div class="mobilehome_authfield"> <label>设置密码</label> <input type="password" placeholder="请设置登录密码" data-auth-signup-password autocomplete="new-password" /> </div> <div class="mobilehome_authfield"> <label>确认密码</label> <input type="password" placeholder="请再次输入密码" data-auth-signup-repassword autocomplete="new-password" /> </div> <button class="mobilehome_authsubmit" type="button" data-auth-submit="signup">创建账号</button> <div class="mobilehome_authtips" data-auth-message="signup">注册即表示同意服务条款与隐私政策</div> </div> </div> </div> <script src="/style/style2026/mobile/js/common.js"></script> <script> (function () { var fallback = "/style/style2026/mobile/image/logo.png"; function markLoaded(img) { img.classList.add("is-loaded"); } function bindImage(img) { if (!img || img.dataset.safeImageBound === "1") return; img.dataset.safeImageBound = "1"; img.addEventListener("load", function () { markLoaded(img); }); img.addEventListener("error", function () { if (img.dataset.fallbackApplied === "1") { markLoaded(img); return; } img.dataset.fallbackApplied = "1"; img.src = fallback; }); if (img.complete) { if (img.naturalWidth > 0) { markLoaded(img); } else if (img.src !== fallback) { img.dataset.fallbackApplied = "1"; img.src = fallback; } } } function scanImages() { var images = document.querySelectorAll(".mobilehome_page img"); for (var i = 0; i < images.length; i++) { bindImage(images[i]); } } function observeImages() { if (!window.MutationObserver || !document.body) return; var observer = new MutationObserver(function (mutations) { for (var i = 0; i < mutations.length; i++) { var nodes = mutations[i].addedNodes; for (var j = 0; j < nodes.length; j++) { var node = nodes[j]; if (!node || node.nodeType !== 1) continue; if (node.matches && node.matches("img")) { bindImage(node); } if (node.querySelectorAll) { var nestedImages = node.querySelectorAll("img"); for (var k = 0; k < nestedImages.length; k++) { bindImage(nestedImages[k]); } } } } }); observer.observe(document.body, { childList: true, subtree: true }); } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", function () { scanImages(); observeImages(); }); } else { scanImages(); observeImages(); } })(); </script> <script> (function () { var apiBase = "/index.php?m=member&c=mini_ai&a="; var mask = document.querySelector(".mobilehome_authmask"); var modal = document.querySelector(".mobilehome_authmodal"); var loginButton = document.querySelector('[data-auth-open="login"]'); var signupButton = document.querySelector('[data-auth-open="signup"]'); var tabs = document.querySelectorAll("[data-auth-tab]"); var panels = document.querySelectorAll("[data-auth-panel]"); function setMessage(type, text) { var node = document.querySelector('[data-auth-message="' + type + '"]'); if (node) node.textContent = text; } function switchAuthTab(target) { for (var i = 0; i < tabs.length; i++) { tabs[i].classList.toggle("active", tabs[i].getAttribute("data-auth-tab") === target); } for (var j = 0; j < panels.length; j++) { panels[j].classList.toggle("active", panels[j].getAttribute("data-auth-panel") === target); } } function openAuth(target) { if (!mask || !modal) return; switchAuthTab(target || "login"); mask.classList.add("active"); modal.classList.add("active"); document.body.style.overflow = "hidden"; } function closeAuth() { if (!mask || !modal) return; mask.classList.remove("active"); modal.classList.remove("active"); document.body.style.overflow = ""; } function renderUser(data) { var isLogin = data && parseInt(data.is_login || 0, 10) === 1; if (!loginButton || !signupButton) return; if (isLogin) { var name = data.nickname || data.username || data.email || "已登录"; loginButton.textContent = name; loginButton.removeAttribute("data-auth-open"); loginButton.classList.add("is-logined"); signupButton.textContent = "退出"; signupButton.setAttribute("data-auth-open", "logout"); signupButton.classList.add("ghost"); } else { loginButton.textContent = "登录"; loginButton.setAttribute("data-auth-open", "login"); loginButton.classList.remove("is-logined"); signupButton.textContent = "注册"; signupButton.setAttribute("data-auth-open", "signup"); signupButton.classList.remove("ghost"); } } function ajaxPost(action, data, done) { if (!window.jQuery) return; $.post(apiBase + action, data, function (res) { done(res || {}); }, "json").fail(function () { done({status: 0, msg: "请求失败，请稍后重试"}); }); } function fetchUser() { if (!window.jQuery) return; $.ajax({ url: apiBase + "public_quota&_t=" + new Date().getTime(), dataType: "json", timeout: 5000, cache: false }).done(function (res) { if (res && res.status == 1) renderUser(res.data || {}); }); } function submitLogin(button) { var account = document.querySelector("[data-auth-login-account]"); var password = document.querySelector("[data-auth-login-password]"); var username = account ? account.value.trim() : ""; var pass = password ? password.value : ""; if (!username || !pass) { setMessage("login", "请输入账号和密码"); return; } button.disabled = true; setMessage("login", "正在登录..."); ajaxPost("public_login", {username: username, password: pass}, function (res) { button.disabled = false; if (res.status == 1) { setMessage("login", "登录成功"); window.location.reload(); } else { setMessage("login", res.msg || "登录失败，请检查账号密码"); } }); } function submitSignup(button) { var account = document.querySelector("[data-auth-signup-account]"); var password = document.querySelector("[data-auth-signup-password]"); var repassword = document.querySelector("[data-auth-signup-repassword]"); var username = account ? account.value.trim() : ""; var pass = password ? password.value : ""; var pass2 = repassword ? repassword.value : ""; if (!username || !pass) { setMessage("signup", "请输入账号和密码"); return; } if (pass !== pass2) { setMessage("signup", "两次输入的密码不一致"); return; } button.disabled = true; setMessage("signup", "正在创建账号..."); ajaxPost("public_register", {username: username, password: pass}, function (res) { button.disabled = false; if (res.status == 1) { setMessage("signup", "注册成功"); window.location.reload(); } else { setMessage("signup", res.msg || "注册失败，请稍后重试"); } }); } document.addEventListener("click", function (event) { var open = event.target.closest ? event.target.closest("[data-auth-open]") : null; if (open) { var target = open.getAttribute("data-auth-open"); if (target === "logout") { ajaxPost("public_logout", {}, function () { renderUser({is_login: 0}); }); } else { openAuth(target); } } var close = event.target.closest ? event.target.closest("[data-auth-close]") : null; if (close) closeAuth(); var tab = event.target.closest ? event.target.closest("[data-auth-tab]") : null; if (tab) switchAuthTab(tab.getAttribute("data-auth-tab")); var submit = event.target.closest ? event.target.closest("[data-auth-submit]") : null; if (submit) { var type = submit.getAttribute("data-auth-submit"); if (type === "login") submitLogin(submit); if (type === "signup") submitSignup(submit); } }); if (mask) mask.addEventListener("click", closeAuth); fetchUser(); })(); </script> <script> $(function(){ $('.js-copy-prompt').on('click', function(){ var text = $('#promptContent').text(); if (navigator.clipboard) navigator.clipboard.writeText(text); $(this).text('已复制'); }); }); (function(){var tabs=document.querySelectorAll("[data-detail-link-tab]"),panels=document.querySelectorAll("[data-detail-link-panel]");for(var i=0;i<tabs.length;i++){tabs[i].addEventListener("click",function(){var target=this.getAttribute("data-detail-link-tab");for(var j=0;j<tabs.length;j++)tabs[j].classList.toggle("active",tabs[j]===this);for(var k=0;k<panels.length;k++)panels[k].classList.toggle("active",panels[k].getAttribute("data-detail-link-panel")===target);});}})(); </script> </div> </body> </html>