别再手动切图！用 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

开源分享：AI Agent Skills 资源合集，一键安装 Cursor/Claude Code/Copilot 技能包

前言 最近在使用 Cursor 和 Claude Code 进行开发，发现 Agent Skills 这个功能非常强大——它可以让 AI 更专业地完成特定任务，比如代码审查、生成 Git Commit、自动生成测试用例等。 但网上的资源比较零散，于是我整理了一个开源合集分享给大家。 项目地址 GitHub：https://github.com/JackyST0/awesome-agent-skills 什么是 Agent Skills？ Agent Skills 是 AI Agent 可以发现和使用的指令、脚本和资源包。 简单来说，就是给 AI 一套「技能说明书」，让它知道如何更专业地帮你完成工作。 比如： * 代码审查 Skill：AI 按照最佳实践审查代码，给出改进建议

Stable Diffusion WebUI终极指南：从零开始掌握AI绘画神器

Stable Diffusion WebUI终极指南：从零开始掌握AI绘画神器 【免费下载链接】stable-diffusion-webuiStable Diffusion web UI 项目地址: https://gitcode.com/GitHub_Trending/st/stable-diffusion-webui Stable Diffusion WebUI是当前最受欢迎的AI绘画工具之一，它为用户提供了直观的Web界面来使用Stable Diffusion模型生成高质量图像。这款开源工具基于Gradio库构建，支持txt2img、img2img、inpainting等多种生成模式，让用户无需编写复杂代码即可体验先进的AI绘画技术。 🚀 快速入门：一键安装与配置 Stable Diffusion WebUI提供了极其简单的安装方式。对于Windows用户，只需下载预打包版本并运行webui-user.bat即可。Linux用户可以通过以下命令快速安装： # Debian/Ubuntu系统 sudo apt install wget git python3 pyth
如何在PPT 中嵌入 VR 图片？如何在PPT中插入全景图片或Google相机空间图片进行播放？霹雳设计助手 VR 功能实操指南

如何在PPT 中嵌入 VR 图片？如何在PPT中插入全景图片或Google相机空间图片进行播放？霹雳设计助手 VR 功能实操指南

在产品展示、场景讲解、教学演示等诸多场景中，VR 图片凭借 360° 全视角的展示特性，能让观众获得沉浸式的视觉体验，相比普通图片和视频更具表现力。 但在传统的 PPT 演示中，想要展示 VR 图片却存在诸多不便，往往需要通过录屏、跳转浏览器或第三方软件的方式实现，操作流程的割裂不仅影响演示的连贯性，也让 VR 图片的沉浸式体验大打折扣。 霹雳设计助手的插入 VR 功能，实现了将 VR 图片直接嵌入 PPT 并在其中完成 360° 交互预览与放映的需求，无需切换外部软件，让 VR 图片的展示真正融入 PPT 演示流程。 本文将以实操为核心，详细讲解该功能的兼容特性、使用流程、功能操作及实操技巧，帮助不同领域的从业者快速掌握在 PPT 中嵌入和展示 VR 图片的方法，让沉浸式展示变得简单高效。 一、功能核心兼容特性与适用场景 在使用插入
【UAV】基于PX4+Ubuntu24.04.3的无人机制作的开发环境搭建

【UAV】基于PX4+Ubuntu24.04.3的无人机制作的开发环境搭建

一、PX4 1.1 简介 PX4 是一款由瑞士苏黎世联邦理工学院（ETH）计算机视觉与几何实验室的 PIXHAWK 项目演变而来的开源自动驾驶仪飞行栈。以下是关于它的详细简介： * 基本信息 * 开源性质：PX4 由 PX4 开发团队和全球贡献者共同维护，基于宽松的 BSD 3 条款许可证，可自由使用和修改，也允许用于专有产品。 * 起源与发展：项目最早可追溯到 2009 年，2012 年 3 月首次发布，经过多年发展，由来自工业界和学术界的世界级开发人员不断完善。 * 主要特点 * 高度模块化：采用基于端口的架构，所有功能可分为可交换和可重复使用的模块，开发者可根据需求定制和替换不同组件，便于功能扩展和重新配置。 * 可扩展性强：支持多种类型的载具，包括飞机（多旋翼、固定翼和垂直起降）、地面车辆、水下潜航器等，还提供了丰富的硬件选择，适用于各种设备控制器、传感器和其他外围设备。