不会页面设计,可以用 flux 生成 ui 图

查看 19|回复 0
作者:NcuLeonZeng   
不会页面设计,可以用 flux 生成 ui 图,我是这么个流程,以条码生成为例:
[ol]
  • 先用 GPT 聊一下成熟商用的条码生成软件有哪些功能
  • 再用 GPT 给出生成 ui 图的 Flux 提示词,中英文对照,方便调整
  • 输入英文提示词到 Flux ,多抽几次(几乎每一张都很满意)
  • 照着图再用 Claude 改一改(也可以直接用 cursor 按图片生成基础布局,不过我试了效果不太好)

    [/ol]
    可以看下我改完的效果: https://barcode-maker.com/zh
    附 Flux 提示词:
    Design a professional user interface for a barcode generator tool website with the following elements:
    [ol]
  • Top Navigation Bar:
    [/ol]
  • Display the website name "Barcode Generator"
  • Include user account icon and settings button

    [ol]
  • Left Sidebar:
    [/ol]
  • Provide a list of different barcode types (e.g., EAN-13, QR Code, Code 128)
  • Clearly identify each type with icons and text

    [ol]
  • Main Editing Area:
    [/ol]
  • Large preview window showing the generated barcode in real-time
  • Editing panel with input fields and basic configuration options

    [ol]
  • Bottom Toolbar:
    [/ol]
  • Include various editing tools such as add text, resize, change color, etc.
  • Use intuitive icons to represent each tool

    [ol]
  • Action Buttons:
    [/ol]
  • Place "Save Project" and "Export Barcode" buttons in the top right corner
  • Highlight these buttons with prominent colors

    Overall Design Style:
  • Use deep blue as the primary color with a white background for a professional look
  • Adopt a flat design to ensure the interface is clean and readable
  • Add appropriate shadows and spacing to enhance visual hierarchy
  • Ensure responsive design to adapt to different screen sizes

    Make sure the overall layout is intuitive and user-friendly, allowing users to quickly get started with the tool.
  • 您需要登录后才可以回帖 登录 | 立即注册

    返回顶部