StyleLens

一键读懂任何网站的设计基因，生成可被 AI Agent 直接消费的设计规范文档。

StyleLens — 一键读懂任何网站的设计基因 浏览网页时看到精美的设计，想知道它用了什么颜色？字体？间距规范？StyleLens 帮你一键提取，还能用 AI 解读设计意图，生成可直接交给 AI Agent 复现的规范文档。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 核心功能 零配置即可提取 打开任意网站，点击插件图标或按快捷键，1 秒内提取完整的设计规范： - 颜色调色板（按实际使用频次排序，剔除未使用变量） - 字体族与字号 - 间距系统（自动推算间距单元） - 圆角规范 - 阴影参数 - 布局结构 全量可复制 每个设计 token 整行点击即复制对应 CSS 声明，Toast 动态配色反馈，复制颜色值时 Toast 背景自动变为该颜色。 四格式导出，打通设计-开发-AI 工作流 - Markdown 设计规范 — 交给团队或存档 - W3C Design Tokens JSON — 导入设计工具链（Figma Tokens、Style Dictionary） - tailwind.config.js — 直接覆盖进项目即可使用 - Agent Prompt — 可粘贴给 Cursor / Claude Code / ChatGPT，让 AI 按此风格生成代码或页面 AI 设计解读（可选，需配置 API Key） 解锁更深层次的设计洞察： - 风格标签（如「极简科技」「暖调文艺」） - 设计意图解读 - Agent 复现指令建议 支持 Anthropic Claude 与 OpenAI 兼容协议（OpenAI / Kimi / Qwen / GLM / OpenRouter / 自建服务），流式生成实时可见。