1. 为什么你的 Claude Code 生成的界面总像半成品很多人第一次用 Claude Code 或 Codex 写前端都会经历同一个落差功能跑通了界面却像 2010 年的后台模板。按钮是浏览器默认的灰蓝渐变卡片是直角加一条硬边框间距全靠感觉字体是系统默认的宋体或 Arial。你明明说了“做得好看一点”它也确实照做了——只是它理解的“好看”和你脑子里的画面完全不是一回事。问题的根子在于模型看不见你脑海里的画面。它只能根据你给的文字做概率推断。你说“登录页”它就从训练数据里最常见、最平均的那个登录页开始画。而“最常见”往往等于“最平庸”。所以 UI 提示词工程的核心不是让 AI 更聪明而是把你脑子里的视觉意图翻译成它能精确执行的结构化语言。这套方法适合谁适合所有用 Claude Code、Codex 这类 AI 编程工具写前端但不想每次都手动调 CSS 的开发者。你不需要是设计师但你需要学会用设计师的语言描述界面。下面我会给出可直接复制的提示词模板、配置片段以及在本地项目里验证生成效果的完整步骤。实测下来同一句需求提示词改与不改产出质量差距能到两个档次。在开始之前先明确一个概念UI 提示词不是“许愿”而是“规格说明”。你写的是需求文档不是祈使句。把“好看”拆成颜色、间距、圆角、阴影、字体、动效六个可量化维度模型才有抓手。这也是后面所有模板的底层逻辑。2. TaoToken 前置准备让 Claude Code 与 Codex 稳定接入在写提示词之前得先保证工具本身能稳定调用模型。Claude Code 和 Codex 都需要一个兼容的 API 入口否则你连生成都跑不起来更别说调 UI 了。这里我用 TaoToken 作为统一接入层它提供 OpenAI 兼容和 Anthropic 兼容两种协议Claude Code 走 Anthropic 协议Codex 走 OpenAI 协议一个 Key 就能覆盖。先说清楚它是什么TaoToken 是一个模型 API 聚合服务官网在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 端点是 https://taotoken.net/api 。你注册后在控制台生成 Key就能在 Claude Code、Codex、Cline 等工具里配置使用。它不替代你的编辑器只是把模型请求转发到对应模型上。Claude Code 的配置方式是设置环境变量。在终端里执行export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_AUTH_TOKEN你的TaoToken Key export ANTHROPIC_MODELclaude-sonnet-4-20250514如果你用的是 Claude Code 的 settings 文件可以写进~/.claude/settings.json{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: 你的TaoToken Key, ANTHROPIC_MODEL: claude-sonnet-4-20250514 } }Codex 走的是 OpenAI 协议配置在~/.codex/auth.json和~/.codex/config.toml里。auth.json 写 Key{ OPENAI_API_KEY: 你的TaoToken Key }config.toml 写 Base URL 和模型model gpt-5-codex model_provider taotoken [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api wire_api chat这里三件套必须齐全Base URL 指向 https://taotoken.net/api Key 用控制台生成的Model ID 按你实际要用的填。少任何一个都会报 401 或连接失败。Key 的生成入口在控制台的 API Keys 页面文档在接入文档里能查到各工具的完整配置示例。配置完先别急着写 UI用一句简单请求验证通路。Claude Code 里直接输入“用一句话说明你是什么模型”能正常返回就说明接入成功。Codex 同理跑一个codex print hello看是否有输出。这一步过了再进入提示词环节否则你分不清是提示词问题还是接入问题。3. 可复制的 UI 提示词模板与配置片段这一节是全文的核心给你能直接粘贴进 Claude Code 或 Codex 的提示词结构。我把它拆成“系统约束”和“单次需求”两层。系统约束放在项目根目录的规则文件里单次需求在对话里发。先建一个项目级规则文件。Claude Code 读CLAUDE.mdCodex 读AGENTS.md内容可以共用。把下面这段写进去# UI 生成规范 ## 技术栈 - React 18 TypeScript Tailwind CSS 3.x - 所有样式使用 Tailwind 实用类禁止自定义 CSS 文件 - 图标统一用 lucide-react尺寸 20px ## 设计令牌 - 主色 #3B82F6悬停加深 10% - 背景 #F9FAFB卡片 #FFFFFF - 文字主色 #111827次要 #6B7280占位 #9CA3AF - 圆角卡片 16px按钮 8px输入框 12px - 间距遵循 8px 网格卡片内边距 24px - 阴影0 4px 6px -2px rgba(0,0,0,0.05) ## 字体 - 字体族 Inter, system-ui, sans-serif - 标题 1.5rem/600正文 1rem/400行高 1.6 ## 动效 - 过渡 200ms cubic-bezier(0.4,0,0.2,1) - 悬停卡片上浮 4px阴影加深 ## 输出要求 - 先输出一句话设计方案再输出完整代码 - 组件拆分到独立文件每个文件不超过 150 行这段规则的作用是给模型一个稳定的“设计系统锚点”。之后每次对话你只需要描述具体页面不用重复颜色和间距。模型会自动套用上面的令牌。单次需求的提示词模板按这个顺序写项目类型 → 整体风格 → 布局 → 组件细节 → 参考案例。举个例子做一个数据仪表盘项目类型后台管理仪表盘首页 整体风格Bento 网格 暗黑模式参考 Linear App 的暗色质感 布局 - 顶部固定导航栏高 64px左侧 logo右侧用户头像 - 主内容区 12 列网格最大宽度 1280px 居中 - 第一行放 4 个统计卡片每个占 3 列 - 第二行左侧放折线图占 8 列右侧放活动列表占 4 列 组件细节 - 统计卡片背景 #1F2937圆角 16px内边距 24px数字用 2rem/700 - 折线图用 recharts线条主色 #3B82F6网格线 #374151 - 活动列表每项高 56px左侧圆形头像 32px右侧时间戳用 #9CA3AF 参考案例类似 Vercel Dashboard 的信息密度注意这里每个数值都是具体的。不要写“圆角大一点”写“圆角 16px”不要写“暗色好看”写“背景 #1F2937”。模型对数字的服从度远高于形容词。如果你要生成的是营销落地页模板换成这个结构项目类型SaaS 产品落地页 整体风格极简白 柔和渐变专业可靠 布局 - Hero 区居中标题 3rem/700副标题 1.25rem/#6B7280下方两个按钮 - 功能区三列卡片每列图标 标题 描述 - 定价区三档卡片中间档高亮带主色边框 配色主色 #3B82F6渐变从 #EFF6FF 到 #FFFFFF角度 180deg 动效Hero 元素依次淡入上浮交错延迟 50ms把这两段模板存成代码片段下次直接改关键词就行。真正省时间的不是每次从零写而是有一套可复用的骨架。4. 在本地项目验证生成效果提示词写完得验证。不能只看模型说“已完成”要跑起来看真实渲染。下面是从零到看到界面的完整步骤。第一步建项目。用 Vite 起一个 React TS 项目npm create vitelatest ui-demo -- --template react-ts cd ui-demo npm install npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p第二步配置 Tailwind。改tailwind.config.js把 content 指向源码export default { content: [./index.html, ./src/**/*.{js,ts,jsx,tsx}], theme: { extend: {} }, plugins: [], }在src/index.css里加三行tailwind base; tailwind components; tailwind utilities;第三步把第 3 节的规则文件放进项目根目录。Claude Code 在项目里启动时会自动读取CLAUDE.md。然后启动 Claude Codeclaude在对话里粘贴你的单次需求模板。模型会先输出设计方案再生成组件代码。等它写完检查文件是否落在src/components/下。第四步跑起来看npm run dev打开浏览器访问http://localhost:5173。这时候你看到的才是真实效果。重点看四个地方间距是否统一用浏览器开发者工具量一下卡片内边距是不是 24px、颜色是否和令牌一致、悬停动效是否生效、响应式在窄屏下是否塌陷。如果效果不对不要重新生成整个页面。用增量指令修正比如“统计卡片的背景改成 #1F2937圆角改成 16px其他不变。” 这样模型只改局部不会把已经对的部分也改乱。我试过一次性重写结果原本对的布局也被带偏了。第五步截图对比。把生成结果和你心里的参考案例放一起看。差距通常在三个地方阴影太重或太轻、文字层级不够标题和正文一样大、留白不足。针对这三点追加指令一般两轮就能收敛。验证环节的关键是永远以浏览器渲染为准不以模型的自述为准。模型说“已应用毛玻璃效果”你得在开发者工具里看到backdrop-filter: blur(12px)才算数。5. 常见报错与排查401、local proxy failed、reading choices接入和生成过程中会碰到几类典型报错这里逐个拆。401 Unauthorized。这是最常见的。原因通常是 Key 没填对、Key 过期、或者 Base URL 写错。排查顺序先确认ANTHROPIC_AUTH_TOKEN或OPENAI_API_KEY里填的是 TaoToken 控制台生成的 Key没有多余空格再确认 Base URL 是https://taotoken.net/api注意结尾没有多余的斜杠或/v1重复。Claude Code 报 401 时用echo $ANTHROPIC_AUTH_TOKEN看环境变量是否真的生效有时候是 shell 没 reload。local proxy failed。这个报错一般出现在 Claude Code 启动时说明它尝试走本地代理但连不上。检查你的环境变量里有没有残留的HTTP_PROXY或HTTPS_PROXY指向一个不存在的本地端口。清掉这些变量再启动unset HTTP_PROXY HTTPS_PROXY然后重新claude。如果还报检查~/.claude/settings.json里有没有冲突的代理配置。reading choices 相关报错。这类通常出现在 Codex 或 OpenAI 兼容接口返回结构不符合预期时比如Cannot read properties of undefined (reading choices)。根因是 Base URL 或 wire_api 配错导致返回的不是标准 chat completion 结构。检查config.toml里wire_api chat是否写对base_url是否是https://taotoken.net/api。如果用的是 responses 协议而服务端返回 chat 格式就会读不到 choices。OAuth 相关报错。Claude Code 有时会提示 OAuth 登录失败或 token 刷新失败。如果你用的是 API Key 模式确保没有同时启用 OAuth 登录态。删掉~/.claude/下的凭据缓存文件重新用环境变量方式启动。Codex 的 auth.json 如果格式不对也会报认证错误确认 JSON 是合法的Key 字段名是OPENAI_API_KEY。模型 ID 不存在。报错类似model not found。检查你填的 Model ID 是否在 TaoToken 支持的列表里。Claude 系列和 GPT 系列的 ID 拼写容易错比如把claude-sonnet-4-20250514写成claude-sonnet-4。以控制台文档里的为准。排查的通用思路先确认三件套Base URL Key Model ID齐全且正确再看网络层有没有代理干扰最后看返回结构是否符合协议。90% 的问题出在前两步。6. 把提示词工程变成日常习惯写 UI 提示词这件事本质是把审美翻译成规格。你不需要成为设计师但需要养成一个习惯每次打开 Claude Code 之前先花三分钟把需求拆成颜色、间距、圆角、阴影、字体、动效六个维度。这三分钟的投入能省掉后面半小时的返工。几个可以直接用的经验把第 3 节的规则文件固化到你的项目模板里新项目直接复制把常用页面的提示词存成片段库落地页、仪表盘、表单各一套每次生成后只做增量修正不整体重写。时间长了你会发现自己描述界面的语言越来越准模型产出的第一版就越来越接近成品。工具层面Claude Code 适合需要深度推理的复杂组件Codex 适合快速批量生成。两者都通过 TaoToken 接入后切换成本很低。需要长期跑编码和 Agent 任务的可以了解下 Coding Plan想先验证模型效果的直接去模型对话里试几句提示词感受一下不同描述带来的产出差异。接入文档里有各工具的完整配置API Keys 页面生成 Key 就能开始。