可用提示词驱动AI生成Microsoft Copilot详情页高保真线框图：需明确包含顶部导航栏、主视觉区、3功能卡片、客户证言区、底部CTA按钮组五类信息；推荐使用结构化提示词，强调布局尺寸、间距、字体规范及纯灰度线框要求，生成后须微调导航高度、卡片分布、按钮样式并清除所有视觉装饰。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要快速产出Microsoft Copilot详情页的高保真原型图，但又不想从零手绘界面、反复调整布局和文案位置，而是用提示词驱动AI生成可直接用于评审或开发对接的结构化线框图。
明确Copilot详情页的核心信息层级
打开Figma或Whimsical等支持AI生图的原型工具，在新建画布后先不急着输入提示词，而是用便签形式列出页面必须承载的5类信息：顶部导航栏（含品牌标识+登录入口）、主视觉区（带产品名“Microsoft Copilot”和副标题）、功能亮点区（3个并列卡片，每张含图标+短标题+1行说明）、客户证言区（头像+引述+公司名）、底部CTA按钮组（“Try now”+“Learn more”）。这一步漏掉任何一类，AI生成的图就会缺失关键模块。
把这5类信息写在草稿纸上或工具侧边栏，确保后续提示词能一一对应——【AI不会自动补全你没明说的业务逻辑，比如“客户证言要带微软合作伙伴logo”这种细节，必须写进提示词】。
用分号分隔的结构化提示词写法
方法一：基础版提示词（适合快速试错）
输入：“Microsoft Copilot product detail page wireframe; top navigation bar with Microsoft logo and sign-in button; hero section with ‘Microsoft Copilot’ headline and ‘AI-powered assistant for work’ subheadline; three feature cards showing ‘Write’, ‘Summarize’, ‘Analyze’ with icons; testimonial section with avatar, quote, and company name; footer CTA buttons ‘Try now’ and ‘Learn more’; clean sans-serif typography; light background; no colors, only grayscale lines”
方法二：精准控制布局的提示词（推荐用于正式交付）
输入：“Figma-style wireframe of Microsoft Copilot detail page; 1280px wide canvas; header: left-aligned Microsoft logo, right-aligned sign-in link; hero: centered headline ‘Microsoft Copilot’, subheadline below in smaller font; features: 3 horizontal cards in one row, each 300px wide, 120px tall, with placeholder icon on left, title above description; testimonials: 2-column grid, each cell has circular avatar (40px), italic quote text, company name in bold; bottom: two primary buttons side-by-side, ‘Try now’ wider than ‘Learn more’; all elements use 8px spacing grid; no decorative elements, only structural lines”
这一步操作起来很简单，直接把上面任一提示词粘贴进Galileo AI、Uizard或Figma插件Promptable的输入框，点击生成即可。注意：如果生成结果里功能卡片堆叠成一列而非横排，说明提示词中缺少“horizontal”或“in one row”这类方位限定词。
修正AI生成图的关键微调步骤
第一步：检查导航栏高度是否统一为64px——Copilot官网实际使用该值，若AI生成为56px或72px，手动拉伸至64px，否则后续开发切图会错位。
第二步：选中所有功能卡片，右键→“Align horizontally → Distribute horizontal spacing”，确保三张卡片间距完全相等。AI常把中间卡片居中、两边留白不均，这会导致响应式断点错乱。
第三步：双击任意CTA按钮文字层，将“Try now”字体大小改为16px、字重600；“Learn more”改为14px、字重400。Copilot按钮遵循微软Fluent Design规范，大小与粗细差异是交互意图的关键信号。
第四步：删除AI自动生成的所有阴影、圆角、渐变——详情页线框图阶段严禁出现这些视觉样式，它们会干扰评审焦点。只保留矩形框、文字块、占位图标这三类元素。
