【大量UI风格+AI提示词的模板库】快速地使用AI生成高质量的UI
- 内容介绍
- 文章标签
- 相关推荐
佬友好 今天想介绍自己制作的一个项目吧 → 提供一站式的UI 风格提示模板库，可帮助开发人员使用AI生成更高质量的Web界面。
很多时候我们使用AI生成网站ui，他们的设计太像’AI’了。所以就想到开发一个网站，集中很多核心的UI风格的提示词，可以方便我们产生出我们想要的界面。
- 风格 : 提供 UI 设计风格网站模板 eg 扁平化设计, 极简主义
- 组件 (提示词未完成 + 还有很多bug): 提供可复用的 UI 组件模板 eg 导览, 模态对话框, 加载骨架 etc
- 布局 (未完成): 提供功能允许用户使用拖拽的方法拖拽元件组成基本的网页设计布局方案，从而生成关于布局安排的AI提示词
在线演示 : www.uiprompt.site
Github 源码 (觉得有兴趣 不妨加个star? ) : GitHub - TonnyWong1052/UI-Prompt: A carefully crafted UI-style prompt template library that helps developers generate higher-quality, more consistent, and design-driven web interfaces. UI 风格提示模板库，可帮助开发人员使用AI生成更高质量、更一致、以设计为导向的 Web 界面。
生成结果示范 (通过z.ai使用提示词一键生成的UI - GLM-4.6 https://chat.z.ai) :
Screenshot 2025-11-19 at 11.59.44 PM2872×1392 695 KB
分享一下某些个人喜欢的UI :
烟雾效果
Screenshot 2025-11-20 at 12.58.54 AM2880×1200 427 KB
街机 CRT
Screenshot 2025-11-20 at 1.02.20 AM2794×1204 422 KB
手绘涂鸦
Screenshot 2025-12-19 at 7.08.05 PM2794×1234 332 KB
)
布局提示功能 (未完成)
提供功能允许用户使用拖拽的方法拖拽元件组成基本的网页设计布局方案，从而生成关于布局安排的AI提示词
简单来说就是 : 布局AI提示词 + 风格提示词 = 订制化服务
例子:
用户自己制作的布局:
Screenshot 2025-11-19 at 10.49.26 PM1036×784 21.3 KB
++
风格提示词:
你现在是一名资深 UI 设计师兼前端工程师，请生成一个与当前「极简 SaaS 落地页」界面风格高度接近的极简主义（Minimalism）风格 SaaS 首页。
要求：保持整体布局、留白比例和黑白灰基調不變，只允许替换文案、品牌名称和图标。输出使用…
=
生成结果 (风格订制化服务):
Screenshot 2025-11-19 at 10.48.07 PM2870×926 130 KB
小感想
开始的时候制作，起因是因为每一天也有剩余很多的sonnet的token 也不想浪费太多 所以使用claude sonnet制作了很多UI 里面的UI有95%是使用sonnet-4.5制作的
本来只打算制作少量的UI供自己参考的，没想到制作超过60款UI了，原本也是使用vibe coding制作这个网站。但是发现代码质量太差了，还是手动地改了一些代码结构，感觉里面还有很多质量很低的代码。现在养成了一个习惯，很喜欢收集一些漂亮的UI放在我的网站里，网站可能也会经常地更新
有想过制作一个UI的MCP 类似context7 → 根据用家需求 在数据库中输出适当的的UI (eg claude code需要产生UI的时候呼唤MCP > 然后根据需求 输出相应的UI code + Prompt > 之后claude code根据UI code + Prompt再自行调整UI结构)
用家也可以把自己的喜欢的UI 收集并且放上去MCP储存 供下次需要使用相关UI的时候>MCP调配使用 但好像想太多是不是
--【壹】--：
好东西awa
--【贰】--：
好东西ya
--【叁】--：
感谢分享.
--【肆】--：
感谢分享
--【伍】--：
有点厉害支持~~
--【陆】--：
感谢分享！！
--【柒】--：
[!success] 太强了，必须支持
--【捌】--： Dog:
剩余很多的 sonnet
榨干每个5小时
--【玖】--：
感谢佬友分享
--【拾】--：
star一下
--【拾壹】--：
感谢分享
--【拾贰】--：
好像很有必要的样子，谢谢
--【拾叁】--：
感谢分享
--【拾肆】--：
好东西，感谢大佬分享！
--【拾伍】--：
好东西 收藏一下
感谢分享~
--【拾陆】--：
好牛，已star
--【拾柒】--：
好东西！收藏了，多谢佬友
--【拾捌】--：
好东西，star了就是我的了
--【拾玖】--：
哈哈哈，拯救了我司前端模版不够多的问题
佬友好 今天想介绍自己制作的一个项目吧 → 提供一站式的UI 风格提示模板库，可帮助开发人员使用AI生成更高质量的Web界面。
很多时候我们使用AI生成网站ui，他们的设计太像’AI’了。所以就想到开发一个网站，集中很多核心的UI风格的提示词，可以方便我们产生出我们想要的界面。
- 风格 : 提供 UI 设计风格网站模板 eg 扁平化设计, 极简主义
- 组件 (提示词未完成 + 还有很多bug): 提供可复用的 UI 组件模板 eg 导览, 模态对话框, 加载骨架 etc
- 布局 (未完成): 提供功能允许用户使用拖拽的方法拖拽元件组成基本的网页设计布局方案，从而生成关于布局安排的AI提示词
在线演示 : www.uiprompt.site
Github 源码 (觉得有兴趣 不妨加个star? ) : GitHub - TonnyWong1052/UI-Prompt: A carefully crafted UI-style prompt template library that helps developers generate higher-quality, more consistent, and design-driven web interfaces. UI 风格提示模板库，可帮助开发人员使用AI生成更高质量、更一致、以设计为导向的 Web 界面。
生成结果示范 (通过z.ai使用提示词一键生成的UI - GLM-4.6 https://chat.z.ai) :
Screenshot 2025-11-19 at 11.59.44 PM2872×1392 695 KB
分享一下某些个人喜欢的UI :
烟雾效果
Screenshot 2025-11-20 at 12.58.54 AM2880×1200 427 KB
街机 CRT
Screenshot 2025-11-20 at 1.02.20 AM2794×1204 422 KB
手绘涂鸦
Screenshot 2025-12-19 at 7.08.05 PM2794×1234 332 KB
)
布局提示功能 (未完成)
提供功能允许用户使用拖拽的方法拖拽元件组成基本的网页设计布局方案，从而生成关于布局安排的AI提示词
简单来说就是 : 布局AI提示词 + 风格提示词 = 订制化服务
例子:
用户自己制作的布局:
Screenshot 2025-11-19 at 10.49.26 PM1036×784 21.3 KB
++
风格提示词:
你现在是一名资深 UI 设计师兼前端工程师，请生成一个与当前「极简 SaaS 落地页」界面风格高度接近的极简主义（Minimalism）风格 SaaS 首页。
要求：保持整体布局、留白比例和黑白灰基調不變，只允许替换文案、品牌名称和图标。输出使用…
=
生成结果 (风格订制化服务):
Screenshot 2025-11-19 at 10.48.07 PM2870×926 130 KB
小感想
开始的时候制作，起因是因为每一天也有剩余很多的sonnet的token 也不想浪费太多 所以使用claude sonnet制作了很多UI 里面的UI有95%是使用sonnet-4.5制作的
本来只打算制作少量的UI供自己参考的，没想到制作超过60款UI了，原本也是使用vibe coding制作这个网站。但是发现代码质量太差了，还是手动地改了一些代码结构，感觉里面还有很多质量很低的代码。现在养成了一个习惯，很喜欢收集一些漂亮的UI放在我的网站里，网站可能也会经常地更新
有想过制作一个UI的MCP 类似context7 → 根据用家需求 在数据库中输出适当的的UI (eg claude code需要产生UI的时候呼唤MCP > 然后根据需求 输出相应的UI code + Prompt > 之后claude code根据UI code + Prompt再自行调整UI结构)
用家也可以把自己的喜欢的UI 收集并且放上去MCP储存 供下次需要使用相关UI的时候>MCP调配使用 但好像想太多是不是
--【壹】--：
好东西awa
--【贰】--：
好东西ya
--【叁】--：
感谢分享.
--【肆】--：
感谢分享
--【伍】--：
有点厉害支持~~
--【陆】--：
感谢分享！！
--【柒】--：
[!success] 太强了，必须支持
--【捌】--： Dog:
剩余很多的 sonnet
榨干每个5小时
--【玖】--：
感谢佬友分享
--【拾】--：
star一下
--【拾壹】--：
感谢分享
--【拾贰】--：
好像很有必要的样子，谢谢
--【拾叁】--：
感谢分享
--【拾肆】--：
好东西，感谢大佬分享！
--【拾伍】--：
好东西 收藏一下
感谢分享~
--【拾陆】--：
好牛，已star
--【拾柒】--：
好东西！收藏了，多谢佬友
--【拾捌】--：
好东西，star了就是我的了
--【拾玖】--：
哈哈哈，拯救了我司前端模版不够多的问题