CLAUDE SKILL / デザイン

scroll-craft

スクロールに合わせて映像や文字が動く、作り込んだWebサイトを作るためのスキルです。デザインの基準と制作手順を備え、完成後はブラウザで読みやすさなどを自動で点検します。

こんなときに使います

スクロールで動く印象的なLPを作りたいとき

使う前に:作者は Windows でしか動作確認していません。

できること

  • 8種類のページ構成から1つを選び、構成の決まりに沿って組み立てる
  • 過去に作ったページと6つの観点で比べ、似すぎていないかを確かめる
  • 書体・余白・配色に最低限の基準があり、読みにくいページを防ぐ
  • スクロール位置ごとに見え方や文字の明暗差をブラウザで自動計測する
  • ブランドの決まりごとを渡すと、そちらを優先してデザインする

始める前に必要なもの

  • Node.js 18以上
  • ffmpeg(全機能版)
  • Playwright と Chrome

入れ方

下の文を Claude Code に貼ると、入れる前に中身の説明を受けられます。説明を読んで、実行するコマンドや外部への送り先に納得できたときだけ入れてください。リンク先は作者が書き換えることがあり、当サイトは安全を保証するものではありません。

https://github.com/nateherkai/scroll-craft

このスキルを入れる前に、中身を読んで次の3つを説明して。まだ入れないで、私の返事を待って。
1. 何をするものか
2. 実行するコマンドやスクリプト
3. 外部に送るデータと送り先

GitHubで中身を見る →

基本情報

種類
スキル
分類
デザイン
GitHubのスター
4,568
最終更新
2026-09-30
ライセンス
MIT
掲載元
GitHub(作者のREADME)

説明はGitHub(作者のREADME)の内容をもとに、日本語でまとめ直したものです。確認日:2026-11-05

同じ分類のほかのスキル

デザインの一覧を見る →