Web Design
xiaopu-ai/web-design
Web 视觉设计 SKILL。输入 PRD / 参考 URL / 截图 / 关键词(任意组合),先产出一份标准化 DESIGN.md 设计规范,用户确认后据此生成 UI/UX、视觉、动效、响应式全部达标的 web 代码。专攻 web 端:Landing Page、Portfolio、产品页、博客、个人站、SaaS 介绍页等。当用户说"帮我做个网站""设计一个页面""参考 XX…
OpenPrd UI Context skill:区分 greenfield、brownfield 与局部修正,基于已确认 PRD、可选 CodeGraph 和本地证据提出专业 UI/UX 方向,并在用户确认后编译 PRODUCT.md、DESIGN.md 和 Impeccable handoff。
$ npx skills add DavidLam-oss/obsidian-wechat-converter --skill openprd-ui-context -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install DavidLam-oss/obsidian-wechat-converter openprd-ui-context --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/DavidLam-oss/obsidian-wechat-converter.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.codex/skills/openprd-ui-context .claude/skills/openprd-ui-context && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "openprd-ui-context" agent skill from https://github.com/DavidLam-oss/obsidian-wechat-converter/tree/main/.codex/skills/openprd-ui-context into .claude/skills/openprd-ui-context/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "openprd-ui-context", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/DavidLam-oss/obsidian-wechat-converter/tree/main/.codex/skills/openprd-ui-contextType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add DavidLam-oss/obsidian-wechat-converter --skill openprd-ui-context -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install DavidLam-oss/obsidian-wechat-converter openprd-ui-context --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/DavidLam-oss/obsidian-wechat-converter.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.codex/skills/openprd-ui-context .agents/skills/openprd-ui-context && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "openprd-ui-context" agent skill from https://github.com/DavidLam-oss/obsidian-wechat-converter/tree/main/.codex/skills/openprd-ui-context into .agents/skills/openprd-ui-context/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "openprd-ui-context", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add DavidLam-oss/obsidian-wechat-converter --skill openprd-ui-context -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install DavidLam-oss/obsidian-wechat-converter openprd-ui-context --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/DavidLam-oss/obsidian-wechat-converter.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.codex/skills/openprd-ui-context .cursor/skills/openprd-ui-context && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "openprd-ui-context" agent skill from https://github.com/DavidLam-oss/obsidian-wechat-converter/tree/main/.codex/skills/openprd-ui-context into .cursor/skills/openprd-ui-context/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "openprd-ui-context", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/DavidLam-oss/obsidian-wechat-converter.git --path .codex/skills/openprd-ui-context--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add DavidLam-oss/obsidian-wechat-converter --skill openprd-ui-context -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install DavidLam-oss/obsidian-wechat-converter openprd-ui-context --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/DavidLam-oss/obsidian-wechat-converter.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.codex/skills/openprd-ui-context .gemini/skills/openprd-ui-context && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "openprd-ui-context" agent skill from https://github.com/DavidLam-oss/obsidian-wechat-converter/tree/main/.codex/skills/openprd-ui-context into .gemini/skills/openprd-ui-context/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "openprd-ui-context", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install DavidLam-oss/obsidian-wechat-converter openprd-ui-contextInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add DavidLam-oss/obsidian-wechat-converter --skill openprd-ui-context -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/DavidLam-oss/obsidian-wechat-converter.git skills-src && mkdir -p .github/skills && cp -r skills-src/.codex/skills/openprd-ui-context .github/skills/openprd-ui-context && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "openprd-ui-context" agent skill from https://github.com/DavidLam-oss/obsidian-wechat-converter/tree/main/.codex/skills/openprd-ui-context into .github/skills/openprd-ui-context/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "openprd-ui-context", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add DavidLam-oss/obsidian-wechat-converter --skill openprd-ui-context -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install DavidLam-oss/obsidian-wechat-converter openprd-ui-context --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/DavidLam-oss/obsidian-wechat-converter.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.codex/skills/openprd-ui-context .opencode/skills/openprd-ui-context && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "openprd-ui-context" agent skill from https://github.com/DavidLam-oss/obsidian-wechat-converter/tree/main/.codex/skills/openprd-ui-context into .opencode/skills/openprd-ui-context/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "openprd-ui-context", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
openprd-ui-contextOpenPrd UI Context skill:区分 greenfield、brownfield 与局部修正,基于已确认 PRD、可选 CodeGraph 和本地证据提出专业 UI/UX 方向,并在用户确认后编译 PRODUCT.md、DESIGN.md 和 Impeccable handoff。
Openprd UI Context is an agent skill from DavidLam-oss/obsidian-wechat-converter. OpenPrd UI Context skill:区分 greenfield、brownfield 与局部修正,基于已确认 PRD、可选 CodeGraph 和本地证据提出专业 UI/UX 方向,并在用户确认后编译 PRODUCT.md、DESIGN.md 和 Impeccable handoff。
Its SKILL.md is about 900 tokens, which your agent loads only when the skill is triggered. The skill folder holds 7 other files, including reference files (for example `references/brownfield.md`, `references/contract-templates.md` and `references/design-md-compatibility.md`).
It sits in Product & Project Management, covering Design tokens, PRD writing and UI design. The repository describes itself as: Obsidian 公众号排版(支持自定义 CSS和公众号贴图)、飞书云同步与多平台(小红书、知乎等)发布插件。Markdown 转微信文章 / Feishu docs / 知乎、小红书、今日头条等草稿,支持数学公式、本地图片、GIF 和 Mermaid。 The licence is MIT.
5 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit 3fef612. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
No scripts in the folder and no shell commands in SKILL.md (its code samples are bash).
From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Openprd UI Context loads about 899 tokens when it runs, and up to ~3.1k if it reads all its reference files. Until then it costs about 42 tokens; SKILL.md has 214 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from DavidLam-oss/obsidian-wechat-converter at commit 3fef612, republished under its MIT licence (© DavidLam-oss). 214 words, ~899 tokens.
.claude/skills/openprd-ui-context/SKILL.md (or your agent's skills folder). This skill also uses 6 other files; get the full folder from GitHub.<!-- OPENPRD:GENERATED
adapter=codex
source=openprd-ui-context
version=0.1.19
checksum=041d61f5688d9b05
-->
这份 skill 是项目理解与 Impeccable 之间的专业设计层,不是 CodeGraph 翻译器,也不是固定风格数据库。
local-fix,复用已有冻结上下文。planned UI topology;永远不要称它为 CodeGraph 或现有代码事实。user-confirmed 方向前,不冻结 PRODUCT.md/DESIGN.md,也不进入 Impeccable 实现。preserve / merge / refresh 决策。运行:
openprd ui-context . --mode auto --json读取 .openprd/design/ui-context/context.json。按模式继续:
greenfield:读取 greenfield.md,从已冻结 PRD/review 编译计划页面、入口、流程、状态、复用组件和数据角色。brownfield:读取 brownfield.md,查询可用 CodeGraph,并补路由、组件、CSS/tokens、状态、资产和 blast radius 扫描。local-fix:复用已有 PRODUCT.md、DESIGN.md 和 active design artifacts,不重开完整方向评审。每条关键结论都保留:source、confidence、conflicts、open questions。事实优先级与冲突处理见 evidence-policy.md。
结合 $openprd-frontend-design、项目事实、用户目标、受众、可访问性与技术约束,先形成一条设计 brief:
再生成三个异源方向。每个方向必须说明:
contrast / reference-transfer / design-lens不要把专业判断全部甩给用户;先给带理由的推荐。
向用户展示三个方向和推荐,按实际缺口确认:
用户确认后运行:
openprd ui-context . --direction <1|2|3> --source user-confirmed --json如果已有 PRODUCT.md/DESIGN.md 冲突,先完成 preserve/merge/refresh 决策,并在记录方向时显式加 --contract-decision <preserve|merge|refresh>;不得用 --force 绕过。preserve 会保持阻断,merge / refresh 只表示用户批准 Agent 继续编译,不会让 Host API 静默覆盖文件。
内容编译属于本 skill 的专业判断职责:Agent 基于证据、三个方向和用户确认写出高质量合同。openprd ui-context Host API 只负责模式证据、确认绑定、lint 和 handoff 生命周期,不生成通用模板冒充设计结果。
读取 contract-templates.md 和 design-md-compatibility.md,生成:
PRODUCT.mdDESIGN.md.impeccable/design.json.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根合同必须各自包含唯一的 OPENPRD:UI-CONTEXT 标记,并明确方向、来源、确认状态和 schema target;marker 必须与 confirmation.json 一致。DESIGN.md 兼容目标固定为 Google design.md alpha,commit bde692f2bc92ef7fdd0cf277b2704ab074b70efd。
运行合同校验:
openprd ui-context . --check校验未通过时不得 handoff。
读取 impeccable-handoff.md。明确要求 Impeccable:
实现完成后回到 OpenPrd 的 visual-compare、verification-board、alignment-board 和 centering-board 验证链路。
© DavidLam-oss, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 6 other files (references) in .codex/skills/openprd-ui-context of DavidLam-oss/obsidian-wechat-converter.
Open the folder on GitHubat commit 3fef612
Openprd UI Context next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Openprd UI Context this skillDavidLam-oss/obsidian-wechat-converter | 332 | — | ~899 | Automated safety check: Pass | MIT | |
| Web Designxiaopu-ai/web-design | 783 | — | ~3k | Automated safety check: Pass | MIT | |
| PlaidBuildGreatProducts/plaid | 217 | — | ~1.6k | Automated safety check: Pass | MIT | |
| Idea To Productmajiayu000/spellbook | 286 | — | ~1.2k | Automated safety check: Pass | MIT | |
| Cl Analyzeclosedloop-ai/claude-plugins | 122 | — | ~9.8k | Automated safety check: Pass | Apache-2.0 | |
| Design Decknicobailon/pi-design-deck | 291 | — | ~4.3k | Automated safety check: Pass | None |
xiaopu-ai/web-design
Web 视觉设计 SKILL。输入 PRD / 参考 URL / 截图 / 关键词(任意组合),先产出一份标准化 DESIGN.md 设计规范,用户确认后据此生成 UI/UX、视觉、动效、响应式全部达标的 web 代码。专攻 web 端:Landing Page、Portfolio、产品页、博客、个人站、SaaS 介绍页等。当用户说"帮我做个网站""设计一个页面""参考 XX…
BuildGreatProducts/plaid
Product Led AI Development — guides founders from idea to launched product.
majiayu000/spellbook
端到端产品教练 — 把一句话想法走到 PRD + 可点击 HTML 原型。会顶嘴、强制砍功能、用 Nielsen + Norman 做友好性硬检。Use when user 说"我有一个想法"、"想做一个产品"、"做 MVP"、"写 PRD"、"做用户友好的产品",或调用插件命令 /idea-coach:idea。Do NOT use when 用户已有完整 PRD 在跑、明确说"只…
closedloop-ai/claude-plugins
Analyze one ClosedLoop feature ticket from a URL or FEA slug before execution.
nicobailon/pi-design-deck
Present visual options for architecture, UI, and code decisions with high-fidelity side-by-side previews.
BuildGreatProducts/builder-os
Use inside a product repository when the user wants the full MVP built from their BuilderOS spec documents.
DavidLam-oss/obsidian-wechat-converter
为 Obsidian 微信公众号转换器生成受约束的 AI 编排结果。只在需要把文章内容映射为公众号安全 block JSON、诊断编排结果、优化 layout schema、分析 fallback 介入原因时使用。遇到教程、案例、产品介绍、截图型内容时应优先考虑这个 skill。
DavidLam-oss/obsidian-wechat-converter
OpenPrd 测试策略分流 skill:按风险把任务分到单元、集成、端到端、人工、视觉、小程序、性能和安全验证,并要求 evidence-plan。
DavidLam-oss/obsidian-wechat-converter
Release workflow for obsidian-wechat-converter (version bump, release notes, tag and publish).
DavidLam-oss/obsidian-wechat-converter
生成并迭代 OpenPrd 图示产物,供用户确认或理解。适用于解释型 SVG、架构图、产品流程图、用户旅程、流程图、系统边界图、依赖图,以及 freeze 前的可视化评审场景。
DavidLam-oss/obsidian-wechat-converter
OpenPrd 前端设计框架 skill:为界面、页面、视觉、样式和前端体验任务提供设计资产框架、审美立意、反 AI 味门禁和实现前方向评审规则。
DavidLam-oss/obsidian-wechat-converter
OpenPrd 需求入口与 PRD 分流 skill:判断用户可见需求类型和内部 L0/L1/L2 路由码,决定直接澄清、mini-plan 或正式 PRD,并选择通用 / 面向个人消费者场景 / 面向企业服务场景 / 以 Agent 为主要使用场景的 PRD 视角。对用户复述时不要直接把 consumer / b2b / agent 当展示词;这些枚举值只用于内部记录和命令。
OpenPrd UI Context skill:区分 greenfield、brownfield 与局部修正,基于已确认 PRD、可选 CodeGraph 和本地证据提出专业 UI/UX 方向,并在用户确认后编译 PRODUCT.md、DESIGN.md 和 Impeccable handoff。. Openprd UI Context is an agent skill from DavidLam-oss/obsidian-wechat-converter.
Openprd UI Context fits situations like: tasks that involve Design tokens; tasks that involve PRD writing; tasks that involve UI design.
Run `npx skills add DavidLam-oss/obsidian-wechat-converter --skill openprd-ui-context -a claude-code`. Or copy the skill folder (.codex/skills/openprd-ui-context in DavidLam-oss/obsidian-wechat-converter) into .claude/skills/openprd-ui-context in your project. Claude Code loads it when a task matches its description.
Run `npx skills add DavidLam-oss/obsidian-wechat-converter --skill openprd-ui-context -a codex`. Or copy the skill folder (.codex/skills/openprd-ui-context in DavidLam-oss/obsidian-wechat-converter) into .agents/skills/openprd-ui-context in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add DavidLam-oss/obsidian-wechat-converter --skill openprd-ui-context -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/openprd-ui-context, .gemini/skills/openprd-ui-context, .github/skills/openprd-ui-context and .opencode/skills/openprd-ui-context in your project.
SKILL.md names no scripts, command-line tools or credentials: Openprd UI Context is instructions for the agent only.
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Openprd UI Context is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 899 tokens (SKILL.md is roughly 3.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2.2k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Openprd UI Context: Web Design (xiaopu-ai/web-design, 783 stars), Plaid (BuildGreatProducts/plaid, 217 stars), Idea To Product (majiayu000/spellbook, 286 stars) and Cl Analyze (closedloop-ai/claude-plugins, 122 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
DavidLam-oss (a GitHub user) maintains it in DavidLam-oss/obsidian-wechat-converter, which has 332 GitHub stars. The repository holds 14 skills in this directory. The repository was last updated on October 3, 2026.
Source: DavidLam-oss/obsidian-wechat-converter on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.