【免费下载链接】gptaku_pluginsA Claude Code plugin marketplace for people who want to become AI Native项目地址https://gitcode.com/gh_mirrors/gp/gptaku_plugins点击查看免费下载GPTaku Plugins是一个面向 Claude Code 的开源插件市场其中的insane-design插件专门解决一个痛点从任意网站 URL 一键提取完整的设计系统——真实读取页面的 CSS产出干净的design tokens颜色、字体、间距、圆角、阴影、一份结构化的design.md设计规范以及可点击复制的 HTML 报告。无需 API Key无需手动扒样式。为什么需要 design token 提取工具做前端或让 AI 帮你写 UI 时最常见的场景是「我想把这个网站的设计风格搬到自己项目里」。传统做法是打开 DevTools手动记录颜色值、字号、间距……费时且容易遗漏。insane-design 的思路完全不同读真实 CSS不是让 AI 凭截图「猜」配色而是解析站点实际生效的样式只取关键项color颜色、type字体、spacing间距、radius圆角、shadow阴影、fonts字体栈产出即文档token 集合 design.md规范可直接作为 AI Agent 的上下文输入一键安装步骤3条命令搞定在 Claude Code 中依次执行# 1) 添加 GPTaku 插件市场仅需一次 /plugin marketplace add https://gitcode.com/gh_mirrors/gp/gptaku_plugins # 2) 安装 insane-design /plugin install insane-designgptaku-plugins # 3) 热加载无需重启 /reload-plugins安装完成后无需任何额外配置——它属于「仅依赖 Claude Code、不需要凭据」的插件详见 README.md 的 Trust setup 章节。使用示例从URL到design.md只要一句话安装后直接用自然语言下指令即可官方给出的示例Extract the design system from https://stripe.com插件会完成整条链路抓取页面 → 解析 CSS → 归纳 tokens → 生成design.md→ 输出 HTML 报告。你可以在 HTML 报告中逐条点击复制 token 值直接粘进自己的项目或提示词里。对新手来说这意味着「复刻一个网站的视觉风格」从数小时的体力活变成一条命令的事。产出的三份「设计系统资产」产出物形态典型用途design tokens结构化键值颜色/字号/间距等直接注入前端工程或 AI 提示词design.md人类可读的设计规范文档团队对齐、作为 Agent 的设计上下文HTML 报告可交互页面支持点击复制人工核对、快速取用单个值进阶玩法喂给 AI 建站把提取出的design.md交给 Claude Code让生成的页面严格遵循目标网站的视觉语言多站点对比对多个竞品 URL 分别提取快速得到 token 差异表与 insane-search 组合insane-search 负责「读得进」被拦截的页面insane-design 负责「读得准」设计资产两者都装在同一个市场里延伸阅读README.md 的 insane-design 简介官方对插件能力的一句话定义README.zh.md完整的中文插件目录与安装说明plugins/insane-design/插件子模块目录包含其自身的命令边界与依赖说明site/index.html插件市场页面可勾选多个插件一次性生成安装命令一句话总结只要你能打开这个网站insane-design 就能把它的设计系统变成你可复用的design tokens和design.md。赞分享【免费下载链接】gptaku_pluginsA Claude Code plugin marketplace for people who want to become AI Native项目地址https://gitcode.com/gh_mirrors/gp/gptaku_plugins点击查看免费下载相关推荐Vue/Nuxt 设计系统提取指南基于 stitch-skills extract-design-md 从源码逆向出 DESIGN.mdVue/Nuxt 设计系统提取指南基于 stitch skills extract design md 从源码逆向出 DESIGN.md 导读 本文讲解 stAI 技能AI 插件open-design 设计系统包契约详解manifest.json、DESIGN.md 与四层 Token 体系open design 设计系统包契约详解manifest.json、DESIGN.md 与四层 Token 体系 本文以 open design 仓库中的AI 应用人工智能AI 技能设计系统媒体生成设计令牌Design Tokens实战指南基于lukasoppermann/design-tokens项目设计令牌Design Tokens实战指南基于lukasoppermann/design tokens项目 项目介绍 设计令牌是现代前端开发中视觉风格统一创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/14 17:19:48 · 阅读 1.2k 从任意URL秒提设计系统：GPTaku Plugins之insane-design如何一键产出design tokens与design.md
【免费下载链接】gptaku_pluginsA Claude Code plugin marketplace for people who want to become AI Native项目地址https://gitcode.com/gh_mirrors/gp/gptaku_plugins点击查看免费下载GPTaku Plugins是一个面向 Claude Code 的开源插件市场其中的insane-design插件专门解决一个痛点从任意网站 URL 一键提取完整的设计系统——真实读取页面的 CSS产出干净的design tokens颜色、字体、间距、圆角、阴影、一份结构化的design.md设计规范以及可点击复制的 HTML 报告。无需 API Key无需手动扒样式。为什么需要 design token 提取工具做前端或让 AI 帮你写 UI 时最常见的场景是「我想把这个网站的设计风格搬到自己项目里」。传统做法是打开 DevTools手动记录颜色值、字号、间距……费时且容易遗漏。insane-design 的思路完全不同读真实 CSS不是让 AI 凭截图「猜」配色而是解析站点实际生效的样式只取关键项color颜色、type字体、spacing间距、radius圆角、shadow阴影、fonts字体栈产出即文档token 集合 design.md规范可直接作为 AI Agent 的上下文输入一键安装步骤3条命令搞定在 Claude Code 中依次执行# 1) 添加 GPTaku 插件市场仅需一次 /plugin marketplace add https://gitcode.com/gh_mirrors/gp/gptaku_plugins # 2) 安装 insane-design /plugin install insane-designgptaku-plugins # 3) 热加载无需重启 /reload-plugins安装完成后无需任何额外配置——它属于「仅依赖 Claude Code、不需要凭据」的插件详见 README.md 的 Trust setup 章节。使用示例从URL到design.md只要一句话安装后直接用自然语言下指令即可官方给出的示例Extract the design system from https://stripe.com插件会完成整条链路抓取页面 → 解析 CSS → 归纳 tokens → 生成design.md→ 输出 HTML 报告。你可以在 HTML 报告中逐条点击复制 token 值直接粘进自己的项目或提示词里。对新手来说这意味着「复刻一个网站的视觉风格」从数小时的体力活变成一条命令的事。产出的三份「设计系统资产」产出物形态典型用途design tokens结构化键值颜色/字号/间距等直接注入前端工程或 AI 提示词design.md人类可读的设计规范文档团队对齐、作为 Agent 的设计上下文HTML 报告可交互页面支持点击复制人工核对、快速取用单个值进阶玩法喂给 AI 建站把提取出的design.md交给 Claude Code让生成的页面严格遵循目标网站的视觉语言多站点对比对多个竞品 URL 分别提取快速得到 token 差异表与 insane-search 组合insane-search 负责「读得进」被拦截的页面insane-design 负责「读得准」设计资产两者都装在同一个市场里延伸阅读README.md 的 insane-design 简介官方对插件能力的一句话定义README.zh.md完整的中文插件目录与安装说明plugins/insane-design/插件子模块目录包含其自身的命令边界与依赖说明site/index.html插件市场页面可勾选多个插件一次性生成安装命令一句话总结只要你能打开这个网站insane-design 就能把它的设计系统变成你可复用的design tokens和design.md。赞分享【免费下载链接】gptaku_pluginsA Claude Code plugin marketplace for people who want to become AI Native项目地址https://gitcode.com/gh_mirrors/gp/gptaku_plugins点击查看免费下载相关推荐Vue/Nuxt 设计系统提取指南基于 stitch-skills extract-design-md 从源码逆向出 DESIGN.mdVue/Nuxt 设计系统提取指南基于 stitch skills extract design md 从源码逆向出 DESIGN.md 导读 本文讲解 stAI 技能AI 插件open-design 设计系统包契约详解manifest.json、DESIGN.md 与四层 Token 体系open design 设计系统包契约详解manifest.json、DESIGN.md 与四层 Token 体系 本文以 open design 仓库中的AI 应用人工智能AI 技能设计系统媒体生成设计令牌Design Tokens实战指南基于lukasoppermann/design-tokens项目设计令牌Design Tokens实战指南基于lukasoppermann/design tokens项目 项目介绍 设计令牌是现代前端开发中视觉风格统一创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考