使用 frontend-design 做出的页面好丑，怎么办

蹲一个好的页面设计方法，不要再给我设计赛博朋克风格了。

蹲一个好的页面设计方法，不要再给我设计赛博朋克风格了。

codex目前还做不出来原生好看的UI，哪怕用UI UX Pro Max - Design Intelligence for Claude Code

模型问题，用啥都没用，除非不让模型参与设计让它照着图一比一复刻

同样蹲一个好方案，现在AI生成的太丑了

换个模型，或者先用image2生图再做。gpt审美不行众所周知

用 impeccable skills 试试

试试 Tailwind CSS + shadcn/ui，模板组件很好看，直接抄着改就行。

哈哈哈哈，真的就是花里胡哨的，直接说简约一点啊。

再贴一个之前的回复吧，仅供参考： 除非想不开，总之不能让codex去做原型。我之前顶多是让codex开发，把所有功能都实现了。然后截图给网页版gemini，重新给我布局，使用html生成高保真的原型，自己看完效果后，扔给codex去一比一还原。然后贴一个我常用的地址，用于查看gemini生成的html代码：https://www.toolhelper.cn/Html/Preview。不过现在又代充了一个claude pro账号，我发现claude做原型效果还是不错的，尤其交互逻辑这块。gemini没有交互设计能力。所以，有时候claude生成的也不满意的话，可以进一步让gemini试试。另外贴一段让codex修改样式的提示词： 这次任务是“视觉高保真还原”，不是重写功能。

HTML 原型只作为视觉规格源，用来还原：

• 
  

  布局

  
  


• 
  

  色调

  
  


• 
  

  字体层级

  
  


• 
  

  间距

  
  


• 
  

  圆角

  
  


• 
  

  阴影

  
  


• 
  

  图标风格

  
  


• 
  

  组件质感

  
  


• 
  

  页面整体观感

  
  

但功能必须使用当前系统自己的实现，不要照搬 HTML 原型里的功能逻辑。

具体要求：

1. 页面功能、业务逻辑、接口调用、数据结构、状态管理、权限控制、路由跳转，必须

沿用当前系统已有实现。

2. HTML 原型中的 mock 数据、假按钮、内联脚本、示例交互、临时状态，只能作为视觉

参考，不能直接作为业务实现。

3. 如果原型中的交互和当前系统已有功能不一致，以当前系统功能为准。

4. 如果为了还原视觉需要调整组件结构，可以改展示层，但不要改变业务语义、接口协

议和数据流。

5. 如果发现视觉原型和当前系统功能存在冲突，请先列出冲突点，再选择“保留系统功

能、还原原型视觉”的方案。

可以把完整提示词写成这样：

请严格以我提供的 HTML 原型作为 UI 视觉规格源，对当前系统页面做高保真视觉还原。

注意：HTML 原型只用于还原视觉，不用于替换功能。

你需要还原：

• 
  

  页面布局和信息层级

  
  


• 
  

  色调、背景、边框、阴影

  
  


• 
  

  字体、字号、字重、行高

  
  


• 
  

  间距、留白、对齐、密度

  
  


• 
  

  卡片、按钮、表单、导航、列表等组件质感

  
  


• 
  

  图标风格、尺寸、线宽、颜色和位置

  
  


• 
  

  hover、active、disabled、loading 等视觉状态

  
  

但必须保留当前系统自己的：

• 
  

  业务逻辑

  
  


• 
  

  接口调用

  
  


• 
  

  数据结构

  
  


• 
  

  状态管理

  
  


• 
  

  权限控制

  
  


• 
  

  路由跳转

  
  


• 
  

  表单校验

  
  


• 
  

  错误处理

  
  


• 
  

  国际化或配置逻辑

  
  

不要照搬 HTML 原型中的 mock 数据、假交互、内联脚本或临时逻辑。

如果 HTML 原型和当前系统功能冲突，以当前系统功能为准，只还原视觉效果。

实现前请先拆解 HTML 原型的视觉规范。

实现后请运行页面并截图自检，重点比较布局、色调、间距、字体层级和组件质感是否接

近原型。

先挑，不知道怎么挑就让ai帮你挑，其实应该先把布局排版搞清楚，但是我都是抽卡，很烦。模型也很重要，opus设计感还是很好，但是我没有。。codex依托。

最近发现的，感觉还行，你可以挑一挑

用这个项目让它自己去参考品牌吧GitHub - VoltAgent/awesome-design-md: A collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI. · GitHub

感谢各位佬们给出的方案，等有时间我去验证下效果

opendesign、pencil。

大厂设计方案：

taste skill

目前我用起来看，impeccable和taste skills是比 front-design 和 ui-ux-pro 好太多的，ui ux pro这个我用起来是效果最差的，巨巨巨巨巨巨巨讨厌无用的卡片堆砌和冗余的微动画效果

设计风格库 | UI Style Prompt - AI UI 设计风格提示词库

这个我找了好久！我记得我在L站上看到过一个很好的前端风格提示词库来着，然后怎么找都找不到。谢谢佬~

等fable,前端超好看，模型问题，各种skill,哈吉米，opus，先生图再写代码，我全部都试过了，都不满意