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