# AI做UI，JSX+SVG才是王道

- Channel: [Upward Evolution with Albert](https://www.youtube.com/channel/UCHPHGYUfAfRIvf1RT9sADLg)
- Published: 2026-11-01
- Source video: [Watch on YouTube](https://youtube.com/watch?v=q8uBFzcZLo4)
- Read on ReadTube: https://www.read.tube/p/videos/q8uBFzcZLo4
- Language: Simplified Chinese

## Summary

**AI做界面，JSX与SVG更胜一筹**

视频认为，SVG的像素级精度与JSX的模块化结合起来，才是更适合AI制作界面的方式。JSX可以把重复的SVG封装为可复用组件，并通过自定义模板引擎输出HTML或SVG，从而减少代码、令牌消耗和开发成本。静态界面草稿与最终交互产品属于不同阶段，设计阶段应优先让人快速比较多个状态，并提供人和AI都容易理解的视觉参考。

视频的核心观点是：SVG本身适合实现像素级精确的界面，但由JSX驱动的SVG更适合AI辅助开发。纯SVG缺乏模块化和布局语义，重复绘制相同元素会导致代码臃肿、上下文变长，并增加AI生成所需的时间与成本；改用TSX后，可以把SVG封装成可复用、可传参的组件，同时保留SVG的视觉精度。

JSX在这里并不只是React的前端语法，而是一个可自定义输出形式的模板引擎。作者编写了简单的渲染器，把模块化的TSX生成HTML中的大型SVG，也可以直接输出SVG文件；两种方式在视觉上几乎没有差异。最终选择HTML作为外层容器，主要是因为浏览器便于检查细节，而真正承担绘图任务的仍然是SVG。

仅仅把SVG组件化还不够，因为SVG需要逐个描述图形元素，本身没有类似网页的横向、纵向布局语义。由于作者制作的是视频编辑器界面，布局逻辑更接近网页，因此进一步采用纯TSX结合Twind来表达布局和样式，减少重复的HTML与Tailwind CSS写法，从而继续降低AI的令牌消耗。

静态界面草稿不应与最终交互产品混为一谈。设计阶段需要同时展示多个状态，让人能够快速比较视觉差异，而不是逐个点击交互状态；生成十二个静态版本也不等于令牌消耗增加十二倍，因为模板引擎会复用结构。作者强调，此时人的角色更接近产品经理和设计师，静态结果是供人和AI共同理解的视觉参考，最终可用的交互界面则由Rust应用实现。

成熟项目应当保留正式的设计阶段，并使用同时适合人和AI的中间格式。作者用大约三百行模板生成约一千五百行的静态输出，虽然生成结果不适合手工编辑，却非常适合快速检查设计并让AI据此生成实际代码；因此结论不是放弃SVG，而是让模板引擎负责重复生成，使大量SVG得到更高效的复用。