Generate and edit Draw.io, Mermaid, and Excalidraw diagrams from natural language using a structured JSON spec.
by nssa.io1.0k installs47 stars
Browser
参考网站改 UI：抓设计 token 再落地
Try it用户说「参考 X 网站改 UI / 照着 X 的风格做 / X 那种配色」时的落地流程。在没有浏览器的机器上（agent-browser、playwright 都没装，或 Chrome/Edge 不在标准路径）用 curl + 标准库 Python 抓下目标站的真实设计 token（颜色、圆角、字重、字号、间距），再据此改本地样式表。含一个可直接跑的抓取脚本 scripts/fetch_tokens.py，以及「借什么 / 不借什么」的取舍框架与常见坑。
What it does
「参考 https://xxx 网站修改 ui」「照着 linear.app 的风格做一版」 「这个配色参考一下 Vercel / Notion / Stripe」
The skill document
参考某个网站改 UI：抓 token → 落地 → 钉成断言
何时用
- 「参考 https://xxx 网站修改 ui」「照着 linear.app 的风格做一版」
- 「这个配色参考一下 Vercel / Notion / Stripe」
先别急着凭印象写色值。目标站的设计 token 都在它的 CSS 变量里，抓下来是几十秒的事， 比猜准得多，也比截图好使（截图只能看个大概，拿不到 12px 还是 16px 这种精确值）。
第一步：抓（本机没有浏览器也能做）
python scripts/fetch_tokens.py https://linear.app/ # 打印全部变量
python scripts/fetch_tokens.py https://linear.app/ --grep color # 只看含 color 的
python scripts/fetch_tokens.py https://linear.app/ --json out.json
脚本做四件事（纯标准库，不需要 playwright / 浏览器）：
urllib抓首页 HTML（带桌面 UA，有些站对默认 UA 返回的是另一套壳）；- 正则提出所有 `` 的 href，相对路径按 base 拼全；
- 逐个下载合并（Next.js 站常见几十个
/_next/static/css/*.css，Linear 有 54 个、合计 339 KB）； - 从合并后的 CSS 里解析
--var: value，去重后按前缀分组打印。
如果站点是纯客户端渲染、HTML 里没有样式表链接（比如整站靠 JS 注入样式）：
curl -sL | grep -o 'href="[^"]*\.css[^"]*"' 看看有没有；实在没有再换
agent-browser（若已装）或直接抓它 CDN 上已知的那份 CSS。
抓不到时的兜底：把首页保存下来人工读，或直接问用户要截图。但先试脚本。
第二步：挑（这是最容易被忽略的一步）
抓下来通常有几百个变量，不要全抄。按这个顺序筛：
| 类别 | 关键变量 | 说明 |
|---|---|---|
| 底色三级 | --bg-base --bg-shade --color-bg-panel | 页面 / 浮起一档 / 面板。深色站通常是偏冷的近黑（R<B），不是纯中性灰 |
| 描边 | --border-solid --border-thin --border-faint-thin | 注意「面板内部的分隔线」往往比外框更淡，这是精致感的来源 |
| 圆角 | --card-radius --app-radius --radius-* | 常见取值 8/12/16。Linear 是 12px，比直觉的 16 更收敛 |
| 字重 | --font-weight-* | 可变字体站常用 510 / 590 / 680，而不是 CSS 默认的 400/600/700 |
| 字体特性 | --font-settings --font-variations | 如 "cv01","ss03"、"opsz" auto（Inter Variable 的招牌设定） |
| 高光/玻璃 | --edge-highlight-color --anchor-glass-bg | 深色界面里顶部 1px 白高光替代阴影，这是很多 SaaS 站的辨识度所在 |
| 主色 | --color-indigo --color-blue … | ⚠️ 通常不该抄，见下 |
借什么 / 不借什么（重要）
- 可以借：中性底色、描边层级、圆角、字重档位、间距节奏、高光与玻璃底、动效曲线。 这些是「工艺」，换到任何项目都不丢语义。
- 不要借：品牌主色。如果目标站的主色在你这个项目里另有含义（例如本站绿 = 「收入已验证」），换成对方的 indigo 会丢掉那层语义。参考一个站不等于照搬它的品牌色。 在改之前把这一条明确告诉用户，别默默替他换掉上一轮定下的语义配色。
- 不要借：大面积 hero 光晕 / 渐变文字。那是营销首页的语言，工具型界面加上会显得吵。
第三步：落（改本地样式表）
- 只改
:root的变量值 → 全站跟随。先跑一遍引用计数再删变量：python -c "print(len(re.findall(r'var\(--x\b', open('style.css').read())))"—— 凭印象删变量删出过 26 处未定义引用。 - 半透明统一走
rgba(var(--xx-rgb), alpha)，给每个色再配一组--xx-rgb: r,g,b通道变量，保证「一个颜色只有一处定义」。 - 字重 / 圆角这类结构性的值也做成变量（
--fw-s、--radius），别散着写。 - 新增的高光、玻璃底也必须是
:root里的变量，不要内联 rgba 字面量。
第四步：钉（把约定写成断言，否则下一个人会改回去）
注释不会自己报警。把最容易被顺手破坏的几条写成测试，例如：
- 卡片圆角 =
var(--radius)且--radius是 12px - 卡片有顶边高光（
.card::before用了var(--hi)） - 硬编码色值只允许出现在
:root里 - 字重不许出现裸数字
⚠️ 「色值只许在 :root」这类断言必须先把 /* */ 注释剥掉再扫
（css.replace(/\/\*[\s\S]*?\*\//g, '')），否则注释里举的色值例子会被误判成违规——
而注释本来就该能讲颜色（「Linear 的主色是 #5e6ad2，但我们不抄」这种说明很有价值）。
坑（都踩过）
bash -c "python -c '...\s...'"里的反斜杠会被吃掉，正则静默不匹配， 表现为「replaced 0」——极难察觉。多行 Python 一律写成 .py 文件再跑，别用-c+ heredoc。- 构建脚本可能把 CSS 内联进产物页，此时样式表里的注释也会一起进产物： 注释里不许出现脚本文件名、不许残留外链样式痕迹（有的构建有守卫会直接 FAIL）。
- 批量替换颜色后必须人工复查：蓝→绿可能把两个象限撞成同色； 渐变两端被替成同一个变量会丢层次。脚本只能做粗活。
- 站点可能按 UA 或地区返回不同 CSS，抓下来发现变量特别少时，换个 UA 再抓一次。
Related skills
Write, debug, and tune Playwright specs with locator strategy, trace diagnosis, and CI-aware timeouts.
by ivangdavila1.3k installs130 stars
Stores durable facts in a categorized, plain-markdown vault on disk, alongside your agent's built-in memory.
by Iván559 installs18 stars
Join a video meeting as an AI bot with voice, avatar, and screenshare across four operating modes.
by johnpatternai22 installs8 stars
Fetch raw ad creative, app, ranking, and revenue data from AdMapix as structured JSON.
by fly0pants4.3k installs296 stars
Find why your productivity system keeps failing, then apply the smallest fix — capacity math, bottleneck routing, durable local notes.
by Iván855 installs69 stars
More from oracis
Browse all skills把本地 Skill 打包并发布到 SkillHub（腾讯 skillhub.cn）与 ClawHub，覆盖预检、发布、状态回读与竞品对标全链路，并在上传被拒时用二分/ddmin 脚本把「服务端 WAF 拦内容（566）」与「包结构/字段问题」精确区分开。当用户说「发布技能到市场」「上架 skill」「SkillHub 提交失败」「Failed to fetch」「566」「上传 zip 报错」「技能审核状态」「版本号被拒」时使用。也讲清「入库成功 ≠ 已公开」——用 `mine` 的 `reviewStatus`、重发探测 `409 VERSION_EXISTS`、`/versions/<v>/signature` 三个探针判断版本到底走到哪一步。
by oracis1 installs1 stars
平台只有网页后台、没有上传 API 时，用本机已装的 Chrome/Edge + CDP 自动化走完上传/发布/填表流程——复用真实登录态、零安装（不下载 500MB Chromium）、能给文件选择框塞文件；并实测富文本编辑器（公众号 / CMS / 邮件模板）里到底哪些 CSS 能活下来，以及在决定是否接入平台自带的「一键排版 / AI 美化」前先抓它输出做结构化 diff。当用户说「只能网页上传」「后台发布」「网页填表自动提交」「发布到技能市场/各平台控制台」「复用已登录的浏览器」「公众号排版样式不生效/保存后样式没了」「一键排版要不要用」「点了按钮没反应/提交没成功也没报错」时使用。
by oracis2 installs
一键安装并实测验证已验证可用的免费 LLM 到 WorkBuddy/Claude Code，无需注册、无需 API Key。当用户说「装免费模型」「加免费模型」「免费 LLM」「免费模型一键装」「验证免费模型可用吗」「免费模型怎么接入」「帮我配几个免费模型」「监控免费模型」「免费模型挂了吗」「kilo 网关」「kilo-auto」「nemotron 免费」「space-bunny」「智谱 glm 免费」「zhipu 免费」「glm-4-flash」「glm-4.7-flash」「glm-z1-flash」「glm-4v-flash」「探测国外免费模型」「国外平台免费 llm」「优先用免费模型」「读图桥接」「vision bridge」「给 glm-4-flash 加读图」「不读图的模型怎么看图」「阶跃星辰」「stepfun」「step 5」「step-5-preview」「限时免费模型」「ccproxy 读图转发」「给 claude code 加读图」时使用。也用于验证已有免费模型配置是否真的可用（tool calling 是否支持、是否限流、是否支持读图），以及定期 watch 监控免费模型是否下线/限流/失去工具调用能力。
by oracis1 installs
在中国大陆网络环境下用 yt-dlp 下载视频（含 Windows GUI 封装）。当用户要下载 YouTube、Bilibili、SoundCloud 等 yt-dlp 支持的站点内容，或遇到「yt-dlp 装不上 / 下载报 502 / Tunnel connection failed / ffmpeg not found / 缺 JS runtime / TLS fingerprint / watch?v=&list= 把整个列表都下了 / Sign in to confirm you're not a bot / The page needs to be reloaded / 下到一半突然下不动 / 下回来的视频糊、有拖影残影 / 下载速度特别慢」等问题时使用。
by oracis2 installs
聚合搜索百度网盘/夸克网盘/阿里云盘等网盘分享链接。当用户想按作者名、课程名、剧名、书名、软件名找网盘下载路径，或提到「网盘搜索」「PanSou」「盘搜」「找到下载链接」「夸克/百度/阿里网盘资源」时使用。包含已验证的 PanSou 协议端点、绕过系统代理的必要写法、以及可直接运行的本地 Web 应用 panradar.py。
by oracis2 installs
在 WorkBuddy（Windows）环境里交付零依赖本地 Web 应用，并绕开官方测试技能完全不覆盖的本机专属坑。当用户要在本机跑起来一个本地 Web 应用 / 单文件工具 / 案例库 / 看板 / 小工具，或要验证刚写完的 HTML/JS/Python 交付物真的能工作时使用。独家覆盖：Bash 缺 coreutils、bash 是 WSL 启动桩、rm 是坏 shim、PowerShell 不回显 stdout、cwd 漂移、预览面板靠 HEAD 探活——这些在干净 Linux 环境里遇不到。
by oracis1 installs