后端前端CRM人工智能AI Agent【免费下载链接】crmComp AI CRM is an open source, CRM designed for AI agents. Agentic-first CRM.项目地址https://gitcode.com/gh_mirrors/crm48/crm点击查看免费下载本文以仓库内.agents/skills/better-ui/icons.md设计工程规范为主体结合 Comp AI CRM开源 Agentic-first CRM前端实际使用的 Lucide 图标体系与 shadcn/ui 配置系统讲解图标描边权重、状态着色、轮廓/填充语义、渲染尺寸设计以及 RTL 翻转五大法则。读完你将掌握一套可直接落地的图标使用规范——从「单个图标好不好看」进阶到「整套图标在界面里是否自洽」并能用 CSS 与 Tailwind 代码在真实组件中复现。图标是界面中最容易被低估的细节单个图标看起来没问题放进界面却总让人觉得「哪里不对」。Comp AI CRM 的设计工程技能集.agents/skills/better-ui/把这类问题归结为一条主线——图标的光学重量、状态表达、尺寸适配与方向语义。本文围绕该技能集中的 icons.md 展开并用仓库前端代码apps/app 与 packages/ui中的真实用法作为佐证。一、仓库里的图标事实基础Lucide 与currentColor在进入规范之前先确认本仓库的图标体系。Comp AI CRM 的 shadcn/ui 配置在两个层级都声明了统一的图标库apps/app/components.jsoniconLibrary: lucidepackages/ui/components.jsoniconLibrary: lucide对应到代码层面packages/ui的组件统一从lucide-react导入图标例如 accordion.tsx 的ChevronDownIcon / ChevronUpIcon、checkbox.tsx 的CheckIcon / MinusIcon、combobox.tsx 的ChevronDownIcon。这意味着全仓库共用一套 Lucide 线框图标其默认stroke-width为1.524px 网格、统一使用currentColor着色——这正是下文所有规范能够成立的前提图标库本身支持描边变体因此「描边匹配文字字重」与「状态用 CSS 驱动」两条规则在本仓库完全适用。仓库配置了style: radix-nova、baseColor: neutral与 CSS 变量模式见 apps/app/components.json图标作为独立层不受这些配置影响但仍应遵守「一表面一套描边策略」的约束。二、让图标与文字「同重」描边宽度匹配文本字重图标与相邻文字并排时视觉上应该承载相同的光学重量否则二者看起来不匹配细线图标配粗体文字显得「断了」粗重图标配常规文字则显得「吵闹」。核心做法是让图标描边宽度跟随文字字重变化相邻文字图标描边宽度24px 网格Regular40014–16px1.5pxMedium/Semibold500–6002pxBold700或强调的独立展示2.5px好与坏的对照!-- 好描边与标签字重匹配 -- button classflex items-center gap-2 font-semibold PlusIcon stroke-width2 classsize-4 / New project /button !-- 坏默认 1.5px 描边对着粗体标签 -- button classflex items-center gap-2 font-bold PlusIcon stroke-width1.5 classsize-4 / New project /buttonLucide 的 React 组件接受strokeWidth属性因此在 Comp AI CRM 中可直接这样调整PlusIcon strokeWidth{2} classNamesize-4 /React 中驼峰写法。注意class需改为classNamestroke-width改为strokeWidth。两条相关的一致性规则每个表面只采用一种光学策略。不要在同一个工具栏里混用描边约定互不兼容的图标库。如果所选图标库原生支持描边变体Lucide 即是就按上表让它匹配相邻文字否则保持该图标集的固有描边用尺寸或颜色来强调而不是换一套图标。图标尺寸相对文字的 x-height 设定。与文字内联时图标尺寸通常取1em–1.25em让二者随字号一起缩放。在 Tailwind 中即size-416px对应 14px 文字、size-520px对应 16px 文字这类配对或直接使用w-[1.2em]跟随字体大小。仓库中的落地参照spinner.tsx 通过strokeWidth控制加载指示器线条粗细dashboard-chart.tsx 同样使用描边参数证明「用描边而非换图」是团队既有做法。三、一份 SVG多种状态currentColor与 CSS 状态着色永远不要为 default / hover / selected / disabled 各准备一份图标资产。正确做法是用一个以currentColor绘制的 SVG让 CSS 状态驱动颜色。!-- 好一份资产状态交给 CSS -- svg fillnone strokecurrentColor stroke-width2…/svg.icon-button { color: oklch(0.552 0.016 285.938); } .icon-button:hover { color: oklch(0.21 0.006 285.885); } .icon-button[aria-pressedtrue] { color: oklch(0.623 0.188 259.815); } .icon-button:disabled { opacity: 0.4; }Tailwind 版本Comp AI CRM 使用 Tailwind见 packages/ui/src/styles/globals.cssbutton classtext-zinc-500 hover:text-zinc-900 aria-pressed:text-blue-600 disabled:opacity-40 BookmarkIcon / /button关键禁忌SVG 内部写死的fill#666会破坏这一机制。导入图标时若发现硬编码填充必须剥离为currentColor。Lucide 图标本身就是strokecurrentColor因此导入后无需处理但若从其他来源复制 SVG如设计稿导出的单色图标务必检查并替换。从仓库角度看这一规则与 globals.css 中定义的 CSS 变量令牌体系一致——颜色状态由 token 与工具类驱动而非为状态复制图标文件。四、轮廓为默认填充为激活用变体表达状态当图标集同时提供 outline 与 fill 两种变体时应把它们当作状态对使用而不是随意混用变体用途Outline默认状态工具栏、列表行、与文字内联Fill选中/激活状态当前标签页、已收藏的书签、已点赞的心形// 好变体传达状态 TabIcon variant{isActive ? solid : outline} / // 坏到处都是填充图标激活标签页反而失去了状态信号 TabIcon variantsolid /如果同一图标集没有 fill 变体Lucide 部分图标需要fillcurrentColor显式开启填充则用颜色 描边双重信号表达激活激活项用text-primary加粗描边未激活项用次级色。变体切换时的动画轮廓/填充之间的切换属于上下文图标动画。原文规范明确指出应使用 animations.md 中规定的精确交叉淡化数值——scale从0.25到1、opacity从0到1、blur从4px到0px使用 Motion 时transition: { type: spring, duration: 0.3, bounce: 0 }bounce 必须为 0无动效库时用 CSS 交叉淡化cubic-bezier(0.2, 0, 0, 1)且两个图标同时留在 DOM 中、其中一个绝对定位。这里不展开动画细节完整参数见 animations.md 的「Contextual Icon Animations」一节。五、按渲染尺寸设计16px 下依然可辨认一个在 48px 下很漂亮的图标缩到 16px 可能糊成一团。大尺寸下能看清的细节细内线、紧密字怀、细腻纹理在小尺寸时会发生模糊或锯齿。四条硬性要求在每个图标将要渲染的最小尺寸下测试它通常为16px它必须在那里依然可辨认。小场景优先用简化字形而不是等比缩小精细图稿。在渲染尺寸上对齐像素网格16px 图标如果用 24px 网格做分数缩放会渲染发软。使用图标集的原生网格尺寸16、20、24不要随意缩放。永远用 SVG不用位图同一份资产才能在任意密度下保持清晰。在 Comp AI CRM 中size-416px、size-520px正好对应 Lucide 原生网格工具栏图标一律用size-4行内强调图标可用size-5。避免size-[17px]这类非网格尺寸。六、RTL 下的图标翻转只翻方向相关的在dirrtl环境下只翻转含义与阅读方向绑定的图标其余保持原样翻转不翻转后退/前进箭头、导航中的 chevronLogo 与品牌标识文本块字形对齐、列表、缩进对勾checkmark扬声器/音量波纹沿阅读方向发散物理物件时钟、杯子、铅笔「发送」类方向字形媒体播放播放/快退参照磁带方向惯例保持 LTRCSS 实现仅镜像方向依赖图标/* 好只镜像方向依赖的图标 */ [dirrtl] .icon-directional { scale: -1 1; }Tailwind 实现ChevronRightIcon classicon-directional rtl:-scale-x-100 /两个进阶要点复合图标要逐部分分析徽标badge或斜杠叠加层在基础字形翻转后可能仍需保持原位。仅图标按钮的无障碍名称由better-accessibility技能覆盖见 better-accessibility/SKILL.md。仓库当前components.json中rtl: false见 apps/app/components.json但设计工程规范仍要求代码具备 RTL 正确性以便未来启用国际化时见 i18n ADR不返工。七、把这些法则放进代码评审上述规范在 better-ui/SKILL.md 中被编码为可审查的原则其「常见错误」清单可以作为图标自查表错误修正细线图标配粗体文字让描边宽度匹配文字字重每种状态一份图标资产一份currentColorSVG状态交给 CSS到处用填充图标轮廓为默认填充只用于激活状态结合 better-ui 的评审方法慢放动画浏览器 Animations 面板 10% 速度逐状态走查 hover、focus、active、disabled图标是否「发虚」「过重」「方向错误」会非常明显。评审输出时用 Severity / Location / Before / After / Why 表格记录引用path/to/file:line例如packages/ui/src/components/accordion.tsx:5。小结图标设计的本质不是「选一个好看的图标」而是让图标体系在光学重量、状态语义、渲染清晰度与方向一致性上整体自洽。在 Comp AI CRM 中这套规范有明确的落地载体统一 Lucide 图标库packages/ui/components.json、currentColor CSS 变量状态着色globals.css、以及 16/20/24 原生网格尺寸。遵循本文五条法则再配合 animations.md 规定的图标切换动画图标就能真正「坐进」界面而不是贴上去。赞分享后端前端CRM人工智能AI Agent【免费下载链接】crmComp AI CRM is an open source, CRM designed for AI agents. Agentic-first CRM.项目地址https://gitcode.com/gh_mirrors/crm48/crm点击查看免费下载相关推荐ZyPlayer自定义光标界面个性化的细节设计ZyPlayer自定义光标界面个性化的细节设计 光标作为用户与界面交互的直接媒介其设计质量直接影响操作体验。ZyPlayer在界面设计中通过精心规划的光标样桌面应用音视频即时通讯Ant Design Breadcrumb 图标用法在面包屑中把图标放在文字前面Ant Design Breadcrumb 图标用法在面包屑中把图标放在文字前面 导读 本篇基于 ant design 仓库中 components/brea前端UI组件设计系统从0到1搭建开发环境Linux on LiteX-VexRiscv依赖安装与配置详解从0到1搭建开发环境Linux on LiteX VexRiscv依赖安装与配置详解 Linux on LiteX VexRiscv是一个基于VexRiscv上一篇跨平台资源下载神器15分钟掌握全平台内容保存技巧下一篇Mastra 模板工程指南templates/ 目录的规范约定与 Gateway-first 模板实践创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考