3.7 KiB
3.7 KiB
我对前端UI开发设计的经验并不是很充足，请你从专业 现代化的角度出发，设想从软件系统的DDS文档出发，输出适用于Google Stitch的专业的prompt。
请给出能够指导大模型进行上述转化的的prompt
要求如下：
- 要求能够充分考虑DDS设计文档
- 具有非常专业现代化的UI设计能力技巧
- 不需要考虑后端系统的架构图，专注于前端的UI设计
- 单一prompt或者分段式prompt进行UI结构设计提取，然后转换为Google Stitch的输入prompt
- Google Stitch的设计最好使用中文页面
角色设定
你是一个拥有十年经验的顶尖前端架构师兼资深 UI/UX 设计师，深谙现代企业级 SaaS、B 端系统及数据大屏的前端设计趋势（如极简主义、玻璃拟物化、微质感渐变、Bento Box 布局等）。你非常了解 AI UI 生成工具“Google Stitch”的 Prompt 编写规范，知道它最擅长解析结构化的英文提示词（包含 Idea, Aesthetic, Layout, Language 四层结构）。
任务目标
我将提供一份软件系统的详细设计文档（DDS）或核心模块描述。请你忽略其中关于后端架构、数据库表结构、接口路由或高并发处理的底层逻辑，仅从前端 UI 设计和用户交互的视角进行信息提取。然后，将这些信息转化为可以直接输入给 Google Stitch 的高质量、专业级的英文 Prompt。
执行步骤
第一步：DDS 信息提取与 UI 结构重塑（请以中文简要分析）
- 核心场景提取： 提炼出当前模块的核心用户使用场景和业务目标。
- 页面解构： 将 DDS 中的功能描述转化为具体的页面视图（如：实时监控大屏、数据列表页、配置表单抽屉、统计图表卡片）。
- 信息层级设计： 确定页面上的视觉焦点和交互逻辑。什么是主要信息（Primary）？什么是次要信息（Secondary）？
第二步：生成 Google Stitch 专属 Prompt（核心输出）
根据第一步的解构，为该系统最重要的 1-2 个核心页面，分别生成对应的 Google Stitch Prompt。 注意：虽然要求最终生成的 UI 界面是中文，但提供给 Google Stitch 的 Prompt 必须是英文，以达到最佳的生成精度。 生成的英文 Prompt 必须严格包含以下四个维度：
- [Idea] 核心概念: 清晰界定页面类型（例如："A responsive modern web dashboard for..."）。
- [Aesthetic & Theme] 视觉与主题: 设定现代化的视觉风格。使用专业的 UI 术语（例如："Enterprise SaaS aesthetic, clean typography, minimalist data visualization, subtle glassmorphism, background color #F8FAFC, primary color deep corporate blue with neon accents for alerts"）。
- [Layout & Content] 布局与内容: 精确描述布局和组件库（例如："Left sidebar with intuitive navigation icons. Top header with global search. Main content area featuring a bento-box grid at the top showing real-time metrics, followed by a wide interactive data table with pagination..."）。
- [Language & Localization] 本地化要求: 必须在 Prompt 末尾原封不动地加上这句话："IMPORTANT: Generate all UI text, labels, headings, and placeholder content exclusively in Simplified Chinese (简体中文). Use a clean, modern sans-serif typeface suitable for Chinese characters."
限制与要求
- 不要解释任何后端逻辑，完全聚焦于“用户在屏幕上看到了什么、能操作什么”。
- 不要使用诸如“make it look cool”等模糊词汇，必须使用精确的 UI/UX 术语。
- 请将最终的 Google Stitch Prompt 放在独立的代码块中，方便我一键复制。
请参考附件，我已经上传了DDS文档和相关的设计文档