AIにそのまま「サイトを作って」と頼むと、どれも似た見た目になります。角丸のカードが3つ並び、淡い影がついて、絵文字のアイコンが入る。あの形です。
この50個は、その形を封じるための指示書です。色・書体・余白・線の太さを数値で決めてあり、いちばん大事な「使ってはいけない形」も書いてあります。
だから名前をひとつ指定するだけで、同じ材料でもまったく違う見た目になります。
置く場所は、使うAIによって変わります。当てはまるものを1つ読んでください。
受け取ったZIPを解凍し、中の web-design フォルダごと、下の場所に入れます。
| Mac | ~/.claude/skills/ |
|---|---|
| Windows | ユーザーフォルダの中の .claude\skills\ |
入れたら、Claude Code で「swiss-editorial のデザインで作って」と頼むだけです。
再起動は要りません。フォルダを入れた時点で使えます。.claude が見当たらないときは隠しフォルダになっています。Macは Finder で command + shift + .（ピリオド）を押すと表示されます。
設置は要りません。designs フォルダから使いたい様式のファイルを1つ開き、中身をすべてコピーしてAIに貼り付けます。
貼り付けたあとに、作りたい内容を伝えます。中身はただの文章なので、どのAIでも読めます。
設置は要りません。gallery フォルダの中の index.html をダブルクリックすると、ブラウザで一覧が開きます。
50枚のトップページが並んでいます。明るさ・色数・余白・装飾・印象で絞り込めます。
中身の文章と写真は50枚とも同じです。違って見えるのは様式の差だけです。
気に入ったものの「名前をコピー」ボタンを押します。swiss-editorial のような英数字がコピーされます。
作りたい内容をAIに渡すとき、最後にその名前を添えます。
下の「頼み方」に、そのまま使える例文があります。
＜ ＞のところを自分の内容に置き換えます。
＜作りたいもの＞を作ってください。 デザインは scandinavian でお願いします。 ・会社名：＜ ＞ ・伝えたいこと：＜ ＞ ・載せる項目：＜ ＞ ・写真：＜あれば渡す。無ければ「なし」と書く＞
名前を別のものに変えれば、同じ材料のまま見た目だけが変わります。何度でも試せます。
色や書体の決まりはそのまま効きます。変わるのは1枚の大きさだけです。頼むときに「スライドで」「A4で」と添えてください。
| サイト | そのまま頼む |
|---|---|
| スライド | 1枚 1280×720px（16:9） |
| 紙（A4縦） | 1枚 794×1123px |
スライドと紙は、ブラウザの印刷からPDFに書き出せます。
swiss-editorial のようにハイフンまで含めた形が必要です。気に入ったサイトがあれば、その見た目を51番目として書き起こせます。AIに「このデザインを様式ファイルにして」と頼むだけです。
既存の50個と同じ書き方にしておけば、名前を言うだけで使えるようになります。
様式は designs/ に1つずつ入っています。中身は文章なので、そのまま読めます。
見本は gallery/pages/ に入っています。写真を差し替えるときは gallery/assets/ の4枚を同じ名前で置き換えてください。