easy-vibe UI 设计实战把精美的页面拆解、临摹并沉淀成自己的设计系统【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe本篇是 easy-vibe 课程「Stage 2构建第一个现代应用程序」中 UI 设计一课的技术指南回答一个核心问题面对一款设计精美的 App 或网页如何系统性地分析它的设计参数借助 AI 设计工具Claude Design / Open Design / Figma / MasterGo把它临摹到以假乱真并最终沉淀成一份可被 AI 反复执行的DESIGN.md设计系统。读完后你将掌握结构—视觉—组件三层拆解法、两条主流设计路线的选型依据以及一套可复制的选目标 → 拆解 → 生成 → 迭代 → 验收实战流程。你将学到什么在动手之前先回顾一下本课程前置课程已建立的能力在「NanoBanana 素材生产」一课中我们学会了用 AI 批量生成设计素材理解了提示词里的风格一词如何影响最终输出见 NanoBanana 素材生产在「Figma 与 MasterGo 入门」一课中我们认识了专业设计工具知道一份设计稿是如何组织起来的见 Figma 与 MasterGo 入门我们也见过从设计稿到前端代码的转化流程见 从设计原型到项目代码。但当你真正要为自己的项目做一个像样的页面时可能还是会卡住工具会用、素材能生成却不知道好看长什么样更不知道该怎么拆解和模仿一个优秀的页面。本指南就专门解决这个问题。先思考三个问题一个现代网页通常由哪些区块组成好看是主观感受还是可以被量化的数字色值、字号、间距、圆角如果让你模仿一个网站的视觉风格你会从哪里下手::: tip 前置知识 本教程适合已经会用 AI 编程工具如 Trae 等 AI IDE、想为项目补齐前端视觉能力的开发者。:::1. 前端设计入门从抄开始前端设计的第一课不是创造而是复刻。就像学书法先临帖、学画画先画石膏像一样。原因是设计的好是可以被量化的——色值、字号、间距、圆角、阴影全是数字把一套成熟设计逐像素复刻出来你就被迫搞懂了它背后的每一个决策当你抄到像了下一次遇到类似场景你就知道该往哪个方向抄。一句话总结能临摹出一款好产品说明你已经具备了前端设计的基本功能在此基础上做改动说明你已经出师了。1.1 为什么模仿是最快的入门路径模仿不是复制结果而是强迫自己重建设计过程你被迫测量每一个间距从而理解留白如何制造呼吸感你被迫查每一个色值从而理解为什么这个配色组合协调你被迫对比每一层元素从而理解主次信息如何排布。如果你能把一个优秀页面拆到参数级再重建你对设计的理解已经超过很多只靠感觉做事的人。1.2 在哪里找参考先建一座参考库设计师的工作流天然包含参考用灵感站找创意、看竞品分析结构。AI 时代这点被放大了因为工具能把参考直接变成可执行能力——Claude Design 可以导入你保存的参考网站并按其风格生成初稿Open Design 内置 151 套可移植设计系统可一键应用到自己的项目。所以你的问题不该是能不能抄而是如何专业、合规且有自己风格地抄。第一步是建立参考库。以下站点按用途分组建议全部收藏随取随用站点用途适合找什么Awwwards网页设计的奥斯卡顶级创意、动画、交互——了解上限长什么样Recent原 Godly高质量网页灵感集合AI、Web3、作品集类网站的前沿设计Landbook精选 Landing Page 设计按行业/配色筛选企业官网、定价页、首屏布局Lapa Ninja7300 Landing Page 截图按元素类别搜索导航、功能展示、用户评价Mobbin真实 App 界面库研究 Uber、Notion 等产品的真实页面与流程Dribbble设计师社区配色、图标、插画风格、微交互灵感Behance完整项目案例库设计思路、调研过程、完整作品集::: tip 建立自己的参考库 看到喜欢的页面立刻截图 保存链接并按Landing Page / 组件 / 配色 / 动画归档。临摹时直接从库里选目标比临时上网搜快得多。:::1.3 参考与抄袭一条清晰的边界维度参考推荐抄袭危险对象布局结构、视觉风格、设计规范品牌 Logo、独占图标、原创插画方式理解后重新创造融入自己的产品直接复制素材、代码、图片结果风格相似但内容完全不同文字、配色、素材都一样风险低高版权/商业风险先记住一句话规则可以抄结果不能抄。版权细节见第 7 节。2. 先看再设计一页三层拆解法抄得像的前提是看得懂。本节给出一套通用的页面拆解框架。2.1 看结构页面由哪些区块组成绝大多数现代网页都能拆成 4 个大区块┌─────────────────────────┐ │ ① 导航栏 Nav │ Logo · 菜单 · 登录/CTA ├─────────────────────────┤ │ ② 首屏 Hero │ 主标题 · 副标题 · 主按钮 · 产品图 ├─────────────────────────┤ │ ③ 内容区 Sections │ 功能卡片 · 数据展示 · 评价 · 定价 ├─────────────────────────┤ │ ④ 页脚 Footer │ 链接 · 版权 · 订阅 └─────────────────────────┘看页面时先别管细节用眼睛画出它的骨架导航在哪、首屏是什么、中间有几个 section、每个 section 里有什么元素。2.2 看视觉4 个可量化元素元素看什么怎么记录颜色主色、背景色、文字色用取色器直接吸出 Hex 值字体标题/正文字体、字号、字重浏览器 DevTools 查 font-family / size / weight间距区块之间、卡片内部的留白记录常见的 8 / 16 / 24 / 48 px 节奏圆角与阴影卡片、按钮的圆角半径与阴影强度DevTools 查 border-radius / box-shadow::: tip 前端工程师的天然优势你是前端开发者DevTools 就是你的设计分析仪器。右键 → 检查元素任何页面的色值、字号、间距、圆角对你完全透明。这是设计师羡慕而开发者天然拥有的能力。除此之外还可以直接把截图发给多模态大模型让它替你提取设计规范。:::2.3 看组件抽出可复用零件把页面拆成一个个组件并给每个组件记录风格参数Button 主按钮 - 背景: #4F46E5 - 文字: #FFFFFF, 14px / 600 - 圆角: 8px - 内边距: 12px 24px - 阴影: 0 2px 8px rgba(79,70,229,0.3) Card 卡片 - 背景: #FFFFFF - 圆角: 16px - 边框: 1px solid #E2E8F0 - 阴影: 0 4px 12px rgba(15,23,42,0.08)拆完 3~5 个页面后你手里就有一份组件样式库——这正是你自己的设计系统的雏形。2.4 把看到的设计翻译成AI 能懂的语言把临摹需求交给 AI 工具时必须把视觉信息转成结构化描述。你看得越准翻译得越精确AI 抄得越像。一个标准 prompt 模板参考这个 Landing Page 的风格帮我做一张结构相同的页面 - 结构导航 首屏(Hero) 3 个功能卡片 定价区 页脚 - 配色: 主色 Indigo #4F46E5背景 #F8FAFC文字 #0F172A - 字体: 标题 Space Grotesk 700正文 Inter 400 - 间距: 区块 96px卡片内 24px栅格 24px - 圆角: 卡片 16px按钮 8px - 阴影: 0 4px 12px rgba(15,23,42,0.08)3. AI 时代的两条设计路线别人是怎么设计出来的答案正在变多。这里介绍从手动精控到对话式自动生成的两条典型路线。3.1 路线一Figma / MasterGo — 专业设计稿工具当你需要可编辑、可协作、像素级可控的设计稿时用 Figma国际主流或 MasterGo中文、上手轻在画布上搭布局、调组件、做交互原型用 Figma Make / MasterGo AI 等能力辅助生成和批量调整最终把设计稿交给前端实现或通过插件导出代码。适用场景严格的走查交付、团队协作、复杂交互。工具操作细节见 Figma 与 MasterGo 入门。3.2 路线二Claude Design / Open Design — 对话式设计画布这条路线的共同点是用自然语言直接生成可交互的设计原型而不是一张静态图。Claude Design官方对话式设计画布Claude Design 是 Anthropic 的 AI 设计产品官方入口 claude.ai/design输入一句需求默认生成 3 个设计方向覆盖 Landing Page、线框图、演示文稿等支持导入设计系统GitHub 仓库、Figma 导出、网站截图、品牌文件自动提取配色/字体/组件在画布上直接评论修改、拖拽微调最终可导出 HTML / PDF / PPTX或交给 Claude Code 实现为真实代码。典型场景从参考截图直接复刻高保真页面最常用输入产品描述和风格参考Claude 自动生成完整 Landing Page——左侧是对话与生成进度右侧画布实时渲染结果。示例 promptCreate a high-fidelity landing page designed to raise $500,000 from angel investors for 雾屿咖啡 Mist Island Coffee - a boutique specialty coffee shop that combines premium coffee, quiet workspaces, and warm community events. Tone should feel warm, premium, calm, and trustworthy - think a mix of Blue Bottle Coffee Apple Store minimalist lifestyle design.默认给 3 个设计方向选定一个再精修如编辑风 / 博物馆风 / 手账风生成可交互原型不只是静态图按钮有 Hover 效果、表单可输入、数据实时计算例如内置实时 Tokenizer 的说明页做产品演示 / PPT多页、可导航、可导出 PDF/PPTX 的完整幻灯片生成动画视频通过 From template 生成带动画时间线与播放控制的 HTML 视频迭代既有设计不必重写 prompt直接在画布点 Comment、选中元素写评论Claude 做局部修改设计移动端页面指定设备尺寸如 iPhone生成带设备边框的移动端 UI 原型。适合没有设计背景、想跳过 Figma 学习曲线、快速得到可交互原型的人。Open DesignClaude Design 的开源替代品如果不想订阅、或在意数据隐私可以试 Open Designnexu-io 的开源项目。它走与 Claude Design 同一条路线对话式生成设计原型区别在于local-first、BYOK自带模型 Key、不绑定特定 Agent。三个核心概念概念说明对你的价值Skills技能16 个指令式设计技能文案、配色、创意指导、头脑风暴…一个 Skill 一份专业任务模板Templates模板288 个可执行模板原型、幻灯片、动画…都带example.htmlFork 后换数据即可交付Design Systems设计系统151 套可移植设计系统配色、字体、动画、文风一句话套用大厂的视觉规范它还会识别你本地的编码 AgentClaude Code、Codex、Cursor、Qwen、Kimi 等官方支持 21 个作为设计引擎——你现成的 Agent 就是设计师。此外Claude Code 等工具生态里的UI 设计技能如 frontend-design能把设计规范包装成 AI 可执行的指令让 AI 按规矩输出。典型场景新项目选 Skill 设计系统 精度创建原型时可选 Wireframe 或 High-Fidelity指定目标平台响应式 Web / 移动端再从内置 150 设计系统中挑一个视觉底座使用 Open Design套用 Linear 设计系统为我的 SaaS 产品生成一个 Landing Page HTMLStudio 工作区左侧对话面板展示 AI 思考步骤、Todo 清单、Write 操作右侧 iframe 画布实时渲染——与 Claude Design 类似但底部会显示当前调用的是哪个本地 CLI Agent如 Claude Code、Codex、deepseek 等。用设计系统生成幻灯片 / PPT选 Slide deck 类型、输入主题得到完整的多页演示。高保真移动端原型支持多屏并排预览自动生成 iPhone 设备边框Tab Bar、卡片布局、进度条一应俱全。用 UI 设计技能约束 AI 输出给 Claude Code / Cursor 装一个 frontend-design 类 SkillAI 做页面时自动遵循设计规范# 在 Claude Code 中调用 /frontend-design 帮我做一个登录页 → 自动按 Skill 内置的设计规范输出 - 颜色: 主色 #4F46E5成功 #10B981错误 #EF4444 - 间距: 8px 基础栅格 - 组件: 无障碍的 Button / Input / Form - 响应式: 手机 / 平板 / 桌面三档适配本地私网项目企业内部项目与敏感产品设计文件全部本地处理模型可本地部署或 BYOK# 本地启动 Open Design模型走本地部署的 Qwen OPENAI_API_KEYyour-local-key OPENAI_BASE_URLhttp://localhost:8000/v1 \ opendesign # 所有设计文件保存在本地 ~/.open-design/不经过第三方服务器适合在意数据隐私、已有编码 Agent、希望完全掌控设计流程的开发者。3.3 两条路线怎么选对比项路线一Figma / MasterGo路线二Claude Design / Open Design定位专业设计稿工具对话式 AI 设计画布代表工具Figma、MasterGoClaude Design官方、Open Design开源平替产出可编辑设计稿可交互 HTML 原型学习成本中等低费用有免费版Claude Design 需订阅Open Design 开源免费BYOK适合人群严格走查与协作快速原型验证、隐私优先::: tip 实战中的组合拳参考 → 设计 → 交付的全流程可以混搭先用 Claude Design / Open Design 快速出方向和原型 → 定稿后导入 Figma/MasterGo 精修 → 再交给 Claude Code 写代码。每条路线各取所长。:::4. 实战一临摹一张别人的网页目标是具体的挑一个你喜欢的真实网页把它像地临摹下来。以一张 Landing Page 为例。步骤 1选目标挑一张结构清晰、让你有感觉的 Landing PageSaaS 官网、产品介绍页都可以。保存截图和链接。步骤 2按第 2 节的框架拆解浏览器右键 → 检查分四步记录目标: 一张 SaaS 官网的 Landing Page ① 结构: 导航(Logo/菜单/CTA) → Hero(标题/副标题/按钮/截图) → 3 个功能卡片 → 定价(3 档) → 页脚 ② 配色: 主色 #0F172A 深色强调 #6366F1背景 #FFFFFF / #F8FAFC ③ 字体: 标题 Inter 800 48px正文 Inter 400 16px ④ 组件: 按钮圆角 8px/满宽卡片圆角 16px/浅灰底/无描边步骤 3喂给 AI 设计工具生成第一版把拆解结果交给 Claude Design / Open Design让它按这套规范生成按以下设计规范生成一张结构相同的 Landing Page [粘贴步骤 2 的拆解笔记] 产品: 我的项目一句话用途 要求: 像素级遵循上面列出的配色、字体、间距、圆角规范第一版通常神似但不形似——结构对了细节不对。这不是失败它恰好告诉你下一步该修哪里。步骤 4逐块对比迭代修改参考截图和生成结果并排放逐块对比用修改指令逼近发现的问题修改指令主色太浅主色改成 #0F172A强调色 #6366F1按钮圆角不对所有按钮统一 8px 圆角满宽背景间距太挤区块间距改 96px卡片内边距 24px字体不对标题用 Inter 800正文 Inter 400装饰元素太多去掉背景装饰只保留核心内容这里有一个来自本仓库的配套实战可以印证这条链路examples/trae-linear-dashboard 只用了极简的一句 prompt——帮我做一个像这样的数据看板。数据可以先随便写。做好后帮我打开看看。——生成的 index.html 是一个约 980 行的单文件 Linear 风格暗色看板。从源码结构看该文件顶部用一组 CSS 变量固化了整个页面的设计 token--accent: #5e6ad2、--radius: 6px、--bg: #191919等。这与第 6 节DESIGN.md示例中的 Linear 规范primary #5E6AD2、按钮圆角 6px几乎逐值对应——可以推断这正是参考 → 拆解 → 生成 → 迭代这一循环在 AI IDE 场景下的最小完整演示参考截图 一句 prompt 换回一份带完整 token 的成品页面。步骤 5验收标准——像给自己定一个客观的验收标准截图两份原网页 vs 你的临摹版两张图并排放大逐像素对比色值、字号、间距、圆角肉眼看不出布局差异缩到 50% 再看一遍仍然分辨不出哪张是原版。像不是目的是手段。临摹过 2~3 个风格差异很大的网站后你会自然形成设计感觉什么时候该多留白、什么时候该高饱和、什么时候圆角要克制。之后再临摹新页面就会快很多。5. 实战二从设计到代码临摹出来的设计稿/原型最终要变成产品里的真实页面。两条交付路线5.1 路线 AAI 设计工具 → 前端代码Claude Design画布定稿后用/design-sync同步到 Claude Code直接从设计续写代码而不是从截图重新开始Open Design直接导出 HTML再交给 Agent 改造成项目组件Figma/MasterGo通过插件或 MCP 导出 React/Vue 代码。5.2 路线 B截图 → 多模态大模型重构最简单把临摹后的设计截图直接丢给多模态大模型重构为 React 组件逐块实现。三种设计到代码路线的详细对比见 从设计原型到项目代码组件化工程提效可参考 用现代组件库升级你的界面。6. 把大厂的设计系统变成自己的临摹完 3 个页面后你会发现每个漂亮页面背后都有一套稳定的设计系统。与其自己从零搭不如站在巨人肩膀上。6.1 什么是可移植的设计系统Open Design 把设计系统做成DESIGN.md文件Linear、Vercel、Stripe、Apple、Cursor、Figma…Claude Design 则从你的代码仓库/设计文件里自动提取。本质上是同一件事DESIGN.md 色彩 Token 字体规范 间距节奏 组件样式 使用约定一份真实示例结构# Design System: Linear ## Colors - background: #08090A - primary: #5E6AD2 - text: #F7F7F8 ## Typography - heading: 22px / 600, letter-spacing -0.4px - body: 14px / 400 ## Radius - card: 8px - button: 6px ## Spacing - 4 / 8 / 12 / 16 / 24 / 32 px ## Do / Dont - Do: 大量留白克制的用色 - Dont: 不用渐变不叠阴影6.2 三步建立自己的设计系统选基础挑一套你喜欢的设计系统套用如 Linear 的克制暗色、Apple 的留白原则改参数主色换成你的品牌色调圆角和间距落成文件保存为DESIGN.md或 Skill让 AI 每次生成都自动遵守。6.3 进阶用 UI 设计 Skill 固定风格把设计系统包装成 Skill 后一句话即可调用使用 my-brand Skill 的设计规范生成 3 个功能页的首屏方案Skill 的制作与使用方法见 用 LLM 与 Skills 把界面做漂亮。7. 版权与伦理临摹能力越强越要守住边界抄规则不抄结果。布局、配色、间距这些规则可以学Logo、图标、插画、文案这些结果不要直接搬。商用项目要谨慎。商用交付前检查素材版权、字体授权商用字体需要购买、参考站的条款。AI 生成内容的归属。各平台Claude Design、Open Design 等的条款不同商用前读服务条款。标注 AI 参与。部分平台/法规要求声明内容含 AI 生成。终审人工把关。品牌识别度、宣传物料等敏感场景必须人工审核。::: tip 建议 学习和原型阶段可以放开临摹进入商用交付时把参考转化为基于自己设计系统的新创作并保留生成记录。:::总结本指南把前端设计入门落成了一条可执行的路径心态前端设计从抄开始——抄规则不抄结果看结构4 大区块 视觉色/字/距/角 组件三层拆解DevTools 是你的分析仪器工具两条路线——Figma/MasterGo精控设计稿与 Claude Design / Open Design UI 设计技能对话式原型临摹选目标 → 拆解 → 生成 → 逐块迭代 → 像素对比验收沉淀把大厂的DESIGN.md改造成自己的设计系统并用 Skill 固化。::: tip 下一步 今天完成一次完整的临摹练习找一张想抄的 Landing Page用 DevTools 解出它的色/字/距/角用 Claude Design 或 Open Design 生成第一版逐块改到像把最终版交给 AI 转成代码顺便沉淀一份自己的DESIGN.md。 :::【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考