20:"$Sreact.view_transition" 21:I[9754,["/_next/static/chunks/2t36f5p4pjzlb.js","/_next/static/chunks/1gyqeidjm5eoa.js","/_next/static/chunks/0_fjnxc4tt_l_.js","/_next/static/chunks/1ymt1shyhmu-4.js","/_next/static/chunks/3kv2zf0i7s2wc.js","/_next/static/chunks/1vs_3g_g75zmk.js","/_next/static/chunks/2g4dh802s8oz3.js","/_next/static/chunks/1bc3f0shukf1j.js","/_next/static/chunks/192kgs9v_t14j.js","/_next/static/chunks/0z6pw0v5c_lx5.js","/_next/static/chunks/08r60e6icmtkc.js","/_next/static/chunks/3trx6c0i7_x-3.js","/_next/static/chunks/40sro5bzp9bi_.js","/_next/static/chunks/1wgf3tk38y6cf.js"],"ProjectDetail"] 22:T4756, awesome-design-md · DESIGN.md 信号流档案

awesome-design.md · 信号流档案

73 份 DESIGN.md，
顺着一条信号流变成一种 UI。

这是一份从知名品牌设计系统里分析出来的 DESIGN.md 纯文本档案。把其中一份放进项目根目录，AI 代码代理就能读它、懂它，在不碰设计工具的情况下渲染出风格一致的界面。

73 份档案 → 一条信号流 → 一个系统▸

input · 73 files

DESIGN.md

纯文本 · 放进项目根目录

#22304a inkradius 8

agent

AI 代码代理

以这份文档为准生成一致界面

google-stitchvibe-coding

output · one system

与文档同一套色板与排版

design-tokensweight 700

73 份 → 一条信号流 → 一个系统▸

01 / SIGNAL

信号怎么走：一段纯文本，分三次换手。

stop 1 · DESIGN.md

一份 Markdown，不带任何二进制

DESIGN.md 是 Google Stitch 提出的纯文本设计系统文档：色板、字重、圆角，全用可读的 Markdown 写下来。它不需要 Figma 导出，也不需要 JSON 配置。

#22304a ink radius 8 weight 700

stop 2 · AGENT

代码代理把它变成生成指令

放进项目根目录之后，AI 代理把这段文本当作唯一的设计依据，在生成界面时逐条对照，而不是靠猜或靠默认风格。

google-stitch vibe-coding

stop 3 · UI

输出端只是把规范重排成界面

最远端出现的，是一个和这份文档对得上的界面：同一套色板、同一个排版节奏。视觉一致性，从源头就定下来了。

design-system design-tokens

02 / BANK

73 份里挑一份：这些品牌都有档案。

归档以品牌为条目，每个条目都带一组小的 token 证据：一段色板、一档字号、一档圆角。下面只是其中三类代表性档案。

AI 与 LLM 平台

把「大模型时代」的配色节奏压缩进一张文档——从 prompt 到 product 都遵循同一视觉语言。

design-systemgoogle-stitch

开发者工具与 IDE

编辑器里的工具链：高对比的深色墨 + 低饱和底色，让像素和断点读得清楚。

design-tokensvibe-coding

SaaS 与生产力

面向「开箱即用」的界面：冷纸底色做底，单一强调色收束操作，信息密度可控。

landing-pagefigma

03 / DROP-IN

三步，把档案放进你的项目。

挑一份。在归档里找到想对齐的品牌，把它的 DESIGN.md 复制进项目根目录。
交给代理。让 AI 代码代理以这份文件为设计依据，生成界面的骨架与样式。
对照微调。生成的界面自动带上同一套 token，你只需在细节处收尾。

全程不需要打开设计软件。规范以文本形式躺在代码仓库里，改一行、diff 一眼，整个团队的视觉起点就同步了。

这份档案是一份「活的参考」：品牌档案按提交、按议题持续维护，代理读到的始终是可以直接执行的最新文字。

input：一份 DESIGN.md → output：一种可持续的 UI。

给归档补一张品牌档案 awesome-design-md · 73 entries & counting

没有你要的那份 DESIGN.md？项目按公开站点分析来维护，现在已收录 73 份。你可以在仓库里提一个 issue，点名关注的品牌，归档会把它排进收集队列。

请求入口：GitHub → issues

23:T4753, awesome-design.md · A DESIGN.md signal-flow archive

awesome-design-md · signal-flow archive

73 DESIGN.md files.
One plain-text signal becomes a UI.

A curated set of DESIGN.md files analyzed from popular brand design systems. Drop one into your project root and let an AI coding agent read it, honor it, and render a matching interface without ever opening a design tool.

73 files → one signal → one system▸

input · 73 files

DESIGN.md

plain text · dropped into the project root

#22304a inkradius 8

agent

AI coding agent

builds the UI against that file as its source of truth

google-stitchvibe-coding

output · one system

the same palette and type rhythm as the document

design-tokensweight 700

73 files → one signal → one system

01 / SIGNAL

How the signal travels: a plain-text file, three exchanges.

stop 1 · DESIGN.md

Markdown only, no binaries

DESIGN.md is a plain-text design system document, a concept Google Stitch introduced: the palette, weights, and radii sit in readable Markdown. No Figma export, no JSON schema.

#22304a ink radius 8 weight 700

stop 2 · AGENT

A coding agent turns it into build instructions

Dropped into the project root, the agent treats the file as its only design reference and checks each choice against it, rather than guessing or falling back on defaults.

google-stitch vibe-coding

stop 3 · UI

Outputs just lay the spec back out as an interface

What arrives is an interface that answers to the document: the same palette, the same typographic rhythm. Visual consistency is settled at the source, not bolted on later.

design-system design-tokens

02 / BANK

Pick from seventy-three: these brands have entries.

The archive is organized by brand, and each entry carries a small run of token evidence: a swatch, a type size, a corner. Here are three representative entries from the collection.

AI & LLM platforms

The pacing of the model era squeezed into one document, from prompt to product on a single visual language.

design-systemgoogle-stitch

Developer tools & IDEs

The in-editor toolkit: high-contrast dark ink on a low-saturation ground so pixels and breakpoints read cleanly.

design-tokensvibe-coding

SaaS & productivity

Interfaces built to open-and-run: cool paper as ground, one accent to focus actions, density kept in check.

landing-pagefigma

03 / DROP-IN

Three steps to drop an entry into your project.

Pick one.Find a brand you want to align with, and copy its DESIGN.md into the project root.
Hand it to the agent.Let the coding agent build the skeleton and styles against that file as its single source of truth.
Refine against it.The generated UI shares the same tokens, so you only touch the finishing details.

No design app opens along the way. The spec lives in the repository as text, so one edit, one diff, and the whole team's visual starting point is back in sync.

This archive is a living reference: brand entries are maintained across commits and issues, so what the agent reads is always current, executable copy.

input: one DESIGN.md → output: a UI you can keep.

Add a brand entry to the archive awesome-design-md · 73 entries & counting

Don't see the DESIGN.md you need? The archive is maintained from public site analysis and now holds 73 entries. Open an issue in the repository naming the brand, and it moves onto the collection queue.

Request entry: GitHub → issues

24:T439,Token Circuit best expresses the project's actual mechanism: a plain-text DESIGN.md that flows through an AI agent and renders into consistent UI. That pipeline (input -> agent -> output) is the verified claim, unlike a static catalog (Archive Ledger) which foregrounds the finished list but not the transform, and unlike Card Index which is a selection metaphor rather than the drop-in mechanism. The flowband signature is derived from the input/output relationship (allowed as a derived visual, no fake product shots, no broken media since assetManifest is empty). Its section order is evidence-driven: explain DESIGN.md after the signal path rather than as a standard feature block. mobileTransformation is a true recomposition (horizontal ramp -> folded vertical trace), not column stacking. antiTemplateContext is empty for all three fingerprint signatures, so none collide with recent pages. This direction also maximally diverges from its own historical v1 seed (which was a warm specimen-grid catalogue), satisfying the historian's obligation to rebuild rather than rename.a:[["$","$20",null,{"enter":{"secondary-forward":"secondary-forward","secondary-back":"secondary-back-enter","default":"none"},"exit":{"secondary-forward":"secondary-forward","secondary-back":"secondary-back-exit","default":"none"},"update":{"secondary-forward":"secondary-forward","secondary-back":"secondary-back-update","default":"none"},"default":"none","children":["$","$L21","cmsn445t300031s16to3vv3e6:zh-CN:beautified",{"project":{"id":"cmsn445t300031s16to3vv3e6","slug":"voltagent-awesome-design-md","name":"awesome-design-md","description":"从知名品牌提取的 DESIGN.md 文件集合，供 AI 代理生成匹配 UI。","authorName":"voltagent","authorVerification":{"verified":false,"verifiedAt":null},"category":"development_tools","subcategory":"data_ai_tools","experienceUrl":"https://everyfeed.ai/","qualityScore":100,"featured":false,"officialSite":null,"views":{"original":{"available":true},"official":{"available":false,"reason":"disabled_by_policy"},"beautified":{"available":true,"reason":null},"defaultView":"beautified"},"beautifiedView":{"revisionId":"cmt2zh3ut01zs6271rluy1lx6","kind":"artifact","artifact":{"schemaVersion":"localized-static-html-v4","kind":"static_html","locales":["zh-CN","en"],"defaultLocale":"zh-CN","documents":{"zh-CN":"$22","en":"$23"},"designDirections":{"schemaVersion":"dodot-design-directions-v1","directions":[{"id":"dir-archive-ledger","name":"Archive Ledger","projectMetaphor":"A physical printing-office ledger that catalogues 73 design-system specimen cards, each card carrying its tokens (palette swatch, type ramp, corner, weight) as printed proof strips.","signatureVisual":"A ledger sheet of 73 slotted specimen cards; each card is a mini token-proof strip (single accent swatch, one type size specimen, radius/weight ticks) arrayed in a justified grid with colophon rules and folio numbers.","heroGeometry":"An offset folio column: oversized serif specimen heads a thin ruled ledger grid; hero reads as the opened catalogue with a marginal '73 ENTRIES' folio stub.","sectionSequence":["ledger-hero","ledger-legend","specimen-proof-grid","drop-in-notes","request-entry"],"surfaceModel":"Stock papers: ink-on-paper ledger, hairline rules, offset print bleeds, dry-stamp surfaces; no gloss, no shadow layering.","palette":"Warm cream paper background #f4efe4, ledger ink near-black #23201a, stationery red colophon #a23b2e, ash linen gray #6f6a60, hairlines #d9d1c0.","typography":"Editorial serif (Georgia/Songti SC) for folios and specimen heads; grotesque for body; mono tabular for token ticks and folio numbers.","desktopComposition":"Folio colophon bar; hero with marginal folio stub; the proof-grid shelf as the dominant middle band; legend + drop-in notes as two-column printed matter; request entry as a letterhead block.","mobileTransformation":"The proof grid re-justifies to a single stacked column; folio margins collapse into in-line labels; drop-in moves to a vertical numbered memo; request becomes a full-bleed letter sheet.","mediaStrategy":"No raster media; the printed proof-grid IS the derived visual, built from inline SVG/CSS token proofs; no product screenshots, no fake fax.","forbiddenPatterns":["no generic three metric cards","no fake browser/editor shell","no glass/gloss cards on rounded frosted surfaces","no decorative particle or glow field"],"compositionFingerprint":"ledger-folio-proof-grid: ruled specimen feed driven by token contents"},{"id":"dir-token-circuit","name":"Token Circuit","projectMetaphor":"A dry running trace of the drop-in mechanism: one DESIGN.md is a plain-text signal that flows through an AI agent and renders into a consistent UI on the far side.","signatureVisual":"A continuous tonal flowband: three labelled stops (DESIGN.md ▸ agent ▸ UI) connected by a trace of token stamps (palette dots, type marks, radius arcs) that re-compose over the run.","heroGeometry":"A horizontal pipeline ramp rising left-to-right with token stamps converging; the claim '73 files → one system' is set along the trace, not above it.","sectionSequence":["circuit-hero","signal-path","token-bank","drop-in","request"],"surfaceModel":"Engineering trace on drafting ground: plane surfaces with thin construction lines, flat tonal gradient bands, ruled connector traces; no gloss, no glow.","palette":"Cool drafting paper #eef1f4, deep indigo trace ink #22304a, signal teal accent #0e7c74, mineral gray #5c6470, construction hairlines #b9c2cc.","typography":"Monospace-first (tabular): trace labels and token stamps in mono; a clean grotesque for prose; no serif flourish.","desktopComposition":"Rising pipeline ramp as hero; signal-path strips each stage with token stamps; token-bank as a dense registry grid; drop-in as a two-column mech note; request as a terminal-styled but abstracted CTA.","mobileTransformation":"The pipeline re-composts from a horizontal ramp to a vertical folded trace (stops stack); token stamps inline into rows; registry collapses to a single compact column.","mediaStrategy":"No raster; the trace/flowband is a derived SVG relationship (input→process→output), not a product screenshot; no fake terminal window with fake logs.","forbiddenPatterns":["no three unrelated metric cards","no decorative gradient replacing content","no fake terminal/log/shell impersonation","no repeat feature-card wall"],"compositionFingerprint":"pipeline-tonal-flowband: input→agent→output token trace, not a staged hero card"},{"id":"dir-card-index","name":"Card Index","projectMetaphor":"A librarian's slotted index drawer: 73 physical brand cards, each one a Design Language card, queued to be pulled and slotted into a project to imprint its look.","signatureVisual":"A slotted index rack where individual brand cards (each a token-stamp card) slide in and one card is 'drawn' and enlarged to reveal its full token entry.","heroGeometry":"A drawer band of stacked card tabs along the left, one card pulled out and scaled to dominate the right two-thirds — a book-off-shelf reveal, not a centered headline.","sectionSequence":["index-hero","what-is-designmd","card-rows","slot-in","request"],"surfaceModel":"Dense layered cards with visible edges and tab pulls; slot grooves and drawer guides; micro-overlap depth, matte stock; no soft glass.","palette":"Warm mineral: cream linen #f2ecdf, leather-brown ink #3a2f26, brass pull accent #a97b2f, slate #5d5645, groove shadows #d8cfbe.","typography":"Distinctive grotesque for card names with a high-tracking tab label; brisk sans body; mono for token details.","desktopComposition":"Left tab-rail + pulled card hero; what-is as a single wide explainer; card-rows as tiered index; slot-in as a 3-step conveyor of pull→drop→render; request as an end-cap.","mobileTransformation":"Tab rail folds into a horizontal card carousel strip; pulled-card scales full width; the 3-step conveyor recasts as stacked numbered steps with a re-composed pull visual.","mediaStrategy":"No raster; the card-index rack is a derived SVG/CSS illustration of selection logic; no product screenshot.","forbiddenPatterns":["no centered slogan + three cards only","no frosted browser shell","no decorative glow","no cards-who-among-them wall without a mechanism"],"compositionFingerprint":"slotted-drawer-index: outer card tab + pulled full entry reveal, selection-led layout"}],"selectedDirectionId":"dir-token-circuit","selectionRationale":"$24"},"designBrief":{"schemaVersion":"dodot-design-brief-v1","selectedDirectionId":"dir-token-circuit","projectMetaphor":"A dry running trace of the drop-in mechanism: one DESIGN.md is a plain-text signal that flows through an AI agent and renders into a consistent UI on the far side.","signatureVisual":"A continuous tonal flowband: three labelled stops (DESIGN.md ▸ agent ▸ UI) connected by a trace of token stamps (palette dots, type marks, radius arcs) that re-compose over the run.","compositionFingerprint":"pipeline-tonal-flowband: input→agent→output token trace, not a staged hero card","heroGeometry":"A horizontal pipeline ramp rising left-to-right with token stamps converging; the claim '73 files → one system' is set along the trace, not above it.","sectionSequence":["circuit-hero","signal-path","token-bank","drop-in","request"],"surfaceModel":"Engineering trace on drafting ground: plane surfaces with thin construction lines, flat tonal gradient bands, ruled connector traces; no gloss, no glow.","palette":"Cool drafting paper #eef1f4, deep indigo trace ink #22304a, signal teal accent #0e7c74, mineral gray #5c6470, construction hairlines #b9c2cc.","typography":"Monospace-first (tabular): trace labels and token stamps in mono; a clean grotesque for prose; no serif flourish.","desktopComposition":"Rising pipeline ramp as hero; signal-path strips each stage with token stamps; token-bank as a dense registry grid; drop-in as a two-column mech note; request as a terminal-styled but abstracted CTA.","mobileTransformation":"The pipeline re-composts from a horizontal ramp to a vertical folded trace (stops stack); token stamps inline into rows; registry collapses to a single compact column.","mediaStrategy":"No raster; the trace/flowband is a derived SVG relationship (input→process→output), not a product screenshot; no fake terminal window with fake logs.","evidencePlan":["Roughly 73 curated DESIGN.md files feed the left input stop, tied to the repository's readme claim.","The middle stop is the plain-text-DESIGN.md -> AI-agent step, tied to the description 'drop one into your project and let coding agents generate a matching UI'.","The output stop ties the flowband to the verified claim that an AI agent renders a matching, consistent UI.","Keyword stamps (design-tokens, google-stitch, vibe-coding) annotate token-bank from the repository topics field.","No claim invents metrics beyond the stated 73; no pricing, testimonials, or logos are asserted."],"localeContract":{"zh-CN":"信号流主线 + 三条工作波段（DESIGN.md、AI 代理、UI），copy 按中文密度自然排布；段落更紧凑，章序与 en 保持一致。","en":"Same pipeline flowband + three status stages (DESIGN.md, agent, UI); copy keeps natural English density, text shorter; section order matches zh-CN."},"forbiddenPatterns":["no three unrelated metric cards","no fake terminal/log/shell impersonation","no decorative gradient or glow replacing content","no repeat feature-card wall","no generic browser/editor/dashboard shell"],"historicalReuse":{"sourceAssetId":"HEAD:deepseek-v1/voltagent-awesome-design-md","decision":"rebuild","rationale":"The v1 seed was a static warm-paper specimen-grid catalogue (archive-ledger grammar). It showed the list of 73 files but did not express the drop-in transform that is the project's real mechanism. Its HTML uses the old Anthropic-style v1 structure and content that must not be inherited as fact. Rebuilding onto a flowband lets the page convey how DESIGN.md becomes UI rather than merely re-labelling the old catalogue as V4.","reusedElements":["(concept) the '73 curated DESIGN.md files' as the concrete asset count","(derived idea) token-driven specimen thinking: each entry can still show tiny token stamps","(neutral palette ground) a low-saturation paper base, re-spun cool for the engineering trace"],"discardedElements":["the warm amber/cream specimen-grid signature and its section order","the archive-ledger hero and its centered serif headline structure","any v1 HTML markup, styling, or copy","the old 'request a DESIGN.md' wording where it implied unsupported claims"]}},"visualReview":{"schemaVersion":"dodot-automated-design-review-v1","status":"approved","summary":"页面忠实实现专属 Brief（dir-token-circuit 信号流 engineering-trace 隐喻）：body 配色 #eef1f4/#22304a/#0e7c74/#5c6470/#b9c2cc 与 brief palette 完全一致，五章 data-dodot-section 顺序 circuit-hero/signal-path/token-bank/drop-in/request 与 sectionSequence 逐项匹配，monospace-first 排版、hairline drafting 铺面、无 gloss/无 glow 均落地。signatureVisual（内联 SVG flowband：升起的 ramp 曲线连三 stop DESIGN.md→AI agent→UI，token 圆点沿 trace 收敛，显式标注 derived diagram, not a screenshot）真实存在于源码。手机端 @media(max-width:820px) 将 svg.flow 隐藏并以纵向折叠 .stops（三 card + .st-vert 斜向连接 + .st-claim）重构，属真重构而非简单单列堆叠。所有 73 数量/DESIGN.md 源于 Google Stitch/drop-in 机制/design-tokens·google-stitch·vibe-coding 关键词均有 material.json 的 readme/description/topics 证据；双语 5 章等价、文案自然。无回退到通用 Hero/三指标卡/feature-card wall/无依据设备壳/装饰渐变网格的迹象，无假控件（fakeControlCount=0）。唯一 minor 提示：SVG 内 font-family=\"var(--mono)\" 为 SVG presentation attribute，CSS 变量不解析，图表内文字字体可能回退为默认字体，属外观级风险，不影响七项检查通过。","checks":{"projectFit":{"passed":true,"evidence":"五个

的 data-dodot-section 为 circuit-hero/signal-path/token-bank/drop-in/request，与 brief sectionSequence 完全一致；:root 色板 --bg:#eef1f4/--ink:#22304a/--teal:#0e7c74/--gray:#5c6470/--hair:#b9c2cc 逐项对上 brief palette；mono-first flip、hairline/construction 铺面、无 gloss 无 glow 的 drafting ground 与 brief typography+surfaceModel 一致；hero 用升起 ramp 后置 claim '73 files → one signal → one system'，非居中口号。"},"evidenceBound":{"passed":true,"evidence":"73 份数量在 zh-CN h1/claim/token-bank h2/request 与 en 全程一致（均 73，无 '72' 笔误）；'DESIGN.md 是 Google Stitch 引入的纯文本设计文档'、'放入项目根目录后 AI 代理生成一致 UI' 均有 material.json summary.readme 证据；token-bank 的 tax-chip（google-stitch/vibe-coding/design-tokens/landing-page/figma）与 request '按公开站点分析维护、已收录 73 份、GitHub issue 收集' 均源自 repository topics + caveats，无虚构指标或伪测试数据；flowband 内 radius 8/weight 700 等 token 为派生示意印记，非对具体品牌的断言。"},"signatureVisual":{"passed":true,"evidence":"hero 内联 SVG .flow 真实存在于源码：升起 ramp 曲线连接三个 stop（DESIGN.md plain text→AI agent reads→UI 抽象框图），token 圆点收敛于 trace，图底显式标注 'flowband · derived diagram, not a screenshot'；属 brief 要求的派生式信号流关系图，非伪造产品截图或设备壳。QA 确认 hasImg=0、无外部请求，视觉纯本地构建。"},"mobileTransformation":{"passed":true,"evidence":"@media(max-width:820px) 中 svg.flow{display:none} 而 .stops{display:block}：横向 ramp 被真正重构为纵向折叠 trace，三张 .st-item 由 .st-vert 斜向连接符串联并以 .st-claim 收尾；同时 .signal/.drop/.bank 单列、.sec-head 换行，属 brief 要求的 recomposition（横向 ramp→纵向折叠 trace）而非仅列堆叠；.stops 在移动端 display:block 生效，非死代码。"},"localeParity":{"passed":true,"evidence":"zh-CN 与 en 均为 5 个 section、顺序与结构一致；h1/claim/token-bank/request 文案等价且各自自然（zh 紧凑压缩、en 自然英文密度），token stamps、folio、CGA 术语（73 files→one signal→one system）双语对仗；两版无 73 数量或事实差异，等价成立。"},"antiTemplate":{"passed":true,"evidence":"未回退通用居中 Hero（采用升起 pipeline ramp + 后置 claim）；token-bank 为带 palette chip 与 taxonomy chip 的代表性档案条目（类别源自 README headings），非无机制 feature-card wall，也非三指标数字卡；无伪造浏览器/编辑器/终端壳（UI stop 为抽象框图，request 为抽象 letterhead stamp）；linearGradient 仅用于 flowband 连接描边（内容承载），非装饰渐变替换内容；无玻璃/glow 卡片。"},"noFakeUi":{"passed":true,"evidence":"QA 报告四视口 fakeControlCount=0、emptyLinkCount=0、hasImg=0、brokenImageCount=0、无 iframe/script；request CTA 'GitHub → issues' 为指向真实行为（Open an issue in the repository）的抽象 letterhead stamp，非死按钮；flowband 内 UI 块为示意不具交互，无假控件。"}},"issues":[{"code":"svg-css-var-font","severity":"warning","locale":"all","description":"SVG 元素上 font-family=\"var(--mono)\" 属于 presentation attribute，浏览器不解析 CSS 自定义属性，图内 input/output 标签与 token 文字可能回退为默认字体，破坏 monospace-first 的预期外观。","repairInstruction":"将 SVG 内 font-family=\"var(--mono)\" 改为具体字体栈（如 'ui-monospace,SFMono-Regular,Menlo,monospace'），或在