限定公開
【Claude公式】宇宙のキーストロークを他のAIで試す
Claude公式のプロンプトを他のAIでも試す用です。 docs.anthropic.com/claude/page/cosmic-keystrokes プロンプト実行時にAIを切り替えて実行します。
0
0
3
0
投稿日時：
- プロンプト実行例
- プロンプトを見る
Claude公式のプロンプトを他のAIでも試します。
変数1
html1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6<title>Word Adventure Game</title> 7<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> 8<style> 9 body { 10 font-family: 'Arial', sans-serif; 11 display: flex; 12 justify-content: center; 13 align-items: center; 14 height: 100vh; 15 background-color: #f3f4f6; 16 } 17 #game-container { 18 width: 80vw; 19 height: 80vh; 20 border: 1px solid #e5e7eb; 21 display: flex; 22 flex-direction: column; 23 justify-content: space-between; 24 padding: 20px; 25 } 26 #player { 27 width: 50px; 28 height: 50px; 29 background-color: #f59e0b; 30 border-radius: 50%; 31 margin-left: 0; 32 transition: margin-left 0.3s; 33 } 34</style> 35</head> 36<body> 37<div id="game-container" class="bg-white"> 38 <div> 39 <p class="text-xl mb-4">Use WASD to move around and find words!</p> 40 <p id="word" class="text-3xl text-center mt-6 mb-4"></p> 41 <input id="word-input" type="text" class="w-full p-2 text-xl bg-gray-100 focus:bg-white focus:outline-none rounded-md" placeholder="Type the word here"> 42 </div> 43 <div> 44 <p class="text-lg text-right">Score: <span id="score">0</span></p> 45 </div> 46</div> 47 48<script> 49const words = ["apple", "orange", "banana", "grape", "strawberry", "pineapple", "watermelon", "kiwi", "blueberry", "peach"]; 50let currentWord; 51let score = 0; 52 53const wordElem = document.getElementById('word'); 54const wordInput = document.getElementById('word-input'); 55const scoreElem = document.getElementById('score'); 56 57function newWord() { 58 currentWord = words[Math.floor(Math.random() * words.length)]; 59 wordElem.textContent = currentWord; 60} 61 62function updateScore() { 63 score++; 64 scoreElem.textContent = score; 65} 66 67newWord(); 68 69wordInput.addEventListener('input', () => { 70 if (wordInput.value.trim() === currentWord) { 71 updateScore(); 72 wordInput.value = ''; 73 newWord(); 74 } 75}); 76 77document.addEventListener('keydown', (event) => { 78 const key = event.key.toLowerCase(); 79 if (key === 'a' || key === 'w' || key === 's' || key === 'd') { 80 const player = document.getElementById('player'); 81 const marginLeft = parseInt(window.getComputedStyle(player).marginLeft, 10); 82 const movement = 20; 83 if (key === 'a') { 84 player.style.marginLeft = `${Math.max(marginLeft - movement, 0)}px`; 85 } else if (key === 'd') { 86 player.style.marginLeft = `${Math.min(marginLeft + movement, window.innerWidth - 70)}px`; 87 } 88 } 89}); 90</script> 91</body> 92</html>
コメント 0
他のプロンプトもチェック
画像生成
キャラクター作成
推奨モデル - DALL•E 3見るだけで心が温まる、シンプルでキュートなイラストを作成します。優しいタッチで描かれたキャラクターが、あなたのSNSアイコンやウェブサイト、プレゼン資料を彩ります。 ＜用途例＞ 【SNSアイコン】 Instagramなどのプロフィール画像として使用し、アカウントに親しみやすさをプラス。ほっこりとした雰囲気でフォロワーとの距離を縮めます。 【ウェブサイトの装飾】 ブログや個人ウェブサイトの区切りやアイキャッチ画像として活用。サイト全体に温かみのある雰囲気を加え、訪問者にリラックス感を提供します。 【SNS投稿のアイキャッチ画像】 Instagramなどの投稿におけるアイキャッチ画像として、投稿の魅力を高めます。可愛いイラストが投稿内容を引き立て、フォロワーの注目を集めやすくなります。 【メッセージカード風の投稿】 フォロワーに感謝やお祝いの気持ちを伝えるメッセージカード風の投稿に使用。ほっこりとしたイラストが、投稿に温かみと親しみやすさを加えます。 【プレゼン資料】 ビジネスや教育用のプレゼン資料に挿入することで、スライドに親しみやすさを持たせ、聴衆の注意を引きます。特に、アイスブレイクやリラックスしたトーンで進めたい内容にぴったりです。 【名刺デザイン】 個人名刺やクリエイティブなプロジェクトの紹介カードに使用。シンプルで可愛らしいイラストが、受け取った人に印象を残し、親しみやすさを伝えます。 【LINEスタンプ】 日常のコミュニケーションを和やかにするLINEスタンプとして、友達や家族とのチャットで活躍。例えば、挨拶や感謝の気持ちを伝えるスタンプとして使用すれば、より温かいメッセージを送ることができます。 【チラシ画像】 イベントやキャンペーンのチラシ画像として、親しみやすさを強調したい時に効果的です。可愛らしいイラストが、チラシを目にした人の関心を引き、内容をより魅力的に伝える手助けをします。 ---------- 😊少しでも気に入っていただけましたら、お気に入り（❤マーク）をクリックしていただけると、とても励みになりますので、ぜひお願いいたします。 😊また、「いつか使ってみよう」と思っている方も、お気に入りに登録しておくと、いつでもマイページからすぐにご利用いただけます。 😊感想など、お気軽にコメントください。512786文案作成
※応援のいいねをおねがいします！ 一般的な報告書を作成するためのプロンプトです。 実際に使用する際は議事録の内容を変更して使用してください。 皆さんのお仕事のお役に立てることを何より願っています！304110画像生成
キャラクター作成
美人な学生の画像を生成できます。きっと学生の頃の青春をあなたは思い出す #画像生成 #インスタ #Tiktok #X #AI #美女 #青春 #instagram
