基于Open Design创作前端UI
前言
如果使用过AI进行开发，大概率都会遇到大模型的UI设计毫无新意，大概率可以被一眼看出来，导致的结果就是生成UI随机很高，这样不但不利于开发的进行，很可能我项目毁于UI设计，好看有新意的UI大概率也是人为创作，纯大模型的生成基本，无法使用。
所以，设计是一项很重要的工作，之前大概率的专业前端设计都是基于Figma的设计图纸进行复刻，而Figma的使用明显高于我预期的开发时间，我没有前端经验，我去设计UI甚至还不如让大模型来设计。
而在我网上冲浪，寻找前沿技术时，发现了Claude Design，展示出的设计效果可以说相当逆天，But Claude Design的使用都是基于Anthropic的模型，而Open Design是基于Claude Design进行复刻开源项目，能接入更多模型，让设计成本更低。
Open-Design
不过Open Design的完成度还有待提高，还会有莫名Bug，但主要功能基本涵盖，不是很影响使用。
开发使用
我之前制作的Blog的UI在我的感觉并不是很好，而我也让各种AI帮我设计UI，也都不尽人意，也是在这个需求中我找到了Open Design的用武之地。
准备工作
-
先要配置大模型，Open Design本身没有大模型，需要额外配置大模型API，在我的使用中，尽快避免使用BYOK这个供应商API，而是直接使用本机CLI。
- 在我使用的过程中，直接使用API导致大模型无法读取设计稿等，但是走CLI却正常使用，莫名问题。
- 其次要配置的大模型最好拥有视觉能力，并且最好使用旗舰顶级大模型，非常吃模型能力。
-
如果需要更高质量的，最好接入媒体生成提供商，就是接入AI生图等能力，可以更加提高生成质量。
-
Design中还有模板类，根据想要的风格可以进一步减少生成随机性。
正式开发
创建项目就开始了正式的开发UI过程，我使用的是Gemini CLI，还是向大模型诉说需求，大模型进行对你提问，静等大模型输出。。。
让大模型初始输出并不是很重要，对产物进行调整才是去AI味的关键。
Open-Design原始支持元素选择，这可以大大提高修改效率，而且基于AI进行修改，就是对Html进行编辑，所以修改成本很低，也更简单。
这就有人又说了
这个内容元素选择功能并不是很难，Trea的编辑器内部浏览器就能捕捉，而且Nuxt预览时可以选择，这个功能不是很鸡肋？为什么还需要单独做成软件？
Open Design特性
- Open Design是针对Html的编辑，只是设计UI，而其他工具都是基于js框架实现，设计只注重设计效果，而不是去实现，生成的设计文件可以让AI再进行迁移到js框架中。
- 重新迁移岂不是很麻烦，为什么不在js中直接设计UI？Open Design是系统级提示词约束，更加专业的框架实现设计效果，不用担心改变了框架其他部分，就是在于专心设计。
- Open Design接入生图接口，大模型可以直接写提示词，生成所需图片，更加方便质量更高
- 不止局限于网页开发，演示文件使用Html更加合适，AI使用Html语言能更高生成动画和各种图形，还可以进行定向修改，这个功能在其他AI生成PPT中并不是那么容易。
- 也可以设计图片视频音频，我还没有试，可以看一些效果图。
网络中各种效果很好的设计，都是基于最强的那几个大模型来实现的，加上人工调整干预。
悟
如果追求极致效率和质量，付费Claude Design这是最强实现。
在复刻UI时最好也使用比较强的AI进行理解复刻，能力太弱的复刻效果很差，最起码基于DS-V4及其以上的模型进行实现，要不然，还不是Figma来手动设计。
UI是作为网站的门面，现实中UI设计大概率不会让AI来全全主导，毕竟UI是给人看的，只有别具一格的设计才能让用户停留，所以设计创意是主要吸引眼球的东西。
- 网站效果演示
网页目前存在缺陷，主要因为托管在纯静态站点中，没有SPA回退机制。
