别再手动切图！用 ClaudeCode+Figma-MCP 实现 UI 设计 1:1 前端还原

优质文章学习记录

— 1 min read

使用 Figma-MCP 实现设计还原

Figma-MCP（Measure Copy Paste）是 Figma 的插件，能够快速提取设计稿中的间距、颜色、尺寸等参数，避免手动测量。安装后选中元素即可查看属性，按 Alt 键复制数值，直接粘贴到代码中。

配置 ClaudeCode 生成代码

ClaudeCode 是 Claude 的代码生成功能，支持根据设计参数输出前端代码。在对话中描述需求并附上 Figma-MCP 提取的数据，例如：

生成一个 React 按钮组件，参数如下： - 宽度：120px - 高度：40px - 背景色：#3B82F6 - 圆角：8px - 文字："提交" - 字体大小：14px

自动布局与响应式处理

Figma 的 Auto Layout 属性可通过 Figma-MCP 提取，ClaudeCode 可将其转换为 CSS Flex/Grid 代码。提供父子容器关系和间距参数，生成响应式布局代码：

容器属性： - 方向：垂直 - 子元素间距：16px - 内边距：24px

样式变量同步

提取 Figma 的颜色、字体等样式变量，通过 ClaudeCode 生成 CSS/Sass 变量定义：

颜色变量： - 主色：#3B82F6 - 文字色：#1F2937 字体变量： - 主字体：Inter, 16px

交互动效还原

从 Figma 原型中提取过渡时间和缓动函数，生成 CSS Transition 或动画代码：

悬停效果： - 背景色变化：#3B82F6 → #2563EB - 过渡时间：0.2s - 缓动函数：ease-in-out

代码验证与优化

将生成的代码与设计稿逐像素对比，使用浏览器开发者工具调整细节。对于复杂组件，分模块生成代码后再组合，确保最终效果与设计稿一致。

Read more

AIGC实战——CycleGAN详解与实现

AIGC实战——CycleGAN详解与实现

AIGC实战——CycleGAN详解与实现 * 0. 前言 * 1. CycleGAN 基本原理 * 2. CycleGAN 模型分析 * 3. 实现 CycleGAN * 小结 * 系列链接 0. 前言 CycleGAN 是一种用于图像转换的生成对抗网络(Generative Adversarial Network, GAN)，可以在不需要配对数据的情况下将一种风格的图像转换成另一种风格，而无需为每一对输入-输出图像配对训练数据。CycleGAN 的核心思想是利用两个生成器和两个判别器，它们共同学习两个域之间的映射关系。例如，将马的图像转换成斑马的图像，或者将苹果图像转换为橙子图像。在本节中，我们将学习 CycleGAN 的基本原理，并实现该模型用于将夏天的风景图像转换成冬天的风景图像，或反之将冬天的风景图像转换为夏天的风景图像。 1. CycleGAN 基本原理 CycleGAN 是一种无需配对的图像转换技术，它可以将一个图像域中的图像转换为另一个图像域中的图像，而不需要匹配这两个域中的图像。它使用两个生成器和两个判别器，其中一个生成器将一个域中的图像

VSCode + Copilot下：配置并使用 DeepSeek

以下是关于在 VSCode + Copilot 中，通过 OAI Compatible Provider for Copilot 插件配置使用 DeepSeek 系列模型 (deepseek-chat, deepseek-reasoner, deepseek-coder) 的完整汇总指南。 🎯 核心目标 通过该插件，将支持 OpenAI API 格式的第三方大模型（此处为 DeepSeek）接入 VSCode 的官方 Copilot 聊天侧边栏，实现调用。 📦 第一步：准备工作 在开始配置前，确保完成以下准备： 步骤操作说明1. 安装插件在 VSCode 扩展商店搜索并安装 OAI Compatible Provider for Copilot。这是连接 Copilot 与第三方模型的核心桥梁。2. 获取 API
低代码的天花板：一个完备低代码平台的架构全景

低代码的天花板：一个完备低代码平台的架构全景

目录 一、为什么必须讨论“低代码的天花板” 二、从工具到平台：低代码能力跃迁的本质 三、适用领域的天花板 （一）数据中心型开发 （二）流程中心型开发 （三）二者统一的架构挑战 四、复杂度分层与兜底策略 （一）简单业务的高效处理 （二）复杂业务的分步实施与回退机制 五、Low Code × Pro Code 的混合模型 （一）混合模型的核心概念 1. Low Code 模块（LC） 2. 中间表示层（IR） 3. Pro Code 模块（PC） 4. 运行时环境（Runtime） （二）实现要点与技术细节 1. 中间表示层（IR）