登录社区云,与社区用户共同成长
邀请您加入社区
郝子旭(组长):2026-06-07 至 2026-06-08:Figma 风格、Tailwind、桌面端重构、多智能体会话、浮窗体验、前端迁移。
Penpot是一款拥有47,000+ GitHub星标的免费开源设计工具,正在挑战Figma的市场地位。其核心优势包括:支持私有化部署,让用户完全掌控数据;采用开放标准存储设计文件(SVG/HTML/JSON等);原生支持设计转代码,可实时查看CSS/SVG代码;内置Design Tokens实现设计系统统一管理;提供MCP Server接口实现AI集成和自动化流程。虽然插件生态不及Figma丰富
FigmaMCP是一个将Figma设计稿转换为JSON数据的工具,需要配合AI编码工具(如TreaAI)使用。使用时需提供Figma设计稿地址和Token,通过特定提示词触发转换。获取Token需在Figma账户设置中生成,而设计稿地址可在Dev模式下从地址栏获取。示例提示词详细说明了前端开发要求,包括使用React、TypeScript等技术栈,以及组件结构和编码规范。该工具能有效提升设计稿到代
Penpot是一款47000星的开源设计工具,提供Figma的替代方案,核心优势在于数据自主可控。它支持自部署,满足金融、医疗等行业的数据合规要求,设计文件采用SVG、CSS等开放格式存储。特色功能包括"设计即代码"理念、原生支持CSS Grid/Flex布局、Design Tokens统一管理设计参数,以及MCP Server实现AI与设计工程化结合。虽然插件生态不及Figma丰富,但对注重数据
UXbotUXbot是从需求描述到完整多页面可交互App界面和可交付前端代码的AI全链路工具,也是原型工具中最适合产品快速验证想法的解决方案。与传统原型工具不同,UXbot不是让设计师手工绘制原型,而是让产品经理或产品设计师用自然语言描述需求,AI自动生成结构化的产品逻辑图和完整的多页面可交互原型。这意味着:需求讨论时间从"1周修改稿件"压缩到"2小时看到完整原型"。UXbot生成的原型不是静态图
从需求到原型、从原型到代码,AI应用生成工具正在重新定义企业级应用的交付流程。UXbot通过流程画布、一次性多页面系统生成、以及Web/iOS/Android三端代码同时导出的能力,让企业能够快速构建复杂的多页面系统——不再是数月的漫长周期,而是数周的可控交付。流程画布让用户先规划系统架构再生成代码,避免了传统对话式工具的反复迭代一次性生成完整多页面系统,而不是逐页提示生成支持Web、iOS、An
Figma Make 网页版是 Figma 官方推出的在线代码生成平台,无需安装插件即可直接在浏览器中使用。它能够将 Figma 设计文件自动转换为高质量的前端代码,支持 React、Vue、HTML/CSS、Tailwind CSS、Next.js、Nuxt.js、Svelte 等多种技术栈。网页版核心优势:无需安装:直接在浏览器中使用,跨平台兼容实时协作:多人同时编辑和预览代码云端存储:项目自
这是专门面向 Codex 的本地 DeepSeek 路由说明,提供了英文、中文和日文三个版本,并配了截图,详细讲了提供商路由前提、Codex 提供商侧的配置方式,以及本地路由接管的几种典型用法。自从 CC Switch 开始支持 Codex 模型管理之后,我就把所有的 Agent 工具管理托管给了 CC Switch,今天用来切模型的时候,发现这货又更新了,迭代速度相当快。模型目录、认证信息、本地
方案1:像"照相":- 拍一张照片(生成 JSON)- 打印出来(转成 Figma 文件)- 你看着照片改邮件本- 改完了要重新拍一张照- 效率低下 ❌方案2:像"视频通话":- Cursor 和 Figma 实时连接- Cursor 说"改成红色",Figma 立刻变红- Figma 中改了什么,Cursor 实时看到- 无缝协作 ✅。
《智能协作平台深度评测:七大维度实测揭示真实效率边界》 本文通过严格测试验证了一款AI协作平台的核心性能。在多人实时编辑场景下,平台展现出毫秒级同步能力和优秀的冲突处理机制;模板克隆功能可在数秒内生成完整可运行的项目环境;图文混合编程功能可准确识别设计草图并生成规范代码(准确率约80%)。批量文件处理能智能分析文件关联并自动修正资源路径,AI对话可转化为结构化Markdown知识文档。核心引擎支持
从设计稿到原生应用代码的完全自动化已经不再是幻想,而是现实。对于需要同时发布iOS和Android的团队来说,选择合适的代码生成工具能带来2-3倍的效率提升。如果需要同时发布iOS和Android原生应用,UXbot是目前市场上唯一的完整解决方案。如果已有完整的开发团队,GitHub Copilot和IDE内置的AI能力可以显著加速编码过程。如果有设计师但缺工程师,UXbot能直接把设计转化为可运
Figma Make 是 Figma 推出的 AI 原型生成工具。一句话需求↓AI理解需求↓自动生成界面↓生成交互逻辑↓得到可运行原型例如输入:创建一个共享单车管理后台,包含车辆列表、运营统计、用户管理和兑换码系统。页面结构导航菜单表格布局数据卡片用户交互流程甚至还能模拟部分真实操作。从 Photoshop 到 Sketch,再到 Figma Design,设计工具经历了从单机到协作的演变。而 F
Figma MCP 使用指南摘要 Figma MCP(Model Context Protocol)是连接设计稿与代码的桥梁,让AI能直接读取结构化设计数据生成代码。相比传统手动还原方式,它能实现: 精准提取设计变量、布局结构 自动生成适配指定框架的代码 支持设计与代码双向同步 通过Code Connect维护设计系统一致性。
腾讯推出AI设计协作平台Ardot,突破传统AI设计工具局限,实现从自然语言到可编辑矢量设计稿的一站式生成。其核心创新在于:1)矢量原生输出保证设计稿天然可编辑;2)通过MCP协议实现设计稿到多端代码的一键转换;3)兼容Figma文件无损导入;4)支持多人实时协同编辑。该平台打通了产品设计到开发落地的全流程,解决了AI设计工具"生成即终点"的行业痛点,将于2026年5月18日开放公测。
摘要: VTJ.PRO作为AI代码生成工具,显著提升前端开发效率,尤其擅长将Figma设计稿转化为Vue代码。其多模态输入支持、增量更新机制和模糊匹配容错性,有效减少手动调整工作量。内置40+工具链确保代码质量,但复杂交互和极端样式仍需人工干预。测试显示,流式响应速度快,渲染性能优异,自定义LLM配置可适配企业规范。适用于标准化页面搭建,核心业务逻辑建议人工把控。综合来看,VTJ.PRO是提升开发
回顾一下,我们做原型的目的是什么?不是为了交付一张图,而是为了验证逻辑、统一认知、降低沟通成本。初级PM:用Figma画静态图,告诉开发“长什么样”。高级PM:用状态机梳理逻辑,告诉开发“怎么流转”。AI时代的PM:用自然语言指挥AI生成可交互原型,自己专注于**“设计最自然的交互动作”**(如:是滑动调节音量,还是按压调节?哪种更符合人体工学?交互设计的起点,从来不是屏幕,而是人体。
本文介绍了一个Figma插件,通过提取设计稿的结构化信息并利用Claude AI生成自然语言描述,解决设计与开发间的沟通断层问题。插件采用三层架构:UI层、主线程处理层和Claude API层,核心是递归遍历Figma节点树提取布局、样式等关键信息,转换为结构化JSON后发送给Claude生成面向开发者的描述。文章详细说明了节点信息提取策略、Prompt工程技巧,以及解决大页面token超限、sa
2026年AI生成UI界面工具基本分成两种做法:一条是底层大模型直接跨界,靠写代码跑出UI(Claude Design、Stitch);另一条是设计师吃饭的家伙,传统设计协作平台自己内置的AI(Figma、Pixso),谁更适合设计师UI工作流?
步骤1:获取Figma文件ID。步骤3:AI生成的完整代码。示例3:生成基础按钮组件。然后在系统环境变量中设置。步骤2:编写详细提示词。示例1:查看所有文件。示例2:提取颜色系统。列出可用的MCP工具。
摘要: Anthropic推出Claude Design工具,通过自然语言交互实现设计原型生成与修改,72小时内导致Figma市值蒸发12亿美元。该工具支持自动构建设计系统、多格式导入导出、团队协作等功能,将设计流程从"工具操作"转变为"意图描述"。Anthropic已形成从设计到开发的产品闭环,而Figma面临AI依赖竞争对手、范式转移等结构性威胁。Cla
本文介绍了前端设计工具Figma和MasterGo的基础使用。首先阐述了设计工具的价值,包括解决信息分布问题、提升团队协作效率等,并梳理了设计工具的演变历程。接着详细讲解了Figma的基本操作,如创建Frame、添加元素、使用Auto Layout布局和创建组件。随后对比了MasterGo的本地化功能和AI生成页面等特色。最后介绍了从设计原型到代码转换的多种方式,强调设计工具能提升开发效率和用户体
FigmaToCode是一款开源Figma设计转代码插件,通过四阶段流程将设计稿转换为标准前端代码。核心流程包括:1)节点转换阶段提取Figma原生节点并导出结构化JSON数据;2)中间表示层生成阶段转换为可控的AltNodes虚拟节点;3)布局优化阶段预处理AutoLayout等容器结构;4)代码生成阶段适配HTML/React/Svelte等框架输出最佳实践代码。插件采用节点矩形化、GROUP
本文介绍了D2C(Design to Code)技术,重点分析了图生码和插件生码两种主流方案。图生码通过AI模型将视觉稿转换为前端代码,依赖IR中间协议;插件生码则通过Figma API直接生成代码,结构化程度更高。文章对比了Anima、Builder.io等主流工具的特点,指出插件生码更适合B端场景。同时提出了完整的Figma to Code实现方案,包括标注规范和转换流程,强调通过标准化组件标
Anthropic的CPO三天前从Figma董事会辞职,三天后直接发布竞品Claude Design——Figma当天暴跌7%,从IPO高点已跌85%。两个月前还是合作伙伴,现在直接掀桌子。AI不是要帮设计师,是要绕过设计师。
这基本上就是目前我在实际干活时对AI UI工具的全部摸底了。AI不是让设计师消失,它是把“画界面”这件事变得没那么繁琐了。但工具终究是工具,哪个适合你自己?还是得自己建个项目去跑跑才知道。
Figma+AI 的本质是。
在Figma中直接使用AI生成页面,核心是通过外部AI工具与Figma API或MCP协议桥接,实现从设计到代码或从描述到设计的自动化。和。以下是基于当前技术生态的完整操作方法。
本文介绍 Claude Code 搭配 Figma MCP 实现设计稿智能转代码的实战方法,讲解 MCP 工作原理,对比并详解官方与非官方两种 Figma MCP 配置流程。通过提取设计系统、生成卡片组件、转换登录页面等案例,演示从 Figma 设计自动生成 React、Tailwind 等规范代码。同时提供提示词优化、设计稿规范、问题排查、Design Tokens 集成及团队协作与自动化落地建
本文详细介绍了如何从零开始搭建Claude Code与Figma的连接工作流,实现设计修改时自动生成前端代码的功能。教程包含7个关键步骤:安装Claude Code(需先安装Cursor编辑器)、接入API(推荐使用国内GLM4.6模型)、下载配置CC Switch工具、启动Claude Code、连接Figma MCP、安装Figma插件,以及常见报错解决方案。作者特别提示使用国内API更经济实
最近,你可能看到设计师使用AI工具生成UI、构建组件,甚至直接在Figma中创建完整的设计系统。这不仅仅是另一个生产力技巧。这是设计工作发生方式的根本性转变。我们正在从:手动创建组件转变为 →。
不,这段我编的光伏出力特别大,刚好够负荷还剩一点,但因为不允许卖给电网,所以储能继续躺平,大电网买的电几乎为0;当然,要是想要更复杂的模型,比如多母线环网、多个储能、允许弃电卖给电网、考虑分布式电源的出力不确定性(那就是鲁棒优化或者随机优化了,混合整数线性规划的框架还能用,只是加几个鲁棒变量或者场景),代码里改改就行,我的整个程序注释特别详尽,每一行甚至每一段都有中文解释,还有两篇参考文献:一篇是
任务:利用AI+Figma还原1张你觉得好的页面案例:12306车票购买页面工具1:stitch(工具2:google aistudio(由于stitch可以import as figma,所以首选stitch去还原,但是感觉它不够“智能”,所以直接转战google aistudio。以下是分别是使用过程。一、google aistudio第1轮对话:提示词:这是12306APP中的车片购买页面,
是由Google Labs 推出的一款原生AI 设计工具。它通过将自然语言提示、手绘线框图或界面截图,自动转化为可编辑的用户界面,并生成可用于生产环境的前端代码,从而打通设计与开发之间的流程断层。
讽刺的是,2025年10月,谷歌云和Figma刚宣布扩大合作,将更多生成式AI技术(包括Anthropic和谷歌模型)集成到Figma平台中。“你如何创建它,你将如何使用它,每次需要时你会看到多少现成的内容,以及你对某种一致的用户体验的渴望——是的,这一切都将改变。中间可以设计过渡效果和交互效果 ,可以看到不同屏幕的“状态”,例如已登录和未登录状态的视图,也可以直接分享链接给其他人。讽刺的是,就在
用Trae+MCP+Figma开发了2个小项目后,我最大的感受是:AI不是替代开发者,而是帮我们解放双手,把重复、繁琐的工作(如设计稿转代码、样式还原)交给工具,我们可以专注于更有价值的逻辑开发、体验优化。Trae+MCP+Figma的组合,彻底改变了我以往“设计稿转代码”的低效模式,让应用开发变得更高效、更轻松。MCP作为连接AI与外部工具的桥梁,让Trae的AI智能体拥有了“动手能力”,而Fi
好吧,最近我的信息流简直是疯了。如果你这周打开过X或LinkedIn,你应该知道我在说什么:“Figma已死”、“Google刚刚杀死了设计”、“是时候更新你的LinkedIn了,UX设计师们”。罪魁祸首是谁?是Google实验室的一个实验性工具,本质上是一个AI驱动的“描述你想要什么,我们来构建”的机器。作为一个和利益相关者争论过无数次按钮内边距以及那个蓝色是否真的符合品牌调性的人,我必须深入了
Figma 的 Make Design 和国内的 Pixso AI 谁更适合工作流?AI生成的 UI 稿能不能继续编辑交付开发?这篇文章实际测试了这两个工具,顺便把提示词、生成过程、效果差异和使用成本全部摊开说一遍。
到了2026年,这些主流的原型设计、UI设计工具,大部分团队基本上都挨个尝试过了。其实团队选工具这事也没有标准答案,用顺手了比什么都重要。建议根据自身的协作方式、项目复杂度、成本容忍度,或者对AI设计链路的需求方面去衡量和选择。除了一些主流的设计工具,其他没有提到的小众工具也可以自由尝试,找到适合自己和团队的才是好的工具。
Abaqus轮轨瞬态动力学分析。考虑簧上质量-全轮对-轨道的轮轨瞬态滚动显式动力学模型。考虑计算区域网格细化,提供inp文件。在铁路工程领域,轮轨瞬态动力学分析对于研究列车运行时轮轨之间的相互作用至关重要。今天咱就唠唠基于Abaqus软件的轮轨瞬态动力学分析,这里要考虑簧上质量 - 全轮对 - 轨道这样的轮轨瞬态滚动显式动力学模型,还要注意计算区域网格细化,并提供inp文件。
四矢量 SVPWM 算法通过选择合适的四个基本电压矢量来合成期望的电压矢量。它的核心思想是利用空间矢量的概念,将逆变器的开关状态与空间中的电压矢量对应起来,通过合理地选择和组合这些矢量,使得逆变器输出的电压波形尽可能接近正弦波。该算法通过对六相系统进行解耦处理,将其分解为三个独立的三相子系统。这样,就可以分别对每个三相子系统进行 PWM 控制,从而提高系统的控制性能和稳定性。该算法通过在三相调制波
UXbot,Framer AI,Uizard,Galileo AI这几款工具比较