用 Preline 的 Agent Skills 让 Agent 搭建 Tailwind UI

你的 Agent 会写 Tailwind 标记，但每次都在凭空发明组件——发明的标记会偏离任何真实的设计系统。Preline UI 是一个 6k 星的开源 Tailwind CSS 组件库，它用两个 Agent skill 弥补了这个缺口：一个负责集成库里的真实组件和区块，另一个通过内置的本地生成器生成主题 CSS。

为什么这个 Skill 重要

Preline 是一个成熟的库——README 统计有 204 个免费的 Tailwind CSS 区块和 section、27 个 headless 插件、5 套免费模板，以及一套 Figma 设计系统——所以 Agent 插入的标记继承的是这套系统，而不是重新发明。这两个 skill 恰好针对 Agent 最不擅长自由发挥的两件事：挑选库里真实存在的组件，以及生成覆盖全部表面的主题 token。据 README 介绍，这些 skill 面向 Cursor、Claude Code 和 Gemini CLI 等智能体编码工具。

第一个 skill preline-mcp 通过 Preline MCP 服务器把 Preline UI 的组件和区块集成进 HTML 文件，该服务器暴露 6 个工具，返回可以直接集成的 HTML、CSS 和 JS。第二个 skill preline-theme-generator 使用内置的本地生成器来生成、预览、保存或校验 Preline 主题 CSS——它的 SKILL.md 把范围限定在 Preline 主题，明确不用于通用的非 Preline CSS 工作。

安装

从任意一个能正常工作的 Tailwind CSS 项目开始，然后安装 skill：

npx skills add htmlstreamofficial/preline

库本身用 npm i preline 安装，再按 README 的说明加上 CSS 导入和 script 标签——这一部分可以让 Agent 来做，但 README 的安装章节才是确切导入语句的权威来源。

实战：给落地页加一个定价区块

对 Agent 说：

用 Preline 给我的落地页加一个定价区块，放在 hero 下面。

skill 自身的规则决定了接下来发生什么。它绝不猜测 slug——每个 section、组件和类目标识符都是精确的 kebab-case 字符串，必须先通过 components_list 或 blocks_categories 发现。它一次只取一个组件或区块，完整集成后再处理下一个。它还总是在插入之前先读取目标文件，所以区块会落进你的标记里，而不是覆盖它。

模糊的请求会倾向按区块处理——也就是现成的页面 section——因为区块给出的结果更完整。你说"组件"就走组件工作流，说"区块"就走区块工作流。

实战：生成品牌主题

第二个 skill 把一种氛围或一个品牌色变成主题 CSS。它的 SKILL.md 的常见提示里就有匹配品牌色这样的例子，对 Agent 说：

匹配这个品牌色：#2F6BFF。

工作流对 CSS 的生成方式要求严格：生成只能通过内置的 scripts/run-theme-generator.js 运行，目标目录通过 scripts/find-themes-dir.js 解析，skill 只创建或编辑新的主题文件。任务收尾前要跑一遍校验清单，预览模式让你在任何文件写入之前先看到 CSS。安全约束是设计的一部分——不用 npx，不用从网络获取的包，也不把原始用户文本插进 shell 命令。

技巧

• 在请求里带上"preline"或"/preline"——这只是 MCP skill 的 SKILL.md 记载的触发短语中的两个。
• 写入之前先要预览：主题生成器支持只生成输出而不写文件。
• 分清两个 skill 的分工：组件和区块来自 preline-mcp，主题 CSS 来自 preline-theme-generator。
• 库的 headless 插件（按 README 的表格，手风琴、下拉、日期选择器之外还有 24 个）是让标记可交互的关键——Agent 应该把组件和对应的插件配对使用。

何时不用这个 Skill

主题生成器给自己划了边界：按它的 SKILL.md，通用的非 Preline CSS 工作和任意命令执行都不在范围内。另外，如果你的项目不是 Tailwind CSS 项目，库的 npm 安装是这些 skill 假设的前提，而不是它们能替代的东西。

查看 排行榜 了解更多 skill。