前端工程AI应用原型规划实战版提示词

角色定义与任务定位
请以“前端架构师兼AI应用产品策划者”的身份，使用本提示词方案。你的核心目标是：快速生成具有高可行性、清晰交互逻辑与现代视觉风格的AI应用原型图，用于指导后续的UI开发、技术选型与创意沟通，确保概念能高效转化为可落地的产品界面。
适用场景

为新的AI工具（如代码助手、智能表单、内容生成器）构思主界面与核心交互流程。
规划将大语言模型、图像生成等AI能力嵌入现有前端工程项目的功能模块。
制作用于团队内部评审、客户演示或开发文档说明的高保真原型视觉稿。
探索AI交互的新模式，如对话式界面、实时预览、多模态输入等在前端的表达。

核心提示词
可直接复制并组合使用的提示词示例：

基础框架：A modern web application dashboard for an AI-powered [具体功能，如：code review assistant], featuring a clean sidebar navigation, main content area with interactive panels, and a chat/input interface.
关键组件：Interactive prompt input box with example buttons, real-time AI response display area with code highlighting, history panel with savable sessions, settings panel for model parameters (temperature, max tokens).
交互状态：Visual states for “AI is typing…”, “processing”, “error alert”, “successful generation”, and “user feedback (like/dislike) buttons”.
技术氛围：Futuristic yet professional, with subtle data visualization (charts, metrics), minimalist icons, and a cohesive color scheme (e.g., dark theme with cyan/blue accents).

风格方向

视觉基调：现代极简主义、玻璃态（Glassmorphism）或柔光阴影（Soft UI），强调清晰的信息层级与空间感。
色彩方案：深色系背景搭配科技蓝、活力青或柔和紫色作为主色，使用中性灰进行平衡。成功状态用绿色，警告或错误用琥珀色/红色，但需克制。
字体与图标：无衬线字体族（如 Inter, SF Pro Display），确保屏幕可读性。采用线性或面性图标集，风格统一、语义明确。

构图建议

布局框架：采用响应式栅格系统。左侧或顶部为主导航，主区域为核心工作区。考虑将AI输入输出区域置于视觉中心。
焦点引导：通过色彩对比、卡片悬浮效果或微动画，突出当前可交互元素（如“生成”按钮）或最新的AI回复内容。
信息密度：保持呼吸感，避免拥挤。使用折叠面板、标签页或模态框来收纳次要信息或高级设置。

细节强化

质感表现：为按钮、输入框、卡片添加细腻的边框、微渐变或极细的投影，增强触感和深度。
动态示意：在原型中示意关键交互动画，如输入框聚焦放大、内容生成时的脉动光效、结果卡片滑入。
内容填充：使用真实的占位文案，如“// AI建议的代码优化…”、“解析您的问题中…”，避免使用“Lorem ipsum”。
设备适配：考虑在提示词中注明“desktop view”或“mobile view”，以生成特定设备下的布局表现。

使用建议

将“核心提示词”中的模块进行自由组合与替换，例如替换“[具体功能]”为你的实际项目需求。
在图像生成工具中，可尝试先生成整体界面，再针对复杂组件（如可交互的聊天窗口）进行局部特写生成。
本方案生成的图像，可直接用于制作可点击的原型图（在Figma等工具中链接），或作为视觉规格参考交付给开发团队。
迭代生成时，逐步增加细节描述词（如“detailed wireframe”, “high-fidelity mockup”, “pixel-perfect design”）以提升输出保真度。