@brighterly/lib-lumee-ui (英语)
更明亮的设计系统——设计标志(并随着时间的推移,Vue 3组件).
使用量
// main.ts — load exactly ONE mode file per app (apps never mix modes)
import '@brighterly/lib-lumee-ui/client.css' // one mode per product: client.css | admin.css | smartest-minds.css
import '@brighterly/lib-lumee-ui/style.css' // component styles
import '@brighterly/lib-lumee-ui/fonts.css' // self-hosted DS fonts at the token weights
import '@brighterly/lib-lumee-ui/scrollbar.css' // tints the thumb of every native scrollbar, the page's included — opt-in
<script setup lang="ts">
import { ItemAnswerHorizontal } from '@brighterly/lib-lumee-ui'
</script>
带有语义的样式自定义 UI --btly-* CSS 变量和 .btly-text-<style> 印刷课.
为难得的联署材料需求(图表,内含样式): import { token, brand, textClass } from '@brighterly/lib-lumee-ui' ——模式不可知 var(--btly-…) 参考字符串.
带有软件包的字体船 : fonts.css inter/Mona Sans/机器人通过 @fontsource/* (运行时间依赖性) 准确的重数 打印符号使用.
滚动栏 : scrollbar.css 样式只包含每个本地滚动条的缩略图 —— 包含该页面的标准属性 : scrollbar-color 轻而易举 brand-gray-200 在一个透明的轨道上 scrollbar-width: thin 是Figma 4px药丸最接近的原生厚度。 栏本身保留了引擎的:将站台上覆放的地方(macOS,iOS,Android)上覆,因此不需要布局空间,经典的站台上覆放的地方(Windows). 从不作风 ::-webkit-scrollbar* 在应用程序或组件中,任何这样的规则都会使该栏变成一个能吃到内容宽度的经典的12–15px道. 故意隐藏一个 scrollbar-width: none 加号 ::-webkit-scrollbar { display: none } (伪封面为Safari 在18.2年前);从未设置 scrollbar-width 编号 : scrollbar-color 否则——床单是他们的.
套装大小( opt- in): lumee() Vite 插件只让 app 的 生产 构建 船 图标 和 Logo 绘制其代码用途(完整的图标注册为~58 KB gzip,Logo艺术~48 KB).
// nuxt.config.ts
import { lumee } from '@brighterly/lib-lumee-ui/vite'
export default defineNuxtConfig({ vite: { plugins: [lumee()] } })
// vite.config.ts: plugins: [vue(), lumee()]
它在生产中运行只构建(dev 保存一切),扫描项目目录(最近的) package.json 或者说 .git 在Vite 根上方)和指纹 [lumee] icons: N of 171 names kept · logo: N of 22 variants kept图标名称和 Logo 道具为文. 建筑警告 … imports @brighterly/lib-lumee-ui but was not scanned 指项目外的代码(一个工作空间包,npm Nuxt层)使用DS,其图标可能缺失——将该代码移入项目中或放下插件.
所需资源
对于完整的 Figma QQ 代码工作流程,克洛德需要 图像插件 (单位:千美元)figma@claude-plugins-official)——它提供 figma:* 技术与Figma MCP。 这回波可以让它通过 .claude/settings.json,但插件为 每名发展中国家 配置和不到达 git clone,因此每个开发商设置一次:
- 安装 - 在克洛德代码运行中
/plugin并安装figma(从)claude-plugins-official) (中文(简体) ). - 认证 —— 说
/mcp→figma→ 认证 (打开浏览器). 已安装 QQ 认证 . - 校验 —— 说
/mcp显示figma … ✓ Connected· ;/skills列表figma:*。 。 。 .
这使得每个开发者都来到了相同的Figma驱动状态. 回收船只有自己的技能, brighterly-design-system (单位:千美元).claude/skills/figma 插件技术的复制件.
字体优美的代理工具
此 DS 中的图标是 FontAwesome 7 Pro 软件所以克劳德也需要官员 字体赞美代理工具插件 (单位:千美元)icons@fontawesome-agent-tools)——它提供 icons:* 技能(/suggest-icon, (中文(简体) ), /add-icon, (中文(简体) ), /fa-help, (中文(简体) ), /setup-fa),用于对照直播的FA库/docs查找并验证FA图标,而不是过时的训练数据. 和 Figma 插件一样, 它通过承诺启用 .claude/settings.json (其市场公布于 extraKnownMarketplaces),但插件是 每名发展中国家 配置和不到达 git clone,因此每个开发者安装一次:
- 添加市场 - 在克洛德代码运行中
/plugin marketplace add FortAwesome/fontawesome-agent-tools(或npx skills add FortAwesome/fontawesome-agent-tools用于没有插件包装器的技能. - 安装 —— 说
/plugin install icons@fontawesome-agent-tools。 。 。 . - 校验 —— 说
/skills列表icons:*(例如:.icons:suggest-icon) (中文(简体) ).
范围说明:使用这些工具 查找/ 验证 正确的 FA 图标名称并回答 FA 问题 - 代码中的图标如何由DS自己管理 <Icon> 组成部分和登记册,而不是原始输出 /add-icon (它释放出FontAwesome通用的平角集成). 处理 /add-icon 输出作为参考,而不是DS模式。 FA-Pro登记证书NPM_FORTAWESOME_ACCESS,见下文)仍然需要安装图标包本身.
发布新版本
出版是自动的,只有CI. .github/workflows/publish.yml 有两个工作: verify
(冷冻装置、组件结构检查、全 pnpm build单位测试)
公关和每一个推向 main 编号 : staging 编号 : develop 编号 : sandbox· ; publish 自己开的..
推动到 main 谁 package.json npm 版本还没有,它需要 dist/ 那个
verify 新建和运行 npm publish因此,发布是一个版本的凸起,达到 main数字 :
- 弹出版本
使用以下命令更新
package.json并创建 git 标签 :pnpm version patch # 1.0.0 -> 1.0.1 (bug fixes) pnpm version minor # 1.0.0 -> 1.1.0 (new features) pnpm version major # 1.0.0 -> 2.0.0 (breaking changes) - 推动
main(直接或通过公关):git push - Npm 发布会自动创建.
一个不更改版本的推动跳过 publish 任务。 别 npm publish 从a
笔记本电脑: dist/ 被点缀,只有 verify 建造一个船.
巨钩
承诺前钩
运行 pnpm lint 财务报告和审定财务报表 pnpm typecheck 在舞台上进行 .ts 编号 : .vue 文档.
准备:
chmod +x _tools/git/pre-commit
ln -s ../../_tools/git/pre-commit .git/hooks/pre-commit
预推钩
验证释放标记( E)v*) 匹配该版本 package.json 在推进之前.
准备:
chmod +x _tools/git/pre-push
ln -s ../../_tools/git/pre-push .git/hooks/pre-push
依赖关系
创建.env :
cp .env.example .env
编辑.env并添加 NPM_FORTAWESOME_ACCESS (登记)和 FIGMA_ACCESS_TOKEN (代码连接发布)
- 范围(下文)
安装道具 :
make install
视野
代币被消耗 只有一点: 密码连接 CLI(make figma:publish 编号 :
figma:unpublish) (中文(简体) ). 代理读取的 Figma MCP 设计是 OAuth 上的远程服务器——
因此这些瞄准镜永远不会影响 get_design_context 还有朋友.
生成时间 图片 – 设置 – 安全 – 个人访问标志 改为:
| 范围 | 为什么 |
|---|---|
file_code_connect:write | 要求. 这个 POST /v1/code_connect 出版发行. |
file_content:read | 要求. GET /files/:key/nodes 用于 figma connect preview 财务报告和审定财务报表 create。 。 。 . |
library_content:read | 组件/组件设置 ids + 密钥通过 /files/:key/components。 。 。 . |
team_library_content:read | 团队库也是如此. |
file_comments:read | 每个节点的设计者评论. |
file_versions:read | "我们造它以来这个框架有变化"的检查. |
file_metadata:read | 文件名 / 最后修改的疗理检查 . |
最后五个还没有被任何脚本使用——它们被授予,所以未来的工具不需要新的符号.
故意 没有 授予: file_comments:write (将担任维护者),
file_dev_resources:*, (中文(简体) ), library_assets:read, (中文(简体) ), folders:read, (中文(简体) ), webhooks:*, (中文(简体) ), current_user:read。 。 。 .
Tokens 过期( 90天是 Figma 的默认) —— 当出版开始返回 403 时, 与
都一样 注意变数 REST API是企业定型的,在这里根本没有范围,这就是为什么
符号来自设计者的 DTCG 导出(tokens/*.json)而不是活拉.