スキル自身の言葉で
このスキルは、プレミアムなワークスペースプラットフォームに触発された、超ミニマルでドキュメント風のウェブインターフェースを生成します。オフホワイトとチャコールを基調とした温かみのあるモノクロパレットを強制し、エディトリアルなセリフ体とジオメトリックなサンセリフ体を用いた独自のタイポグラフィ階層、そしてミュートしたパステルアクセントを添えたフラットなベントグリッドレイアウトを採用します。
このプロトコルでは、Inter、Roboto、Open Sans フォント、Lucide や Heroicons のような標準アイコンライブラリ、Tailwind のデフォルトの重いシャドウ、グラデーション、絵文字、AI的な決まり文句の文章表現を厳しく禁止しています。コンポーネントには 1px solid #EAEAEA のボーダー、シャープな8〜12pxの角丸、十分な内側パディング、そして IntersectionObserver によるスクロール連動アニメーションを使用します。モーションは目に見えないほど洗練されており、transform と opacity のみでアニメーションします。
生成されるもの
- HTML、React、Tailwind、Vue によるフロントエンドコードが、この高級で洗練された、エディトリアルな美学をネイティブに反映すること
- 非対称なCSS Grid構造によるベントグリッドレイアウトと、十分なマクロホワイトスペース
仕組み
- 01最初にマクロホワイトスペースを確立する
セクション間には大きな垂直パディングを使用してください。具体的には Tailwind 単位で py-24 または py-32 とします。
- 02コンテンツ幅を制約する
エディトリアルな比例感を保つため、メインのタイポグラフィコンテンツを max-w-4xl または max-w-5xl に制限します。
- 03タイポグラフィ階層とモノクロ変数を適用する
温かみのあるモノクロパレットの仕様に従って、カスタムフォントとカラー変数を直ちに設定します。
- 04ボーダー基準を強制する
すべてのカード、区切り線、ボーダーは正確に 1px solid #EAEAEA を使用しなければなりません。
- 05スクロール連動アニメーションを追加する
window のスクロールリスナーではなく、必ず IntersectionObserver を使用して、すべての主要なコンテンツブロックにアニメーションを適用します。
- 06視覚的な奥行きを確保する
セクションには、空のフラットな背景ではなく、イメージ、アンビエントなグラデーション、または微妙なテクスチャによる奥行きが必要です。