motion-pages

概要

• プロンプトを入力するだけで、Awwwards系の洗練されたモーションページを生成できるオープンソースのClaude Codeスキルです。
• 生成物は単一のHTMLファイルとして完成し、ビルド工程なしでそのまま扱えるため、試作から公開までの流れを簡略化できます。

主な特徴

• 霧の色調整、焼き込み済みの発光テクスチャ、Fresnelガラス、ドラッグ遅延によるばね物理など、印象的な表現のレシピを組み込んでいます。
• エージェントがデスクトップ・タブレット・スマートフォン向けに自動でスクリーンショットを撮影し、見た目が整うまで自己検証と修正を繰り返します。
• 各デモは実際に生成されたページで、プロンプトをコピーしてClaude Codeや、SKILL.mdをコンテキストにしたCursorで再利用できます。

こんな人におすすめ

• 一般的なAI生成ページでは物足りず、受賞サイトのような奥行き・質感・動きを備えたWeb表現を手軽に試したい人に適しています。
• 3D空間やシェーダー、インタラクションの実装パターンを、個別に調査するのではなく再利用可能なレシピとして学びたい開発者に向いています。
• レスポンシブ表示を含めた視覚的な完成度を重視し、オープンソースかつビルド不要の単一HTMLで成果物を管理したい人におすすめです。