本文介绍了三种提升编码代理（Agentic）生产力的 Markdown 架构模式：AGENTS.md、DESIGN.md 和 SKILL.md。AGENTS.md 为代理提供项目全局指导，基准研究显示可减少 26% diff 大小、27% 耗时和 25% token 消耗，建议保持约 12 行简洁内容。DESIGN.md 由 Google 于 2026 年推出，通过描述性文字和 YAML 设计 token 固化设计系统，保证 UI 一致性。SKILL.md 提供可复用的任务流程指令，按需渐进加载以节省 token，且可复用于非编码业务场景。作者建议将规范纳入版本控制，像对待源码一样严格管理 Markdown，并警惕第三方 skill 的安全风险，从而规模化提升团队的智能体工作流效率。
文章针对 AI 编程生成的网页千篇一律（紫色渐变、圆角卡片、Inter 字体等）的问题，推荐四个工具：getdesign.md 提供现成网站的 DESIGN.md 设计参考，让 AI 按指定风格编写；libraries.dev 提供 UI 效果库，可直接复制 prompt 添加视觉组件；Impeccable 是项目完成后的设计审查 Skill，可对页面做 polish、audit、critique 等操作；OpenDesign 是本地优先的设计 Agent 工作空间，强调设计系统和资产复用。作者强调 vibe coding 不等于把审美外包给 AI，颜色、留白和取舍仍需人做决定。
作者整理了近一个月收藏和推荐的 Claude Agent Skills 资源合集。内容分为三大类：一是作者自研的开源 Skills（信息卡生成、品牌复刻 DESIGN.md、SVG 手绘效果）；二是 UI/UX 设计类 Skills，包括设计工程师审美经验、去 AI 味前端设计品味、Remotion Skills 2.0 及 Atlassian 对 DESIGN.md 的实测等；三是 Skills 构建与方法论，涵盖 33 页完整构建指南及中文翻译、Google Research 的 WikiSkill、Warp 的自我改进 Agent 与 Skill Doctor 等。最后还推荐了精选单点 Skills，如去 AI 味 Top 10、Cursor 代码质量审查、show-me 图示 Skill、Unslop 写作优化等。
文章以 Atlassian 与 Vercel 的实践案例为切入点，探讨 AI Agent 在产品设计任务中的上下文工程问题。对比实验显示，单一 design.md 文件在原型生成等轻量场景中表现出色，但在真实工程环境中会导致 token 消耗激增、耗时更长且不稳定。文章提出以代码库访问权限为分岔点的两条路径：仓库外的轻量三层支撑体系与仓库内的完整工程 Harness。随后系统阐述了设计上下文的五层架构——意图层、真源层、披露层、约束层和反馈层，并详细说明搭建流程：建立评估基线、编写最小意图文件、沉淀结构化真源等，强调机械可判定规则应交由工具链执行，语言模型只处理模糊判断。
作者以截图美化工具 RicoScreenshot 为案例，完整拆解了 Vibe Coding 的六步工作流：读懂项目、建立视觉规范、规划功能、开发实现、视觉交互调整、测试上线。文章强调每个环节做正确的事：先用 AGENTS.md 让 AI 理解项目架构，用 DESIGN.md 统一视觉规则，用 TODO.md 管理需求和进度；开发阶段一次只做一个功能，并重视亲自使用后的体验判断。该流程基于开源项目 image-beautifier 二次开发，纯前端实现，适合作为新手的第一次完整项目练习。
作者开源了 RICOUI DESIGN，一个基于 DESIGN.md 的设计系统工作台。DESIGN.md 是一种结构化 Markdown 文档，集中记录品牌的颜色、字体、间距、组件规则与设计约束，人和 AI 都能读取。工作台支持创建、编辑、预览 DESIGN.md，浏览内置品牌设计参考库，可通过 AI 从公开网站生成初稿，并将文档派生为 Design Tokens、CSS 和 ZIP 供前端与 AI 工具使用。文章详细介绍了 DESIGN.md 的结构约定、从品牌参考到自有设计库的使用流程、AI 生成与安全边界、派生检查机制及云端存储方案，强调以 DESIGN.md 作为唯一源文件维护设计规范。
文章介绍 Vercel 如何用 design.md 文件、CSS 样式表和评测闭环，解决 AI Agent 生成页面总「差一点」、需要反复人工修整的问题。核心方法是把工作拆成三层：design.md 写设计判断（读者、信息层级、拒绝的套路），CSS 承接字号、间距、表格等机械性版式约束且不占模型上下文，评测闭环把每次返工转化为可复查的规则。作者强调规则要从模糊感觉翻译成可观察动作，如「别丑」改为「表格全宽」。测试显示公开场景下机械故障从 91 次降到 39 次，约少 57%。建议从一类高频产物入手，把高频修改沉淀为规则，逐步减少返工。
文章探讨 AI 做设计时“形似神不似”的问题，指出症结在于设计背后的“为什么”没有被写进 AI 可读的上下文。作者拆解了多家硅谷大厂的实践：Vercel 通过 200 多轮评估循环筛选规则，用 design.md 使视觉错误减少 57%；Google 开源了 Stitch 的 DESIGN.md 规范；Atlassian 实测发现 DESIGN.md 适合原型和定制场景，生产环境用 MCP 更省更准；Anthropic 的 Claude Design 则反向从代码库自动提取设计系统。社区还把 60+ 大厂风格反向工程成 design.md。文章认为设计系统正被 AI 重写，并给出五条落地建议。
文章介绍了 Google 开源的 DESIGN.md 标准，通过将设计系统的核心元素结构化，解决了 AI 生成 UI 时的一致性痛点。结合 Agent Skills，创业者可快速建立统一的设计语言，应用于官网、App、PPT 等多个触点，在 1 小时内大幅提升项目的视觉质感，使其具备独角兽公司的专业外观。
