34-Figma-项目组件库搭建与整理-组件命名规范-组件放置位置

billycoder billycoder 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 3k累计阅读 3k平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄17年
关注
VIP免费 原创 最新推荐文章于 2026-09-27 14:19:36 发布 3k 阅读 AI 写同款· GEO 优化 ›
用LLM自动识别UI设计稿并批量切图：坐标映射与Python脚本全实践 多模态大模型正在改变UI设计与前端交付的传统流程。通过视觉理解能力，模型可以识别设计稿中的图层边界、元素类型与层级关系，将原本依赖人工框选的切图工作转化为结构化输出。其核心原理在于让模型在虚拟坐标系中返回元素位置，再通过比例换算映射回原始高清图，由Python脚本完成精确裁切与多倍率导出。这种协作模式充分发挥了LLM在语义理解和命名上的优势，同时规避了像素级定位的短板，在图标、卡片等中等尺寸元素识别上表现稳定，显著提升了从设计稿到前端资源的转换效率。该方法适用于电商详情页、后台Dashboard、移动端设置 阅读详情

34-Figma-项目组件库搭建与整理-组件命名规范-组件放置位置

1. 组件命名规范

在这里插入图片描述

页面/类型/具体名称

2.组件放到统一页面中

在这里插入图片描述

3.组件和实例之间跳转

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VqIxoQe1-1643002740506)(34-Figma-项目组件库搭建与整理.assets/image-20220123170627605.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z899yubC-1643002740506)(34-Figma-项目组件库搭建与整理.assets/image-20220123170650960.png)]

4.组件共享

最低0.47元/天 解锁文章
标签
#css3 #figma #ui设计
连接器与MCP有什么区别？从设计稿到APP的完整链路解析 在AI应用搭建平台中，连接器与MCP是容易混淆却又缺一不可的概念。连接器（Connector）是应用运行时的数据通道，负责持久化读写数据库、调用API；MCP（Model Context Protocol）则是构建期的模型上下文协议，让AI生成代码时能读取真实表结构、设计稿信息。理解两者分工，是打通“设计稿→数据模型→页面生成→运行时数据绑定”完整链路的关键。在Workbuddy等平台中，正确配置数据库MCP与连接器，能实现一键生成可运行的APP，并精准定位页面生成或数据连接中的异常。本文以最小闭环为例，拆 阅读详情

相关推荐

Codex+Relay：移动端AI全栈开发从原型到交付的完整链路

AI编程正从单点代码生成走向全流程工程化，移动端全栈开发的核心挑战也早已不是模型能力，而是如何将设计原型、工程约束与验收标准组织成可执行的链路。本文以Relay原型图为起点，系统拆解如何借助Codex作为工程执行主体，完成前端生成、后端接口开发、联调检查，并通过质量门禁与CI/CD流水线实现可交付状态。从组件化命名、设计令牌到上下文投喂与会话策略，再到自动化测试与性能清单，这套方法论覆盖了AI驱动全栈开发的完整闭环，适用于React Native与Node.js技术栈的团队，为把AI编程从Demo推进到真实

weixin_33811539的博客 405

数据科学文章封面图设计实战指南：提升Medium点击率与策展通过率

在数据科学内容传播中，封面图远不止是装饰，而是决定算法识别、策展审核与读者决策的关键元数据。其本质是技术概念的视觉翻译器，需兼顾人类视觉认知规律（如具象隐喻优于抽象图表）与平台分发机制（如Medium的三重算法初筛）。高质量封面图应具备高信息密度、强问题指向性及移动端首屏适配性，尤其要规避代码截图、学术公式图等常见负向信号。通过隐喻型、过程型、对比型三类主流图式，结合像素级参数控制（1200×630px、文字占比＜15%、JPEG Q92），可系统性提升打开率与话题匹配度。本文聚焦Featured Imag

weixin_30247307的博客 418

Vibe Coding：大模型时代的工程节奏与提示词契约体系

Vibe Coding 并非新框架或工具，而是面向大模型辅助开发所演进的新型工程范式，其本质是通过感知—裁剪—流动三阶段重构开发者决策节奏。它根植于提示工程的工业化升级，强调技术栈锁定、边界防御与可验证交付等刚性契约条款，将模糊需求转化为可复现、可验证、可协作的代码产出。该范式已在 Next.js 14、Tailwind CSS 和 Streamlit 等主流技术栈中形成成熟实践路径，显著提升 PR 通过率、Lighthouse 性能分与团队知识复用效率，适用于登录页开发、数据看板构建、表单验证等高频前端工

weixin_33796205的博客 295

Markdown图片插入原理与工程实践：路径、Base64、可访问性全解析

Markdown中的图片并非静态嵌入，而是一个依赖路径解析、HTTP加载与HTML渲染的动态过程。其核心是`![]()`语法触发解析器生成`<img>`标签，真正决定显示效果的是`src`地址类型（相对路径/绝对URL/Base64/HTML内联）及其在不同环境（VS Code预览、GitHub Pages、Jekyll、Obsidian）下的解析基准差异。理解这一原理，才能系统规避404、跨域拦截、SEO失效和可访问性缺失等高频问题。Base64虽能离线保真，但体积膨胀33%；`alt`文本实为图像语义身

cumo3681的博客 619

豆包AI新建对话的3种方法与底层机制解析

在大模型应用中，‘新建对话’远不止是界面操作，而是涉及会话生命周期管理、上下文隔离与模型状态初始化的核心技术动作。其本质是触发不同层级的状态重置——UI容器、会话元数据或模型上下文窗口，直接影响token预算分配、系统角色继承与多设备同步一致性。尤其在处理合同、医疗报告、财务数据等强上下文依赖场景时，错误的新建方式易导致信息残留、角色混淆与响应质量下降。本文基于真实调试日志与API逆向分析，详解豆包AI三种新建路径的技术差异、适用边界及安全隔离策略，帮助用户从‘能用’迈向‘精用’。

weixin_33860553的博客 384

AI设计效率翻倍：三大Skill工作流实战解析

在AI辅助设计不断普及的今天，掌握基础工具已不足以拉开竞争力。设计工作流中真正产生效率差距的，是围绕AI设计沉淀出的结构化技能包——Skill。它不同于传统提示词的单次指令，而是将复杂设计任务拆解为AI可执行的标准化流程，通过约束输出格式与思考框架，让结果稳定且可复用。这种工作流方法不仅能将模糊需求拆解为清晰设计简报，还能从参考图中提取设计规范，甚至将设计稿转化为开发可直接落地的文档。以三个实战技能为例——设计需求拆解器、视觉规范提炼器、交付物自检清单——展示从需求输入到最终交付的完整工程化路径。在团队协作

weixin_33796177的博客 256

11个可落地的AI增效工作流：前端开发者实战指南

AI增效工作流是将人工智能技术嵌入真实开发场景，实现重复任务自动化、决策过程结构化、知识沉淀显性化的工程实践方法。其核心原理在于用确定性规则替代经验依赖，通过工具链集成打通数据采集、内容生成、视觉呈现与效果追踪闭环。技术价值体现在可量化的时间压缩（如单任务耗时降低37%以上）、错误率下降及跨角色协同效率跃升。典型应用场景覆盖竞品监控、无障碍检测、会议纪要结构化、技术文档叙事转化等前端高频需求。本文聚焦Browse AI、Simplified、Notion AI等11个经8个月真实项目验证的工具组合，强调可持

wgyyh 404

AI智能体如何重塑自动化测试：从脚本生成到智能分析的工程实践

自动化测试是软件工程中保障质量、提升交付效率的关键实践，其核心原理是通过脚本模拟用户操作或系统交互，对软件功能进行验证。随着大模型技术的发展，其强大的代码生成、自然语言理解和逻辑推理能力为自动化测试带来了新的技术价值，能够将模糊的测试需求自动转化为可执行用例，并对失败结果进行智能根因定位。这极大地拓展了自动化测试的应用场景，使其从传统的脚本录制回放，升级为能够理解需求、自适应维护的智能系统。本文以测试脚本生成和失败分析为切入点，深入探讨了如何利用大模型与智能体（Agent）技术，构建具备需求理解、代码生成与

weixin_33716941的博客 444

Figma：项目管理与版本控制在Figma中的应用_2024-07-22_01-55-58.Tex

在Figma中，项目结构是设计团队组织和管理设计资源的基础。一个项目可以包含多个文件，而每个文件又可以包含多个页面和框架。这种层次结构使得团队成员能够清晰地定位和访问所需的设计元素。

793

【信息科学与工程学】计算机科学与自动化 第二百零一十一 软件开发模型01

编号类型模型领域模型中的知识点/因素/参数关联知识和法律法规1传统顺序模型瀑布模型 (Waterfall)通用软件开发、硬件紧密耦合系统、政府/军工项目、需求稳定的传统信息系统严格线性阶段：可行性研究→需求分析（SRS，含功能/非功能/接口/约束，使用IEEE 830模板）→系统设计（概要设计HLD：架构、模块划分、数据库ER图；详细设计LLD：伪代码、类图、接口定义）→实现（编码规范、代码审查、静态分析工具SonarQube）→测试（单元测试JUnit、集成测试、系统测试、验收测试UAT，测试计划提前编写

weixin_49199313的博客 167

小红书x-mini签名逆向实战：Frida动态Hook与算法还原

在移动App协议分析中，请求签名机制是保障接口安全的核心技术，其本质是客户端对请求参数、时间戳、设备指纹等要素进行加密认证的过程。理解签名原理需掌握Native层加密流程、JNI调用机制及密钥动态派生逻辑。Frida作为主流动态插桩工具，能绕过符号剥离、字符串加密和控制流混淆等反分析手段，在函数执行瞬间捕获寄存器状态、内存数据与调用上下文，实现签名算法的完整还原。该技术广泛应用于合规内容监测、API自动化调用与竞品协议研究等工程场景。本文聚焦小红书x-mini签名这一典型样本，详解从JNI_OnLoad定位

weixin_31264565的博客 463

【Maxwell16.0】实战指南：从DXF导入到MotorCAD联合仿真的关键技巧

本文详细解析了Maxwell 16.0与MotorCAD进行联合仿真的核心流程与关键技巧。重点阐述了从DXF模型导入、几何修复、一极一槽模型剪裁，到坐标系对齐、MotorCAD参数匹配及结果验证的全过程，旨在帮助工程师高效打通联合仿真链路，规避常见错误，提升电机设计效率。

weixin_29062865的博客 720

PC微信逆向) 读取内存联系人链表

首先从一些网络上搜索到的信息可以得出联系人列表是保存在内存里的，并且是全局变量不会被释放，所以我们可以通过搜索某个联系人的信息来定位

Qwertyuiop2016的博客 2921

lidar360 V8.0 & lidar360MLS V8.0雷达点云数据处理软件

机载林业 — 基于机载激光雷达点云数据提取一系列森林结构参数（如：高度分位数、叶面积指数、郁闭度等），分割单木并提取单木参数（包括树的位置、树高、胸径、枝下高、冠幅等属性），利用软件的多种回归分析功能可以结合地面调查数据反演森林生物量、蓄积量等功能参数。还可以生成等高线、山体阴影、坡度、坡向、粗糙度等多种产品。分类 — LiDAR360提供多种分类功能，包括地面点分类、模型关键点分类、选择区域地面点分类、机器学习模型分类（可高效地分离建筑、植被、路灯等通用类别）、深度学习模型分类、自定义深度学习分类等。

2403_83796253的博客 5156

FC7300 SPI MCAL配置引导

Example - QMI8A01z外设：Example - QMI8A01z外设：

舊梦的博客 260

（功能安全六）硬件FMEDA计算

FMEDA（故障模式、影响与诊断分析）是功能安全验证的核心方法，通过量化分析硬件故障模式及其影响，计算SPFM、LFM、PMHF等关键指标。分析过程包含六大步骤：计算元器件失效率、识别故障模式、评估安全机制诊断覆盖率、分类计算各类失效率、量化指标计算及设计优化。输入需要系统架构图、硬件故障模式清单等资料，输出安全指标达标情况及改进建议，确保设计满足ASIL等级要求。该方法通过系统化的故障分类和量化评估，为硬件安全设计提供科学依据。

Dayongger的博客 1454

Python全栈入门到实战【进阶篇 1】类与对象：面向对象编程的基石

Python中定义类使用**class关键字**，创建对象使用**类名()**（类似调用函数），语法简洁，我们从最基础的空类开始，逐步拆解。class# 定义空的学生类，pass表示占位，无实际内容 class Student : pass编码规范：类名遵循大驼峰命名法（每个单词首字母大写，无下划线），如StudentCarPhone，这是Python官方推荐的PEP8规范，便于区分类和其他标识符。实例方法必须定义在类内部；实例方法的第一个参数必须是self（名称可自定义，如this。

那些看似不起波澜的日复一日，会在某天让你看到坚持的意义 3409

轮式并联五连杆下肢机器人运动控制：从建模到强化学习仿真训练

本文提出了一种基于强化学习的轮式并联五连杆下肢机器人运动控制方法。首先建立了机器人的运动学和动力学模型，推导了正逆解公式，并构建了URDF模型。随后在PyBullet仿真环境中搭建了包含复杂地形的训练场景，设计了基于PPO算法的端到端控制策略，包含状态空间、动作空间和奖励函数的详细设计。通过多组仿真实验验证了该方法在台阶攀爬等任务中的有效性，为轮腿机器人运动控制提供了完整的可复现技术方案。

huanghm88的专栏 350

C# WinForm 基于DirectShow.dll编写的程序，可边预览边保存视频，音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择（默认选中第一个）2.可录制wmv和avi两种格式的视频并且都带有音频，avi可以录制的分辨率和帧数进行选择，wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照，也可边录制视频边拍照4.添加了视频和音频的压缩功能（酌情使用）这次二次开发发现C#对DirectShow的相关信息太少，这次做完也不敢藏私共享出来，还望大家指正

蓝牙模块HM-10手册

蓝牙模块HM-10手册，该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

SAP B1中文培訓教材_SDK

公司内部培训资料，对开发工具 ，DIAPI， UIAPI，Add-ON有详细解说
上一篇： 33-Figma-数据采集器使用方式-后裔采集器
下一篇： 35-Figma-Figma自带切图工具使用
点赞 1
评论 0
书签 书签 2
billycoder
billycoder
博客等级 码龄17年 171粉丝 188原创
+ 关注 专栏目录
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值