在实际开发过程中我们经常需要快速生成一些简单的UI界面原型无论是用于内部工具、演示还是快速验证想法。传统方式需要设计师介入或开发者自己编写大量前端代码流程繁琐。Claude Code 作为一款强大的AI辅助编程工具其/design技能的出现为开发者提供了一种全新的、通过自然语言描述直接生成UI代码的途径。它并非一个独立的UI设计软件而是将设计意图转化为可运行代码的“翻译器”和“生成器”。本文面向所有需要快速构建UI原型的开发者无论你是全栈工程师、后端开发还是对前端不太熟悉的移动端开发者。我们将从零开始带你完成 Claude Code 的安装、配置并重点详解如何使用/design技能生成包括 WebHTML/CSS/JS、桌面端如 Tkinter, Qt等多种技术栈的UI代码。你将学习到如何通过精准的描述词Prompt控制生成结果如何运行和调试生成的代码以及如何处理常见的生成偏差和运行错误。最终你将掌握一种高效的原型构建方法能够将想法在几分钟内转化为可视化的界面。1. 理解 Claude Code 与 /design 技能的工作机制在开始动手之前我们需要厘清几个核心概念这有助于你更有效地使用工具并理解其边界。1.1 Claude Code 是什么不是是什么Claude Code 是 Anthropic 公司推出的 Claude 模型在编程领域的专用界面或工具链。它通常以 CLI命令行界面或 Desktop桌面应用的形式提供。其核心能力是理解自然语言描述并生成、解释、调试和优化代码。你可以把它看作一个深度集成在开发环境中的、极其擅长编程的AI助手。需要明确的是它不是一个完整的集成开发环境IDE。它不直接编译、构建或部署项目但生成的代码需要你在相应的IDE或终端中运行。它不是一个图形化的UI设计工具如Figma、Sketch。你无法通过拖拽组件来设计而是通过文字描述。它的价值在于将高层的、模糊的“我想要一个登录页面”的需求快速转化为具体的、可执行的、符合特定框架规范的代码草稿极大提升原型开发效率。1.2 /design 技能从描述到代码的桥梁/design是 Claude Code 内置的一个“技能”或“指令”。当你输入/design并跟上你的描述时Claude Code 会进入一个专门针对UI代码生成优化的模式。其工作机制可以简化为意图解析Claude 首先解析你的自然语言描述识别出你要构建的UI类型如仪表盘、表单、商品列表、风格要求现代、简约、科技感以及包含的组件按钮、输入框、图表、导航栏。技术栈选择根据你的描述或上下文Claude 会选择最合适的技术栈。例如如果你提到“Web页面”它会生成HTML/CSS/JS如果提到“Python GUI”它可能会选择 Tkinter 或 PyQt取决于描述细节。代码生成与结构化基于解析出的意图和选定的技术栈Claude 生成完整的、结构化的代码文件。这通常包括HTML定义页面结构和组件。CSS提供样式实现布局、颜色、字体等视觉效果。JavaScript添加交互逻辑如按钮点击、表单验证、数据动态更新。对于桌面应用生成对应框架如Tkinter的Python类和方法定义。输出与解释Claude 会输出生成的代码块并通常附带一段文字简要说明代码的结构、如何运行以及关键部分的作用。1.3 技术栈支持范围与局限性/design技能支持生成多种前端和GUI框架的代码但其能力和“地道程度”有所不同。技术栈支持程度典型生成内容注意事项纯 Web (HTML/CSS/JS)优秀单文件HTML或分离的HTML/CSS/JS常使用现代CSSFlexbox/Grid和原生JS。生成的是基础原型复杂交互如路由、状态管理需要手动集成框架。React / Vue良好函数组件或选项式API组件包含基础JSX/模板和样式。可能需要你指定使用Hooks如useState或组合式API。对于复杂生态Vuex, Pinia, Router支持有限。Python Tkinter良好完整的Python脚本定义Tk()根窗口、组件布局pack,grid,place和事件绑定。适合快速生成简单桌面工具界面。样式定制能力较弱。Python PyQt / PySide中等生成使用QWidget,QVBoxLayout等类的代码。代码结构可能比较基础复杂的信号槽连接或自定义控件需要额外调整。其他 (Flutter, SwiftUI)基础可能生成一些组件代码片段。对于语法复杂或生态较新的框架生成结果可能不完整或需要大量修改。核心局限性不生成后端代码/design聚焦于前端/UI层。登录逻辑、数据存取等需要你自行实现或结合其他技能如/code生成。样式可能过于通用生成的CSS虽然可用但可能缺乏品牌特色或精细的动效。需要明确上下文在对话中如果你之前提到了项目框架Claude会延续该上下文。否则你需要明确指出技术栈例如“使用Vue 3和Composition API生成一个管理后台侧边栏导航组件”。2. 环境准备安装与配置 Claude Code要使用/design首先需要确保 Claude Code 正确安装并可用。根据你的操作系统和偏好可以选择 CLI 或 Desktop 版本。2.1 安装 Claude Code CLICLI版本更适合集成到终端工作流或自动化脚本中。对于 macOS (使用 Homebrew):# 如果尚未安装Homebrew请先访问 https://brew.sh 安装 brew install claude-code安装后在终端输入claude --version验证是否安装成功。对于 Windows:官方可能提供安装包或通过包管理器如 Winget、Chocolatey安装。请以官方文档为准。一个常见的安装方式是下载可执行文件并确保其所在目录已添加到系统的PATH环境变量中。对于 Linux:通常可以通过系统包管理器或从GitHub Releases页面下载二进制文件进行安装。验证安装打开终端PowerShell, CMD, bash, zsh输入claude --help如果看到命令帮助信息说明CLI安装成功。如果遇到错误command not found: claude或claude 不是内部或外部命令说明安装路径未正确添加到PATH。PATH配置问题排查以Windows PowerShell为例假设你将claude.exe放在了C:\MyTools\目录下。在PowerShell中临时添加PATH仅当前会话有效$env:Path ;C:\MyTools\永久添加PATH需要管理员权限[Environment]::SetEnvironmentVariable(Path, $env:Path ;C:\MyTools\, [EnvironmentVariableTarget]::Machine)重启终端后生效。2.2 安装 Claude Code DesktopDesktop版本提供图形化界面交互更友好适合不习惯命令行的用户。下载访问 Anthropic 官方渠道下载对应操作系统Windows/macOS/Linux的安装包。安装运行安装程序按照向导完成安装。启动与登录首次启动通常需要你登录 Anthropic 账户并完成授权。界面熟悉Desktop应用会提供一个聊天窗口你可以直接在其中输入/design和其他指令。2.3 常见安装问题与解决方案问题现象可能原因检查与解决步骤claude命令未找到1. 未安装。2. 安装路径未加入PATH。1. 重新执行安装命令。2. 找到可执行文件位置将其目录添加到系统PATH环境变量中。Desktop版本启动失败或卡顿1. 系统资源不足。2. 网络连接问题。3. 与某些安全软件冲突。1. 关闭不必要的程序。2. 检查网络尝试重启应用。3. 暂时禁用安全软件或将其加入白名单。提示“虚拟化支持未检测到”(多见于Docker Desktop错误但原理相关)系统BIOS/UEFI中的虚拟化技术Intel VT-x/AMD-V未启用。1. 重启电脑进入BIOS/UEFI设置通常按F2, Del, F10等键。2. 找到Virtualization Technology,VT-x,SVM Mode等选项将其设置为Enabled。3. 保存并退出重启。模型识别错误(如提示“deepseek-v4-pro” is not a model...)输入了当前 Claude Code 版本不支持的模型名称或指令。确保你使用的是 Claude Code 支持的标准指令如/design,/code。模型选择通常在应用设置或API配置中完成不要在对话中直接指定未知模型名。3. 实战使用 /design 生成你的第一个UI现在我们通过一个完整的例子从描述到运行体验/design的工作流程。我们将生成一个具有科技感风格的任务仪表盘Web页面。3.1 构建有效的设计提示词Prompt提示词的质量直接决定生成结果的好坏。一个好的UI设计提示词应包含以下几个要素核心功能与组件明确说明页面或组件要做什么包含哪些元素。差“生成一个仪表盘。”好“生成一个任务管理仪表盘包含顶部导航栏、侧边栏菜单、一个主要区域显示任务列表列表项包含任务名、状态、优先级和操作按钮以及一个统计卡片区域。”视觉风格与布局描述你期望的整体观感。示例“采用深色主题背景色#0f172a具有科技感和现代感。布局使用CSS Grid整体紧凑有适当的阴影和圆角。”技术栈与细节指定使用的框架、库或特殊的交互要求。示例“使用纯HTML、CSS和原生JavaScript实现。任务状态用不同颜色的徽章表示进行中-蓝色已完成-绿色已延期-红色。点击任务项可以展开查看详情。”数据与交互说明静态数据还是需要模拟动态交互。示例“任务列表先用静态JSON数据模拟。每个任务有一个‘标记完成’按钮点击后该任务状态更新为‘已完成’并且按钮变为不可用。”综合示例提示词/design 创建一个科技感风格的任务管理仪表盘Web页面。要求 1. 布局左侧固定侧边栏导航右侧为主内容区。主内容区顶部为页面标题和用户头像下方分为两列左侧较宽区域显示任务列表右侧显示统计卡片。 2. 组件 - 侧边栏包含“仪表盘”、“任务”、“日历”、“设置”等图标菜单项。 - 任务列表每个任务项显示任务名称、描述、优先级高/中/低用不同颜色标签显示、截止日期和一个“标记完成”按钮。 - 统计卡片显示“总任务数”、“进行中”、“已完成”三个卡片带有图标和数字。 3. 样式深色主题主背景#0f172a卡片背景#1e293b使用现代CSSGrid/Flexbox字体使用无衬线字体如system-ui。组件有轻微的阴影和圆角。 4. 交互点击侧边栏菜单项主内容区标题相应变化模拟路由。点击任务的“标记完成”按钮该任务项视觉上变灰按钮文字变为“已完成”且不可点击同时“已完成”统计卡片数字1。 5. 技术使用纯HTML、CSS和JavaScript在一个HTML文件内实现。3.2 在 Claude Code 中执行并获取代码在 Claude Code Desktop 的聊天窗口或 CLI 中输入上述提示词或你的简化版本。Claude 会开始思考并生成代码。CLI 示例操作# 启动Claude Code CLI交互模式 claude # 进入交互模式后直接粘贴你的 /design 提示词 # 等待生成完成后你可以选择将代码保存到文件 # 注意CLI交互中的保存操作取决于具体实现可能需要使用其内置命令或手动复制Desktop 示例操作打开 Claude Code Desktop 应用。在输入框键入/design然后空格再粘贴你的提示词。按下回车等待生成。Claude 会以代码块形式输出 HTML、CSS、JS 内容。全选并复制这些代码。3.3 保存与运行生成的代码创建项目文件夹在本地创建一个新目录例如tech-dashboard。保存文件在文件夹内创建一个index.html文件将 Claude 生成的全部代码包括style和script标签粘贴进去并保存。如果 Claude 生成了多个文件如style.css,script.js则分别创建对应文件并粘贴内容。在浏览器中运行直接双击index.html文件或在浏览器中通过File - Open File打开。你应该能立即看到一个符合描述的仪表盘界面。测试交互尝试点击侧边栏菜单观察标题变化。点击任务项的“标记完成”按钮检查该任务项样式是否改变、按钮是否禁用以及统计卡片的数字是否更新。3.4 代码结构解析与关键点以下是一个 Claude 可能生成的简化版代码框架我们以此为例解析关键部分!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleTech Task Dashboard/title style :root { --bg-primary: #0f172a; --bg-card: #1e293b; --text-primary: #f1f5f9; --accent-blue: #3b82f6; --accent-green: #10b981; --accent-red: #ef4444; } body { font-family: system-ui, -apple-system, sans-serif; background-color: var(--bg-primary); color: var(--text-primary); margin: 0; display: grid; grid-template-columns: 250px 1fr; /* 关键定义两列网格布局 */ min-height: 100vh; } .sidebar { ... } .main-content { ... } .task-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: var(--bg-card); border-radius: 0.5rem; margin-bottom: 1rem; } .priority-high { color: var(--accent-red); } .btn-complete { background-color: var(--accent-green); color: white; border: none; padding: 0.5rem 1rem; border-radius: 0.25rem; cursor: pointer; } .btn-complete:disabled { opacity: 0.5; cursor: not-allowed; } /style /head body aside classsidebar.../aside main classmain-content header.../header div classcontent-grid section classtask-list !-- 任务列表由JS动态生成 -- div idtasks-container/div /section section classstats.../section /div /main script // 模拟任务数据 const tasksData [ { id: 1, name: Design Review, desc: Review latest mockups, priority: high, due: 2023-10-27, completed: false }, // ... 更多任务 ]; // 初始化函数 function renderTasks() { const container document.getElementById(tasks-container); container.innerHTML ; tasksData.forEach(task { const taskEl document.createElement(div); taskEl.className task-item ${task.completed ? completed : }; taskEl.innerHTML div h4${task.name}/h4 p${task.desc}/p span classpriority-${task.priority}${task.priority}/span spanDue: ${task.due}/span /div button classbtn-complete onclickcompleteTask(${task.id}) ${task.completed ? disabled : } ${task.completed ? Completed : Mark Complete} /button ; container.appendChild(taskEl); }); updateStats(); // 更新统计卡片 } // 完成任务函数 function completeTask(taskId) { const task tasksData.find(t t.id taskId); if (task !task.completed) { task.completed true; renderTasks(); // 重新渲染列表 } } function updateStats() { ... } // 页面加载时初始化 document.addEventListener(DOMContentLoaded, renderTasks); /script /body /html关键点解释CSS Grid 布局body的display: grid; grid-template-columns: 250px 1fr;实现了经典的侧边栏固定、主内容自适应的布局。这是现代CSS布局的核心。CSS 变量在:root中定义颜色变量使得整体主题色修改非常方便体现了可维护性。动态内容生成任务列表不是硬编码在HTML里而是由JavaScript读取tasksData数组动态生成。这模拟了从后端API获取数据的情景。事件处理与状态更新onclickcompleteTask(${task.id})为每个按钮绑定了点击事件。completeTask函数更新数据模型中对应任务的completed状态然后调用renderTasks()重新渲染整个列表实现界面更新。这是一种简单但有效的状态驱动UI更新模式。条件渲染与样式通过${task.completed ? completed : }和${task.completed ? disabled : }根据任务状态动态添加CSS类和按钮禁用属性。4. 进阶技巧与最佳实践掌握了基础用法后通过以下技巧可以让你更好地驾驭/design生成更符合预期、更易于集成的代码。4.1 迭代优化与精准控制第一次生成的结果可能不完全满意你可以进行对话式迭代。修改样式“将侧边栏的背景色改为#111827并将主内容区的卡片阴影加深一些。”调整布局“任务列表改用表格形式展示增加‘创建时间’列。”增加功能“在顶部添加一个全局搜索框可以过滤任务名称和描述。”更换技术栈“将上面的仪表盘用 Vue 3 的script setup语法重写并使用 Tailwind CSS 进行样式设计。”示例迭代对话你/design 生成一个简单的登录表单有用户名、密码输入框和提交按钮。Claude生成基础表单代码你为密码框添加一个“显示/隐藏密码”的小眼睛图标按钮。使用纯CSS和JS实现切换。Claude在原有代码基础上添加图标按钮和切换逻辑你现在为表单添加一些验证。用户名不能为空密码必须至少8位。提交时如果验证失败在输入框下方显示红色错误提示。Claude添加表单验证函数和错误信息显示逻辑4.2 生成桌面应用UI以Python Tkinter为例/design同样适用于快速生成桌面应用界面。提示词示例/design 使用 Python 的 Tkinter 库创建一个简单的文本编辑器桌面应用。要求 1. 主窗口有一个顶部的菜单栏File, Edit, Help。 2. File 菜单下有 New, Open, Save, Exit 选项。 3. 中间是一个可以滚动的文本编辑区域Text widget。 4. 底部有一个状态栏显示当前行号和列号。 5. 实现 Open 和 Save 的基本文件对话框功能可以使用 filedialog。Claude 可能生成的核心代码结构import tkinter as tk from tkinter import filedialog, messagebox class TextEditor: def __init__(self, root): self.root root self.root.title(Simple Text Editor) self.root.geometry(800x600) self.current_file None # 创建菜单栏 menubar tk.Menu(root) root.config(menumenubar) # File 菜单 file_menu tk.Menu(menubar, tearoff0) menubar.add_cascade(labelFile, menufile_menu) file_menu.add_command(labelNew, commandself.new_file, acceleratorCtrlN) file_menu.add_command(labelOpen..., commandself.open_file, acceleratorCtrlO) file_menu.add_command(labelSave, commandself.save_file, acceleratorCtrlS) file_menu.add_separator() file_menu.add_command(labelExit, commandroot.quit) # 文本编辑区域和滚动条 self.text_area tk.Text(root, wrapword, undoTrue) self.scrollbar tk.Scrollbar(root, commandself.text_area.yview) self.text_area.configure(yscrollcommandself.scrollbar.set) self.scrollbar.pack(sidetk.RIGHT, filltk.Y) self.text_area.pack(sidetk.LEFT, filltk.BOTH, expandTrue) # 状态栏 self.status_bar tk.Label(root, textLine: 1, Col: 1, anchortk.W) self.status_bar.pack(sidetk.BOTTOM, filltk.X) # 绑定事件 self.text_area.bind(KeyRelease, self.update_status) root.bind(Control-n, lambda e: self.new_file()) root.bind(Control-o, lambda e: self.open_file()) root.bind(Control-s, lambda e: self.save_file()) def new_file(self): self.text_area.delete(1.0, tk.END) self.current_file None self.root.title(Simple Text Editor - Untitled) def open_file(self): file_path filedialog.askopenfilename(filetypes[(Text files, *.txt), (All files, *.*)]) if file_path: try: with open(file_path, r) as file: content file.read() self.text_area.delete(1.0, tk.END) self.text_area.insert(1.0, content) self.current_file file_path self.root.title(fSimple Text Editor - {file_path}) except Exception as e: messagebox.showerror(Error, fCould not open file:\n{e}) def save_file(self): # 简化的保存逻辑 if not self.current_file: self.current_file filedialog.asksaveasfilename(defaultextension.txt, filetypes[(Text files, *.txt), (All files, *.*)]) if self.current_file: try: content self.text_area.get(1.0, tk.END) with open(self.current_file, w) as file: file.write(content) messagebox.showinfo(Saved, File saved successfully.) except Exception as e: messagebox.showerror(Error, fCould not save file:\n{e}) def update_status(self, eventNone): # 更新行号和列号简化版 cursor_index self.text_area.index(tk.INSERT) line, col cursor_index.split(.) self.status_bar.config(textfLine: {line}, Col: {int(col)1}) if __name__ __main__: root tk.Tk() app TextEditor(root) root.mainloop()关键点说明生成的代码结构清晰包含了Tkinter应用的基本框架主窗口、菜单、组件布局、事件绑定和核心功能文件操作。你可以直接运行此Python脚本看到一个可工作的编辑器原型。4.3 集成到现有项目与代码审查/design生成的代码是优秀的起点但直接用于生产项目前需要进行审查和调整。代码风格检查生成的代码是否符合你项目的编码规范缩进、命名规则等。组件拆分对于大型项目将生成的单文件HTML/CSS/JS拆分成符合项目结构的模块化组件如Vue的.vue文件或React的组件文件。状态管理如果生成的是React/Vue代码其状态管理可能比较简单使用组件内状态。对于复杂应用你需要考虑将状态提升到Context、Pinia或Redux等集中式状态管理工具中。安全性生成的表单验证通常是前端基础验证。生产环境必须结合后端进行更严格的数据验证和清理防止SQL注入、XSS等攻击。可访问性检查生成的HTML是否包含适当的ARIA属性确保界面对于辅助技术友好。性能对于动态生成的长列表考虑使用虚拟滚动等技术优化性能。5. 常见问题排查与调试即使AI生成的代码也可能因为环境、依赖或描述歧义而无法运行或表现异常。5.1 代码运行失败排查清单问题现象可能原因排查步骤HTML/CSS/JS 页面空白或样式错乱1. 文件路径错误。2. CSS/JS 代码语法错误。3. 浏览器控制台有报错。1. 检查index.html中引用的外部CSS/JS文件路径是否正确。2. 打开浏览器开发者工具F12查看Console面板是否有红色错误信息。3. 查看Elements和Styles面板确认HTML结构是否正确CSS是否被应用。Python Tkinter 脚本报错1. Python环境未安装Tkinter极少数情况。2. 代码中存在语法错误或未定义变量。3. 文件对话框等模块导入错误。1. 在终端运行python -m tkinter如果弹出一个简单窗口则Tkinter正常。2. 在终端运行脚本python your_script.py仔细阅读错误堆栈信息定位到具体行号。3. 检查import语句是否正确特别是tkinter.filedialog。交互功能无效如按钮点击无反应1. JavaScript 函数名拼写错误或未定义。2. 事件监听器未正确绑定例如在DOM元素加载前绑定了事件。3. 生成的JS代码逻辑有误。1. 在浏览器Console中检查点击时是否报错如Uncaught ReferenceError: xxx is not defined。2. 确保JS代码放在HTML body末尾或使用DOMContentLoaded事件包装。3. 使用console.log在关键函数入口添加日志调试执行流程。样式与预期严重不符1. CSS类名冲突。2. 浏览器默认样式覆盖。3. 描述词存在歧义AI理解有偏差。1. 使用浏览器开发者工具的Elements面板检查目标元素应用的CSS规则查看哪些样式被覆盖。2. 考虑添加CSS Reset或Normalize.css。3. 回到Claude提供更精确的样式描述例如“将按钮的背景色改为线性渐变从#4f46e5到#7c3aed”。5.2 描述词优化建议如果多次生成的结果都不理想问题可能出在提示词上。过于模糊“做一个好看的页面。” - “做一个采用玻璃态Glassmorphism设计风格的个人简介页面包含头像、姓名、技能标签云和项目时间轴。”忽略技术栈“生成一个表格。” - “使用React和Ant Design组件库生成一个带有分页、排序和筛选功能的用户数据表格。”需求矛盾“要一个极简的页面但又要有很多动画和特效。” - 明确优先级“首要目标是极简主义风格色彩不超过三种。可以有一个细微的页面加载淡入动画但不要其他特效。”5.3 处理 Claude Code 自身错误/design指令不识别确保你使用的是最新版本的 Claude Code并且指令拼写正确。某些版本可能技能名称略有不同。生成中断或内容不全网络不稳定或会话长度限制可能导致生成中断。尝试分段描述或使用“继续”指令让Claude接着生成。生成代码技术栈错误在提示词最前面明确指定技术栈如“使用Vue 3 和 Composition API生成...”或“使用纯CSS不依赖任何框架实现...”。6. 生产环境考量与扩展方向将/design用于实际项目时需要超越原型阶段考虑工程化问题。6.1 从原型到产品组件化重构将生成的大块UI代码拆分为可复用的、职责单一的前端组件。状态管理升级将示例中的硬编码数据或简单状态替换为适合你技术栈的状态管理方案。样式系统化将内联或散落的CSS整理成设计令牌Design Tokens、SASS/LESS变量或Tailwind配置确保整个项目样式一致。集成后端API将静态数据模拟替换为真实的API调用并添加加载状态、错误处理。测试为生成的UI组件添加单元测试如Jest, Vitest和端到端测试如Cypress, Playwright。6.2 结合其他开发工具与流程与版本控制将生成的初始代码提交到Git作为项目起点。后续的所有迭代修改都应通过清晰的Commit记录。与设计系统如果你所在团队有设计系统如使用Figma管理设计稿可以要求Claude参考设计系统中的特定组件名、颜色变量和间距规范来生成代码减少后续调整成本。与低代码平台/design可以作为低代码平台的自定义组件代码生成器。你可以描述一个复杂组件生成代码后再嵌入到低代码平台中使用。6.3 探索更多可能性/design的潜力不限于传统Web或桌面UI。命令行界面可以尝试让它生成基于curses或rich库的Python命令行图形界面。数据可视化描述你想要的图表类型和数据格式让它生成使用ECharts、Chart.js或D3.js的初始化代码。移动端UI尝试生成React Native或Flutter的组件代码片段虽然可能不完整但能提供很好的结构参考。/design技能的本质是将你的创意快速具象化为可执行的代码草图。它无法替代设计师对用户体验的深度思考也无法替代工程师对系统架构和代码质量的把握。它的最佳定位是“高级草图工具”和“开发加速器”。通过提供清晰、具体、分步骤的描述并熟练掌握迭代优化和代码集成技巧你可以将界面构思到代码实现的时间从小时级缩短到分钟级从而将更多精力投入到业务逻辑、性能优化和用户体验打磨这些更具创造性的工作中。开始实践的最佳方式就是选择一个你最近需要的小工具或页面用/design尝试生成第一版代码然后亲手去运行、修改和完善它。