Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add BackToCimaCoppi/Praxis --skill design-previewgit clone --depth 1 https://github.com/BackToCimaCoppi/PraxisWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/backtocimacoppi/praxis/design-preview)<a href="https://agentmods.dev/skills/backtocimacoppi/praxis/design-preview"><img src="https://agentmods.dev/badge/skills/backtocimacoppi/praxis/design-preview.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00084 | $0.03115 |
| Opus 5 | $0.00042 | $0.01558 |
| Sonnet 5 | $0.00017 | $0.00623 |
| Haiku 4.5 | $0.00008 | $0.00312 |
Grade A, and why
design-preview scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 7d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 150 lines — stays where its author put it; the contents beside it link to each section on GitHub.
设计预览（design-preview）
一句话：把一个 UI 形态还原成像素级 HTML，自动弹到用户 Chrome 里，让人对着真图评审，而不是看文字/ASCII。
本 skill 是沟通介质生产器，不是拍板器——它只负责「出图 + 弹窗 + 迭代」；设计结论由调用方（主线程/总控子任务）落到对应文档。
适用 / 不适用
| 适用 | 不适用 |
|---|---|
| 把已有页面形态 1:1 还原，供人确认「现状长这样」 | 需要可运行交互验证（长按菜单、登录链、网络请求）→ 用微信开发者工具/真机 |
| 把拟改/新增形态做成效果图，对图拍板版式 | 要生成可部署的真实代码 → 那是施工，不是预览 |
| 多变体 A/B 并排比对 | — |
核心保真承诺：与代码同源。读真值源还原，不凭记忆画、不引 v0/Figma/Lovable 等凭空生成器（它们会偏离真值 scss）。
核心流程（四步）
Step 1 — 定位真值源
- 小程序：找到目标形态对应的页面
.wxml（结构）+.scss（视觉）。已有形态→照搬；新/改形态→以同源 scss 为视觉基准改，确保和现状同风格。 - Vue / React / H5：找对应组件源 + 样式文件。
- 拿不准结构或视觉细节，先读代码，不要凭记忆画。涉及多形态/多类型分支时，逐个 grep 确认分支真值。
Step 2 — 写自包含 HTML
- 复制模板
references/preview-template.html作骨架（手机框 + 750 舞台 scale(0.5)）。 - 单位：scss 里的 rpx 数值直接当 px 填进
.stage（模板已 scale 0.5 还原 375 宽），禁止手算换算。 - 视觉：颜色 / 圆角 / 字号 / 间距 / 投影 / 动画一律照抄 scss 真值，禁止「差不多」。
- 数据：填真实感 mock 数据（真实昵称风格、合理数值、真实文案），不要 lorem。
- 多变体：A/B 或「当前 vs 改后」复制多个
.device-wrap横排，每个.device-label标清是哪个变体。 - 存放位置（按触发场景决定，禁止把具体任务路径写进本 skill——运行时按当时所属子任务拼）：
- 在
/control总控任务内触发 → 放进该任务的过程资产目录（总控约定 = 任务目录下的_shared/），子目录/文件名带当前所属子任务的T{n}-前缀（形如_shared/T{n}-形态预览/<形态名>.html）。它属于该子任务的过程资产，随任务一起提交、归档，兼作跨会话可重开的视觉档案。 - 不在总控任务内 / 计划模式 → 放
/tmp/design-preview/<描述名>.html。临时、不入库、用完即弃——这类场景的预览本就无需版本化或归档；计划模式尤其不应往仓库写文件。
- 在
Step 3 — 自动弹 Chrome（经本地 HTTP 服务，不要用 file://）
⚠️ 关键（实测）：claude-in-chrome 扩展受 Chrome 沙盒限制打不开
file://（会被拼成https://file///...失败）。必须起一个本地静态服务，让扩展访问http://localhost。
- 起本地服务（指向 HTML 所在目录，后台运行，用
--directory避免cd）：
端口取不常用值（如 8923）；同一会话可复用同一服务，不必每张图重起。python3 -m http.server <端口> --directory "<HTML 所在目录绝对路径>" - 浏览器工具若是 deferred，一次性批量加载核心集：
ToolSearch query: "select:mcp__claude-in-chrome__tabs_context_mcp,mcp__claude-in-chrome__navigate,mcp__claude-in-chrome__tabs_create_mcp,mcp__claude-in-chrome__computer,mcp__claude-in-chrome__read_page" tabs_context_mcp（会话首次必做，拿 tab 上下文）→tabs_create_mcp新建或复用空 tab →navigate到http://localhost:<端口>/<文件名>。文件名含中文必须 URL 编码（如形态1a.html→%E5%BD%A2%E6%80%811a.html）。- 截图自检：
computer(action:screenshot, save_to_disk:true) 抓一张，确认渲染正常 + 人机看同一张图；异常（错位/空白/样式没生效）就改 HTML 重开，不把坏图丢给用户。 - 告诉用户「已在 Chrome 弹出」+ 一句话说明这是哪个形态/变体。
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 7d ago First seen · 150 lines · 84 tokens per session scan A f5b0cbc303a0
design-preview is a skill published in the GitHub repository BackToCimaCoppi/Praxis (6 stars, last pushed 12d ago), licensed Apache-2.0. It adds 84 tokens to every session and 3,115 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build landing pages, websites, dashboards, web components, or any frontend UI. Generates creative, polished code that avoids generic AI aesthetics.
ui-animation
Builds, reviews, and measures UI motion, including springs, gestures, scroll effects, and curve fitting from recordings. Use when asked to "add animation", "match this easing", "reverse engineer this motion", or find animation opportunities. For action semantics use product-design; for visual layout use ui-design.
ui-design
Designs and builds React/Next/Tailwind UI and audits visual and interaction defects. Use when asked to "build a landing page", "extract our design system", "add dark mode", "make this responsive", "remove UI slop", or "audit this component". For product decisions use product-design; for browser measurements use…
typography-audit
Audits font loading, type scales, measure, spacing, OpenType, and rendered punctuation with 78 scoped rules. Use when asked to "audit typography", "fix the fonts", or "review my type system". For a new visual direction use ui-design Direction; for general UI defects use ui-design Audit.
web-artifacts
Turns any idea into a live single-file HTML prototype in minutes — inline CSS/JS, CDN-only dependencies (cdnjs), mobile-first, seeded with believable fake data, interactive states wired — ready to open in a browser or paste as a Claude artifact. Use when the user says "prototype this", "show me a working demo", "make…
chinese-web-themes
A collection of eight CSS themes for giving websites a Chinese-inspired visual style, with typography rules for Chinese text.