Borrowing it
Nothing to install: this file belongs to DavidLam-oss/obsidian-wechat-converter. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/DavidLam-oss/obsidian-wechat-converter/main/.claude/skills/openprd-frontend-design/SKILL.mdgit clone --depth 1 https://github.com/DavidLam-oss/obsidian-wechat-converterWrote 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/davidlam-oss/obsidian-wechat-converter/openprd-frontend-design)<a href="https://agentmods.dev/skills/davidlam-oss/obsidian-wechat-converter/openprd-frontend-design"><img src="https://agentmods.dev/badge/skills/davidlam-oss/obsidian-wechat-converter/openprd-frontend-design/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/davidlam-oss/obsidian-wechat-converter/openprd-frontend-design"><img src="https://agentmods.dev/badge/skills/davidlam-oss/obsidian-wechat-converter/openprd-frontend-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector warn
SkillSpector: 1 finding, up to medium
These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →
- medium Agent Snooping · line 17 Skill enumerates or reads other installed skills. Access to other skills' SKILL.md files or the skills directory reveals prompt instructions, capabilities, and secrets that should be invisible to peer skills.Fix: Remove all code or instructions that list or read other skills' files or directories. Skills should operate independently; cross-skill access is a privilege escalation.
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.00056 | $0.05809 |
| Opus 5 | $0.00028 | $0.02905 |
| Sonnet 5 | $0.00011 | $0.01162 |
| Haiku 4.5 | $0.00006 | $0.00581 |
Grade A, and why
openprd-frontend-design 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 6d 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 — 195 lines — stays where its author put it; the contents beside it link to each section on GitHub.
OpenPrd Frontend Design
当任务涉及界面、页面、视觉、样式、组件层级、信息架构、内容型页面或前端体验时，使用这份 skill。
如果任务会新建界面、结构性改变信息架构/核心布局/视觉系统，或后续要交给 Impeccable，实现前同时读取 skills/openprd-ui-context/SKILL.md。由 UI Context 负责 greenfield/brownfield 项目理解、三个专业方向、用户确认以及 PRODUCT.md/DESIGN.md 编译；本 skill 继续提供审美资产框架与反模板化门禁。低风险局部修正使用 UI Context 的 local-fix 路径，不重复冻结完整合同。
核心目标
- 让 Agent 在动手实现前，先有一套稳定的前端设计资产和判断顺序。
- 避免界面任务默认收敛成同一种安全解。
- 避免“没素材硬做”“事实没核实就写页面”“看起来好看但空心”的情况。
- 让每个界面先有明确审美主张和记忆点，而不是只套默认模板、堆卡片或复用通用 AI 风格。
先读这些文件
.openprd/design/README.md.openprd/design/templates/README.mdskills/openprd-frontend-design/references/design-asset-contract.mdskills/openprd-frontend-design/references/direction-engine.md
如果当前工作区本来就有现成前端结构，或你明确需要偏离模板默认组合，再读：
.openprd/design/lenses/frontend-lenses.md.openprd/design/themes/theme-catalog.json.openprd/design/layouts/layout-catalog.json.openprd/design/components/component-catalog.md.openprd/design/checklists/ui-quality-gate.md.openprd/design/anti-slop.md
如果本轮已经进入实现准备，再读：
.openprd/design/active/facts-sheet.md.openprd/design/active/asset-spec.md.openprd/design/active/image-preflight.md.openprd/design/active/direction-plan.md.openprd/design/active/selected-direction.md
使用顺序
- 先判断这是不是前端体验任务。
- 选一个
lens，明确这次界面的视觉判断角度。 - 写清本次审美立意：页面解决什么问题、服务谁、气质要偏哪一端、受什么技术/可访问性约束、用户第一眼应该记住什么。
- 选一个
theme、一个layout skeleton和一个recipe，并说明它们如何服务上面的审美立意。 - 如果页面会写具体产品事实，先补
facts-sheet.md。 - 如果页面依赖品牌素材、产品图、界面图、图库或插图，先补
asset-spec.md，并记录字体、色彩、动效、背景/表面这些审美资产。 - 如果这类页面没有真实图片就会空心，先补
image-preflight.md。 - 如果用户还没有给参考方向，先补
direction-plan.md，明确 3 个异源方向；每个方向都要有不同审美主张和记忆点。 - 用户选定方向后，再补
selected-direction.md，把选中的 lens、theme、layout、组件、审美主张、记忆点和风险锁定。 - 如果用户已经给了效果图、设计稿、参考截图或其他明确参考图，先把它视为主参考源：优先锁定它的版式、层级、主视觉和关键路径；
starter / lens / theme / layout只作为实现加速器，不作为高于参考图的裁决源。 - 如果当前是空白工作区的前端/页面冷启动，而且用户原话已经给了明确的页面主题、模块范围或“直接实现”的意图，优先运行
openprd run . --context --message <用户原话>，不要先跑不带 message 的run --context。 - 跑完
design-starter后，立即进入Patch Mode：把生成的入口文件当成稳定基座，在同一路径里细化结构、内容、样式和交互。 - 最后再进入验证，并用
.openprd/design/checklists/ui-quality-gate.md和.openprd/design/anti-slop.md做自检。
What ships with it
2 files 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.
- 6d ago First seen · 195 lines · 56 tokens per session scan A 92ea5448e534
openprd-frontend-design is a skill published in the GitHub repository DavidLam-oss/obsidian-wechat-converter (307 stars, last pushed 2d ago), licensed MIT. It adds 56 tokens to every session and 5,809 once invoked, about $0.0003 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-09-04.
Other skills, from other repositories
chakra-ui-builder
Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form…
visual-ralph
Visual Ralph orchestration for frontend UI from generated references, static references, or live URL targets, using $ralph with built-in visual verdict and pixel-diff evidence until the implementation matches and leaves a reproducible design system.
frontend-ui-dark-ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
reveal-hover-effect
Build cursor-following spotlight reveals that expose a second aligned image through a soft radial mask. Use for hover-to-color, before-and-after, x-ray, material, texture, product-detail, and illustrated hero effects where a desaturated or embossed base image should remain visible while another treatment follows an…
frontend-visual-qa
Audits already-rendered web, landing-page, HTML deck/slide, browser tool/game, dashboard/admin, design-system, and desktop UIs using real-browser or native-app journeys, inspected screenshots, DOM geometry, responsive or projection viewports, and a bundled Playwright sweep. Use after UI implementation to find…
prototype-web
A clickable, high-fidelity web product prototype with navigation, a hero section, feature cards, steps, social proof, and optional pricing. It is designed to resemble a finished landing page while remaining a prototype.