【deepseek驾驶员】生成程序员名片页面并提供下载按钮prompt

本文链接：https://blog.youkuaiyun.com/weiliang_Handan/article/details/147652516

直接上干货：

prompt:

你是一位优秀的网页和营销视觉设计师，具有丰富的UI/UX设计经验，曾为众多知名品牌打造过引人注目的营销视觉，擅长将现代设计趋势与实用营销策略完美融合。现在需要为我创建一张插画特写，展示一个微笑的女孩从右边看向这张名片。这张名片被设计成在【VS Code】编辑器中打开的。请使用HTML、CSS和JavaScript代码实现以下要求：

## 基本要求

**尺寸与基础结构**
   - 比例严格为4:3（宽:高）
   - 设计一个边框为0的div作为画布，确保生成图片无边界
   - 最外面的卡片需要为直角
**技术实现**
   - 使用现代CSS技术（如flex/grid布局、变量、渐变）
   - 确保代码简洁高效，无冗余元素
   - 添加一个不影响设计的保存按钮
   - 使用html2canvas实现一键保存为图片功能
   - 保存的图片应只包含封面设计，不含界面元素
   - 使用Google Fonts或其他CDN加载适合的现代字体
    - 可引用在线图标资源（如Font Awesome）
**专业排版技巧**
   - 运用设计师常用的"反白空间"技巧创造焦点
   - 文字与装饰元素间保持和谐的比例关系
   - 确保视觉流向清晰，引导读者目光移动
   - 使用微妙的阴影或光效增加层次感

## 设计风格

- **圆角卡片布局**：使用大圆角白色或彩色卡片作为信息容器，创造友好亲和感
- **轻柔色彩系统**：主要采用淡紫、浅黄、粉色、米色等柔和色调，避免强烈视觉刺激
- **极简留白设计**：大量留白空间增强可读性，减少视觉疲劳
- **阴影微立体**：subtle阴影效果赋予界面轻微的立体感，不过分强调
- **功能美学主义**：设计服务于功能，没有多余装饰元素
- **网格化布局**：基于明确的网格系统排列卡片，保持整体秩序感
- **渐变色点缀**：部分界面使用柔和渐变作为背景，如米色到蓝色的过渡，增加现代感

## 文字排版风格

- **数据突显处理**：关键数字信息使用超大字号和加粗处理，如"12,002"、"20x"
- **层级分明排版**：标题、说明文字、数据、注释等使用明确的字号层级区分
- **简约无衬线字体**：全部采用现代简洁的无衬线字体，提升可读性
- **文字对齐规整**：在卡片内保持统一的左对齐或居中对齐方式
- **重点色彩标识**：使用蓝色等高对比度颜色标记重要术语，如"tweets"和"threads"
- **空间呼吸感**：文字块之间保持充足间距，创造"呼吸"空间
- **品牌名称特殊处理**：产品名称如"alohi"、"deel."采用特殊字体或风格，强化品牌识别

## 视觉元素风格

- **微妙图标系统**：使用简约线性或填充图标，大小适中不喧宾夺主
- **进度可视化**：使用环形或条状图表直观展示进度，如年度完成百分比
- **色彩编码信息**：不同卡片使用不同色彩，便于快速区分功能模块
- **品牌标识整合**：将产品logo自然融入界面，如"alohi"的圆形标识
- **人物头像元素**：适当使用圆形头像增加人性化特质，如客户推荐卡片
- **几何形状装饰**：使用简单几何形状作为背景装饰，如半透明圆形
- **组件一致性**：按钮、标签、选项卡等元素保持统一风格，提升系统感

## 用户输入内容
   用户会会提供文案内容初稿。请根据内容提炼生成。
<content>
一张插画特写，这张名片被设计成在【VS Code】编辑器中打开的【JSON】文件样式。名片上的内容为采用【JSON】语法高亮格式的代码，包含清晰可见的键值对，比如：
- 【"姓名": "金灵洞察"】
- 【"官网": "briefs.gilin.com.cn"】
- 【"主题": "五一劳动节快乐"】

窗口界面带有标准的工具栏图标和标题栏，标题栏标明文件名【名片.json】，完全模拟【VS Code】的真实暗黑界面风格。
背景素材：https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80
微笑女孩占据页面右侧，图层在背景层之上，素材：https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80
</content>
背景稍作模糊处理，合理布局素材，突出名片本身。
</content>

示例：

在这里插入图片描述

示例：将如下html代码保存到 test.html文件，浏览器打开即可

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>程序员名片 - VS Code风格</title>
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <style>
        :root {
            --vscode-bg: #1e1e1e;
            --vscode-titlebar: #3c3c3c;
            --vscode-sidebar: #252526;
            --vscode-text: #d4d4d4;
            --vscode-key: #9cdcfe;
            --vscode-string: #ce9178;
            --vscode-number: #b5cea8;
            --vscode-boolean: #569cd6;
            --vscode-bracket: #808080;
        }
        
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f0f0;
            font-family: 'JetBrains Mono', monospace;
        }
        
        .container {
            position: relative;
            width: 100%;
            max-width: 800px;
            display: flex;
            justify-content: center;
        }
        
        .save-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            padding: 10px 20px;
            background-color: #007acc;
            color: white;
            border: none;
            border-radius: 4px;
            font-family: 'JetBrains Mono', monospace;
            cursor: pointer;
            z-index: 10;
        }
        
        .save-btn:hover {
            background-color: #0062a3;
        }
        
        .hand-holding-card {
            position: relative;
            width: 600px;
            height: 400px;
        }
        
        .background {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url('https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') center/cover;
            filter: blur(8px);
            opacity: 0.7;
            border-radius: 10px;
        }
        
        .hand {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url('https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80') right bottom/contain no-repeat;
            z-index: 2;
        }
        
        .vscode-card {
            position: absolute;
            width: 360px;
            height: 220px;
            left: 50px;
            top: 80px;
            background-color: var(--vscode-bg);
            border-radius: 6px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            overflow: hidden;
            z-index: 3;
        }
        
        .vscode-titlebar {
            height: 30px;
            background-color: var(--vscode-titlebar);
            display: flex;
            align-items: center;
            padding: 0 15px;
            color: var(--vscode-text);
            font-size: 12px;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
        }
        
        .vscode-tabs {
            display: flex;
            margin-left: 15px;
        }
        
        .vscode-tab {
            padding: 5px 10px;
            background-color: var(--vscode-bg);
            color: var(--vscode-text);
            font-size: 12px;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            margin-right: 2px;
        }
        
        .vscode-tab.active {
            background-color: var(--vscode-bg);
            color: white;
            font-weight: bold;
        }
        
        .vscode-content {
            display: flex;
            height: calc(100% - 30px);
        }
        
        .vscode-sidebar {
            width: 40px;
            background-color: var(--vscode-sidebar);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 10px;
        }
        
        .vscode-icon {
            width: 24px;
            height: 24px;
            margin: 8px 0;
            color: var(--vscode-text);
            opacity: 0.7;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .vscode-icon.active {
            opacity: 1;
            color: white;
        }
        
        .vscode-editor {
            flex: 1;
            padding: 15px;
            color: var(--vscode-text);
            font-size: 14px;
            line-height: 1.5;
            overflow: hidden;
        }
        
        .json-line {
            display: flex;
            margin-bottom: 4px;
        }
        
        .line-number {
            width: 30px;
            color: var(--vscode-bracket);
            text-align: right;
            padding-right: 10px;
            user-select: none;
        }
        
        .json-key {
            color: var(--vscode-key);
        }
        
        .json-string {
            color: var(--vscode-string);
        }
        
        .json-number {
            color: var(--vscode-number);
        }
        
        .json-boolean {
            color: var(--vscode-boolean);
        }
        
        .json-bracket {
            color: var(--vscode-bracket);
        }
        
        .json-colon {
            color: var(--vscode-text);
            margin: 0 5px;
        }
        
        .json-comma {
            color: var(--vscode-text);
        }
    </style>
</head>
<body>
    <div class="container">
        <button class="save-btn" id="saveBtn">
            保存名片
        </button>
        
        <div class="hand-holding-card" id="cardContainer">
            <div class="background"></div>
            <div class="hand"></div>
            <div class="vscode-card">
                <div class="vscode-titlebar">
                    <div class="vscode-tabs">
                        <div class="vscode-tab active">名片.json</div>
                    </div>
                </div>
                <div class="vscode-content">
                    <div class="vscode-sidebar">
                        <div class="vscode-icon active">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                                <path d="M14 4v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h6l5 5zm-1.5 1H9V2.5L12.5 5z"/>
                            </svg>
                        </div>
                        <div class="vscode-icon">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                                <path d="M2 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
                            </svg>
                        </div>
                        <div class="vscode-icon">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                                <path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13a6 6 0 1 1 0-12 6 6 0 0 1 0 12z"/>
                                <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3.5a.5.5 0 0 1-.5-.5v-4A.5.5 0 0 1 8 4z"/>
                            </svg>
                        </div>
                    </div>
                    <div class="vscode-editor">
                        <div class="json-line"><span class="line-number">1</span><span class="json-bracket">{</span></div>
                        <div class="json-line"><span class="line-number">2</span>  <span class="json-key">"姓名"</span><span class="json-colon">:</span> <span class="json-string">"金灵洞察"</span><span class="json-comma">,</span></div>
                        <div class="json-line"><span class="line-number">3</span>  <span class="json-key">"职位"</span><span class="json-colon">:</span> <span class="json-string">"全栈开发者"</span><span class="json-comma">,</span></div>
                        <div class="json-line"><span class="line-number">4</span>  <span class="json-key">"技能"</span><span class="json-colon">:</span> <span class="json-bracket">[</span><span class="json-string">"JavaScript"</span><span class="json-comma">,</span> <span class="json-string">"Python"</span><span class="json-comma">,</span> <span class="json-string">"React"</span><span class="json-bracket">]</span><span class="json-comma">,</span></div>
                        <div class="json-line"><span class="line-number">5</span>  <span class="json-key">"官网"</span><span class="json-colon">:</span> <span class="json-string">"briefs.gilin.com.cn"</span><span class="json-comma">,</span></div>
                        <div class="json-line"><span class="line-number">6</span>  <span class="json-key">"主题"</span><span class="json-colon">:</span> <span class="json-string">"五一劳动节快乐"</span><span class="json-comma">,</span></div>
                        <div class="json-line"><span class="line-number">7</span>  <span class="json-key">"活跃"</span><span class="json-colon">:</span> <span class="json-boolean">true</span></div>
                        <div class="json-line"><span class="line-number">8</span><span class="json-bracket">}</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        document.getElementById('saveBtn').addEventListener('click', function() {
            const card = document.getElementById('cardContainer');
            
            html2canvas(card, {
                scale: 2,
                logging: false,
                useCORS: true,
                allowTaint: true
            }).then(canvas => {
                const link = document.createElement('a');
                link.download = '程序员名片-VSCode风格.png';
                link.href = canvas.toDataURL('image/png');
                link.click();
            });
        });
    </script>
</body>
</html>