跳到内容
ADYSRE
新功能：渐变与调色板生成器

团队所需的每个模块、颜色与工具 都在一个从容的工作区里

ADYSRE 将组件、图标、颜色、表面、模板和工具汇聚一处，让团队无需切换应用，就能从想法走到生产。

打开设计工作台打开工作区浏览组件
浏览无需绑卡全球 18,000+ 位开发者的信赖之选
画板团队方案区块1440 × 900100%

团队版

团队共享工作区

开通团队权限
已自动保存
图层
属性
宽度
288
圆角
12
填充
#00afb9
来源
adysre/blocks

每周都在成长

0+组件
0+图标
0+配色
0+渐变
0+图案
0+纹理
0+在建团队

网站智能分析

精准掌握任意网站的问题所在

指向任意公开网址，即可获得一份涵盖 SEO、安全、HTML、资源与最佳实践的报告，依托 52 项基于规则的检查。性能与 Core Web Vitals 将随浏览器引擎一同推出。

进入平台
扫描器11每次扫描的分析项52规则检查4导出格式
  • 性能
  • SEO
  • 无障碍
  • 最佳实践
  • 安全
  • Core Web Vitals
  • 技术识别
  • 资源优化
  • HTML 结构
  • AI 建议
  • 历史对比

模块库

一个工作区，涵盖每一块积木

每个模块都可即刻浏览、复制并放入你的产品。登录后可随时从侧边菜单打开。

01

组件

HTML、Tailwind、React 和 Next.js 的复制即用 UI 块，带类型，可直接用于生产。

02

图标

可调节字重的精选图标集，支持实时预览与一键复制为你所需的格式。

03

颜色与表面

调色板、渐变、图案和纹理，均由令牌驱动，随时可导出。

04

模板

将各模块组装成完整界面的页面与流程模板。

05

图像与实用工具

在浏览器中压缩、转换、调整大小、去除背景并读取码。

06

设计工作台

在无限画布上设计页面、仪表板和图形，无需编写代码。

素材

决定前先看它运行

用与你产品相同的设计令牌构建的实时预览。

素材
浏览调色板

业务规则

业务规则引擎

同一条规则，同时以三种形态呈现。JSON 树是唯一的事实来源；语句和判定都由它生成，就在本页，使用与你安装的完全相同的包。

order-approval.rule.json0.12 ms

规则

01
{
  "schemaVersion": 1,
  "id": "r_6",
  "name": "Large orders from new customers need approval",
  "description": "Anything over 1,000 from a new customer, or backdated, is held for a human.",
  "kind": "validation",
  "status": "draft",
  "version": 1,
  "priority": 0,
  "enabled": true,
  "tags": [
    "orders",
    "approval"
  ],
  "when": {
    "kind": "group",
    "id": "g_5",
    "combinator": "all",
    "children": [
      {
        "kind": "condition",
        "id": "c_1",
        "left": {
          "source": "field",
          "path": "order.total"
        },
        "operator": "greaterThan",
        "args": [
          {
            "source": "literal",
            "value": 1000
          }
        ]
      },
      {
        "kind": "group",
        "id": "g_4",
        "combinator": "any",
        "children": [
          {
            "kind": "condition",
            "id": "c_2",
            "left": {
              "source": "field",
              "path": "customer.tier"
            },
            "operator": "equals",
            "args": [
              {
                "source": "literal",
                "value": "new"
              }
            ]
          },
          {
            "kind": "condition",
            "id": "c_3",
            "left": {
              "source": "field",
              "path": "order.placedAt"
            },
            "operator": "before",
            "args": [
              {
                "args": [],
                "source": "function",
                "name": "today"
              }
            ]
          }
        ]
      }
    ]
  },
  "then": [
    {
      "id": "a_hold",
      "type": "requireApproval"
    }
  ],
  "otherwise": [
    {
      "id": "a_auto",
      "type": "autoApprove"
    }
  ],
  "metadata": {
    "createdAt": "2026-07-26T00:00:00.000Z",
    "updatedAt": "2026-07-26T00:00:00.000Z"
  }
}
@adysre/rules-corestringifyRule()

自然语言

02

Large orders from new customers need approval

When all of these are true:

Order total is greater than 1,000

any of these are true:

Tier is "new"

Placed at is before today

Then require approval

Otherwise auto approve

@adysre/rules-rendererdescribeRule()

针对订单运行

03
运行所针对的订单
Order total2400
Placed at"2026-07-26"
Tier"new"
匹配

判定过程

  • greaterThanmatched
  • equalsmatched
  • groupmatched
  • groupmatched
已应用的动作requireApproval
@adysre/rules-coreevaluateRule()
27
运算符
23
函数
7
规则类型
打开规则引擎

API 工作室

运行在你自己技术栈里的 API 客户端

集合、环境、鉴权与断言，与你在这里构建的一切一同自托管。请求在你自己的服务器上执行，发送的内容不会落到别人手里。

POSTCreate orderProduction
POST{{baseUrl}}/v1/orders发送
参数2请求头3请求体认证测试3

请求体

{
  "customerId": "{{customerId}}",
  "items": [
    { "sku": "ADY-2410", "quantity": 2 }
  ],
  "currency": "EUR"
}
201 Created时间 128 ms大小 412 B
{
  "id": "ord_7Kd91",
  "status": "confirmed",
  "total": 148.5,
  "currency": "EUR",
  "items": [
    { "sku": "ADY-2410", "quantity": 2 }
  ],
  "createdAt": "2026-07-27T09:14:02.881Z"
}

断言3/3

  • status equals 201passed
  • responseTime lessThan 500passed
  • jsonPath $.status equals confirmedpassed
9
HTTP 方法
9
鉴权方式
6
请求体类型
11
断言运算符
打开 API 工作室
  • 集合与文件夹
  • 环境与变量
  • 内置鉴权
  • 请求历史
  • 断言与测试
  • 自托管

开源

从 npm 安装，而不是复制粘贴

本站的每个区块、图标、渐变、图案和纹理，一次安装即可使用，完整类型、支持摇树优化，可用于任何 React 或 Next.js 项目。

在 npm 上查看浏览目录
adysrev0.2.0MIT 许可
npm install adysre

样式只需接一次

一行引入即可获得设计变量，并让 Tailwind 扫描本包。没有使用 Tailwind？直接引入预编译好的样式表。

app/globals.css
@import "tailwindcss";
@import "adysre/styles.css";

然后随意引入

每个领域都有独立入口，引入一个按钮不会把整个目录打进你的产物。

app/page.tsx
import { Button } from 'adysre';
import { ArrowUpRight } from 'adysre/icons';
import { GradientSurface } from 'adysre/gradients';
import { AboutStats } from 'adysre/blocks';

export default function Page() {
  return (
    <GradientSurface gradient="warm-flame" className="rounded-2xl p-10">
      <AboutStats
        title="Where we are after six years"
        stats={[
          { label: 'People', value: '12' },
          { label: 'Projects shipped', value: '148' },
        ]}
      />
      <Button>
        Read the docs <ArrowUpRight size={16} />
      </Button>
    </GradientSurface>
  );
}

你会得到什么

模板

不只是区块，而是完整站点

31 套完整模板，所有页面统一设计，每个区块都可自行修改。可实时预览、用提示词克隆，或下载可直接运行的项目。

浏览全部 31 套模板所有套餐均已包含，无需额外付费。

流程

从空白到交付，只需三步

每个模块都用同一套流程，让全队步调一致。

  1. 01

    浏览

    在所有模块中搜索，决定前先实时预览每个结果。

  2. 02

    调整

    调整颜色、字重和框架，复制与你令牌一致的输出。

  3. 03

    交付

    粘贴进产品继续前进，无需清理，也不被锁定。

FAQ

常见问题

开始之前你可能想了解的一切。

联系我们
ADYSRE 是什么？

一个集设计与开发资源于一体的工作区：组件、图标、调色板、渐变和模板，随时复制进你的产品。

支持哪些框架？

组件以 HTML、CSS、Tailwind、React、Next.js 和 TypeScript 形式提供，可放入大多数现代技术栈。

模板何时上线？

模板正在积极开发中。打开模板页可预览即将推出的内容，并第一时间获知上线。

有免费方案吗？

有。你可以无需绑卡浏览并使用丰富的免费内容。一次付费解锁全部，包括我们日后新增的内容。

整个团队都能用吗？

可以。团队版让你的组织共享同一个工作区，人人使用相同的模块。

还有疑问？我们很乐意帮助你上手。

准备好更顺畅地构建了吗？

打开工作区，从侧边菜单浏览每个模块。无需搭建，无需清理。

打开工作区查看价格
浏览无需绑卡为现代产品团队打造。