*按下按钮切换灯光效果。*
*Press the button to switch the lighting.*

动机 Motivation

在这个项目中，我尝试组合多种 AI 工具，分别评估它们在 Web 设计和开发工作流中的作用。本项目将搭建一个智能灯具产品介绍网站，访客可以调节灯光，预览智能灯具对卧室环境的影响。

In this project, I combined multiple AI tools and evaluate their role in web design and development workflows. A introduction website for smart bulbs was built, visitors were able to preview the lights within the bedroom.

生成界面设计 Generate UIs with Midjourney

我发现 Midjourney V4 似乎擅长绘制移动应用界面，于是我先生成移动 App 来搜集设计素材。

I found that Midjourney V4 seems to be good at drawing mobile app interfaces, so I first generated a mobile app to collect design materials.

Photoshop Beta (V24.0) 的「创成式填充」功能可以帮助处理画面多余元素。我们使用这个功能来清理文字生成的错误和改变素材的画面比例。

Photoshop Beta (V24.0) introduced the “generative fill” that helps image editing with generative AI. We used this feature to clean up text errors and to change the scale of the materials.

在 Figma 中整理设计 Convert materials to Figma design file

使用 Midjourney 生成的设计作为参考，在 Figma 中只需要优化细节就可以完成界面设计。

I optimized some details in Figma to complete the interface design with the reference of the design generated by Midjourney.

前端开发 Web Development

在开发上，首先利用 ChatGPT 搭建基本网页框架，然后在 Figma 中导出设计稿。接着，采用渐进式的开发方法，逐步完善网页的开发，最后用 GSAP 实现切换过渡动画。

For development, the web framework was first built using ChatGPT, and then the design was exported in Figma. Then, I adopted an incremental development approach to gradually improve the development of the webpage, and finally used GSAP to realize the transition animation.

受限于有限的上下文窗口，代码的编写还是需要大量人工，GPT 可以开发某个特定模块供我们调用。

Due to the limited context window, the code writing was still labor intensive, and GPT could develop a specific module for us to call.

总结 Conclusion

通过这个网页设计、开发测试，可以发现 AI 在处理图片方面极大地提升了设计师的工作效率，在 UI 设计上展现出强大的潜力，然而还需要进一步的专门调教，在前端开发方面，虽然理解能力和一致性保持并不理想，但合理运用仍然能一定程度上减轻工作人员工作量。

With this practice, I found that AI greatly improves the efficiency of designers in editing images, shows strong potential in UI design, however, further fine-tuning was needed. As for front-end development, although the comprehension ability and consistency of codes was not ideal, GPT could still reduce the workload.