preline
基于 Tailwind CSS 的开源 UI 组件库，提供丰富的预制组件和插件。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：preline。 它的用途是：基于 Tailwind CSS 的开源 UI 组件库，提供丰富的预制组件和插件。 完整的 Skill 内容见：https://321skill.com/skills/preline/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我需要一个带有可折叠侧边栏、数据表格和模态框的管理后台布局。”，它会利用 Preline 的组件库，快速生成相应的 HTML 结构，并集成好交互逻辑（如侧边栏的展开/收起、表格排序、模态框弹出）。或者，你可以说：“用 Preline 的插件帮我生成一个暗色主题。”，它会调用相关的 Agent Skill 自动化完成主题配置。
介绍
Preline UI 是一个基于 Tailwind CSS 的开源 UI 组件库，旨在解决开发者在构建现代网站和 Web 应用时，重复编写基础 UI 组件、处理交互逻辑和确保可访问性的痛点。它提供了大量可复用的组件、模板和插件，让开发者能快速搭建界面，而无需从零开始。
使用 Preline 非常简单，只需在现有的 Tailwind CSS 项目中通过 npm 安装，并导入其 CSS 和 JS 文件即可。它提供了详细的文档、Figma 设计系统、主题和针对 AI 编程工具的 Agent Skills，方便集成到各种开发工作流中。
这个库非常适合前端开发者、全栈工程师以及希望快速构建产品原型的团队。无论你是要开发一个管理后台、营销落地页，还是一个复杂的 Web 应用，Preline 都能提供现成的、经过精心设计的 UI 模块。
与同类 Tailwind UI 组件库相比，Preline 的特色在于其“无头”（Headless）插件设计，将交互逻辑（如下拉菜单、标签页）与视觉样式分离，给予了开发者更大的样式定制自由度。此外，它原生集成了对 AI Agent 编程工具（如 Cursor、Claude Code）的支持，并内置了企业级的可访问性考量。
核心特点
Preline 的核心区别在于其“无头”（Headless）插件架构，将交互行为与视觉样式彻底解耦，开发者可以完全自定义组件外观而不影响功能；同时，它原生提供了针对 Cursor、Claude Code 等 AI 编程工具的 Agent Skills，能自动化主题生成和 UI 工作流。
注意事项
对于追求极简、不希望引入任何额外 JavaScript 或组件库的纯静态 Tailwind CSS 项目，Preline 可能显得过于庞大。
常见问题
Preline UI 和 Tailwind UI 有什么区别？
Preline UI 是完全开源的免费库，提供“无头”插件架构，更强调交互逻辑与样式的分离和定制性；而 Tailwind UI 是官方出品，部分高级组件需付费，设计风格更统一。
Preline 支持哪些前端框架？
Preline 主要提供基于原生 HTML/JS 的组件，但可以集成到任何前端框架（如 React, Vue, Svelte）中使用，具体集成方式可参考其官方文档。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/preline/raw/index.md 读取 preline 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/preline/raw/index.md（查看排版版本）