← スキル一覧にもどる
🔬

サイトデザイン解析

site-design-analyzer / 画像・サムネ 単体ツール

気になるサイトの色・フォント・グラデーションを、実スクショ付きで丸裸にする。

4,980円(税込・買い切り)
このスキルを購入する(4,980円)

クレジットカード決済(Stripe)。決済が完了すると、ご登録のメールアドレスへダウンロードリンクを自動でお送りします。
デジタル商品のため、ダウンロード後の返品・返金はお受けできません。動作しない場合はご連絡ください、個別に対応いたします。

どんなスキルか

URLからグラデーション、フォント、カラーパレット、コンポーネント仕様を抽出し、実際のスクリーンショット付きのガイドページとして公開します。「このサイトみたいな感じで」という依頼を、具体的な数値に翻訳できます。

できること

  • カラーパレット・フォント・グラデーションを抽出
  • 実スクショ付きのガイドページを自動公開
  • 曖昧なデザイン依頼を数値仕様に変換できる

必要なもの

Claude Code(必須)に加えて、下記が必要です。

Claude Code Node.js surge等の静的ホスティング

同梱物

ZIP 1本(1ファイル・約7KB)。Claude Codeのスキルは手順書そのものが本体です。ここに書かれた進め方・判断基準・失敗の避け方をClaude Codeが読み取って動きます。補助スクリプトを使うスキルには、それも同梱されています。

SKILL.md

使い方

購入後に届くZIPを展開し、フォルダごとスキル置き場にコピーするだけです。Claude Codeを再起動すると認識されます。

unzip site-design-analyzer.zip
cp -r site-design-analyzer ~/.claude/skills/

あとはClaude Codeに /site-design-analyzer と打つか、やりたいことをそのまま話しかければ起動します。詳しい手順は使い方のページにまとめています。