做服装品牌官网看起来是个前端问题其实真正花时间的是需求梳理、视觉确认和反复改样式。之前帮朋友的小众服装品牌做官网时三天时间里有两天在改色号和间距。直到我尝试用 Codex 这类 AI 编程工具辅助生成页面才发现工作流可以完全不一样。1. 为什么用 Codex 做服装品牌官网1.1 一个常见的项目痛点我见过很多做品牌官网的团队把大量时间浪费在“改需求”上。运营说首页要大气设计说留白要足够老板说要一眼看出品牌调性最后前端同学在样式代码里来回调整一天下来可能只完成了一个首屏区域。品牌官网的开发难度并不在某一个技术难点上而在于快速试错、快速出版本。Codex 的价值就在这里它能根据一段项目描述直接生成一套完整的前端代码。很多人以为它只会写通用模板实际上只要提示词足够具体它完全可以生成带有品牌气质的页面结构。本文要做的就是带着你从零开始用 Codex 做一个真正能展示的服装品牌官网。1.2 Codex 是什么Codex 是 OpenAI 推出的 AI 编程工具它的工作方式类似一个“AI 前端协作者”。你可以用自然语言描述页面结构、设计风格、功能模块它会把需求转换成代码文件。和聊天式 AI 不同Codex 更强调在本地项目中执行任务因此非常适合真实开发流程。需要说明的是Codex 并不能完全替代开发者的判断。尤其在品牌视觉、交互细节和生产环境安全上人的把关仍然不可少。文章后面会专门讲哪些环节需要人工介入避免拿到“能运行但很粗糙”的代码。1.3 本文你能获得什么这篇教程会完整演示安装 Codex CLI、配置模型访问方式、设计服装品牌官网的信息架构、编写提示词让 Codex 生成页面、在浏览器中验证和调整、以及处理运行过程中的高频报错。最终你会得到一个可以直接改造成自己品牌风格的官网原型。2. 环境准备安装与配置 Codex CLI2.1 安装 Codex CLI项目编码开始前先把本地开发环境准备好。Codex CLI 是 OpenAI 推出的命令行编程工具你可以在终端中通过包管理器安装。下面以常见的 npm 方式为例如果你的系统或版本不同请以官方文档为准。npm install -g openai/codex安装完成后确认版本号能正常输出codex --version如果你的环境里还没有 Node.js 或 npm需要先安装 Node.js 运行环境。版本方面没有绝对要求但建议使用较新的 LTS 版本避免和 Codex 产生兼容问题。命令行工具的好处是启动轻量、便于脚本化后续接入模型或批量生成文件都很方便。2.2 登录并配置访问凭证第一次执行codex命令时工具会引导你登录 OpenAI 账号。你还可以在终端中执行codex login登录之后Codex 会保存你的访问凭证。如果你的使用场景是自动化脚本或服务器环境也可以设置环境变量把密钥交给 Codex 使用。export OPENAI_API_KEY你的_API_Key这里要提醒一句API Key 等同于密码不要把它提交到 Git 仓库也不要硬编码在前端代码中。一旦发现密钥泄露应尽快到控制台吊销并重新生成。2.3 接入第三方模型的情况不少开发者在搜索“Codex 接入 DeepSeek”希望把 Codex 接到国内可访问的模型服务上。Codex CLI 在较新版本中支持自定义模型服务地址和模型名称前提是第三方服务暴露了兼容 OpenAI 协议的接口。你可以在 Codex 的配置文件或环境变量中指定服务地址和模型名思路类似于下面这样export OPENAI_BASE_URLhttps://api.example.com/v1不过具体的配置字段名会随版本变化建议以你安装的 Codex CLI 版本帮助文档为准。遇到 “model is not supported” 这类错误时通常就是模型名写错或当前版本不支持该模型可以先用codex --help查看可用参数再去对照官方文档调整。3. 服装品牌官网的需求与信息架构3.1 先想清楚几个页面用 AI 写代码之前最重要的是把需求想明白。品牌官网常见的页面包括首页品牌主视觉、核心新品、品牌理念摘要商品列表页按系列展示服装商品详情页单品大图、价格、尺码、面料说明品牌故事页创始人理念、品牌历程门店与联系页门店地址、联系表单对服装品牌官网来说首页的质量几乎决定用户对整个品牌的印象。所以本文的实战部分会把首页作为重点先把首页做透其他页面可以后续用同样的提示词方法继续扩展。3.2 从品牌调性推导视觉风格官网不是功能堆砌而是品牌气质的延伸。假设我们做一个叫 “LUMIÈRE” 的品牌定位是中高端女装视觉关键词可以拆成色彩米白、黑色、香槟金字体无衬线为主标题可以带一点字重变化布局大留白、不对称排版交互平滑滚动、细腻的悬停反馈这些关键词看起来抽象但把它写进提示词后Codex 能生成远比“给我一个网页”更有质感的代码。后续会演示如何把这段品牌描述转化为提示词。3.3 技术选型不用复杂官网原型不需要引入 Vue 或 React 这类重型框架。使用原生 HTML CSS JavaScript就能完成一个视觉出色、响应式适配的官网。这样代码量可控理解和维护成本也低尤其适合品牌方后续交给外包团队或运营维护。当然如果需求中已经明确要嵌入小程序、电商支付或会员系统技术选型就需要重新评估。原型阶段先跑通视觉和内容结构是效率最高的做法。4. 用 Codex 生成官网完整实战流程4.1 创建项目目录在开始之前先在本地创建一个干净的项目目录。为什么要单独建目录因为 Codex 在生成代码时会读取当前目录中的文件作为上下文。如果目录里堆满了其他项目的文件Codex 可能会被无关内容干扰甚至把新旧代码混在一起。命令行执行mkdir lumiere-website cd lumiere-website创建完成后可以在这个目录中放一个README.md写上项目的基本定位比如“中高端服装品牌 LUMIÈRE 官网原型”。这不是必须的但如果你希望 Codex 理解项目背景用项目说明文件来辅助非常有效。4.2 编写第一轮提示词首页结构在项目目录中启动 Codex输入下面这组提示词。请注意提示词不是简单一句话而是包含品牌定位、页面模块、技术约束的完整描述请为一个服装品牌 LUMIÈRE 创建官网首页输出 index.html、css/style.css、js/main.js 三个文件。 品牌调性中高端女装极简现代米白、黑色与香槟金配色。 页面结构 1. 顶部固定导航品牌 Logo、菜单新品/系列/品牌故事/门店、预约到店按钮 2. Hero 主视觉品牌英文名 LUMIÈRE、中文标语“以光影定义时尚”、背景使用深色渐变 3. 新品系列4 张商品卡片包含氛围图、商品名、价格 4. 品牌理念区左侧一段品牌介绍右侧一张装饰图 5. 邮件订阅区黑色背景包含邮箱输入框和订阅按钮 6. 页脚版权信息和社交媒体入口。 技术要求原生 HTML/CSS/JS响应式布局移动端菜单可展开收起。图片暂时用 CSS 渐变占位。这是非常关键的一步。提示词里包含了品牌词、结构、技术要求和占位策略Codex 不需要反复猜测你的意图可以直接生成一套完整项目文件。如果你希望它连商品名称都一并虚拟出来可以在提示词中指定“请为每个商品卡取一个符合品牌调性的名称和价格”这样生成结果会更完整。4.3 检查生成结果并迭代Codex 完成生成后在浏览器中打开index.html预览效果。这时你可能会发现一些问题比如Hero 区文字与背景对比度不够卡片间距过大或过小移动端菜单没有 hover 状态此时不需要重新描述全部需求只需基于现有页面给出增量修改要求例如把 Hero 区标题改成更大字重并在标题下方增加“探索新品”按钮商品卡片改为 4 列网格在小于 768px 时变成 2 列。这种“先生成、再微调”的迭代方式比一次性要求完美更高效。Codex 会基于上下文理解修改范围你只需要关注最终的视觉呈现是否符合预期。4.4 用 Codex 扩展其他页面首页确定后其余页面可以复用统一的视觉语言。你可以继续输入参照首页的风格创建 product.html 商品列表页展示 6 个商品卡片每个商品有系列名称、商品名和价格。Codex 能继承已生成文件中的 CSS 变量和样式只要同一个目录下已经有style.css新页面会自然保持风格统一。这样官网的骨架就会逐步完整。5. 核心代码实现与讲解这一节给出完整的首页代码方便你直接复制运行。为了让新手容易上手我把样式和脚本内联在一个 HTML 文件中。你只需要新建index.html复制以下内容用浏览器打开即可看到效果。5.1 完整 HTML 文件!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleLUMIÈRE — 以光影定义时尚/title style :root { --ivory: #faf7f2; --black: #1a1a1a; --gold: #b49a67; --gray: #8a8a8a; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: PingFang SC, Microsoft YaHei, Helvetica Neue, Arial, sans-serif; background: var(--ivory); color: var(--black); line-height: 1.7; } a { text-decoration: none; color: inherit; } /* 导航栏 */ .navbar { position: fixed; width: 100%; top: 0; left: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 18px 60px; background: transparent; transition: background 0.4s ease, box-shadow 0.4s ease; } .navbar.scrolled { background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); } .logo { font-size: 24px; font-weight: 600; letter-spacing: 6px; } .nav-links { display: flex; gap: 40px; list-style: none; font-size: 15px; } .nav-links li a { position: relative; padding-bottom: 4px; } .nav-links li a::after { content: ; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--black); transition: width 0.3s; } .nav-links li a:hover::after { width: 100%; } .btn-gold { background: var(--gold); border: none; color: #fff; padding: 10px 20px; font-size: 14px; cursor: pointer; border-radius: 2px; transition: opacity 0.3s; } .btn-gold:hover { opacity: 0.85; } .nav-toggle { display: none; font-size: 28px; background: none; border: none; cursor: pointer; } /* Hero */ .hero { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: linear-gradient(135deg, #24201c 0%, #171512 60%, #2c2620 100%); color: #f5f0e8; } .hero h1 { font-size: clamp(56px, 10vw, 120px); font-weight: 200; letter-spacing: 18px; } .hero p { margin-top: 16px; font-size: clamp(16px, 3vw, 22px); letter-spacing: 8px; color: rgba(245, 240, 232, 0.8); } .hero .btn-hero { margin-top: 40px; background: transparent; border: 1px solid #f5f0e8; color: #f5f0e8; padding: 12px 36px; font-size: 14px; letter-spacing: 4px; cursor: pointer; transition: background 0.3s, color 0.3s; } .hero .btn-hero:hover { background: #f5f0e8; color: #1a1a1a; } /* 通用容器 */ .container { max-width: 1200px; margin: 0 auto; padding: 90px 40px; } .section-title { font-size: 32px; font-weight: 400; letter-spacing: 6px; text-align: center; margin-bottom: 12px; } .section-subtitle { text-align: center; color: var(--gray); letter-spacing: 3px; font-size: 14px; margin-bottom: 50px; } /* 新品卡片 */ .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .product-card { background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04); transition: transform 0.3s, box-shadow 0.3s; } .product-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.1); } .product-thumb { height: 320px; position: relative; } .thumb-1 { background: linear-gradient(145deg, #d8c8b4, #b7a58e); } .thumb-2 { background: linear-gradient(145deg, #33312e, #1f1e1c); } .thumb-3 { background: linear-gradient(145deg, #c4b39a, #a48f74); } .thumb-4 { background: linear-gradient(145deg, #8c8375, #5a554b); } .product-info { padding: 20px; } .product-name { font-size: 16px; font-weight: 500; } .product-price { margin-top: 6px; color: var(--gray); font-size: 14px; } /* 品牌理念区 */ .about { display: flex; gap: 60px; align-items: center; } .about-text { flex: 1; } .about-text h2 { font-size: 28px; font-weight: 400; letter-spacing: 5px; margin-bottom: 24px; } .about-text p { color: #555; font-size: 15px; margin-bottom: 16px; } .about-image { flex: 1; height: 420px; background: linear-gradient(135deg, #ded3c4, #bfae99); } /* 订阅区 */ .subscribe { background: var(--black); color: #f5f0e8; text-align: center; padding: 80px 40px; } .subscribe h2 { font-size: 28px; font-weight: 300; letter-spacing: 6px; } .subscribe p { color: rgba(245, 240, 232, 0.6); margin: 16px 0 32px; font-size: 14px; } .subscribe-form { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } .subscribe-form input { width: 360px; max-width: 100%; padding: 14px 16px; border: 1px solid rgba(245, 240, 232, 0.4); background: transparent; color: #f5f0e8; font-size: 14px; border-radius: 2px; } .subscribe-form input::placeholder { color: rgba(245, 240, 232, 0.4); } /* 页脚 */ .footer { background: #111; color: rgba(255, 255, 255, 0.5); text-align: center; padding: 32px 20px; font-size: 13px; letter-spacing: 2px; } /* 响应式 */ media (max-width: 992px) { .product-grid { grid-template-columns: repeat(2, 1fr); } .about { flex-direction: column; } .about-image { width: 100%; } } media (max-width: 640px) { .navbar { padding: 14px 20px; } .nav-links { display: none; flex-direction: column; position: absolute; top: 64px; left: 0; width: 100%; background: rgba(255, 255, 255, 0.97); padding: 20px; } .nav-links.open { display: flex; } .nav-toggle { display: block; } .product-grid { grid-template-columns: 1fr; } .container { padding: 60px 20px; } } /style /head body nav classnavbar div classlogoLUMIÈRE/div button classnav-toggle idnavToggle☰/button ul classnav-links idnavLinks lia href#新品/a/li lia href#系列/a/li lia href#品牌故事/a/li lia href#门店/a/