不学代码 · 不熬身体 · 只练真正稀缺的能力
融合审美工程化与商业闭环的完整训练体系
在AI时代，不会写代码的人凭什么成为金字塔尖的1%？答案不是学了多少技术，而是构建了哪几层不可替代的能力。以下是六层能力金字塔——从底层工具到顶层变现。
| 层级 | 能力 | 训练时段 | 验收标准 |
|---|---|---|---|
| L0 | 工具与流程 | Week 1–4，每晚 | MCP配通 + IDE跨文件熟练 + 1个自封装工作流 |
| L1 | 审美工程化 | Week 5–8，每周1次 | Design Token写入Rules + UI Prompt模板库 + AI自动遵循 |
| L2 | 产业研究 | Week 1–8，工作日+周末 | 48h完成陌生方向产业扫描→赛道判断 |
| L3 | 产品架构 | Week 9–11 | 可交付开发的MVP定义文档 |
| L4 | 商业变现 | Week 7–8 + 持续 | 商业模式画布 + 收入模型 + 成本预估 |
L0是杠杆——没有它，后面五层只能手动爬。L4是目标——没有它，前面四层没有商业意义。L1（审美工程化）是你最容易被低估的优势——你有审美，只需学会把它翻译成规则。一旦翻译成功，你用AI做出来的产品界面可以直接对标优秀产品。
前8周方向A和B主力推进，方向C保持信息连接。第9周选最有把握的一个冲刺MVP。
与合伙人共同探索"垂类解决方案智能体集群"。需从模糊收敛到具体赛道：内容生成、投放优化、素材分析、合规审核、创意策略、数据洞察。
钳工、机器人调试、PLC、电工、焊工。已有真实业务和一手用户反馈。双边撮合模型 + 技能认证 + 小程序形态。
家人有服装织造产能，已在拼多多+抖音电商运营，但濒临瓶颈——流量成本上升、价格战、利润压缩。需探索品牌化/出海/供应链升级。
纯探索。在方向A或B研究中自然发现机会窗口时再启动。不主动分配固定时间，灵感来了就记录。
8年经验是资产。当方向A涉及户外广告AI应用场景时，你的经验是独一无二的壁垒。不独立推进。
方向C重要更新：家人已有拼多多+抖音电商实操经验，说明已跑通0→1但卡在增长瓶颈。下一步要研究的是"突破瓶颈的路径"——品牌化？切换平台？供应链优化？第5周后做一次系统瓶颈诊断。
以下不是"建议"，是"执行清单"。每周结束前对照检查——完成的划掉，没完成的记下原因，下周调整。
--color-primary命名法。选一个参考App，尝试用HTML/CSS复刻首页。
每一项按"抽象理解→具体操作→验收标准"三层展开。前4周集中学，后面8周边用边巩固。
L0让你"会开AI这辆车"。但会开车和会赛车是两回事。以下是四项深度训练——每项配有可直接复制到Trae的Prompt模板。
核心根因：功能堆砌陷阱。AI在"自由创作模式"下有内置审美；一旦进入"需求执行模式"，它变成打字机——你让它堆什么它就堆什么，不会帮你做减法。
你不是没有审美——你知道什么是好看的。差距只有一个：不知道怎么把"好看"翻译成AI能执行的Design Token。以下是完整的四步法 + 前端审美实操训练。
| 拆解维度 | 要记录什么 | 示例（Linear） |
|---|---|---|
| 主色体系 | 主色Hex、辅助色Hex、中性色三级Hex | 主色#5E6AD2, bg#0D0E10, surface#1A1B1E |
| 字体层级 | 标题/正文/辅助的字号+字重 | 标题24px Bold, 正文15px, 辅助12px |
| 间距规律 | 页面/模块/组件/元素四级间距 | 页面32px, 模块24px, 卡片20px |
| 圆角规则 | 按钮/卡片/输入框/模态框 | 按钮8px, 卡片12px, 输入框6px |
| 阴影规范 | 卡片/浮层/按钮三级阴影 | 卡片: 0 2px 8px rgba(0,0,0,0.06) |
| 信息密度 | 一屏几个模块？每模块几个元素？ | 手机首屏3模块，每模块3–5元素 |
| 留白策略 | 内容区占屏幕比例？呼吸感来源？ | 内容区≈60%，大量留白在模块间 |
推荐拆解顺序：W5: Linear（B端SaaS标杆）→ W6: Stripe（开发者工具审美标杆）→ W7: Notion（信息密度处理典范）→ W8: Airbnb/Figma/飞书中任选
先理解你的真实处境：你打开一个产品界面，3秒内就知道它好不好看。但当你让AI做一个页面时，你只能说"做得高级一点"——AI听不懂。你和AI之间的翻译层缺失了。这个翻译层就是"设计库"——它不是一本设计书，是你用自己的眼睛和判断力，日积月累建立的一套"好看的具体参数清单"。
| # | 观察维度 | 你要问自己的问题 | 记录格式示例 |
|---|---|---|---|
| 1 | 配色策略 | 这个页面用了几个颜色？主色是谁？为什么选这个色？如果换成蓝色/红色/绿色会怎样？ | 主色1个(#5E6AD2)，中性色3级(白/浅灰/深灰)，无渐变。选紫色因为B端SaaS想传达"专业但不冰冷" |
| 2 | 字体气质 | 字体是圆润的还是锋利的？衬线还是无衬线？字号层级分几级？ | 无衬线，偏圆润(Inter)。标题24px Bold / 正文15px Regular / 辅助12px。标题和正文反差大=信息层级清晰 |
| 3 | 留白节奏 | 页面"呼吸感"来自哪里？内容区和留白区比例？模块之间距离大还是紧凑？ | 内容区约60%。模块间距24px远大于模块内间距12px。大量留白在模块之间而非模块内部 |
| 4 | 圆角语言 | 圆角是大还是小？哪些元素用了圆角？整体感觉是"圆润友好"还是"锋利专业"？ | 按钮8px(中等)、卡片12px(偏大)、输入框6px(偏小)。整体偏圆润但不过度可爱 |
| 5 | 信息密度 | 首屏几个模块？每个模块几个元素？看完这个页面你记住了什么？ | 手机首屏3个模块，每模块3-5个元素。视觉焦点依次是：标题→主操作按钮→第一个卡片 |
| 6 | 情感基调 | 这个界面给你的第一感觉是什么？专业/温暖/科技/活泼/奢华/极简？什么元素造成了这种感觉？ | 专业+克制。原因：深色背景+单一主色+大量留白+无装饰元素+无emoji |
| 7 | 差异化记忆点 | 有什么细节让你觉得"这个设计很聪明"？有什么是其他产品不会这样做但这里做了的？ | 卡片hover时边框从无到有，过渡0.2s——细节不喧哗但让人感觉"这个产品很精致" |
| 字段 | 填写什么 | 为什么重要 |
|---|---|---|
| 截图 | 直接粘贴截图 | 视觉记忆 |
| 产品名+页面名 | 如"BOSS直聘-职位详情页" | 方便回溯 |
| 风格标签 | 极简/专业/温暖/科技/活泼/奢华/工业/清新/暗黑/轻奢 | 这是你以后按风格检索的关键 |
| 行业标签 | B端SaaS/C端消费/蓝领工具/教育/医疗/金融/社交 | 不同行业有不同的视觉惯例 |
| 配色提取 | 主色Hex + 辅助色Hex + 背景色Hex | 直接形成配色方案库 |
| 7维度评分 | 对7个观察维度各打1-5分，记录你最喜欢哪个维度 | 帮你发现自己的审美偏好模式 |
| 可用元素 | 记录1-2个你想"偷"的设计决策（如"这个卡片阴影很轻但层次分明"） | 这是你设计库的原材料 |
每周目标：收集5个新页面。12周后你有60个结构化素材。不需要每个都深度拆解——深度拆解每周只做1个（S1步骤），其他4个快速打标签+提取配色即可。
| 阶段 | 做什么 | 具体操作 |
|---|---|---|
| 第1轮 | 凭感觉写Token v0.5 | 从你收集的素材里，挑出你最喜欢的配色方案、字体层级、间距规律，照抄到Token模板里。不要想太多——先写了再说。这是你的"审美直觉快照"。 |
| 第2轮 | 用AI生成测试页 | 给AI一段纯功能描述（如"做一个技工技能列表页，展示技能名称、等级、证书状态"），不描述任何样式。看AI生成的页面符不符合你的Token。不符合的地方用红笔圈出来——这些就是Token的漏洞。 |
| 第3轮 | 修正Token v0.7 | 针对测试中发现的问题修正Token。比如：AI把卡片间距设成了8px但你想要16px → 在Token里明确写"卡片间距：16px"。AI用了圆角20px的按钮 → 在Token里加"禁止：按钮圆角>12px"。 |
| 第4轮 | 换一个页面再测 | 用修正后的Token，让AI生成另一个完全不同类型的页面（如"雇主发布工单页面"）。验证Token是否在不同页面类型下都能保持一致性。 |
| 第5轮+ | 持续迭代 | 每当你发现AI生成的界面有不符合你审美的地方，不要手动改——去改Token。Token越精确，你需要手动改的次数越少。 |
关键心态：不要期待第一版Token就完美。Token是"长出来的"，不是"设计出来的"。每次AI生成不符合预期，都是一次Token进化的机会。你不需要成为设计师——你只需要成为一个"知道自己要什么，并且能越来越精确地描述它"的人。
| 周 | 收集（20min×5天） | 深度拆解（60min/周） | Token迭代（30min/周） |
|---|---|---|---|
| W1–4 | 每天收集1个页面，打标签+提取配色。目标：建立收集习惯。 | W1: 拆解Linear（B端SaaS） W2: 拆解飞书（企业协作） W3: 拆解BOSS直聘（蓝领工具） W4: 拆解小红书（C端消费） | W4: 产出Token v0.5（凭感觉写） |
| W5–8 | 每天收集1个，开始有意识覆盖不同风格标签（不要只收集同一类）。 | W5: 拆解Stripe（开发者工具） W6: 拆解Notion（信息密度） W7: 拆解Airbnb（消费品牌） W8: 拆解Figma（设计工具） | W5: 测试Token v0.5→修正v0.7 W6: 换页面测试v0.7→修正v0.8 W8: Token v1.0写入Rules |
| W9–12 | 每天收集1个，开始收集"不好看"的页面作为反面案例。 | W9: 拆解一个你日常用的产品 W10: 拆解一个竞品 W11: 拆解一个你"觉得不好看但很成功"的产品 W12: 复盘12周审美进化 | W9: 用Token做48h挑战 W10: 按"多风格"要求建立第二套Token（见下方S5） W12: Token v2.0 |
核心认知：一套Design Token只能解决"AI每次都生成一致风格"的问题。但你需要的是"AI能根据项目类型自动切换不同风格"。灵活用工小程序（蓝领工人用）和跨境电商品牌站（年轻女性消费者用）和营销AI后台（B端客户用）——这三个产品如果长一样，不是"统一"，是"错位"。
| 方向 | 目标用户 | 用户审美偏好 | 应该的视觉风格 | 参考标杆 |
|---|---|---|---|---|
| 灵活用工（蓝领） | 钳工、电工、焊工 （30-50岁男性为主） |
不喜欢花哨、不喜欢太"科技感"、需要清晰直接、字号要大、操作要简单 | 工业风+实用主义：粗犷但干净的配色（深蓝+橙）、大字号、大按钮、少装饰、信息密度适中 | BOSS直聘、鱼泡网、美团骑手端 |
| 营销AI（B端SaaS） | 企业市场部、广告优化师 （25-40岁白领） |
专业但不冰冷、数据可视化要清晰、操作效率要高、暗色模式更受欢迎 | 科技专业风：深色背景+单一主色+大量留白+数据可视化优先、信息密度高但层级分明 | Linear、Notion、Figma、Jasper |
| 跨境电商（消费品牌） | 年轻女性消费者 （18-35岁） |
时尚感、精致感、信任感、图片要大、文字要少、氛围感很重要 | 轻奢时尚风：柔和暖色系+大图+精致排版+圆角偏大、氛围感>信息密度 | 小红书、Shein、Airbnb、Glossier |
| AI新方向 | 待定 | 根据方向确定后，先做用户调研再做风格决策 | 待定——但当你确定方向后，第一件事就是回答"这个方向的目标用户喜欢什么视觉风格？" | 待定 |
| 数智户外广告 | 品牌方、广告代理商 （B端决策者） |
需要"数据+创意"的双重说服力、大屏展示效果、视觉冲击力 | 创意+数据融合风：大胆的视觉冲击+清晰的数据看板+大屏适配、品牌感强 | DOOH平台、数据Dashboard |
| Token变量 | 灵活用工（蓝领） | 营销AI（B端SaaS） | 跨境电商（消费品牌） |
|---|---|---|---|
| 主色 | 深蓝#1A3A5C + 暖橙#F0853B | 深色#0D0E10 + 品牌紫#5E6AD2 | 暖米#F5F0E8 + 玫瑰金#C4956A |
| 背景色 | 浅灰#F2F3F5（耐脏） | 深色#0D0E10（专注） | 暖白#FCFAF5（柔和） |
| 字号 | 大一级：标题20px / 正文16px | 标准：标题16px / 正文14px | 偏大：标题22px / 正文15px |
| 圆角 | 小圆角4-6px（利落） | 中等6-8px（专业） | 大圆角12-16px（柔和） |
| 间距 | 紧凑12-16px（效率优先） | 宽松20-28px（呼吸感） | 宽松24-32px（氛围感） |
| 信息密度 | 中高（蓝领需要看到更多信息） | 中（每屏3-4个模块） | 低（每屏1-2个重点） |
| 图标风格 | 线性图标，粗线条 | 线性图标，细线条 | 面性图标或插画风 |
| 整体气质 | 实用、可靠、不花哨 | 专业、克制、数据驱动 | 温暖、精致、有质感 |
关键认知：你不需要为每个方向从头设计一套Token。你只需要知道哪些变量是"风格切换开关"——主色、背景色、圆角大小、信息密度——改这4个变量就能让同一个页面结构在不同方向下呈现完全不同的气质。其他变量（如间距网格、字体层级）可以共用。
这个训练的目的：不是让你成为三个方向的设计专家——是让你建立"风格是可切换的"肌肉记忆。当你下次启动一个新项目时，你不会下意识用同一套Token，而是会先问："这个项目的目标用户是谁？他们喜欢什么视觉风格？我的Token应该怎么调整？"
实操建议：W10起，每次让AI生成页面时，强制自己在Prompt里写清楚"项目类型"和"风格关键词"。不要偷懒只说"做一个订单页"——多花30秒描述风格，AI的输出质量会差10倍。
| 周 | 多风格训练动作 | 产出 |
|---|---|---|
| W5–6 | 开始有意识收集不同风格标签的页面（不要只收集B端SaaS）。每周至少覆盖3种不同风格。 | 素材库风格标签≥5种 |
| W7–8 | 选两个方向（如灵活用工+营销AI），分别为每个方向拆解1个标杆产品，对比它们在配色/字号/圆角/信息密度上的差异。 | 方向对比表 |
| W9–10 | 核心训练：同一内容（订单列表），用三种风格生成三个版本。对比差异，记录哪些Token变量是"风格切换开关"。 | 三版本对比报告 |
| W11–12 | 为你当前冲刺的方向，建立专用的Token变体。验证：让AI生成3个不同页面，风格保持一致。 | 方向专用Token文件 |
| 天 | 任务 | 产出 |
|---|---|---|
| D1 | 浏览Ant Design Mobile / TDesign Mobile / Vant的设计规范文档 | 笔记：3套系统核心差异 |
| D2 | 收集10个你认为"好看"的B端/工具类App截图（飞书/钉钉/BOSS直聘/猎聘等） | Reference文件夹 |
| D3 | 对每个截图做拆解：配色方案、字号层级、圆角规范、卡片间距 | 拆解表格 |
| D4 | 学习CSS变量（Design Token）概念，理解--color-primary命名法 | 练习Token文件 |
| D5 | 用Figma画一个简单的"登录页"，只用矩形+文字 | 第一个Figma文件 |
| D6–7 | 选一个参考App，用HTML/CSS复刻它的"首页"（只做静态） | HTML文件 |
关键知识点：Design Token = 颜色/字号/间距/圆角/阴影的变量化 | 8pt Grid系统 | 配色：1主色+1辅助色+语义色+中性色
| 天 | 任务 | 产出 |
|---|---|---|
| D1 | 学习"用户体验要素"五层模型（战略→范围→结构→框架→表现） | 思维模型笔记 |
| D2 | 用纸笔画目标产品完整用户流程 | 手绘流程图 |
| D3 | 用Figma画wireframe（黑白灰，无颜色，只关注布局和信息层级） | Wireframe文件 |
| D4 | MVP范围切割：砍掉非核心页面，聚焦核心流程 | MVP清单 |
| D5 | 学习"卡片分类法"，验证导航结构合理性 | 分类结果 |
| D6 | 学习交互状态：默认态/悬停态/按压态/禁用态/空态/加载态/错误态 | 状态清单模板 |
| D7 | 复盘：用新学知识重写一个页面的设计稿 | 改进版design spec |
| 天 | 任务 | 产出 |
|---|---|---|
| D1 | 学习React/Taro组件化的核心理念（Props/State/组合优于继承） | 组件思维笔记 |
| D2 | 分析现有代码中的重复模式，抽象出通用组件列表 | 组件清单 |
| D3 | 重点：建立"UI Prompt模板库"（见下方完整模板） | Prompt模板文件 |
| D4 | 用模板重写一个页面，Before/After对比效果 | 对比报告 |
| D5–6 | CSS Grid/Flexbox布局模式 + 移动端适配（750rpx vs vw/vh vs rem） | 布局练习 |
| D7 | 三周总结：输出《个人Design System v1》文档 | DS文档 |
页面级Prompt模板：每次生成新页面时使用此模板，填入你的Design Token和业务需求。
组件级Prompt模板：每个组件单独定义，保证设计一致性。
示例：StatCard（统计卡片）
为什么Prompt模板库是你的核心资产？精确的语言=精确的输出。不是"做一个好看的登录页"，而是"参考Linear的极简风，主色#7C9082，留白大于内容，圆角8px，字号层级：标题24px/正文14px/辅助12px，不要深色背景，不要科技蓝"。这份模板库让你每次都做到这个精确度。
你喜欢研究行业，有商科硕士背景，但学院派的商业分析和真正能赚钱的商业判断是两回事。
学院派 vs 商业化：学院派把分析做得越来越复杂，商业化把判断做得越来越简单。每次研究必须落到一个决定上：做还是不做？如果做，第一步是什么？
12周只是建立"最小可行能力体系"的起点。以下是每个阶段目标和可验证的里程碑。
AI降低了执行难度，但拉高了判断门槛。当人人都能用AI生成产品原型时，谁能判断哪个方向值得做、哪个功能用户愿意付费——这才是真正稀缺的能力。你在训练的正是这个能力。
备孕阶段不熬夜。以下是可持续的周节奏，以及12周结束时的具体验收标准。
| 时间块 | 时长 | 做什么 | 不做 |
|---|---|---|---|
| 工作日白天 | ~8h | 方向A（营销AI）——本就是工作内容。用智能体链做产业研究、赛道分析、商业模式验证。 | 方向B/C |
| 工作日晚上 | ~2h | 前4周：L0工具技能+设计入门。第5周起：AI深度驾驭训练（批判追问/多视角/盲区挖掘/反共识）+ 审美拆解。 | 深度研究（影响睡眠） |
| 周六白天 | ~4h | 方向B（灵活用工）——和老公讨论+用AI做产业研究。审美拆解训练（每周1h）。UI Prompt模板库迭代。 | 方向A |
| 周日全天 | 0 | 彻底休息。不安排任何工作、研究、学习。陪家人、休息、恢复精力。 | 任何形式的工作 |
同一个工具在不同阶段的使用深度完全不同。以下按12周三个训练阶段匹配，每个阶段标注"学到什么程度算过关"。
| 工具/资源 | 用途 | Phase 1 学到什么程度 |
|---|---|---|
| Trae IDE | AI驱动的开发环境，你的核心工作台 | 配通MCP filesystem + Web Search；能区分Solo和IDE模式的使用场景；IDE模式下完成跨文件任务不需手动批准 |
| MCP协议 | 给AI外接数据源和能力 | 理解Tool/Resource/Prompt三类能力；至少配通filesystem和Web Search两个Server；能解释"为什么MCP让AI从聊天工具变成干活工具" |
| Figma（免费版） | 设计稿绘制 + Design System浏览 | 会用矩形+文字画简单页面线框图；能从Figma Community下载Design System文件并理解其Token结构；不要求画高保真 |
| Ant Design / TDesign 文档 | 理解什么是设计规范和组件库 | 能说出"设计规范包含哪些维度"（颜色/字体/间距/圆角/组件）；能对比两套规范的核心差异；不要求记住具体数值 |
| Flexbox Froggy / Grid Garden | 游戏化理解CSS布局核心概念 | 全部通关；能用自己的话解释Flexbox和Grid各自适合什么场景；理解"布局"和"定位"是两回事 |
| CSS变量（Design Token） | 理解设计工程化的基础 | 能写出--color-primary级别的变量定义；理解为什么"改一个变量全站同步"是设计工程化的核心；不要求写复杂CSS |
| 工具/资源 | 用途 | Phase 2 学到什么程度 |
|---|---|---|
| Refactoring UI | 从程序员视角学设计决策 | 通读核心章节；能解释"为什么灰色有50种但只用3种"；开始用它的框架审视自己生成的产品界面 |
| MDN Web Docs | CSS/HTML最权威参考 | 遇到具体布局问题时知道去MDN查什么关键词；能看懂CSS属性文档并尝试应用；不要求通读 |
| Figma → Wireframe | 从"画矩形"进阶到"画信息架构" | 能用黑白灰画出完整页面的wireframe；能区分"布局层"和"视觉层"的思考顺序；知道先画结构再上色 |
| Design Token 模板 | 个人设计系统的变量化表达 | 产出自己的Design Token v1文件（颜色/字号/间距/圆角/阴影五维度）；验证方式：给AI描述功能不描述样式，AI自动遵循Token |
| UI Prompt 模板库 | 让AI看懂你的设计语言 | 建立页面级 + 组件级两套Prompt模板；至少用模板成功生成3个风格一致的页面；模板可以直接复制到Trae使用 |
| Prompt库（研究类） | 批判追问/多视角/盲区挖掘/反共识 | 4类Prompt模板各至少1条经过验证；每次使用后迭代优化措辞；能说出"哪类Prompt在什么场景下最有效" |
| 工具/资源 | 用途 | Phase 3 学到什么程度 |
|---|---|---|
| Taro框架文档 | 跨端小程序开发框架 | 理解组件化开发的核心概念（Props/State/组合）；能看懂Taro项目的组件结构；能向AI描述"我要一个什么样的组件"让AI生成Taro代码 |
| 研究工作流（research-workflow.md） | 7步产业研究流程一键触发 | 工作流文件经过至少2次真实使用+迭代修正；能在48h内用此工作流完成陌生方向的完整研究→商业框架 |
| Rules文件 | Design Token写入Trae Rules，永久生效 | Token写入Rules后，说"做个登录页"AI自动遵循你的设计规范；不再需要每次描述颜色和间距 |
| PRD Template | 标准产品需求文档模板 | 产出1份完整的MVP产品定义文档（含功能清单+验收标准）；模板结构清晰，可复用于后续项目 |
| 竞品分析框架 | 标准化竞品研究维度 | 建立自己的竞品分析维度表（≥8维度）；至少完成1次≥5家竞品的系统分析 |
| MVP Checklist | 每次0→1的检查清单 | 建立自己的MVP启动清单（含功能切割/技术选型/验收标准/风险检查）；经过1次真实MVP定义验证 |
| 工具 | Phase 1 认知 | Phase 2 认知 | Phase 3 认知 |
|---|---|---|---|
| Figma | 这是什么？能画矩形 | 能画wireframe，理解图层结构 | 能出完整设计稿，组件可复用 |
| Design Token | CSS变量是什么？ | 能定义自己的Token v1 | Token写入Rules，AI自动遵循 |
| Prompt工程 | 能描述清楚需求 | 有模板库，每次复用不重写 | 模板迭代优化，形成方法论 |
| MCP | 配通2个Server | 理解何时加新Server | 能判断"这个问题加MCP能解决吗" |
| 工作流 | 封装第一个workflow | 用真实场景跑通+修正 | 48h陌生方向完整研究 |
| 竞品分析 | 知道要分析哪些维度 | 完成≥5家系统分析 | 能从竞品矩阵中提炼差异化机会 |
关键认知：工具不是列出来就完了——同一个工具在不同阶段的使用深度决定了你的能力边界。Phase 1的Figma和Phase 3的Figma是两种工具。判断标准：Phase 3结束时，你能否不查任何文档，用AI+工具链在48h内完成一个陌生方向的完整研究到商业框架？