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 万次安装说明一切。show more

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

发现个 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 的，这个必须试一下。 项目地址放评论区了👇show more

安装了这个之后，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 记得先收藏，免得之后找不到。show more

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

又在 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，无需复杂配置 目前工具仅支持通过本地安装部署使用，提供了详细的步骤说明，感兴趣的开发者可以看一下。show more

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

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

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

在 GitHub上发现一个能克隆任何网站的项目，已经斩获 2w+ star 一个 /clone-website 指令，AI 就会自动截图分析、提取精确的 CSS... 颜色和字体间距、探测点击和全屏滚动等交互状态，然后把整个网站逆向还原成干净的 Next.js 代码 支持 Claude Code、OpenCode、Codex、Cursor 等 13 个主流 AI 编程平台，底层用 shadcn/ui 设计系统，既好看又容易二次开发 用法也很简单： clone 模板 → npm install 装依赖 → 用 Cursor 打开项目，然后直接让 AI 帮你干活就行了show more

把你看过的书、长视频、播客，全部变成AI技能包！ 🔥 cangjie-skill 把你刷过的那些干货书、长视频、播客，它自动提炼成AI能直接调用、帮你干活的技能。 看完不再白看，不再忘光，而是立刻变成你的AI助手，工作、决策、写作时随时喊它上。 - 只提炼真正有用的干货（严格筛选） - 每个技能教你：什么时候用、怎么一步步做、注意什么坑... - 生成精华总结 + 可安装的Skill，一键扔进Claude/Cursor就能用 - 已经做好巴菲特、芒格、吴恩达、《孙子兵法》等超多实用包 知识终于不白费了，直接变生产力！show more

一键复刻大厂设计，这个开源项目有点东西。 awesome-design-md 把 Claude、Linear、Vercel、Stripe 这些顶级产品的设计语言，整理成 AI 可以直接读取的 DESIGN.md。 以前让... AI 做页面，最头疼的不是代码， 是你很难把“高级感”和“质感”准确说清楚。 现在可以直接把设计规则喂给 AI。 颜色、字体、间距、组件、层级、响应式，甚至连不该做什么都提前定义好了。 以前做页面靠反复试。 现在是先把风格定下来，再让 AI 开工。 👇show more

感觉 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️⃣ 开发一款考验反应速度的颜色配对游戏，限定时间内准确匹配颜色并获得分数。 以上示例仅供参考，实际效果可能不同。show more

卧槽，答案终于揭晓了！ 那个在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 的时间。 期待大家都能快速做出让人眼前一亮的作品！show more

之前还在吐槽 Codex 的 GPT 模型设计能力不行，昨天就在官方看到了一篇官方指南《Designing delightful frontends with GPT-5.4》... 非常值得一读，从核心原因与解决思路到4 大基础提示技巧还有实用设计规则/页面结构建议 最后还浓缩到了一个 frontend-skill 当中，$skill-installer frontend-skill 自动强制模型先写视觉论点、内容计划、交互论点再写代码。 当然有了这个 skill 也不是就完全了，只是提高了下限和品味基准。还有： * 推理调 Low 或 Medium * 一句话描述整体调性 * content plan * 参考图 * 设计 token 这些文中都有详细的描述，请大家自己认真读一下。 官方还提供了几个生成好的例子，都很棒，可以看看。show more

第一个使用 Claude 驱动的视频生成产品来了， Higgsfield 刚刚推出了 Vibe-Motion，由 Claude 模型驱动。 他们把... Vibe Coding 那套逻辑，直接放到了视频生成里。 以前做 AI 视频是把提示词写好，点生成，如果不满意还要改个词重来，之前的神态、光影全变了。 接入 Claude 后的 Higgsfield Vibe-Motion，直接把 AI 视频从生成器变成了编辑器，现在用它生成视频能够： 1. 深入理解创作意图：比如 “让这个视频看起来高端”，它能够自动调整几十个参数来匹配你的意图。 2. 实时掌握世界知识：比如你只要上传品牌素材，无需解释就能理解当前品牌参考、相关风格，自动应用到视频里。 3. 持续上下文：Claude 会记住你的对话，只需要对视频提出修改意见，能够自动推理你要修改哪个细节，不会把已经确定好的视频风格搞乱。 4. 更强大的一致性：通过 Claude 它能够自动推理出视频要修改的时间、布局、层级关系，自动维护视频的一致性。 Vibe Video 已来，先生成 Demo，再通过对话不断微调细节。show more

Claude Code 桌面板发布本地定时任务功能 设定好任务执行的频率，Claude 会在你电脑开着的时候自动执行，无需你每次手动触发。 比如：每周五下午，汇总本周进度，生成一份 Markdown 报告存到本地 有几个细节值得注意：... 任务第一次跑完之后，Claude 会自动重写你的 Prompt，记住具体该去哪里找文件、用哪些工具，下次会更准 可以开 Git Worktree 模式，每次运行在独立分支里，不会动你的主干代码 如果电脑在任务时间点刚好休眠了，App 重新打开后会自动补跑，并发通知 目前需要 Claude Pro 以上的付费订阅，桌面端专属，网页和手机暂不支持。 怎么用 在侧边栏点击 "Schedule"，再点 "+ New task" 就能创建一个定时任务。 也可以在任意会话里直接描述需求，比如"帮我设置一个每天早上9点执行的代码 review 任务"，Claude 会自动完成配置。show more

一个找产品灵感的方法，很多人还不知道： 第一步：去 Flippa Flippa 是一个专门买卖网站和 SaaS 的平台 上面挂着大量正在盈利的项目，而且数据公开 第二步：筛选月收入... $10,000+ 的项目 不用买，只看数据 这些项目已经验证了市场需求 第三步：让 AI 帮你分析 把项目的功能、定价、用户评价丢给 Claude 或 GPT 让它拆解： 核心需求是什么 哪些功能是多余的 哪些痛点没被解决 第四步：用 AI 做一个更好的版本 现在用 Cursor / Claude Code 搭一个 MVP 以前需要一个团队干几个月的事 现在一个人几周就能跑出来 本质上是： 用别人已经验证的需求 + AI 的开发速度 跳过"猜方向"这一步 你有没有在 Flippa 上看到过让你心动的项目？show more

Anthropic推出了一项新功能，叫做“提示词改器”（Prompt Console）。 Claude 会使用思路链推理等提示工程技术自动对提示词进行改进，优化你的提示词，让AI的回答更准确、符合预期。 这项功能的主要作用： 1. 自动优化提示词：通过提示词改进工具，开发者可以让Claude模型自动优化现有的提示词（即向AI模型提出的问题或要求），以提高模型回答的质量。例如，工具会增加一个“链式思维”环节，让Claude在回答之前先有条理地思考问题，确保回答更精准。 2. 标准化和丰富示例：工具可以把提示中的示例转成统一的格式，比如XML格式，这样Claude更容易理解和处理。... 3.示例增强：对现有示例进行自动补充，使其与结构化后的提示更加契合，包括增加链式思维的逻辑过程。 4.重写：对提示进行重写，明确其结构，并纠正小的语法或拼写错误，以提高提示的质量和易读性。 5.预填充：在Claude的助理消息中预填充内容，帮助引导Claude的行为，并确保输出格式符合需求。 一旦新提示生成，你还可以向Claude提供反馈，说明什么有效，什么不起作用，以进一步改进提示。 实际效果：根据Anthropic的测试数据，使用提示词改进工具后，模型的准确率在多标签分类任务中提升了30%，并且在摘要任务中能够100%完全遵循字数要求。show more

前端开发者在使用 Cursor、Windsurf 等 AI 开发工具时，有时候需修改 UI 界面的样式颇为麻烦，需要准备告诉 AI 具体元素位置相关信息。... 给大家推荐 stagewise 这款开源工具，它提供了一个浏览器工具，让我们能直接在网页上选择元素并添加评论。 然后帮助我们将元素截图、DOM 结构等关键信息一键发送给 Cursor 等 AI 助手进行处理。 GitHub： 主要功能： - 直接在浏览器中选择任意 UI 元素并发送给 AI 助手； - 自动连接 VS Code 扩展，无需额外配置； - 支持多种前端框架：React、Vue、Next.js、SvelteKit 等； - 可通过自定义插件系统扩展功能； - 提供 DOM 元素、截图和元数据给 AI 代理； - 不会影响应用的打包体积，仅在开发模式下生效。 对于前端开发工程师，如果有在使用 Cursor 这些 AI 开发工具，不妨搭配这款工具使用试试。show more

md2wechat 突破 3k star！这次我决定把给项目做宣传片这件事，做成了一个开源 skill。 项目基于 hyperframes skill ，HyperFrames... Motion Director 可以把 README、文章、产品介绍、官网内容，转成一条中文竖版宣传片。 制作流程事先定宣传片方向：讲什么、怎么拍、每一屏放什么字、需要什么画面。 确认后，再生成画面、制作动效、截图检查和交付。 适合开源项目、独立产品、工具发布。 欢迎大家试试，推荐 在 Codex 中使用，它会调用 Image Gen 制作素材，目前实测质感更好：show more