clonecn

clonecn - shadcn/ui テーマジェネレーター

このスキルを使うと、既存のサイトやアプリ、または一般的なスタイルの方向性（例：「Appleのウェブサイトに似たテーマを生成する」「アクセントカラーにオレンジを使ったブルータリストテーマを作成する」）をもとに、shadcn/ui テーマ（スタイルファミリー（VegaやNovaなど）、CSS変数、追加のCSSスタイル）のアセットを作成または編集できます。

入力

• コピーするサイトやアプリのスクリーンショット
• コピーするサイトやアプリのURL（例：「apple.com」）
• コピーするサイトやアプリの名前（例：「Appleのウェブサイト」）
• 一般的なスタイルの方向性（例：「アクセントカラーにオレンジを使ったブルータリストなウェブサイト」）

ユーザーからURLまたはサイトやアプリの名前が提供された場合：

• そのサイトやアプリを知っている場合は、スタイルの説明を作成します。
• ウェブ検索、または利用可能であればPlaywright（下記の「Playwright」を参照）を使って、サイトやアプリのスクリーンショットを取得します。必ずライトモードとダークモードの両方を取得してください。
• 利用可能であればPlaywright（下記の「Playwright」を参照）を使って、主要なコントロール（ボタン、入力欄、カード、サーフェスなど）の計算済みCSSスタイルを取得します。

ユーザーから何も提供されていない場合は、入力として指定できる項目を説明し、提供するよう依頼してください。

Playwright

Playwrightを使うには、環境で利用可能か確認してください。実用的であれば、ワークスペースの依存関係にPlaywrightを追加せずに済むため、pnpm dlx playwright@latest ...を使ったアドホックなPlaywright CLIの使用を優先してください。

--color-schemeを使ってライトモードとダークモードの両方を取得し、--full-pageを使ってページ全体を取得してください。

例：

pnpm dlx playwright@latest install chromium
pnpm dlx playwright@latest screenshot --full-page --color-scheme light https://playbooks.com .output/playbooks-light.png
pnpm dlx playwright@latest screenshot --full-page --color-scheme dark  https://playbooks.com .output/playbooks-dark.png

アドホックなCLIの使用が実用的でなく、タスクに明らかにPlaywrightが役立つ場合は、ワークスペースにインストールしてください。ユーザーからスクリーンショットが提供されている場合は、Playwrightは不要です。

ワークフロー

1. デザインの参照元。ユーザーの入力（スクリーンショット、説明、URLなど）をもとに、デザインの参照元を定義します。色（プライマリ、セカンダリ、アクセント、背景、前景など）、間隔、スタイル（ブルータリスト、フラット、スキューモーフィック、ミニマリストなど）を指定します。
2. shadcn/uiテーマの定義。デザインの参照元にできるだけ合致するshadcn/uiテーマを生成します（詳細は「shadcn/uiのテーマ設定」を参照）。
3. まず、スクリーンショットに最も近いスタイルファミリー（Vega、Nova、Maia、Lyra、Mira、またはLuma）を選びます。
4. デザインの参照元に合うよう、ライトモードとダークモードのCSS変数ブロックをそれぞれ生成します。
5. スタイルファミリーとCSS変数ではデザインの参照元の重要な要素を再現できない場合は、追加のCSSスタイル（背景パターン、ボタンの特殊なスタイルなど）を加えることを検討します。
6. 調整。Playwrightが利用可能な場合は、chrome=0を指定してプレビューURLのスクリーンショットを撮影し（下記の「プレビューURL」を参照）、生成結果をデザインの参照元と比較します。必要に応じて調整してください。
7. 仕上げ。簡潔な出力を次の順序で返します。

• **Summary**: {スタイルの簡潔な要約}
• （任意）**Screenshots**:に続けて、Playwrightで撮影したスクリーンショット（ある場合はライトモードとダークモード）。
• **Style**: {スタイルファミリー}
• **CSS**:に続けて、CSS（CSS変数と追加のCSSがある場合はその両方）をフェンス付きコードブロックに記載します。
• **Preview**: [ブラウザーで開く]({preview URL})（下記の「プレビューURL」を参照）。調整後の最新版のテーマを含むプレビューURLを生成します。chromeオプションは使用しないでください。

shadcn/uiのテーマ設定

shadcn/uiのテーマは、次の3つの要素で構成されます。

• スタイルファミリー：Vega、Nova、Maia、Lyra、Mira、またはLuma。
• CSS変数：CSS変数を定義する:rootブロックと.darkブロック。
• （任意）追加のCSS：CSS変数と選択したスタイルファミリーだけでは不十分な場合に、スタイルを上書きまたは拡張するために使います。

スタイルファミリー

テーマトークンの基盤となる、shadcn/ui の標準スタイルです。コンポーネントの間隔や密度、ボーダーの処理、デフォルトのシャドウの挙動、コントロールの角の丸みや鋭さを定義します。

デザインの方向性に最も近いものを、以下の6つから選んでください。

• nova：中程度の丸み、標準的な密度。ボタンは rounded-lg text-sm（sm／default／lg サイズで h-7／h-8／h-9）、入力欄は h-8 rounded-lg です。
• vega：nova よりくっきりしたアウトラインで、コントロールはやや大きめです。ボタンは rounded-md（sm／default／lg サイズで h-8／h-9／h-10）、入力欄は h-9 rounded-md です。アウトラインのあるコントロールは、より際立った印象になることがよくあります（コントロールによっては shadow-xs）。
• maia：コントロールの丸みが強く、横方向のパディングにゆとりがあります。ボタンは rounded-4xl（sm／default／lg サイズで h-8／h-9／h-10）、入力欄は h-9 rounded-4xl です。
• lyra：角は直角で、間隔はコンパクト、文字は小さめ、リングは細めです。ボタンは rounded-none text-xs ring-1（sm／default／lg サイズで h-7／h-8／h-9）、入力欄は h-8 rounded-none text-xs ring-1 です。
• mira：間隔が最も詰まっており、コントロールも最も小さい設計です。ボタンは text-xs で、パディングも小さめです（sm／default／lg サイズで h-6／h-7／h-8）。入力欄は h-7 rounded-md です。
• luma：コントロールの丸みが強く、表面は柔らかく塗りつぶしの多いデザインで、フォームコントロールも大きめです。ボタンは rounded-4xl でパディングは小さめ（sm／default／lg サイズで h-8／h-9／h-10）、入力欄は h-9 rounded-3xl です。

ガードレール：デフォルトで luma を選ばないでください。ピル型ボタン、高い丸みのあるフォームコントロール、塗りつぶしや柔らかい印象のコントロールサーフェスなど、ピル型の特徴が複数、参考デザインにはっきり見られる場合に限り luma を選んでください。要素が混在している場合や判断が難しい場合は、nova（密度の高いエンタープライズ向けのクロームでは vega）を優先してください。

CSS 変数（テーマトークン）

トークン	制御する内容	使用箇所
background / foreground	アプリのデフォルトの背景色とテキスト色。	ページシェル、ページセクション、デフォルトのテキスト。
card / card-foreground	高さのあるサーフェスと、その中のコンテンツ。	Card、ダッシュボードパネル、設定パネル。
popover / popover-foreground	フローティングサーフェスと、その中のコンテンツ。	Popover、DropdownMenu、ContextMenu、その他のオーバーレイ。
primary / primary-foreground	強調度の高いアクションとブランドサーフェス。	デフォルトの Button、選択状態、バッジ、アクティブなアクセント。
secondary / secondary-foreground	強調度を抑えた塗りつぶしアクションと補助サーフェス。	セカンダリボタン、セカンダリバッジ、補助的な UI。
muted / muted-foreground	控えめなサーフェスと強調度を抑えたコンテンツ。	説明、プレースホルダー、空の状態、ヘルパーテキスト、控えめなサーフェス。
accent / accent-foreground	インタラクティブなホバー、フォーカス、アクティブ状態のサーフェス。	ゴーストボタン、メニューのハイライト状態、ホバー中の行、選択項目。
destructive	破壊的なアクションとエラーの強調。	破壊的なボタン、無効な状態、破壊的なメニュー項目。
border	デフォルトの境界線と区切り線。	カード、メニュー、テーブル、区切り線、レイアウトの仕切り。
input	フォームコントロールの境界線と入力サーフェスのスタイル。	Input、Textarea、Select、アウトラインスタイルのコントロール。
ring	フォーカスリングとアウトライン。	ボタン、入力欄、チェックボックス、メニュー、その他のフォーカス可能なコントロール。
chart-1 ... chart-5	デフォルトのチャートパレット。	チャートと、チャートを使ったダッシュボードブロック。
sidebar / sidebar-foreground	サイドバーのベースサーフェスとデフォルトのサイドバーテキスト。	Sidebar コンテナとそのデフォルトのコンテンツ。
sidebar-primary / sidebar-primary-foreground	サイドバー内の強調度の高いアクション。	アクティブな項目、アイコンタイル、バッジ、サイドバーの CTA。
sidebar-accent / sidebar-accent-foreground	サイドバー内のホバー状態と選択状態。	サイドバーメニューのホバー状態、開いている項目、インタラクティブな行。
sidebar-border	サイドバー固有の境界線と区切り線。	サイドバーのヘッダー、グループ、内部の仕切り。
sidebar-ring	サイドバー固有のフォーカスリング。	サイドバー内のフォーカスされたコントロール。
radius	基本となる角丸のスケール。	カード、入力欄、ボタン、ポップオーバー、派生した radius-* トークン。

追加の CSS

再現性が大幅に向上する場合は、変数以外の軽量な CSS の調整も可能です。

• テクスチャや控えめなノイズ、
• より強調したボーダーやアウトラインの表現、
• 影のスタイル
• ボタンの立体感やスキューモーフィックな表現のヒント、
• カスタムの角丸表現、
• など

フォント

フォントは生成された CSS で直接処理し、ユーザー側で追加のセットアップが不要になるようにしてください。

次のパターンを使用します。

1. :root で --font-sans と --font-mono を定義します。
2. それらを重要な領域（例：body、見出し、コード風の UI）に割り当てます。
3. カスタムフォントが必要な場合は、（フレームワークやフォントローダーの設定ではなく）CSS の @import を介して Google Fonts を使用します。
4. ダークモードでタイポグラフィが実際に異なる場合に限り、.dark でフォントを上書きします。

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500;700&display=swap');

:root {
  --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

.dark {
  /* Optional: only if dark mode needs different font choices */
  /* --font-sans: ...; */
  /* --font-mono: ...; */
}

body { font-family: var(--font-sans); }
h1, h2, h3 { font-family: var(--font-sans); }
code, pre, kbd, samp { font-family: var(--font-mono); }

ガイドライン

• ユーザーが明示的に別のテーマを指定していない限り、必ずダークテーマとライトテーマの両方を用意してください。その際は、可能な限り参照資料（ユーザーが提供したスクリーンショット、Playwright のスクリーンショット、CSS など）のライトテーマとダークテーマを使用してください。難しい場合は、ダークテーマまたはライトテーマの文脈を考慮して、それぞれに適した具体的な色を決めてください（例：ダークモードでは --primary により明るい色合いが必要になる場合があります）。
• shadcn/ui のコンポーネントには、デフォルトのスタイル（境界線、角丸、影など）が適用されています。スタイルのない要素だと想定しないでください。
• --radius には px ではなく rem を使用し、適切な範囲（0rem〜1.25rem）に収めてください（明示的なユーザーの要望がある場合に限り、最大 2rem まで）。
• フラットに見せるべきコンポーネントには、目立つ境界線を追加しないでください。リングや影を無効にし、参照資料に明確な線が示されていない限り、境界線は透明にすることを検討してください。これは、特にボタンと入力欄で重要です。
• 色：
  • 重要な色に特に注意してください。
    • --background と --foreground は、アプリの背景色とテキストのデフォルト色を定義します。
    • --primary / --primary-foreground は、プライマリボタンや CTA の背景色とテキスト色に使用します。
    • --accent / --accent-foreground は、テーブル、サイドバー、ドロップダウンメニューなどのホバー時やアクティブ時の状態に使用します。
    • 識別しやすい --sidebar / --sidebar-foreground や --card / --card-foreground など、ほかの色にも注意を払ってください。
  • OKLCH の色を優先してください。
• フォント：
  • --font-sans に等幅フォントを、--font-mono にサンセリフフォントを設定しないでください。
  • 必要に応じて、body、見出し、code などの要素や、コンポーネント固有のセレクターにフォントを明示的に割り当ててください。たとえば、ボタン以外のすべての要素に等幅フォントを使用する場合は、body { @apply font-mono; } と .cn-button { @apply font-sans } を指定します。
  • ライトモードとダークモードでタイポグラフィが異なる場合に限り、.dark 内でフォント変数を上書きしてください。
  • セリフフォントが必要な場合は、--font-serif を定義し、--font-mono や --font-sans と同じように使用してください。
  • カスタムフォントには Google Fonts のみ を使用し、CSS の @import url('https://fonts.googleapis.com/...&display=swap') で読み込んでください。追加のセットアップ（next/font、npm のフォントパッケージ、ローカルのフォントファイル、手動での HTML 編集）は必要としないでください。
  • デフォルトのフォントスタックはそのまま維持してください。--font-sans ではデフォルトのサンセリフフォールバックを、--font-mono ではデフォルトの等幅フォールバックを残してください。
  • すべての cn-* クラスを列挙しないでください。見た目の再現性を大きく向上させる場合に限り、重要なセレクター（例：.cn-button、.cn-input、.cn-textarea、.cn-select-trigger、.cn-native-select、.cn-kbd）を含めてください。
  • フォントの使用方法について詳しくは、上記の「フォント」を参照してください。
• ボタン：
  • ボタンには以下のクラスがあります。
    • cn-button group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0
    • コンポーネントに適用されるスタイルのデフォルト（nova）は、cn-button に以下のとおり適用されます：focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4
    • バリアントとサイズのクラス
  • ボタンにグラデーションを使用する場合は、bg-clip-padding、境界線の色、ボックスシャドウによってボタンの周囲に縁取りができないようにしてください。
  • default、secondary、outline、ghost を個別に評価してください。
  • 参照資料でプロダクトの外観がより強調されている場合は、.cn-button クラスを直接上書きしてください。
• 入力欄：
  • 入力欄には以下のクラスがあります。
    • cn-input w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50
    • コンポーネントに適用されるスタイルのデフォルト（nova）は、cn-input に以下のとおり適用されます：dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm
  • 参照資料でプロダクトの外観がより強調されている場合は、--input を調整するだけで済ませず、該当する .cn-input、.cn-textarea、.cn-select-trigger、.cn-native-select クラスを直接上書きしてください。

例

:root {
  --background: oklch(0.9818 0.0054 95.0986);
  --foreground: oklch(0.3438 0.0269 95.7226);
  --card: oklch(0.9818 0.0054 95.0986);
  --card-foreground: oklch(0.1908 0.002 106.5859);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.2671 0.0196 98.939);
  --primary: oklch(0.6171 0.1375 39.0427);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.9245 0.0138 92.9892);
  --secondary-foreground: oklch(0.4334 0.0177 98.6048);
  --muted: oklch(0.9341 0.0153 90.239);
  --muted-foreground: oklch(0.6059 0.0075 97.4233);
  --accent: oklch(0.9245 0.0138 92.9892);
  --accent-foreground: oklch(0.2671 0.0196 98.939);
  --destructive: oklch(0.1908 0.002 106.5859);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.8847 0.0069 97.3627);
  --input: oklch(0.7621 0.0156 98.3528);
  --ring: oklch(0.6171 0.1375 39.0427);
  --chart-1: oklch(0.5583 0.1276 42.9956);
  --chart-2: oklch(0.6898 0.1581 290.4107);
  --chart-3: oklch(0.8816 0.0276 93.128);
  --chart-4: oklch(0.8822 0.0403 298.1792);
  --chart-5: oklch(0.5608 0.1348 42.0584);
  --sidebar: oklch(0.9663 0.008 98.8792);
  --sidebar-foreground: oklch(0.359 0.0051 106.6524);
  --sidebar-primary: oklch(0.6171 0.1375 39.0427);
  --sidebar-primary-foreground: oklch(0.9881 0 0);
  --sidebar-accent: oklch(0.9245 0.0138 92.9892);
  --sidebar-accent-foreground: oklch(0.325 0 0);
  --sidebar-border: oklch(0.9401 0 0);
  --sidebar-ring: oklch(0.7731 0 0);
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
    'Courier New', monospace;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm:
    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md:
    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg:
    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl:
    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
  --tracking-normal: 0em;
  --spacing: 0.25rem;
}

.dark {
  --background: oklch(0.2679 0.0036 106.6427);
  --foreground: oklch(0.8074 0.0142 93.0137);
  --card: oklch(0.2679 0.0036 106.6427);
  --card-foreground: oklch(0.9818 0.0054 95.0986);
  --popover: oklch(0.3085 0.0035 106.6039);
  --popover-foreground: oklch(0.9211 0.004 106.4781);
  --primary: oklch(0.6724 0.1308 38.7559);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.9818 0.0054 95.0986);
  --secondary-foreground: oklch(0.3085 0.0035 106.6039);
  --muted: oklch(0.2213 0.0038 106.707);
  --muted-foreground: oklch(0.7713 0.0169 99.0657);
  --accent: oklch(0.213 0.0078 95.4245);
  --accent-foreground: oklch(0.9663 0.008 98.8792);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.3618 0.0101 106.8928);
  --input: oklch(0.4336 0.0113 100.2195);
  --ring: oklch(0.6724 0.1308 38.7559);
  --chart-1: oklch(0.5583 0.1276 42.9956);
  --chart-2: oklch(0.6898 0.1581 290.4107);
  --chart-3: oklch(0.213 0.0078 95.4245);
  --chart-4: oklch(0.3074 0.0516 289.323);
  --chart-5: oklch(0.5608 0.1348 42.0584);
  --sidebar: oklch(0.2357 0.0024 67.7077);
  --sidebar-foreground: oklch(0.8074 0.0142 93.0137);
  --sidebar-primary: oklch(0.325 0 0);
  --sidebar-primary-foreground: oklch(0.9881 0 0);
  --sidebar-accent: oklch(0.168 0.002 106.6177);
  --sidebar-accent-foreground: oklch(0.8074 0.0142 93.0137);
  --sidebar-border: oklch(0.9401 0 0);
  --sidebar-ring: oklch(0.7731 0 0);
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
    'Courier New', monospace;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm:
    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md:
    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg:
    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl:
    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
}

プレビュー URL

プレビュー URL には、完全な生の CSS 文字列（UTF-8 の Base64URL エンコード）を URL ハッシュにエンコードし、mode と style を含める必要があります。プレビューの表示部分を指定するクエリパラメーター chrome=0|1 も含められます（0 はヘッダーとフレームを非表示にし、1 は表示します）。例：https://clonecn.com/?chrome=0#css={encoded CSS}&mode=light|dark&style=nova|vega|maia|lyra|mira|luma。

scripts/encode.js を使ってプレビュー URL を生成します。

node scripts/encode.js --css ./theme.css --mode dark --style vega --chrome 0

パラメーター：

• --css <path>：エンコードする CSS ソースファイルのパス（完全な :root ブロック、完全な .dark ブロック、および追加の CSS オーバーライドを含めてください）。デフォルト：./theme.css。
• --mode <light|dark>：URL ハッシュ内の初期プレビューモード。デフォルト：dark。
• --style <nova|vega|maia|lyra|mira|luma>：URL ハッシュ内のスタイルファミリー。デフォルト：vega。
• --chrome <0|1>：URL クエリ内のプレビュー表示部分（0 はヘッダーとフレームを非表示にし、1 は表示します）。デフォルト：1。調整ステップでのみ使用し、出力には使用しないでください。
• --origin <url>：プレビューアプリのオリジン。デフォルト：https://clonecn.com。