一天一个开源项目（第8篇）：UI/UX Pro Max Skill 配 TaoToken，让 AI 设计助手稳定跑通专业 UI/UX 工作流

1. 为什么 AI 写出来的 UI 总像“半成品”用 Claude Code 或 Cursor 生成页面最常遇到的不是代码跑不起来而是跑起来之后“能看但不好看”。按钮间距忽大忽小主色和强调色打架卡片圆角一会儿 8px 一会儿 16px字体层级全靠感觉。你让它改它改一处崩一处因为没有一套统一的设计约束在背后兜底。UI/UX Pro Max Skill 这个开源项目解决的正是这件事。它本质上是给 AI 编程助手注入一套设计智能内置设计系统生成引擎、色彩与排版知识库、按产品类型推荐样式的推理逻辑让 AI 在写代码之前先确定“这个产品该长什么样”。它适合正在用 Claude Code、Cursor、Windsurf 等工具做前端或全栈开发的人尤其是设计背景不强、但需要交付专业界面的开发者。但这里有个容易被忽略的落地问题Skill 本身负责设计推理而模型调用需要一条稳定的通道。如果你在 Claude Code 里同时配置多个来源的 Key或者 Cursor 和 Claude Code 各用一套配置切换模型时很容易出现鉴权失败、请求超时、上下文对不上。这篇就把两件事合在一起讲UI/UX Pro Max Skill 怎么装、怎么配以及怎么用 TaoToken 做统一 Key 通道让设计工作流稳定跑通。我试过把 Skill 和统一 Key 通道分开配结果在 Cursor 里调好的提示词模板换到 Claude Code 就复现不出来排查半天发现是模型通道不一致导致的设计推理结果漂移。下面按可复制的顺序来。2. TaoToken 前置统一 Key 通道与 Skill 的关系先说清楚分工。UI/UX Pro Max Skill 是一个装在项目里的“技能包”它包含提示词模板、设计知识库 CSV、以及一个 Python 搜索脚本负责把产品类型映射成设计系统。它不负责模型调用。模型调用由你用的 AI 编程工具Claude Code、Cursor完成而这些工具需要一个 API 端点和 Key。TaoToken 在这里的角色是统一 Key 通道你申请一个 Key配置一个 API 地址Claude Code、Cursor、以及后续可能接入的其他工具都走同一条通道。好处是设计工作流里模型行为一致不会出现“同一个提示词在两个工具里生成两套配色”的情况。官网入口在这里注册和查看文档都从这进https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentAPI 地址统一用这个注意它不带 UTM 参数配置时直接填https://taotoken.net/api你需要先拿到 Key。进入控制台创建 API Key建议按项目或按工具命名比如claude-code-uiux、cursor-uiux方便后面排查是哪个工具在消耗额度。https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite创建 Key 的页面https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite接入文档在这里配置项含义、模型名对照都以文档为准https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite如果你主要做长期编码和 Agent 类任务比如让 Claude Code 持续跑 UI/UX 生成可以看 Coding Plan它更适合高频、长上下文的场景https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite想先验证模型对话是否通用模型对话页快速测一条请求https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentmodel-chatutm_campaignrewriteClaude Code 相关的接入说明单独有一页配 Anthropic 协议时对着看https://taotoken.net/claude-code-anthropic?utm_sourcetaotoken_aicg_blog_endutm_contentclaudecodeutm_campaignrewrite注意Key 只创建一次就够多个工具共用同一个 Key 是可以的但建议至少按“工具”分 Key出问题时能快速定位是哪个客户端在报错。3. 可复制配置settings.json 与 config.toml 骨架这一节是重点直接给能抄的配置。分两块Claude Code 用settings.jsonCursor 用config.toml或对应的 settings 界面。两者都指向同一个 TaoToken API 地址和 Key。3.1 先装 UI/UX Pro Max SkillSkill 的安装用官方 CLI先装 CLI 再初始化到项目里。前置要求是 Python 3.x因为设计知识库的检索脚本是 Python 写的。# 检查 Python python3 --version # 安装 CLI npm install -g uipro-cli # 进入你的项目目录 cd /path/to/your/project # 为 Claude Code 安装技能 uipro init --ai claude # 为 Cursor 安装技能 uipro init --ai cursor装完之后项目里会多出技能目录Claude Code 下大致是.claude/skills/ui-ux-pro-max里面包含技能定义、提示词模板、data/知识库和scripts/search.py。Cursor 下会生成对应的斜杠命令文件。3.2 Claude Code 的 settings.json 骨架Claude Code 的配置走 Anthropic 协议把 API 地址和 Key 填进去。下面是一个可复制的骨架字段名以你本地版本为准核心是base_url和api_key两项{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: sk-你的TaoTokenKey, ANTHROPIC_MODEL: claude-sonnet-4-20250514 }, permissions: { allow: [ Bash(python3:*), Read, Write, Edit ] } }这里permissions.allow里放行Bash(python3:*)是关键因为 Skill 的设计系统检索要靠 Python 脚本跑不放行的话技能激活了也调不动知识库。3.3 Cursor 的 config.toml 骨架Cursor 走 OpenAI 兼容协议时配置项是base_url和api_key。如果你用的是 Cursor 的模型设置界面对应填这两项即可如果用配置文件骨架如下[model] provider openai-compatible base_url https://taotoken.net/api api_key sk-你的TaoTokenKey model claude-sonnet-4-20250514 [features] ui_ux_skill true skill_path .cursor/skills/ui-ux-pro-maxui_ux_skill true和skill_path是让 Cursor 知道技能装在哪斜杠命令/ui-ux-pro-max才能被识别。3.4 统一 Key 通道的写法两个工具共用同一个 Key 时建议不要在配置文件里硬编码明文而是用环境变量引用。Claude Code 的settings.json里可以写成{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: ${TAOTOKEN_API_KEY} } }然后在 shell 里导出export TAOTOKEN_API_KEYsk-你的TaoTokenKeyCursor 的config.toml同理用${TAOTOKEN_API_KEY}引用。这样换 Key 只改一处两个工具同时生效避免“改了 Claude Code 忘了改 Cursor”的经典坑。4. 验证请求用提示词模板生成页面结构、组件规范与配色配置完先别急着做复杂页面用一条标准提示词验证整条链路Skill 是否激活、设计系统是否生成、模型通道是否稳定。4.1 可复制的 UI/UX 提示词模板在 Claude Code 里直接对话Skill 模式自动激活或在 Cursor 里用斜杠命令/ui-ux-pro-max Build a landing page for a SaaS analytics product. Requirements: - Product type: B2B SaaS - Tone: professional, trustworthy - Include: hero section, feature grid (3 items), pricing table (3 tiers), footer - Output: page structure, component specs, color scheme, typography scale - Tech stack: React Tailwind这条提示词的关键是把“产品类型、调性、页面模块、输出物、技术栈”都写清楚。Skill 会拿这些信息去data/知识库里检索对应的色彩方案、字体方案和组件规范。4.2 期望的成功结果跑通之后你应该看到三类输出。第一类是设计系统摘要类似Design System: B2B SaaS / Professional Primary: #2563EB Secondary: #1E40AF Accent: #3B82F6 Background: #FFFFFF Text: #1F2937 Heading Font: Inter Body Font: Inter Scale: 1.25 / Line height: 1.5第二类是页面结构按 hero、feature grid、pricing、footer 分块每块标注用了哪些组件。第三类是组件规范比如按钮的 padding、圆角、hover 态卡片的阴影层级。如果只看到代码、没有设计系统摘要说明 Skill 没激活检查permissions.allow里有没有放行 Python以及技能目录是否装对位置。4.3 对比生成前后的代码验证设计输出是否稳定最直接的办法是对比。先让 AI 在不激活 Skill 的情况下生成一版 landing page记录配色和间距再激活 Skill 生成一版。对比点看三个对比项无 Skill有 Skill主色随机蓝或紫按 B2B SaaS 推荐 #2563EB字体层级手动指定易乱Inter 1.25 缩放间距各处不一致统一 spacing scale组件圆角8/12/16 混用统一规范实测下来有 Skill 的版本在配色一致性和间距规律性上明显更稳尤其是多页面项目不会出现“首页和定价页像两个产品”的情况。5. 本篇常见错排查配置和验证过程中下面几个错最常见按出现频率排。5.1 Skill 不激活提示词没反应现象是输入提示词后AI 直接开始写代码没有设计系统摘要。原因通常是技能目录没装对或者 Claude Code 的permissions没放行 Python。排查步骤# 确认技能目录存在 ls .claude/skills/ui-ux-pro-max # 确认检索脚本能跑 python3 .claude/skills/ui-ux-pro-max/scripts/search.py --help如果脚本报模块缺失检查 Python 版本是否 3.x以及依赖是否装全。5.2 鉴权失败 401Claude Code 报 401先确认ANTHROPIC_BASE_URL填的是https://taotoken.net/api不要多加路径或斜杠。再确认 Key 没有多余空格环境变量是否真的导出成功echo $TAOTOKEN_API_KEY如果输出为空说明 shell 没加载到重新export或写进 shell 配置文件。5.3 Cursor 斜杠命令不识别Cursor 里输入/ui-ux-pro-max没反应多半是config.toml里skill_path指错了或者技能没为 Cursor 初始化。重新跑一次uipro init --ai cursor然后确认.cursor/skills/ui-ux-pro-max目录存在。5.4 两个工具生成结果不一致这是统一 Key 通道最该解决的问题。如果 Claude Code 和 Cursor 生成的设计系统不同先确认两边base_url和model完全一致。模型名不一致会导致推理结果漂移比如一个用 Sonnet 一个用 Haiku设计推荐的细致程度就不一样。5.5 设计知识库检索超时search.py跑得慢或超时通常是知识库 CSV 太大或磁盘 IO 慢。可以先用--offline模式验证本地资源是否完整uipro init --offline离线模式用的是本地打包的资源能跑通说明知识库没问题问题在网络或脚本调用参数上。6. 把设计工作流固定下来Skill 装好、Key 通道统一之后真正提升效率的做法是把提示词模板固定成项目里的一份文件比如docs/uiux-prompt.md每次生成新页面直接引用。这样团队里谁用 Claude Code、谁用 Cursor出来的设计系统都是同一套。长期跑 UI/UX 生成任务模型调用频率不低Coding Plan 比按次调用更适合这种持续编码场景https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite需要新建 Key 或管理多个项目的 Key 时从 API Keys 页进https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite配置项有疑问就翻接入文档模型名、协议、参数都以文档为准https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite最后留一个我踩过的坑Skill 的设计知识库更新后记得重新跑uipro update否则新领域的配色方案检索不到AI 会退回默认样式看起来像“技能失效”其实只是知识库旧了。