claude3.5写的网页风格真的在我的心趴上

感觉用来做个人介绍页都挺不错。没有什么提示词,完全就是:帮我写个个人简历,XXX风格的,内容自拟
二次元风格:
image


<!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, #ffd1ff 0%, #fad0c4 100%);
            margin: 0;
            padding: 20px;
            min-height: 100vh;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.9);
            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('/api/placeholder/150/150') center/cover;
            border: 5px solid #fff;
            box-shadow: 0 0 15px rgba(255, 182, 193, 0.5);
        }

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

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

        .section {
            background: rgba(255, 255, 255, 0.8);
            padding: 20px;
            border-radius: 15px;
            margin-bottom: 20px;
            border: 2px solid rgba(255, 192, 203, 0.3);
        }

        .section h2 {
            color: #ff69b4;
            border-bottom: 2px dashed #ffb6c1;
            padding-bottom: 10px;
            margin-bottom: 15px;
        }

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

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

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

        .social-links a {
            color: #ff69b4;
            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);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="profile-header">
            <div class="avatar"></div>
            <h1>星月咲夜</h1>
            <div class="title">✨ 二次元爱好者 | 插画师 | 轻小说作家 ✨</div>
        </div>

        <div class="section">
            <h2>个人简介</h2>
            <p>大家好呀!我是星月咲夜,95年的天蝎座女生,是一名热爱二次元文化的创作者。白天是一名游戏公司的UI设计师,晚上就变身成为轻小说作家和插画师。最喜欢的事情就是创作可爱的角色和温暖治愈的故事~</p>
            <div class="tags">
                <span class="tag">天蝎座</span>
                <span class="tag">二次元</span>
                <span class="tag">插画</span>
                <span class="tag">轻小说</span>
                <span class="tag">INFJ</span>
            </div>
        </div>

        <div class="section">
            <h2>创作经历</h2>
            <p>🎨 曾获得第十二届新星漫画大赛优秀奖</p>
            <p>📚 已在pixiv连载轻小说《魔法少女的午茶时光》</p>
            <p>🎮 参与过多款手机游戏的UI设计工作</p>
            <p>✏️ B站知名绘画教程UP主,粉丝20万+</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>🎨 插画:Procreate / Photoshop / SAI</p>
            <p>🎮 游戏设计:Unity / Figma</p>
            <p>📝 创作:轻小说 / 同人文 / 漫画分镜</p>
            <p>🌐 其他:视频剪辑 / 直播</p>
        </div>

        <div class="section">
            <h2>日常爱好</h2>
            <p>✨ Cosplay:最爱还原动漫角色</p>
            <p>🎮 游戏:原神资深玩家,FGO五年老玩家</p>
            <p>🎵 音乐:V家曲、动漫音乐、同人音乐</p>
            <p>📺 追番:每季度必看新番,最爱京阿尼作品</p>
        </div>

        <div class="social-links">
            <a href="#" title="Bilibili"><i class="fab fa-bilibili"></i></a>
            <a href="#" title="Pixiv"><i class="fas fa-paint-brush"></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>

诡异风格:
image


<!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=Nosifer&family=Special+Elite&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #000;
            color: #blood;
            font-family: 'Special Elite', cursive;
            line-height: 1.6;
            position: relative;
            min-height: 100vh;
            overflow-x: hidden;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                linear-gradient(rgba(0,0,0,0.92), rgba(0,0,0,0.92)),
                url('/api/placeholder/1920/1080') center/cover;
            z-index: -1;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        .profile {
            background: rgba(20, 20, 20, 0.9);
            border: 2px solid #400;
            padding: 30px;
            margin: 20px 0;
            box-shadow: 0 0 20px rgba(255, 0, 0, 0.1);
            position: relative;
        }

        .profile::before {
            content: '';
            position: absolute;
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
            border: 1px solid #600;
            pointer-events: none;
        }

        h1 {
            font-family: 'Nosifer', cursive;
            color: #b00;
            text-align: center;
            font-size: 2.5em;
            margin-bottom: 30px;
            text-shadow: 
                0 0 10px rgba(255,0,0,0.5),
                0 0 20px rgba(255,0,0,0.3);
            animation: flicker 4s infinite;
        }

        @keyframes flicker {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.8; }
        }

        h2 {
            color: #800;
            border-bottom: 1px solid #400;
            padding-bottom: 10px;
            margin: 25px 0 15px;
            font-family: 'Special Elite', cursive;
        }

        p {
            color: #aaa;
            margin-bottom: 15px;
            text-align: justify;
        }

        .blood-text {
            color: #b00;
        }

        .creepy-list {
            list-style: none;
            padding-left: 20px;
        }

        .creepy-list li {
            color: #aaa;
            margin: 10px 0;
            position: relative;
        }

        .creepy-list li::before {
            content: '☠';
            color: #600;
            position: absolute;
            left: -20px;
        }

        .works {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }

        .work-item {
            background: rgba(40, 40, 40, 0.9);
            padding: 15px;
            border: 1px solid #400;
            transition: all 0.3s ease;
        }

        .work-item:hover {
            transform: scale(1.02);
            box-shadow: 0 0 15px rgba(255,0,0,0.2);
        }

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

        .social-links a {
            color: #600;
            font-size: 24px;
            transition: all 0.3s ease;
        }

        .social-links a:hover {
            color: #f00;
            transform: scale(1.1);
            text-shadow: 0 0 10px rgba(255,0,0,0.5);
        }

        .quote {
            font-style: italic;
            color: #800;
            text-align: center;
            margin: 20px 0;
            padding: 20px;
            border-left: 3px solid #400;
            border-right: 3px solid #400;
        }

        @keyframes pulse {
            0% { text-shadow: 0 0 10px rgba(255,0,0,0.5); }
            50% { text-shadow: 0 0 20px rgba(255,0,0,0.8); }
            100% { text-shadow: 0 0 10px rgba(255,0,0,0.5); }
        }

        .warning {
            color: #f00;
            text-align: center;
            font-size: 0.8em;
            margin-top: 20px;
            animation: pulse 2s infinite;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="profile">
            <h1>诡夜记录者</h1>
            
            <div class="quote">
                "在永恒的黑暗中,我聆听着不为人知的故事..."
            </div>

            <h2>身份介绍</h2>
            <p>我是一位游走在现实与虚幻边缘的观察者。专注于记录都市传说、超自然现象和灵异事件。在过去的13年里,我走访了数百个据说闹鬼的地点,记录下无数个不为人知的诡异故事。</p>

            <h2>专业领域</h2>
            <ul class="creepy-list">
                <li>灵异事件调查与记录</li>
                <li>都市传说考证与研究</li>
                <li>超自然现象分析</li>
                <li>神秘学文献收集</li>
                <li>恐怖故事创作</li>
            </ul>

            <h2>代表作品</h2>
            <div class="works">
                <div class="work-item">
                    <h3 class="blood-text">《午夜档案》</h3>
                    <p>记录真实灵异事件的深度调查报告</p>
                </div>
                <div class="work-item">
                    <h3 class="blood-text">《诡异集》</h3>
                    <p>基于真实事件改编的恐怖短篇集</p>
                </div>
                <div class="work-item">
                    <h3 class="blood-text">《都市夜话》</h3>
                    <p>收录百年来最著名的都市传说</p>
                </div>
            </div>

            <h2>特殊经历</h2>
            <p>✟ 独自在废弃精神病院度过整整七天七夜</p>
            <p>✟ 深入调查"午夜电台"事件,获得第一手资料</p>
            <p>✟ 成功记录到多起超自然现象的影像证据</p>
            <p>✟ 获得多个神秘学研究机构的特殊认证</p>

            <h2>当前项目</h2>
            <ul class="creepy-list">
                <li>《被诅咒的档案》系列调查</li>
                <li>古老寺庙的午夜仪式记录</li>
                <li>失踪者档案特别调查</li>
                <li>都市传说溯源计划</li>
            </ul>

            <div class="quote">
                "有些真相,或许永远不该被发现..."
            </div>

            <div class="social-links">
                <a href="#" title="暗网博客"><i class="fas fa-skull"></i></a>
                <a href="#" title="午夜电台"><i class="fas fa-broadcast-tower"></i></a>
                <a href="#" title="诡异图集"><i class="fas fa-ghost"></i></a>
                <a href="#" title="档案室"><i class="fas fa-book-dead"></i></a>
            </div>

            <p class="warning">
                ⚠ 警告:本页面记录的所有内容均基于真实调查,请谨慎浏览...
            </p>
        </div>
    </div>
</body>
</html>


87 个赞

太牛了吧,羡慕+1

1 个赞

Claude还有什么我不知道的奇技淫巧:clap:

厉害啊 很牛

有点东西!!

2 个赞

还怪粉的 :lark_194: :lark_194: :lark_194:

4 个赞

有点意思哈,感谢分享!

佬,有提示词可以给一下吗,我的克劳德怎么吐不出这样的页面,泥给他喂什么了tieba9

补药补药再喂奇怪的东西啦,赛不下了 :tieba_009:

2 个赞

? 你说的最好是提示词tieba16

求个提示词~~~

1 个赞

真没有啥提示词,比如下图,,,,就很简单的提示词就可以
image

哇,真的不错啊!

我去试试,等我的好消息tieba66

用claude 3.5 sonnet

1 个赞

image
好家伙,还真是,解锁了新技能

1 个赞

666,佬太牛了!

2 个赞

这个 ai 是用本站的服务吗?因为我记得这个国内 ip 不能用的,各种封锁。

已经用了一段时间了 :bili_038: 效果确实一级棒。

IMG_20241205_092245

太牛了吧,卸磨杀驴

1 个赞