本文面向内容创作者，系统整理了可实际使用的 MCP（Model Context Protocol）工具清单，涵盖做图、视频、语音配音、剪辑字幕、设计衔接和音乐六大场景。作者推荐 Sunra（聚合多家图片/视频/音频模型）、Magnific、ElevenLabs（配音）、Palmier Pro 和 DaVinci Resolve MCP（剪辑）、Figma MCP（设计）等，并提醒避开 Midjourney、Suno 等非官方第三方封装的 MCP。文中还给出安装方法、费用说明及五个常见踩坑提醒：认准官方网址版、注意账户余额、保护授权密钥、区分 Skill 与 MCP、先装一个用熟。
文章介绍了如何解决 AI 做图风格不统一的问题：将视觉风格沉淀为一份 visual-rules.md 规则文件，作为唯一规则源（Single Source of Truth）。作者详细讲解了如何从视觉资产中反推出包含品牌识别、颜色、字体、版式、图形元素等九大类的 Visual Rules，并演示如何将同一份规则分别应用于 ChatGPT（直接读取执行）、Skill（封装为长期能力和执行流程）和 Figma（映射为 Variables、Styles、Components 和 Templates）。当视觉体系需要更新时，只需修改源文件再同步到各工具端，避免在多个工具中分别维护规则，实现跨工具一致的视觉输出。
七年经验的产品经理总结了用 AI（豆包工作 + Skill）画原型的 8 种方法：对话直接出原型、手绘草图转原型、截图复刻再改、网址复刻再改、代码复刻原型、PRD 生成原型、通过 MCP 写入 Figma/Pencil/墨刀等设计工具、生图模型直接出效果图。文章按输入起点分类讲解各方法的适用场景与操作技巧，并给出按起点和场景的选择指南。相比传统设计工具拖拽画原型的流程，新方法将一个页面的绘制时间从半天压缩到几分钟，并可通过公开链接直接分享评审，大幅提升产品经理的效率。
本文介绍了一套将 Figma 设计稿高保真还原到既有前端工程的 Agent 自动化流程。作者总结了五类高频还原问题：设计语义丢失、多页面样式不统一、标注与真实界面混淆、素材导出策略模糊、旧页面局部改造被全量覆写。解决方案包括：通过项目级规范、知识索引和错误情况补充构建实现约束层；采用双层组件映射（语义判断 + 真实 API 确认）提升组件复用率至接近 100%；推行标注前缀协议与三类素材标签；引入时间戳版本快照机制避免循环中重复拉取设计数据以降低成本；并建立统一视口、状态流转、固定数据等五重比对前提，形成六步视觉闭环流程，最终差异率低于 0.15 阈值，还原度超过 90%。
Archify 是一个近期登上 GitHub Trending 榜首、Star 超 5.3 万的开源 Skill，主要功能是将文字内容输出为带动画、可交互、可导出的独立 HTML 文件。作者深度体验两天后总结出两大用法：一是把复杂文字变成有层级、有主线的视觉简图，作为文章配图，并可导入 Figma 或 Illustrator 替换字体配色以统一视觉风格；二是为文章、视频和社交媒体制作动态素材，支持导出 PNG、SVG、WebM，或通过录屏展示交互流程配合口播讲解复杂机制。作者认为这两点对内容创作者非常有用，并欢迎分享更多创意用法。
作者正在开发一款硬件设计工具，被称为“硬件领域的 Figma”。本文是第 6 天的构建日志，重点研究了透明外壳设计：探讨外壳厚度、折射、色调、磨砂玻璃、光学层以及从小开口到凸透镜等多种窗口形状对设备内部可视性的影响。目标是让透明度也实现参数化，让设计者可以控制硬件展示内部组件的方式，使设备内部成为设计的一部分。整个工具完全在网页端实时运行，未来还将包含发布等更多功能，不仅是美学工具。
本文是 Codex 实战教程，作者以「一页」阅读打卡小程序为例，完整演示从零到发布微信小程序的流程：先用 Figma 确定页面设计，可通过 Codex 生成 SVG 草案再导入 Figma 制作可点击原型；再通过 Figma MCP 让 Codex 读取设计稿，按 WXML、WXSS、JavaScript 技术栈生成微信原生小程序代码；随后导入微信开发者工具模拟运行、调试报错；最后手机预览、上传体验版并提交审核发布。文章面向零代码基础的读者，强调只需写清楚提示词和提供设计稿，无需看懂代码即可完成开发。
工程师 Matt Dailey 分享如何避免 AI 生成的设计沦为千篇一律的“slop”。他提出七个实践方法：1) 从整体约束出发进行设计，借鉴 Christopher Alexander 的《Notes on the Synthesis of Form》，避免打地鼠式修补；2) 主动删除 Agent 过度添加的冗余元素；3) 在 Figma 等专业设计工具中迭代，避免代码库中的原型引力；4) 使用组件库保持视觉一致性；5) 利用 preview deploy 用真实数据验证设计；6) 收集优秀产品截图作为参考与上下文；7) 通过反复实践和反思培养个人设计品味。文章强调用 AI 做设计需保持人的判断力与整体思维。
介绍开源工具 designlang，只需一条命令即可从任意网站提取 17 个以上的界面设计文件，包括 Tailwind 配置、Figma 变量、shadcn 主题，以及供 v0 或 Cursor 使用的提示词。工具还能分析四个断点下的响应式表现、悬停点击状态、无障碍对比度，并对整站设计一致性打分。提供演示 Demo，贴网址即可观看设计系统被逐步提取，过程可录像分享。适合想学习优秀网站设计语言或为老项目补充设计规范的开发者，比手动在开发者工具中逐个查找元素省事得多。
SpaceXAI 设计师 John Bai 分享了使用 Grok Bot AI 设计代理进行设计的经验。他组建了一支 AI 代理团队：Figma Bro 处理 Figma 中的重复性生产工作，Motion God 帮助原型化交互动效，Experiments 将模糊想法快速变为可感知的原型，Devbot 解答工程问题。文章通过 Mac 刘海栏 Bot、角色动画调优、批量生成设计资产三个案例，说明 AI 代理没有取代设计工具，而是收紧了设计循环：让设计师更早落地想法、更快获得反馈，把更多注意力放在版本之间的判断上。
Relate Studio 联合创始人 Alex 的教程，讲解如何利用 Claude 从 Figma 手绘草图生成自定义精美图形动画。流程包括：收集参考（如 Stripe 官网）、用自然语言提示词让 Claude 生成 three.js 粒子动画代码、在 Figma 中绘制图形并导出 SVG 交给 Claude 分析重建、通过截图反馈迭代修复 bug、将代码适配到 Webflow 等框架并调整参数、优化过渡平滑度，最终无需前端工程知识即可规模化构建整套动画效果。
本文是 Figma 对潘通色彩研究所（PCI）副总裁 Laurie Pressman 的介绍，探讨品牌如何运用色彩心理学传递信息、引领趋势。色彩源于自然的联想（如黄色代表阳光与快乐、蓝色象征可靠），并受文化、经济与地域差异影响。文章以可口可乐、Airbnb 换色、Charli XCX 的 Brat Green 为例，说明成功的品牌色彩需反映品牌内核，并强调在设计之初就要考虑材质与媒介对色彩呈现的影响。
本期周刊探讨了 Figma Agent Skills 生态成型，设计经验现可被封装复用；Figma 实验证明 AI 能提速 20%。此外涵盖 iOS 27 视觉更新、Instagram 换标风波、DeepSeek Harness 发布，以及多款动效与素材工具推荐，最后分析了 AI 原生 UI 组件库与交互细节。
This article provides a step-by-step guide to transforming Kimi K3, Moonshot AI's flagship model, into a design agent capable of working across Figma, Blender, Playwright, and GitHub using Model Context Protocol (MCP) servers. It covers setting up Kimi Code CLI, configuring MCP servers for each tool, and integrating them to enable the agent to build, visually inspect, and correct its own work. The tutorial includes installation commands, configuration snippets, and testing tips, culminating in a workflow where the agent can execute complex multi-tool tasks autonomously.
本文介绍了 Codex 与 Figma 结合的 AI 产品开发工作流。通过 Figma MCP 连接两者，实现了从需求梳理、设计生成到代码开发及浏览器验证的闭环。文章详细讲解了如何利用 Codex 进行需求分析和代码编写，以及如何在 Figma 中进行双向协作与设计评审，大幅降低了产品原型开发的门槛。
本文介绍了一款开源的产品经理原型生成 Skill。作者为了解决现有 AI 原型工具“修改即重绘”的痛点，消耗约 1 亿 Token 开发了该 Skill。它遵循专业的产品流程（IA推导、设计规划、Figma 输出），通过硬性约束规则确保设计的可控性与去 AI 味，支持 Codex、Cursor 等环境。
文章探讨了 Claude 结合 Figma 如何解决网页设计中最难的部分：从“想法”到“执行”的转化。作者指出，AI 极大地提高了从规划、文案到代码生成的效率，使得一个人就能完成以前需要一个团队的工作。文章强调，未来的核心竞争力不再是单纯的编码或绘画能力，而是人类的审美品位、指导 AI 的能力以及快速交付的速度。
文章探讨了 2026 年产品设计师角色的转变，即从传统的像素推动者转变为利用 Agent 进行生产的规划者。作者详细阐述了新的工作流程（80% 规划，20% 执行），并提出了设计师应首先构建的四类核心文件：strategy.md（策略）、design.md（视觉规范）、CLAUDE.md（结构规范）和 product-pulse routine（反馈循环）。文章指出，通过编写这些高质量的文档和规范，设计师可以更有效地指挥 Agent 完成设计与开发，极大地缩短交付周期。
文章探讨了 Anthropic 推出的 Claude Design 对设计行业，特别是 Figma 构成的巨大挑战。Claude Design 摒弃了传统的空白画布模式，转而采用“意图优先”的设计逻辑。它不仅通过自动化减少了繁琐的机械操作，缩短了迭代周期，还内置了设计系统一致性维护能力。这种从“工具”到“系统”的转变，降低了非设计师进行高质量设计的门槛，迫使设计工作流的核心从“如何执行”转向“如何清晰表达意图”。
作者记录了30天完全不使用 Figma，转而完全依赖 Claude 进行设计和开发的实验。文章详细阐述了从第一周如何像资深设计师一样精准提示词，到第二周体验无摩擦的极速迭代循环，再到第三周让 AI 接管配色、排版等决策过程。虽然 Claude 在复杂响应式布局和动画上仍有局限，但作者发现这种直接生成代码的方式极大提升了交付效率，并在 23 天内交付了以往需要数月才能完成的工作量。
Anthropic 发布了 Claude Design，这是一款由 Claude Opus 4.7 驱动的革命性设计工具。实测显示，它能从模糊需求出发，通过多轮对话直接生成可交互的高保真原型及 React 代码。不同于 Figma 等传统画布工具，Claude Design 以 AI 为生成核心，支持自检自纠和多方案探索。这将大幅提升非设计师的产出效率，重塑设计工作流，并对传统设计工具行业带来巨大冲击。
