AIGC 模板库更新:Web UI 实战模板、场景与风格、全流程管理的 skill

我第一次在 Web UI 模板库（https://prompts.aiplanet.live/webui/）里添加了多个实际测试过的 Web UI prompt 模板，同时也把配套的 web-ui-workflows 公开到了 lindong-skills（https://github.com/lindong28/lindong-skills），支持模板的创建、治理、查找、应用。

点阅读原文可直达模板库。

这些模板和 skill 都在我自己的个人项目和公司项目上用过，觉得效果还不错，再分享出来。

要做好产品 UI 设计，我认为第一步就是学会高效率、体系化地模仿。把好的页面设计整理成可复用的模板，再用到自己的产品里，是这次分享的主要内容。

使用方式是先在网站上浏览，看看哪些模板适合自己的场景和偏好，再复制页面上的 prompt，交给 coding agent 去创建或改进自己的 Web UI。配套的 skill 可以从公开仓库取得；使用时补充自己的目标项目、页面和修改范围。以我自己的使用体验，基本可以做到所见即所得。

先按场景选，再看风格

模板库分成了场景和风格两类。

场景模板关心的是：用户在这个页面里要完成什么任务。 比如查看用量，先看总览和趋势，再从异常进入记录、查看单次请求；做评测，则可能要并排看两个结果、做判断，再查看排行榜。页面里放什么、信息怎么组织、从哪里进入详情，都属于这一层。

视觉风格关心的是：这些信息怎样呈现。 字号、间距、配色、边框、按钮和内容密度，决定了页面的观感。同一种场景可以采用不同风格，也可以沿用项目原有的风格。

两类分开后，选模板时就可以先找任务接近的，再挑自己喜欢的外观。既可以采用一整套场景，也可以只取一个子页面或模块，接到自己的业务里。

下面是现在的模板库。

目前提供的场景模板主要有这些：

• 用量与调用观测工作台: 从总览看用量与趋势，再查记录、查看请求详情和诊断信息，适合监控类工具。
• 模型发现与接入目录: 按能力和接入方筛选模型，进入详情查看模型信息与接入方式。
• 评测工作台：覆盖 A/B 对比判断、排行榜和结果浏览，适合把评测结果做成可以实际查看和操作的页面。
• 分步配置工作台：把配置过程按步骤组织，逐步填写、检查结果。
• 技术链路讲解时序图：用参与者和处理顺序说明一条技术链路，适合需要把系统如何运作讲清楚的页面。

视觉风格目前有 Feedly Reader、GitHub Primer、Vercel Gateway Console，分别参考了 Feedly、GitHub 和 Vercel AI Gateway 的真实界面。模板里整理的是这些产品的设计规则，应用时保留自己项目的品牌和业务内容。

这些设计已经用在不同项目里。我的 agent 使用情况监控工具 agent-monitor 采用了 Vercel 控制台风格；视频评测项目 video-eval-arena 应用了评测工作台相关设计。个人尚未开源的项目和公司项目，也是这批模板与 skill 的实际使用场景。

为了让大家有一个可以直接打开的例子，我在自己的 AI 资讯站（https://news.aiplanet.live/）里引入了 Feedly 和 GitHub 两种风格。打开桌面版，在左下角选择对应外观即可。同一批资讯内容，可以切换着看两种风格的效果。

用 skill 把模板的整个流程接起来

配套的 web-ui-workflows 放在 lindong-skills（https://github.com/lindong28/lindong-skills） 仓库。这批模板本身就是用它添加的，后续的查找、应用、审核和维护也可以继续用这套 skill。

围绕模板的全生命周期，核心是这几个子命令：

• create-ui-template: 从认可的网站真实界面中提炼设计，创建或更新场景模板、视觉风格模板。遇到一个值得借鉴的产品，可以从这里开始。
• manage-ui-templates: 查找、比较和收藏模板，维护模板的分类、复用反馈和评价依据。既支持当次挑选，也支持后续治理和维护。
• apply-ui-template: 把选中的模板应用到目标项目，可以是整个产品，也可以是某个页面或组件。直接按模板的设计规则工作，不要求每次都重新访问来源网站。
• review-ui: 审核页面和组件的设计，也可以对照模板找出哪些规则还没落实、哪些组件模板还没覆盖。需要修复时，再明确交给 agent 继续处理；有必要时也可以回访来源网站补充参照。

另外还有 adapt-reference-ui，用来研究参照产品并改造目标界面；design-ui 负责布局和视觉设计；optimize-images 处理网页图片的显示和加载。

如果只是想把一个模板用到自己的项目里，可以先从网站浏览和复制 prompt 开始；如果也想积累自己的模板，再用创建、管理和审核这些工作流。

Web UI 模板库（https://prompts.aiplanet.live/webui/）和 lindong-skills（https://github.com/lindong28/lindong-skills） 都放在这里了。希望对同样需要做 Web UI 设计的同学有用，欢迎试用，以及建设属于你自己的模板库。