我想问如果我以一个开源的项目作为模板来设计,怎么样让后面设计的符合风格,最好可以给我看看案例(较大型的商业系统) #8477
Unanswered
nanfengovo
asked this question in
Q&A
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
我现在正在用 OpenDesign 设计一个大型 AGV / AMR Fleet Management System(类似工业 FMS / RCS 调度系统)。
这是我目前用 OpenDesign 生成的一版原型:
https://amr-api.open-design.ai/api/v1/public/snapshots/v9lbzi5gl4jfrtik5uon9qcb/files/test-fixed.html
目前这版我比较满意它的科技感、工业数字孪生和 3D 地图表现,但我现在遇到了一个更重要的问题:
我希望后续整个产品的所有页面,都能够长期保持统一的视觉语言,而不是每生成一个页面,AI 就重新发明一套 UI 风格。
我的想法是,以一个成熟的开源管理系统作为基础设计参考,例如:
SoybeanAdmin
https://github.com/soybeanjs/soybean-admin
SoybeanAdmin 本身是一个比较成熟的 Vue3 企业级后台模板,有完整的 Layout、Sidebar、Header、Tabs、Table、Form、Dialog、Drawer、Theme、Typography、Spacing、组件体系等。它本身并不是 AGV 系统,但我希望把它作为整个 AGV 产品的“Enterprise UI Foundation”,然后在此基础上增加工业控制、AGV、任务调度、地图、设备、告警和数字孪生相关的专用组件。
我的目标大概是:
SoybeanAdmin
↓
Enterprise UI Foundation
↓
AGV / Industrial Design System
↓
Fleet / Task / Alarm / Map / Device / Workflow
↓
2D / 3D Digital Twin
也就是说,我并不是想简单“模仿 SoybeanAdmin 的页面”。
我想知道的是:
在 OpenDesign 中,怎样建立一个真正可以被后续页面持续继承的 Design System / Design Constitution / Visual Language?
例如我希望定义并长期固定以下内容:
Application Shell
Sidebar
Header
Tabs
Breadcrumb
Page Layout
Typography
Font
Font size
Weight
Heading hierarchy
Numeric / telemetry typography
Spacing
4px / 8px spacing system
Page padding
Component spacing
Dense enterprise layout
Components
Button
Input
Select
Table
Card
Drawer
Dialog
Tabs
Badge
Tooltip
Dropdown
Semantic Colors
AGV Running
Idle
Charging
Fault
Offline
Warning
Emergency
Task Completed
Task Running
Task Failed
Station Available
Station Occupied
Station Locked
AGV-specific Components
AGV Status
Battery
Task Card
Route
Station
Alarm
Telemetry
Timeline
Robot Inspector
Spatial / Digital Twin Components
2D map
3D map
Navigation nodes
Path
Traffic
Heatmap
Robot marker
Charging station
Elevator
Door
PLC
Traffic light
Interaction Pattern
例如所有核心页面统一采用:
Navigation
→ Main Workspace
→ Selected Object
→ Inspector / Detail
而不是每个页面重新设计布局。
我的产品大概有以下模块:
Map Management
Vehicle Management
Task Scheduling
Dispatch Algorithms
Workflow Orchestration
Alarm Center
Real-time Monitoring
Analytics / Reports
Charging Management
Warehouse Logistics
Equipment Management
System Administration
其中:
User / Role / Permission / Configuration / Report 等页面更接近普通 Enterprise SaaS
Vehicle / Task / Alarm / Equipment 等页面属于 Industrial Operations
Real-time Monitoring / Map Editor / Simulation / Path Planning 属于 Spatial / Digital Twin UI
因此我不希望所有页面都做成“赛博朋克”。
我更希望形成三层视觉体系:
A. Enterprise Pages
以 SoybeanAdmin 的企业后台体验为基础。
B. Industrial Operations Pages
在 SoybeanAdmin 上加入工业控制和实时状态表达。
C. Spatial / Digital Twin Pages
保留 SoybeanAdmin 的整体 Shell,但让主要工作区进入 2D/3D 空间界面。
最终感觉应该类似:
SoybeanAdmin
+
现代商业 SaaS
+
工业自动化软件
+
AMR Fleet Management
+
Digital Twin
而不是:
Generic Admin Dashboard
也不是:
Cyberpunk Game UI
所以我想请你从 OpenDesign 本身的能力和最佳实践 出发,给我一个比较系统的建议:
如果我希望以 SoybeanAdmin 为长期视觉基准,在 OpenDesign 中应该怎样提供 Reference?
应该提供:
GitHub URL?
截图?
Design System 页面?
一个专门制作的 Style Reference Page?
Token / Color / Typography 定义?
Component examples?
哪种方式最能够让后续生成的页面持续保持一致?
OpenDesign 是否支持类似:
Design Tokens
+
Component Library
+
Page Templates
+
Global Style Rules
+
Reusable Components
这种方式?
如果支持,推荐怎么组织?
例如:
AGV-FMS-Design-System
├── Tokens
├── Typography
├── Colors
├── Layout
├── Components
├── Industrial Components
├── Map Components
├── Templates
└── Pages
以后我每次让 AI 创建新页面时,应该怎么写 Prompt?
例如我希望以后只需要告诉 AI:
“使用 AGV-FMS Design System,创建 Vehicle Management 页面”
而不是每次重新描述整个视觉风格。
这种工作流在 OpenDesign 中应该怎么实现?
有什么机制可以防止:
第一页使用一种蓝色
第二页换了一种蓝色
第一页卡片圆角 8px
第二页变成 20px
第一页字体比较紧凑
第二页突然变成大号 SaaS 风格
第一页 Sidebar 是一种结构
第二页又变成另一种结构
第一页使用玻璃效果
第二页又开始大量渐变和霓虹
也就是说:
如何避免 AI Design Drift / Visual Drift?
另外,我希望参考一些真正成熟的商业级系统,而不仅仅是普通 Admin Template。
请推荐一些适合研究的:
AMR / AGV Fleet Management
Warehouse Robotics
Industrial Automation
Manufacturing Execution
Control Center
Digital Twin
Industrial IoT
Large-scale Operations Platform
最好是类似:
MiR Fleet
OTTO Fleet Manager
Siemens industrial software
NVIDIA Omniverse
以及其他类似产品。
我更希望看到:
“为什么这个产品的 UI 信息架构值得参考”
而不仅仅是给我几个网站链接。
最后,我真正想解决的问题不是:
“帮我生成一个漂亮 AGV 页面。”
而是:
“如何利用 OpenDesign 建立一个可持续扩展的大型 AGV FMS Design System,使未来几十个页面都看起来像同一个成熟商业产品?”
All reactions