中文
Figma Config

Straight from the VS Code team: write your design taste into agents.md and Skills so AI prototypes actually look like your product.

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

21 min
AgentAI CodingContextDesign-to-CodeEvalsAI Product

21 min total·Actually worth watching closely: ~8 min·3 must-watch clips

Orange = the 8 minutes worth watchingFor the rest, the guide is enough
Segment guide · 7 segments
  1. 0:12 3:20Listen

    Why specs lost to prototypes

    Lays out the core argument: nobody reads the spec, AI made prototypes fast enough that meetings can decide around something tangible and real, and designers, engineers and PMs all now use prototypes to make their point.

    Prototype-driven daily check-ins took the VS Code team from a monthly to a weekly release cycle — what wins isn't the number of tools, it's context.

    Pure talk, setting up the premise. Nothing to see; fine to listen to on a commute.▶ Jump to 0:12
    Speaker · Harald Kirschner
  2. 3:20 6:55Watch

    Demo: from an idea to an agent orchestration board

    A live run turning the idea of managing multiple agents into a Kanban-style orchestration board prototype, then showing how AI's built-in vibe-coded taste overwrites product identity when nothing constrains it.

    An unconstrained agent buries your product under its default look — gradients, light colors, big glowing green buttons. It looks cool, and nothing like VS Code.

    Two visual moments flagged as worth watching (4:51 the demo run, 6:09 the counter-example). You have to see the difference.▶ Jump to 3:20
    Speaker · Harald Kirschner
  3. 7:00 10:40Listen

    The three building blocks: agents.md, Skills, instructions

    Breaks down how three plain-Markdown mechanisms get loaded: agents.md stays top of mind in context and therefore stays minimal, Skills load progressively off their description header, instructions trigger by file path.

    The most valuable thing in agents.md is the prototyping-mindset rules — throwaway code, no migrations or compatibility, no over-engineering for shipping — all of it accumulated from watching the agent get it wrong.

    Conceptual, no demo footage. Just listen for the principles themselves.▶ Jump to 7:00
    Speaker · Harald Kirschner
  4. 10:40 12:51Watch

    The design-system skill: look right and feel right

    Shows how tokens and spacing were extracted from the latest design theme on GitHub, then paired with the Codicon library, the color palette, type hierarchy, shadows and translucency into a skill that's good enough.

    It doesn't have to cover the whole design system — the icon language is the shortcut to instant product feel.

    Worth a frame grab around 10:47: prototypes before and after the skill kicks in. One look beats any description.▶ Jump to 10:40
    Speaker · Harald Kirschner
  5. 12:55 16:35Listen

    Distribution and upkeep: skills are infrastructure

    Covers how skills spread — the repo is the smallest unit of distribution, plugin marketplaces (the open-source VS Code Teamkit) carry them across teams — and stresses that a skill is a prompt interpreted by a model, so an upgrade can make the same skill better or worse.

    Rewording a skill with no evals behind it just becomes a philosophical argument — maintain skills with evals, like infrastructure.

    Mostly spoken argument and slide points, no live demo. Getting the eval-maintenance idea is enough.▶ Jump to 12:55
    Speaker · Harald Kirschner
  6. 16:35 18:20Watch

    Giving the agent eyes and a user persona

    Demos the browser built into VS Code letting the agent use the app it built and iterate, plus Xcode Build MCP closing the loop for native apps — build, launch, screenshot screen by screen. Then gives the agent a specific new-user persona or the vision doc and asks it to be a brutally honest critic.

    Giving the agent eyes is the highest-leverage investment for a user-facing product — evaluation has to go past 'does it work' to whether the product delivers on its promise.

    Around 16:43, the agent driving the app on its own and reporting back with screenshots is the most convincing demo in the talk.▶ Jump to 16:35
    Speaker · Harald Kirschner
  7. 18:20 20:46Listen

    The product brain and three steps to start

    Pulling user research, prototypes and vision into one repo to build a product brain, with each prototype keeping a design.md that captures the course corrections and design decisions made in conversation. Closes with three steps.

    Three steps to start: write agents.md, build a skill for your design system, keep iterating. The final UI never shows the reasoning — design.md is what makes those decisions readable and handoff-ready.

    A closing verbal summary with no new footage. Just take away the three-step list.▶ Jump to 18:20
    Speaker · Harald Kirschner