Designinthebrowser

什么是浏览器中的设计？

浏览器中的设计是一个创新工具，允许用户无缝连接视觉设计和人工智能驱动的前端开发。通过其点按功能，用户可以直接与浏览器中的网页元素进行交互。通过点击任何元素，用户可以指示像Claude、Cursor或Gemini CLI这样的AI模型生成相应的代码，消除了繁琐的解释或切换标签的需要。该工具旨在为设计师和开发人员服务，简化视觉设计与编码之间的工作流程，使快速高效地实施设计更改变得更加容易。

如何使用浏览器中的设计？

1. 从官方网站下载并安装浏览器中的设计。
2. 打开工具并导航到您想要工作的网页。
3. 使用点按功能选择页面上的任何元素。
4. 选择AI模型（Claude、Cursor或Gemini CLI）为所选元素生成代码。
5. 使用集成终端和CSS检查器进行必要的调整。
6. 保存更改或导出生成的代码。

浏览器中的设计的主要功能是什么？

• 点按界面： 轻松选择元素以指示AI，无需截图。
• 跳转到代码： 直接访问任何选定元素的源代码。
• 多重编辑能力： 同时选择多个元素并排队更改以进行批处理。
• 集成终端： 在同一窗口内进行浏览器和终端操作。
• 响应式测试： 在不同设备视口（桌面、平板、手机）之间即时切换。
• CSS检查器： 轻松检查样式并在元素之间复制值。
• 参考图像： 上传截图供AI匹配和调整，减少口头描述的需要。
• 设计令牌： 在提示中直接引用CSS变量和Tailwind令牌，以保持品牌一致性。

浏览器中的设计适合谁？

浏览器中的设计专为寻求提升工作流程的网页设计师、前端开发人员和UX/UI专业人士量身定制。它特别适合那些喜欢视觉编码方法并希望简化实施设计更改过程的人。该工具适合初学者和经验丰富的专业人士，是任何希望高效弥合设计与开发之间差距的理想选择。

浏览器中的设计的使用案例是什么？

1. 快速原型制作： 快速创建和修改网页设计，无需在多个工具之间切换。
2. 设计实施： 使用该工具直接将设计模型转换为代码，确保准确性和速度。
3. 协作开发： 通过提供一个共同的界面来促进设计师和开发人员之间的团队合作，以进行设计更改。