这是一个创建于 313 天前的主题，其中的信息可能已经有所发展或是发生改变。
AI 摘要:
笔者最近探索了如何借助 AI （特别是 Claude ）来协助前端开发者完成 UI 设计工作。通过实践发现，Claude 在这方面表现出色，能够快速生成符合现代设计趋势的界面设计。
在这篇文章中，我以一个健康类 APP 为例，演示了如何通过简单的提示词引导 AI 完成设计工作。整个过程分为几个核心模块：首页概览、运动计划、饮食管理以及社区功能。通过分模块设计的方式，不仅避免了 AI 模型的输出限制问题，还能让设计更加聚焦和精细。
为了提高效率和可用性，我在提示词中特别强调了以下几点：
使用 Tailwind CSS （ CDN 方式）实现样式 采用 Lucide Static CDN 处理图标 将相关页面整合在同一个 HTML 文件中 通过对比测试，目前 Claude （特别是 3.5 版本）在该场景下的表现最为稳定。而 GPT-4o 和 DeepSeek 等其他模型在完成类似任务时还存在一定差距。
 | 1 yusf 2025 年 3 月 4 日 刚好最近打算试试自己弄一套 ui |
 | 2 Justin3go OP @zdw189803631 那可以试试这个提示词，如果有效果更好的提示词，欢迎分享～ |
 | 3 4UyQY0ETgHMs77X8 2025 年 3 月 4 日  1 正好刚做的系统没有好的 UI  对前端技术栈不熟悉所以没办法指导 UI ，我借鉴一下，谢谢 OP 了哈哈哈 |
 | 4 hyqCrystal 2025 年 3 月 4 日 |
 | 5 louisyoungx 2025 年 3 月 4 日 https://mgx.dev/ https://bolt.new/ https://lovable.dev/ 完全没基础的话，可以试试这几个，也都是基于 claude 3.5 的 有开发基础的用 cursor / trae / devin |
 | 6 ssshooter 2025 年 3 月 4 日 结论是只能用 Claude 吗？哎，号被封了真烦 |
 | 7 yangheng4922 2025 年 3 月 4 日 |
| 8 Justin3go OP @yangheng4922 牛的，PC 端看着效果也不错 |
| 9 Justin3go OP @ssshooter 推理模型可以尝试一下，有看到说效果不错的评论，目前来说确实是 Claude 3.5 表现最好，3.7 经常被截断（不介意也可以用用） |
 | 10 zzmj 2025 年 3 月 4 日 我觉得 AI 生成有一个很重大的缺陷是缺乏连贯性，只能设计单一的组件或者页面。 假设多页面的复杂系统，就不好处理了，但恰恰如果各个页面设计不一的话，就会差点意思... |
| 11 Justin3go OP @zzmj 是的，所以需要让 AI 先思考整体功能和设计风格（先整体，后局部也是人的一个做事方式），然后每次就可以参考该整体风格来设计单个页面 |
 | 12 jamesjammy061 2025 年 3 月 4 日 牛的，比直接用 v0 还好多了，之前用 copyweb v0 bolt 什么的都试了下 image2code ，感觉不太行，还不如给 gpt4 图片转描述，然后再给 claude3.5 sonnet |
 | 13 lovestudykid 2025 年 3 月 5 日 claude 好像总是生成不存在的 tailwindcss cdn 地址 |
| 14 Justin3go OP @jamesjammy061 强的是 Claude ，客户端选 claude 模型是一样的，只是有些帮助你执行了一些自动化操作 |
| 15 Justin3go OP @lovestudykid 我没遇到这个问题，你可以直接在提示词里把地址告诉他 |
Select Language