@ agentero/ 设计系统
React 组件库 尾风 CSS v4 财务报告和审定财务报表 Radix 用户界面 原始的 原始的 原始的 每个组件均可单独导入,完全打入,并设计成无缝地融入任何以Tailwind为基础的项目.
安装
yarn add @agentero/design-system
同伴依赖关系
此软件包需要以下对等依赖性:
yarn add react react-dom tailwindcss
设置
尾风 CSS 配置
添加设计系统为 Tailwind 源, 以便生成组件类的 CSS :
/* app.css */
@import 'tailwindcss';
@source "@agentero/design-system/theme";
构成部分
import { ComponentName } from '@agentero/design-system/ComponentName';
公用事业
cn
一个类名称合并工具合并 clsx 财务报告和审定财务报表 tailwind-merge。用于有条件地加入 Tailwind 课程而不发生冲突.
import { cn } from '@agentero/design-system/lib';
cn('px-4 py-2', isActive && 'bg-blue-500', className);
AI 整合(MCP)
这包货船a 示范背景协议 服务器,可以让 AI 编码助理访问组件文档,道具,以及使用实例——不需要故事本运行时间.
添加到您的工程中.mcp.json数字 :
{
"mcpServers": {
"design-system": {
"command": "node",
"args": ["./node_modules/@agentero/design-system/mcp/server.mjs"]
}
}
}
或者直接运行它:
npx @agentero/design-system-mcp
服务器曝光了三种工具:
- 列表全部文档 发现所有可用的组件和文件
- 获取文档 获得一个组件的全部文件、道具和使用示例
- 获取文档作为故事 获得具体故事变体的细节
地方发展
开发设计系统与没有构建过程的消费者应用软件一起,将软件包本地化:
# In the design system directory
yarn link
# In the consumer app directory
yarn link @agentero/design-system
词根 package.json 输出直接指向TypeScript源文件,因此消费者的捆绑器(Vite,Next.js等)通过HMR即时取出变化——不需要构建步骤或监视器.
如果使用Next.js,则将软件包添加到 transpilePackages 内 next.config.ts数字 :
transpilePackages: ['@agentero/design-system'],
取消链接
# In the consumer app directory
yarn unlink @agentero/design-system
yarn install --force