佬们有什么搓页面快的么

搞七捻三
,
1

想搓个html 但是这个我太笨了 复刻不了

BODY-1537448@1x
BODY-1537448@1x1440×3849 219 KB

有没有会的大佬 收费也行 :rofl:

2 个赞
2

用cursor

3

试了 不太行 跟降智商了一样的抽象

1 个赞
4

建议是用 o3-mini-high 搭配 cursor的claude3.5，但是你得懂点代码，一点点让 ai 帮你修改

5

手打，超越一切AI

6

用的3.5 但是不尽人意呀

7

你让它一个页面一个页面的做，不要像你这种把一个长截图直接喂过去

1 个赞
8

多用，自然就弄出来了，很牛的cursor

9

跟cursor好好说，他会帮你搞出来的，不要指望任何ai能凭一张图或一两句话输出你满意的内容，还是得一步一步来

2 个赞
10

哈哈哈哈哈哈哈哈

1 个赞
11

你这个很简单吧，是不是和ai说的时候没说对

12

gpt识别一下,蓝湖上合作的有个生成设计稿的,发给他,让他生成文档,扔给cursor

13

cursor

14

还是自己手动来比较好点吧

15

Claude就行，帮你简单搞了一个

屏幕截图_6-2-2025_112745_
屏幕截图_6-2-2025_112745_1700×4576 393 KB

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>让APP自动化测试更简单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        :root {
            --primary-color: #6366f1;
            --primary-dark: #4f46e5;
            --text-primary: #1f2937;
            --text-secondary: #4b5563;
            --text-light: #6b7280;
            --background-light: #fafafa;
            --border-color: #e5e7eb;
        }

        body {
            line-height: 1.5;
            color: var(--text-primary);
            background-color: var(--background-light);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 10%;
            position: fixed;
            width: 100%;
            background: white;
            z-index: 100;
            border-bottom: 1px solid rgba(229, 231, 235, 0.8);
            transition: all 0.3s ease;
        }

        .logo {
            font-size: 1.5rem;
            color: var(--primary-color);
            text-decoration: none;
            font-weight: bold;
        }

        .nav-links {
            display: flex;
            gap: 2rem;
        }

        .nav-links a {
            text-decoration: none;
            color: var(--text-secondary);
            padding: 0.5rem 0;
            position: relative;
            transition: color 0.3s ease;
            font-size: 0.875rem;
        }

        .nav-links a:hover {
            color: var(--primary-color);
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: var(--primary-color);
            transition: width 0.3s ease;
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        .auth-buttons {
            display: flex;
            gap: 1rem;
        }

        .btn {
            padding: 0.5rem 1.5rem;
            border-radius: 0.375rem;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            border: 1px solid transparent;
            cursor: pointer;
            font-size: 0.875rem;
        }

        .btn-outline {
            border: 1px solid var(--primary-color);
            color: var(--primary-color);
            background: transparent;
        }

        .btn-outline:hover {
            background: rgba(99, 102, 241, 0.1);
        }

        .btn-primary {
            background: var(--primary-color);
            color: white;
        }

        .btn-primary:hover {
            background: var(--primary-dark);
        }

        .hero {
            padding: 8rem 10% 4rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 4rem;
            background: white;
        }

        .hero-content {
            flex: 1;
            max-width: 600px;
        }

        .hero h1 {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 1.5rem;
            color: var(--text-primary);
            line-height: 1.2;
        }

        .hero p {
            font-size: 1.125rem;
            color: var(--text-secondary);
            margin-bottom: 2rem;
            line-height: 1.7;
        }

        .hero-buttons {
            display: flex;
            gap: 1rem;
        }

        .hero-image {
            flex: 1;
            max-width: 50%;
            height: auto;
        }

        .features {
            padding: 6rem 10%;
            background: white;
        }

        .section-title {
            text-align: center;
            margin-bottom: 3rem;
        }

        .section-title h2 {
            font-size: 1.875rem;
            color: var(--text-primary);
            margin-bottom: 1rem;
        }

        .section-title p {
            color: var(--text-secondary);
            max-width: 600px;
            margin: 0 auto;
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin-top: 4rem;
        }

        .feature-card {
            padding: 2rem;
            background: white;
            border-radius: 0.5rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-5px);
        }

        .feature-icon {
            width: 3rem;
            height: 3rem;
            margin-bottom: 1.5rem;
            color: var(--primary-color);
        }

        .feature-card h3 {
            font-size: 1.25rem;
            margin-bottom: 1rem;
            color: var(--text-primary);
        }

        .feature-card p {
            color: var(--text-secondary);
            font-size: 0.875rem;
        }

        .code-example {
            padding: 6rem 10%;
            background: var(--background-light);
            display: flex;
            align-items: flex-start;
            gap: 4rem;
        }

        .code-block-wrapper {
            flex: 1;
            background: #1a1a1a;
            border-radius: 1rem;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                       0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .code-header {
            background: #2d2d2d;
            padding: 0.75rem 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .window-button {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        .window-button.close { background: #ff5f56; }
        .window-button.minimize { background: #ffbd2e; }
        .window-button.maximize { background: #27c93f; }

        .code-block {
            padding: 1.5rem;
            font-family: 'Fira Code', monospace;
            font-size: 0.9rem;
            line-height: 1.7;
            color: #e5e7eb;
            overflow-x: auto;
        }

        .code-comment { color: #6b7280; }
        .code-keyword { color: #ff79c6; }
        .code-string { color: #f1fa8c; }
        .code-function { color: #50fa7b; }

        .code-explanation {
            flex: 1;
            padding: 2rem;
            background: white;
            border-radius: 1rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .code-title {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .code-title .icon {
            width: 3rem;
            height: 3rem;
            padding: 0.5rem;
            background: rgba(99, 102, 241, 0.1);
            border-radius: 0.5rem;
        }

        .explanation-content h4 {
            font-size: 1.125rem;
            margin: 1.5rem 0 0.75rem;
            color: var(--text-primary);
        }

        .explanation-content p {
            color: var(--text-secondary);
            font-size: 0.875rem;
            margin-bottom: 1rem;
        }

        .use-cases {
            padding: 6rem 10%;
            background: white;
        }

        .use-cases .section-title {
            text-align: center;
            margin-bottom: 2rem;
        }

        .use-cases .section-title h2 {
            font-size: 2rem;
            color: var(--text-primary);
            margin-bottom: 1rem;
        }

        .use-cases .section-title p {
            color: var(--text-secondary);
            font-size: 1rem;
            max-width: 600px;
            margin: 0 auto;
        }

        .use-case-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem;
            margin-top: 3rem;
        }

        .use-case-card {
            background: white;
            border-radius: 1rem;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .use-case-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                       0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .use-case-image {
            width: 100%;
            height: 240px;
            object-fit: cover;
            border-bottom: 1px solid var(--border-color);
        }

        .use-case-content {
            padding: 2rem;
        }

        .use-case-card h3 {
            font-size: 1.25rem;
            margin-bottom: 1.5rem;
            color: var(--text-primary);
        }

        .use-case-feature-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .use-case-feature-list li {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
            color: var(--text-secondary);
            font-size: 0.875rem;
        }

        .use-case-feature-list li::before {
            content: "✓";
            display: inline-block;
            margin-right: 0.5rem;
            color: var(--primary-color);
            font-weight: bold;
        }

        .pricing {
            padding: 6rem 10%;
            background: white;
        }

        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin-top: 4rem;
        }

        .pricing-card {
            position: relative;
            background: white;
            border-radius: 1rem;
            padding: 2rem;
            transition: all 0.3s ease;
            border: 1px solid var(--border-color);
            cursor: pointer;
            overflow: hidden;
        }

        .pricing-card.selected {
            border: 2px solid var(--primary-color);
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                       0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .pricing-card:hover:not(.selected) {
            border-color: var(--primary-color);
            transform: translateY(-5px);
        }

        .pricing-tag {
            position: absolute;
            top: 1rem;
            right: -4rem;
            background: var(--primary-color);
            color: white;
            padding: 0.25rem 4rem;
            transform: rotate(45deg);
            font-size: 0.75rem;
            font-weight: 500;
        }

        .pricing-card h3 {
            font-size: 1.25rem;
            margin-bottom: 1rem;
            color: var(--text-primary);
        }

        .price {
            font-size: 2.25rem;
            font-weight: bold;
            color: var(--text-primary);
            margin: 1.5rem 0;
        }

        .price span {
            font-size: 1rem;
            color: var(--text-light);
            font-weight: normal;
        }

        .feature-list {
            margin: 2rem 0;
            list-style: none;
        }

        .feature-list li {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1rem;
            color: var(--text-secondary);
            font-size: 0.875rem;
        }

        .feature-list li::before {
            content: "";
            display: inline-block;
            width: 1.25rem;
            height: 1.25rem;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236366f1'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
        }

        .pricing-card .btn {
            width: 100%;
            margin-top: 1.5rem;
        }

        .footer {
            background: #1f2937;
            color: white;
            padding: 4rem 10% 2rem;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 4rem;
            margin-bottom: 3rem;
        }

        .footer-links h4 {
            font-size: 1rem;
            margin-bottom: 1.5rem;
            color: white;
        }

        .footer-links ul {
            list-style: none;
        }

        .footer-links li {
           margin-bottom: 0.75rem;
       }

       .footer-links a {
           color: #9ca3af;
           text-decoration: none;
           font-size: 0.875rem;
           transition: color 0.3s ease;
       }

       .footer-links a:hover {
           color: white;
       }

       .footer-bottom {
           text-align: center;
           padding-top: 2rem;
           border-top: 1px solid rgba(156, 163, 175, 0.2);
           color: #9ca3af;
           font-size: 0.875rem;
       }
   </style>
</head>
<body>
   <header class="header">
       <a href="#" class="logo">logo</a>
       <nav class="nav-links">
           <a href="#">功能特色</a>
           <a href="#">应用场景</a>
           <a href="#">技术文档</a>
           <a href="#">开发文档</a>
       </nav>
       <div class="auth-buttons">
           <a href="#" class="btn btn-outline">登录</a>
           <a href="#" class="btn btn-primary">免费试用</a>
       </div>
   </header>

   <section class="hero">
       <div class="hero-content">
           <h1>让APP自动化测试更简单</h1>
           <p>基于 Python 的移动端自动化测试解决方案，让测试工程师专注于测试本身，而不是繁琐的环境和配置管理问题。</p>
           <div class="hero-buttons">
               <a href="#" class="btn btn-primary">立即开始</a>
               <a href="#" class="btn btn-outline">查看文档</a>
           </div>
       </div>
       <img src="https://dummyimage.com/600x400/6366f1/ffffff" alt="Hero illustration" class="hero-image">
   </section>

   <section class="features">
       <div class="section-title">
           <h2>强大的功能特性</h2>
           <p>我们提供完善的移动端自动化测试方案，帮助提高自动化测试效率，保证测试效果</p>
       </div>
       <div class="feature-grid">
           <div class="feature-card">
               <div class="feature-icon">
                   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                   </svg>
               </div>
               <h3>Python 原生支持</h3>
               <p>使用最受欢迎的 Python 语言编写测试用例，支持所有 Python 生态系统和工具集</p>
           </div>
           <div class="feature-card">
               <div class="feature-icon">
                   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                   </svg>
               </div>
               <h3>多设备管理</h3>
               <p>支持同时执行多条测试用例流程，实现群控管理，提高测试效率</p>
           </div>
           <div class="feature-card">
               <div class="feature-icon">
                   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                   </svg>
               </div>
               <h3>智能控件识别</h3>
               <p>基于 AI 的控件识别能力，通过深层次特征匹配，提高控件识别精度</p>
           </div>
       </div>
   </section>

   <section class="code-example">
       <div class="code-block-wrapper">
           <div class="code-header">
               <div class="window-button close"></div>
               <div class="window-button minimize"></div>
               <div class="window-button maximize"></div>
           </div>
           <div class="code-block">
               <pre><span class="code-keyword">import</span> pyautotest <span class="code-keyword">as</span> pat

<span class="code-comment"># 初始化测试会话</span>
session = pat.Session()
session.launch_app(<span class="code-string">"com.example.app"</span>)

<span class="code-comment"># 查找并点击按钮</span>
login_btn = session.find_element(<span class="code-string">"id"</span>, <span class="code-string">"login_button"</span>)
login_btn.click()

<span class="code-comment"># 输入用户名和密码</span>
username = session.find_element(<span class="code-string">"id"</span>, <span class="code-string">"username"</span>)
username.input(<span class="code-string">"[email protected]"</span>)
password = session.find_element(<span class="code-string">"id"</span>, <span class="code-string">"password"</span>)
password.input(<span class="code-string">"password123"</span>)

<span class="code-comment"># 验证登录结果</span>
result = session.find_element(<span class="code-string">"id"</span>, <span class="code-string">"welcome_text"</span>)
assert result.text == <span class="code-string">"Welcome back!"</span>

<span class="code-comment"># 关闭会话</span>
session.quit()</pre>
           </div>
       </div>
       <div class="code-explanation">
           <div class="code-title">
               <div class="icon">
                   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                   </svg>
               </div>
               <h3>代码示例解析</h3>
           </div>
           <div class="explanation-content">
               <h4>简单直观的 API</h4>
               <p>PyAutoTest 提供简单易用的 API，让您快速上手自动化测试。无需复杂的配置，只需几行代码即可开始测试。</p>
               
               <h4>智能元素定位</h4>
               <p>支持多种元素定位方式，包括 ID、XPath、CSS 选择器等。内置智能等待机制，自动处理页面加载延迟。</p>
               
               <h4>完整的断言支持</h4>
               <p>提供丰富的断言方法，帮助您验证测试结果。支持文本、属性、状态等多种验证方式。</p>
           </div>
       </div>
   </section>

   <section class="use-cases">
       <div class="section-title">
           <h2>应用场景</h2>
           <p>适用于各类 APP 测试自动化场景，帮助团队提升测试效率和测试质量</p>
       </div>
       <div class="use-case-grid">
           <div class="use-case-card">
               <img src="https://dummyimage.com/600x400/6366f1/ffffff&text=功能测试自动化" alt="功能测试自动化" class="use-case-image">
               <div class="use-case-content">
                   <h3>功能测试自动化</h3>
                   <ul class="use-case-feature-list">
                       <li>UI 界面功能自动化</li>
                       <li>业务流程自动化测试</li>
                       <li>回归测试自动化执行</li>
                   </ul>
               </div>
           </div>
           <div class="use-case-card">
               <img src="https://dummyimage.com/600x400/6366f1/ffffff&text=性能测试自动化" alt="性能测试自动化" class="use-case-image">
               <div class="use-case-content">
                   <h3>性能测试自动化</h3>
                   <ul class="use-case-feature-list">
                       <li>性能数据自动采集</li>
                       <li>稳定性自动化测试</li>
                       <li>性能加压测试</li>
                   </ul>
               </div>
           </div>
       </div>
   </section>

   <section class="pricing">
       <div class="section-title">
           <h2>价格方案</h2>
           <p>选择最适合您需求的价格方案，享受专业的自动化测试服务</p>
       </div>
       <div class="pricing-grid">
           <div class="pricing-card" onclick="selectPlan('personal')">
               <h3>个人版</h3>
               <div class="price">¥0<span>/月</span></div>
               <ul class="feature-list">
                   <li>基础功能使用</li>
                   <li>单设备支持</li>
                   <li>社区支持</li>
               </ul>
               <button class="btn btn-outline" onclick="startFreeTrial(event)">开始使用</button>
           </div>
           <div class="pricing-card selected" onclick="selectPlan('team')">
               <div class="pricing-tag">推荐</div>
               <h3>团队版</h3>
               <div class="price">¥299<span>/月</span></div>
               <ul class="feature-list">
                   <li>所有个人版功能</li>
                   <li>多设备并行测试</li>
                   <li>高级报告功能</li>
                   <li>技术支持服务</li>
                   <li>团队协作功能</li>
               </ul>
               <button class="btn btn-primary" onclick="purchaseTeamPlan(event)">立即购买</button>
           </div>
           <div class="pricing-card" onclick="selectPlan('enterprise')">
               <h3>企业版</h3>
               <div class="price">¥999<span>/月</span></div>
               <ul class="feature-list">
                   <li>所有团队版功能</li>
                   <li>私有化部署</li>
                   <li>定制化开发</li>
                   <li>7×24 专属支持</li>
               </ul>
               <button class="btn btn-outline" onclick="contactSales(event)">联系我们</button>
           </div>
       </div>
   </section>

   <footer class="footer">
       <div class="footer-grid">
           <div class="footer-links">
               <h4>产品</h4>
               <ul>
                   <li><a href="#">功能特色</a></li>
                   <li><a href="#">价格方案</a></li>
                   <li><a href="#">应用场景</a></li>
                   <li><a href="#">更新日志</a></li>
               </ul>
           </div>
           <div class="footer-links">
               <h4>资源</h4>
               <ul>
                   <li><a href="#">开发文档</a></li>
                   <li><a href="#">API 文档</a></li>
                   <li><a href="#">示例代码</a></li>
                   <li><a href="#">技术支持</a></li>
               </ul>
           </div>
           <div class="footer-links">
               <h4>联系我们</h4>
               <ul>
                   <li><a href="mailto:[email protected]">[email protected]</a></li>
                   <li><a href="tel:400-888-8888">400-888-8888</a></li>
               </ul>
           </div>
       </div>
       <div class="footer-bottom">
           © 2024 PyAutoTest. All rights reserved.
       </div>
   </footer>

   <script>
       // 页面滚动效果
       window.addEventListener('scroll', function() {
           const header = document.querySelector('.header');
           if (window.scrollY > 50) {
               header.style.boxShadow = '0 1px 3px rgba(0,0,0,0.1)';
           } else {
               header.style.boxShadow = 'none';
           }
       });

       // 价格方案选择逻辑
       function selectPlan(planType) {
           const cards = document.querySelectorAll('.pricing-card');
           cards.forEach(card => {
               card.classList.remove('selected');
               const btn = card.querySelector('.btn');
               if (btn.classList.contains('btn-primary')) {
                   btn.classList.remove('btn-primary');
                   btn.classList.add('btn-outline');
               }
           });
           
           const selectedCard = document.querySelector(`.pricing-card:nth-child(${
               planType === 'personal' ? 1 : planType === 'team' ? 2 : 3
           })`);
           selectedCard.classList.add('selected');
           
           const selectedBtn = selectedCard.querySelector('.btn');
           selectedBtn.classList.remove('btn-outline');
           selectedBtn.classList.add('btn-primary');
       }

       // 按钮点击事件处理
       function startFreeTrial(event) {
           event.stopPropagation();
           alert('开始免费试用');
       }

       function purchaseTeamPlan(event) {
           event.stopPropagation();
           alert('正在跳转到支付页面...');
       }

       function contactSales(event) {
           event.stopPropagation();
           alert('正在为您转接销售团队...');
       }
   </script>
</body>
</html>
16

写了佬哥，我瞅瞅去

17

试了很多图片生成代码的，都不是太好，还是手搓吧，vue 快一点

18

太强了佬，想请教一下，佬在做这个页面的时候是如何与ai交流的。

19

v0 + cursor

20

大道至简：帮我使用html一比一完全复刻这个页面，保留所有的细节

然后中间我提了一些小细节：
代码旁边的文本部分使用块包裹
导航栏增加一个分隔线
使用示例图片暂时替换需要的图片，实现占位效果
底部三个服务卡片，默认选中时悬浮并且加亮色描边

就很简单的问答，大概修改两次就行了

1 个赞