lucian-uxui

Lucian UX/UI

Lucian UX/UI Prompt 是一个交互式 UI 元素库。每个元素都是一个独立的代码片段：一个作用域限定为 .uNNN 的 <style> 块、一个根节点 <div class="ux uNNN">，以及一个 <script>。每个元素都从 --ux-* 主题令牌中读取颜色。这个库还在不断扩充（目前有 400 个元素，未来会有数千个），所以切勿假设其中包含什么内容。每次都要搜索。

所有访问都通过捆绑的 CLI 完成。它会在磁盘上缓存，并在 lucianlabs.dev 无法访问时回退到 GitHub 镜像。<skill-dir> 是包含此 SKILL.md 的文件夹：

node <skill-dir>/scripts/lucian-uxui.mjs <command>

命令	用途
search <words...>	查找一个 UI 部分的最佳匹配项，例如 search pricing toggle 或 search 로그인。添加 --category <slug> 或 --limit 20 可缩小或扩大范围。
list	列出分类及其数量。list --category <slug> 会列出某个分类中的所有元素。
get <id> [<id>...]	获取最多 8 个元素的完整代码。只获取你要移植的元素。
tokens	获取浅色和深色的 --ux-* 令牌，以及每个元素都需要的 .ux 基础规则。
info	查看数据源、目录版本和缓存文件夹，以便排查问题。

添加 --lang ko 可使用韩语文案。默认值为 --lang en。将 --out <path> 与 get 或 tokens 一起使用，可将内容写入文件，而不是打印出来。

工作流程

1. 阅读项目。 确认框架（React、Next、Vue、Svelte、Astro、纯 HTML）、样式方案（CSS modules、Tailwind、全局 CSS）、主题方案（data-theme、.dark 类、CSS 变量）以及网站文案使用的语言。如果项目尚不存在，则根据用户的要求处理。如果用户没有指定，则使用纯 HTML、CSS 和 JS。
2. 将需求拆分为 UI 部分，例如：页眉导航、主视觉行动号召按钮、月付/年付价格切换、注册表单、常见问题、成功提示、空状态。页面布局和各个版块（主视觉、价格网格、页脚）由你自行搭建。Lucian 提供其中的交互部分。
3. 每个部分搜索一次。 如果用户通过编号或图库链接指定了具体元素（#055、55、lucianlabs.dev/uxui-prompt/#055），则跳过搜索，直接 get 指定元素。英文关键词的匹配效果最佳，韩语也可用。阅读单行摘要，并选择行为适合该部分的元素。只要有合理的匹配项，就优先使用 Lucian 元素，而不是自行编写。只有找不到合适项时才从头构建，并使用相同令牌来匹配 Lucian 的风格。
4. 获取选中的元素：运行 get <ids>，每次最多获取少量元素。每个项目还要运行一次 tokens。
5. 按照 references/porting.md 移植每个元素。首次移植前请先阅读该文档。
6. 检查两种主题、窄屏移动端宽度（375px）、键盘操作以及 prefers-reduced-motion。
7. 汇报。 在回复末尾列出使用的元素。每个元素占一行，格式为 #ID title: 使用位置、所做的调整、https://lucianlabs.dev/uxui-prompt/#ID，然后列出所有无法检查的内容。

语言

使用网站文案所用的语言：韩语网站使用 --lang ko，其他情况使用 --lang en。如果无法确定语言，则使用英语。无论语言设置如何，元素文本都只是示例文案。请替换为项目的实际内容。

规则

• 只能使用 get 返回的代码。切勿编造元素 ID，也不要根据记忆或摘要重构元素。
• 将每个元素的第一行，即 `` 注释，保留在从该元素创建的组件文件顶部。许可证要求这样做。
• 不要将整个目录倾倒到上下文中，也不要下载每个元素。请使用 search，并通过 list --category 浏览。
• 按原样保留元素的结构、形状和动效参数（时长、曲线、延迟）。可以调整框架、数据和颜色，但不要改动设计。

当 CLI 无法运行时

• 网络受阻（退出代码为 3，在 Codex 等沙盒环境中很常见）：CLI 需要通过 HTTPS 访问 lucianlabs.dev，或者在无法访问时访问 raw.githubusercontent.com。请为该命令申请网络权限，然后重新运行。如果网络始终不可用且没有缓存，请告知用户。不要用虚构的元素代替。
• 没有 Node.js：使用 curl 和相同的数据：

  curl -fsSL https://lucianlabs.dev/uxui-prompt/api/v1/en/catalog.tsv | grep -i "toggle"   # columns: id, cat, category, title, tags, shape, hash, summary
  curl -fsSL https://lucianlabs.dev/uxui-prompt/api/v1/en/e/056.txt                      # one element
  curl -fsSL https://lucianlabs.dev/uxui-prompt/api/v1/en/tokens.css                     # tokens