目录一.stich使用1.1 关键词生成1.2 生成ui图1.3 导出figma​编辑二. codebuddy使用​编辑2.1打开figma​编辑2.2 复制ui到设计面板2.3生成工程代码三. 结语一.stich使用stich官网地址Google Stitch 是 Google Labs 推出的、基于 Gemini 大模型驱动的AI 原生 UI 设计工具官网域名为stitch.withgoogle.com是一款面向产品、设计、前端开发者的在线实验性工具核心定位是将创意想法快速转化为可交互的 UI 界面与可直接使用的前端代码打通从产品构思到设计落地、开发交付的全链路。二、核心用途与能力多模态快速生成 UI支持自然语言描述、手绘草图、界面截图、灵感参考图等多种输入形式AI 可快速理解需求生成 Web 端、移动端的高保真响应式 UI 界面无需手动拖拽组件搭建大幅降低 UI 设计的门槛与耗时把原本数天的设计流程压缩到分钟级。对话式迭代优化设计支持通过自然语言对话持续打磨界面细节比如调整配色、修改布局、更换组件风格、适配暗黑模式等AI 可实时修改并保持整体设计系统的一致性非常适合快速做产品原型验证与设计方案探索。打通设计到开发的交付链路生成的界面可一键导出带自动布局与可编辑图层的 Figma 文件也能直接输出 HTML/CSS、React/Tailwind 等生产级前端代码解决了传统设计与开发之间的还原、交接痛点大幅缩短产品落地周期。低门槛覆盖多类使用场景产品经理可用于会议现场快速验证产品原型设计师可用于灵感探索与初稿快速产出前端开发者可用于快速生成合规美观的界面代码无专业设计背景的个人也能低成本完成界面设计。目前该工具处于 Labs 早期体验阶段Google 账号登录即可免费使用有月度生成额度限制。ps:需要科学上网,能用的地址我推荐漂亮国的(部分地区ip不支持)然后就是注册跟登录了,我用的是谷歌登录来到stich首页,这个时候就可以去制作你需要的ui界面了1.1 关键词生成比如我的关键词「桂林山水行」微信小程序产品说明UI 设计专用 一、小程序基础信息 小程序名称桂林山水行 产品定位桂林本地文旅生活服务小程序集景点 / 美食 / 住宿种草、特产电商、出行预约服务于一体为来桂林的游客提供一站式出行解决方案 目标用户桂林自由行游客、周边游用户、桂林本地生活消费用户 设计基准严格遵循《微信小程序设计规范》采用微信小程序标准750rpx 宽度适配兼容主流移动端机型 二、通用 UI 设计规范 1. 色彩体系贴合桂林山水自然调性兼顾品牌识别与微信原生体验 表格 色彩类型 色值 核心应用场景 主色调漓江青 #16988E 核心按钮、选中态、导航栏、重点标签、图标主色 辅助色 1桂花香黄 #F5B841 优惠标签、提示信息、高亮卖点、辅助按钮 辅助色 2山岩棕 #8B6E4E 标题强调、装饰元素、卡片边框、辅助图标 中性色 - 标题黑 #333333 页面主标题、卡片核心标题、重要信息 中性色 - 正文灰 #666666 正文内容、商品名称、详情描述 中性色 - 辅助灰 #999999 提示文字、标签说明、时间、地址等辅助信息 中性色 - 背景灰 #F5F5F5 页面全局背景、分割区块背景、输入框背景 中性色 - 纯白 #FFFFFF 卡片背景、导航栏、弹窗背景、按钮反白文字 功能色 - 危险红 #E53E3E 退款、删除、价格警示、错误提示 功能色 - 成功绿 #22C55E 支付成功、预约完成、好评、状态提示 2. 字体规范遵循微信原生字体体系保证跨机型可读性 字体家族iOS 端苹方字体Android 端思源黑体微信小程序默认无衬线字体 字号与行高规范| 字号 | 行高 | 核心应用场景 || :--- | :--- | :--- || 36rpx | 50rpx | 页面主标题、导航栏标题 || 32rpx | 44rpx | 卡片标题、板块标题、二级标题 || 28rpx | 40rpx | 正文内容、商品名称、按钮文字 || 26rpx | 36rpx | 辅助正文、详情描述、地址信息 || 22rpx | 30rpx | 标签文字、提示信息、时间、销量等辅助内容 | 3. 通用组件规范 按钮规范主按钮圆角 12rpx高度 88rpx宽度全屏适配左右留白 30rpx文字居中次按钮圆角 12rpx描边 2rpx高度 64rpx小按钮圆角 8rpx高度 48rpx 卡片规范统一圆角 16rpx背景 #FFFFFF轻微阴影box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06)卡片左右外边距 30rpx上下间距 20rpx内边距 24rpx 输入框规范圆角 12rpx高度 72rpx背景 #F5F5F5内边距左右 24rpx无边框聚焦时添加 2rpx 主色调描边 底部 Tabbar 规范高度 98rpx背景 #FFFFFF顶部 1rpx #EEEEEE 边框图标尺寸 48rpx文字 22rpx未选中态 #999999选中态主色调 #16988E共 4 个 Tab依次为首页、商城、预约、我的 4. 交互规范 点击反馈所有可点击元素点击时透明度变为 0.7按钮 / 卡片可添加轻微缩放效果释放后还原 页面交互支持下拉刷新、上拉加载更多页面切换采用微信原生左右滑入效果 弹窗规范弹窗圆角 20rpx背景遮罩rgba(0,0,0,0.5)居中弹出禁止超出屏幕范围 列表联动侧边分类栏与商品列表双向联动点击分类右侧列表平滑滚动到对应区域 三、四大主页面详细设计说明 页面 1首页Tab1小程序启动默认页 页面定位 小程序核心流量入口承担种草引流、功能导航、核心内容推荐作用降低用户决策成本快速匹配用户出行需求 页面整体结构从上到下流式布局 顶部自定义导航栏 → 搜索功能区 → 轮播 Banner 区 → 核心快捷功能入口 → 精选景点推荐区 → 必吃美食推荐区 → 品质住宿推荐区 → 页面底部留白 各模块详情与优化设计 顶部自定义导航栏 左侧小程序 logo简约山水图标 「桂林山水行」文字 右侧定位按钮默认显示「桂林」点击可切换桂林下辖区县 规范高度适配微信胶囊按钮背景透明页面滚动时渐变为白色背景 阴影保证可读性 搜索功能区核心功能 布局通栏搜索框左右外边距 30rpx高度 72rpx圆角 12rpx背景 #F5F5F5 内部元素左侧搜索图标中间占位符「搜索桂林景点 / 美食 / 民宿 / 特产 / 攻略」右侧语音搜索图标 交互优化 点击搜索框进入搜索详情页显示热门搜索漓江、阳朔啤酒鱼、龙脊梯田、遇龙河、桂林米粉、历史搜索 支持模糊搜索、关键词联想搜索结果按「景点 / 美食 / 住宿 / 商品」分类展示 游客状态可正常使用搜索功能不强制登录 轮播 Banner 区 尺寸宽度 690rpx左右 30rpx 外边距高度 320rpx圆角 16rpx上下间距 20rpx 规范3-4 张轮播图自动轮播间隔 3s底部带轮播指示器 内容参考漓江精华段游船特惠、阳朔民宿限时立减、桂林特产新人满减券、龙脊梯田专属攻略点击跳转对应落地页 核心快捷功能入口 布局4 个图标等分横向排列左右外边距 30rpx上下间距 30rpx每个入口包含「图标 文字」 4 个入口依次为 景点大全山水图标点击跳转景点全部分类页 美食推荐碗筷图标点击跳转美食全部分类页 民宿预订房子图标点击跳转住宿全部分类页 特产商城购物袋图标点击跳转「商城」Tab 页 规范图标尺寸 80rpx文字 26rpx图标背景为浅主色调圆角 16rpx 精选景点推荐区内容优化 板块头部左侧标题「精选景点」右侧「查看更多」按钮点击跳转景点全列表 布局横向滚动卡片列表单张卡片宽度 320rpx卡片间距 20rpx左右外边距 30rpx支持左右滑动 单张景点卡片核心元素从上到下 景点主图320rpx*200rpx圆角 12rpx右上角贴标签5A、必打卡 景点名称28rpx 加粗#333333单行超出省略 评分与地址24rpx#999999左侧星级评分 分数右侧区县地址 核心卖点26rpx#666666单行如「20 元人民币背景图取景地」 人均价格左下角 28rpx 主色调加粗格式「¥XX 起 / 人」 参考内容漓江风景名胜区、龙脊梯田、遇龙河竹筏漂流、象鼻山、两江四湖 交互点击卡片跳转景点详情页包含景点介绍、开放时间、门票信息、交通指南、用户评价 必吃美食推荐区内容优化 板块头部左侧标题「桂林必吃」右侧「查看更多」按钮点击跳转美食全列表 布局双列瀑布流卡片左右外边距 30rpx卡片间距 20rpx每行 2 张 单张美食卡片核心元素从上到下 美食主图320rpx*240rpx圆角 12rpx右上角贴标签非遗、老字号、必打卡 美食名称28rpx 加粗#333333单行显示 推荐店铺24rpx#999999单行如「桂林老字号 XX 店」 人均价格26rpx 主色调加粗格式「人均 ¥XX」 推荐语24rpx#6666662 行以内超出省略 参考内容阳朔啤酒鱼、桂林米粉、荔浦芋扣肉、恭城油茶、田螺酿、桂花糕 交互点击卡片跳转美食详情页包含美食介绍、推荐店铺、地址、人均消费、用户实拍评价 品质住宿推荐区内容优化 板块头部左侧标题「品质住宿」右侧「查看更多」按钮点击跳转住宿全列表 布局纵向通栏卡片每张卡片宽度 690rpx左右外边距 30rpx上下间距 20rpx 单张住宿卡片核心元素左右布局 左侧住宿主图180rpx*180rpx圆角 12rpx 右侧从上到下 住宿名称28rpx 加粗#333333单行省略 标签栏22rpx圆角 4rpx浅主色调背景如「江景房」「近西街」「含早餐」最多 3 个 地址与距离24rpx#999999单行如「阳朔县・遇龙河景区旁 | 距核心景点 1.2km」 评分与评价24rpx#666666如「4.9 分・1000 评价」 价格区右下角 28rpx 主色调加粗格式「¥XXX 起 / 晚」 参考内容漓江江景民宿、阳朔西街精品酒店、龙脊梯田吊脚楼民宿、桂林市区轻奢酒店 交互点击卡片跳转住宿详情页包含房型介绍、价格日历、配套设施、用户评价、预订入口 页面 2商城Tab2特产购买页 页面定位 桂林本地特产电商交易页面通过分类侧边栏快速筛选商品实现特产选购、加购、下单、支付全流程符合微信小程序电商规范 页面整体结构 顶部导航栏 → 搜索框 → 左侧固定分类侧边栏 右侧商品展示区 → 底部悬浮购物车栏 各模块详情与优化设计 顶部导航栏 中间页面标题「桂林特产商城」32rpx 加粗 右侧「我的订单」按钮点击跳转个人中心 - 全部订单页 规范高度 88rpx背景 #FFFFFF底部 1rpx #EEEEEE 边框固定在页面顶部 顶部搜索框 布局通栏搜索框左右外边距 30rpx高度 72rpx圆角 12rpx背景 #F5F5F5随导航栏固定在顶部 占位符「搜索桂林特产 / 零食 / 茶饮 / 手工艺品」 交互点击进入商品搜索页支持按销量、价格筛选结果 左侧分类侧边栏核心需求 布局固定在页面左侧宽度 150rpx高度 100%背景 #F8F8F8顶部与搜索框对齐不随页面滚动 一级分类设计贴合桂林本地特产可扩展 全部商品 特色零食 酒水茶饮 生鲜干货 手工艺品 文创周边 交互规范 分类项高度 88rpx文字 26rpx居中显示 未选中态文字 #666666背景透明选中态文字主色调加粗背景 #FFFFFF左侧添加 4rpx 宽主色调高亮条 点击分类项右侧商品区自动滚动到对应分类列表实现双向联动 右侧商品展示区 布局宽度 600rpx位于页面右侧随页面纵向滚动左右内边距 20rpx顶部与搜索框对齐 顶部排序栏高度 60rpx包含 4 个排序按钮综合、销量、价格升序 / 降序、新品选中态文字主色调加粗 商品列表布局双列卡片每张卡片宽度 270rpx左右间距 20rpx上下间距 20rpx 单张商品卡片核心元素从上到下 商品主图270rpx*270rpx圆角 12rpx右上角贴促销标签新人特惠、爆款、包邮 商品名称26rpx#3333332 行显示超出省略 销量信息22rpx#999999格式「已售 XX」 价格区28rpx 主色调加粗格式「¥XX.XX」可添加划掉的划线原价 加购按钮右下角购物车图标尺寸 40rpx主色调填充点击弹出规格选择弹窗 商品内容参考 特色零食速食桂林米粉、荔浦芋头条、桂花糕、姜糖、芋泥酥 酒水茶饮桂林三花酒、桂花酒、桂花茶、永福罗汉果茶、石崖茶 生鲜干货荔浦芋头、桂林腐竹、笋干、木耳、沙田柚 手工艺品壮锦挂件、竹编制品、团扇、木雕摆件 文创周边桂林山水书签、20 元背景图文创、冰箱贴、纪念明信片 交互点击商品卡片跳转详情页包含图文介绍、规格选择、库存、用户评价、售后保障、底部固定「加入购物车」「立即购买」按钮 底部悬浮购物车栏 布局固定在页面底部 Tabbar 上方高度 98rpx宽度 100%背景 #FFFFFF顶部 1rpx #EEEEEE 边框 元素布局 左侧购物车图标尺寸 48rpx右上角带角标显示已选商品数量 中间合计金额28rpx 主色调加粗前缀 24rpx#666666「合计」 右侧「去结算」按钮宽度 180rpx高度 72rpx圆角 36rpx主色调背景白色文字 28rpx 加粗 交互 点击购物车图标弹出购物车弹窗可增减商品数量、删除商品、清空购物车 未选择商品时「去结算」按钮置灰不可点击有商品时点击跳转订单确认页对接微信支付 非登录状态点击结算触发微信授权登录 页面 3预约Tab3出行服务预约页 页面定位 桂林出行服务预约入口为游客提供车辆预约、本地陪玩等个性化出行服务实现预约需求提交、订单匹配、状态跟踪全流程 页面整体结构 顶部导航栏 → 服务分类 Tab 栏 → 对应服务内容展示区 → 预约须知区 → 「我的预约」入口 各模块详情与优化设计 顶部导航栏 中间页面标题「出行预约」32rpx 加粗 右侧「客服」按钮点击跳转在线客服页面 规范高度 88rpx背景 #FFFFFF底部 1rpx #EEEEEE 边框固定在页面顶部 服务分类 Tab 栏核心需求 布局固定在导航栏下方高度 80rpx宽度 100%背景 #FFFFFF左右外边距 30rpx横向排列 2 个核心 Tab Tab 项「车辆预约」「陪玩预约」选中态文字主色调加粗底部带 4rpx 宽、20rpx 长的主色调下划线未选中态文字 #666666 交互点击 Tab 切换下方内容区滑动内容区 Tab 同步切换选中态 「车辆预约」内容区核心需求 顶部筛选栏高度 60rpx左右外边距 30rpx包含筛选按钮座位数、是否带司机、价格区间 车型列表布局纵向通栏卡片每张卡片宽度 690rpx左右外边距 30rpx上下间距 20rpx 单张车型卡片核心元素左右布局 左侧车型主图200rpx*140rpx圆角 12rpx 右侧从上到下 车型名称 座位数28rpx 加粗#333333如「5 座经济型轿车 | 核载 5 人」 适合场景24rpx#999999单行如「适合 2-4 人出行 | 市区 / 阳朔短途游」 服务包含项24rpx#666666标签形式如「带司机」「含油费」「含保险」「免费接送」 价格区左下角 28rpx 主色调加粗格式「¥XXX / 天」 预约按钮右下角高度 60rpx宽度 120rpx圆角 30rpx主色调背景白色文字 26rpx「立即预约」 车型分类参考经济型轿车、舒适 SUV、7 座商务车、14-22 座中巴车、30-50 座大巴车 预约表单交互 点击「立即预约」弹出预约表单弹窗必填项用车起止日期、用车时间、上车地点、行程规划、联系人姓名、联系电话 选填项额外需求儿童座椅、行李空间、中途停靠点 提交后生成预约单同步到「我的预约」通过微信订阅消息推送订单状态 非登录状态提交预约触发微信授权登录 「陪玩预约」内容区核心需求 顶部筛选栏高度 60rpx左右外边距 30rpx包含筛选按钮服务类型、价格区间、性别、评分 陪玩师列表布局纵向通栏卡片每张卡片宽度 690rpx左右外边距 30rpx上下间距 20rpx 单张陪玩师卡片核心元素从上到下 顶部个人信息区左侧头像 80rpx 圆角 50%昵称 28rpx 加粗 #333333 从业年限右侧评分 服务次数 26rpx#666666如「4.9 分 | 服务 1000 人次」 中间内容区服务标签22rpx 圆角 4rpx 浅主色调背景如「阳朔本地土著」「摄影跟拍」「小众路线」、擅长路线、2 行以内个人简介 底部价格与按钮区左侧价格 28rpx 主色调加粗格式「¥XXX / 天」右侧「预约咨询」描边按钮 「立即预约」填充主按钮 陪玩服务类型参考本地向导陪玩、摄影跟拍陪玩、亲子专属陪玩、小众秘境探路陪玩 预约表单交互 点击「立即预约」弹出表单必填项服务日期、服务时长、服务地点、联系人姓名、联系电话 选填项服务需求摄影设备、路线规划、特殊安排 提交后生成预约单支持在线客服与陪玩师沟通微信订阅消息推送状态 预约须知区 位置页面底部左右外边距 30rpx上下间距 30rpx 标题「预约须知」28rpx 加粗 #333333 内容 24rpx#666666分点说明 预约需至少提前 24 小时提交紧急订单请联系客服确认 预约成功后工作人员将在 1 小时内与您联系确认详情 服务开始前 24 小时以上取消可全额退款24 小时内取消收取 30% 违约金 服务过程中如有任何问题请第一时间联系平台客服处理 「我的预约」入口 点击跳转预约列表页按状态分类全部、待确认、已确认、已完成、已取消 每个预约单可查看详情、联系客服、取消预约、申请退款、服务完成后评价 页面 4我的Tab4个人中心页 页面定位 用户个人信息与订单管理中心实现微信登录、订单全链路管理、个人服务设置等功能严格遵循微信小程序登录与隐私规范 页面整体结构从上到下流式布局 顶部登录信息区 → 订单管理核心入口 → 我的服务功能区 → 其他设置与服务入口 → 底部合规信息 各模块详情与优化设计 顶部登录信息区核心需求微信登录 布局通栏模块高度 300rpx主色调渐变背景左右内边距 30rpx顶部适配微信胶囊按钮 未登录状态 左侧默认灰色头像尺寸 120rpx圆角 50% 中间「点击登录」按钮高度 72rpx宽度 200rpx圆角 36rpx白色背景主色调文字 28rpx 加粗 底部小字提示「登录后可享受订单管理、预约服务等完整功能」22rpxrgba (255,255,255,0.8) 登录规范严格遵循微信最新规则 点击登录按钮先弹出用户协议与隐私政策授权弹窗需用户勾选「我已阅读并同意《用户服务协议》《隐私政策》」 勾选同意后调用微信官方授权登录接口获取用户微信昵称、头像完成登录 非强制登录游客状态可浏览所有页面仅在下单、预约、收藏、评价等场景触发登录禁止首页强制弹窗登录 已登录状态 左侧用户微信头像尺寸 120rpx圆角 50% 中间用户微信昵称 32rpx 加粗白色文字下方会员等级 24rpx 半透明白色文字 右侧设置图标尺寸 48rpx白色点击进入设置页面账号安全、消息通知、隐私设置、地址管理、关于我们、客服中心、注销账号 订单管理板块核心功能 布局通栏白色卡片圆角 16rpx左右外边距 30rpx顶部间距 - 40rpx叠加在登录区下方内边距 24rpx 板块头部左侧标题「我的订单」28rpx 加粗 #333333右侧「查看全部」按钮 26rpx 主色调 订单入口横向 5 个等分入口每个入口包含「图标 文字」分别为全部订单、待付款、待使用、待评价、退款 / 售后 规范图标尺寸 48rpx文字 24rpx点击对应入口跳转分类订单列表订单按「商品订单、预约订单、住宿门票订单」分类展示 我的服务功能区 布局通栏白色卡片圆角 16rpx左右外边距 30rpx上下间距 20rpx内边距 24rpx列表式布局每个功能项高度 88rpx底部 1rpx #F5F5F5 边框 功能项列表按使用频率排序 我的收藏点击查看收藏的景点、美食、民宿、商品 我的足迹点击查看浏览历史记录 优惠券右侧带未使用数量角标点击查看未使用 / 已使用 / 已过期优惠券 地址管理管理收货地址、常用出行地址可新增 / 编辑 / 删除 / 设为默认 我的评价点击查看发布的所有评价内容 客服中心跳转在线客服页面包含常见问题 FAQ、人工客服、联系电话 意见反馈进入反馈页面可输入内容、上传图片、留下联系方式 底部合规信息区 位置页面最底部上下间距 40rpx居中排列 内容 第一行可点击文字链接 24rpx#999999《用户服务协议》《隐私政策》 第二行22rpx#CCCCCC「© 桂林山水行 版权所有」「ICP 备案号XXX-XXX」需补充真实备案号满足上架要求 四、合规与上架规范说明 严格遵循《微信小程序平台运营规范》电商模块需完成微信支付商户号对接预约服务需明确服务条款与退改规则 上架前需完成 ICP 备案上传合规的《用户服务协议》《隐私政策》符合《个人信息保护法》要求 登录功能严格遵循微信小程序最新登录规范不强制用户登录不违规收集用户个人信息 食品类特产需上传食品经营许可证旅游服务需上传相关经营资质确保内容符合国家法律法规 完善售后保障机制明确客服响应时间与处理流程保障用户合法权益1.2 生成ui图将详细的UI设计说明复制到stich中,下面就是创建中需要等一段时间,看到左下角执行完毕之后就能看到对应的ui图1.3 导出figma复制之后能看到二. codebuddy使用codebuddy国际版网址我使用的国际版,下载之后就是登录注册下面的界面是登录成功之后的编辑器2.1打开figmaps:打不开就挂一下代理打开一个新的设计2.2 复制ui到设计面板刚刚1.3复制到的内容直接粘贴到当前设计面板,ps:如果没有了复制内筒,就再点转换,在点击复制,然后导入,成功导入如下图所示这个时候就能用编辑器生成工程代码了2.3生成工程代码首先选择文件传递给编辑器2.4 生成工程代码我的描述:请你根据出行预约-桂林山行figma,实现对应的uni-app功能代码,后期主要是放在小程序使用,主要技术使用Vue3,typeScript,axios,认真做好各个界面的交互三. 结语流程就是上面这样,最终生成的效果还原度蛮高的要想具体效果,还是要自己去尝试一次项目生成完之后,源码我放在下面