写意

Command Palette

Search for a command to run...

图卷·页面画廊Page Gallery

完整页面级布局参考，把组件嵌入真实场景，照着就能落地。

骨相·应用骨架Application Shell

14 个

完整页面的整体布局参考：后台、IDE、表单页、数据页等骨架。先看这个，确定你的产品长什么样。

堆叠布局Stacked

顶部栏 + 居中窄栏堆叠的详情页

应用主框架资源详情页组件详情项目概览工单 / 订单详情
写意二
组件

Button 按钮

已发布
版本
v1.4.0
最后更新
2 小时前
依赖
@base-ui/react
使用位置
该按钮在示例站点各页面的分布
页面用法次数
数据面板导出报表4
登录 / 注册页登录、注册提交2
设置页保存、更新操作3
看板添加卡片3
合计12
本周使用
128 次
较上周 +12%
最近动态
二
二哥 优化 hover 态过渡曲线
2 小时前
韩
韩梅梅 修复暗色下 focus 环不可见
昨天
张
张伟 新增 loading 图标位
3 天前

多栏布局Multi-column

左导航 + 中列表 + 右详情的三栏联动

邮件收件箱消息中心工单系统项目管理工具文件管理器
收件箱4 条

数据面板Dashboard

指标卡 + 趋势图 + 动态流

后台首页概览运营数据周报个人中心数据墙SaaS 产品指标页

概览

今日访问
1,284
+12% 较昨日
新增用户
86
+5% 较昨日
转化率
3.2%
-0.4% 较昨日
营收
¥9,420
+8% 较昨日
访问趋势
1月
2月
3月
4月
5月
6月
最近动态
二
二哥 发布了新组件 Button
2 分钟前
韩
韩梅梅 更新了设置页
15 分钟前
系
系统 完成每日备份
1 小时前
张
张伟 合并了 PR #42
3 小时前

编辑器布局IDE

文件树 + 代码区 + 预览三栏

代码编辑器IDE 工作台在线预览工具低代码搭建器
资源管理器
src/App.tsx
src/main.tsx
package.json
README.md
tsconfig.json
1export default function App() {
2 const [count, setCount] = useState(0);
3 return (
4 <button onClick={() => setCount(count + 1)}>
5 clicked {count} times
6 </button>
7 );
8}
预览
clicked 0 times

综合表单页Form

文本/邮箱/电话/多行/下拉/单选/多选/开关/上传/日期，含必填与错误态

账户设置用户资料注册表单配置页
账户资料
完善你的个人与账户信息。带 * 为必填项。
基本信息

邮箱格式不正确，请检查

用于登录与找回密码

一句话介绍你自己

账户设置

选择你希望接收提醒的渠道

可多选，用于推荐相关示例

二
偏好设置

数据列表管理Data Table

搜索 + 表格 + 删除确认

后台数据表用户管理订单列表内容审核后台
名称负责人状态更新时间
项目 A李雷进行中2 小时前
项目 B韩梅梅已完成昨天
项目 C张伟待审核3 天前
项目 D王芳进行中5 天前
项目 E刘洋已完成上周

登录 / 注册页Auth

Tab 切换的认证卡片

产品登录入口注册引导账号密码认证页
欢迎回来
登录以继续管理你的写意账号
或使用以下方式继续
还没有账号？

设置页Settings

左分组导航 + 分区块滚动内容

账户设置中心产品偏好配置后台配置页应用个性化面板

设置

管理写意站点的个人偏好与安全选项。

个人资料

这些信息将展示在你的个人主页。

昵称
二哥
署名
B站·宝藏二哥AIA

外观

主题与语言偏好，即时生效。

主题
跟随系统
语言
简体中文
自动切换暗色
跟随系统外观在明暗主题间自动切换

通知

选择你希望接收的通知类型。

邮件通知
组件评审与版本发布提醒
推送通知
在浏览器接收实时推送
@提及
有人在讨论中提及你时提醒

安全

管理登录设备与备用验证方式。

已登录设备
3 台

看板Kanban

待办 / 进行中 / 已完成

任务看板项目管理板销售漏斗工作流看板
待办2
李设计登录页
韩编写文档
进行中1
张搭建组件库
已完成2
王需求评审
刘项目初始化

任务待办Todo

增删改的清单

个人待办清单购物清单每日任务轻量事项管理
任务清单
剩余 2 项
  • 阅读组件文档
  • 搭建示例页面
  • 提交代码

时间轴Timeline

垂直时间线

项目进展时间线版本更新日志订单流转个人履历
  1. 09-01
    项目启动
    完成需求评审与技术方案
  2. 09-02
    脚手架搭建
    Next.js + Tailwind + shadcn 落地
  3. 09-03
    示例编写
    组件示例与页面级布局
  4. 09-04
    内部评审
    设计走查与无障碍核对
  5. 09-05
    发布上线
    部署到生产环境

横向时间轴Horizontal Timeline

横向步骤时间线

订单流程多步骤进度申请审批项目里程碑
  1. 09-01
    项目启动
    需求评审与技术方案
  2. 09-02
    脚手架搭建
    Next.js + Tailwind + shadcn
  3. 3
    09-03
    示例编写
    组件示例与页面级布局
  4. 4
    09-04
    内部评审
    设计走查与无障碍核对
  5. 5
    09-05
    发布上线
    部署到生产环境

标题Headings

页头范式：元信息 / 面包屑 / 头像统计 / 次级层级

页面排版规范详情页页头个人主页头设置分组标题内容层级示范
组件详情

Button 按钮

已发布
v1.4.0 B站·宝藏二哥AIA 2 小时前更新 @base-ui/react
首页/组件/版本发布

v1.5 版本发布

汇总本次版本的组件变更与示例更新，发布前请完成走查。

二

二哥

B站·宝藏二哥AIA · 站点维护者
28
组件
15
示例
21
概念

基本信息

卡片级标题：用于表单与设置区块，字重与字号次于页面标题。

高级选项
章节标题：muted 小字加大写间距，用于次级分组的收束。

鸣钟·反馈与提示Feedback & Alerts

13 个

各种提示、加载、空状态、操作结果的页面示例。学怎么给用户「刚刚发生了什么」的反馈。

进度条Progress

百分比进度条 + 步骤进度

文件上传表单分步订单流程任务完成度
上传文件25%
处理数据50%
生成报告75%
订单进度
  1. 购物车
  2. 配送
  3. 3
    支付
  4. 4
    确认

警报 · 描述提示Alert

图标 + 标题 + 描述的浅底提示

存储提醒审核结果维护公告上下文提示
注意：即将达到存储上限
当前空间已使用 92%，建议清理历史版本，或升级容量后继续上传。
有 2 个组件待审核
「Tabs 标签页」与「Tooltip 文字提示」已提交，等待维护者复核。
发布完成
「写意 v1.5」已发布至生产环境，示例与文档已同步更新。
提交失败，请修复 2 处错误
组件名不能包含空格，版本号需符合语义化版本规范（如 1.4.0）。

警报 · 错误列表Alert List

错误摘要 + 无序列表逐条说明

表单校验错误导入失败清单必填项缺失提示
提交失败，请修复 3 处错误
  • 组件名不能包含空格与特殊字符
  • 版本号需符合语义化版本规范（如 1.4.0）
  • 描述字段长度不能超过 140 个字符

警报 · 操作按钮Alert Actions

成功提示 + 底部按钮组

发布完成支付成功流程结束确认
发布完成
「写意 v1.5」已发布至生产环境，示例与文档已同步更新。

警报 · 实底横幅Solid Banner

深底通栏 + 右侧箭头链接

新版本上线系统公告全站级重要消息

写意 v1.5.0 现已可用

新增 12 个组件示例与 6 个页面布局。

查看更新日志

警报 · 强调边框Accent Border

品牌色左竖条 + 内嵌链接

额度提醒升级引导关键信息强调

免费额度即将用完，升级账户以解锁无限组件导出。

警报 · 可关闭Dismissible

成功提示 + 右上角关闭（可恢复）

上传成功任务完成可关闭的即时反馈
上传成功
「Button 按钮」示例包已发布到组件库。

空状态 · 极简Simple

圆形图标 + 短语 + 主按钮

列表无数据评论区为空首次进入
还没有收到任何反馈
组件发布后，使用者会在评论区留下使用感受与改进建议。

或者了解如何收集反馈

空状态 · 边框卡片Bordered Card

实线边框卡片内的居中引导

板块首次使用内容为空但功能已就绪

创建你的第一个示例

示例是学习组件用法最直接的入口。从常用页面布局开始，或复制提示词让 AI 先生成一版初稿。

或者复制提示词让 AI 生成初稿

空状态 · 快捷操作Quick Actions

彩色图标网格 + 底部更多链接

新手引导功能入口聚合开始使用页

开始使用写意

这里还没有内容。可以从下面的任一操作开始，几分钟内建立你的第一个页面。

查看全部快捷操作 →

空状态 · 邀请协作Invite

深色卡 + 邀请表单 + 最近添加列表

邀请团队成员冷启动协作社区早期
添加团队成员
邀请协作维护组件库。成员可以在示例下评论、参与评审并接收版本通知。
最近添加
  • 李李雷组件工程师
  • 韩韩梅梅交互设计师
  • 张张伟前端开发

空状态 · 操作列表Action List

纵向操作行 + 描述 + 更多链接

创建引导多种起步路径替代方案建议

创建你的第一个项目

还没有任何项目。以下三种方式都可以开始，之后随时可以回来补充。

浏览更多建议 →

空状态 · 推荐网格Recommend Grid

居中引导 + 搜索 + 两列最近添加

邀请成员推荐关注最近项目展示
添加团队成员
按邮箱搜索或邀请，被邀请的成员将收到一封说明邮件。
最近添加
李李雷组件工程师
韩韩梅梅交互设计师
张张伟前端开发
王王芳内容运营

卷册·列表与数据Lists & Data

8 个

表格、卡片列表、树形、看板等以「罗列内容」为主的页面。信息密度高时照这个排。

描述列表 · 左对齐Left Aligned

dt/dd 两列网格展示详情字段

组件详情申请信息对象属性一览

组件信息

「Button 按钮」的基础属性一览。

版本
v1.4.0
分类
输入
作者
B站·宝藏二哥AIA
最后更新
2 小时前
依赖
@base-ui/react
许可
MIT
查看完整文档 →

描述列表 · 卡片内In Card

同款两列 dl 包进边框卡片

详情面板侧栏信息块内容流内嵌
组件信息
「Button 按钮」的基础属性一览。
组件名
Button
稳定
版本
v1.4.0
维护者
二哥
分类
form
公开
引入路径
@/components/ui/button

描述列表 · 双栏Two Columns

字段多时左右两栏纵向成对

站点信息报告汇总多字段详情

站点信息

字段较多时，拆成左右两栏能保持一屏读完。

组件总数
28
当前版本
v1.5.0
页面示例
25
站点作者
B站·宝藏二哥AIA
基础概念
21
上次发布
2 小时前

描述列表 · 分行操作Row Actions

每行键值 + 行尾更新/移除

集成管理关联账号可变更配置

集成应用

已接入的外部服务，可随时更新或移除。

GitHub 仓库
提交记录自动同步到变更日志
Figma 镜像
设计稿与组件一一对应
Vercel 预览
每个 PR 自动生成预览环境

描述列表 · 带状态With Status

行尾状态圆点指示（深色卡）

服务状态任务进度健康检查

服务状态

站点依赖的内部服务实时状态。

构建服务
每 30 分钟巡检一次
运行中
文档站
静态托管，全球加速
运行中
预览环境
夜间自动回收
已暂停
查看服务总览 →

堆叠列表 · 基础Basic

头像 + 双行文字 + 元信息 + 行尾操作

动态流通知列表成员列表
  • 李
    李雷 评审了 Button 组件
    hover 曲线建议统一改为 ease-out
    10:24查看编辑
  • 韩
    韩梅梅 更新了示例文档
    9 个页面级示例补充了使用场景说明
    昨天查看编辑
  • 张
    张伟 关闭了 issue #42
    暗色下 focus 环不可见已修复
    3 天前查看编辑
  • 王
    王芳 合并了 PR #58
    新增时间轴横向示例
    上周查看编辑

堆叠列表 · 带状态With Status

每行带彩色状态徽章

任务工单内容审核发布流程
  • Button 按钮 · hover 态优化
    过渡曲线与时长统一
    2 小时前已发布
  • Dialog 对话框 · 焦点陷阱修复
    关闭后焦点回到触发器
    昨天审核中
  • Accordion · 键盘导航
    支持方向键在项之间移动
    3 天前草稿

堆叠列表 · 带列头With Header

列头行 + 邮箱式对齐行

消息收件申请列表多列对齐
发件人 / 主题时间操作
  • 李Button hover 态评审10:24查看
  • 韩示例页排版走查结果09:41查看
  • 系每周构建报告周一查看

圭表·统计指标Metrics

4 个

仪表盘、数据概览、图表汇总类页面。需要一眼掌握关键数字时参考。

统计 · 带涨跌With Trending

标签 + 涨跌 + 大数字的四联卡

运营数据指标概览报表头部
组件下载量
+12.5%
405,091
月活跃访客
-4.5%
12,878
示例完成率
+1.2%
98.5%
平均构建时长
-8.3%
3.65 分

统计 · 卡片组In Cards

区头 + 浅底容器内三张白卡

订阅概览周期数据报表区块

订阅概览

近 30 天
新增订阅者
71,897
平均打开率
58.16%
平均点击率
24.57%

统计 · 品牌图标Brand Icon

品牌色图标 + 涨跌 + 更多链接

订阅数据关键指标带入口的概览

订阅概览

近 30 天
+122
新增订阅者
71,897
-1.4%
平均打开率
58.16%
+9.09%
平均点击率
24.57%
查看完整报表 →

统计 · 共享边框Shared Borders

深底整条 + 内部分隔线

页头指标条深色概览紧凑数据条
近 30 天
新增订阅者
71,897+122
平均打开率
58.16%-1.4%
平均点击率
24.57%+9.09%

长河·动态流Activity

3 个

时间线、动态、通知、消息流这类「按时间滚动」的页面。做社区、工作台、日志时看这里。

动态流 · 图标时间线With Icons

竖线 + 彩色节点 + 右侧日期

流程进度发布历史审批轨迹
  • 提交评审：Button hover 态优化09-01
  • 进入发布排期09-12
  • 完成设计走查09-18
  • 合入 main 分支09-20
  • 发布 v1.5.009-24

动态流 · 评论协作With Comments

深色卡评论流 + 输入框

评审讨论协作反馈工单留言
  • 李
    李雷 添加了评审意见3 小时前
    hover 曲线改成 ease-out 之后明显顺滑，建议同步到 Dialog。
  • 韩
    韩梅梅 标记该评审为已通过2 小时前
  • 张
    张伟 添加了评审意见1 小时前
    暗色下 focus 环补了内阴影，麻烦再走查一遍。
二

动态流 · 多类型事件Multiple Types

段落 / 动作 / 提及混合事件

活动流仓库动态版本动态
  • 李
    李雷 更新了组件文档2 小时前

    补充了 Button 在表单与对话框两种场景下的用法差异，并新增暗色下的状态截图。

  • 韩梅梅 推送了新分支 fix/focus-ring4 小时前
  • 提及了 2 位成员：李雷、张伟
  • 张
    张伟 发起了评审昨天

    Accordion 键盘导航的第一版实现，支持方向键与 Home / End，请重点检查 aria 属性是否完整。

    提及了 2 位成员：李雷、韩梅梅