背景：通过大佬（产品设计师）的铺垫（给予Figma设计元素的指引）将设计元素固化到前端程序开发规约中，并以此对已经生成的页面进行规范化设想的落地

Figma中设计规约

在这里插入图片描述

生成规约流程

  • 使用Cursor生成规约
    在这里插入图片描述

  • 生成的规约内容含md文件、css文件、还有js文件

  • md
    在这里插入图片描述

  • css
    在这里插入图片描述

  • js
    在这里插入图片描述

使用规约

  • 这里是通过在wsl中使用claude code
    在这里插入图片描述

  • 修改后的页面css样式会引用规约中的样式
    在这里插入图片描述

  • AI实际在执行时有可能会忽略你告诉的要优化的页面，先对项目全局进行规约。
    比如在main.js中引入css文件，而css文件中会引入规约css的内容
    在这里插入图片描述
    在这里插入图片描述

总结

  1. 使用固化规约的方式可以减少通过mcp交互，提高效率
  2. 固化后的规约可以方便引用。因已生成了固化的css和js文件以及md文件说明。如果使用cursor的rules规则依附与vue页面页面，开发时均会参照规约文件进行开发，效果应该会更好，这里暂未测试。
  3. 固化规约的由来。以下是发展线路
    1. 直接使用的Figma mcp生成页面，效果有些失真，如缺少阴影，这种情况在设计师看来就是还原度太低了。
    2. 尝试增加链路。读取Figma设计稿先生成Html页面。再生成程序。质量有所提升。
    3. 由于前两步的铺垫，发现固化后效果较显著。设计师总结后发现需要提供必要设计元素。于是将其固化到程序中
  4. 待测试部分。跳过生成Html界面。直接使用Figma mcp + 固化后的规约生成页面，后期看效果并补充。
# figma # 前端 # html
Logo
火山引擎 ADG 社区

火山引擎开发者社区是火山引擎打造的AI技术生态平台，聚焦Agent与大模型开发，提供豆包系列模型（图像/视频/视觉）、智能分析与会话工具，并配套评测集、动手实验室及行业案例库。社区通过技术沙龙、挑战赛等活动促进开发者成长，新用户可领50万Tokens权益，助力构建智能应用。

更多推荐

Chess用户界面设计：Tailwind CSS样式系统和组件库

GitHub推荐项目精选中的ch/chess是一个类似chess.com的多人在线象棋平台，它采用现代化的前端技术栈构建，尤其在用户界面设计上通过Tailwind CSS样式系统和组件库实现了优雅且功能丰富的交互体验。本文将深入探讨该项目如何利用Tailwind CSS打造一致的设计语言和高效的组件系统，为象棋爱好者提供沉浸式的游戏界面。## 🎨 Tailwind CSS样式系统：构建统一视

avatar 火山引擎 ADG 社区

终极指南：GPT-Engineer如何通过AI自动发现代码问题并提升质量

GPT-Engineer是一款强大的AI驱动代码工具，它能帮助开发者自动检测潜在代码问题、优化代码质量，让编程效率提升3倍以上。无论是新手还是资深开发者，都能通过这款工具轻松发现代码中的隐藏缺陷，减少调试时间，释放更多精力在创造性工作上。## 一键发现代码问题：GPT-Engineer的AI审查魔力GPT-Engineer的核心能力在于其内置的智能代码分析系统。通过集成Python代码格式

avatar 火山引擎 ADG 社区

SatDump中的纠错编码技术：从RS码到Turbo码的完整实现指南

在卫星数据传输过程中，信号往往会受到各种干扰，导致数据错误。SatDump作为一款通用卫星数据处理软件，集成了多种先进的纠错编码技术，确保从卫星接收到的数据能够准确解码。本文将深入解析SatDump中从Reed-Solomon（RS）码到Turbo码的实现细节，帮助读者理解这些技术如何保障卫星通信的可靠性。## 为什么纠错编码对卫星数据至关重要？卫星与地面站之间的通信链路面临着空间辐射、大

avatar 火山引擎 ADG 社区