<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />
    
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({id:"KOVuQNxjiFaIjm3S",ck:"KOVuQNxjiFaIjm3S"})</script>


<script async src="https://www.googletagmanager.com/gtag/js?id=G-KH9TCFF8QG"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-KH9TCFF8QG');
</script>


<script defer src="https://cloud.umami.is/script.js" data-website-id="8c1bd81f-f254-48e6-9111-f0a0ee3f57da"></script>



    
    <title>DESIGN.md - Hi, I&#39;m 5key</title>
    
    
    <meta name="author" content="5key">
    <link rel="canonical" href="https://www.thefivekey.com/tags/design.md/">

    
    <meta property="og:site_name" content="Hi, I&#39;m 5key">
    <meta property="og:title" content="DESIGN.md">
    <meta property="og:description" content="深入探索设计系统、UX 设计与产品管理。二十多年互联网产品和设计经验，现在用商业视角重新理解设计。">
    <meta property="og:url" content="https://www.thefivekey.com/tags/design.md/">
    <meta property="og:locale" content="zh_CN">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://www.thefivekey.com/images/logo.png">

    
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@5key">
    <meta name="twitter:creator" content="@5key">
    <meta name="twitter:title" content="DESIGN.md">
    <meta name="twitter:description" content="深入探索设计系统、UX 设计与产品管理。二十多年互联网产品和设计经验，现在用商业视角重新理解设计。">
    <meta name="twitter:image" content="https://www.thefivekey.com/images/logo.png">

    

    

    
    
    <link rel="icon" type="image/png" href="/favicon.png">
    <link rel="shortcut icon" href="/favicon.png">
    
    
    <link rel="icon" type="image/png" href="/favicon.png" sizes="192x192">
    
    
    <link rel="apple-touch-icon" sizes="180x180" href="/favicon.png">
    

    <link rel="stylesheet" href="/css/bundle.min.3d8d808aad5de873a97844f02b71949a4d7524166b9cc4df8ab848b33c6db6e0.css" integrity="sha256-PY2Aiq1d6HOpeETwK3GUmk11JBZrnMTfirhIszxttuA=">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;family=Noto&#43;Serif&#43;SC:wght@400;500;700&amp;display=swap" media="print" onload="this.media='all';this.onload=null;">
    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;family=Noto&#43;Serif&#43;SC:wght@400;500;700&amp;display=swap"></noscript>
    
    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
    <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" /></noscript>
    

    
    

    
    <link rel="alternate" type="application/atom+xml" title="Hi, I&#39;m 5key" href="/atom.xml">
    
    <link rel="alternate" type="application/atom+xml" href="https://www.thefivekey.com/tags/design.md/atom.xml" title="Hi, I'm 5key" />
    
</head>

<body class="max-width mx-auto px3">
    <div id="header-post">
  <a id="menu-icon" href="#" aria-label=""><i class="fa-solid fa-bars fa-lg"></i></a>
  <a id="menu-icon-tablet" href="#" aria-label=""><i class="fa-solid fa-bars fa-lg"></i></a>
  <a id="top-icon-tablet" href="#" aria-label="" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');" style="display:none;"><i class="fa-solid fa-chevron-up fa-lg"></i></a>
  <span id="menu">
    <span id="nav">
    </span>
    <br/>
    <span id="actions">
      <ul>
        <li><a class="icon" aria-label="" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fa-solid fa-chevron-up" aria-hidden="true" onmouseover="$('#i-top').toggle();" onmouseout="$('#i-top').toggle();"></i></a></li>
        <li><a class="icon" aria-label="" href="#"><i class="fa-solid fa-share-alt" aria-hidden="true" onmouseover="$('#i-share').toggle();" onmouseout="$('#i-share').toggle();" onclick="$('#share').toggle();return false;"></i></a></li>
      </ul>
      <span id="i-prev" class="info" style="display:none;"></span>
      <span id="i-next" class="info" style="display:none;"></span>
      <span id="i-top" class="info" style="display:none;"></span>
      <span id="i-share" class="info" style="display:none;"></span>
    </span>
    <br/>
    <div id="share" style="display: none">
      

<ul>
  <li><a class="icon" href="http://www.facebook.com/sharer.php?u=https%3a%2f%2fwww.thefivekey.com%2ftags%2fdesign.md%2f"><i class="fab fa-facebook" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://twitter.com/share?url=https%3a%2f%2fwww.thefivekey.com%2ftags%2fdesign.md%2f&text=DESIGN.md"><i class="fab fa-twitter" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.linkedin.com/shareArticle?url=https%3a%2f%2fwww.thefivekey.com%2ftags%2fdesign.md%2f&title=DESIGN.md"><i class="fab fa-linkedin" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://pinterest.com/pin/create/bookmarklet/?url=https%3a%2f%2fwww.thefivekey.com%2ftags%2fdesign.md%2f&is_video=false&description=DESIGN.md"><i class="fab fa-pinterest" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=DESIGN.md&body=Check out this article: https%3a%2f%2fwww.thefivekey.com%2ftags%2fdesign.md%2f"><i class="fa-solid fa-envelope" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://getpocket.com/save?url=https%3a%2f%2fwww.thefivekey.com%2ftags%2fdesign.md%2f&title=DESIGN.md"><i class="fab fa-get-pocket" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://reddit.com/submit?url=https%3a%2f%2fwww.thefivekey.com%2ftags%2fdesign.md%2f&title=DESIGN.md"><i class="fab fa-reddit" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.stumbleupon.com/submit?url=https%3a%2f%2fwww.thefivekey.com%2ftags%2fdesign.md%2f&title=DESIGN.md"><i class="fab fa-stumbleupon" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://digg.com/submit?url=https%3a%2f%2fwww.thefivekey.com%2ftags%2fdesign.md%2f&title=DESIGN.md"><i class="fab fa-digg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.tumblr.com/share/link?url=https%3a%2f%2fwww.thefivekey.com%2ftags%2fdesign.md%2f&name=DESIGN.md"><i class="fab fa-tumblr" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://news.ycombinator.com/submitlink?u=https%3a%2f%2fwww.thefivekey.com%2ftags%2fdesign.md%2f&t=DESIGN.md"><i class="fab fa-hacker-news" aria-hidden="true"></i></a></li>
</ul>

    </div>
  </span>
</div>

    <div class="content index py4 ">
        
<div id="archive">
  <a class="post-back-home" href="/">&larr; BACK TO HOME</a>
  <ul class="post-list">
        <li class="post-year"><h2>2026</h2></li>
      <li class="post-item">
        <div class="meta">
          <time datetime="2026-04-19T00:00:00Z">2026-04-19</time>
        </div>
        <span><a href="/design-system-as-markdown/">Google DESIGN.md 实践：把设计系统写成 AI 能读的 Markdown</a></span>
      </li>
  </ul>
  

</div>

        <div id="footer-post-container">
  <div id="footer-post">
    <div id="nav-footer" style="display: none">
      <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/archives/">Articles</a></li>
          <li><a href="/premium-design-subscription/">Subscription</a></li>
          <li><a href="/tags/">Tags</a></li>
          <li><a href="/about-5key/">About</a></li>
      </ul>
    </div>
    <div id="share-footer" style="display: none">
      

<ul>
  <li><a class="icon" href="http://www.facebook.com/sharer.php?u=https%3a%2f%2fwww.thefivekey.com%2ftags%2fdesign.md%2f"><i class="fab fa-facebook" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://twitter.com/share?url=https%3a%2f%2fwww.thefivekey.com%2ftags%2fdesign.md%2f&text=DESIGN.md"><i class="fab fa-twitter" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.linkedin.com/shareArticle?url=https%3a%2f%2fwww.thefivekey.com%2ftags%2fdesign.md%2f&title=DESIGN.md"><i class="fab fa-linkedin" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://pinterest.com/pin/create/bookmarklet/?url=https%3a%2f%2fwww.thefivekey.com%2ftags%2fdesign.md%2f&is_video=false&description=DESIGN.md"><i class="fab fa-pinterest" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=DESIGN.md&body=Check out this article: https%3a%2f%2fwww.thefivekey.com%2ftags%2fdesign.md%2f"><i class="fa-solid fa-envelope" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://getpocket.com/save?url=https%3a%2f%2fwww.thefivekey.com%2ftags%2fdesign.md%2f&title=DESIGN.md"><i class="fab fa-get-pocket" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://reddit.com/submit?url=https%3a%2f%2fwww.thefivekey.com%2ftags%2fdesign.md%2f&title=DESIGN.md"><i class="fab fa-reddit" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.stumbleupon.com/submit?url=https%3a%2f%2fwww.thefivekey.com%2ftags%2fdesign.md%2f&title=DESIGN.md"><i class="fab fa-stumbleupon" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://digg.com/submit?url=https%3a%2f%2fwww.thefivekey.com%2ftags%2fdesign.md%2f&title=DESIGN.md"><i class="fab fa-digg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.tumblr.com/share/link?url=https%3a%2f%2fwww.thefivekey.com%2ftags%2fdesign.md%2f&name=DESIGN.md"><i class="fab fa-tumblr" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://news.ycombinator.com/submitlink?u=https%3a%2f%2fwww.thefivekey.com%2ftags%2fdesign.md%2f&t=DESIGN.md"><i class="fab fa-hacker-news" aria-hidden="true"></i></a></li>
</ul>

    </div>
    <div id="actions-footer">
        <a id="menu" class="icon" href="#" onclick="$('#nav-footer').toggle();return false;"><i class="fa-solid fa-bars fa-lg" aria-hidden="true"></i> </a>
        <a id="share" class="icon" href="#" onclick="$('#share-footer').toggle();return false;"><i class="fa-solid fa-share-alt fa-lg" aria-hidden="true"></i> </a>
        <a id="top" style="display:none" class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fa-solid fa-chevron-up fa-lg" aria-hidden="true"></i> </a>
    </div>
  </div>
</div>

        <footer id="footer">
  <div class="footer-left">
     &copy;
      2022-2026
    
    5key
  </div>
</footer>

    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" defer></script>
    
    <script src="/js/main.min.js" defer></script>
</body>
</html>
