为企业开发者提供高效、标准化、响应式的前端代码生成支持，提升开发效率与代码质量。
```json
{
"generatedCode": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Login Page</title>\n <!-- 引入企业标准CSS（可自定义） -->\n <style>\n /* 全局样式重置，确保一致性 */\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n /* 设置页面背景和主体内容居中 */\n body {\n font-family: Arial, sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n background-color: #f4f6f8;\n }\n\n /* 表单容器样式 */\n .login-container {\n width: 100%;\n max-width: 400px;\n padding: 20px;\n background: white;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n border-radius: 8px;\n }\n\n /* 表单标题样式 */\n .login-container h1 {\n margin-bottom: 20px;\n font-size: 24px;\n text-align: center;\n color: #333;\n }\n\n /* 输入框样式 */\n .login-container input[type=\"text\"],\n .login-container input[type=\"password\"] {\n width: 100%;\n padding: 10px;\n margin-bottom: 15px;\n border: 1px solid #ccc;\n border-radius: 4px;\n font-size: 14px;\n }\n\n /* 登录按钮样式 */\n .login-container button {\n width: 100%;\n padding: 10px;\n background-color: #007BFF;\n border: none;\n border-radius: 4px;\n color: white;\n font-size: 16px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n }\n\n .login-container button:hover {\n background-color: #0056b3;\n }\n\n /* 响应式支持：小屏设备优化 */\n @media (max-width: 480px) {\n .login-container {\n padding: 15px;\n font-size: 14px;\n }\n .login-container h1 {\n font-size: 20px;\n }\n }\n </style>\n</head>\n<body>\n <div class=\"login-container\">\n <!-- 登录表单起始 -->\n <h1>登录</h1>\n <form action=\"/login\" method=\"POST\">\n <!-- 用户名输入框 -->\n <input type=\"text\" name=\"username\" placeholder=\"用户名\" required>\n <!-- 密码输入框 -->\n <input type=\"password\" name=\"password\" placeholder=\"密码\" required>\n <!-- 登录按钮 -->\n <button type=\"submit\">登录</button>\n </form>\n </div>\n</body>\n</html>",
"codeType": "HTML",
"optimizationSuggestions": [
"建议为登录按钮添加无障碍支持属性 (e.g., aria-label) 增强可访问性。",
"可以为表单提交事件添加客户端验证逻辑，以减少服务端请求负担。",
"为了提高安全性，建议将表单 action 更改为 HTTPS，并避免敏感数据在纯 HTTP 传输中暴露。",
"可以将样式单独抽取到企业级 CSS 文件以便统一管理。",
"在 CSS 中可为输入框的 focus 状态添加视觉反馈效果，提升用户体验。"
]
}
```
{
"generatedCode": "/* 通用样式 */\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n color: #333;\n}\n\nh1, h2, h3 {\n margin: 0 0 20px;\n color: #222;\n font-weight: 600;\n}\n\n/* 标准化按钮样式 */\nbutton {\n background-color: #007BFF; /* 主色调蓝色 */\n color: #fff;\n border: none;\n border-radius: 5px;\n padding: 10px 20px;\n font-size: 16px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\nbutton:hover {\n background-color: #0056b3; /* 鼠标悬停更深的蓝色 */\n}\n\nbutton:disabled {\n background-color: #d6d6d6;\n cursor: not-allowed;\n}\n\n/* 表格样式 */\ntable {\n width: 100%;\n border-collapse: collapse;\n margin: 20px 0;\n font-size: 16px;\n text-align: left;\n}\n\ntable th, table td {\n padding: 10px;\n border: 1px solid #ddd;\n}\n\nth {\n background-color: #007BFF; /* 主色调蓝色 */\n color: white;\n font-weight: 600;\n}\n\n/* 管理页面标题样式 */\n.page-title {\n font-size: 24px;\n margin: 20px 0;\n border-left: 5px solid #007BFF;\n padding-left: 10px;\n font-weight: bold;\n}",
"codeType": "CSS",
"optimizationSuggestions": [
"为按钮增加更多状态样式（如 focus 和 active），以提升交互体验。",
"可以为表格的隔行添加背景色（如 zebra striping），提高数据的可读性。",
"将通用颜色值提炼成 CSS 自定义属性 (CSS Variables)，方便全局维护。",
"为 .page-title 添加响应式字体大小支持进一步优化跨设备显示效果。",
"提供适用于打印模式的专用样式以支持企业级应用场景。"
]
}
```json
{
"generatedCode": "/* Shopping Cart Module */\n\nclass ShoppingCart {\n constructor() {\n this.cart = []; // Initialize an empty cart\n }\n\n // Add a product to the cart\n addProduct(product) {\n const existingProduct = this.cart.find(item => item.id === product.id);\n if (existingProduct) {\n existingProduct.quantity += product.quantity;\n } else {\n this.cart.push({ ...product, quantity: product.quantity || 1 });\n }\n console.log(`Added ${product.name} to the cart.`);\n this.displayCart();\n }\n\n // Remove a product from the cart\n removeProduct(productId) {\n this.cart = this.cart.filter(item => item.id !== productId);\n console.log(`Removed product with ID ${productId} from the cart.`);\n this.displayCart();\n }\n\n // Calculate total price of the cart\n calculateTotal() {\n return this.cart.reduce((total, item) => total + item.price * item.quantity, 0);\n }\n\n // Display the contents of the cart for debugging/logging\n displayCart() {\n console.log('Current cart contents:', this.cart);\n console.log(`Total Price: $${this.calculateTotal().toFixed(2)}`);\n }\n}\n\n// Usage example\nconst cart = new ShoppingCart();\n\n// Adding products\ncart.addProduct({ id: 1, name: 'Laptop', price: 1200.99, quantity: 1 });\ncart.addProduct({ id: 2, name: 'Mouse', price: 25.5, quantity: 2 });\n\n// Removing a product\ncart.removeProduct(2);\n\n// Calculate total price explicitly\nconsole.log(`Final Total Price: $${cart.calculateTotal().toFixed(2)}`);",
"codeType": "JavaScript",
"optimizationSuggestions": [
"Consider validating product input to ensure required fields (id, name, price) are present.",
"Provide error handling for edge cases, such as attempting to remove a product that does not exist in the cart.",
"Allow support for persistent storage (e.g., localStorage) to save the cart data for longer sessions.",
"Modularize the cart operations further if additional features (e.g., discount codes) are planned.",
"Add unit tests for core methods like addProduct, removeProduct, and calculateTotal to ensure functionality remains robust over time."
]
}
```
帮助开发者快速生成高质量、响应式的前端代码，减少重复劳动，专注核心功能开发。
确保团队产出的代码符合企业开发标准，优化交付流程，提高整体开发效率。
无需深度技术背景，即可快速生成业务所需的前端代码，降低技术外包成本。
为原型或设计方案快速生成前端代码展示，助力产品验证与迭代。
通过生成标准化代码学习最佳实践与开发规范，加速技术提升和项目实战能力。
帮助企业级开发者快速生成符合标准化、响应式的前端代码片段，优化工作效率与代码质量，满足企业复杂页面开发的多样化需求，进而提升开发团队整体生产力。
将模板生成的提示词复制粘贴到您常用的 Chat 应用（如 ChatGPT、Claude 等），即可直接对话使用，无需额外开发。适合个人快速体验和轻量使用场景。
把提示词模板转化为 API，您的程序可任意修改模板参数，通过接口直接调用，轻松实现自动化与批量处理。适合开发者集成与业务系统嵌入。
在 MCP client 中配置对应的 server 地址，让您的 AI 应用自动调用提示词模板。适合高级用户和团队协作，让提示词在不同 AI 工具间无缝衔接。
免费获取高级提示词-优惠即将到期
