我发现 vibeprompts.dev 这个网站提供了能用自然语言生成 tailwindcss 组件的模板。用了一下感觉很方便，相当于是把web页面或者组件使用自然语言叙述了一遍。这很有可能是把已有的组件发给了agent，让agent自己生成了提示词。
一个简单的登录页面事例：
Build a full-height split-screen sign-in page with Tailwind CSS. On the left, a centered login card (~360px wide) with a logo, an email and password field, a "Remember me" checkbox with a "Forgot password?" link on the same row, a full-width primary button, and a divider before a "Continue with Google" outline button. On the right half, a solid brand-colored panel with a large headline and a short testimonial, hidden below the lg breakpoint. Use rounded-xl inputs, subtle borders, and clear focus rings.
我也在想：如果我们可以直接把图片比如线框图丢给agent，不是也一样可以生成相关组件么。
图片天然适合表达布局、颜色，一张静态截图没法交代按钮点击之后发生什么，也没有展示加载失败、没有数据时的样子。所以这些信息我们还得补进去。 vibeprompts.dev 也仅仅是为了提供UI，而且每次生成的组件写法都不一样。
这时就需要额外的提示词来提供以外的要求。如果一个模板只有“简洁、好看”之类的描述，它提供的信息就很少。如果它写清楚了组件的交互状态，以及需要遵守的项目约束，复用时就能少漏一些问题。
对于agent来讲，图片的token和推理成本要高于纯文字。而纯文字提供了更优的交互逻辑精准度。
因而我觉得可以把图片和提示词放在同一次任务里。如果还没有固定的页面设计，可以先使用它提供的提示词生成组件或者页面，截图，然后重新喂给AI。让其生成相关组件，
用图片说明想要的视觉效果，用文字再加以补充。判断模板值不值得保留，也可以看它是否减少了后续解释和返工。至于 Vibeprompts 的具体模板能做到哪一步，我感觉还需要拿实际组件试过才能下结论。