Agent skill

Openprd UI Context

by DavidLam-oss in DavidLam-oss/obsidian-wechat-converter

OpenPrd UI Context skill:区分 greenfield、brownfield 与局部修正,基于已确认 PRD、可选 CodeGraph 和本地证据提出专业 UI/UX 方向,并在用户确认后编译 PRODUCT.md、DESIGN.md 和 Impeccable handoff。

MITAuto-check passedProduct & Project Management

Install Openprd UI Context

skills CLI
$ npx skills add DavidLam-oss/obsidian-wechat-converter --skill openprd-ui-context -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install DavidLam-oss/obsidian-wechat-converter openprd-ui-context --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ 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-src

Use ~/.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/

Facts

Skill name
openprd-ui-context
GitHub stars
332
Token cost
~899 tokens
SKILL.md length
214 words
Files
7 (incl. references)
Skills in repo
14
Repo updated
First seen
Licence
MIT

At a glance

OpenPrd UI Context skill:区分 greenfield、brownfield 与局部修正,基于已确认 PRD、可选 CodeGraph 和本地证据提出专业 UI/UX 方向,并在用户确认后编译 PRODUCT.md、DESIGN.md 和 Impeccable handoff。

  • Works in 5 steps: 建立证据底座 → 做专业设计判断 → 只确认高价值决策 → …
  • Tasks that involve Design tokens
  • SKILL.md covers 触发边界, 核心原则, 工作流 and 停止条件
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

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.

When your agent uses it

  • Tasks that involve Design tokens
  • Tasks that involve PRD writing
  • Tasks that involve UI design

Example prompts

  • “/openprd-ui-context”

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. 建立证据底座
  2. 做专业设计判断
  3. 只确认高价值决策
  4. 编译冻结合同
  5. 交给 Impeccable

What it can do on your machine

Read from SKILL.md and the folder at commit 3fef612. It shows what the files ask for, not the result of running them.

  • Tool permissions

    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.

  • Runs code

    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.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

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.

Always · name and description, kept in context so the agent knows when to use it
~42
When it runs · the whole SKILL.md, loaded when a task matches
~899
With references · SKILL.md plus every file in references/, read only if the agent opens them
~3.1k

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.

Safety

Auto-check passed

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.

SKILL.md

The full file from DavidLam-oss/obsidian-wechat-converter at commit 3fef612, republished under its MIT licence (© DavidLam-oss). 214 words, ~899 tokens.

Download SKILL.mdSave it as .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.
name
openprd-ui-context
description
OpenPrd UI Context skill:区分 greenfield、brownfield 与局部修正,基于已确认 PRD、可选 CodeGraph 和本地证据提出专业 UI/UX 方向,并在用户确认后编译 PRODUCT.md、DESIGN.md 和 Impeccable handoff。
<!-- OPENPRD:GENERATED
adapter=codex
source=openprd-ui-context
version=0.1.19
checksum=041d61f5688d9b05
-->

OpenPrd UI Context

这份 skill 是项目理解与 Impeccable 之间的专业设计层,不是 CodeGraph 翻译器,也不是固定风格数据库。

触发边界

  • 新建界面、核心页面、视觉系统、信息架构或关键用户流程:运行完整流程。
  • 存量项目的结构性 UI 改造:运行完整流程,并优先消费代码事实。
  • 卡片间距、颜色、字号、局部对齐等低风险修正:使用 local-fix,复用已有冻结上下文。
  • 纯后端、纯脚本、纯数据和无用户可见输出:跳过本 skill。

核心原则

  1. CodeGraph 只在 brownfield 中作为可选代码事实输入;不可用时回退本地扫描并标记 evidence-gap。
  2. greenfield 从已确认 PRD/review 生成 planned UI topology;永远不要称它为 CodeGraph 或现有代码事实。
  3. 先做产品设计、UX 架构与审美判断,再请用户确认少量高价值变量。
  4. 三个方向必须在生成逻辑、信息组织、密度、素材策略、交互哲学或视觉气质上真正不同。
  5. 未记录 user-confirmed 方向前,不冻结 PRODUCT.md/DESIGN.md,也不进入 Impeccable 实现。
  6. 不静默覆盖已有合同;发现冲突时保留原文件并请求 preserve / merge / refresh 决策。

工作流

1. 建立证据底座

运行:

bash
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。

2. 做专业设计判断

结合 $openprd-frontend-design、项目事实、用户目标、受众、可访问性与技术约束,先形成一条设计 brief:

  • 用途与关键任务
  • 目标用户与使用环境
  • 气质端点与品牌强度
  • 信息密度与响应式约束
  • 素材策略与真实性要求
  • 用户第一眼应记住的东西

再生成三个异源方向。每个方向必须说明:

  • 生成逻辑:contrast / reference-transfer / design-lens
  • 产品与 UX 主张
  • 页面骨架、密度、视觉层级和状态策略
  • 色彩、字体、表面、图标、图片与动效角色
  • 记忆点、适用场景、主要风险和主动避开的模板味

不要把专业判断全部甩给用户;先给带理由的推荐。

3. 只确认高价值决策

向用户展示三个方向和推荐,按实际缺口确认:

  • 方向
  • 明暗偏好
  • 信息密度
  • 品牌表达强度
  • 动效强度
  • 参考图或参考站点的约束地位

用户确认后运行:

bash
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 静默覆盖文件。

4. 编译冻结合同

内容编译属于本 skill 的专业判断职责:Agent 基于证据、三个方向和用户确认写出高质量合同。openprd ui-context Host API 只负责模式证据、确认绑定、lint 和 handoff 生命周期,不生成通用模板冒充设计结果。

读取 contract-templates.md 和 design-md-compatibility.md,生成:

  • 项目根 PRODUCT.md
  • 项目根 DESIGN.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。

运行合同校验:

bash
openprd ui-context . --check

校验未通过时不得 handoff。

5. 交给 Impeccable

读取 impeccable-handoff.md。明确要求 Impeccable:

  • 先读冻结的 PRODUCT.md 和 DESIGN.md。
  • 保持已确认产品边界、关键流程、视觉北极星和 token 角色。
  • 用 shape/craft/critique/polish 完成实现与精修,不重新发明方向。
  • 发现合同冲突或实现不可行时回报,不静默偏航。

实现完成后回到 OpenPrd 的 visual-compare、verification-board、alignment-board 和 centering-board 验证链路。

停止条件

  • greenfield 没有已确认 PRD/review。
  • 方向仍未确认。
  • 已有合同冲突尚未决策。
  • DESIGN.md schema lint 失败。
  • CodeGraph、代码、PRD 或用户参考之间有影响产品边界的未决冲突。
  • 关键颜色、字体、素材许可、可访问性或交互状态仍是推断,却被写成已确认事实。

© 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

Files

SKILL.md and 6 other files (references) in .codex/skills/openprd-ui-context of DavidLam-oss/obsidian-wechat-converter.

  • SKILL.md
  • references/brownfield.md
  • references/contract-templates.md
  • references/design-md-compatibility.md
  • references/evidence-policy.md
  • references/greenfield.md
  • references/impeccable-handoff.md

Open the folder on GitHubat commit 3fef612

Compare with similar skills

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.

Openprd UI Context compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Openprd UI Context this skillDavidLam-oss/obsidian-wechat-converter332—~899Automated safety check: PassMIT
Web Designxiaopu-ai/web-design783—~3kAutomated safety check: PassMIT
PlaidBuildGreatProducts/plaid217—~1.6kAutomated safety check: PassMIT
Idea To Productmajiayu000/spellbook286—~1.2kAutomated safety check: PassMIT
Cl Analyzeclosedloop-ai/claude-plugins122—~9.8kAutomated safety check: PassApache-2.0
Design Decknicobailon/pi-design-deck291—~4.3kAutomated safety check: PassNone

Similar skills

  • Web Design

    xiaopu-ai/web-design

    Web 视觉设计 SKILL。输入 PRD / 参考 URL / 截图 / 关键词(任意组合),先产出一份标准化 DESIGN.md 设计规范,用户确认后据此生成 UI/UX、视觉、动效、响应式全部达标的 web 代码。专攻 web 端:Landing Page、Portfolio、产品页、博客、个人站、SaaS 介绍页等。当用户说"帮我做个网站""设计一个页面""参考 XX…

    783 GitHub stars~3k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed
  • Plaid

    BuildGreatProducts/plaid

    Product Led AI Development — guides founders from idea to launched product.

    217 GitHub stars~1.6k tokensUpdated 5 mo ago
    Product & Project ManagementAuto-check passed
  • Idea To Product

    majiayu000/spellbook

    端到端产品教练 — 把一句话想法走到 PRD + 可点击 HTML 原型。会顶嘴、强制砍功能、用 Nielsen + Norman 做友好性硬检。Use when user 说"我有一个想法"、"想做一个产品"、"做 MVP"、"写 PRD"、"做用户友好的产品",或调用插件命令 /idea-coach:idea。Do NOT use when 用户已有完整 PRD 在跑、明确说"只…

    286 GitHub stars~1.2k tokensUpdated today
    Product & Project ManagementAuto-check passed
  • Cl Analyze

    closedloop-ai/claude-plugins

    Analyze one ClosedLoop feature ticket from a URL or FEA slug before execution.

    122 GitHub stars~9.8k tokensUpdated today
    Product & Project ManagementAuto-check passed
  • Design Deck

    nicobailon/pi-design-deck

    Present visual options for architecture, UI, and code decisions with high-fidelity side-by-side previews.

    291 GitHub stars~4.3k tokensUpdated 2 mo ago
    Product & Project ManagementAuto-check passed
  • Build Mvp

    BuildGreatProducts/builder-os

    Use inside a product repository when the user wants the full MVP built from their BuilderOS spec documents.

    227 GitHub stars~1.2k tokensUpdated 3 mo ago
    Product & Project ManagementAuto-check: notes

More from DavidLam-oss/obsidian-wechat-converter

All 14 skills in this repo
  • Wechat AI Layout

    DavidLam-oss/obsidian-wechat-converter

    为 Obsidian 微信公众号转换器生成受约束的 AI 编排结果。只在需要把文章内容映射为公众号安全 block JSON、诊断编排结果、优化 layout schema、分析 fallback 介入原因时使用。遇到教程、案例、产品介绍、截图型内容时应优先考虑这个 skill。

    332 GitHub stars~498 tokensUpdated 5 days ago
    Auto-check passed
  • Openprd Test Strategy

    DavidLam-oss/obsidian-wechat-converter

    OpenPrd 测试策略分流 skill:按风险把任务分到单元、集成、端到端、人工、视觉、小程序、性能和安全验证,并要求 evidence-plan。

    332 GitHub stars~578 tokensUpdated 5 days ago
    Auto-check passed
  • Project Release

    DavidLam-oss/obsidian-wechat-converter

    Release workflow for obsidian-wechat-converter (version bump, release notes, tag and publish).

    332 GitHub stars~597 tokensUpdated 5 days ago
    Auto-check passed
  • Openprd Diagram Review

    DavidLam-oss/obsidian-wechat-converter

    生成并迭代 OpenPrd 图示产物,供用户确认或理解。适用于解释型 SVG、架构图、产品流程图、用户旅程、流程图、系统边界图、依赖图,以及 freeze 前的可视化评审场景。

    332 GitHub stars~724 tokensUpdated 5 days ago
    Auto-check passed
  • Openprd Frontend Design

    DavidLam-oss/obsidian-wechat-converter

    OpenPrd 前端设计框架 skill:为界面、页面、视觉、样式和前端体验任务提供设计资产框架、审美立意、反 AI 味门禁和实现前方向评审规则。

    332 GitHub stars~2.7k tokensUpdated 5 days ago
    Auto-check passed
  • Openprd Requirement Intake

    DavidLam-oss/obsidian-wechat-converter

    OpenPrd 需求入口与 PRD 分流 skill:判断用户可见需求类型和内部 L0/L1/L2 路由码,决定直接澄清、mini-plan 或正式 PRD,并选择通用 / 面向个人消费者场景 / 面向企业服务场景 / 以 Agent 为主要使用场景的 PRD 视角。对用户复述时不要直接把 consumer / b2b / agent 当展示词;这些枚举值只用于内部记录和命令。

    332 GitHub stars~1.5k tokensUpdated 5 days ago
    Auto-check passed

Questions about Openprd UI Context

What does Openprd UI Context do?

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.

When should I use Openprd UI Context?

Openprd UI Context fits situations like: tasks that involve Design tokens; tasks that involve PRD writing; tasks that involve UI design.

How do I install Openprd UI Context in Claude Code?

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.

How do I install Openprd UI Context in Codex?

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.

Can I use Openprd UI Context in Cursor, Gemini CLI or GitHub Copilot?

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.

What does Openprd UI Context need to run?

SKILL.md names no scripts, command-line tools or credentials: Openprd UI Context is instructions for the agent only.

Does Openprd UI Context access the network?

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.

Is Openprd UI Context safe to install?

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.

What licence does Openprd UI Context use?

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.

How many tokens does Openprd UI Context use?

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.

What are the alternatives to Openprd UI Context?

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.

Who maintains Openprd UI Context?

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.