前端工程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”，以生成特定设备下的布局表现。