重新设计 https://raphael.app 的首页
普通指令“给我做顿饭”， 厨师为了保险、或者为了偷懒、或者受限于它自身的品味，它会给你做一盘西红柿炒鸡蛋，虽然能吃，但很普通。
使用Frontend-design Skill，等同于额外强调了 “你是米其林三星主厨，请务必使用分子料理技术，做一道展现‘深海孤独感’的创意菜，拒绝使用常规调料”并且详细给出了什么是“分子料理技术”、什么是“深海孤独感”、还有哪些注意事项，厨师就会调动他毕生所学，给你做出一道艺术品。
Anthroipic的Frontend-design skill的工作方式正是如此，它特别强调了动效、质感、字体、一致性、情感化连接、大胆美学(Bold Aesthetic)、意图表达(Intentionality)等等，而大模型完全可以理解这个skill给出的要求和菜谱。
我认为，Frontend-design skill是一款教科书级的skill，虽然简短，但是它是完全针对大模型工作原理和底层工作方法来写的，能够稳定发挥化腐朽为神奇、四两拨千斤的效果，充分调用了大模型自身已经蕴含的强大能力。
很简单，一句命令行的事。
如果你用Claude Code，执行这条命令。
我知道我有很多读者朋友使用国产模型GLM-4.7、M2.1来驱动Claude Code，嗯，也是可以的，只要是Claude Code，都可以。
npx skills-installer install @anthropics/claude-code/frontend-design --client claude-code
如果你用Codex，执行这条命令。它同时对Codex CLI和Codex IDE Extension生效。在上面的演示中，其实我用的是Codex IDE Extension。
npx skills-installer install @anthropics/claude-code/frontend-design --client codex
如果你使用的是Cursor
npx skills-installer install @anthropics/claude-code/frontend-design --local --client cursor
安装完成后，在我们Vibe Coding需要用到前端设计能力的时候，只需要稍微强调一句“使用frontend-design skill来完成前端设计工作”，就能够召唤它了。
对了，额外嘱咐几句：
如果是新项目、不加任何约束，这个Skill会不安装任何依赖，快速完成html；
如果是老项目或者显式强调依赖，它会按照你要求的技术栈来完成工作。
你还可以做一些修改：在原版frontend-design skill的基础上，把你自己的品味（主色/字体/圆角/阴影/按钮风格）等等写进去，成为一个 新的skill，让模型每次都按你的品牌调性出图，表现更好。
