vibecoding 前端求大佬指导

用skill吧，这样做出来的网页好看些。随便google下就能找到很多相关的skill使用，挺方便的

引用站内大佬的原帖： Skill / MCP 推荐

整理了下热门前端skills

感谢佬，太有帮助了，非常感谢大佬

装前端skills，然后让Claude Design做第一版设计，初稿定好后，再用Codex慢慢打磨。

前端要求的不只是页面，更重要的是UX/UI，这方面任何一个AI都做不到完美。

除了打磨，我也想不到什么好方法了。

我自己的页面都打磨了近半个月才达到理想的效果 ^-^

(我还是太菜了

skill 可以用 ui-ux-pro-max-skill，但我实际用下来没有那么好用

我分享下我使用的较多的方式，用google stitch 先创作出来一个满意的模板，在通过stitch 的mcp 还原，基本上能还原80-90%

大佬打磨怎么打磨的呢？ 有使用什么skill或者提示词吗？

哦对了，如果用模块，记得初次开发时，让AI提取global.css，和 UI规范md，后续在AGENTS.MD/CLAUDE.MD 中强调说明，后续二次开发时能保证样式的一致性，后期如果想更换主题也更加方便

没有特别的skills和提示词，我是按照自己的想法，一点点跟ai聊出来的，当然也需要加上figma mcp，从figma中再打磨一遍，然后再给到AI，周而复始。

我个人感觉某些skills会限制AI的发挥。

待确定第一个页面的UX和UI后，会让AI形成agent.md文档和skills，这就对于初始页面的打磨要求很高，然后再让ai设计其他页面的时候遵守以上两个文档或者加入mcp做辅助开发。

特别有意思啊这个，后边我也用用试试

不要让他自己绘制组件，用现成的组件库

前端就是这些组件排列组合就行，你只需要看有没有结构上的问题。

没必要用各种skill，遵守情况不会太好。

直接上claude design

是不是直接跟codex或者其他ai直接说前端使用现成的组件库进行开发，这样也行？

其实我觉得skill做不出我想要的效果，我截取了shadcn对应的前端展示，然后用文字提示词让gpt image2生成一张我想要风格的图，不一定是前端。然后把shadcn图和风格图，外加风格提示词再让gpt image生成对应的组件参考图。后面就不停重复这个操作。把图给AI让他整体复刻。然后人工校验，不对的地方让它截取每一个组件小图，反推提示词，人工review一遍提示词让AI修正细节。慢慢修。

其实用fable能解决大多数问题。虽然和参考图不一样，但风格是对的也好看。就是太贵了。

ai出设计图 导入figma微调 通过figma mcp直接完整实现设计图 大差不差吧 小部分微调就好

我就是这样做的：

https://kumo-ui.com/ 

https://kumo-ui.com/registry/ 

https://github.com/cloudflare/kumo 

npx @cloudflare/kumo ls

这是kumo组件库官方文档与代码库及相关资源，你需要详细阅读注册文档、官方定义以及组件目录。充分了解其使用方法，规范边界。

在接下来的过程中，你只能使用此组件库进行前端编排，严禁自绘组件，将此规范到项目的记忆库中。

如有缺失组件，及时报告

效果如下

我记得有个开源的open design，可以试试看