企业官网建设流程全解析

Stitch 提示词示例库

按用例和复杂度级别组织的有效 Stitch 提示词综合合集。

目录

1. 落地页
2. 移动应用
3. 仪表盘
4. 电商
5. 表单与认证
6. 内容平台
7. SaaS 应用

落地页

创业公司落地页

AI 写作助手创业公司的落地页 主视觉区： - 醒目的大标题："用 AI 写得更快、更好" - 解释价值主张的副标题 - 主 CTA 按钮"免费开始试用" - 次 CTA"观看演示" - 展示产品界面的主视觉插图 特性区： - 3 列带图标的网格 - 特性 1：AI 驱动建议 - 特性 2：多语言支持 - 特性 3：团队协作 社会证明： - 客户 logo（6 家公司） - 带照片和引言的客户评价卡片 定价： - 3 档定价表（免费、专业、企业） - 特性对比 - 年付/月付切换 风格：现代、科技感、可信赖 颜色：深紫色主色、青色点缀、白色背景 排版：无衬线字体，干净易读 平台：响应式 Web

服务类商家落地页

精品瑜伽工作室的落地页 首屏： - 工作室空间的全宽主图 - 居中大标题："找到你的平衡" - 课程表 CTA 按钮 - 位置和营业时间叠加层 课程内容： - 卡片网格（2x3）展示课程类型 - 每张卡片：课程名称、时长、难度等级、教练照片 - 悬停效果展示课程描述 教练简介： - 横向滚动轮播 - 圆形照片，带姓名和专业特长 客户评价： - 大字号引言格式，配学员照片 - 5 星评分 行动号召： - "免费预约你的第一节课"横幅 - 联系表单，含姓名、邮箱、电话 风格：平静、自然、温馨 颜色：鼠尾草绿、暖米色、柔白 排版：衬线标题、无衬线正文 平台：响应式 Web，移动优先

移动应用

健身追踪应用

健身追踪应用 - 首页（iOS） 顶部区域： - 含用户名和当前日期的问候语 - 每日目标进度环（卡路里、步数、活跃分钟） - 基于进度的激励消息 快速统计卡片： - 今日步数，带趋势箭头 - 消耗的活跃卡路里 - 覆盖距离 - 活跃时间 近期锻炼： - 最近 3 次锻炼列表，含类型、时长、卡路里 - 锻炼类型缩略图标 - 详情/删除的滑动操作 底部区域： - "开始锻炼"醒目按钮 - 锻炼类型快速入口（跑步、骑行、力量、瑜伽） 底部导航： - 首页（激活）、锻炼、进度、我的 风格：活力、激励、数据导向 颜色：活力橙主色、深色模式背景、霓虹点缀 排版：粗体标题、清晰的指标数字 平台：iOS 移动端（375x812px）

外卖应用

外卖应用的餐厅详情页 页头： - 餐厅封面照片 - 返回按钮和收藏图标 - 餐厅名称、评分（4.5 星）、配送时间（25-35 分钟） - 菜系标签（意大利、披萨、意面） 信息栏： - 配送费、起送价、距离 - 促销徽章（如有） 菜单分类： - 固定横向滚动标签（热门、披萨、意面、沙拉、饮品） 菜单项： - 卡片布局，含食物照片、名称、描述、价格 - 带数量选择器的添加按钮 - 饮食图标（素食、辣等） 悬浮购物车： - 底部面板显示购物车摘要 - 商品数量和总价 - "查看购物车"按钮 风格：激发食欲、易于浏览、充满活力 颜色：红色主色（激发食欲）、白色背景、美食摄影 排版：友好的无衬线字体 平台：Android 移动端（360x800px）

仪表盘

分析仪表盘

面向营销团队的 Web 分析仪表盘 顶栏： - 日期范围选择器（最近 7 天、30 天、自定义） - 导出按钮 - 通知铃铛 - 用户资料下拉菜单 关键指标行： - 一行 4 个指标卡片 - 卡片 1：总访客数（带 % 变化） - 卡片 2：转化率（带趋势迷你图） - 卡片 3：跳出率（与上一期对比） - 卡片 4：平均会话时长 主图表： - 展示随时间变化的流量折线图 - 不同来源的多条线（自然搜索、付费、社交、直接访问） - 交互式图例切换线条 - 悬停提示显示精确数值 次要面板： - 左侧：热门页面表格（页面、浏览量、平均时长、跳出率） - 右侧：流量来源饼图，带百分比 底部区域： - 近期转化表格，含用户、来源、价值、时间戳 风格：干净、数据导向、专业 颜色：藏蓝侧边栏、白色主区域、多彩图表线条 排版：数字用等宽字体，标签用无衬线字体 平台：桌面 Web（1440px+）

项目管理仪表盘

项目管理仪表盘 - 团队视图 侧边栏： - 工作区选择器下拉框 - 导航：仪表盘、项目、任务、团队、报表 - 创建新项目按钮 页头： - 项目名称和状态徽章 - 团队成员头像（最多 5 个，然后 +N） - 搜索栏 - 视图选项（看板、列表、日历） 看板： - 4 列：待办、进行中、审核、完成 - 可拖拽卡片 - 每张卡片显示：标题、负责人头像、截止日期、优先级标签、评论数 - 每列底部有添加卡片按钮 右侧面板： - 选中卡片的任务详情 - 描述、附件、评论、活动日志 快速统计： - 显示完成百分比的进度条 - 按状态分类的任务迷你图 - 即将到期的截止日期列表 风格：现代、有条理、协作 颜色：紫色主色、浅灰背景、状态颜色编码 排版：清晰的无衬线字体，所有尺寸都易读 平台：桌面 Web（1280px+）

电商

商品详情页

时尚电商的商品详情页 图片画廊： - 主商品图（大图、可缩放） - 下方缩略图条（5-6 张图） - 360° 查看选项 - 如有则显示视频缩略图 商品信息： - 品牌名称 - 商品标题 - 星级评分（4.8）带评论数（234 条评论） - 促销时原价划线显示 - 如有则显示促销徽章 选项： - 尺码选择器（XS、S、M、L、XL）带库存状态指示 - 色板，悬停时预览商品图 - 数量选择器 操作： - 加入购物车按钮（醒目） - 加入心愿单按钮（描边） - 尺码指南链接 - 运费计算器 商品详情： - 标签页界面（描述、规格、评论、配送） - 移动端可展开区块 推荐： - "你可能也喜欢"轮播 - "搭配整套造型"建议 风格：干净、商品导向、可信赖 颜色：黑白配品牌点缀色（酒红） 排版：标题用优雅衬线，正文用无衬线 平台：响应式 Web

购物车

带结账流程的购物车页面 购物车商品： - 商品列表，含缩略图、名称、尺码/颜色、价格 - 数量调节器（+/- 按钮） - 移除商品链接 - 稍后购买选项 订单摘要： - 桌面端固定侧边栏，移动端底部面板 - 小计 - 运费（计算得出或"满 $50 免运费"） - 税费（预估） - 折扣码输入框 - 总计（醒目显示） - 结账按钮（大号、主色） 信任信号： - 安全结账徽章 - 免费退换政策 - 客服联系方式 推荐： - "经常一起购买"区域 - 免邮门槛促销横幅 空状态： - 插图 - "你的购物车是空的"消息 - "继续购物"按钮 - 最近浏览的商品 风格：干净、转化导向、令人安心 颜色：结账 CTA 用绿色、中性灰、信任徽章 排版：清晰的价格、易读的商品名称 平台：响应式 Web

表单与认证

多步注册表单

B2B SaaS 注册流程 - 3 步 进度指示器： - 第 1 步：账户（激活） - 第 2 步：公司 - 第 3 步：团队 第 1 步 - 账户信息： - 带校验的邮箱输入框 - 带强度指示器的密码输入框 - 确认密码 - 条款和条件复选框 - "继续"按钮 - "已有账户？登录"链接 第 2 步 - 公司信息： - 公司名称 - 行业下拉框 - 公司规模单选按钮（1-10、11-50、51-200、201+） - 职位/头衔输入框 - "上一步"和"继续"按钮 第 3 步 - 邀请团队： - 邮箱输入框（动态，可添加更多） - 每次邀请的角色选择器 - "暂时跳过"选项 - "完成设置"按钮 成功状态： - 勾选动画 - "欢迎使用 [产品]！"消息 - "前往仪表盘"按钮 风格：极简、专注、低摩擦 颜色：蓝色主色、白色背景、绿色成功状态 排版：清晰标签、有用的辅助文案 平台：响应式 Web，移动端优化

登录页

企业软件的登录页 左侧面板（桌面）： - 品牌 logo - 主图或插图 - 价值主张大标题 - 关键优势（3 个要点） 右侧面板（表单）： - "欢迎回来"标题 - 邮箱输入框 - 带显示/隐藏切换的密码输入框 - "记住我"复选框 - "忘记密码？"链接 - "登录"按钮（全宽） - 带"或"字样的分隔线 - SSO 选项（Google、Microsoft、Okta）作为带 logo 的按钮 - 底部"没有账户？注册"链接 安全指示： - SSL 徽章 - "你的数据是安全的"消息 风格：专业、可信赖、企业级 颜色：企业蓝、白色、柔和灰 排版：专业的无衬线字体 平台：响应式（移动端隐藏左侧面板）

内容平台

博客文章布局

科技媒体的博客文章页 页头： - 站点导航（logo、分类、搜索、订阅） 文章页头： - 分类标签 - 文章标题（大号、粗体） - 副标题/摘要 - 作者信息（照片、姓名、简介链接、发布日期） - 社交分享按钮 - 预计阅读时间 文章正文： - 可读栏宽（最大 680px） - 行高合适的段落文本 - H2 和 H3 小标题 - 引用块（独特样式） - 带说明文字的行内图片 - 带语法高亮的代码块 - 嵌入视频 - 目录（桌面端固定侧边栏） 文章页脚： - 标签 - 分享按钮 - 作者卡片（展开） - 相关文章（3 张卡片） - 评论区 侧边栏（桌面）： - 新闻通讯订阅 - 热门文章 - 广告位 风格：编辑风、易读、内容优先 颜色：白底黑字，链接用点缀色 排版：正文用衬线，UI 用无衬线 平台：响应式 Web

视频平台界面

视频流媒体平台 - 观看页 视频播放器： - 全宽视频播放器，带控制 - 画质选择、播放速度、字幕、全屏 - 悬停时显示缩略图预览的进度条 视频信息： - 视频标题 - 观看次数和上传日期 - 赞/踩按钮 - 分享按钮 - 保存到播放列表按钮 频道信息： - 频道头像和名称 - 订阅者数量 - 订阅按钮（未订阅时醒目显示） 描述： - 可展开的描述文本 - 显示更多/更少切换 - 话题标签和链接 评论区： - 排序选项（最热、最新） - 带用户头像的评论输入框 - 评论卡片，含头像、姓名、时间戳、文本 - 点赞/回复按钮 - 嵌套回复（缩进） 侧边栏： - 自动播放下一个的预览 - 推荐视频列表（缩略图、标题、频道、观看次数） 风格：深色模式、视频导向、干扰少 颜色：深灰背景、白色文字、CTA 用红色点缀 排版：无衬线字体，远距离可读 平台：响应式 Web

SaaS 应用

邮件客户端界面

邮件客户端 - 收件箱视图 左侧边栏： - 写邮件按钮（醒目） - 文件夹列表（收件箱、已发送、草稿、垃圾邮件、已删除） - 带颜色编码的标签/标记 - 存储用量指示器 邮件列表（中间）： - 带筛选的搜索栏 - 排序和视图选项 - 邮件行显示： - 发件人头像/首字母 - 发件人姓名（未读加粗） - 主题行 - 预览文本（截断） - 时间戳 - 附件图标（如有） - 星标/旗帜图标 - 批量操作复选框 - 分页或无限滚动 邮件详情（右侧）： - 邮件头（发件人、收件人、抄送、时间戳） - 主题行 - 保留格式的邮件正文 - 附件区域 - 操作按钮（回复、全部回复、转发、归档、删除） - 线程中的历史邮件（折叠） 顶栏： - 刷新按钮 - 设置图标 - 用户资料下拉菜单 风格：干净、生产力导向、有条理 颜色：蓝色点缀、白色背景、灰色分隔线 排版：无衬线、便于扫读 平台：桌面 Web（1280px+）

CRM 联系人详情

CRM 联系人详情页 页头： - 联系人姓名和公司 - 联系人照片/头像 - 状态徽章（潜在客户、客户、停用） - 快捷操作（邮件、电话、安排会议、编辑） 信息标签页： - 概览（激活）、活动、交易、备注、文件 概览标签页： - 联系信息卡片（邮箱、电话、地址、社交链接） - 公司信息卡片 - 标签和自定义字段 - 负责人（团队成员） 活动时间线： - 按时间顺序的互动列表 - 类型图标（邮件、电话、会议、备注） - 时间戳和描述 - 按活动类型筛选 交易区域： - 进行中的交易表格（交易名称、价值、阶段、预计成交日期） - 已赢/已输交易摘要 备注区域： - 带富文本编辑器的添加备注输入框 - 备注卡片，含作者、时间戳、内容 - 置顶重要备注 右侧边栏： - 下一个计划活动 - 近期邮件 - 相关联系人 - 交易管线阶段 风格：专业、数据丰富、有条理 颜色：藏蓝、白色、状态颜色编码 排版：清晰层级、易读数据 平台：桌面 Web（1440px+）

使用这些示例的技巧

1. 按需定制- 用你的具体要求替换占位内容
2. 组合元素- 混合搭配不同示例中的组件
3. 调整复杂度- 根据项目范围简化或扩展
4. 指明你的品牌- 添加你的调色板、字体和视觉风格
5. 考虑平台- 为目标设备（移动端/桌面）调整布局
6. 添加上下文- 包含用户画像或用例以获得更好结果
7. 迭代- 从基础提示词开始，再用标注优化

记住：这些只是起点。当你提供与你独特项目相关的具体细节时，Stitch 才能发挥最佳效果。