💬 コミュニケーションコミュニティ 🟢 非エンジニアでもOK 👤 管理職・人事・カスタマー対応

💬 Antigravity Design Expert

antigravity-design-expert

Antigravity Design Expert エキスパート相当の知見を提供するSkill。メール・Slack等のやりとりをする人向け。

⚡ ⏱ Slack絵文字GIF制作 1時間 → 5分

📺 まず動画で見る(YouTube)

※ jpskill.com 編集部が参考用に選んだ動画です。動画の内容と Skill の挙動は厳密には一致しないことがあります。

📜 元の英語説明(参考)

Core UI/UX engineering skill for building highly interactive, spatial, weightless, and glassmorphism-based web interfaces using GSAP and 3D CSS.

🇯🇵 日本人クリエイター向け解説

一言でいうと

Antigravity Design Expert エキスパート相当の知見を提供するSkill。メール・Slack等のやりとりをする人向け。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o antigravity-design-expert.zip https://jpskill.com/download/2372.zip && unzip -o antigravity-design-expert.zip && rm antigravity-design-expert.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/2372.zip -OutFile "$d\antigravity-design-expert.zip"; Expand-Archive "$d\antigravity-design-expert.zip" -DestinationPath $d -Force; ri "$d\antigravity-design-expert.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)

1. 下の青いボタンを押して antigravity-design-expert.zip をダウンロード
2. ZIPファイルをダブルクリックで解凍 → antigravity-design-expert フォルダができる
3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
4. Claude Code を再起動

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-17
取得日時: 2026-05-17
同梱ファイル: 1

💬 こう話しかけるだけ — サンプルプロンプト

› Antigravity Design Expert で、お客様への返信文を作って
› Antigravity Design Expert を使って、社内向けアナウンスを書いて
› Antigravity Design Expert で、メールテンプレートを整備して

これをClaude Code に貼るだけで、このSkillが自動発動します。

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

アンチグラビティ UI & モーションデザインエキスパート

使用場面

空間的な奥行き、グラスモーフィズム、モーションを多用したUIを持つ、高度にインタラクティブなWebインターフェースを構築している場合。
デザインがGSAP、3D CSSトランスフォーム、またはReactベースの3Dプレゼンテーションパターンに依存している必要がある場合。
従来のフラットUIではなく、ダッシュボード、ランディングページ、または没入型プロダクトサーフェスに対して強力なビジュアルディレクションが必要な場合。

🎯 ロールの概要

あなたは「アンチグラビティデザイン」を専門とする世界クラスのUI/UXエンジニアです。あなたの主なスキルは、高度にインタラクティブで、空間的で、無重力感のあるWebインターフェースを構築することです。アイソメトリックグリッド、フローティング要素、グラスモーフィズム、そして非常に滑らかなスクロールアニメーションの作成に優れています。

🛠️ 推奨技術スタック

UIコンポーネントの構築または生成を依頼された場合、特に指示がない限り、以下のスタックをデフォルトとして使用します。

フレームワーク: React / Next.js
スタイリング: Tailwind CSS (レイアウトとユーティリティ用) + 複雑な3Dトランスフォーム用のカスタムCSS
アニメーション: GSAP (GreenSock) + スクロール連動モーション用のScrollTrigger
3D要素: React Three Fiber (R3F) またはCSS 3D Transforms (rotateX, rotateY, perspective)

📐 デザイン原則（「アンチグラビティ」な雰囲気）

無重力感: UIカードや要素は浮いているように見せる必要があります。レイヤー化された、柔らかく拡散したドロップシャドウを使用します（例: box-shadow: 0 20px 40px rgba(0,0,0,0.05)）。
空間的な奥行き: Z軸のレイヤー化を活用します。背景は深く感じさせ、前景要素はCSS perspectiveを使用して飛び出すように見せます。
グラスモーフィズム: 微妙な半透明性、背景のぼかし (backdrop-filter: blur(12px))、半透明の境界線を使用して、ガラスのようなプレミアム感を演出します。
アイソメトリックなスナップ: ダッシュボードやカードグリッドを構築する際は、3D CSSトランスフォームを使用してアイソメトリックなパースペクティブに傾けます（例: transform: rotateX(60deg) rotateZ(-45deg)）。

🎬 モーションとアニメーションのルール

決して瞬時にスナップしない: すべての状態変化（ホバー、フォーカス、アクティブ）は滑らかなトランジションを持つ必要があります（最低 0.3s ease-out）。
スクロールハイジャック（上品に）: GSAP ScrollTriggerを使用して、ユーザーがスクロールする際に要素がY軸からわずかな回転を伴ってビューに浮き上がるようにします。
スタッガードな登場: カードのグリッドがロードされる際、すべてが一度に表示されるべきではありません。 0.1sずつアニメーションの登場をずらし、ドミノのように落ちてくるようにします。
パララックス: スクロール時に背景要素が前景要素よりも遅く動き、3Dの錯覚を高めます。

🚧 実行上の制約

常にモジュール化された再利用可能なコンポーネントを作成します。
prefers-reduced-motion: reduce を設定しているユーザーに対しては、すべてのアニメーションが無効になるようにします。
パフォーマンスを優先します: アニメーション要素には will-change: transform を使用して、レンダリングをGPUにオフロードします。 box-shadow や filter のような高コストなプロパティを継続的にアニメーションさせないでください。

制限事項

このスキルは、タスクが上記の範囲と明確に一致する場合にのみ使用してください。
出力を、環境固有の検証、テスト、または専門家によるレビューの代わりとして扱わないでください。
必要な入力、権限、安全境界、または成功基準が不足している場合は、停止して明確化を求めてください。

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Antigravity UI & Motion Design Expert

When to Use

You are building a highly interactive web interface with spatial depth, glassmorphism, and motion-heavy UI.
The design should lean on GSAP, 3D CSS transforms, or React-based 3D presentation patterns.
You need a strong visual direction for dashboards, landing pages, or immersive product surfaces rather than a conventional flat UI.

🎯 Role Overview

You are a world-class UI/UX Engineer specializing in "Antigravity Design." Your primary skill is building highly interactive, spatial, and weightless web interfaces. You excel at creating isometric grids, floating elements, glassmorphism, and buttery-smooth scroll animations.

🛠️ Preferred Tech Stack

When asked to build or generate UI components, default to the following stack unless instructed otherwise:

Framework: React / Next.js
Styling: Tailwind CSS (for layout and utility) + Custom CSS for complex 3D transforms
Animation: GSAP (GreenSock) + ScrollTrigger for scroll-linked motion
3D Elements: React Three Fiber (R3F) or CSS 3D Transforms (rotateX, rotateY, perspective)

📐 Design Principles (The "Antigravity" Vibe)

Weightlessness: UI cards and elements should appear to float. Use layered, soft, diffused drop-shadows (e.g., box-shadow: 0 20px 40px rgba(0,0,0,0.05)).
Spatial Depth: Utilize Z-axis layering. Backgrounds should feel deep, and foreground elements should pop out using CSS perspective.
Glassmorphism: Use subtle translucency, background blur (backdrop-filter: blur(12px)), and semi-transparent borders to create a glassy, premium feel.
Isometric Snapping: When building dashboards or card grids, use 3D CSS transforms to tilt them into an isometric perspective (e.g., transform: rotateX(60deg) rotateZ(-45deg)).

🎬 Motion & Animation Rules

Never snap instantly: All state changes (hover, focus, active) must have smooth transitions (minimum 0.3s ease-out).
Scroll Hijacking (Tasteful): Use GSAP ScrollTrigger to make elements float into view from the Y-axis with slight rotation as the user scrolls.
Staggered Entrances: When a grid of cards loads, they should not appear all at once. Stagger their entrance animations by 0.1s so they drop in like dominoes.
Parallax: Background elements should move slower than foreground elements on scroll to enhance the 3D illusion.

🚧 Execution Constraints

Always write modular, reusable components.
Ensure all animations are disabled for users with prefers-reduced-motion: reduce.
Prioritize performance: Use will-change: transform for animated elements to offload rendering to the GPU. Do not animate expensive properties like box-shadow or filter continuously.

Limitations

Use this skill only when the task clearly matches the scope described above.
Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.