1. 项目概述从任意URL提取设计系统的智能工具最近在探索如何将AI Agent的能力更深度地融入设计工作流时我遇到了一个非常有意思的开源项目getdesign。简单来说它是一个“按需生成设计系统”的工具。你只需要给它一个网站的URL它就能分析这个网站的实际CSS然后生成一份结构完整、可直接用于生产的design.md文件。这份文件包含了色彩体系、字体排版、组件规范、布局网格、阴影与深度、动效规则、响应式规则甚至还有一个专门用于指导AI Agent的提示词指南。这听起来可能有点像一些设计稿转代码的工具但它的核心逻辑恰恰相反它是从真实、在线的产品代码中逆向提取出成体系的设计规范。对于我这样经常需要参考竞品设计、快速搭建新项目设计系统或者希望将现有网站的设计资产文档化的开发者来说这无疑是一个极具潜力的效率工具。更吸引我的是它并非基于AI的“想象”或“猜测”而是扎根于网站实际的CSS代码这意味着提取出的规范具有极高的准确性和可落地性。目前getdesign主要提供了两种使用方式一个已经实现的Web应用界面以及一个可以集成到各类AI编码助手如Claude Code、Cursor、Codex中的Agent Skill。其长远规划还包括独立的HTTP API、命令行工具和TypeScript SDK展现了一个相当清晰的产品化路径。在接下来的内容里我将结合自己的实践深入拆解这个项目的技术架构、核心实现逻辑并分享如何将其能力整合到你自己的工作流中。2. 核心思路与技术选型解析2.1 为什么选择“逆向提取”而非“正向生成”在接触getdesign之前市面上已有不少“设计系统生成器”但它们大多是基于一套预设的规则或模板或者让AI根据描述“生成”一个系统。这类工具的问题在于生成的结果往往与目标产品的实际视觉和交互体验存在“割裂感”。你可能会得到一个理论上很漂亮、很规范的系统但它无法完美复现目标网站那种独特的“味道”和细节。getdesign选择了一条更务实、也更困难的路逆向工程。它的工作起点是目标网站最终渲染到浏览器里的、实实在在的CSS。这样做有几个显著优势真实性提取出的色彩、字体大小、间距、阴影等就是用户实际看到的数值避免了主观臆断和偏差。完整性一个成熟网站的设计系统往往散落在数百个CSS规则中。手动收集整理耗时耗力且易遗漏。自动化工具可以无差别地扫描所有样式确保覆盖全面。可追溯性由于结果源于实际代码开发者可以轻松地在生成的design.md和网站的CSS文件之间建立映射方便后续的验证和迭代。这个思路决定了其技术实现的核心必然是CSS解析与语义化分析。2.2 技术栈深度剖析现代全栈开发的组合拳浏览getdesign的仓库你会发现它采用了一套非常现代且高效的技术栈这与其追求快速迭代和良好开发者体验的目标是吻合的。运行时与包管理Bun。项目明确要求 Bun ≥ 1.3。Bun 不仅仅是一个更快的 npm 替代品它内置了 TypeScript/JSX 转译器、测试运行器、打包工具并且兼容绝大多数 Node.js API。对于getdesign这种可能涉及大量文件 I/O读取CSS、网络请求抓取URL和数据处理的任务Bun 在启动速度和执行效率上的优势非常明显。选择 Bun 也表明了团队对开发工具链性能的重视。前端框架Next.js 15 (App Router)。Web 应用界面使用 Next.js 构建。Next.js 提供了服务端渲染、API路由、文件系统路由等开箱即用的能力非常适合快速构建一个包含展示页面和后台处理功能的单页应用。使用最新的 App Router 也意味着项目在利用 React 最新的并发特性。全栈框架与后端Convex。这是一个非常关键且有趣的选择。convex/目录存放了后端逻辑。Convex 是一个将数据库、实时同步、服务器函数和文件存储整合在一起的开发平台。它允许你使用 TypeScript 编写后端逻辑称为“queries”和“mutations”并自动处理数据同步到前端。对于getdesign的 Web 应用来说Convex 可以轻松管理“等待列表”的提交、用户任务队列未来甚至可以用于管理设计系统的分析任务状态实现实时进度更新。它简化了传统前后端分离架构中的大量样板代码。项目架构与构建Turborepo。项目采用 Monorepo 结构使用 Turborepo 进行管理。这允许它将 Web 应用、未来计划的 CLI、SDK 以及共享的配置和工具包放在同一个仓库中方便代码共享和依赖管理。Turborepo 的缓存机制能极大加速跨项目的构建和测试过程。核心语言TypeScript。贯穿前后端和所有工具包。在解析CSS、定义数据结构这种复杂场景下TypeScript 的静态类型检查能有效减少运行时错误提高代码的可维护性。分发与集成skills.sh。这是 Vercel Labs 推出的一个用于分发 AI Agent 技能Skills的平台。getdesign将其核心的“分析URL并生成设计文档”的能力封装成了一个独立的 Skill。开发者可以通过npx skills add命令将这个 Skill 安装到支持的 AI 编码助手中从而在编码环境中直接调用getdesign的能力。这是一种非常巧妙的、低摩擦的产品分发方式。实操心得技术选型的启示从这个技术栈可以看出项目的选型紧紧围绕着“开发者体验”和“快速原型验证”。Bun Next.js Convex 的组合能让一个很小的团队在极短时间内搭建起一个功能完整、体验不错的全栈应用。而通过 skills.sh 分发 Agent Skill则是一种近乎零成本的获取早期用户和反馈的途径。如果你也在启动一个工具类产品这种“轻量核心 多端触达”的思路非常值得借鉴。3. 核心实现逻辑与实操拆解虽然仓库中 Web 应用是主要实现但其最核心、最通用的能力——CSS分析与设计系统提取——必然封装在一个可复用的包或函数中。我们可以结合项目文档和代码结构推断出其核心工作流程。3.1 设计系统提取的完整工作流一个设计系统提取任务大致会经历以下几个步骤URL 获取与页面抓取工具首先需要访问用户提供的 URL。这里不能简单使用fetch获取 HTML因为许多现代网站的内容是客户端渲染的。因此很可能需要借助一个无头浏览器如 Puppeteer 或 Playwright来加载页面确保所有 JavaScript 执行完毕CSS 完全加载。CSS 样式收集页面加载完成后通过浏览器提供的 API如document.styleSheets获取页面中所有生效的样式表包括内联样式、style标签和外部链接的 CSS 文件。这一步需要处理跨域样式表可能带来的限制。CSS 规则解析与过滤收集到的 CSS 规则是原始且庞大的。接下来需要解析这些规则提取出我们关心的属性。一个设计系统主要关注以下几类属性色彩color,background-color,border-color,fill,stroke等。字体与排版font-family,font-size,font-weight,line-height,letter-spacing。间距与尺寸margin,padding,width,height,gap, 以及像1rem,0.5em这样的相对单位。边框与圆角border,border-radius。阴影与滤镜box-shadow,text-shadow,backdrop-filter。布局display,flex,grid,position等。动效transition,animation相关的属性。语义化聚类与归纳这是最复杂的一步。我们得到的是一堆零散的属性值比如几十种不同的蓝色色值、十几种字体大小。工具需要对这些值进行聚类和归纳识别出哪些是“主色”哪些是“中性色”哪些是“标题字体大小”哪些是“正文字体大小”。这通常需要设定一些启发式规则例如色彩将相近的 HEX/RGB 值聚类出现频率最高的可能是主色系其次可能是辅助色或强调色。同时需要识别出色彩的使用场景文本色、背景色、边框色。间距将所有的margin、padding值收集起来通常会形成一个基于某个基数如4px,0.25rem的刻度尺。工具需要找出这个基数并将所有间距映射到对应的刻度上如xs: 4px,sm: 8px,md: 16px。字体根据font-size和font-weight的组合以及选择器的语义是否包含h1-h6归纳出标题层级和正文字体样式。结构化文档生成将聚类归纳后的结果按照design.md预设的9个部分调色板、字体排版、组件、布局、深度、动效、响应式、图标、Agent提示指南进行组织并格式化为 Markdown 文档。Agent 提示指南生成这是getdesign的一个亮点。它不仅仅输出设计参数还会生成一段指导 AI Agent如 Claude、GPT如何运用这套设计系统的提示词。例如“本设计系统采用主色#0066CC用于主要按钮和重要链接。标题使用字体Inter层级如下h1 使用2rem bold...” 这使得 AI 在后续的代码生成或设计建议中能保持风格一致性。3.2 Web 应用界面实现浅析位于apps/web的 Next.js 应用是目前的主要交互界面。根据其描述它可能包含Landing Page产品介绍和功能展示。/design展示页可能是一个展示由getdesign生成的、某个知名网站设计系统的示例页面用于直观呈现工具的输出能力。Waitlist API Route一个 Next.js API 路由用于处理用户提交邮箱加入等待列表的请求。这个路由很可能会将数据提交到 Convex 的后端 mutation 中进行存储。其交互流程可能是用户在输入框粘贴 URL - 前端调用一个服务端函数 - 该函数触发无头浏览器执行上述1-6步 - 将生成的design.md内容返回并展示给用户或提供下载。3.3 Agent Skill 的实现与使用这是目前最“可用”的部分。Skill 的代码位于skills/getdesign目录。根据 skills.sh 的规范一个 Skill 通常包含skill.json技能的定义文件描述了技能的名称、描述、输入参数、所需的工具权限如网络访问、文件写入等。核心逻辑脚本当 Agent 调用此技能时执行的代码。安装后当你在 Claude Code 或 Cursor 中输入指令如“提取cursor.com的设计系统到design.md”Agent 会识别出这是一个getdesign技能任务。调用该技能并传入 URL 参数。技能内部执行分析逻辑可能直接调用项目核心的提取函数库。利用 Agent 自身被授权的WebFetch或类似工具获取页面内容再利用Write工具将生成的 Markdown 写入到你指定的文件。关键点在于Skill 的执行环境是你的本地机器或AI助手的沙箱环境。它不需要连接getdesign的官方服务器所有计算都发生在本地这保证了隐私性和速度。技能本身只是一个封装了核心逻辑的“插件”。注意事项技能执行的上下文当你使用npx skills add安装技能时本质上是在你的 AI 助手配置目录中添加了一个技能定义。技能的具体执行代码可能需要从网络下载或已打包在技能包中。确保你信任该技能的来源因为它将在你的环境中运行并可能访问网络和文件系统。4. 本地开发环境搭建与运行指南如果你想深入探索代码甚至进行二次开发以下是搭建本地环境的详细步骤。4.1 环境准备与依赖安装首先确保你的系统满足前置条件Bun: 版本需 ≥ 1.3。你可以从 bun.sh 官网下载安装。在终端运行bun --version检查。Node.js: 版本需 ≥ 20。作为备选或某些工具的需要。可使用nvm管理多个Node版本。# 克隆项目代码到本地 git clone https://github.com/MohtashamMurshid/getdesign.git cd getdesign # 使用 Bun 安装所有依赖包括根目录和所有workspace的依赖 bun installbun install会读取根目录的package.json和各个子包的package.json利用 Workspace 特性一次性安装所有依赖这比传统的在每个包内分别执行npm install要高效得多。4.2 启动开发服务器项目的主要功能目前集中在 Web 应用。# 进入 Web 应用目录 cd apps/web # 启动 Next.js 开发服务器 bun run dev执行成功后终端会输出类似➜ Local: http://localhost:3000的信息。在浏览器中打开此链接即可看到getdesign的本地运行界面。4.3 探索项目结构在根目录下你可以看到如下结构这有助于理解项目布局apps/web/: 核心的 Next.js 前端应用。convex/: Convex 后端函数、数据模型定义和数据库配置。你需要按照 Convex 的指引设置项目ID和部署密钥才能完全运行后端功能。packages/: 包含多个子包。cli/,sdk/: 目前是占位符为未来的命令行工具和 TypeScript SDK 预留位置。config/,types/,tools/: 可能存放共享的 TypeScript 配置、类型定义和内部工具函数。skills/getdesign/: 独立的 Agent Skill 包其结构应遵循 skills.sh 的规范。4.4 运行 Agent Skill 本地测试如果你想测试或修改 Skill可以进入其目录cd skills/getdesign查看其中的skill.json和入口脚本可能是index.js或index.ts。skills.sh 可能提供了本地测试技能的方法通常需要链接到某个AI助手的开发模式具体需参考 skills.sh 的文档。实操心得Monorepo 开发体验在getdesign这样的 Turborepo 项目中如果你修改了packages/types中的某个共享类型然后回到apps/web开发Turborepo 的缓存机制可能会因为依赖关系而自动触发类型检查或构建。为了获得最佳体验你可以在根目录运行bun run dev如果根package.json中定义了该脚本或者使用turbo run dev来并行启动所有需要开发监听的子包。5. 潜在应用场景与扩展思路getdesign的核心价值在于“设计规范的自动化提取与文档化”。基于此我们可以设想出许多实用的场景和未来的扩展方向。5.1 对开发者与设计师的实际用途竞品分析与设计审计当你看到一个设计精良的网站时无需手动在开发者工具中逐个拾取颜色和计算间距。直接使用getdesign几分钟内就能获得一份结构化的设计规范文档极大提升了分析效率。遗留项目设计系统重建很多老项目没有明确的设计系统样式散乱。将此工具指向项目的生产环境地址可以快速生成一份当前状态的“设计规范基线”作为后续重构和统一设计的起点。保障设计一致性在团队中可以将此工具集成到CI/CD流程中。定期对 staging 或 production 环境进行设计系统提取并与一份基准规范进行对比自动检测是否有不符合规范的样式被引入。快速启动新项目找到一款你欣赏的产品设计用getdesign提取其系统然后基于此生成的design.md利用其附带的 Agent 提示指南让 AI 助手帮你快速搭建起新项目的UI组件库或页面模板。5.2 技术上的扩展可能性输出格式多样化目前输出是design.md。未来完全可以扩展支持JSON、YAML甚至直接生成对应设计工具的配置文件如Figma Tokens的json格式或者Tailwind CSS的theme配置。// 设想中的JSON输出结构 { colors: { primary: {value: #0066CC, type: color}, neutral.900: {value: #111827, type: color} }, typography: { h1: {fontSize: 2rem, fontWeight: 700} } }深度组件识别目前可能主要提取基础样式。更高级的版本可以尝试通过分析 HTML 结构、类名模式和交互属性来识别并描述常见的UI组件如按钮、卡片、导航栏、模态框的变体variant和状态state。跨页面分析单个页面可能无法代表整个产品。工具可以支持输入一个站点地图或一组关键页面的URL进行聚合分析提取出全局通用的设计令牌并识别不同页面模块的特殊样式。与开发工具深度集成除了独立的 CLI 和 SDK可以开发 IDE 插件VS Code、WebStorm。在IDE中右键点击一个URL或者直接分析当前打开的项目本地服务器一键生成设计文档。5.3 当前局限性与挑战动态与复杂交互样式对于高度依赖 JavaScript 动态生成的样式如鼠标悬停、滚动动画、主题切换静态的CSS分析可能无法捕获其全貌。需要更复杂的运行时状态模拟。样式来源的优先级与特异性CSS有层叠规则。工具需要能准确计算并应用!important、内联样式、特异性权重等才能确定最终生效的值这增加了分析的复杂度。“设计系统”的语义理解工具能提取“值”但理解这些值背后的“设计意图”和“命名体系”是更大的挑战。例如它知道有一个#10B981的颜色被广泛使用但应该把它命名为success、emerald-500还是primary-green这往往需要一定程度的人工干预或基于类名/变量的启发式猜测。私有与认证页面工具无法直接访问需要登录或处于私有网络下的页面。6. 常见问题与排查思路在实际尝试运行或理解getdesign项目时你可能会遇到以下问题。6.1 环境与运行问题问题现象可能原因排查与解决思路bun install失败或极慢网络问题或 Bun 与某些原生模块不兼容。1. 检查网络连接尝试使用镜像源。2. 确认 Bun 版本 ≥1.3。3. 可尝试回退到使用npm install但需注意项目可能针对 Bun 优化。bun run dev启动失败端口占用或Convex错误端口3000被占用Convex未配置。1. 更改端口bun run dev --port 3001。2. Convex相关错误Web应用的基础展示功能可能不依赖Convex。如果只想看UI可以暂时注释掉或模拟相关调用。完整运行需参考Convex文档设置项目。Agent Skill 安装后无法调用Skill未正确安装到AI助手助手不支持该技能。1. 确认你的AI助手如Cursor支持 skills.sh 技能。2. 在助手设置中检查技能列表确认getdesign已启用。3. 尝试在助手聊天框输入getdesign看是否有提示。6.2 功能与使用问题问题现象可能原因排查与解决思路分析某个URL失败或结果为空网站反爬机制页面是客户端渲染且工具未正确处理网络超时。1. 尝试一个简单的、静态的网站如项目自己的GitHub Pages。2. 查看工具日志确认是否成功获取到页面HTML和CSS。3. 可能是目标网站使用了复杂的动态加载需要工具内置的无头浏览器配置更长的等待时间或执行特定脚本。生成的design.md中颜色/字体分类混乱聚类算法对于极端或复杂的值集处理不佳。这是算法层面的限制。可以尝试1. 在工具中寻找是否有调节聚类敏感度的参数。2. 手动对结果进行后处理。未来版本可能会提供更精细的控制选项。Web界面提交URL后长时间无响应分析任务耗时过长前端无状态反馈后端任务队列阻塞。1. 检查浏览器开发者工具的网络面板看请求是否完成或报错。2. 对于复杂网站分析过程可能需要数十秒。理想情况下工具应提供任务队列和进度提示这可能是待完善的功能。6.3 开发与贡献问题问题现象可能原因排查与解决思路想修改核心提取逻辑但找不到入口核心逻辑可能尚未从Web应用中完全解耦。1. 首先查看apps/web下的代码寻找包含analyze、css、parse等关键词的模块或API路由。2. 查看packages/下是否有名为core、parser或analyzer的包当前可能是占位符。3. 核心逻辑很可能直接实现在apps/web的一个服务端函数或工具目录中等待被重构抽取到独立的包。希望添加新的输出格式如Figma Tokens需要了解项目的输出生成架构。1. 找到负责生成design.md的模块。2. 通常会有一个中间数据结构如一个大的JSON对象代表提取出的设计系统。3. 添加新格式意味着为此数据结构编写一个新的“序列化器”Serializer。建议先提Issue讨论格式标准再参考现有Markdown序列化器的实现进行开发。踩坑记录无头浏览器的资源消耗在本地开发或自建服务时如果getdesign使用了无头浏览器如Puppeteer需要注意其内存和CPU消耗。并发处理多个分析请求可能会拖垮服务器。在生产环境部署时必须引入任务队列如Bull、RabbitMQ和工作进程池来隔离和限制并发任务并为任务设置超时时间。这也是为什么项目规划了独立的API服务以更好地处理这类资源密集型任务。7. 总结与个人实践建议getdesign项目展示了一个非常清晰的思路将AI Agent和自动化工具的能力应用于一个具体、痛点明确的开发场景——设计系统提取。它没有追求大而全而是通过Web演示和Agent Skill这两个轻量级的触点快速验证核心价值。从我个人的体验来看它的Agent Skill是目前最顺畅的使用方式。在Cursor中安装后几乎可以像使用一个内置命令一样快速获取任何公开网站的设计参数这对于UI开发时的参考和灵感捕捉帮助巨大。虽然提取的“系统”在语义化命名上还有提升空间但其提供的原始数据色值、字体、间距尺规已经具备了很高的参考价值。对于想要借鉴或参与此类项目的开发者我的建议是聚焦核心算法CSS解析和样式聚类是这个工具的“发动机”。花时间研究如何更准确、更智能地从杂乱的选择器和属性中归纳出设计意图是构建竞争壁垒的关键。拥抱生态集成像skills.sh这样的平台极大地降低了工具的分发和采用门槛。思考你的工具能否被封装成一个“技能”或“插件”嵌入到开发者已有的工作流IDE、聊天机器人、设计工具中比要求用户单独打开一个网站要友好得多。设计可扩展的数据结构在内部用一个定义良好的、版本化的数据结构来表示“设计系统”。这让你可以轻松地添加新的输入源未来可能不仅是CSS还有Figma API、图片色彩分析和新的输出格式Tailwind config, Style Dictionary, 设计令牌JSON。这个项目仍处于早期阶段很多规划中的表面如CLI、SDK还是占位符。但这正意味着它有丰富的可能性。无论是想直接使用它来提升效率还是通过研究其源码学习现代全栈开发与AI集成getdesign都是一个非常值得关注的项目。