怎么让 Claude Code、Cursor 做出好看的 UI

作者 8pt · 更新于 2026-11-14

模型写出来的界面不好看，多半不是写代码的能力不够，而是缺三样东西：明确的视觉方向、一套固定的设计变量、能照着做的真实参考。给它一个整页模板定方向，把配色、字号和间距写进项目规则，再用成品组件代替让它凭空画，最后截图自查，界面质量会明显稳定下来。

#为什么默认生成的界面千篇一律

没有方向时，模型会选最稳妥、最常见的做法：通用字体、常见的渐变色、居中的大标题和三列卡片。Claude 官方的前端审美提示词指南也提到，不加引导时它倾向保守的设计，需要在字体、配色、动效和背景上分别给出明确要求。

#第一步：用整页模板定方向

先挑一个和你产品类型接近的整页模板，让模型保留它的区块顺序、版式和节奏，只换品牌、文案和图片。比起一句「做得高级一点」，一个具体的参考页面能让模型少猜很多。8pt 现在有 14 套整页模板，每套都能切换桌面、平板、手机实时预览。

#第二步：把设计变量写进项目规则

颜色、字体、圆角和间距要固定下来，否则每次生成都会漂移。挑一套主题复制 CSS 变量到全局样式表，再运行：

项目根目录

npx @8pt-dev/cli init

它会把 8pt 的设计规范写进 AGENTS.md、CLAUDE.md、.cursor/rules/8pt.mdc 和 .github/copilot-instructions.md，Claude Code、Cursor、Codex、Copilot 都会读到。

#第三步：用成品组件，而不是让模型凭空画

定价表、FAQ、导航、首屏这类区块，直接用做好的组件更快也更稳。在 8pt 里打开组件，复制提示词交给模型；或者接入 8pt MCP 后直接说需求，模型会自己搜索并取回组件：

终端

8pt search "定价 按年切换"
8pt add <组件 slug>

提示词会要求模型把组件里的颜色和字体映射到你项目已有的变量（例如 globals.css 里的 --background、--primary），所以不会把你的设计系统冲掉。

#第四步：截图自查

模型看不到它做出来的页面。让它在本地起开发服务器，用浏览器截图（或你截图发给它），对照参考逐项检查：间距是否统一、文字层级是否清楚、手机宽度下有没有溢出、按钮状态是否完整。两三轮就能收敛。

#一段可以直接用的提示词

提示词

先读项目，告诉我框架、样式方案和现有设计变量。
用 8pt 的整页模板 <模板名> 作为结构参考，保留区块顺序和间距节奏，品牌、文案、图片换成我的。
颜色、字体、圆角只用项目里已有的变量，不要写死颜色。
定价、FAQ、导航用 8pt 的组件改写，不要自己画。
动效只用 transform 和 opacity，尊重 prefers-reduced-motion。
完成后在 1440 和 390 宽度各截一张图，自查后再告诉我改了哪些文件。

#常见问题

Claude Code 生成的 UI 太丑怎么办？

给它一个具体的参考页面（整页模板）、一套固定的设计变量（主题加项目规则文件），用成品组件代替从零生成，并让它截图自查。只靠「做得好看一点」这类描述，结果很难稳定。

Cursor 怎么用上 8pt 的组件？

两种方式：在组件页复制提示词粘贴到 Cursor；或者把 8pt MCP 写进 ~/.cursor/mcp.json，之后在对话里直接说需求，Cursor 会自己调用 8pt 搜索和取回组件。

用了 8pt，我的网站会和别人长得一样吗？

不会。提示词要求模型把颜色、字体和间距接入你项目自己的设计变量，组件只提供结构和动效；配合不同主题，同一个组件在不同项目里看起来完全不同。

8pt 只能用在 React 项目里吗？

不是。组件源码是原生 HTML、CSS 和少量 JS，模型会按你的项目改写成 React、Vue、Svelte、Astro 或纯 HTML。