理解设计稿如何变成运行在用户设备上的应用。
项目与协作、账号与权限、数据看板、订单与支付、内容与媒体
客户端是用户直接操作的软件，前端是其中负责界面、交互和客户端状态的应用层。
设计师最接近这一层，理解前端结构后可以把组件、状态和响应式规则交付得更准确。
位于用户与网络之间，向上接收操作，向下调用 API。
浏览器、HTML/CSS/JavaScript、React、路由、状态管理、构建工具和 API。
列表、表单、弹窗、加载、错误、路由切换和响应式都在前端落地。
同一个产品可以有多个客户端，共享一套后端能力。
先看用户动作和业务风险，再理解技术为什么出现，以及它会怎样改变页面、状态和流程。
管理者在 Web 后台排期，成员在手机 App 更新任务，设计师在桌面端上传本地设计文件。
不同设备能力、交互方式和发布渠道不同，但项目、任务和成员数据必须保持一致。
多个客户端共享同一套后端 API，每个端针对屏幕、输入方式、离线能力和系统权限做适配。
先区分跨端共享的业务流程，再分别设计移动端快捷操作、桌面端批量能力和 Web 的复杂管理视图。
Web 运行在浏览器中，移动 App 运行在 iOS 或 Android，桌面应用运行在操作系统，小程序运行在平台容器。它们的界面技术不同，但都需要处理用户操作、状态和网络请求。
多个客户端常常共享用户、订单、项目等后端 API。客户端差异主要集中在交互方式、设备能力、发布渠道和性能约束。
跨端设计需要区分共享业务能力与端侧体验差异。
结构、视觉和行为是网页的三个基础维度。
先看用户动作和业务风险，再理解技术为什么出现，以及它会怎样改变页面、状态和流程。
用户输入邮箱、密码并勾选协议后提交注册。
只有视觉图层时，浏览器不知道哪些是输入框、标签、错误提示和可点击按钮，也无法处理键盘和屏幕阅读器。
HTML 定义表单语义，CSS 实现布局与状态，JavaScript 监听输入和提交事件并更新 DOM。
设计时明确字段标签、帮助文字、错误位置、键盘顺序、禁用和提交中状态。
HTML 描述页面里有什么以及内容层级；CSS 决定布局、字体、颜色、响应式和动效；JavaScript 读取数据、响应事件并改变状态。浏览器把三者组合成最终界面。
Figma 图层可以帮助理解结构，视觉属性可以映射到 CSS，原型交互可以提示 JavaScript 行为。真实代码还要处理语义、可访问性、数据变化和性能。
设计稿交付时明确内容层级、状态规则和响应式，前端实现会更稳定。
框架帮助团队组织大量组件、状态和页面。
先看用户动作和业务风险，再理解技术为什么出现，以及它会怎样改变页面、状态和流程。
运营切换日期、区域和渠道，十几个指标卡与图表需要同步变化。
手动逐个寻找 DOM 节点并修改内容容易遗漏，状态之间也很难保持一致。
前端框架把筛选条件保存为状态，由组件树根据新数据重新渲染需要变化的区域。
设计组件时要明确输入参数、加载顺序、无数据、部分失败和筛选联动。
简单页面可以直接操作 DOM。复杂产品包含大量列表、表单、状态和复用模块，手动维护界面变化容易失控。React、Vue 等框架提供组件化和数据驱动的组织方式。
数据变化后，框架负责计算哪些界面需要更新。开发者更多关注组件输入、内部状态和用户事件。
组件规范里定义清楚输入、状态和组合边界，可以直接帮助代码组件设计。
React 和 Vue 是基于 JavaScript 的界面框架；TypeScript 是带类型能力的 JavaScript 扩展。
组件封装可复用界面，Props 提供外部输入，State 保存内部变化。
先看用户动作和业务风险，再理解技术为什么出现，以及它会怎样改变页面、状态和流程。
订单列表里同时存在待支付、待发货、已退款三种订单。
复制三套几乎相同的页面会造成样式和逻辑分叉，状态变化也难以统一维护。
OrderCard 作为组件，订单数据通过 Props 传入，展开状态或按钮 Loading 保存在组件 State 中。
组件规范要覆盖状态、权限和异常组合，例如“已支付但退款处理中”。
项目、成员和合同列表都需要日期、负责人和状态筛选。
各页面各写一套筛选会产生不同交互和字段规则。
通过组件 Props 配置字段和默认值，通过事件把筛选结果传给页面。
设计系统中要区分固定结构与可配置内容，避免组件只有视觉复用。
一个 ProjectCard 可以通过 Props 接收项目名称、负责人和状态；展开与收起可以由内部 State 控制；点击事件再把用户操作传递给上层。
组件边界需要围绕稳定职责划分。过大的组件难以复用，过碎的组件增加理解和组合成本。代码组件还要覆盖空值、长文本、权限和异步状态。
<ProjectCard
name="AI 设计系统"
owner="范米花儿"
status="active"
/>Figma Variant 适合表达视觉状态，代码 State 还包含数据、网络和业务状态。
同一个 Button 组件通过 variant、size、disabled、loading 等属性生成不同表现。
Router 把 URL 映射到页面，并维护页面之间的导航关系。
先看用户动作和业务风险，再理解技术为什么出现，以及它会怎样改变页面、状态和流程。
消费者打开商品详情需要快速看到内容并被搜索引擎收录；运营后台需要高频切换页面；活动页长期不变。
所有页面都采用同一种渲染策略，会牺牲首屏速度、搜索收录或交互流畅度。
商品详情可采用 SSR，后台常用 CSR，固定活动页可用 SSG，Router 负责 URL 与页面的映射。
设计时考虑首屏骨架、页面切换反馈、返回位置、深链接和过期页面。
项目列表可能对应 /projects，项目详情对应 /projects/123，设置页对应 /settings。动态参数让同一个详情页面展示不同项目。
单页应用通常在浏览器中切换组件；服务端渲染会在服务器生成部分 HTML；静态生成会提前构建页面。选择方式会影响首屏速度、搜索引擎和数据获取。
信息架构和 URL 结构相互影响。稳定的页面层级有助于路由设计。
前端项目通过目录、依赖和构建流程组织成可维护工程。
先看用户动作和业务风险，再理解技术为什么出现，以及它会怎样改变页面、状态和流程。
开发需要新增导出按钮、调用接口、处理下载状态并复用权限逻辑。
所有代码挤在一个文件里会让页面、组件、接口和工具函数相互缠绕，后续改动容易影响无关功能。
组件放入 components，接口封装放入 services，页面组合放在 routes/pages，依赖与脚本由 package.json 管理，Vite 负责开发和构建。
设计交付可以按页面、组件、资源和状态分组，方便与前端工程结构对应。
components 保存复用组件，pages 或 routes 保存页面，services 封装 API 请求，hooks 保存复用逻辑，styles 管理样式，assets 保存图片和字体。
package.json 记录依赖与脚本，构建工具把源码处理成浏览器可以加载的文件。Git 记录版本，测试工具验证组件与流程。
src/
├─ components/
├─ pages/
├─ hooks/
├─ services/
├─ styles/
└─ utils/
package.json
tsconfig.jsonHTML 演示稿与生产前端工程的差距，主要体现在数据、状态、路由、依赖、测试和构建。
选择一个后台页面，把它拆成 Page、Layout、5 个可复用 Component，并为每个组件写出 Props 与主要 State。