工程2026年10月
设计和代码用的是同一套结构
这篇写给已经用过 AI Coding、想把设计带进可上线页面的人。工具还会换。值得先记住的是两组对应：图层写的就是 HTML，组件写的就是封装。
对应一旦建立，样式和布局可以按像素去对，复杂模块也有了改动的资格。和前端一起排错时，你知道该看哪一层。生产环境里的交付会因此稳定下来。
篇幅长，适合卡在具体问题时回来查，不必一次读完。
它偏进阶，对应三种意愿：对话生成已经不够用，要把设计送进生产环境；想做 AI 时代的设计基建；想往 Design Engineer 走。
读之前，自动布局和组件化设计最好已经顺手，Figma 或 MasterGo 都行。AI Coding 产品用过、知道对话能改页面即可。代码环境这篇会碰到，但不从零教。
为什么这些判断还在起作用
设计师用上 AI Coding 之后，常见的卡点有三处。
工具和教程换得很快，旧文章对不上手头的产品，经验只能靠一次次踩坑慢慢攒。效果能生成，却不好控制，也好不好判断，于是不敢放进要上线的流程。有些做法其实做不到，有些做法其实做得到，两边都说不清，方案就在沟通里被退回来。
简单任务多磨几轮对话，往往能过去。任务一复杂，质量、步骤和细节一起变多，还要来回改。「改一句、跑一下、看一眼」会变得很痛苦。时间花得更多，算力也花得更多，结果却不稳定。
同样的模型，消耗可以差一倍
有人会问：生成又快又好，还要一点一点学专业知识吗？
可以先看一个概念，算力效率比（CER）。它问的是：时间相同、模型相同，一个人要烧掉多少算力，才能把某件有难度的事做完、做对。
| 任务 | 更会指导模型的人（CER = 1） | 差距 | 更不会指导的人（CER = 2） |
|---|---|---|---|
| 简单，难度记为 10 | 1 × 10 = 10 | 10 | 2 × 10 = 20 |
| 复杂，难度记为 1000 | 1 × 1000 = 1000 | 1000 | 2 × 1000 = 2000 |
差距会跟着任务变难而被放大。CER 更低的人，在这套工作方式里更强。要让它降下来，得知道怎样把任务讲准确。讲准确的前提，是你自己有方法。
生成看起来不用人动手，容易让人以为专业不重要了。实际发生的事更接近放大：你已经有的判断会被放大，你还没有的判断也不会凭空出现。
结果里有多少是你决定的
另一个有用的概念是意图密度。它看生成结果里，有多少来自使用者的主动决定，有多少只是「通常都这样」的默认路径。
创作可以拆成循环的两段。意图是你要做什么、为什么。执行是你怎么把它做出来。模型正在接手执行。人若把意图也交出去，内容会变空，也会变得彼此相像。
生成变得便宜之后，意图密度高、能和默认结果拉开距离的东西会更少。设计实践里也能感到：生成的界面常常差在细节上。
设计师写代码的用处，是把那些只读代码判断不了、用起来却构成体验的地方找出来，再磨平。外行说不清、也感觉不到差距的地方，往往就是产品的口味从哪来。海外设计工程师的招聘描述里，对细节的执着出现得又密又具体。
角色会走到设计判断和工程实现叠在一起的位置
专业能力影响你的 CER，意图密度影响产出的质量。两件事都在做的人，职位上常被叫做设计工程师。
综合 17 份有效的海外设计工程师招聘，这个角色用工程把设计品质做出来，也用设计判断去影响工程决策。价值在于减少设计和实现之间的损耗，并能独立走完从问题定义到上线的整段。
| 传统产品设计师 | Design Engineer | |
|---|---|---|
| 交出去的东西 | 设计稿、标注、原型 | 能跑的代码原型、设计系统 |
| 常开的工具 | Figma / MasterGo，Ae / Rive | Figma，加上 Cursor / Claude Code，以及 GitHub / Gitee |
| 和研发的关系 | 稿子交出去，等还原 | 自己参与实现，少一层理解损耗 |
| 怎么理解用户 | 访谈、问卷、可用性测试 | 模型辅助分析、定量数据，再加上原来的研究 |
| 怎样算做成了 | 方案被采纳 | 产品指标发生了变化 |
| 发言靠什么 | 设计判断 | 设计判断，加上可以验证的原型 |
会用 AI Coding 的设计师，位置可以停在交稿之前，也可以走到用工程能力解决设计问题。招聘里对能力的提及大致是这样：
| 能力 | 17 份里提到 | 招聘里常见的说法 |
|---|---|---|
| 前端工程（React / TypeScript） | 17/17 | proficient in React / Next.js |
| 从概念走到上线 | 16/17 | from concept to production |
| 产品感觉 | 15/17 | you know when something feels right |
| 搭建和维护设计系统 | 14/17 | own the design system |
| 动效和交互 | 13/17 | fluid animations, expressive gestures |
| 熟练使用 Figma | 12/17 | mastery of Figma |
| 用户研究和需求 | 8/17 | work closely with users to deeply understand their needs |
想稳定地自己闭环，就得掌握一部分工程知识和方法。只靠工具，或只靠不停对话，接不住要上线的质量。
补丁工具会换，结构不会换
为了把设计和代码接上，行业做过很多针对某一环的产品：
- 低代码建站：Framer、Webflow
- 设计工具：Figma、MasterGo
- 切图和标注：蓝湖、Figma Dev Mode
- 设计转代码：Builder、Anima、Figma2Code，以及 MasterGo 的 NoCode D2C 插件
- 写代码时的可视编辑：Cursor 的 Visual Edit，以及和编辑器接在一起的画布 Pencil、Paper
- 稿子和编辑器之间的通道：MCP、API、CLI
这些工具各自补一块。设计和落地之间的整段，目前还没有一块补丁能一次盖住，于是补丁上面再打补丁。使用变繁琐。每个补丁也要等研发资源，问题来了不能立刻处理。
懂一点代码，常常可以绕过其中一块补丁。和学习成本比，这笔账是划算的。原理不跟着工具的换代一起作废。
学习改成对上你已经在用的概念
| 以前的学法 | 现在更有效的学法 |
|---|---|
| 先把一门学科的框架学完，再开下一门 | 先抓住核心概念，把流程走熟 |
| 靠大量写代码、大量画稿来覆盖 | 在真实任务里积累方法 |
我从 2025 年初开始碰，到 2026 年初把它收进日常产出，中间有三次对上：
- 图层和 HTML 标签是同一层结构。
- 设计组件和代码组件是同一种复用。
- 交互逻辑和代码逻辑用的是同一套因果。
转得动，是因为设计流程里已经有很多图和方法，和工程思维长在同一套结构上。要做的事是把设计概念当成锚，实践里再把代码那一侧补上。遇到什么需求，就往那个领域深一点。
从设计概念对上代码概念的三层
所以工程化设计思维是：弄清代码在做什么，再反过来整理画稿的习惯，让设计思路和实现之间少一层空隙。稿子本身就能成为实现的草稿。
图层写的就是 HTML
这一组对应的是静态样式和空间结构。下面会分开写「是什么」「为什么要在意」「可以怎么练」。方法比语法更重要。
设计师用图层安排视觉上的包含关系。工程师用盒模型安排 DOM。两边写的是同一件事：谁包着谁，谁跟谁排，间距是多少。
图层怎样变成标签
稿子里怎么分层，DOM 树就是什么形状，可以逐层对上。只要改的是元素之间的结构，改的就是某种 <标签>。标签名、放进去的属性和包住的内容，决定它是哪一种「图层」。
| 设计里的东西 | 代码里的东西 |
|---|---|
| 图层 / Frame，渲染之后成为一个 DOM 节点 | HTML 标签 |
  |    |
普通图层  | <div> … </div><img src="存储路径" className="图片如何显示"><video src="存储路径" className="视频如何显示"> |
带自动布局的图层  | <div className="flex 以及主轴、交叉轴的排列"> … </div><div className="grid 以及网格的行列"> … </div> |
带绝对定位的图层  | <div className="absolute right-0 top-0 以及具体方位">绝对定位的元素，通常放在带布局的图层里面 </div> |
文本图层  | <div className="文本样式">块级文本，长短都独占一行</div><p className="文本样式">段落，独占一行</p><span className="文本样式">行内文字，可以和别的字混排</span><a href="跳转链接" className="文本样式">链接文字</a> |
组件图层  | // 成对标签，中间可以插入内容<组件名 className="从外面传入的样式" props="value"></组件名>// 单个标签<组件名 className="从外面传入的样式" props="value" /> |
侧边栏里的参数就是 CSS
选中图层之后，右侧已经设好的样式，就是这一层 HTML 节点上的 CSS。只要改的是外观和效果，改的就是 属性: 值，或者原子类里的 属性-值。
| 设计字段 | CSS | Tailwind | 在管什么 | |
|---|---|---|---|---|
| 一块按钮长什么样 |  | <div style="background-color:#3b82f6; color:white; padding:8px 16px; border-radius:6px; text-align:center; font-weight:500; cursor:pointer;">按钮</div> | <div className="bg-blue-500 text-white px-4 py-2 rounded-md text-center font-medium cursor-pointer hover:bg-blue-600 transition-colors duration-200">按钮</div> |  |
| 位置 | 元素对齐 | display justify-content align-items | flex justify-center items-start | 主轴和交叉轴上怎么对齐 |
| 文本对齐 | text-align vertical-align | text-left text-center align-middle | 字在盒子里靠哪 | |
| 内边距 | padding 以及单边 | p-1 pt-2 px-4 | 内容到边框内侧的距离 | |
| 外边距 | margin 以及单边 | m-4 mt-2 mx-auto | 这个盒子和外面的距离。设计稿里常常没有这一项 | |
| 旋转 | transform: rotate() | rotate-45 -rotate-6 | 角度可以任意 | |
| 布局 | 布局类型 | display | flex grid block inline-flex | 容器用哪种排列 |
| 尺寸 | width height | w-64 h-32 w-full | 固定，或跟着空间走 | |
| 最大和最小 | max-width min-height | max-w-md min-h-screen | 弹性布局里给边界 | |
| 固定比例 | aspect-ratio | aspect-square aspect-video | 图片或模块保持比例 | |
| 样式 | 填充 | background-color | bg-gray-200 bg-[#fafafa] | 调色板或自定义色 |
| 混合 | mix-blend-mode | mix-blend-multiply | 和底下的画面怎么叠 | |
| 描边 | border border-color border-width | border border-2 border-gray-300 | 边的粗细和颜色 | |
| 不透明度 | opacity | opacity-50 opacity-80 | 整层的透明度 | |
| 圆角 | border-radius | rounded rounded-lg rounded-full | Tailwind 默认有多档圆角 | |
| 效果 | 投影 | box-shadow | shadow shadow-lg shadow-inner | 阴影的层级 |
| 背景模糊 | backdrop-filter: blur() | backdrop-blur backdrop-blur-md | 需要浏览器支持 | |
| 状态 | Hover | :hover | hover:bg-blue-600 | 指针停在上面 |
| Active | :active | active:scale-95 | 按下的那一下 | |
| Focus | :focus | focus:outline | 键盘或程序把焦点放上来 | |
| Disabled | opacity 和 cursor | disabled:opacity-50 disabled:cursor-not-allowed | 不可用 | |
| 交互 | 指针 | cursor: pointer | cursor-pointer select-none | 指针变成什么样，字能不能被选中 |
| 过渡 | transition | transition-colors duration-200 | 变化沿哪条曲线发生 |
约束让稿子能跟着内容变
可以拿这份跟练稿练。打开后用标题下拉菜单复制一份自己的。
布局约束让元素之间有方向、有间距、能响应变化。这决定稿子能不能被工程实现。元素如果只是手摆的，内容一变，整页就散。那种稿子是静止的。
自查时，找一份准备交给代码的稿子，拖容器，按下面每一层看约束有没有设。原型预览多开几次。排查页面时，也可以用同一套动作。
| 概念 | 常见程度 | 在设计工具里 | 它在保证什么 | 在代码里 |
|---|---|---|---|---|
| 尺寸：固定、由内容撑开、填满剩余空间 | 常见 | Figma： MasterGo：   | 宽度、高度和内容多少变化时，每个容器怎么伸。漏掉之后，转代码的容器都是硬的，尺寸一变就错位，基础问题也不好发现。 | {/* 固定，不跟内容和父级走 */}<div className="w-[22px] h-[32px]">...</div>{/* 由内容决定 */}<div className="w-fit h-fit">...</div>{/* 填满剩余空间，要放在 flex 里 */}<div className="w-full self-stretch">...</div><div className="h-full flex-1">...</div> |
| 尺寸的上下限 | 需要时再加 | 和上面的尺寸策略一起，规定极端情况。漏掉之后，更进一步的弹性布局做不出来。 | {/* 随内容，但落在 120 到 400 之间 */}<div className="w-fit min-w-[120px] max-w-[400px]">...</div>{/* 高度随内容，空的时候也不低于 48 */}<div className="h-fit min-h-[48px]">...</div> | |
| 溢出：内容、文字、图片超出盒子 | 常见 | Figma：  MasterGo：   | 裁切决定内容停在哪，留白才稳得住。动态文案要先留好截断。漏掉之后，真实数据一进来就会顶出页面，挡住别的东西。 | <div className="overflow-hidden">...</div><div className="overflow-auto">...</div><div className="overflow-x-hidden overflow-y-auto">...</div><p className="truncate">单行省略</p><p className="line-clamp-2">最多两行</p> |
| 绝对定位：方向、缩放、离边的距离 | 常见 | Figma： MasterGo：  | 用来放异形切图、角标、浮层和遮罩。漏掉之后，这些东西会跟着普通流一起跑。 | <div className="relative"><span className="absolute top-0 right-0">99+</span><button className="absolute bottom-4 right-4">+</button><div className="absolute bottom-0 left-1/2 -translate-x-1/2">...</div><div className="absolute inset-0 bg-black/50">...</div></div> |
| 断点：同一页的多端尺寸 | 需要时再加 | 有插件可以协助 | 一个页面要在多种宽度下都成立 | <div className="hidden md:block">宽屏才显示</div><div className="block md:hidden">窄屏才显示</div><div className="flex flex-col md:flex-row">...</div><div className="w-full md:w-[1200px] mx-auto">...</div> |
Tailwind 的断点前缀大致是 sm 640、md 768、lg 1024、xl 1280。父级要先是 relative，子级的 absolute 才相对它。
这些对应用来守上线前的最后一点
这一节给出的是细调界面的思路，尤其是上线前剩下的那一小截差异。它不要求每份稿子都画成同一种样子。
| 把意图设清楚 | 验收和调试 | |
|---|---|---|
| 在稿子里 | 知道参数在哪之后，点两下就能设完。自由度高，也快。 | 拖、输入、清空、开原型，都能立刻看。 |
| 在代码里 | 要先找到那一段，再改，再核对。自由度低，也重。 | 要靠开发者工具、假数据和定位，才能把某个状态调出来。 |
意图若先在稿子里定完，代码侧就少一轮试。问题若先在代码里被看见，也可以映回稿子：稿子怎么改，代码就怎么改。稿子侧的调试做熟之后，有些调整可以不经过稿子，直接改那几个样式值。
| 还不会对的时候 | 会对上之后 |
|---|---|
| 整理图层被当成额外劳动。转成代码之后，还原对不上，原因也说不清。 | 画的时候就把布局和样式的意图组织进图层。转代码时，定义是清楚的，还原问题从源头少一截。 |
| 对着生成页面一句一句说：「这个按钮往左」「这行和标题对齐」。一个点一轮对话。 | 找到对应节点，改有限的几个 CSS 值。位置问题从布局关系入手，样式问题直接看那一层的 CSS。 |
| 线上的展示问题先记下来，再排队等研发。新页面里没画到的极端情况，完全看研发是否留意。 | 展示类的问题可以自己判断、自己改。极端情况可以按约束表去补。 |
画稿在人要自己守细节的时候仍然有用。它是设计意图的整理器。画的过程会逼人把问题定位清楚。这一步看起来慢，是为了后面少返工。
用在不同难度上，大致是：
| 难度 | 用在哪 | 会看到什么 |
|---|---|---|
| 基线 | 设计转代码 | 细节留得住，人工对的问题少，一次就能过 |
| 中线 | 自己改 | 设计验收和体验修补：展示细节和展示类问题可以自己收 |
| 中线 | 自己做的项目 | 布局不必停在现成模板里，想得到的自适应可以自己实现 |
| 高线 | 设计基建 | 把一套独特风格收成互不重叠、合起来完备的 Design Token |
| 高线 | 给模型的规则 | 理解上下文怎么被记住，写出模型能稳定遵守的样式约束 |
可以这样练
从拉扯稿子开始。把每个元素看成延展性不同的盒子，再把盒子装到一起。
看到任何界面，按这个顺序问：
- 容器是什么关系：父子、同级，还是绝对定位。
- 排列用的是 flex、grid，还是 absolute。
- 尺寸是由内容撑开、填满、固定，还是带了最小和最大。
- 对齐、截断、溢出和各种状态有没有被定义。
这四问在稿子里答完，代码里的答案已经在了。
单个页面的细节有办法守住之后，下一问是：同样的页面，还要整页再写一遍吗？
组件写的就是封装
这一组对应的是复用。
你可能听过两种话。研发说，这个页面会用现成组件，样式可以收，结构不要大改。自己做的时候，从 React Bits 一类站点拿一个动效模块，先下载到本地，再改参数。
两边都在用现成的轮子。组件是前端里最小、也最好传递的复用单位。插进去就能用，需要时再改。
设计师用组件库管理可复用的界面单元。工程师用 React 或 Vue 的组件管理可复用的代码。两边做的是同一件事：把重复出现的东西收成一个有名字、有参数、能配置的单元。
名字、实例和参数，各端是同一套
技术栈不同，组件、实例、Props 的模型是一样的。
| 设计 | React | Vue | SwiftUI | |
|---|---|---|---|---|
| 一个带图标的按钮 |  | <IconTextButton icon={<FileIcon />} onClick={handleAttachment} variant="ed" size="md" tooltip="上传附件" /> | <IconTextButton :icon="FileIcon" @click="handleAttachment" variant="ed" size="md" tooltip="上传附件" /> | IconTextButton(icon: Image(systemName: "paperclip"), action: handleAttachment, variant: .ed, size: .md, tooltip: "上传附件") |
| 组件：可复用的那一个定义 | 组件 | function Button() {} | defineComponent({ name: "Button" }) | struct Button: View {} |
| 实例：用出去的那一个，跟着定义走 | 实例 | <Button /> | <Button /> | Button() |
| 交互状态 | default / hover / active / disabled | 伪类加状态，:hover、useState | 伪类加 ref() | .buttonStyle 加 @State |
| 变体：同一组件的不同形态 | Variant | variant="primary" | variant="primary" | variant: .primary |
| 布尔：某部分出不出现 | Boolean | showIcon={true} | :showIcon="true" | showIcon: true |
| 文本：里面可替换的字 | Text | label="提交" | label="提交" | label: "提交" |
什么时候该拆，什么时候不该堆
一个组件只做一件事。职责叠得太多，就难复用，也难改。原子能力先封装好，再组合起来，复杂系统才维护得住、扩得开。交给研发的代码也一样：尽可能拆开，每一块都能单独验证，闭环尽量小。
| 设计侧 | 代码侧 | |
|---|---|---|
| 什么时候封装 | 多个页面都要用；或者变体太多，不拆就预览不了 | 同一段出现了多次；或者一个文件长到读不动 |
| 封装之后得到什么 | 类似场景能复用，效果能集中预览，转代码时指令更清楚 | 少重复，模块之间少缠在一起，以后好改，出错也好定位 |
| 做得好时长什么样 | 组件互相嵌套，而不是把所有形态平铺。原子足够小，才能通用 | 模块边界清楚，找得到、加得上、改得动 |
| 做得差时长什么样 | 把特性的排列组合全部画成变体  | 文件又肿又难找。新需求只能在上面打补丁 |
看起来一样的界面，工程师常常宁可自己写，也不愿拼一份按整页交出来的代码。差别在结构：
拆得好和拆得碎的两套结构
设计稿里，人习惯按视觉边界拆：看起来是一块，就抽成一个组件。代码里，能封装的不止界面。
不变的值可以抽成配置。Design Token、中英文案、环境变量都是。改一处，全局跟着走。不抽的话，它们散在文件里，改的时候容易漏。
一段能单独讲清的行为，可以抽成函数或自定义 Hook。搜索时的防抖、滚到底再加载、是否有权限，都和某一块具体界面无关，抽出来就能多处用。
封装少掉的是散落，多出来的是边界：会一起变的放在一处，不会一起变的隔开。系统因此撑得住更复杂的业务。
做出来还不等于完成：它对外承诺了什么
设计组件和代码组件都有一份没写在面上的约定：对外承诺什么，对内藏起什么。
| 维度 | 设计侧 | 代码侧 |
|---|---|---|
| 能传什么 | 属性的类型和可选值 | Props 的类型，通常用 TypeScript |
| 极端情况 | 空、超长、数量很多 | 空数据、加载中、出错 |
| 怎么响应 | Hover、Active、Disabled 有没有标 | 事件回调怎么定义 |
约定若是空的，稿子看起来完整，真实数据一来，边界没人设计过，研发和模型只能猜。代码组件没有类型，调用方传错，要跑起来才爆。改一处，别处跟着坏，是因为边界没划清，耦合太深。
看懂边界，才有改这块的资格
这一节要练的是判断：一个复杂模块好不好，该往哪改。它不要求所有组件都按同一种方式建。
| 还看不见边界的时候 | 看见复用之后 |
|---|---|
| 每个页面重新画，没有可复用的组件 | 抽出组件，把变体和属性定义清楚 |
| 改需求时一页一页改，会漏，也会不一致 | 改定义的那一处，用到它的地方一起更新 |
| 提交之后，研发说动到了业务逻辑，不方便收 | 分得清哪些是内部实现，哪些是对外的接口 |
| 提需求时说不清改的是哪一层 | 说得清是改主组件，还是只覆盖某一个页面 |
| 难度 | 用在哪 | 会看到什么 |
|---|---|---|
| 基线 | 设计规范 | 稿子里的组件，结构、类型和边界都写清了 |
| 中线 | 自己改 | 某个场景可以独立把组件交成代码 |
| 中线 | 自己推动的体验修改 | 改到组件时，能判断动的是哪一层 |
| 高线 | 设计基建 | 按组件的作用，为产品抽出一套通用组件库 |
| 高线 | 给模型的规则 | 写出模型能稳定遵守的组件层约束 |
可以这样练
为了复制方便而做的「组件」，还不是组件化。真正要问的是：哪一部分稳定，哪一部分会变。稳定的做成结构，会变的做成参数，比如变体、尺寸和状态。
一个按钮有多少种状态，就能看出你对它的边界想了多清楚。
从合并同类项开始。重复出现的模块收成组件，再把页面的构成和调用关系理顺。
看到重复的元素，先问三句：
- 输入有哪些：参数和变体。
- 边界有哪些：没有数据、文字极长、图片缺失。
- 行为有哪些：hover、active、disabled 是否定义。不变的是结构，变的是参数，谁来决定这些值，是数据从哪来。
再往上一层：信息结构和数据流
这一组是系统设计上的对应，当作延伸来看。
产品、传统软件与 Agent 的分层对照
信息结构如何对上数据流
如果用用户体验要素当框架，产品侧和技术侧想的事情可以摆在一起。绿色更接近设计师加上 AI Coding 之后容易碰到的一层。黄色是更往下的一层，也更难。
| 产品设计 | 传统软件开发 | Agent 开发 |
|---|---|---|
| 战略层：用户需求和业务目标 | ||
| 范围层：功能和规格 | 系统设计：数据库、架构、API 约定 | |
| 结构层：交互和信息架构 | 模块架构：前端模块、路由、状态 | 能力层：命令行、工具函数、原子操作 |
| 框架层：布局和导航 | 组件通信：数据流、Props、事件 | 编排层：理解意图、拆任务、规划调用 |
| 表现层：视觉和动效 | 表达层：设计系统、结构化数据、动效 |
眼下它有两种用处。简单的用处，是帮你把对话生成推进到更完整的产品演示。复杂的用处，是去找一种组件渲染方案，让生成的界面稳定遵守规范。
离开时可以记住的两段
空间结构管的是静态样式。图层对 HTML，样式对 CSS，布局约束在稿子和代码里互通。练法是从拉扯稿子开始，把元素装进延展性不同的容器。它用来守上线前最后那一点差异，让样式和布局可以被精确掌握。
复用管的是组件。稿子和代码的组件结构互通，拆分决定以后能不能改。练法是从合并同类项开始，把页面收成维护得住的系统。它给你的是判断、修改和维护一块模块的资格。
另外两句。有条件就自己做 side project，业务里的发挥空间有时是被档期卡住的，案例常常比意愿先到来。画稿仍然有用：它是成本最低的试错，也是把设计细节送进实现的入口，同时还是思考用的工具。