Shin@プログラミングチュートリアル
@Shin_Engineer • 18,886 subscribers
Claude Code Academy(https://t.co/YOL0dTRvJJ) 運営者 |個人開発プロダクト ▶︎ サブスクBox 3万ダウンロード, サムネAI 1万ユーザー突破 |登録者12万人プログラミング系Youtuber | はじめてのNext.js出版 | 5万人受講Udemy講師
Shorts
Videos
Claude Codeの「frontend-design」のSkillsが凄いです。試しにアプリ開発を管理するWebサービスのLP/オンボーディングフロー/ダッシュボードページを作ってみましたが、今までのAIのポン出しに比べてデザインの質が段違いでした。SKillsには ・タイポグラフィ ・色とテーマ ・モーション ・空間校正 ・背景とビジュアルディテール表現 のように「フロントエンドの美的ガイドライン」の記載があり、そのデザインの専門知識をフル動員して作ってくれるようですね。 Skillsは専門知識をシェアできる画期的な機能なんだなと理解できました。 これはアプリ開発の話だけなく、他業界における業務の専門知識(例えば、税務知識など)もシェアできるということですよね。開発以外にも民主化は今後進んでいきそうな気もします。
Shin@プログラミングチュートリアル81,207 Aufrufe • vor 6 Monaten
とりあえずGemini 3 ProがどんなWebサイトまで表現できるか遊び倒してみます。以下が最初のプロンプトです。今夜Youtubeでも解説します。 ``` 高級腕時計の3Dプロダクト体験ページを設計してください。 **ターゲット：**富裕層、時計愛好家、30-50代のビジネスパーソン **ブランドトーン：**ラグジュアリー × テック（モダンで洗練されたハイエンド感） スクロール体験（5セクション構成）： ヒーローセクション - 暗闇から腕時計が徐々に光に照らされながら回転登場。カスタムシェーダーでホログラフィック効果とフレネル反射を実装 ディテールズーム - 文字盤のクローズアップ。GLSLでメタリックな反射、視差マッピング、リアルタイムの光沢表現 機構の分解 - 時計が分解され、内部のムーブメント機構が浮遊。ディスプレイスメントシェーダーでエネルギーフィールド効果、各パーツにグローエフェクト マテリアル体験 - 異なる素材バリエーション切り替え。PBRシェーダーで金属感、ガラスの屈折、チタンのマット質感を物理ベースで表現 エンディング - 時計が組み上がり、背景にカスタムシェーダーで作った抽象的なグラデーションメッシュ。ポストプロセッシングでブルーム、被写界深度 **技術スタック：**Next.js 15 + Three.js + React Three Fiber + GLSL(カスタムシェーダー) + react-postprocessing + Lenis シェーダー要件： フレネル反射シェーダー（リム光効果） PBRマテリアルシェーダー（粗さ、メタリック、AO） ホログラフィックシェーダー（虹色の干渉効果） ディスプレイスメントシェーダー（波打ち、歪み効果） カスタム背景シェーダー（グラデーションノイズ） ポストプロセス：Bloom, ChromaticAberration, DepthOfField, Vignette 以下を具体的な数値で提案してください： 各セクションのscroll範囲（%または vh単位） アニメーションパラメータ（position, rotation, scale等の開始/終了値） イージング関数（ease type） カメラのFOV、position、target値 ライティング設定（強度、色、位置） 各シェーダーのuniform値（時間経過、スクロール進行度、色相、強度など） ``` モデルは自作で用意すると尚良いと思います。nano-banana-proで3Dモデルも頑張れば作れると思います。
Shin@プログラミングチュートリアル49,190 Aufrufe • vor 8 Monaten
Keine weiteren Inhalte verfügbar