「飞书妙搭」是飞书内置的 AI 原生系统搭建工具，它像是为企业引入了不限量的产品经理，和初阶的开发，能直接根据业务需求、输出原型、开发系统。
很多人误以为 AI 生成的代码只能做做演示，但飞书妙搭打破了这一刻板印象。它不仅能开发精美的网站、业务工具，做到“立等可取、所见即所得”，更能结合平台提供的基础服务，让系统真正上线使用。
不需要专业的开发背景，只需要通过自然语言交互，就能生成业务系统、精美网站以及自动化任务，支持上传文件辅助描述需求；支持灵活的UI定制与专业级调试能力。你可以用它开发精美的网站、业务工具，立等可取、所见即所得；也用它快速生成系统原型，让需求得到充分对齐。
如果你也想用飞书妙搭搭建自己的网页/应用，让想法落地为现实，却又不知道如何进行操作，正困惑于以下问题：
- 「它做的也不是不对，但就是怪怪的」
- 「我明明说得挺清楚了啊？」
- 「怎么别人做得都挺好，我的不太行？」
那么，这篇文章将解答你的疑惑，手把手教你如何用「飞书妙搭」搭建一个精美的网页。
使用「飞书妙搭」搭建的网页示例 | |
250px|700px|reset | 250px|700px|reset |
250px|700px|reset | 250px|700px|reset |
一、网站搭建基础：明确需求
这个部分看起来像是“正确的废话”，然而，这一阶段的想法决定了后期的开发是“微调”还是“反复推倒重来”。
- 以「用户视角」构建开发逻辑：
在你敲下第一个 prompt 之前，先别急着想 UI、配色、风格。先问自己一个很朴素的问题：
用户打开这个网站，第一眼应该知道它是干嘛的？然后他下一步要干嘛？
- 做音乐站：想好要听歌、建歌单、看评论这些功能
示例：我要个音乐播放网站，首页得有轮播图（展示热门歌单 / 新专辑预告）、新歌推荐区、热门歌单专区；点进去能看分类（按流行、摇滚、古典、民谣分），点歌曲 / 专辑能看详情（带专辑封面图、带歌曲信息表（含歌手 / 时长 / 专辑 / 流派）、带乐迷评论），还得有收藏列表（待播歌单）、会员开通 / 单曲购买页、我的订单（含已购音乐 / 收藏歌单 / 播放历史）。”
- 做官网：得有产品展示、案例介绍、联系入口
- 做工具页：明确输入、计算、出结果这些步骤
根据用户调整设计：
- 给长辈用：字大点（至少 16px），按钮也大点（44px 以上）
- 给年轻人用：可以加些小动画，但别太长（150-300 毫秒就行）
如果不想清楚这些问题，那么AI就只能“瞎猜”，无法做出你想要的效果。
- 需求描述：细化且具体
如果说“要个好看的搜索框”，AI 可能会生成出个一个彩虹色。想让它听话，必须要输出【具体】的描述。
- 说清功能细节
😡反面教材 | 🤠正面案例 |
“加一个搜索功能” “做一个高级、有设计感的网站” | “搜索框放头顶右边，能搜商品名、描述，结果按卖得好 + 相关度排，一页 10 个，底下带个‘下一页’按钮” |
优秀的对话提需案例：
250px|700px|reset | 250px|700px|reset |
- 定好设计风格
本部分内容将为产品搭建奠定核心基调，产品的功能布局、整体架构与UI设计风格，均与这一环节的规划高度关联。
如果你想借助妙搭拓展设计思路，但尚未明确产品的具体形态，可先对核心功能进行概括描述、对UI设计提出基础要求，以灵活探索的方式推进应用搭建；
如果你已确定产品的整体架构与UI设计风格，则需将产品能力、架构逻辑、设计风格、UI细节乃至文案表述等内容，精准、详尽地传递给妙搭。
对需求的描述越细致全面，生成的产品初版就越贴合预期。
😡反面教材 | 🤠正面案例 |
“要高级好看的风格” | “简约风，白底色 + 淡蓝边框，字用无衬线字体，页面元素不要太多，按钮要大圆角” |
详细的prompt有助于AI理解你的需求。一个非常好用的判断标准就是，你可以问问自己：
如果这是发给设计/前端的需求，对方会不会追问一堆问题？
- 如果会 👉 你说得还不够具体
- 如果不会 👉 AI 大概率也能听懂
250px|700px|reset
- 主题样式
当我们首次描述了自己的需求，妙搭会生成开发计划，以及整体UI主题的选择，大部分的产品基础样式都可以在这里配置后呈现不错的效果：
250px|700px|reset
但需要注意的是：这个能力有好有坏，好处是生成产物质量稳定，保证不会出现太差的结果，但坏处也很明显，就是如果我们prompt里本身都带有详细的UI设计描述，这一步会把这些设定强行「洗掉」
所以对于「主题样式」设计的建议是：
- 如果你是「还没想好长啥样」
👉 那就大胆用默认主题
- 如果你是「心里已经有画面了」
👉 后面一定要留意：
是不是哪里被“统一风格”覆盖了，可以再重新描述自己的主题风格，覆盖现有样式
二、开发者进阶：可视化调试与风格定制
不要寄希望于第一版就能得到满意的效果，「飞书妙搭」的强大之处就在于，它在应用开发的每个阶段都加入了可视化开发和调试的能力：
- 主题随心换：妙搭为你准备了 5+ 种导航布局和 10+ 种应用主题。在开发过程中，你可以随时通过主题布局面板快速切换，找到最适合的风格。
250px|700px|reset
- 可视化微调：页面上的文案、样式，你可以直接选中元素进行批量修改，或者通过对话让妙搭调整
250px|700px|reset
- 专业级调试能力
对于开发者而言，妙搭提供的日志功能是排查问题的利器，遇到以下问题时，通过服务端日志可快速定位根因：
- 接口无返回数据：检查是否成功路由、请求参数是否完整、服务端是否正常响应
- 业务逻辑异常：若页面表现异常（如数据计算错误、状态更新失败），可以通过日志定位是接口层逻辑异常还是数据库层查询异常
- 飞书或者 AI 能力调用失败：通过日志检查对应能力的响应，识别超时或数据格式不符合预期的问题
250px|700px|reset
所以不要担心第一版的结果不美观，因为第一版通常不是用来好看的，是用来确认方向的。
- 第一轮生成，确定结构
- 清晰描述结构：模板句式：“我要个音乐播放网站，首页得有轮播图（展示热门歌单 / 新专辑预告）、新歌推荐区、热门歌单专区；点进去能看分类（按流行、摇滚、古典、民谣分），点歌曲 / 专辑能看详情（带专辑封面图、带歌曲信息表（含歌手 / 时长 / 专辑 / 流派）、带乐迷评论），还得有收藏列表（待播歌单）、会员开通 / 单曲购买页、我的订单（含已购音乐 / 收藏歌单 / 播放历史）。”
- 不合适就改：觉得不对就直说："专辑封面能点开放大，歌曲列表加个浅灰边框，评论按时间排，最新的放上面"
- 检查要点：生成初稿后，看看页面够不够、功能全不全、布局顺不顺，才能进行局部微调。
第一版生成后，只需要关注三件事：
- 页面是不是都给我了？
- 功能有没有漏？
- 跳转逻辑顺不顺？
至于好不好看？先不管。不美观可以改，结构错了才是真的麻烦。
- 局部微调
生成的初稿如果不符合预期，我们可以使用点选功能：
250px|700px|reset
- 找元素 ：精准选择页面元素，准确修改。分类页的图标不好，选中后告诉它改成什么样
- 改属性 ：图标：换个清楚的，调大到80×80px，颜色跟分类名保持一致。文字：标题弄成18px加粗，描述用14px正常字
- 调布局 ：选择组件后详细描述你要需要出现的位置，比如：把按钮调整到 Popular 模块下方
目前点选后可以直接对元素进行GUI 样式调整，调整完成后，直接提交就可以了，所见即所得
选中元素即可进行基础样式调整，画布实时响应，也可以直接用chat的方式进行描述修改
250px|700px|reset
元素可能存在多个div嵌套，可以使用选择父级的能力来精确找到自己想编辑的区域
- 妙搭官方模版
目前飞书妙搭平台已经上线了模版能力，通过模版我们可以找到一些不错的风格或者组件直接进行copy 代码，让 AI 把这部分添加到自己的项目中。如果你看到某个模板：结构对，页面节奏也差不多，气质有个 60% 接近，那就直接用。
从模板改，比从空白开始简单得多。
250px|700px|reset
三、常见问题解决方法
- 具体风格描述
别直接说“要好看的”，需要更准确精准的风格描述
- 现代简约风（官网首选） ：“70% 白色背景 + 20% 品牌主色 + 10% 灰色辅助色，无装饰性元素，按钮圆角8px，字体用黑体，正文行高1.5倍，模块间距30px，整体留白率40%”
- 商务专业风（B 端系统必备） ：“浅灰色背景（#F5F7FA），深蓝色主按钮（#165DFF），表格线1px实线（#E5E6EB），数据卡片带轻微阴影（0 2px 8px rgba(0,0,0,0.08)），字体用黑体，标题加粗不加色”
- 扁平化风格（流行款） ：“所有元素去立体感，图标用线性风格（线条2px），颜色用高饱和纯色（如#36BFFA、#722ED1），按钮无渐变无阴影，仅靠颜色区分状态（正常 / hover / 禁用）”
- 轻量科技风（适合科技公司官网） ：“渐变蓝背景（#E8F3FF），几何图形装饰（圆形 / 三角形，透明度20%），字体用Inter，数据展示区加轻微数字跳动动画（加载时从0涨到目标值），按钮点击带波纹扩散效果”
- 为AI赋能
- 告诉 AI 它的身份：开头加一句，可能会事半功倍
“你现在是阿里 P8 级 B 端设计师，擅长用极简设计解决复杂业务，给我做个客户管理系统首页，要求数据可视化清晰，操作路径不超过3步”
“你是上市公司官网设计师，做过30+500强企业官网，现在给我设计首页，要体现科技感+商务感，参考字节官网的信息层级”
- 用参考图，比文字描述更方便
图片+一句话=AI 秒懂，「视觉引导」是飞书妙搭的高阶功能之一。
使用方法：参考图+“模仿这个的XX部分，修改XX细节”，比如：“（模仿这个的产品参数展示区，把左侧图片换成我们的设备图，右侧参数项保留‘规格/性能/重量’，删除‘价格’列”。
250px|700px|reset
使用图片实示例前的prompt：
“帮我设计一个摩托车品牌MOTO官网，需包含：
架构：顶部导航栏（Logo+5菜单+订购按钮），垂直区块（首屏全屏车型/标题+双按钮、车型卡片区、品牌故事双栏布局、性能参数图标、用户评价轮播、CTA订购区），底部（导航/联系/订阅）
视觉：深空黑背景+活力橙渐变强调色，无衬线字体，金属拉丝边框+动态数据计数效果，图片用高光渲染摩托特写
交互：按钮悬停光效
核心要求：科技感/速度感视觉”
使用图片示例后的prompt：
“根据图片中的内容帮我生成一个炫酷的摩托车网站，要求内容和布局、风格、配色、功能等都和图片相同”
250px|700px|reset
垫图出来的整体效果是比纯prompt要好一些，如果你的prompt并没有考虑明白风格配色布局等，垫图可以帮你快速为网站“定调”。
- 与AI沟通的技巧
鼓励 AI
“上次首页轮播图的交互设计超有创意，用户停留时长都提升了！这次产品详情页的图片展示模块，咱把图片间距调成 12px，相信你能做得更出彩～”
“之前导航栏的响应式设计太惊艳了，适配各种屏幕都超流畅！这次购物车页面的按钮样式，保持 40px×56px，颜色 #FF6600，你肯定能打造出更亮眼的效果！”
严格批评指正
普通版：
“这商品列表页排版怎么回事？卡片间距忽大忽小，底部版权信息栏歪歪扭扭的！按之前定好的设计稿，文字居中对齐，字号 14px，颜色 #666666，今天必须改完！”
严格版
“商品分类页的图标和文字完全不搭！连最基础的视觉平衡都没有，幼儿园小朋友排版都比这协调！按 Material Design 图标规范，图标大小统一 24px，颜色 #333333，重做！”
批评版
“现在能做网站设计的工具一抓一大把！你要是连商品详情页的图片轮播功能都实现不了，明天我就换个模板自己做！”
“别以为离了你不行！市面上现成的响应式组件库多的是，要是联系我们页面的表单提交功能今天还出问题，就直接换人！”
详细描述需求拆分任务
“先做商品详情页的‘加入购物车’按钮，宽 120px，高 44px，颜色 #007BFF，圆角 6px，文字‘加入购物车’居中，背景色 hover 时变 #0056b3”
“把首页的‘立即购买’按钮拆分开做，先完成基础样式，宽 150px，高 50px，字体 18px，加粗，颜色白色，背景色 #FF5733”
反向激将
“我看网上的自动建站工具都能快速生成好看的商品展示页，你要是搞不定，我直接用工具生成了！今天下班前必须把商品分类页的布局优化好！”
“AI 都能根据需求生成适配不同屏幕的导航栏了，你要是还调整不好响应式效果，我真用 AI 做了！权限管理模块的菜单样式，今天必须按设计稿改完！”
250px|700px|reset
5.优化图片显示
自定义配图：尝试把喜欢的图片网址直接告诉 AI，换成新的图片，也可以直接把想替换的图片发过去，也是可以的。
250px|700px|reset
让灵感即刻落地
在使用飞书妙搭的过程中，有一个心态非常重要：别把 AI 当神仙，它其实是个超级实习生 。
- 精准描述 (PRD)：我们需要学会清晰地描述需求。你给出的指令越具体，它产出的结果越完美。
- 审美把关 (Review)：它可能会犯迷糊，需要你具备一定的审美和逻辑把关能力。
- 善用参考：在设计前，先去花瓣网等设计网站找找灵感，把范例喂给 AI，能大幅提高美观度。
无论你是希望验证快速业务系统的原型，还是追求极致、立等可取的视觉品牌官网，飞书妙搭通过自然语言交互，将您的描述精准转化为可上线的专业应用。
如果你也有搭建业务系统的需求，但不懂代码也不会开发，不妨尝试一下飞书妙搭！从 0 到 1 把你的想法变成产品！
