本文是 Crazyrouter Claude Code 系列第 29 篇。本文会围绕「Claude Code 接入 Crazyrouter 连载 29：claude code从需求到低保真线框图，再到高保真UI原型，全流程」展开，重点覆盖 claude code从需求到低保真线框图，再到高保真UI原型，全流程、第一步：生成全面的设计系统文档、1. 设计令牌 (Design Tokens)。
统一接入口径：Claude Code / Anthropic 原生客户端使用
ANTHROPIC_BASE_URL=https://cn.crazyrouter.com；OpenAI 兼容 SDK、HTTP 请求和前后端应用使用base_url=https://cn.crazyrouter.com/v1。
/v1/v1/... 问题。利用AI IDE工具，从一个初始需求出发，生成专业的设计系统文档，再到低保真线框图，最终产出一套完整的高保真UI原型。
本文将包含所有步骤和反复验证过的高效提示词。
任何高质量的应用都始于一个统一、严谨的设计系统。它为整个产品的视觉和交互制定了标准，是后续所有开发工作的“单一事实来源”（Single Source of Truth）。
过去，这需要资深设计师投入大量时间。现在，通过一个结构化的Prompt，AI可以在几分钟内完成这项工作 。
这个提示词的核心在于 为AI设定了一个高级专业角色 ，并提供了明确的目标（产品需求）和基础输入（核心色系）。关键指令是 要求AI基于这些有限信息，自行推理和扩展，生成一份完整的、包含所有必要规范的设计文档。
生成的结果非常符合专业要求： 字体系统、间距单位、视觉效果（圆角、阴影）、完整的色板，甚至根据产品需求推断出的核心UI组件（按钮、输入框、卡片）都被清晰地定义了。
有了设计系统文档，下一步是将其转化为结构化的、可视化的低保真线框图。
我们继续利用AI，这次的角色是“前端架构师”，其任务是严格遵循第一步生成的设计文档，直接编写出HTML原型代码。
这个提示词的关键在于 “绝对遵循” 。我们通过指令，强制AI的所有CSS实现（颜色、字体、间距等）都必须通过调用第一步生成的CSS自定义变量来完成。 这确保了最终代码与设计系统的100%一致性。
最终生成的效果，在还原度上表现出色。 它不仅构建了所有核心页面，还处理了诸如iOS状态栏模拟、内容区域独立滚动、底部导航栏固定等交互细节。
有了结构化的线框图，最后一步是应用具体的视觉风格，完成高保真UI原型。
在这一步，我们的角色转变为提供视觉方向的“艺术总监”。我们需要为AI提供明确的视觉参考，引导它完成最终的设计。
具体操作流程如下：
在这些网站上找到符合你产品调性的设计风格，截图后，将其作为视觉参考提供给AI，并下达指令： “更换所有页面UI设计，都严格参考这张图的视觉风格进行设计。”
一个重要的实战经验： AI可能无法一次性生成完美的结果。这很正常。将其视为一个需要沟通的初级设计师，通过多轮对话进行迭代优化，例如“将主按钮的颜色调整为--primary-100”、“减弱卡片阴影的强度”。经过几轮微调，通常都能达到满意的效果。
这里AI很可能一次性改的不理想，但多进行几次对话就能生成满意的效果。
下图是我提供了一张参考图后，最终生成的页面。可以看到，AI成功地将参考图的设计风格与我在第一步设定的配色方案进行了融合。
从一个抽象的产品概念，到一份专业的设计系统文档，再到一个结构化的低保真原型，最终到一套完整的高保真UI。
过去，这个流程需要产品经理、UI/UX设计师和前端工程师等多角色协作数天才能完成。现在， 借助AI和一套严谨的工作流，单人即可在数小时内完成核心原型的构建。
/v1 用法如果你准备把 Claude Code、国产模型或自己的应用统一接入 Crazyrouter，可以按这个顺序推进：
https://cn.crazyrouter.com；OpenAI 兼容 SDK 使用：https://cn.crazyrouter.com/v1。/v1。需要评估模型成本或选择不同模型时，可以先查看 Crazyrouter 价格与模型页，再把常用模型加入 Token 白名单。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。