前端自给自足 UI 设计稿？（Claude AI 版本）

[Justin3go]

原文链接 >

AI 摘要:

笔者最近探索了如何借助 AI （特别是 Claude ）来协助前端开发者完成 UI 设计工作。通过实践发现，Claude 在这方面表现出色，能够快速生成符合现代设计趋势的界面设计。

在这篇文章中，我以一个健康类 APP 为例，演示了如何通过简单的提示词引导 AI 完成设计工作。整个过程分为几个核心模块：首页概览、运动计划、饮食管理以及社区功能。通过分模块设计的方式，不仅避免了 AI 模型的输出限制问题，还能让设计更加聚焦和精细。

为了提高效率和可用性，我在提示词中特别强调了以下几点：

使用 Tailwind CSS （ CDN 方式）实现样式 采用 Lucide Static CDN 处理图标 将相关页面整合在同一个 HTML 文件中 通过对比测试，目前 Claude （特别是 3.5 版本）在该场景下的表现最为稳定。而 GPT-4o 和 DeepSeek 等其他模型在完成类似任务时还存在一定差距。

[yusf]

刚好最近打算试试自己弄一套 ui

[Justin3go]

@zdw189803631 那可以试试这个提示词，如果有效果更好的提示词，欢迎分享～

[4UyQY0ETgHMs77X8]

正好刚做的系统没有好的 UI对前端技术栈不熟悉所以没办法指导 UI ，我借鉴一下，谢谢 OP 了哈哈哈

[hyqCrystal]

👍

[louisyoungx]

https://mgx.dev/
https://bolt.new/
https://lovable.dev/

完全没基础的话，可以试试这几个，也都是基于 claude 3.5 的

有开发基础的用 cursor / trae / devin

[ssshooter]

结论是只能用 Claude 吗？哎，号被封了真烦

[yangheng4922]

@Justin3go



画了几个还不错

[Justin3go]

@yangheng4922 牛的，PC 端看着效果也不错

[Justin3go]

@ssshooter 推理模型可以尝试一下，有看到说效果不错的评论，目前来说确实是 Claude 3.5 表现最好，3.7 经常被截断（不介意也可以用用）

[zzmj]

我觉得 AI 生成有一个很重大的缺陷是缺乏连贯性，只能设计单一的组件或者页面。
假设多页面的复杂系统，就不好处理了，但恰恰如果各个页面设计不一的话，就会差点意思...

[Justin3go]

@zzmj 是的，所以需要让 AI 先思考整体功能和设计风格（先整体，后局部也是人的一个做事方式），然后每次就可以参考该整体风格来设计单个页面

[jamesjammy061]

牛的，比直接用 v0 还好多了，之前用 copyweb v0 bolt 什么的都试了下 image2code ，感觉不太行，还不如给 gpt4 图片转描述，然后再给 claude3.5 sonnet

[lovestudykid]

claude 好像总是生成不存在的 tailwindcss cdn 地址

[Justin3go]

@jamesjammy061 强的是 Claude ，客户端选 claude 模型是一样的，只是有些帮助你执行了一些自动化操作

[Justin3go]

@lovestudykid 我没遇到这个问题，你可以直接在提示词里把地址告诉他