Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

AI 做网页终于不再一股“紫色渐变初创风”了。 Anthropic 官方出了一个 Claude Code 技能：Frontend Design，GitHub 已有 13.6 万星标，专门让 AI 先确定审美方向，再生成前端页面。 安装方法： 1. npx skills add --skill frontend-design 2. 描述你要的网站或组件 3. 选择风格 4. Claude 搞定排版、配色、动效和构图 一次安装，所有会话可用。兼容 Claude Code、Cursor、Codex、Gemini CLI、OpenCode 等 15+ 工具。 100% 开源，由 Anthropic 维护。数周内 41.8 万次安装说明一切。

Crypto_QianXun's profile picture

千寻｜AI 分享 🌸

78,193 subscribers

47,612 görüntüleme • 21 gün önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

AI 写的前端，一眼就能看出来。 廉价感，通用模板味，配色像系统默认。 Taste Skill 专门治这个。 装上之后让 Cursor 或者 Claude Code 写页面，排版、配色、字体全变了——看起来像是有人类设计师参与过的东西。 一条命令安装，兼容 Cursor、Claude Code、v0、Lovable。 GitHub 快20k stars，开源免费。 🔗 你让 AI 写的前端，有没有丑到自己都不好意思给人看的时候？
0:16

AI 写的前端，一眼就能看出来。 廉价感，通用模板味，配色像系统默认。 Taste Skill 专门治这个。 装上之后让 Cursor 或者 Claude Code 写页面，排版、配色、字体全变了——看起来像是有人类设计师参与过的东西。 一条命令安装，兼容 Cursor、Claude Code、v0、Lovable。 GitHub 快20k stars，开源免费。 🔗 你让 AI 写的前端，有没有丑到自己都不好意思给人看的时候？

Vincent

71,722 görüntüleme • 1 ay önce

发现个 Claude Code 的神级 Skill，画图颜值真的吊打 Mermaid 和 fireworks-tech-graph，只要你一句话，它直接给你吐出生产级别的 SVG+PNG 技术图。 最绝的是它有 7 种神仙画风：深色终端风、工程蓝图风、毛玻璃风，甚至还能模仿 OpenAI 和 Claude 的官方配色风格。 支持 14 种 UML 图，像 RAG 架构、多智能体协作这种复杂图，一句"帮我画个 RAG 架构图，深色风格"直接搞定。 安装贼简单，一行命令 `npx skills add yizhiyanhua-ai/fireworks-tech-graph` 就能装到 Claude Code 里，输出 SVG 方便二次编辑，高清 PNG 直接贴文档。 平时写技术文档、做汇报 PPT 的，这个必须试一下。 项目地址放评论区了👇
0:18

发现个 Claude Code 的神级 Skill，画图颜值真的吊打 Mermaid 和 fireworks-tech-graph，只要你一句话，它直接给你吐出生产级别的 SVG+PNG 技术图。 最绝的是它有 7 种神仙画风：深色终端风、工程蓝图风、毛玻璃风，甚至还能模仿 OpenAI 和 Claude 的官方配色风格。 支持 14 种 UML 图，像 RAG 架构、多智能体协作这种复杂图，一句"帮我画个 RAG 架构图，深色风格"直接搞定。 安装贼简单，一行命令 `npx skills add yizhiyanhua-ai/fireworks-tech-graph` 就能装到 Claude Code 里，输出 SVG 方便二次编辑，高清 PNG 直接贴文档。 平时写技术文档、做汇报 PPT 的，这个必须试一下。 项目地址放评论区了👇

Vincent

119,523 görüntüleme • 2 ay önce

安装了这个之后，Claude Code 的体验会完全不一样。 Anthropic 悄悄发布了一个官方插件，叫 claude-code-setup，它基本把 Claude Code 从“还不错的工具”变成了一个真正的 AI 开发环境。 它会扫描你的项目，并推荐： → hooks（钩子） → skills（技能） → MCP servers → subagents（子代理） → automations（自动化） 然后一步一步帮你把这些都配置好。 大多数人现在用的都是“原生版”的 Claude Code…… 这也是为什么他们的体验会显得有点混乱。 真正的强大之处，其实来自它周围的生态。 安装方式： /plugin install claude-code-setup@claude-plugins-official 记得先收藏，免得之后找不到。
0:13

安装了这个之后，Claude Code 的体验会完全不一样。 Anthropic 悄悄发布了一个官方插件，叫 claude-code-setup，它基本把 Claude Code 从“还不错的工具”变成了一个真正的 AI 开发环境。 它会扫描你的项目，并推荐： → hooks（钩子） → skills（技能） → MCP servers → subagents（子代理） → automations（自动化） 然后一步一步帮你把这些都配置好。 大多数人现在用的都是“原生版”的 Claude Code…… 这也是为什么他们的体验会显得有点混乱。 真正的强大之处，其实来自它周围的生态。 安装方式： /plugin install claude-code-setup@claude-plugins-official 记得先收藏，免得之后找不到。

huangserva

243,897 görüntüleme • 1 ay önce

把 design-dna 的 skill 开源了，现在你可以把你喜欢的风格通过这个 skill 转为 json 的风格文件。再把你的内容（文本 / 素材）丢给 ai 就能将你的内容变成对应的风格 安装 npx skills add zanwei/design-dna 测试结果如下，在两次 prompt 内完成👇
0:17

把 design-dna 的 skill 开源了，现在你可以把你喜欢的风格通过这个 skill 转为 json 的风格文件。再把你的内容（文本 / 素材）丢给 ai 就能将你的内容变成对应的风格 安装 npx skills add zanwei/design-dna 测试结果如下，在两次 prompt 内完成👇

zanwei.guo

24,601 görüntüleme • 3 ay önce

用Codex + 小耳👂Jane｜Xiaoer 的claude-skill-web-clone skill 10min 复刻了一下 Sac 的个人网站 复刻流程： 1. Codex 安装 claude-skill-web-clone 2. 跟Codex说 用 web-clone 复刻这个网站： 然后里面的Sac全部改成木马人 ，人物图片换成附件的图片 效果如下：
0:13

用Codex + 小耳👂Jane｜Xiaoer 的claude-skill-web-clone skill 10min 复刻了一下 Sac 的个人网站 复刻流程： 1. Codex 安装 claude-skill-web-clone 2. 跟Codex说 用 web-clone 复刻这个网站： 然后里面的Sac全部改成木马人 ，人物图片换成附件的图片 效果如下：

木马人

17,049 görüntüleme • 11 gün önce

用 Claude Skills 创建一个简单的 Agent 真的太简单了 人人都能创建自己的 Agent 大军，我这里搞了一个 Nano Banana Pro PPT 生成 Skills 基于任何文档生成 PPT，支持风格选择、页数自定义 生成后会导出图片文件以及帮你生成一个全屏预览的网页 也可以作为整个图文混排 Agent 体系的一个部分
0:17

用 Claude Skills 创建一个简单的 Agent 真的太简单了 人人都能创建自己的 Agent 大军，我这里搞了一个 Nano Banana Pro PPT 生成 Skills 基于任何文档生成 PPT，支持风格选择、页数自定义 生成后会导出图片文件以及帮你生成一个全屏预览的网页 也可以作为整个图文混排 Agent 体系的一个部分

歸藏(guizang.ai)

34,472 görüntüleme • 6 ay önce

大部分人用 Claude Code 其实是在裸跑 打开项目，直接问它改代码、写功能、修bug。能干活，但工作流全靠手动组织 Anthropic 最近出了个官方插件叫 claude-code-setup，做的事情挺简单的：扫描你的项目结构和依赖，然后推荐你应该配哪些东西 具体来说它会建议你装： -适合你项目的 MCP servers -可以复用的 skills -自动触发的 hooks -拆分任务用的 subagents -常用的 slash commands 相当于它帮你把 Claude Code 从一个"什么都能干但什么都要你自己安排"的工具，变成一个针对你这个项目定制过的AI开发环境 之前这些配置全靠自己摸索，哪些 MCP 好用、hooks 怎么写、subagents 怎么拆，都要一个个试。现在至少有个起点了 不是说它推荐的就一定全对，但比从零开始配要省不少事 用 Claude Code 的可以试试，尤其是项目已经有一定规模的
0:17

大部分人用 Claude Code 其实是在裸跑 打开项目，直接问它改代码、写功能、修bug。能干活，但工作流全靠手动组织 Anthropic 最近出了个官方插件叫 claude-code-setup，做的事情挺简单的：扫描你的项目结构和依赖，然后推荐你应该配哪些东西 具体来说它会建议你装： -适合你项目的 MCP servers -可以复用的 skills -自动触发的 hooks -拆分任务用的 subagents -常用的 slash commands 相当于它帮你把 Claude Code 从一个"什么都能干但什么都要你自己安排"的工具，变成一个针对你这个项目定制过的AI开发环境 之前这些配置全靠自己摸索，哪些 MCP 好用、hooks 怎么写、subagents 怎么拆，都要一个个试。现在至少有个起点了 不是说它推荐的就一定全对，但比从零开始配要省不少事 用 Claude Code 的可以试试，尤其是项目已经有一定规模的

Vincent | 信号＞噪音

21,388 görüntüleme • 27 gün önce

现在用AI做视频可以跟喝水一样简单，不需要再付个700多块的剪映SVIP， 装这6个2026 年最顶的插件和skills就够了， 链接直接丢给你的AI Agent（Claude Code、Cursor、Hermes、OpenClaw 等等）让他们安装就， 老规矩6个安装链接🔗以及使用建议评论区自取⬇️
0:10

现在用AI做视频可以跟喝水一样简单，不需要再付个700多块的剪映SVIP， 装这6个2026 年最顶的插件和skills就够了， 链接直接丢给你的AI Agent（Claude Code、Cursor、Hermes、OpenClaw 等等）让他们安装就， 老规矩6个安装链接🔗以及使用建议评论区自取⬇️

AYi

195,246 görüntüleme • 15 gün önce

又在 GitHub 上发现一个专为快速构建 Web 应用的强大 AI 编程助手：Claudable。 将本地 CLI 终端编程 Agent，如 Claude Code、Gemini CLI、Qwen Coder、Cursor 等，与 Lovable 结合。 只需使用自然语言简单描述一下想法，就能瞬间生成完整的 Next.js 应用，并且可在编辑器里实时预览效果。 GitHub： 主要功能： - 支持多种 AI 编程 Agent，包括 Claude Code、Cursor CLI、Gemini CLI 等 - 自然语言描述想法，即可生成生产级 Next.js 应用 - 实时预览功能，改动代码可实时查看结果 - 具备自动错误检测和修复，提升开发效率 - 集成 Supabase 数据库，支持用户认证和数据存储 - 生成的 Web 应用，支持一键部署到 Vercel，无需复杂配置 目前工具仅支持通过本地安装部署使用，提供了详细的步骤说明，感兴趣的开发者可以看一下。
0:13

又在 GitHub 上发现一个专为快速构建 Web 应用的强大 AI 编程助手：Claudable。 将本地 CLI 终端编程 Agent，如 Claude Code、Gemini CLI、Qwen Coder、Cursor 等，与 Lovable 结合。 只需使用自然语言简单描述一下想法，就能瞬间生成完整的 Next.js 应用，并且可在编辑器里实时预览效果。 GitHub： 主要功能： - 支持多种 AI 编程 Agent，包括 Claude Code、Cursor CLI、Gemini CLI 等 - 自然语言描述想法，即可生成生产级 Next.js 应用 - 实时预览功能，改动代码可实时查看结果 - 具备自动错误检测和修复，提升开发效率 - 集成 Supabase 数据库，支持用户认证和数据存储 - 生成的 Web 应用，支持一键部署到 Vercel，无需复杂配置 目前工具仅支持通过本地安装部署使用，提供了详细的步骤说明，感兴趣的开发者可以看一下。

GitHubDaily

11,926 görüntüleme • 10 ay önce

Refero Styles：给AI Agent用的前端设计参考网站。 1. 输入网站名，或扔一个 URL ，自动提取网站的设计风格，形成DESIGN.md文件。 2. 收录ElevenLabs、Apple、Linear、Cursor、Stripe、Raycast等大量优质网站Design文档。 3. 提供了一个Refero MCP，收录了大量真实产品的截图和完整用户流程，让AI Agent 写代码前，先搜索、研究参考 我觉得第三条有点牛，安装测试下先。 网站见评论区
0:12

Refero Styles：给AI Agent用的前端设计参考网站。 1. 输入网站名，或扔一个 URL ，自动提取网站的设计风格，形成DESIGN.md文件。 2. 收录ElevenLabs、Apple、Linear、Cursor、Stripe、Raycast等大量优质网站Design文档。 3. 提供了一个Refero MCP，收录了大量真实产品的截图和完整用户流程，让AI Agent 写代码前，先搜索、研究参考 我觉得第三条有点牛，安装测试下先。 网站见评论区

向阳乔木

22,074 görüntüleme • 2 ay önce

卧槽，刚发现一个 Claude Code 的增强工具！让 Claude Code 对话完全可视化！ 📊 2D 时间线视图 - 对话历史一目了然 🎯 智能跳转 - 快速定位优质 Prompt 学习 📁 一键导出 - JSON/Markdown 格式都能支持 安装只需一行命令： npm install -g Visual Studio Code-is-cheap/show-me-the-talk 不仅代码是开源的，连每个功能是怎么指挥 AI 写出来的Prompt 也开源了，你也能只用 3 天就开发一个类似的 CLI 工具 功能演示：
0:15

卧槽，刚发现一个 Claude Code 的增强工具！让 Claude Code 对话完全可视化！ 📊 2D 时间线视图 - 对话历史一目了然 🎯 智能跳转 - 快速定位优质 Prompt 学习 📁 一键导出 - JSON/Markdown 格式都能支持 安装只需一行命令： npm install -g Visual Studio Code-is-cheap/show-me-the-talk 不仅代码是开源的，连每个功能是怎么指挥 AI 写出来的Prompt 也开源了，你也能只用 3 天就开发一个类似的 CLI 工具 功能演示：

奇迹☆魔法少女

19,068 görüntüleme • 1 yıl önce

卧槽，兄弟们，这个牛P啊 真是个伟大发明啊！ 你让 Claude 帮你写了一个网页，但是想精准定位修改某一个地方，很难向AI描述出来 这个工具非常牛逼 安装后，你只需要： 1、点击任何网页元素 2、添加备注说明（如“这个按钮太小了”、“这个文字拼错了”） 工具自动捕获以下信息： 元素名称（class） CSS 选择器 元素坐标（位置） 元 素上下文（所在组件、文件路径等） 然后生成结构化的 Markdown 给你，你复制粘贴给AI就行，它就能精准知道你想修改什么👇
0:16

卧槽，兄弟们，这个牛P啊 真是个伟大发明啊！ 你让 Claude 帮你写了一个网页，但是想精准定位修改某一个地方，很难向AI描述出来 这个工具非常牛逼 安装后，你只需要： 1、点击任何网页元素 2、添加备注说明（如“这个按钮太小了”、“这个文字拼错了”） 工具自动捕获以下信息： 元素名称（class） CSS 选择器 元素坐标（位置） 元 素上下文（所在组件、文件路径等） 然后生成结构化的 Markdown 给你，你复制粘贴给AI就行，它就能精准知道你想修改什么👇

小互

198,577 görüntüleme • 5 ay önce

给大家推荐一个超好用的VS Code插件，可以直接在浏览器中使用Claude Code、Codex CLI 和 Copilot。 并且可以直接在网页上选择任意'组件', 在网布中与本地的AI模型对话进行调整 这下再也不用担心AI看不懂我希望他改哪块地方了
0:15

给大家推荐一个超好用的VS Code插件，可以直接在浏览器中使用Claude Code、Codex CLI 和 Copilot。 并且可以直接在网页上选择任意'组件', 在网布中与本地的AI模型对话进行调整 这下再也不用担心AI看不懂我希望他改哪块地方了

Truman

30,351 görüntüleme • 9 ay önce

兄弟们这个功能好 Claude Code 新加了 /recap 命令 当你把终端切到后台，过一会儿再切回来，Claude Code 会自动在顶部显示一段这个会话刚才干了什么、下一步打算做什么的回顾。 怎么用 什么都不用改，升级到最新版 Claude Code 就自动开了。 触发条件：会话至少 3 个 turn + 距离上次完成 turn 过了至少 3 分钟 + 终端当前失焦 后台生成：失焦期间就在后台算好，切回来立刻看到，不再等 不会刷屏：同一个窗口连续切走切回不会重复生成 recap 能手动触发：/recap 任何时候打一下都能给一段当前状态摘要 可关可配：/config 里开关，或用环境变量 CLAUDE_CODE_ENABLE_AWAY_SUMMARY=0 关掉
0:10

兄弟们这个功能好 Claude Code 新加了 /recap 命令 当你把终端切到后台，过一会儿再切回来，Claude Code 会自动在顶部显示一段这个会话刚才干了什么、下一步打算做什么的回顾。 怎么用 什么都不用改，升级到最新版 Claude Code 就自动开了。 触发条件：会话至少 3 个 turn + 距离上次完成 turn 过了至少 3 分钟 + 终端当前失焦 后台生成：失焦期间就在后台算好，切回来立刻看到，不再等 不会刷屏：同一个窗口连续切走切回不会重复生成 recap 能手动触发：/recap 任何时候打一下都能给一段当前状态摘要 可关可配：/config 里开关，或用环境变量 CLAUDE_CODE_ENABLE_AWAY_SUMMARY=0 关掉

小互

19,842 görüntüleme • 2 ay önce

Remotion skills 太强了，在 Claude Code 一句话生成可编辑的动画视频。 这个过程只花了几分钟，太惊艳了。方法也非常简单，一共分为以下几步： 1、下载 remotion skills npx skills add remotion-dev/skills 选择在 claude code 中使用 2、在 claude code 中直接使用 提示词：调用remotion-best-practices这个 skill 帮我生成新年拜年的动画视频 然后 cc 就会自动帮我用 skills 生成可编辑的动画视频了，甚至可以直接导出视频。
0:13

Remotion skills 太强了，在 Claude Code 一句话生成可编辑的动画视频。 这个过程只花了几分钟，太惊艳了。方法也非常简单，一共分为以下几步： 1、下载 remotion skills npx skills add remotion-dev/skills 选择在 claude code 中使用 2、在 claude code 中直接使用 提示词：调用remotion-best-practices这个 skill 帮我生成新年拜年的动画视频 然后 cc 就会自动帮我用 skills 生成可编辑的动画视频了，甚至可以直接导出视频。

苍何

58,198 görüntüleme • 5 ay önce

Anthropic官方发布的技术分享视频 相对全面的一个Claude使用指南，从基础到高级应用，不同阶段的开发者都可以学习参考 涵盖Claude Code、MCP、Vibe Coding、Prompting、构建AI agent，还有针对学生如何使用Claude的讲解 视频内容有16节约7小时 #Claude #Claude使用教程
0:12

Anthropic官方发布的技术分享视频 相对全面的一个Claude使用指南，从基础到高级应用，不同阶段的开发者都可以学习参考 涵盖Claude Code、MCP、Vibe Coding、Prompting、构建AI agent，还有针对学生如何使用Claude的讲解 视频内容有16节约7小时 #Claude #Claude使用教程

AIGCLINK

16,198 görüntüleme • 11 ay önce

Remotion 推出这个面向 Claude Code 的 视频制作 Agent Skills 不错 只需输入你的需求Claude Code 便可以制作一个完整的宣传小视频给你 我要求Claude code 根据它对我的了解，调用 Remotion 技能帮我生成一个小视频... 这个比较简单，但是官方的演示的很炫酷，需要再研究下怎么弄。 有谁懂这个？带带我？
0:15

Remotion 推出这个面向 Claude Code 的 视频制作 Agent Skills 不错 只需输入你的需求Claude Code 便可以制作一个完整的宣传小视频给你 我要求Claude code 根据它对我的了解，调用 Remotion 技能帮我生成一个小视频... 这个比较简单，但是官方的演示的很炫酷，需要再研究下怎么弄。 有谁懂这个？带带我？

小互

58,487 görüntüleme • 5 ay önce

玩了一下 HeyGen 今天发布的 Skills, 一行代码就可以把网页变成视频，太强了，以后网站发布必须带视频了 安装：$ npx skills add heygen-com/hyperframes 使用：/website-to-hyperframes 你的网址 我用的是之前分享的【美股&加密市场看板】brief. day1global. xyz
0:19

玩了一下 HeyGen 今天发布的 Skills, 一行代码就可以把网页变成视频，太强了，以后网站发布必须带视频了 安装：$ npx skills add heygen-com/hyperframes 使用：/website-to-hyperframes 你的网址 我用的是之前分享的【美股&加密市场看板】brief. day1global. xyz

Star@Day1Global Podcast

28,679 görüntüleme • 2 ay önce

感觉 Google 现在开窍了，先进的 Gemini 模型也不藏着掖着只给收费用户或者门槛很高的 AI Studio 里面用，现在免费用户也可以在 Gemini 官网上使用 Gemini 2.5 Pro 并使用 Canvas 工具，直接可以预览生成的代码，当然有一定次数限制。 另外网上对 Gemini 2.5 Pro 的编程能力好评很多，很多评价觉得超过 Claude 3.7 Sonnet 的，在 Cursor 中可以直接使用 Gemini 2.5 Pro。 给了几个用 Gemini 2.5 Pro 制作的可以直接 Canvas 预览的示例，看起来效果不错： 1️⃣ 用p5js设计一款万花筒，它能根据你的鼠标移动生成迷人的对称图案。 2️⃣ 你侄女随手写下的歌词，拍张照片就能变成一首简单、有趣的歌曲，陪她一起用钢琴弹奏出来吧。 3️⃣ 制作一个经典的街机小游戏：你操控屏幕底部的挡板，弹射小球去击碎上方一排排的砖块。 4️⃣ 开发一款考验反应速度的颜色配对游戏，限定时间内准确匹配颜色并获得分数。 以上示例仅供参考，实际效果可能不同。
0:15

感觉 Google 现在开窍了，先进的 Gemini 模型也不藏着掖着只给收费用户或者门槛很高的 AI Studio 里面用，现在免费用户也可以在 Gemini 官网上使用 Gemini 2.5 Pro 并使用 Canvas 工具，直接可以预览生成的代码，当然有一定次数限制。 另外网上对 Gemini 2.5 Pro 的编程能力好评很多，很多评价觉得超过 Claude 3.7 Sonnet 的，在 Cursor 中可以直接使用 Gemini 2.5 Pro。 给了几个用 Gemini 2.5 Pro 制作的可以直接 Canvas 预览的示例，看起来效果不错： 1️⃣ 用p5js设计一款万花筒，它能根据你的鼠标移动生成迷人的对称图案。 2️⃣ 你侄女随手写下的歌词，拍张照片就能变成一首简单、有趣的歌曲，陪她一起用钢琴弹奏出来吧。 3️⃣ 制作一个经典的街机小游戏：你操控屏幕底部的挡板，弹射小球去击碎上方一排排的砖块。 4️⃣ 开发一款考验反应速度的颜色配对游戏，限定时间内准确匹配颜色并获得分数。 以上示例仅供参考，实际效果可能不同。

宝玉

85,267 görüntüleme • 1 yıl önce