做了一个用于收集设计风格的网站，希望可以帮助大家用AI更好的做前端界面
- 内容介绍
- 文章标签
- 相关推荐
开发时间较短，所以目前还很青涩，再加上本人能力有限，所以佬友们就图个新鲜就好。
它大概是个“设计风格库”：我把一些常见/好看的 UI 风格整理成了套装，比如新野兽派、玻璃态、新拟物这些。每个风格都配了比较完整的规范（配色、字体、间距、组件状态之类的）和对应的代码示例。
比较好玩的一点是：它是按“给 AI 用”的思路做的。你可以直接套我们准备的提示模板，让 Claude、v0 这类工具按某个指定风格生成页面/组件，不至于一会儿玻璃态一会儿极简，风格飘来飘去。
能做什么？
- 随便逛逛各种设计风格，找灵感
- 导出设计令牌（CSS 变量、Tailwind 预设等）
- 用提示生成器拼出更靠谱的提示词
- 顺手放了点可爱的卡通素材
也想拉大家一起完善一下（项目还很早期）：
（1）提交新风格：你看到什么很酷的风格，来网站里提交一下就行，填个名字就能发，其他都是可选的。
（2）提 PR：代码在 GitHub，MIT 协议，欢迎加风格、改界面、修 bug、补文档都行。
（3）吐槽反馈：用起来哪里别扭、哪里不合理，直接评论/提 issue 都可以。
话不多说，一，二，三，上链接！
网址：https://www.stylekit.top/
项目地址：GitHub - AnxForever/stylekit: 精选优质 Web 设计风格，提供文档、组件模板、代码片段， 以及可直接导出的 AI Rules。
f7b7cc24e98b3408bc0702fb66d90b282559×1416 145 KB
64f68581e9d1ea8619a3ee87828c4c4f2555×1423 200 KB
04f653825807521d9af6e6c0dac4666c2559×1414 146 KB
9b0df142b2672c5e0ce5461f7a47eb6d2559×1415 186 KB
--【壹】--：
能力有限，没法一应俱全，主要是本着授人以鱼不如授人以渔。
--【贰】--：
前排，支持佬友，很不错的网站。可以拯救我的一样的前端界面了。
--【叁】--：
已star，感觉不错奥
--【肆】--：
这个挺不错的看着
--【伍】--：
看着很有设计感，不错不错赞！
--【陆】--：
太强了支持！
--【柒】--：
大家有什么建议或者想法可以去GitHub提issue，主要是我最近在搞毕设，没法处理太多的事情。不过我一定会尽可能做好他的。
--【捌】--：
佬太有石粒啦~
--【玖】--：
网站下面的提交按钮我本来是想让别人提供一个风格名称，我后续添加的。不过你这个想法我回去改进的，因为我一开始没觉得会有多少人共同开发这个
--【拾】--：
感谢分享，看着不错
--【拾壹】--：
等我抄完 Pencil 就把你这个rua进去
image2586×1660 126 KB
来个联系方式交流二三？
--【拾贰】--：
效果非常显著，可以看图
image2394×1266 278 KB
不过有一个建议，佬友现在的网站风格还是比较少的。虽然说是可以提交，但是提交的什么格式，怎么提交都很难规范化啊。如果能够做大的话我觉得是一个非常好的项目。
--【拾叁】--：
有主要的风格约束只能保证不会做出很ai的界面，不一定非常美观，但也不会太差。如果想要一比一复刻，那么规则必须用强约束，但是这样会使得界面千篇一律，反而扼杀了创造。我本来的想法是让AI可以带着镣铐跳舞，在既定的风格下创作出更加多样美观的界面。
--【拾肆】--：
这个必须支持，现在ai的前端默认都是一堆紫色，想要好一点的要不就是什么赛博朋克，没法看
--【拾伍】--：
这个真的很不错啊！点个赞！
--【拾陆】--：
好的！收到
--【拾柒】--：
我自己做了个的提取风格的skill，不过我的规则详细程度是完全的长约束了，可能会扼杀创造性。
个人skill分享，前端风格提取。 开发调优废话少说，直接上图。分别是使用图片复刻和使用skill复刻后的效果对比。 [image] [image] [image] [image] 原理介绍，传统的图片风格提取往往会有遗漏，归根到底模型训练的时候是直接用css代码训练的，图片在转译的过程中必然有信息损耗。 这个skill旨在通过chrome-devtools-mcp工具直接获取对应网页的dom信息，能够精确到像素级别复刻，生成…
佬友如果有兴趣可以看看我的帖子，可以参考参考我的思路
--【拾捌】--：
感谢佬友！复制下来的rule直接用，能达到效果图中的效果吗？
--【拾玖】--：
佬有没有一键能生成静态网站模板的大致框架和风格都能出来的那种
开发时间较短，所以目前还很青涩，再加上本人能力有限，所以佬友们就图个新鲜就好。
它大概是个“设计风格库”：我把一些常见/好看的 UI 风格整理成了套装，比如新野兽派、玻璃态、新拟物这些。每个风格都配了比较完整的规范（配色、字体、间距、组件状态之类的）和对应的代码示例。
比较好玩的一点是：它是按“给 AI 用”的思路做的。你可以直接套我们准备的提示模板，让 Claude、v0 这类工具按某个指定风格生成页面/组件，不至于一会儿玻璃态一会儿极简，风格飘来飘去。
能做什么？
- 随便逛逛各种设计风格，找灵感
- 导出设计令牌（CSS 变量、Tailwind 预设等）
- 用提示生成器拼出更靠谱的提示词
- 顺手放了点可爱的卡通素材
也想拉大家一起完善一下（项目还很早期）：
（1）提交新风格：你看到什么很酷的风格，来网站里提交一下就行，填个名字就能发，其他都是可选的。
（2）提 PR：代码在 GitHub，MIT 协议，欢迎加风格、改界面、修 bug、补文档都行。
（3）吐槽反馈：用起来哪里别扭、哪里不合理，直接评论/提 issue 都可以。
话不多说，一，二，三，上链接！
网址：https://www.stylekit.top/
项目地址：GitHub - AnxForever/stylekit: 精选优质 Web 设计风格，提供文档、组件模板、代码片段， 以及可直接导出的 AI Rules。
f7b7cc24e98b3408bc0702fb66d90b282559×1416 145 KB
64f68581e9d1ea8619a3ee87828c4c4f2555×1423 200 KB
04f653825807521d9af6e6c0dac4666c2559×1414 146 KB
9b0df142b2672c5e0ce5461f7a47eb6d2559×1415 186 KB
--【壹】--：
能力有限，没法一应俱全，主要是本着授人以鱼不如授人以渔。
--【贰】--：
前排，支持佬友，很不错的网站。可以拯救我的一样的前端界面了。
--【叁】--：
已star，感觉不错奥
--【肆】--：
这个挺不错的看着
--【伍】--：
看着很有设计感，不错不错赞！
--【陆】--：
太强了支持！
--【柒】--：
大家有什么建议或者想法可以去GitHub提issue，主要是我最近在搞毕设，没法处理太多的事情。不过我一定会尽可能做好他的。
--【捌】--：
佬太有石粒啦~
--【玖】--：
网站下面的提交按钮我本来是想让别人提供一个风格名称，我后续添加的。不过你这个想法我回去改进的，因为我一开始没觉得会有多少人共同开发这个
--【拾】--：
感谢分享，看着不错
--【拾壹】--：
等我抄完 Pencil 就把你这个rua进去
image2586×1660 126 KB
来个联系方式交流二三？
--【拾贰】--：
效果非常显著，可以看图
image2394×1266 278 KB
不过有一个建议，佬友现在的网站风格还是比较少的。虽然说是可以提交，但是提交的什么格式，怎么提交都很难规范化啊。如果能够做大的话我觉得是一个非常好的项目。
--【拾叁】--：
有主要的风格约束只能保证不会做出很ai的界面，不一定非常美观，但也不会太差。如果想要一比一复刻，那么规则必须用强约束，但是这样会使得界面千篇一律，反而扼杀了创造。我本来的想法是让AI可以带着镣铐跳舞，在既定的风格下创作出更加多样美观的界面。
--【拾肆】--：
这个必须支持，现在ai的前端默认都是一堆紫色，想要好一点的要不就是什么赛博朋克，没法看
--【拾伍】--：
这个真的很不错啊！点个赞！
--【拾陆】--：
好的！收到
--【拾柒】--：
我自己做了个的提取风格的skill，不过我的规则详细程度是完全的长约束了，可能会扼杀创造性。
个人skill分享，前端风格提取。 开发调优废话少说，直接上图。分别是使用图片复刻和使用skill复刻后的效果对比。 [image] [image] [image] [image] 原理介绍，传统的图片风格提取往往会有遗漏，归根到底模型训练的时候是直接用css代码训练的，图片在转译的过程中必然有信息损耗。 这个skill旨在通过chrome-devtools-mcp工具直接获取对应网页的dom信息，能够精确到像素级别复刻，生成…
佬友如果有兴趣可以看看我的帖子，可以参考参考我的思路
--【拾捌】--：
感谢佬友！复制下来的rule直接用，能达到效果图中的效果吗？
--【拾玖】--：
佬有没有一键能生成静态网站模板的大致框架和风格都能出来的那种