你将得到什么
做完这套流程，你会拥有一组“可复制到任何项目里”的基础组件：按钮（不同尺寸/状态/图标/加载）、输入框（不同尺寸/状态/前后缀/帮助文案）。它们有统一的命名、统一的属性结构，交付给开发也更清晰。
第 0 步：准备页面与命名规则（强烈建议照做）
1）新建一个组件库文件：建议文件名为“Design System - Components”。
2）建立两页：① 00 - Covers（封面/说明）② 01 - Components（正式组件）。
3）定义命名规则（保持一致最重要）：
- 组件名称：Button、Input
- 变体属性使用“属性=值”形式：Size=MD、Type=Primary、State=Default
- 尽量避免中文命名，团队协作更稳定；值使用短英文：SM/MD/LG、Default/Hover/Pressed/Disabled/Loading
第 1 步：做一个“按钮基座”
先做一个最基础的按钮：只包含一个容器 + 文案（不做变体）。
- 画一个矩形 + 文案，选中后用 Auto layout（自动布局）。
- 自动布局建议：水平排列、左右 padding 16，上下 padding 10，间距 8。
- 圆角 8；阴影先不加（阴影交给状态/主题去控制）。
- 文字样式建议：14/20，Medium；颜色先用纯白（后面会用不同 Type 改颜色）。
关键点：把它做成 Component（组件），命名为 Button。
第 2 步：把按钮转换成 Variants（变体）
选中按钮组件，点击右侧 + Add variant（添加变体），让它成为一个 Variant set。
建立 3 个最常用的维度（不要一上来就做太多）：
- Type：Primary / Secondary / Ghost
- Size：SM / MD / LG
- State：Default / Hover / Pressed / Disabled
你可以先只做 1 个 Type（比如 Primary）+ 3 个 Size + 4 个 State，等结构跑通后再扩充。
第 3 步：把尺寸做成可控（SM/MD/LG）
复制出三份按钮，分别调整 padding 与文字大小（保持视觉一致即可）：
- SM：padding 12x8，字号 12/16
- MD：padding 16x10，字号 14/20
- LG：padding 20x12，字号 16/24
把它们的变体属性标好：Size=SM / Size=MD / Size=LG。
第 4 步：做状态（Default/Hover/Pressed/Disabled）
状态建议只改“颜色与透明度”，不改布局尺寸。这样在页面里切换状态不会抖动。
- Default：主色填充（例如 #2563EB）
- Hover：主色稍深（例如 #1D4ED8）
- Pressed：再深一点（例如 #1E40AF）
- Disabled：整体 40% 透明 + 鼠标禁用（视觉提示即可）
如果团队有 Token 体系，颜色建议引用样式（Styles/Variables），不要写死值。
第 5 步：加入“图标”与“加载”两种能力（用属性而不是加一堆变体）
这一步能显著减少变体爆炸。
- 在按钮内加入一个图标占位（例如 16x16），把它做成一个子组件 Icon。
- 给图标图层创建 Boolean property：Has icon（是否显示）。
- 再加一个 Loading 图标（旋转用动效交给开发），同样用 Loading 的布尔属性控制显示。
- 当 Loading=true 时，建议把文案透明度降低或替换为“加载中”。
技巧：图标与文字之间的间距用 Auto layout 的 gap 控制，图标隐藏后间距自动消失。
第 6 步：做输入框 Input（同样用 Variants + 属性）
输入框建议也做 3 个维度：
- Size：SM / MD / LG
- State：Default / Focus / Error / Disabled
- Affix：None / Prefix / Suffix / Both
结构建议：容器（stroke）+ 左侧前缀区 + 文本区 + 右侧后缀区。
- 用 Auto layout 包住整个输入框，设置 padding。
- 前缀/后缀区用布尔属性显示隐藏（例如 Has prefix、Has suffix）。
- 文本区放一个 placeholder 文案，做成 Text property：Placeholder，让使用者能直接改文案。
- Error 状态：stroke 变红 + 底部加一行帮助文案（可用布尔属性控制显示）。
第 7 步：整理到组件库页面并写“使用说明”
把 Button 与 Input 放到 01 - Components 页里，建议每个组件旁边写 4 行说明：
- 用途（什么时候用）
- 属性列表（Type/Size/State 以及 Has icon 等）
- 注意事项（比如 Disabled 不允许点击）
- 对开发的提示（颜色 Token、圆角、间距）
常见坑（提前避雷）
- 变体维度过多：先把最小可用集合做出来，再扩充；否则维护成本爆炸。
- 命名不统一：同一维度的值要保持一致（不要 Size=Medium 又 Size=MD）。
- 状态改变尺寸：Hover/Pressed 不要改 padding/文字大小，避免页面抖动。
- 把“图标/加载”做成变体：优先用属性控制显示隐藏，变体数量会更可控。
你可以如何扩展（可选）
- 给 Button 增加 Danger / 类型。
- 给 Input 增加 With label（带标题）与 With hint（提示文案）。
- 把颜色、圆角、间距统一抽成 Variables，支持一键换主题。
