getdesign
从任意URL提取设计系统，生成生产级design.md
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：getdesign。 它的用途是：从任意URL提取设计系统，生成生产级design.md 完整的 Skill 内容见：https://321skill.com/skills/getdesign/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'提取 cursor.com 的设计系统并生成 design.md'，它会自动抓取 cursor.com 的 CSS 样式，分析调色板、字体、组件布局、间距、阴影、动画等，输出一个完整的 design.md 文件。你也可以指定 URL 和输出文件名，如：'从 github.com 提取设计系统，保存为 github-design.md'。
介绍
getdesign 是一个通过 URL 即可自动提取网站设计系统的 AI 工具。它能够分析目标网站的实际 CSS 样式，生成包含调色板、排版、组件、布局、深度、动效、响应式规则以及智能体提示指南的完整设计文档（design.md），所有内容均基于真实代码而非AI幻觉。
使用方法非常简单：将 getdesign 作为 Agent Skill 安装到 Claude Code、Cursor、Codex 等支持 skills.sh 的 AI 编码助手中，然后直接对 AI 说出类似“提取 cursor.com 的设计系统到 design.md”的指令，AI 会自动使用 WebFetch 或浏览器工具抓取页面 CSS，分析并输出标准化的 9 节设计文档。
适合需要快速了解竞品设计规范的前端开发者、UI设计师和产品经理，也适合需要为现有项目搭建设计系统的团队。无需手动审查 CSS，无需部署额外服务，一次安装即可在多个 AI 编码工具中复用。
建议将提取的 design.md 作为设计评审的参考，而非直接复制样式值。由于分析基于页面运行时样式，对于动态加载或大量使用 CSS-in-JS 的网站，可能无法完整捕获所有设计令牌。
核心特点
与同类工具相比，getdesign 的核心差异在于它基于目标网站的实际 CSS 计算值生成设计文档，而非依赖 AI 对视觉的猜测或幻觉，输出结果更准确、可落地，且支持通过 Agent Skill 直接集成到 Claude Code、Cursor 等主流编码工具中。
注意事项
对于完全动态生成样式（如大量 CSS-in-JS 或运行时注入）的网站，可能无法完整捕获所有设计令牌；同时需要目标网站可公开访问且无严格反爬限制。
常见问题
getdesign 需要什么环境？
Agent Skill 模式只需 Node.js 和 npx，安装命令为 `npx skills add MohtashamMurshid/getdesign`；本地 Web 应用需要 Bun 和 Node ≥20。
它能提取哪些网站的设计系统？
任何公开可访问的 URL 均可，但需要页面包含 CSS 样式（外部样式表或内联样式均可），不支持需要登录或反爬严格的页面。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/getdesign/raw/index.md 读取 getdesign 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/getdesign/raw/index.md（查看排版版本）