テック技報最新号へ →
デザイン

/awwwards スキル：一行の依頼から「コンセプト3案→DESIGN.md→実ブラウザで撮影・採点」まで回させる

「ポートフォリオを作って、名前は◯◯」の一行から、コンセプトを3案出して1つに絞り、配色・書体・動きをDESIGN.mdに書き、スマホ・PC・動きを減らす設定で撮影して全項目8/10まで直すエージェント用スキル。

@st_dev0 · 2026-10-14
#AIデザイン#ClaudeCode#Codex#スキル#DESIGN.md#ビジュアルレビュー#LP

どんな問題を解決するか / いつ使うか

AIにサイトを頼むと、紫のグラデーションとカード3枚、「elevate your brand」のような同じ見た目になる。その「デフォルト」を、決まった制作工程に置き換えるスキル。Claude Code、Codex、Cursor など SKILL.md を読むエージェントで使える。工程の考え方は Webの「AIっぽさ」は、コードを書く前にデフォルト見た目を捨てさせるプロンプトで潰す や 機能ごとに「強いデザイン参照を1つ」渡し、エージェントに10点満点で自己採点させる を1つのスキルにまとめたもの。

やり方

  1. 入れる：npx skills add juliobsz/skills -g（Claude Code だけなら -a claude-code）。Claude Code のプラグインとしても入れられる。新しいセッションを開いてから /awwwards と打つか、サイトを頼む。
  2. 一行で頼む。例：
    • make me a portfolio, my name is Ana
    • a site for my architecture studio in Lisbon, we do small houses
    • redesign this landing page so it could win site of the day
  3. スキルの中で行われること（README より）：
    • コンセプト：名前・仕事・場所など違う方向から3案を出し、独自性と合い具合で採点して選ぶ。
    • デザインシステム：役割別の配色、無料フォントの組み合わせ、グリッド、動きの方針を DESIGN.md に書き出し、「ありがちになっていないか」のチェックにかける。
    • 動き：GSAP、Lenis、WebGL（OGL）は必要な所だけ。目立つ見せ場は1つにして、他は静かにする。
    • 文言：ダミー文、架空の受賞歴や数字は使わない。作った部分はプレースホルダーとして最後に一覧にする。
    • 検証：本番ビルド、サイト全体の点検、デスクトップ・モバイル・reduced motion の実ブラウザ撮影を行い、採点基準の全カテゴリが8/10に届くまで直す。
  4. 良い入力ほど良いサイトになる。本名、仕事、場所、実際の作品2〜3件を渡すと、コンセプトが自分の話から作られる。

注意点

  • 1回の実行に時間がかかり、トークンを多く使う（README にも記載）。
  • 撮影に Playwright、アクセシビリティ確認に axe-core を使う（必要なら開発依存として入れる）。スクショを読めるモデルが必要。
  • skills CLI は匿名の利用データを送る。止めるなら DISABLE_TELEMETRY=1。
  • 任意で、技術説明の図を作る Anatomy スキルで、技術説明をインタラクティブな等角図SVGにする と組み合わせられる。

出典

X の元の投稿を開く