本文へスキップ
新機能: グラデーションとパレットのジェネレーター

チームに必要なすべてのブロック、カラー、ツール を、静かな一つのワークスペースに

ADYSRE はコンポーネント、アイコン、カラー、サーフェス、テンプレート、ツールを一つのワークスペースにまとめ、アプリを切り替えずにアイデアから本番まで進められます。

閲覧にカードは不要です世界中で 18,000+ のビルダーに信頼されています

ウェブサイトインテリジェンス

どんなサイトの問題も正確に把握

任意の公開URLを指定すると、SEO、セキュリティ、HTML、アセット、ベストプラクティスを一つのレポートにまとめます。52件のルールベース検査を使用。パフォーマンスとCore Web Vitalsはブラウザエンジンとともに提供されます。

11
スキャンごとの解析
52
ルールベースの検査
4
エクスポート形式
  • パフォーマンス
  • SEO
  • アクセシビリティ
  • ベストプラクティス
  • セキュリティ
  • Core Web Vitals
  • 技術検出
  • アセット最適化
  • HTML構造
  • AIレコメンド
  • 履歴比較

一つのワークスペースに、あらゆる部品

各モジュールはすぐに閲覧・コピーしてプロダクトに組み込めます。ログイン後はサイドメニューからいつでも開けます。

ビジネスルール

ビジネスルールエンジン

ひとつのルールを同時に三つの形で。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
HTTPメソッド
9
認証方式
9
ボディ形式
6
アサーション演算子
11
  • コレクションとフォルダー
  • 環境と変数
  • 認証を標準搭載
  • リクエスト履歴
  • アサーションとテスト
  • セルフホスト

オープンソース

コピペではなく、npm から導入する

このサイトにあるブロック、アイコン、グラデーション、パターン、テクスチャのすべてがインストール一回で使えます。型付き、ツリーシェイク対応、React でも Next.js でもそのまま。

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>
  );
}

白紙からリリースまで、3 ステップで

どのモジュールも同じ流れ。チーム全員が同じように進められます。

1

探す

すべてのモジュールを横断検索し、決める前に各結果をライブでプレビュー。

2

調整する

色、ウェイト、フレームワークを調整し、トークンに合った出力をコピー。

3

届ける

プロダクトに貼り付けてそのまま前進。手直しもロックインもありません。

決める前に動きを確認

プロダクトと同じデザイントークンで作られたライブプレビュー。

グラデーション

貼り付け対応の CSS 背景

パレット

トークン対応のカラーセット

アイコン

調整可能、ワンクリックでコピー

パターン

画像ファイル不要の CSS 背景

テクスチャ

グレインとサーフェス仕上げ

コンポーネント

型付きで本番対応

毎週成長中

テンプレート

セクションではなく、サイトまるごと

31 種類のフルテンプレート。全ページをまとめて設計してあり、どのセクションも自由に編集できます。ライブでプレビューし、プロンプトで複製し、動くプロジェクトとしてダウンロードできます。

31 件すべてを見る

どのプランにも追加料金なしで含まれます。

FAQ

よくある質問

始める前に知っておきたいこと。

まだ質問がありますか?導入をお手伝いします。

お問い合わせ
ADYSRE とは?

コンポーネント、アイコン、パレット、グラデーション、テンプレートを一つにまとめ、プロダクトにコピーできるデザインと開発のワークスペースです。

対応フレームワークは?

コンポーネントは HTML、CSS、Tailwind、React、Next.js、TypeScript で提供され、多くのモダンな構成に組み込めます。

テンプレートはいつ?

テンプレートは開発中です。テンプレートページで内容をプレビューし、公開をいち早く受け取れます。

無料プランはありますか?

はい。カードなしで充実した無料分を利用できます。一度の支払いで、今後の追加分も含めてすべて解放されます。

チーム全員で使えますか?

はい。チームアクセスは組織で一つのワークスペースを共有し、全員が同じモジュールを使えます。

摩擦の少ない開発を始めませんか?

ワークスペースを開き、サイドメニューから全モジュールを閲覧。セットアップも手直しも不要。