EN
Figma Config

VS Code 团队亲授:把设计品味写进 agents.md 和 Skills,让 AI 原型真正像你的产品。

Best practices are trapped in your head and your AI has no idea ft. Harald Kirschner | Config 2026 · Harald Kirschner

21 min
AgentAI 编程ContextDesign-to-CodeEvalsAI 产品

全片 21 分钟·真正值得盯屏约 8 分钟·3 个必看点

橙色 = 推荐必看的 8 分钟其余读导览就够
逐段导览 · 7 段
  1. 0:12 3:20

    为什么规格文档输给了原型

    提出核心论点:规格没人读,AI 让原型足够快,会议可以围绕可感知的真实原型做决策;设计师、工程师、PM 全员用原型表达观点。

    VS Code 团队靠原型驱动的每日 check-in 从月发布提速到周发布——赢的不是工具数量,是上下文。

    纯口头论述铺垫背景,无关键画面,通勤听即可。▶ 跳到 0:12
    讲者 · Harald Kirschner
  2. 3:20 6:55

    演示:从想法到 agent 编排看板

    现场演示自定义 agent 把“如何管理多个 agent”的想法做成 Kanban 式编排看板原型,随后展示无设计约束时 AI 自带的“vibe-coded”审美如何覆盖产品身份。

    不加约束的 agent 会用渐变、亮色、大绿发光按钮的默认审美盖掉你的产品——看着酷但完全不像 VS Code。

    含两个 LLM 判定值得看的视觉时刻(4:51 演示流程、6:09 反面审美对比),必须亲眼看差异。▶ 跳到 3:20
    讲者 · Harald Kirschner
  3. 7:00 10:40

    三大构件:agents.md、Skills、Instructions

    拆解三种纯 Markdown 机制的加载方式:agents.md 常驻上下文顶端要保持最小化,Skills 按描述头渐进加载,Instructions 按文件路径触发。

    agents.md 里最值钱的是“原型思维”守则——明确即弃代码不做迁移兼容、不为上线过度设计,这些全是从 agent 反复犯错中迭代出来的。

    概念讲解为主、无演示画面,认真听原则本身即可。▶ 跳到 7:00
    讲者 · Harald Kirschner
  4. 10:40 12:51

    设计系统 skill:让原型 look right 又 feel right

    展示如何从 GitHub 最新设计主题提取 token、间距,配 Codicon 图标库、色板、字体层级和阴影半透明,做成一个够用的设计系统 skill。

    不必覆盖完整设计系统,图标语言是瞬间提升产品感的捷径。

    10:47 处有值得抽帧的画面:skill 生效前后的原型风格对比,看一眼胜过千言。▶ 跳到 10:40
    讲者 · Harald Kirschner
  5. 12:55 16:35

    分发与维护:skill 即基础设施

    讲 skill 的分发路径——repo 本身就是最小分发单位,跨团队用插件市场(开源的 VS Code Teamkit);并强调 skill 是被模型解释的 prompt,模型升级会让同一 skill 变好或变差。

    没有 eval 佐证的 skill 措辞修改只会陷入哲学争论——要像维护基础设施一样用 eval 维护 skill。

    以口头论述和幻灯要点为主,无现场演示,听懂“eval 维护”这层即可。▶ 跳到 12:55
    讲者 · Harald Kirschner
  6. 16:35 18:20

    给 agent 眼睛和用户人设

    演示 VS Code 内置浏览器让 agent 亲自操作所构建的应用并迭代,原生应用用 Xcode Build MCP 构建、启动、逐屏截图闭环;再给 agent 具体新用户人设或愿景文档,让它做残酷诚实的批评者。

    给 agent “眼睛”是面向用户产品的最有力投资——评估要超越“能不能用”,检验产品是否兑现承诺。

    16:43 处 agent 自主操作应用并附截图报告的画面是全片最有说服力的演示。▶ 跳到 16:35
    讲者 · Harald Kirschner
  7. 18:20 20:46

    产品大脑与三步行动

    把用户研究、原型、愿景汇入同一个 repo 构建“产品大脑”,每个原型用 design.md 沉淀对话中的方向修正与设计决策;结尾给出行动三步。

    起步只要三步:写 agents.md、为设计系统建 skill、持续迭代——最终界面不体现推理过程,design.md 让决策可阅读、可交接。

    收束性口头总结,无新画面,记住三步行动清单即可。▶ 跳到 18:20
    讲者 · Harald Kirschner