免费POC, 零成本试错
FDE知识库

FDE知识库

学习大模型的前沿技术与行业落地应用


收藏

一键拯救大模型的前端审美能力

发布日期:2026-01-20 18:02:56 浏览次数: 2731
作者:刘小排r

微信搜一搜,关注“刘小排r”

推荐语

一键拯救大模型的前端审美能力!通过安装Anthropic官方提供的frontend-design skill,让主流编程大模型瞬间获得专业设计水准。

核心内容:
1. 当前仅有少数大模型具备原生审美能力的问题分析
2. frontend-design skill的工作原理与效果对比展示
3. 简单命令行实现主流模型审美能力升级的实操指南

杨芳贤
53AI创始人/腾讯云(TVP)最具价值专家

目前,如果我们啥不做,在不额外给风格规范/设计系统/示例参考的情况下,说得上有审美能力的编程模型只有Gemini 3 Pro、Gemini 3 Flash、Claude Opus 4.5、Claude Sonnet 4.5四款。
当我们看到GPT-5.2-Codex等明明其他方便都挺厉害、但是唯独前端审美不行的模型的时候,尝尝感叹“哀其不幸、怒其不争”。
如果我们想要包括GPT-5.2-Codex、GLM-4.7、M2.1在内的其他主流模型也拥有审美能力,怎么办?是否有快速提升他们前端审美能力的方法呢?
有。
答案是:skill
近期发布的主流编程大模型全都已经原生支持skill协议,我们为其安装Anthropic官方提供的frontend-design skill,即可立即提升所有主流模型的前端审美能力
不信?我们先看看效果对比。
效果对比
对于
    重新设计 https://raphael.app 的首页
    这条简单的指令。
    如果我们直接下达任务给GPT-5.2-Codex,效果如下。
    不是我黑它,下图右边那个奇怪的圆圈,它就长那样,根本不工作。你看到的,已经是完整截图了。看上去好像是有动效的样子,其实没有。
    如果我们使用skill,效果如下:
    我们可以看到,使用front-design skill后,无论是字体、一致性、动画效果、质感、排版,都有质的飞跃。
    嘿嘿,神奇吗?

    什么原理?
    其实并不神奇。
    你可以这么理解:大模型就像一个拥有全世界菜谱的顶级厨师。

    普通指令“给我做顿饭”, 厨师为了保险、或者为了偷懒、或者受限于它自身的品味,它会给你做一盘西红柿炒鸡蛋,虽然能吃,但很普通。

    使用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,让模型每次都按你的品牌调性出图,表现更好

          53AI,企业落地大模型首选服务商

          产品:场景落地咨询+大模型应用平台+行业解决方案

          承诺:免费POC验证,效果达标后再合作。零风险落地应用大模型,已交付160+中大型企业

          联系我们

          售前咨询
          186 6662 7370
          预约演示
          185 8882 0121

          微信扫码

          添加专属顾问

          回到顶部

          加载中...

          扫码咨询

          扫码登录
          登录即表示您同意《53AI网站服务协议》
          服务协议

          欢迎您使用【53AI 官方网站】(以下简称“本网站”或“我们”)。本《会员服务协议》(以下简称“本协议”)是您(以下简称“会员”或“用户”)与【深圳市博思协创网络科技有限公司】之间关于注册、登录及使用本网站会员服务所订立的法律协议。

          在您注册或登录前,请务必审慎阅读、充分理解各条款内容,特别是免除或限制责任的条款、知识产权条款、争议解决条款等。此类条款将以加粗形式提示您注意。 当您通过微信公众号授权、手机验证码验证或其他方式成功登录本网站时,即视为您已完全理解并同意接受本协议的全部内容。

          一、 定义

          本网站:指由【深圳市博思协创网络科技有限公司】运营的,域名为【53ai.com】的网站及相关移动端页面。

          会员服务:指本网站向注册会员提供的知识库文章查阅、内容检索及其他相关增值服务。

          知识库内容:指本网站发布的包括但不限于文字、图表、数据、研究报告、行业分析等数字化内容资源。

          二、 账号注册与登录

          登录方式:本网站支持以下登录方式,您可根据实际情况选择:

          微信公众号授权登录:您同意将您的微信OpenID信息授权给本网站,用于创建或关联会员账号。

          手机验证码登录:您需提供真实有效的手机号码,并通过短信验证码完成身份验证与登录/注册。

          账号安全:您的账号仅限您本人使用,禁止赠与、借用、租用、转让或售卖。因您保管不善导致的账号被盗、密码泄露等损失,由您自行承担。

          实名认证:根据相关法律法规要求,我们可能要求您在特定功能下完成实名认证。如您拒绝提供,可能无法使用部分或全部服务。

          未成年人保护:若您未满18周岁,请在法定监护人的陪同下阅读本协议,并在征得监护人同意后使用本服务。

          三、 服务内容与规范

          知识库查阅权限:会员登录后,有权按照其会员等级对应的权限范围,在线浏览、检索本网站知识库中的相关文章及内容。

          服务变更:我们有权根据业务发展需要,调整、变更或终止部分服务内容,并将以网站公告、公众号消息等方式提前通知。

          禁止行为:您在使用服务时不得实施以下行为:

          利用技术手段批量爬取、下载、转存知识库内容;

          将知识库内容用于商业目的或未经授权地向第三方传播;

          干扰本网站正常运行或侵犯其他用户合法权益;

          发布违法违规信息或从事违反公序良俗的活动。

          四、 知识产权声明

          权利归属:本网站知识库中的排版设计、软件代码等内容的知识产权均归【公司全称】或原权利人所有,受《中华人民共和国著作权法》等法律保护。

          有限许可:本网站授予会员一项非独占、不可转让、不可转授权的普通许可,仅限于个人学习、研究之目的在线查阅知识库内容。

          侵权追责:未经书面许可,任何单位或个人不得以任何形式复制、转载、摘编、镜像、汇编或以其他方式使用上述内容。一经发现,我们保留追究其法律责任的权利。

          五、 个人信息保护

          我们重视对您个人信息的保护。关于我们如何收集、使用、存储和保护您的个人信息,请单独阅读 《隐私政策》。

          您通过微信公众号授权或手机号验证所提供的信息,我们将严格按照《个人信息保护法》的规定处理,仅用于身份识别、服务提供及安全验证等必要用途。

          您可以随时通过网站设置或联系客服行使查阅、更正、删除个人信息及撤回授权同意的权利。

          六、 免责声明

          内容准确性:知识库内容仅供参考,不构成专业建议。我们不对其完整性、准确性、时效性作任何明示或暗示的保证,您应自行判断并承担使用风险。

          不可抗力:因自然灾害、政策法规变化、网络故障、第三方平台接口异常(如微信接口维护、运营商短信通道故障)等不可抗力导致的服务中断或延迟,我们不承担违约责任。

          第三方链接:本网站可能包含指向第三方网站的链接,该等网站的内容和服务不受我们控制,请您自行甄别风险。

          七、 违约责任

          如您违反本协议约定,我们有权视情节采取警告、限制功能、暂停服务、注销账号等措施,并保留要求赔偿损失的权利。

          如因您的违约行为导致我们遭受行政处罚、第三方索赔或商誉损失,您应承担全部赔偿责任(包括但不限于罚款、赔偿金、律师费、公证费等)。

          八、 法律适用与争议解决

          本协议的订立、执行和解释均适用中华人民共和国大陆地区法律。

          因本协议产生的或与本协议有关的任何争议,双方应友好协商解决;协商不成的,任何一方均可向【公司所在地】有管辖权的人民法院提起诉讼。

          九、 其他

          本协议构成双方就本服务达成的完整协议,取代此前任何口头或书面约定。

          本协议任一条款被认定为无效或不可执行的,不影响其他条款的效力。

          我们对本协议享有最终解释权,并在法律允许的范围内保留随时修改的权利。修改后的协议一经公布即生效,继续使用服务即视为同意修订内容。


          已查阅