01
このSkillでできること
- ✓ページの背景とセクションに地面・光源・陰影を加えて奥行きを表現する
- ✓サイト固有の色・角丸・形状・テーマから表面、質感、モチーフを導出する
- ✓既存のHTMLを原則変更せず、単一のCSSブロックとして適用する
- ✓カードやセクションの階層感、背景の雰囲気、ホバー時の軽い浮き上がりを調整する
02
使い方
01
STEP 1
対象がマーケティングまたはコンテンツページであることを確認する
02
STEP 2
サイトのトークンや計算済みスタイル、カードの角丸、主題を基にデザイン要素を導出する
03
STEP 3
グローバルスタイルシート末尾などにunflat用の単一CSSブロックを追加する
04
STEP 4
必要に応じてそのブロックを削除して元の状態へ戻す
03
Skillのインストール
初心者におすすめ
AIにこのSkillを追加してもらう
GitHub URLごとCodexやClaude Codeへ渡し、現在の環境に合う方法を判断してもらいます。
このGitHubリポジトリにあるSkillを確認し、現在の環境に適した方法でインストールしてください。
インストール後、正常に利用できることを確認し、基本的な使い方も簡潔に説明してください。
Repository:
https://github.com/merturl4576/unflat手動でインストールする
README / SKILL.mdから機械抽出できたコマンドのみ表示しています。推測したコマンドではありません。
git clone https://github.com/merturl4576/unflat
cp -r unflat/skills/unflat ~/.claude/skills/unflat # or <project>/.claude/skills/unflat04
このSkillを使うプロンプト例
Skill名を明示すると、意図したSkillを使わせやすくなります。自動発動型では必須とは限りません。
このランディングページの平面的な印象を抑え、既存の配色・角丸・形状を使って、地面、単一の光源、控えめな質感、セクションの奥行きを追加してください。HTMLは変更せず、変更を単一の可逆CSSブロックにまとめてください。出力例を見る
既存のスタイル末尾に、`/* unflat: start */` から `/* unflat: end */` までの単一CSSブロックを追加し、背景の地面、固定の光、控えめなノイズ、選択したセクションの表面、カードの軽い影とホバー効果を定義する。05
安全性チェック
自動解析による参考情報です。Skillの安全性を保証するものではありません。
外部API通信明確な記述なし
Shellコマンド実行明確な記述なし
ファイル読み取り明確な記述なし
ファイル書き込み明確な記述なし
ネットワークアクセス明確な記述なし
認証情報明確な記述なし
06