Kiln
デザイン概要
Kiln は、React開発者向けオープンソースコンポーネントライブラリのサイトで、ボタン、入力、テーブル、日付選択など40以上のコンポーネントを動作するウォールとして展示します。クールホワイトの作業台、釉薬のようなアンバー、刻印された端面が、精密で抑制されたグリッドを作ります。
プロンプト
製品：Kiln。React開発者向けのオープンソースコンポーネントライブラリ。ボタン、入力、ドロップダウン、コマンドパレット、ダイアログ、ツールチップ、テーブル、日付選択など、40以上のコンポーネントを備え、テーマのカスタマイズに対応する。
ウェブサイトのホームページを構築し、必要に応じてコンポーネント詳細ページも作る：
- スクリーンショットではなく、実際に操作できるコンポーネントをホームページに直接表示する。「コンポーネントウォール」には、クリック、入力、切り替えができる動作中のコンポーネントを含める。
- 主要な開発者ツールウェブサイトの精密さと抑制を参考に、ほぼ白黒、アクセントカラーは多くても1色、厳密なグリッド、コードと数字には等幅書体を使う。
- テーマコントローラーを印象的にする。角丸、密度、アクセントカラーの操作をドラッグすると、ページ上のすべてのコンポーネントが即座に変わるようにする。
- コピー可能なインストールコマンド、コードスニペット、コンポーネントカテゴリー別のナビゲーション、GitHubスターや週間ダウンロード数などの現実的な使用数値を含め、過度にきりのよい数字は避ける。
中国語の元のプロンプトを見る
产品：「Kiln」，一个给 React 开发者用的开源组件库：按钮、输入框、下拉、命令面板、弹窗、提示、表格、日期选择等 40 多个组件，支持主题定制。
做它的官网首页（可以加一个组件详情页）：
- 首页要直接展示真实可交互的组件，而不是截图：一块“组件墙”里放着能点、能输入、能切换的真组件。
- 气质参考一线开发者工具官网的精确与克制：黑白为主，最多一种强调色，严格的网格，等宽字体用在代码和数字上。
- 记忆点：一个主题调节器，拖动圆角、密度或强调色，整页所有组件当场一起变化。
- 要有：安装命令（可复制）、代码片段、组件分类导航、一段真实的使用数据（例如 GitHub 星数、周下载量，数字不整齐）。
