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