Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

终于有一套 Skill 能让 AI 的前端审美有灵魂了！爆款开源项目 Taste-Skill （ GitHub 33.3k🌟），直接给 Cursor、Claude、Codex 等 AI 工具装上了【审美大脑】！下面视频我做了很多页面，这些极简、轻奢风的页面，全靠这套skill做的～质感拉满了以前 AI 生成的页面总带着一股塑料感：布局僵硬、字体廉价、留白像 PPT、颜色土到炸…… 现在，AI 终于能写出大厂高级感了：审美基因注入：内置极简、高端轻奢、粗野主义、Minimalist 等多种高级调性，直接拉高 AI 的设计天花板 UI 视觉整容：自带审计+重构能力，老旧丑页面一键诊断升级参数化控场：创意度、动效强度、信息密度随便调，再也不用死板一套模板最佳搭配：先用 Taste-Skill 注入灵魂定调，再丢给 Claude/Cursor/codex 落地代码，质感直接起飞！感兴趣的朋友们，可以去看看哦～地址：

爱丽丝呀！

22,793 subscribers

213,842 views • 4 months ago •via X (Twitter)

Education Science & Technology

Anya Rossi• Live Now

Private livecam show

46 Comments

爱丽丝呀！4 months ago

一句话安装： npx skills add 安装后：项目里会多一个 SKILL.md 文件， Cursor / Claude Code / Codex 等工具会自动读取它。

黑色马里奥4 months ago

我这就给我的 Codex 装上

爱丽丝呀！4 months ago

这就是效率，不错不错

joker4 months ago

哇好棒！🥹 终于不用看塑料UI了

DJ4 months ago

这Skill 不错收下了

爱丽丝呀！4 months ago

可以的给你的codex claude装上吧～

Alberto Merino Rivero3 months ago

Créditos to the owner of the repo!! @lexnlin

禹攸 | Gate Card刷遍全球4 months ago

可以啊这个是真的实用

爱丽丝呀！4 months ago

嗯嗯好的项目要配上好的ui前端，看起来会更好

猪猪熊🐻4 months ago

AI做的页面终于不像塑料了，质感好多了呀

Jealousy 尼卡4 months ago

太帅了啊，这个实用

爱丽丝呀！4 months ago

确实酷啊，帅啊，尼卡老师搞起来

日上三竿3 months ago

AI 可以是水泥工，只负责搭框架，自己完善，也有人把AI当建筑师和设计师，一步到位啊。

尼古拉斯定投4 months ago

审美这个痛点终于被解决了！以前AI做界面像套模板，现在看着像真有设计师在调参数了。

AI Mastery Guide4 months ago

The plasticky AI design era is finally over, this is what we needed

爱丽丝呀！4 months ago

yes bro

AI Mastery Guide4 months ago

🫡

Miya | Gate Card刷遍全球4 months ago

太实用了老师

きたかん｜AI動画×Claude Codeで仕組み化する人3 months ago

Taste-Skill 気になりますね。うちでも Claude に UI 生成させるとき、指示文で「余白を大切に、フォントは San Francisco」みたいに審美的な制約を明示的に入れてるんですが、Skill として固められると再現性が段違いですね。特に「参数化で創意度・動効強度を調整できる」のが、クライアント案件で調整出し何回かやるときに活躍しそう。

爱丽丝呀！3 months ago

是的，这个skill真的不错的，我最近一直用它生成页面

きたかん｜AI動画×Claude Codeで仕組み化する人3 months ago

毎回使い続けてるって、それが一番の証明ですよね。自分もClaudeへの指示を都度書くより、Skillに落とし込んで"呼び出すだけ"にしたら、クライアント案件の修正ラウンドが体感で半分くらいに減りました。一度型になると、次からは調整だけで済むのが強い。

Leaf Yeah!3 months ago

哇塞，原来taste skill还能做出这么好的案例！视频里的案例都是你自己做的嘛？

爱丽丝呀！3 months ago

是的哈下面视频至少写了五六个案例啦

DanyW3b3 months ago

Da provare, sembra davvero interessante

pandaWL4 months ago

哈哈，收到！爱丽丝老师最近那股“粉丝火箭式起飞”的势头，确实让人眼前一亮。

爱丽丝呀！4 months ago

哈哈谢谢熊猫老师

猪脚饭.Ai4 months ago

这个正好是我需要的

爱丽丝呀！4 months ago

猪脚饭老师可以试试，这个做出来的前端页面真的不错哦

Jeffrey3 months ago

mark

YuChen 大王4 months ago

学会了，速删

爱丽丝呀！4 months ago

哈哈哈大家一起用 🤣

Louis.霍霍4 months ago

爱丽丝老师最近粉丝涨的好快啊向你学习

爱丽丝呀！4 months ago

我去你才是真猛，马上2了带带吧

Andy | Gate打金狗0Gas费4 months ago

这样看着舒服多了

yu zhi4 months ago

试试一会儿

Ray｜AI Coding 出海日记2 months ago

现在的 AI 编程工具（Cursor, Claude, Copilot）确实越来越离谱了，加上这个 Taste-Skill 直接把前端审美也补齐了。不过各种多终端切换、配 API key 额度确实挺折腾。正好看到有大佬搞了个 #codeproxy 联合订阅，支持多 IDE/客户端通用，全是官方纯血资源还不用多账号分组，用来玩各种 AI skills 极度省心，推荐折腾党看看：

HB｜AI出海笔记4 months ago

对网页前端设计就很好用

legeling3 months ago

这个skill写的太不规范了，都是只有一个skill.md 文件，对上下文的压力比较大

huanyu lu2 months ago

说实话，AI写前端最大的问题从来不是功能，是审美。Taste-Skill这种"先定调再写码"的思路才是对的——就像装修先出效果图再施工，而不是让工人一边砌墙一边设计。

Eric4 months ago

真棒

libidogirl4 months ago

以前好像也没那么差

风间3 months ago

这个挺实用。AI 前端最大问题不是生成不了，而是审美和风格不稳定。Skill 如果能把排版、风格、避坑规则固定下来，确实会比单纯写 prompt 稳很多。

Crio Songo3 months ago

这个项目想法挺戳痛点的，之前AI写前端出来的效果确实都很塑料，怎么调都不对味。这个审美注入加UI重构的思路不错，我去GitHubclone下来试试效果怎么样。

卖飞哥 🐊（互 F 🤝 学习）3 months ago

开源项目冲 star 容易，实际落地又是另一回事。设计“质感”这东西玄学得很，大厂高级感背后是设计师反复推敲和整套品牌体系，单靠注入调性的 skill 能解决多少。更别说 AI 每次生成结果都不一样，页面之间风格统一性根本没法保证。

DeFi狙击手 | Ai🕊️4 months ago

官方出手就是不一样！动画审美直接拉满，Cursor要起飞了！

安叫兽|Bird🕊️ 🔶 BNB4 months ago

AI 页面终于不那么默认模板味了

Related Videos

终于有一个 skill 能拯救 AI 的动画审美了！ GSAP 官方开源了 gsap-skills，专门为 Cursor、Claude、Copilot 等 AI 工具提供了专业的动画能力拓展和审美设计能力，前端 AI 动画的短板终于被彻底补齐～以前 AI 写动画经常像 PPT：僵硬、呆板、没质感现在 AI 能写出专业的动效了：丝滑 Timeline、ScrollTrigger 滚动叙事、Flip 流畅切换、SplitText 文字动画、SVG 形变等等，质感提升明显。需要提高你的ai审美的朋友们可以试试～地址：

终于有一个 skill 能拯救 AI 的动画审美了！ GSAP 官方开源了 gsap-skills，专门为 Cursor、Claude、Copilot 等 AI 工具提供了专业的动画能力拓展和审美设计能力，前端 AI 动画的短板终于被彻底补齐～以前 AI 写动画经常像 PPT：僵硬、呆板、没质感现在 AI 能写出专业的动效了：丝滑 Timeline、ScrollTrigger 滚动叙事、Flip 流畅切换、SplitText 文字动画、SVG 形变等等，质感提升明显。需要提高你的ai审美的朋友们可以试试～地址：

爱丽丝呀！

276,553 views • 4 months ago

这下前端有福了！最近 GitHub 上两个前端设计项目爆火，专门用来给 AI 提升审美。 1、 taste-skill 相当于给 AI 装了一套视觉自查系统。交付前会先按空间节奏、字体层级等原则自我审查一遍，能纠正瞎乱配色、教它用留白制造呼吸感，具备设计师质感。 2、impeccable 内置 23 个核心命令 + 一整套 AI 设计避坑指南，解决 AI 最爱犯的布局逻辑问题，复杂动效也能做到克制丝滑，直接拉到大厂响应式设计水准。一个管品位，一个管框架。两个一起喂给你的 AI，设计审美直接起飞。

这下前端有福了！最近 GitHub 上两个前端设计项目爆火，专门用来给 AI 提升审美。 1、 taste-skill 相当于给 AI 装了一套视觉自查系统。交付前会先按空间节奏、字体层级等原则自我审查一遍，能纠正瞎乱配色、教它用留白制造呼吸感，具备设计师质感。 2、impeccable 内置 23 个核心命令 + 一整套 AI 设计避坑指南，解决 AI 最爱犯的布局逻辑问题，复杂动效也能做到克制丝滑，直接拉到大厂响应式设计水准。一个管品位，一个管框架。两个一起喂给你的 AI，设计审美直接起飞。

阿西_出海

74,579 views • 3 months ago

给 Codex 5.6 装上这 4 个前端设计神器，做出来的网页终于有灵魂了！分享一套我目前实测下来最棒的 Codex 前端审美组合： 1️⃣Figma（内置插件）直接读取设计稿、品牌规范和组件，把视觉参考像素级还原成响应式代码，不再让 Codex 凭空猜设计。 2️⃣Product Design（内置插件）先确定产品结构和设计方向，再生成不同风格的高保真参考图，确认审美后才开始写代码，彻底告别盲写前端。 3️⃣Taste-Skill 专门负责字体、配色、留白、圆角和组件比例，还能审计并重构已有页面，消灭廉价的 AI 塑料感。 🔗地址： 4️⃣GSAP Skills 补齐 Codex 的动效设计能力，Timeline、ScrollTrigger、Flip、SplitText、SVG 动画全部支持 🔗地址：再结合 GPT‑5.6 本身更强的布局、视觉层级和设计判断，基本打通了一套完整的前端工作流～

给 Codex 5.6 装上这 4 个前端设计神器，做出来的网页终于有灵魂了！分享一套我目前实测下来最棒的 Codex 前端审美组合： 1️⃣Figma（内置插件）直接读取设计稿、品牌规范和组件，把视觉参考像素级还原成响应式代码，不再让 Codex 凭空猜设计。 2️⃣Product Design（内置插件）先确定产品结构和设计方向，再生成不同风格的高保真参考图，确认审美后才开始写代码，彻底告别盲写前端。 3️⃣Taste-Skill 专门负责字体、配色、留白、圆角和组件比例，还能审计并重构已有页面，消灭廉价的 AI 塑料感。 🔗地址： 4️⃣GSAP Skills 补齐 Codex 的动效设计能力，Timeline、ScrollTrigger、Flip、SplitText、SVG 动画全部支持 🔗地址：再结合 GPT‑5.6 本身更强的布局、视觉层级和设计判断，基本打通了一套完整的前端工作流～

Miki

16,284 views • 1 month ago

给 Codex 5.6 装上这 4 个前端设计神器，做出来的网页终于有灵魂了！分享一套我目前实测下来最棒的 Codex 前端审美组合： 1️⃣Figma（内置插件）直接读取设计稿、品牌规范和组件，把视觉参考像素级还原成响应式代码，不再让 Codex 凭空猜设计。 2️⃣Product Design（内置插件）先确定产品结构和设计方向，再生成不同风格的高保真参考图，确认审美后才开始写代码，彻底告别盲写前端。 3️⃣Taste-Skill 专门负责字体、配色、留白、圆角和组件比例，还能审计并重构已有页面，消灭廉价的 AI 塑料感。 🔗地址： 4️⃣GSAP Skills 补齐 Codex 的动效设计能力，Timeline、ScrollTrigger、Flip、SplitText、SVG 动画全部支持 🔗地址：再结合 GPT‑5.6 本身更强的布局、视觉层级和设计判断，基本打通了一套完整的前端工作流～

给 Codex 5.6 装上这 4 个前端设计神器，做出来的网页终于有灵魂了！分享一套我目前实测下来最棒的 Codex 前端审美组合： 1️⃣Figma（内置插件）直接读取设计稿、品牌规范和组件，把视觉参考像素级还原成响应式代码，不再让 Codex 凭空猜设计。 2️⃣Product Design（内置插件）先确定产品结构和设计方向，再生成不同风格的高保真参考图，确认审美后才开始写代码，彻底告别盲写前端。 3️⃣Taste-Skill 专门负责字体、配色、留白、圆角和组件比例，还能审计并重构已有页面，消灭廉价的 AI 塑料感。 🔗地址： 4️⃣GSAP Skills 补齐 Codex 的动效设计能力，Timeline、ScrollTrigger、Flip、SplitText、SVG 动画全部支持 🔗地址：再结合 GPT‑5.6 本身更强的布局、视觉层级和设计判断，基本打通了一套完整的前端工作流～

爱丽丝呀！

123,876 views • 2 months ago

AI前端救星来了！告别土味界面🔥 AI现在代码写得飞快，但界面老是千篇一律、又丑又普通？这个项目直接解决痛点：Taste-Skill — 给AI注入高级审美的反slop前端框架。它是一套可移植的Agent Skills，专治AI生成的平庸布局、丑陋排版、僵硬动效。 - 强力反slop：强制高阶排版、间距、层级、GSAP动效，杜绝模板感 - 三档可调旋钮（VARIANCE/MOTION/DENSITY）：1-10轻松控制实验性、动效强度、视觉密度 - 多场景技能包：通用v2、GPT专版、极简/高级/brutalist风格、重构现有项目、image-to-code全流程 - 图像生成技能：直接出高端web/mobile/brandkit参考图，喂给Cursor/Claude/Codex就能完美还原 - 框架无关，支持React/Vue/Svelte，复制SKILL.md就能用目前57k+ stars，实打实让AI前端从能用进化到好看。想让你的AI产品瞬间高级感拉满，赶紧去试！

AI前端救星来了！告别土味界面🔥 AI现在代码写得飞快，但界面老是千篇一律、又丑又普通？这个项目直接解决痛点：Taste-Skill — 给AI注入高级审美的反slop前端框架。它是一套可移植的Agent Skills，专治AI生成的平庸布局、丑陋排版、僵硬动效。 - 强力反slop：强制高阶排版、间距、层级、GSAP动效，杜绝模板感 - 三档可调旋钮（VARIANCE/MOTION/DENSITY）：1-10轻松控制实验性、动效强度、视觉密度 - 多场景技能包：通用v2、GPT专版、极简/高级/brutalist风格、重构现有项目、image-to-code全流程 - 图像生成技能：直接出高端web/mobile/brandkit参考图，喂给Cursor/Claude/Codex就能完美还原 - 框架无关，支持React/Vue/Svelte，复制SKILL.md就能用目前57k+ stars，实打实让AI前端从能用进化到好看。想让你的AI产品瞬间高级感拉满，赶紧去试！

开发者Hailey

19,296 views • 3 months ago

MotionSites，把顶级网页美学做成了 Prompt。里面收录了 500+ 高质量网页设计 Prompt，涵盖 Landing Page、SaaS、3D、作品集、动效等。看到喜欢的效果，直接复制 Prompt 丢给 Claude、Cursor、Codex，就能开始做。还支持 MCP，把整套设计灵感直接接进 AI 编程工具。做 Vibe Coding，代码已经不是问题，现在连审美都有人帮你打包好了。

MotionSites，把顶级网页美学做成了 Prompt。里面收录了 500+ 高质量网页设计 Prompt，涵盖 Landing Page、SaaS、3D、作品集、动效等。看到喜欢的效果，直接复制 Prompt 丢给 Claude、Cursor、Codex，就能开始做。还支持 MCP，把整套设计灵感直接接进 AI 编程工具。做 Vibe Coding，代码已经不是问题，现在连审美都有人帮你打包好了。

开发者Hailey

29,048 views • 1 month ago

我爽了，我的UI终于脱离AI味了。 AI 写代码已经够快了，但写出来的页面……怎么说呢，总透着一股 AI 味。紫色渐变、Inter 字体、三列等大卡片，看多了你一眼就能认出来，这是 AI 写的。 AI时代，开始比拼UI的品味能力了，非常稀缺。今天推荐taste-skill 这个项目，已经14k stars了，干的事有点意思：它不写代码，它把排版、配色、字体、动效的设计规则全写成 SKILL.md，塞给 AI。相当于给 AI 配了个免费的艺术总监。仓库表面是十几套 SKILL.md 文件，实际在做一件事：把审美变成规则。外面还在卷 AI 写代码多快，它在卷 AI 写的页面能不能不像 AI。 DESIGN_VARIANCE、MOTION_INTENSITY、VISUAL_DENSITY，数值一调整个页面气质就换了，跟调相机参数似的，同一个场景，不同参数出来完全不同。它有三层做法： >读意图，自己推断你要什么风格。极简、奢侈、粗野，十几套自动匹配 >选底座，该 Tailwind 就 Tailwind，该 Material 就 Material，不自己瞎造 >禁 AI 默认审美，紫色渐变、居中 Hero、三列等大卡片，全禁我拿自己的AIGC产品跑了一遍。原来的页面代码不动，就加了一行 SKILL.md 进去，让 AI 按它的规则重新迭代，出来的页面焕然一新。不是重写，是同一个代码底子被审美规则过了一遍。实操很简单，就两步：装 skill：npx skills add --skill design-taste-frontend 然后把你现有的页面丢给 AI，加一句：按 taste-skill 规则迭代 UI。它自动读你的代码，出诊断，改字体、配色、间距、动效，不动你的功能逻辑。搞独立开发的、做 landing page 的，这个skill太重要了！

我爽了，我的UI终于脱离AI味了。 AI 写代码已经够快了，但写出来的页面……怎么说呢，总透着一股 AI 味。紫色渐变、Inter 字体、三列等大卡片，看多了你一眼就能认出来，这是 AI 写的。 AI时代，开始比拼UI的品味能力了，非常稀缺。今天推荐taste-skill 这个项目，已经14k stars了，干的事有点意思：它不写代码，它把排版、配色、字体、动效的设计规则全写成 SKILL.md，塞给 AI。相当于给 AI 配了个免费的艺术总监。仓库表面是十几套 SKILL.md 文件，实际在做一件事：把审美变成规则。外面还在卷 AI 写代码多快，它在卷 AI 写的页面能不能不像 AI。 DESIGN_VARIANCE、MOTION_INTENSITY、VISUAL_DENSITY，数值一调整个页面气质就换了，跟调相机参数似的，同一个场景，不同参数出来完全不同。它有三层做法： >读意图，自己推断你要什么风格。极简、奢侈、粗野，十几套自动匹配 >选底座，该 Tailwind 就 Tailwind，该 Material 就 Material，不自己瞎造 >禁 AI 默认审美，紫色渐变、居中 Hero、三列等大卡片，全禁我拿自己的AIGC产品跑了一遍。原来的页面代码不动，就加了一行 SKILL.md 进去，让 AI 按它的规则重新迭代，出来的页面焕然一新。不是重写，是同一个代码底子被审美规则过了一遍。实操很简单，就两步：装 skill：npx skills add --skill design-taste-frontend 然后把你现有的页面丢给 AI，加一句：按 taste-skill 规则迭代 UI。它自动读你的代码，出诊断，改字体、配色、间距、动效，不动你的功能逻辑。搞独立开发的、做 landing page 的，这个skill太重要了！

产品经理老王霸

26,790 views • 3 months ago

AI做PPT又卷出新高度了。 GitHub上这个Dashi PPT Skill，把AI Agent变成真正能用的PPT助手。丢份文档进去，自动拆结构生成完整PPT，浏览器里直接改：点文字、换图、滑杆调布局配色都行。12套主题、1020版式、8576可调控件，最后一键导出真·可编辑PPTX。支持Claude Code、Codex等，本地跑，内容不上传。职场汇报可以直接用，高级感满满～

AI做PPT又卷出新高度了。 GitHub上这个Dashi PPT Skill，把AI Agent变成真正能用的PPT助手。丢份文档进去，自动拆结构生成完整PPT，浏览器里直接改：点文字、换图、滑杆调布局配色都行。12套主题、1020版式、8576可调控件，最后一键导出真·可编辑PPTX。支持Claude Code、Codex等，本地跑，内容不上传。职场汇报可以直接用，高级感满满～

开发者Hailey

11,616 views • 1 month ago

我靠，写前端终于不必被 AI 味带着跑了。 Taste Skill 是一套 agent skill，给 Claude Code / Codex / Cursor 这类 AI Coding Agent 加一层设计规则约束，解决 AI 写 UI 时视觉质量不稳定的问题。它主要干几件事： 1、反模板化限制 AI 默认生成紫色渐变、居中 Hero、三张 feature card、玻璃拟态这类同质化 UI，用 anti-slop 规则把输出拉回真实设计逻辑。 2、视觉方向可控通过 3 个 dial 控制设计倾向： DESIGN_VARIANCE：布局方差 MOTION_INTENSITY：动效强度 VISUAL_DENSITY：信息密度 AI 会根据需求推断数值，也可以手动调整。 3、写代码前先读需求内置 Brief Inference 机制。AI 会先输出 Design Read，确认设计方向，再开始生成代码。方向不明确时，只问一个关键问题。 4、多工具共享配置一条命令安装，Claude Code / Codex / Cursor 可以共用同一套设计规则，不用重复维护。它本质上不是让 AI 更会写 CSS，而是把设计判断前置成一套可执行规则。不只是代码生成能力，还有审美、上下文约束和工程化稳定性。

我靠，写前端终于不必被 AI 味带着跑了。 Taste Skill 是一套 agent skill，给 Claude Code / Codex / Cursor 这类 AI Coding Agent 加一层设计规则约束，解决 AI 写 UI 时视觉质量不稳定的问题。它主要干几件事： 1、反模板化限制 AI 默认生成紫色渐变、居中 Hero、三张 feature card、玻璃拟态这类同质化 UI，用 anti-slop 规则把输出拉回真实设计逻辑。 2、视觉方向可控通过 3 个 dial 控制设计倾向： DESIGN_VARIANCE：布局方差 MOTION_INTENSITY：动效强度 VISUAL_DENSITY：信息密度 AI 会根据需求推断数值，也可以手动调整。 3、写代码前先读需求内置 Brief Inference 机制。AI 会先输出 Design Read，确认设计方向，再开始生成代码。方向不明确时，只问一个关键问题。 4、多工具共享配置一条命令安装，Claude Code / Codex / Cursor 可以共用同一套设计规则，不用重复维护。它本质上不是让 AI 更会写 CSS，而是把设计判断前置成一套可执行规则。不只是代码生成能力，还有审美、上下文约束和工程化稳定性。

Vince 聊开发

22,601 views • 2 months ago

卧槽，答案终于揭晓了！那个在open router上持续霸榜的神秘模型，是阿里推出的全新大模型“蚂蚁百灵”！今天我们来深度聊一聊这个模型。用过AI来完成前端开发的朋友肯定懂：要让AI做出想要的UI总是要找参考，再不然就是要依赖设计 skill 的帮助。但这种界面一旦看多了，就会陷入审美疲劳。原因在于不管你是对标UI还是使用skill，结果都是被限定在固有的生成范围内。最近小灰测了新模型 Ling-2.6-1T （由蚂蚁集团 Ant Ling 开发），发现它刚好就能打破这个限制。它生成的页面不仅审美极度在线，而且自带高质量的交互效果，做出来的东西终于不再是干巴巴的呆板网页了。但用它有个必须要避开的坑：Ling 2.6 1T 默认是没有深度思考模式的。它在计算资源分配上极其克制，如果你偷懒丢一句"给我写个好看的界面"，那么它大概率会给你一个准确但极其敷衍的结果。(视频1) 那么怎么取巧使用它？小灰分享一个能逼出它真实设计水平的实操工作流：把它当成主规划师，先拆解风格，再写代码。跟它对话时，你可以直接下这种指令： 1. 强制思考：先别急着写代码！帮我分析这个产品的定位，明确它的视觉情绪、色彩规范和排版布局，把思路列出来。（比如明确告诉它你要包豪斯风格或者北欧风）。 2. 落地执行：等它把设计语言梳理清楚，你确认没问题了，再让它基于这套标准去生成具体的 TailwindCSS 样式和前端页面。用这种先 Plan 后做的方式，出来的页面不仅美观，而且风格极其统一。（视频2）目前在Openrouter中可以免费体验该模型。选对工具打破模板限制，用高审美的模型直接拔高视觉质感，能帮我们省下大把死磕 CSS 的时间。期待大家都能快速做出让人眼前一亮的作品！

卧槽，答案终于揭晓了！那个在open router上持续霸榜的神秘模型，是阿里推出的全新大模型“蚂蚁百灵”！今天我们来深度聊一聊这个模型。用过AI来完成前端开发的朋友肯定懂：要让AI做出想要的UI总是要找参考，再不然就是要依赖设计 skill 的帮助。但这种界面一旦看多了，就会陷入审美疲劳。原因在于不管你是对标UI还是使用skill，结果都是被限定在固有的生成范围内。最近小灰测了新模型 Ling-2.6-1T （由蚂蚁集团 Ant Ling 开发），发现它刚好就能打破这个限制。它生成的页面不仅审美极度在线，而且自带高质量的交互效果，做出来的东西终于不再是干巴巴的呆板网页了。但用它有个必须要避开的坑：Ling 2.6 1T 默认是没有深度思考模式的。它在计算资源分配上极其克制，如果你偷懒丢一句"给我写个好看的界面"，那么它大概率会给你一个准确但极其敷衍的结果。(视频1) 那么怎么取巧使用它？小灰分享一个能逼出它真实设计水平的实操工作流：把它当成主规划师，先拆解风格，再写代码。跟它对话时，你可以直接下这种指令： 1. 强制思考：先别急着写代码！帮我分析这个产品的定位，明确它的视觉情绪、色彩规范和排版布局，把思路列出来。（比如明确告诉它你要包豪斯风格或者北欧风）。 2. 落地执行：等它把设计语言梳理清楚，你确认没问题了，再让它基于这套标准去生成具体的 TailwindCSS 样式和前端页面。用这种先 Plan 后做的方式，出来的页面不仅美观，而且风格极其统一。（视频2）目前在Openrouter中可以免费体验该模型。选对工具打破模板限制，用高审美的模型直接拔高视觉质感，能帮我们省下大把死磕 CSS 的时间。期待大家都能快速做出让人眼前一亮的作品！

程序员小灰

15,021 views • 5 months ago

AI 写前端的下一步，可能不是“更快”，而是“更有品味”。看到一个可以称之为“一份写给 AI Agent 的前端审美手册”的开源项目：Taste Skill。它不是 UI 组件库，也不是 Tailwind 模板，而是一套写给 AI Agent 的「前端审美规则包」。专门解决一个问题：为什么 AI 生成的页面越来越像？紫蓝渐变、居中 Hero、三张功能卡片、玻璃拟态、假仪表盘、无意义标签……页面能跑，但一眼 AI 味。它会让 AI 在写页面之前先想清楚：这个页面是官网、作品集、SaaS 落地页，还是老项目重设计？用户是谁？品牌应该是克制、可信、活泼、工业感，还是偏高级消费品？这次应该信息密度高一点，还是留白多一点？动效要克制，还是可以更强一点？然后再开始写代码。 Taste Skill 的思路是：把“审美”和“交付标准”拆成规则，让 AI 每次都先读一遍。比如：不要默认紫蓝科技渐变/不要所有页面都居中 hero/不要动不动三张等宽卡片/不要乱堆玻璃拟态和大圆角/不要用假的产品截图糊弄/不要写一堆空洞营销词/交付前检查按钮、排版、动效、移动端、可访问性一个比较适合的使用方式是：用 Taste Skill 帮我重设计这个落地页。先判断页面类型、用户受众和视觉方向，再做设计审计，最后在现有技术栈内完成实现。避免默认 AI 风格，交付前跑 pre-flight check。这类提示比“帮我美化一下页面”更容易得到稳定结果。

AI 写前端的下一步，可能不是“更快”，而是“更有品味”。看到一个可以称之为“一份写给 AI Agent 的前端审美手册”的开源项目：Taste Skill。它不是 UI 组件库，也不是 Tailwind 模板，而是一套写给 AI Agent 的「前端审美规则包」。专门解决一个问题：为什么 AI 生成的页面越来越像？紫蓝渐变、居中 Hero、三张功能卡片、玻璃拟态、假仪表盘、无意义标签……页面能跑，但一眼 AI 味。它会让 AI 在写页面之前先想清楚：这个页面是官网、作品集、SaaS 落地页，还是老项目重设计？用户是谁？品牌应该是克制、可信、活泼、工业感，还是偏高级消费品？这次应该信息密度高一点，还是留白多一点？动效要克制，还是可以更强一点？然后再开始写代码。 Taste Skill 的思路是：把“审美”和“交付标准”拆成规则，让 AI 每次都先读一遍。比如：不要默认紫蓝科技渐变/不要所有页面都居中 hero/不要动不动三张等宽卡片/不要乱堆玻璃拟态和大圆角/不要用假的产品截图糊弄/不要写一堆空洞营销词/交付前检查按钮、排版、动效、移动端、可访问性一个比较适合的使用方式是：用 Taste Skill 帮我重设计这个落地页。先判断页面类型、用户受众和视觉方向，再做设计审计，最后在现有技术栈内完成实现。避免默认 AI 风格，交付前跑 pre-flight check。这类提示比“帮我美化一下页面”更容易得到稳定结果。

sitin

15,232 views • 4 months ago

别再纠结是用 Codex 还是 Claude Code 了。我发现其实真正决定AI生产力上限的，不是 Agent，而是 Skill。这期视频我会分享最终筛选出来的8个最核心的skill 1、基础Skill：把重复工作流封装成专属Skill 、自动搜索各种Skill 2、产品开发Skill：顶级开发团队级别的AI编程提效；不懂设计也能做出好看页面 3、内容创作Skill：做图、整理资料、排版发布，这两个Skill直接替你干不管你用 Claude Code 还是 Codex，装上就能用。

别再纠结是用 Codex 还是 Claude Code 了。我发现其实真正决定AI生产力上限的，不是 Agent，而是 Skill。这期视频我会分享最终筛选出来的8个最核心的skill 1、基础Skill：把重复工作流封装成专属Skill 、自动搜索各种Skill 2、产品开发Skill：顶级开发团队级别的AI编程提效；不懂设计也能做出好看页面 3、内容创作Skill：做图、整理资料、排版发布，这两个Skill直接替你干不管你用 Claude Code 还是 Codex，装上就能用。

阿西_出海

101,196 views • 4 months ago

装完这 9 个 Skill，你的 Codex 直接开挂很多人还在把 Codex 当聊天工具用：写几句 Prompt、改几行代码、遇到复杂任务就卡住真正拉开差距的，是给它装上这套能复用的 Skill： 1、Ponytail：少写 50% 无效代码，Token 节省 94% 它会先判断代码有没有必要写，避免 AI 过度开发。该省的 Token 省掉，该保留的功能保留，相当于给 Codex 塞进一个资深工程师。 2、Guizang PPT Skill：10 种设计风格、22 种版式不会在生成满屏文字的屎一样的 PPT，直接输出排版、内容、视觉都能用的可编辑成品，微调后就能交付 3、GSAP Skills：一句话，让网页拥有专业级动效卡片、文字、滚动、转场全都能做，把静态网页升级成有镜头感、互动感和品牌感的产品官网。 4、AI Product Video：152 张动态卡片、209 个动画模板上传文案、产品介绍或 Logo，自动拆卖点、配镜头、做动效，快速生成能直接用于推广的产品宣传片。 5、Smart Charts：3 种文件格式，1 键生成数据看板 CSV、Excel、JSON 丢进去，自动分析数据、推荐图表类型，生成可筛选、可点击的交互式图表，还能导出图片放进 PPT 6、Gathered Scenes Zine Skill：一张照片，变一份高级视觉作品自动理解照片场景和构图，完成插画、配色、拼贴和风格重构，普通素材也能做出原创视觉感。 7、Taste Skill：从 5 个维度干掉 AI 味字体、配色、留白、间距、层级全部重审；不好看就调整重做，让 AI 页面从“能用”变成“能展示”。 8、Video Use：一条原始视频，自动剪成完整成片自动识别废话、口误、停顿、跳帧和字幕遮挡，省掉反复听素材、拉时间轴、手动找重点的剪辑时间 9、ELI5：把 100 分难懂的知识，讲到 5 岁孩子都能懂复杂代码、术语和论文，直接变成少文字、多图片的解释页面。学习一个陌生领域，不再从硬啃开始直接给 Codex 补上「省 Token、做 PPT、做网页、做视频、做图表、提升审美」的能力。完整视频3分22秒，展示具体效果，觉得好用你就安装内容制作不易，觉得有价值欢迎关注 +❤️+ 收藏、转发给你的朋友，大家一起进步！

govin.eth | G哥

246,385 views • 1 month ago

前端和独立开发者终于有天花板级别的动效库了！告别千篇一律的组件库和生硬过场！分享一个超赞的 GitHub 开源项目 —— react-bits 专为追求极致视觉与交互细节的前端/独立开发者而生它把那些大厂/顶级创意网站上才能见到的高级感动效，全部封装成了开箱即用的 React 组件！像素动画、流体文字、超酷的背景粒子、3D卡片翻转、炫目悬停特效…… 全部基于 React + Tailwind CSS + Framer Motion 纯代码实现，零配置、轻量级、完全可定制。每个动效都附带精心设计的交互预览 + 实时参数调节面板而且直接一键复制代码，1秒直接搬进你的项目，让你的网页瞬间充满百万级的高级创意感！地址：

前端和独立开发者终于有天花板级别的动效库了！告别千篇一律的组件库和生硬过场！分享一个超赞的 GitHub 开源项目 —— react-bits 专为追求极致视觉与交互细节的前端/独立开发者而生它把那些大厂/顶级创意网站上才能见到的高级感动效，全部封装成了开箱即用的 React 组件！像素动画、流体文字、超酷的背景粒子、3D卡片翻转、炫目悬停特效…… 全部基于 React + Tailwind CSS + Framer Motion 纯代码实现，零配置、轻量级、完全可定制。每个动效都附带精心设计的交互预览 + 实时参数调节面板而且直接一键复制代码，1秒直接搬进你的项目，让你的网页瞬间充满百万级的高级创意感！地址：

爱丽丝呀！

59,078 views • 3 months ago

AI 写前端越来越“一眼 AI”了？最近又发现一个工具：Impeccable，一个给 Codex、Claude Code、Cursor 安装的一套“设计语言”的工具更准确地说，Impeccable 是一套安装在 AI 编程工具里的“设计语言层”：它通过设计知识、工作流命令、项目上下文和反模式检测，让 Codex、Claude Code、Cursor 等编码代理在修改前端时，少一些模型默认审美，多一些真正的设计判断。平时我们给 AI 的设计要求可能会非常模糊，设计师有时候都未必能真正了解你的需求，何况是AI 所以Impeccable 想补齐那些专业性的知识要求。它不会单纯告诉 AI“把页面做漂亮”，而是把设计工作拆成了多个可以明确调用的专业维度。目前 Impeccable 提供了 23 个命令。它们并不只是一些短提示词，而是包含了相应设计领域的检查步骤、判断标准和工作方法。

AI 写前端越来越“一眼 AI”了？最近又发现一个工具：Impeccable，一个给 Codex、Claude Code、Cursor 安装的一套“设计语言”的工具更准确地说，Impeccable 是一套安装在 AI 编程工具里的“设计语言层”：它通过设计知识、工作流命令、项目上下文和反模式检测，让 Codex、Claude Code、Cursor 等编码代理在修改前端时，少一些模型默认审美，多一些真正的设计判断。平时我们给 AI 的设计要求可能会非常模糊，设计师有时候都未必能真正了解你的需求，何况是AI 所以Impeccable 想补齐那些专业性的知识要求。它不会单纯告诉 AI“把页面做漂亮”，而是把设计工作拆成了多个可以明确调用的专业维度。目前 Impeccable 提供了 23 个命令。它们并不只是一些短提示词，而是包含了相应设计领域的检查步骤、判断标准和工作方法。

sitin

10,762 views • 2 months ago

兄弟们，现在用 AI 复刻爆款视频的门槛真低到离谱了。最近这种排名类视频在国内外很火，比如 XXX 排名从夯到拉，这种其实就是结构性爆款你照着这个结构，不管往里面替换内容，都能再火一遍我用 AI 复刻了一条 YouTube 上 185w播放的排名类视频，用的工具叫 Hypit，是给 AI Agent 做视频的一套开源语言和系统，能装在任意 Agent 上。把想要复刻的视频链接丢给他，说一句 clone 这个视频，就能帮你拆解整个视频的结构要调整人物、画面、内容，直接用文字跟它说就行。最近他们直接把代码开源出来了，感兴趣的话可以去点个 Star，收藏一波： #Hypit

兄弟们，现在用 AI 复刻爆款视频的门槛真低到离谱了。最近这种排名类视频在国内外很火，比如 XXX 排名从夯到拉，这种其实就是结构性爆款你照着这个结构，不管往里面替换内容，都能再火一遍我用 AI 复刻了一条 YouTube 上 185w播放的排名类视频，用的工具叫 Hypit，是给 AI Agent 做视频的一套开源语言和系统，能装在任意 Agent 上。把想要复刻的视频链接丢给他，说一句 clone 这个视频，就能帮你拆解整个视频的结构要调整人物、画面、内容，直接用文字跟它说就行。最近他们直接把代码开源出来了，感兴趣的话可以去点个 Star，收藏一波： #Hypit

阿西_出海

49,161 views • 17 days ago

分享下我在 Vibe Coding 中，使用率最高，且最高效的几个工具，覆盖到设计稿生成，到代码交付，网页动效等👇 1、Codex 你只要输入一个需求，它就会调动多个AI智能体并行工作，无论是项目重构，还是从零构建MVP，，它都能独立完成，你无需关注代码，而是把更多精力放在架构设计和创造性问题解决上 2、Paper 这个可以让 AI 生成高质量设计稿，并实现设计与代码双向实时同步，你只需专注界面创作，AI 会自动还原为精准代码交付 3、21st 这个提供超多精美的前端组件，同时带有流畅的交互动画，只需点击复制 Prompt ，粘贴到 AI 对话框即可使用 4、Unicorn 这个，不用写代码，也可以做出丝滑流畅的 GPU 级网页特效，一键导出即可让 AI 接入你的项目 5、Agentation 这个，可以直接在网页上标注需要调整的元素，自动转化为 AI 能够直接理解，和执行的结构化代码上下文，实现网站的精细化调整 6、Axion 这个，能让你的 AI 化身 iOS 开发专家，覆盖从设计、开发到调试的全流程，，输出符合 Apple 高标准、安全、高性能，且易于维护的生产级代码 7、Apple docs mcp 配合这个，可以自动检索 Apple 最新开发文档，能解决日常开发软件中 90% 的问题

分享下我在 Vibe Coding 中，使用率最高，且最高效的几个工具，覆盖到设计稿生成，到代码交付，网页动效等👇 1、Codex 你只要输入一个需求，它就会调动多个AI智能体并行工作，无论是项目重构，还是从零构建MVP，，它都能独立完成，你无需关注代码，而是把更多精力放在架构设计和创造性问题解决上 2、Paper 这个可以让 AI 生成高质量设计稿，并实现设计与代码双向实时同步，你只需专注界面创作，AI 会自动还原为精准代码交付 3、21st 这个提供超多精美的前端组件，同时带有流畅的交互动画，只需点击复制 Prompt ，粘贴到 AI 对话框即可使用 4、Unicorn 这个，不用写代码，也可以做出丝滑流畅的 GPU 级网页特效，一键导出即可让 AI 接入你的项目 5、Agentation 这个，可以直接在网页上标注需要调整的元素，自动转化为 AI 能够直接理解，和执行的结构化代码上下文，实现网站的精细化调整 6、Axion 这个，能让你的 AI 化身 iOS 开发专家，覆盖从设计、开发到调试的全流程，，输出符合 Apple 高标准、安全、高性能，且易于维护的生产级代码 7、Apple docs mcp 配合这个，可以自动检索 Apple 最新开发文档，能解决日常开发软件中 90% 的问题

Paidax

175,509 views • 7 months ago

给 Codex 5.6 装上这两个审美 Skill，直接把海报和照片的视觉质感拉满！分享两个宝藏开源项目～第一个：gc-minimal-zine-poster 一个专门生成极简 Zine 风格海报的 Skill 输入一句话、一个主题或者一张照片，它会自动拆解画面主体、构图、字体、留白和色彩，再生成带有复古纸张、印刷纹理和独立杂志感的海报。它不是简单套模板，而是把 Zine 海报的视觉规则直接写进 Codex，让每次生成都有统一的审美方向。地址：第二个：Scene Card Studio 这是我自己开源的照片视觉叙事 Skill 它不只是给照片套滤镜，而是先分析照片中的人物、空间、动作和情绪，再把这些内容整理成可编辑的 Scene Cards，判断这组照片应该怎样被阅读。然后根据内容选择电影分镜、记忆地图、家庭档案、旅行日志、极简编辑或时尚编辑等叙事系统，把普通照片重新组织成一套完整的视觉作品。地址：下面都是codex5.6做的一些案例～

给 Codex 5.6 装上这两个审美 Skill，直接把海报和照片的视觉质感拉满！分享两个宝藏开源项目～第一个：gc-minimal-zine-poster 一个专门生成极简 Zine 风格海报的 Skill 输入一句话、一个主题或者一张照片，它会自动拆解画面主体、构图、字体、留白和色彩，再生成带有复古纸张、印刷纹理和独立杂志感的海报。它不是简单套模板，而是把 Zine 海报的视觉规则直接写进 Codex，让每次生成都有统一的审美方向。地址：第二个：Scene Card Studio 这是我自己开源的照片视觉叙事 Skill 它不只是给照片套滤镜，而是先分析照片中的人物、空间、动作和情绪，再把这些内容整理成可编辑的 Scene Cards，判断这组照片应该怎样被阅读。然后根据内容选择电影分镜、记忆地图、家庭档案、旅行日志、极简编辑或时尚编辑等叙事系统，把普通照片重新组织成一套完整的视觉作品。地址：下面都是codex5.6做的一些案例～

爱丽丝呀！

37,270 views • 1 month ago

这个 garden-skills 审美绝了，AI味网站终于拜拜了！🚀 ConardLi 的 garden-skills 已 6k+ star。 25种风格配方直接把 AI 生成网页的审美拉满—彻底告别千篇一律的蓝紫卡片，Linear、Aesop、Pentagram 风随你秒切，出来就是 polished 高级感。 4个 Skill 模块，一条 npx 命令全装好，支持 Claude Code、Cursor、Codex 等六大平台。 - web-design-engineer：AI 真正懂设计系统、配色与排版，直接输出 polished 落地页、仪表盘、原型，内置反模板清单 + 25种风格配方 - web-video-presentation：一句话或文章 → 一键生成可点击的16:9网页演示视频（23个主题 + TTS配音） - gpt-image-2：专业级图像生成/编辑提示词引擎，支持本地和多平台 - kb-retriever：本地知识库精准检索，不炸上下文快去试试，生产力直接起飞

这个 garden-skills 审美绝了，AI味网站终于拜拜了！🚀 ConardLi 的 garden-skills 已 6k+ star。 25种风格配方直接把 AI 生成网页的审美拉满—彻底告别千篇一律的蓝紫卡片，Linear、Aesop、Pentagram 风随你秒切，出来就是 polished 高级感。 4个 Skill 模块，一条 npx 命令全装好，支持 Claude Code、Cursor、Codex 等六大平台。 - web-design-engineer：AI 真正懂设计系统、配色与排版，直接输出 polished 落地页、仪表盘、原型，内置反模板清单 + 25种风格配方 - web-video-presentation：一句话或文章 → 一键生成可点击的16:9网页演示视频（23个主题 + TTS配音） - gpt-image-2：专业级图像生成/编辑提示词引擎，支持本地和多平台 - kb-retriever：本地知识库精准检索，不炸上下文快去试试，生产力直接起飞

开发者Hailey

10,509 views • 4 months ago

太炸裂了！为啥没有早点发现CodeX这个神仙用法？！ 30 秒的视频演示--直接把你的 Plus 账号当成 PRO 账号的额度去用，简直爽翻了😂Codex 额度不够用的话强烈推荐试试： Codex （读取本地项目 +发送任务） ↓ 压缩提炼成 1~3K 的精简 Packet ↓ 调用浏览器 ➔ 丢给网页版 ChatGPT（5.6-Sol 做重推理） ↓ 网页端输出精准的结构化方案 ↓ Codex 接收方案 ➔ 修改代码 ─── 【二、具体思路】 1. 网页端当最强大脑（出方案）：直接在网页端用最高版本的GPT-5.6Sol ，把复杂业务需求丢进去，让它做最严密的架构拆解和精准代码方案 2. 本地 Codex 做调度与落地：拿到成熟方案后，直接交给本地终端的 Codex。它只需要按图索骥去读写文件、跑测试、自动化改代码，用5.6 LUNA模型消耗轻量 Token就可以用了 ─── 这个方案你可以自己写一个脚本。如果嫌自己手写脚本太麻烦，推荐一个开源工具可以直接使用——Oracle（由知名开发者 Peter Steinberger 🦞 开源）： 👉 开源地址：

太炸裂了！为啥没有早点发现CodeX这个神仙用法？！ 30 秒的视频演示--直接把你的 Plus 账号当成 PRO 账号的额度去用，简直爽翻了😂Codex 额度不够用的话强烈推荐试试： Codex （读取本地项目 +发送任务） ↓ 压缩提炼成 1~3K 的精简 Packet ↓ 调用浏览器 ➔ 丢给网页版 ChatGPT（5.6-Sol 做重推理） ↓ 网页端输出精准的结构化方案 ↓ Codex 接收方案 ➔ 修改代码 ─── 【二、具体思路】 1. 网页端当最强大脑（出方案）：直接在网页端用最高版本的GPT-5.6Sol ，把复杂业务需求丢进去，让它做最严密的架构拆解和精准代码方案 2. 本地 Codex 做调度与落地：拿到成熟方案后，直接交给本地终端的 Codex。它只需要按图索骥去读写文件、跑测试、自动化改代码，用5.6 LUNA模型消耗轻量 Token就可以用了 ─── 这个方案你可以自己写一个脚本。如果嫌自己手写脚本太麻烦，推荐一个开源工具可以直接使用——Oracle（由知名开发者 Peter Steinberger 🦞 开源）： 👉 开源地址：

梭哈.AI

69,357 views • 1 month ago