原创组件，实时呈现

动效就绪的组件。

Fieldbook 是由墨西哥城的 Lizardi Studio 打造的原创 UI 组件目录，支持 React、Vue、Svelte、Astro 和 HTML，并为编程智能体提供 MCP 服务器。

构建实用且有个性的界面。体验实时组件、获取源代码，或让智能体通过 MCP 获取所需版本。

浏览组件连接你的智能体

1,393 个组件 · 21 个分类 · 5,572 已测试的移植版本

探索细节。

有节奏的档案、有深度的唱片、随手而动的菜单。在这里直接体验组件。

浏览组件库

FB-1532 Masonry flow

井然有序，个性十足。

在档案内滚动，探索不断变化的构图。

查看组件

FB-1545 Tilt card

触手可感的深度。

在唱片上移动指针，观察光线随之变化。

查看组件

FB-1528 Dock menu

悬停或选择图标以切换工作区。

查看组件

从你的构建目标开始

选择产品类别，查找针对性组件，或按构建方案将组件连接为完整界面。

浏览构建方案

按钮

442

响应指针的按压、切换和行动按钮。

查看全部

Add Then Confirm Chip按钮

2707Amber upload pill按钮暖色渐变胶囊上传按钮带明亮边缘，悬停时彩色投影扩散，文字背后亮起。

Anaglyph wobble button按钮

Annotated anatomy button按钮

输入控件

104

状态清晰的输入框、验证码、选择器和开关。

查看全部

2297Addon Input Group输入控件共用边框的输入框组合，可放置前置图标、尾部按钮或文字，整个组合共用一个焦点环。

2108Appointment Range Card输入控件将单月日期网格与下方开始、结束时间输入框组合在一起的紧凑卡片，可同时选择日期和时间段。

Appointment Scheduler Card输入控件

2792Auto Grow Textarea输入控件多行文本框随输入内容增多而增高，避免在固定高度的框内滚动。

背景

位于内容背后的满幅画布、色域和渐变底色。

查看全部

Assistant Ripple Glow背景

2110Aurora band glow背景横跨深色画面的柔和光带，边缘随多层噪声起伏，色彩沿光带流动。

Aurora curtain背景

1526Aurora veil背景深色底上的三条漂移光带铺满背景，交汇处亮度叠加，上层说明文字保持清晰可读。

文字效果

渐显、扰动、计数或流动的文字。

查看全部

Ascii Art Heading文字效果

Aurora glow heading文字效果

Binary Decode Text文字效果

Blur in word reveal文字效果

图表

使用 SVG 绘制的折线、面积、柱状和环形图，无需图表库。

查看全部

1840Activity cell heatmap图表由浅色小方块组成的日历网格，以对角波浪效果入场，可通过等级条单独查看某一强度。

2104Animated Time Axis图表折线图下方的日期标签自动选取等间距子集以避免拥挤，并淡化悬停数据点附近的标签。

Animated Value Axis图表

1525Area chart lite图表响应式 SVG 面积图，含圆整数值刻度、渐变填充、读取指针下数据的十字准线，以及描绘式揭示动画。

图标

手工绘制的动态图标和加载动画。

查看全部

Accessibility icon图标

1612Activity icon图标生命体征曲线从左到右沿直线绘出，出现一次尖峰后重新变平。

Airplay icon图标

Alarm clock icon图标

打开完整索引

面向编程智能体

选中组件，让智能体完成构建。

智能体几乎能构建任何东西，难点在于确定外观。实时浏览目录，凭视觉选择，再将卡片上的组件编号交给智能体。它会通过 Fieldbook MCP 获取组件、属性和移植版本，支持五种框架。配置说明见 MCP 文档.

Codex · 终端

codex mcp add fieldbook --url https://fieldbook.lizardi.mx/api/mcp --bearer-token-env-var FIELDBOOK_TOKEN

项目需求超出组件库范围？

与 Lizardi Studio 合作

动效就绪的组件。

井然有序，个性十足。

触手可感的深度。

灵敏响应的导航。

从你的构建目标开始

按钮

输入控件

背景

文字效果

图表

图标

选中组件，让智能体完成构建。