UI设计Prompt系列(十):导航栏设计——用结构化Prompt定义页面骨架
导航栏是Web应用的骨架决定了用户如何从一个页面到达另一个页面。但就是这个骨架往往是团队协作中最容易出现分歧的地方产品想要侧边导航顶部面包屑设计画了顶部Tab式导航前端参照了另一个产品的底部导航——三方对齐需要至少两轮会议。长亭百智云的设计Prompthttps://baizhi.cloud/landing/design-prompt将导航栏设计从口头描述变成了结构化定义。平台内置数百个设计模板涵盖了侧边导航、顶部导航、混合导航、Tab导航、底部导航等所有常见模式。每个模板都标注了导航栏的层级规则、展开/折叠行为、选中态样式、二级菜单的缩进和图标规范。使用设计Prompt定义导航栏时你需要明确的不再是左边放个菜单而是具体的结构化描述导航类型侧边/顶部/混合、宽度展开态240px折叠态64px、菜单项高度、图标尺寸、字体大小、选中态背景色和左侧指示条、二级菜单的缩进量、父子菜单的展开动画。这些参数一旦在Prompt中锁定设计师和前端就有了统一的参照标准不存在你做的和我想的不一样式的返工。导航栏设计中最容易被忽视的是响应式行为。一款Web应用在1440px宽屏上是侧边导航缩到768px平板时可能需要变成顶部汉堡菜单再到375px手机上可能需要底部Tab栏。设计Prompt通过结构化字段定义了每种屏幕尺寸下的导航模式变化避免了移动端的导航怎么搞到最后一天才讨论的窘境。平台完全免费你可以从模板库中选择最接近的导航模式补充业务需求后生成标准化Prompt直接对接AI代码生成工具快速产出具有完整交互状态的导航组件代码。从需求到落地整个过程比传统设计-评审-开发流程快三倍以上。

相关新闻

MCP 是什么:Agent 如何通过标准协议连接工具和外部服务

MCP 是什么:Agent 如何通过标准协议连接工具和外部服务

前言 前面我们已经学习了 Tool Calling。 Tool Calling 的基本思路是:模型决定要调用什么工具,后端负责校验参数、执行真实业务,然后把结果返回给模型。 但是当 Agent 项目逐渐变多时,会出现一个新问题: 每个 Agent 都…

2026/10/19 11:53:52 阅读更多 →
【华夏二十四节气|07】HarmonyOS 6.0.2(22) ArkTS 节气搜索实战:多字段匹配与四态闭环

【华夏二十四节气|07】HarmonyOS 6.0.2(22) ArkTS 节气搜索实战:多字段匹配与四态闭环

【华夏二十四节气|07】HarmonyOS 6.0.2(22) ArkTS 节气搜索实战:多字段匹配与四态闭环本文唯一核验标记:AGC18-HMOS-15-07-SEARCH-POEM-GAP证据边界:本文的“当前实现”以本轮复核的 SearchPage.ets、SolarTermModel.ets、SolarTe…

2026/10/18 19:11:07 阅读更多 →
Agent系统失败的三大工程层

Agent系统失败的三大工程层

大多数agent系统失败,不是因为模型太弱。而是因为围绕模型的系统从未被当作系统来设计。工具不可靠,状态在运行之间消失,agent重试却不学习任何东西,工作流以无人可检查的方式分支——然后每一次失败都被归咎于模型。这是错误的诊…

2026/10/20 14:13:34 阅读更多 →

最新新闻

60次实测:MCP不省上下文,子agent平均省38.1%token增量

60次实测:MCP不省上下文,子agent平均省38.1%token增量

做Agent应用的人,大概都被问过一个问题:接上MCP之后,上下文是不是就能省不少?我前两天刚跑完一轮60次真实任务的对照实测,结论很干脆——MCP在省上下文这件事上的贡献是精确的0;而换成子agent路线&#xff…

2026/10/20 14:46:40 阅读更多 →
RRT-Connect双树搜索MATLAB代码详解:从原理到实现

RRT-Connect双树搜索MATLAB代码详解:从原理到实现

简介:面向机器人运动规划与路径规划研究者,这份资源提供了RRTConnect算法的完整MATLAB实现。RRTConnect在经典RRT基础上采用双向搜索策略,适合解决高维空间或复杂环境下两点间快速路径规划问题,对自动化、机器人及相关专业学生开展…

2026/10/20 14:46:40 阅读更多 →
Windows下Mask R-CNN PyTorch原生编译与部署实战

Windows下Mask R-CNN PyTorch原生编译与部署实战

1. 为什么在Windows上配Mask R-CNN不是“装个包”那么简单 Mask R-CNN是目标检测与实例分割领域的标杆模型,PyTorch版因其模块清晰、易于调试、社区生态活跃,成为多数研究者和工程落地首选。但当你在Windows系统上打开终端,输入 pip install…

2026/10/20 14:46:40 阅读更多 →
AI生成实操型博文的安全与格式规范要点

AI生成实操型博文的安全与格式规范要点

好的,我将严格遵循安全与格式要求,基于标题生成一篇完整、可直接发布的实操型博文,全程不涉及任何风险或敏感内容。因内容较长,我会分两条消息完成全文。

2026/10/20 14:46:40 阅读更多 →
n8n外部执行器部署指南:独立代码沙箱隔离与Docker Compose实战

n8n外部执行器部署指南:独立代码沙箱隔离与Docker Compose实战

这两年用 n8n 做流程自动化的人越来越多,但大部分人把 n8n 部署好以后就默认开工了,根本不会注意到一个关键组件——任务执行器。n8n 从 2.x 版本开始引入了外部执行器机制,简单说就是把 Code 节点、自定义 JS、Python 脚本这类代码运行环境从…

2026/10/20 14:46:40 阅读更多 →
Ubuntu 24.04用Docker Compose部署Whisper语音识别服务全指南

Ubuntu 24.04用Docker Compose部署Whisper语音识别服务全指南

如果你需要在Ubuntu 24.04上搭一个完全本地的语音识别服务,把录音、播客、会议音频批量转成文本,同时又不想被一堆Python依赖折腾到怀疑人生,那Whisper配合Docker Compose几乎是我目前试过最省心的组合。我最近把整套流程从零跑通&#xff0c…

2026/10/20 14:45:32 阅读更多 →

日新闻

CLRC663芯片Pin-to-Pin替代实战:从评估到量产全记录

CLRC663芯片Pin-to-Pin替代实战:从评估到量产全记录

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/20 1:01:30 阅读更多 →
ESP32舵机控制指南:原理、多路驱动与避坑实战

ESP32舵机控制指南:原理、多路驱动与避坑实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/20 1:01:30 阅读更多 →
位移法实现一阶低通滤波:单片机ADC采样降噪实战

位移法实现一阶低通滤波:单片机ADC采样降噪实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/20 1:01:30 阅读更多 →

周新闻

基于GMM的语音识别系统原理与MATLAB实现详解

基于GMM的语音识别系统原理与MATLAB实现详解

说到基于高斯混合模型(GMM)的语音识别系统,很多人第一反应就是一堆数学公式,觉得门槛很高。但如果你真的在MATLAB里把它落地跑通,会发现核心其实就是三件事:把声音变成特征向量,用GMM给每个类别…

2026/10/20 10:02:13 阅读更多 →
数字图像处理入门:反白、灰度化、调色板修改与导出txt实践

数字图像处理入门:反白、灰度化、调色板修改与导出txt实践

数字图像处理这四个字听起来挺唬人,但落到具体操作上,无非就是让计算机按你的想法“摆弄”像素。我在一个模拟项目X里用了一套特别经典的基础处理流程:对图像做反白、改调色板、彩色转灰度,最后把像素数据导出成txt文件。单看每一…

2026/10/19 17:32:41 阅读更多 →
机器人大脑技术盘点:具身智能的感知、决策与数据闭环

机器人大脑技术盘点:具身智能的感知、决策与数据闭环

如果你的信息流最近也天天刷到“机器人大脑”这个词,你会发现一个很有意思的现象:每个人说的“大脑”根本不是同一个东西。有人指的是大语言模型,有人指的是运动控制系统,还有人指的是能理解物理世界的端到端模型。在2026年这个时…

2026/10/20 2:50:50 阅读更多 →

月新闻

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/20 10:02:08 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/20 9:50:17 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/20 9:50:45 阅读更多 →