使用Claude3.5轻松做一个萌宠简介

搞七捻三
1

接着之前的讨论：https://linux.do/t/topic/282048?u=haly
修改了之前的二次元模板，可以做成萌宠简介（图为网图），最后再加个照片墙，完美~。可以用来介绍我家的小狗啦！
image


                        <!DOCTYPE html>
                        <html lang="en">
                        <head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
							<style>
								body {
									background-color: white; /* Ensure the iframe has a white background */
								}

								
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;700&family=ZCOOL+XiaoWei&display=swap');
        
        body {
            font-family: 'ZCOOL XiaoWei', sans-serif;
            background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
            margin: 0;
            padding: 20px;
            min-height: 100vh;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        }

        .profile-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .avatar {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            margin: 0 auto 20px;
            background: url('https://pixabay.com/get/ge8ee57371037b3c4b21ee6af8e3cd161ee445df617afe8d7e479263a085dd796433ce5059d7208e900b7e11478f2c6c0614014c24272f292a957e0d8ead7b469_1280.jpg') center/cover;
            border: 5px solid #fff;
            box-shadow: 0 0 15px rgba(100, 149, 237, 0.5);
        }

        h1 {
            color: #1E90FF;
            font-size: 2.5em;
            margin: 10px 0;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        .title {
            color: #555;
            font-size: 1.2em;
            margin-bottom: 20px;
        }

        .section {
            background: rgba(255, 255, 255, 0.85);
            padding: 20px;
            border-radius: 15px;
            margin-bottom: 20px;
            border: 2px solid rgba(100, 149, 237, 0.3);
        }

        .section h2 {
            color: #1E90FF;
            border-bottom: 2px dashed #6495ED;
            padding-bottom: 10px;
            margin-bottom: 15px;
        }

        .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 15px 0;
        }

        .tag {
            background: #add8e6;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.9em;
            color: #1E90FF;
        }

        .social-links {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
        }

        .social-links a {
            color: #1E90FF;
            font-size: 24px;
            transition: transform 0.3s;
        }

        .social-links a:hover {
            transform: scale(1.2);
        }

        .favorites {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }

        .favorite-item {
            background: #fff;
            padding: 10px;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        /* 照片墙样式 */
        .photo-wall {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }

        .photo-item {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .photo-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s, opacity 0.3s;
        }

        .photo-item:hover img {
            transform: scale(1.05);
            opacity: 0.8;
        }

        /* 响应式调整 */
        @media (max-width: 600px) {
            .avatar {
                width: 120px;
                height: 120px;
            }

            h1 {
                font-size: 2em;
            }

            .social-links a {
                font-size: 20px;
            }
        }
    

							</style>
                        </head>
                        <body>
                            <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>萌宠小狗简介</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;700&family=ZCOOL+XiaoWei&display=swap');
        
        body {
            font-family: 'ZCOOL XiaoWei', sans-serif;
            background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
            margin: 0;
            padding: 20px;
            min-height: 100vh;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        }

        .profile-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .avatar {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            margin: 0 auto 20px;
            background: url('https://pixabay.com/get/ge8ee57371037b3c4b21ee6af8e3cd161ee445df617afe8d7e479263a085dd796433ce5059d7208e900b7e11478f2c6c0614014c24272f292a957e0d8ead7b469_1280.jpg') center/cover;
            border: 5px solid #fff;
            box-shadow: 0 0 15px rgba(100, 149, 237, 0.5);
        }

        h1 {
            color: #1E90FF;
            font-size: 2.5em;
            margin: 10px 0;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        .title {
            color: #555;
            font-size: 1.2em;
            margin-bottom: 20px;
        }

        .section {
            background: rgba(255, 255, 255, 0.85);
            padding: 20px;
            border-radius: 15px;
            margin-bottom: 20px;
            border: 2px solid rgba(100, 149, 237, 0.3);
        }

        .section h2 {
            color: #1E90FF;
            border-bottom: 2px dashed #6495ED;
            padding-bottom: 10px;
            margin-bottom: 15px;
        }

        .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 15px 0;
        }

        .tag {
            background: #add8e6;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.9em;
            color: #1E90FF;
        }

        .social-links {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
        }

        .social-links a {
            color: #1E90FF;
            font-size: 24px;
            transition: transform 0.3s;
        }

        .social-links a:hover {
            transform: scale(1.2);
        }

        .favorites {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }

        .favorite-item {
            background: #fff;
            padding: 10px;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        /* 照片墙样式 */
        .photo-wall {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }

        .photo-item {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .photo-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s, opacity 0.3s;
        }

        .photo-item:hover img {
            transform: scale(1.05);
            opacity: 0.8;
        }

        /* 响应式调整 */
        @media (max-width: 600px) {
            .avatar {
                width: 120px;
                height: 120px;
            }

            h1 {
                font-size: 2em;
            }

            .social-links a {
                font-size: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="profile-header">
            <div class="avatar"></div>
            <h1>乐乐</h1>
            <div class="title">🐾 活泼可爱 | 柯基 | 3岁 🐾</div>
        </div>

        <div class="section">
            <h2>个人简介</h2>
            <p>大家好！我是乐乐，一只3岁的柯基犬，充满活力和好奇心。喜欢奔跑、玩耍和与人亲近。每天都充满期待，喜欢探索新的事物和享受美好的时光。</p>
            <div class="tags">
                <span class="tag">柯基</span>
                <span class="tag">3岁</span>
                <span class="tag">活泼</span>
                <span class="tag">爱玩</span>
                <span class="tag">友好</span>
            </div>
        </div>

        <div class="section">
            <h2>日常活动</h2>
            <p>🏃‍♂️ 每天早晨喜欢晨跑，享受清新的空气</p>
            <p>🎾 热爱玩飞盘和球类游戏</p>
            <p>🍖 喜欢美味的狗粮和偶尔的零食</p>
            <p>🛋️ 喜欢在家中与家人一起休息和看电视</p>
        </div>

        <div class="section">
            <h2>最爱的玩具</h2>
            <div class="favorites">
                <div class="favorite-item">
                    <p>飞盘</p>
                </div>
                <div class="favorite-item">
                    <p>橡胶球</p>
                </div>
                <div class="favorite-item">
                    <p>咀嚼玩具</p>
                </div>
                <div class="favorite-item">
                    <p>毛绒玩具</p>
                </div>
            </div>
        </div>

        <div class="section">
            <h2>技能与特长</h2>
            <p>🐾 坐下、卧下、握手等基本指令</p>
            <p>🎓 别告状：从不乱叫</p>
            <p>🦮 搜索：喜欢寻找藏起来的玩具</p>
            <p>🌟 表演：能做一些简单的小把戏</p>
        </div>

        <div class="section">
            <h2>兴趣爱好</h2>
            <p>🌳 喜欢户外活动，如散步和远足</p>
            <p>🐶 喜欢与其他狗狗交朋友</p>
            <p>📚 喜欢听家人讲故事</p>
            <p>🖼️ 喜欢观看窗外的景色</p>
        </div>

        <!-- 照片墙部分 -->
        <div class="section">
            <h2>照片墙</h2>
            <div class="photo-wall">
                <div class="photo-item">
                    <img src="https://pixabay.com/get/ge8ee57371037b3c4b21ee6af8e3cd161ee445df617afe8d7e479263a085dd796433ce5059d7208e900b7e11478f2c6c0614014c24272f292a957e0d8ead7b469_1280.jpg" alt="乐乐在公园玩耍">
                </div>
                <div class="photo-item">
                    <img src="https://pixabay.com/get/g96120df7238c82839b494e9d884f4579dc636a28ab8c3c83d83b9d4cd8f2d3bf10b4a9c8d3e40e6a01e6736d7cf79f5bf23ddd780af81a554edf2d736f088ddf_1280.jpg" alt="乐乐与主人亲近">
                </div>
                <div class="photo-item">
                    <img src="https://pixabay.com/get/g3dd3ca66ce69151110bbaa9e7f2d73db89f6b822b83072ae0b35aeec4f074e6a80c190efadb919298f9027a0c431945cde010afc029a1bf0ba6a63510dd1e283_1280.jpg" alt="乐乐的可爱瞬间">
                </div>
                <div class="photo-item">
                    <img src="https://pixabay.com/get/gc4260b6fd47e15d9a4adb334195f203458b7b9523530b9698e04360743ca3be618489c41b4bb6d57f16157925db0aecaec9b7ef59132936eee83a1f65423f522_1280.jpg" alt="乐乐在家中休息">
                </div>
            </div>
        </div>
        <!-- 照片墙结束 -->

        <div class="social-links">
            <a href="#" title="Instagram"><i class="fab fa-instagram"></i></a>
            <a href="#" title="Facebook"><i class="fab fa-facebook"></i></a>
            <a href="#" title="微博"><i class="fab fa-weibo"></i></a>
            <a href="#" title="Twitter"><i class="fab fa-twitter"></i></a>
        </div>
    </div>
</body>
</html>



							<script>
                            	
							</script>
                        </body>
                        </html>
6 个赞
2

确实挺不错的，佬官网Claude写的吗？

3

不是的，API做的。

4

ok,感觉API的没有官网写的好，不晓得是不是错觉

5

确实是的，官网是调教过的，效果会好一些。但是现在只能用haiku了（没钱冲pro）。

6

确实，没钱玩，还容易封号。哎

7

感谢大佬分享

8

厉害, 做了一个部署在nas上了,
你这个提示词是啥呀, 感觉你这个好看点

image

9

你的也好看哎！我的这个是在上一个帖子的粉色系基础上改的。然后让GPT加了照片墙，没有什么特殊提示词，就是直接提要求的:帮我把这个网页改成蓝色系，同时加上照片墙