让 AI 生成的前端页面看起来像花了 50 万：frontend-design-pro

你有没有这种感觉——让 AI 生成一个网页，它出来的永远是卡片居中、蓝紫渐变、Inter 字体，看起来像是用模板套的？

问题不在 AI，而在于没人告诉它要往哪个方向走。

frontend-design-pro 这个 Skill 就是来解决这个问题的。它给 AI 设定了一个「设计总监」的角色，会主动从 11 种大胆的美学方向里选一个，然后严格执行下去。

它能做什么？

简单说，它让 AI 生成的前端界面看起来像是花了大价钱做的。

内置了 11 种美学方向：极简瑞士风、新拟态（Neumorphism）、玻璃拟态（Glassmorphism）、粗野主义（Brutalism）、黏土风（Claymorphism）、极光/网格渐变、复古未来主义、3D 超写实、活力块状/极繁主义、OLED 深色奢华、有机生物形态——每种都有对应的配色方案、字体推荐和标志性效果说明。

几个硬规则：

永远不用 Inter、Roboto、Arial 这种默认字体，必须用 Reckless、Satoshi、Clash Display 这类有个性的。必须有一个让人过目不忘的签名细节，比如颗粒感、自定义光标、对角分割或者动态网格。而且坚决打破「居中卡片网格」——要不对称、要重叠、要斜线流动。

图片系统也很实用：

真实摄影直接调 Unsplash/Pexels 的直链，而不是生成假图。需要 AI 生成的图，它会输出完整的 Midjourney/Flux 提示词，格式都给你包好了。

适合谁用？

如果你需要快速出高保真原型，或者想让 AI 生成的页面不只是「能看」而是「好看」，这个 Skill 值得试试。配合 Claude Code 或 Codex 使用，直接生成可复制的生产级代码。

GitHub 在这里：https://github.com/claudekit/frontend-design-pro-demo/tree/main/skills/frontend-design-pro

GitHub: https://github.com/claudekit/frontend-design-pro-demo/tree/main/skills/frontend-design-pro