Loading video...

Video Failed to Load

Go Home

给 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 本身更强的布局、视觉层级和设计判断，基本打通了一套完整的前端工作流～

BTCqzy1's profile picture

爱丽丝呀！

19,418 subscribers

117,912 views • 13 days ago •via X (Twitter)

Science & TechnologyEducation
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Codex 重磅更新：Product Design 插件上线！ 以前 Codex 代码强但 UI 审美常被吐槽 上世纪风，这次直接把产品设计思维装进大脑，审美和专业度瞬间拉满！ 下面视频展示了我用最新 Product Design 插件设计的三个网站，完全不输高级设计师～ 先设计，后开发：它不再是直接盲写代码，而是先给你 3 张不同风格的高保真参考图！ 确认了审美，再开始写代码，这种 设计驱动 的流程太专业了。 丝滑的滚动叙事、动态背景、视频卡片，交互细节拉满。 这种先定审美、再定交互、最后落地的流程，才是未来 AI 开发的终极形态！
0:43

Codex 重磅更新：Product Design 插件上线！ 以前 Codex 代码强但 UI 审美常被吐槽 上世纪风，这次直接把产品设计思维装进大脑，审美和专业度瞬间拉满！ 下面视频展示了我用最新 Product Design 插件设计的三个网站，完全不输高级设计师～ 先设计，后开发：它不再是直接盲写代码，而是先给你 3 张不同风格的高保真参考图！ 确认了审美，再开始写代码，这种 设计驱动 的流程太专业了。 丝滑的滚动叙事、动态背景、视频卡片，交互细节拉满。 这种先定审美、再定交互、最后落地的流程，才是未来 AI 开发的终极形态！

爱丽丝呀！

138,496 views • 1 month ago

Figma 正式推出了官方的远程 MCP 服务器，现在不需要安装 Figma 客户端 只需要在支持的软件比如 Cursor、Cluade code 里面添加，并在打开的网页里面完成账户授权就行 而且现在设计组件和前端组件的映射信息也可以通过 MCP 获取到，如果你的团队有设计系统的话，然后你的设计稿组件采用程度高 前端可以一键用 AI 生成全部的前端代码，而且保证高还原度，设计师和前端协作会到一个新的时代
0:29

Figma 正式推出了官方的远程 MCP 服务器，现在不需要安装 Figma 客户端 只需要在支持的软件比如 Cursor、Cluade code 里面添加，并在打开的网页里面完成账户授权就行 而且现在设计组件和前端组件的映射信息也可以通过 MCP 获取到，如果你的团队有设计系统的话，然后你的设计稿组件采用程度高 前端可以一键用 AI 生成全部的前端代码，而且保证高还原度，设计师和前端协作会到一个新的时代

歸藏(guizang.ai)

157,557 views • 10 months ago

今天在Producthunt发现一个AI模型Kombai，可以理解Figma的界面设计并生成对应的前端代码，下面是他们官网的演示视频。 从演示来看生成的代码还是不错的，它的优势在于他不要求设计稿的格式、层级和是否使用组件，无论你怎么嵌套和画出的界面它都能理解。 这比之前通过传统工程化思路从设计稿生成代码要强多了。之前的一些工具要不是处理不了复杂样式，要不就是对设计师的设计稿格式有非常严格的要求。 同时这个模型也支持通过自然语言生成前端界面的代码。 官网链接：
2:32

今天在Producthunt发现一个AI模型Kombai，可以理解Figma的界面设计并生成对应的前端代码，下面是他们官网的演示视频。 从演示来看生成的代码还是不错的，它的优势在于他不要求设计稿的格式、层级和是否使用组件，无论你怎么嵌套和画出的界面它都能理解。 这比之前通过传统工程化思路从设计稿生成代码要强多了。之前的一些工具要不是处理不了复杂样式，要不就是对设计师的设计稿格式有非常严格的要求。 同时这个模型也支持通过自然语言生成前端界面的代码。 官网链接：

歸藏(guizang.ai)

78,671 views • 2 years ago

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

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

阿西_出海

72,901 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，而是把设计判断前置成一套可执行规则。 不只是代码生成能力，还有审美、上下文约束和工程化稳定性。
1:32

我靠，写前端终于不必被 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 聊开发

21,845 views • 25 days ago

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

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

爱丽丝呀！

201,621 views • 1 month ago

我现在尝试的方案是： 1. 先用 出一个大概的风格，可以扩展不同的设计风格和布局，它可以把当前设计打包成一整套提示词，导出给其他 agents 使用。 2. 在其他 agents 比如我用 Replit ⠕ 还原，基本粘贴它的提示词都能完美还原，然后让 Replit 再基于这个设计完成其他页面和功能。(Replit agent 4.0 支持 canvas 也可以生成不同风格和布局的设计) 3. Replit 绑定 Github 后代码是实时同步到你的 repo 的，基本满意后 fork 到本地，让 Claude Code 重构。
0:26

我现在尝试的方案是： 1. 先用 出一个大概的风格，可以扩展不同的设计风格和布局，它可以把当前设计打包成一整套提示词，导出给其他 agents 使用。 2. 在其他 agents 比如我用 Replit ⠕ 还原，基本粘贴它的提示词都能完美还原，然后让 Replit 再基于这个设计完成其他页面和功能。(Replit agent 4.0 支持 canvas 也可以生成不同风格和布局的设计) 3. Replit 绑定 Github 后代码是实时同步到你的 repo 的，基本满意后 fork 到本地，让 Claude Code 重构。

Ding

56,474 views • 4 months ago

这绝对是 GitHub 上最牛逼的 AI 网站克隆神器🔥 别再羡慕大厂动辄几万刀的前端设计了！ 用这个开源神器，全网顶级落地页一键变成你的私人组件库！ 操作简单到离谱： 给它一个 URL，AI 几分钟时间，它就能把人家的设计、资源、组件全部智能复刻成干净的生产级代码。 最牛的是，它不是死板的复制，而是带脑子的重构！图片自动下、SVG 自动扣、CSS 自动转。写代码的速度比你眨眼还快！ 地址：
0:21

这绝对是 GitHub 上最牛逼的 AI 网站克隆神器🔥 别再羡慕大厂动辄几万刀的前端设计了！ 用这个开源神器，全网顶级落地页一键变成你的私人组件库！ 操作简单到离谱： 给它一个 URL，AI 几分钟时间，它就能把人家的设计、资源、组件全部智能复刻成干净的生产级代码。 最牛的是，它不是死板的复制，而是带脑子的重构！图片自动下、SVG 自动扣、CSS 自动转。写代码的速度比你眨眼还快！ 地址：

爱丽丝呀！

14,675 views • 20 days ago

Codex 5.6 真的绝了 用了这么久，最值得装的插件就这几个 👇 ① Browser AI 自动操作浏览器，点击、输入、端到端测试全能干，再也不用手动验证了 ② GitHub 和 Issue、PR 打通，丢个任务给它，从编码到审核全搞定，开发流程快到飞起 ③ Codex Security 自动扫代码漏洞和密钥泄露，还能给出修复方案，省了一堆安全问题 ④ Build Web Apps 描述想法就行，设计、开发、测试一条龙，全栈项目的时间能省一半 ⑤ Figma Figma 设计直接转代码，响应式自动搞定，设计稿和代码终于能对上了 ⑥ Sentry 线上报错自动分析，帮你定位问题还给出修复代码，线上问题不再头大 但最绝的其实是「Sites」功能 开发完直接在里面预览，一键公开分享 还能用自定义域名 这意味着什么？原型秒送客户看 把这些组合起来用 Codex 就从单纯的「写代码 AI」变成了真的开发团队——设计、编码、测试、调试、上线全包
0:23

Codex 5.6 真的绝了 用了这么久，最值得装的插件就这几个 👇 ① Browser AI 自动操作浏览器，点击、输入、端到端测试全能干，再也不用手动验证了 ② GitHub 和 Issue、PR 打通，丢个任务给它，从编码到审核全搞定，开发流程快到飞起 ③ Codex Security 自动扫代码漏洞和密钥泄露，还能给出修复方案，省了一堆安全问题 ④ Build Web Apps 描述想法就行，设计、开发、测试一条龙，全栈项目的时间能省一半 ⑤ Figma Figma 设计直接转代码，响应式自动搞定，设计稿和代码终于能对上了 ⑥ Sentry 线上报错自动分析，帮你定位问题还给出修复代码，线上问题不再头大 但最绝的其实是「Sites」功能 开发完直接在里面预览，一键公开分享 还能用自定义域名 这意味着什么？原型秒送客户看 把这些组合起来用 Codex 就从单纯的「写代码 AI」变成了真的开发团队——设计、编码、测试、调试、上线全包

暖暖爱AI

99,311 views • 6 days ago

首个直接集成在 IDE 中的开源 AI 设计 Agent：SuperDesign，可直接在 IDE 中生成 UI 设计。 通过自然语言提示就能生成完整的 UI 界面、可复用组件和线框图，并支持 Cursor、Windsurf、VS Code 等主流 AI 编辑器。 GitHub： 主要特性： - 产品界面生成：通过单个提示即可创建完整 UI 界面 - UI 组件创建：生成可直接使用的可复用组件 - 线框图绘制：快速探索低保真度布局设计 - 设计分支和迭代：轻松复制和改进现有设计 - 提示词转代码：将设计提示直接复制到 AI IDE 中 通过 Cursor/VS Code 市场安装插件即可使用，其中设计文件本地存储在 .superdesign/ 目录中。
0:55

首个直接集成在 IDE 中的开源 AI 设计 Agent：SuperDesign，可直接在 IDE 中生成 UI 设计。 通过自然语言提示就能生成完整的 UI 界面、可复用组件和线框图，并支持 Cursor、Windsurf、VS Code 等主流 AI 编辑器。 GitHub： 主要特性： - 产品界面生成：通过单个提示即可创建完整 UI 界面 - UI 组件创建：生成可直接使用的可复用组件 - 线框图绘制：快速探索低保真度布局设计 - 设计分支和迭代：轻松复制和改进现有设计 - 提示词转代码：将设计提示直接复制到 AI IDE 中 通过 Cursor/VS Code 市场安装插件即可使用，其中设计文件本地存储在 .superdesign/ 目录中。

GitHubDaily

42,801 views • 1 year ago

🚨卧槽！Codex 5.6 这几个插件装完真的会起飞 重度使用后我筛选出了这几个最能提升生产力的插件，开发体验直接上一个台阶。 核心亮点： > Browser 插件：写完交互直接让它自动化测试、点按钮、验收，比手动快太多 > GitHub 插件：Issue 一丢过去，它就能直接写代码并处理 PR，开发流程彻底闭环 > Codex Security：自动扫描漏洞和密钥泄露，还给出修复建议 > Build Web Apps：从产品构思到架构生成、开发、浏览器测试全流程跑通 > Figma 插件：设计稿丢进去，几分钟就能输出像素级还原的响应式代码 > Sentry 插件：线上报错自动定位并推送修复代码 最强功能是 Sites：做完项目可以直接预览、发布、分享，还能绑定自定义域名。 这套插件装完后，你的 Codex 基本能覆盖从设计到上线的大部分流程。 对重度使用 Codex / Cursor 类 AI 编码工具的开发者来说，这几个插件目前是生产力提升最明显的组合。 安装方式：桌面端进入 Settings → Plugins，搜索插件名称即可安装。
1:10

🚨卧槽！Codex 5.6 这几个插件装完真的会起飞 重度使用后我筛选出了这几个最能提升生产力的插件，开发体验直接上一个台阶。 核心亮点： > Browser 插件：写完交互直接让它自动化测试、点按钮、验收，比手动快太多 > GitHub 插件：Issue 一丢过去，它就能直接写代码并处理 PR，开发流程彻底闭环 > Codex Security：自动扫描漏洞和密钥泄露，还给出修复建议 > Build Web Apps：从产品构思到架构生成、开发、浏览器测试全流程跑通 > Figma 插件：设计稿丢进去，几分钟就能输出像素级还原的响应式代码 > Sentry 插件：线上报错自动定位并推送修复代码 最强功能是 Sites：做完项目可以直接预览、发布、分享，还能绑定自定义域名。 这套插件装完后，你的 Codex 基本能覆盖从设计到上线的大部分流程。 对重度使用 Codex / Cursor 类 AI 编码工具的开发者来说，这几个插件目前是生产力提升最明显的组合。 安装方式：桌面端进入 Settings → Plugins，搜索插件名称即可安装。

爱吃折耳根的Ace

21,691 views • 12 days ago

Codex 5.6 之后，AI 视频制作开始进入“流水线时代” 以前做一个视频，需要脚本、设计、剪辑、后期多个工具来回切换。现在通过几个 Skill 组合，AI 可以直接完成从创意到成片的完整流程。 这次测试下来，比较关键的 4 个 Skill： 1️⃣ HyperFrames(内置插件) 负责整体策划、动效生成、画面合成和最终渲染，把文字构思转成完整的动态视频框架。 2️⃣ Remotion(内置插件) 基于 React 的视频生成工具，适合需要精确控制和批量生产的场景，尤其是数字人 + 动效类内容。 3️⃣ video-use 专门处理真人素材的剪辑工具，能自动识别镜头、卡点，并完成后期处理。 4️⃣ Seedance 用于生成电影级运镜和实拍感提示词，补齐 AI 视频在镜头语言和质感上的短板。 把这几个装上后，从脚本构思、动效设计、素材剪辑到最终渲染，基本能形成一条比较完整的 AI 视频生产链路。 对需要快速出产品宣传片、演示视频，或者做自媒体内容的人来说，这套组合目前效率还不错。
0:37

Codex 5.6 之后，AI 视频制作开始进入“流水线时代” 以前做一个视频，需要脚本、设计、剪辑、后期多个工具来回切换。现在通过几个 Skill 组合，AI 可以直接完成从创意到成片的完整流程。 这次测试下来，比较关键的 4 个 Skill： 1️⃣ HyperFrames(内置插件) 负责整体策划、动效生成、画面合成和最终渲染，把文字构思转成完整的动态视频框架。 2️⃣ Remotion(内置插件) 基于 React 的视频生成工具，适合需要精确控制和批量生产的场景，尤其是数字人 + 动效类内容。 3️⃣ video-use 专门处理真人素材的剪辑工具，能自动识别镜头、卡点，并完成后期处理。 4️⃣ Seedance 用于生成电影级运镜和实拍感提示词，补齐 AI 视频在镜头语言和质感上的短板。 把这几个装上后，从脚本构思、动效设计、素材剪辑到最终渲染，基本能形成一条比较完整的 AI 视频生产链路。 对需要快速出产品宣传片、演示视频，或者做自媒体内容的人来说，这套组合目前效率还不错。

爱吃折耳根的Ace

15,053 views • 6 days ago

溜儿，把从真实网站提取的设计规范做成了现成的 DESIGN.md集合，直接丢一个DESIGN.md+描述，AI即能生成对应精美UI 就是用纯Markdown描述设计系统，AI读取它来生成对应的UI界面，直接放到根目录里，AI即能理解并生成 这个库叫awesome-design-md，目前收录了50+知名网站设计，涵盖AI&LLM、开发工具、后台与数据库、金融、电商、媒体、设计等等领域 每个文件包含完整设计系统规范，颜色、字体、组件、布局等，另外还附带preview.html和preview-dark.html预览文件 相当于一个设计系统prompt库，AI一键生成风格一致的界面，对vibe coding来说比较实用，不过1:1复刻某品牌完整原版需谨慎 #AI设计 #awesomedesignmd #vibecoding
0:35

溜儿，把从真实网站提取的设计规范做成了现成的 DESIGN.md集合，直接丢一个DESIGN.md+描述，AI即能生成对应精美UI 就是用纯Markdown描述设计系统，AI读取它来生成对应的UI界面，直接放到根目录里，AI即能理解并生成 这个库叫awesome-design-md，目前收录了50+知名网站设计，涵盖AI&LLM、开发工具、后台与数据库、金融、电商、媒体、设计等等领域 每个文件包含完整设计系统规范，颜色、字体、组件、布局等，另外还附带preview.html和preview-dark.html预览文件 相当于一个设计系统prompt库，AI一键生成风格一致的界面，对vibe coding来说比较实用，不过1:1复刻某品牌完整原版需谨慎 #AI设计 #awesomedesignmd #vibecoding

AIGCLINK

11,646 views • 3 months ago

本周 Open Design 即将迎来颠覆式更新💥⚡️ 你和团队终于可以直接在 Codex 里共同设计了！ 更准确地说：你的 Codex、队友的 Codex，都能进入同一个 Open Design 可视化画布，实时沟通、编辑、评审和协作。 AI设计，正式进入多人协作时代！ 感谢 Tuola Ge 制作这两支 AI 口播视频，为了留下一点。正式发布前，我们已经等不及邀请大家抢先加入团队内测，并为你和团队提供专属定制体验！ 名额有限，直接联系我们！ 设计不该再是少数人的专属技能。 在 AI 时代，它应该成为每个AI Native 团队的基础设施！
0:48

本周 Open Design 即将迎来颠覆式更新💥⚡️ 你和团队终于可以直接在 Codex 里共同设计了！ 更准确地说：你的 Codex、队友的 Codex，都能进入同一个 Open Design 可视化画布，实时沟通、编辑、评审和协作。 AI设计，正式进入多人协作时代！ 感谢 Tuola Ge 制作这两支 AI 口播视频，为了留下一点。正式发布前，我们已经等不及邀请大家抢先加入团队内测，并为你和团队提供专属定制体验！ 名额有限，直接联系我们！ 设计不该再是少数人的专属技能。 在 AI 时代，它应该成为每个AI Native 团队的基础设施！

Tom Huang

86,817 views • 3 days ago

我的 UI 再也不会一股AI味了！ 本周 GitHub 最火的设计师项目： awesome-design-md，一周拿下 23k ⭐ Stars，迅速成为设计工具类开源爆款。 亮点一览： - 50+ 顶级产品设计规范 包括 Stripe、Notion、Linear、Figma、Apple 等，每个用 DESIGN.md 文件整理， 覆盖：颜色系统 字体与排版 间距、网格与布局 组件状态与 UI 规范 响应式断点 - 轻量、易用 不依赖 Figma 或复杂工具，普通 Markdown 就能使用 - 快速复用风格 一键套用顶级产品的视觉规则，保证 UI 一致性 - 提升团队效率 将设计语言结构化，减少设计与开发对齐成本，节省从零做设计系统的时间 对团队或独立开发者来说，这可能就是未来设计协作的参考模板。
0:31

我的 UI 再也不会一股AI味了！ 本周 GitHub 最火的设计师项目： awesome-design-md，一周拿下 23k ⭐ Stars，迅速成为设计工具类开源爆款。 亮点一览： - 50+ 顶级产品设计规范 包括 Stripe、Notion、Linear、Figma、Apple 等，每个用 DESIGN.md 文件整理， 覆盖：颜色系统 字体与排版 间距、网格与布局 组件状态与 UI 规范 响应式断点 - 轻量、易用 不依赖 Figma 或复杂工具，普通 Markdown 就能使用 - 快速复用风格 一键套用顶级产品的视觉规则，保证 UI 一致性 - 提升团队效率 将设计语言结构化，减少设计与开发对齐成本，节省从零做设计系统的时间 对团队或独立开发者来说，这可能就是未来设计协作的参考模板。

开发者Hailey

105,240 views • 3 months ago

UX 设计基础：学习指南 UX 设计入门教程汇总，来自全世界最著名的 UX 设计公司 NNgroup，内容包括： - UX 设计简介 - UX 设计哲学 - UX 设计规划和研究 - 用户界面（UI）设计 - 职业发展 英文的视频和图文教程（大家交口称赞的那些翻译插件终于有用了）。NNgroup 的工作比一般设计公司更注重理论、非常重视用户研究，所以他们的入门课程也偏原理、基础概念 适合从基础开始认真学 UX 设计的人，不适合上速成培训班很神奇地变成 UX 设计师的人 #设计入门 来个视频感受一下，这是 UX 设计入门的入门、被全世界人民问了几百万遍的问题：UX 设计和 UI 设计有什么差异？ 1/
3:15

UX 设计基础：学习指南 UX 设计入门教程汇总，来自全世界最著名的 UX 设计公司 NNgroup，内容包括： - UX 设计简介 - UX 设计哲学 - UX 设计规划和研究 - 用户界面（UI）设计 - 职业发展 英文的视频和图文教程（大家交口称赞的那些翻译插件终于有用了）。NNgroup 的工作比一般设计公司更注重理论、非常重视用户研究，所以他们的入门课程也偏原理、基础概念 适合从基础开始认真学 UX 设计的人，不适合上速成培训班很神奇地变成 UX 设计师的人 #设计入门 来个视频感受一下，这是 UX 设计入门的入门、被全世界人民问了几百万遍的问题：UX 设计和 UI 设计有什么差异？ 1/

倪爽

109,778 views • 3 years 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。 这类提示比“帮我美化一下页面”更容易得到稳定结果。
0:35

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

14,903 views • 2 months ago

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

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

爱丽丝呀！

260,647 views • 2 months 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% 的问题
1:15

分享下我在 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

173,520 views • 4 months ago

用 Codex 做 PPT，效果已经超出预期 它自带两个实用插件： ① ImageGen 先生成整套 PPT 视觉总览，白色商务、黑色科技、卡通风格都能快速尝试。 ② Presentations 根据大纲和设计方案，直接生成完整、可编辑的 PPTX。文字、图片、字体和组件都能继续修改 完整流程：Codex 写大纲 → ImageGen 定风格 → Presentations 出成品 特别适合学生做课程展示、职场人做工作汇报，以及不懂设计但经常需要做 PPT 的人 视频由Codex自动生成没有给它提供素材 看着很单调
1:29

用 Codex 做 PPT，效果已经超出预期 它自带两个实用插件： ① ImageGen 先生成整套 PPT 视觉总览，白色商务、黑色科技、卡通风格都能快速尝试。 ② Presentations 根据大纲和设计方案，直接生成完整、可编辑的 PPTX。文字、图片、字体和组件都能继续修改 完整流程：Codex 写大纲 → ImageGen 定风格 → Presentations 出成品 特别适合学生做课程展示、职场人做工作汇报，以及不懂设计但经常需要做 PPT 的人 视频由Codex自动生成没有给它提供素材 看着很单调

撸毛吃猪脚饭|上Gate玩事件合约

24,432 views • 1 month ago