Design Anti Slop
KartikLabhshetwar/better-shot
Detect and fix AI design slop — the convergent look that shows up across AI-generated landing pages and dashboards (purple/indigo gradients, rounded-2xl everywhere, three-box feature grids, bento…
用 Figma MCP 生成 B/C 端可编辑 UI 原型。用户说画原型、线框图、Figma 稿、后台页面、App 页面时使用。
Install Product Prototype Figma
$ npx skills add pmlaowangba-lab/laowangba-pmprototype-skill --skill product-prototype-figma -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install pmlaowangba-lab/laowangba-pmprototype-skill product-prototype-figma --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
Claude Code skills documentation · loads skills from .claude/skills/
Install the "product-prototype-figma" agent skill from https://github.com/pmlaowangba-lab/laowangba-pmprototype-skill/tree/main into .claude/skills/product-prototype-figma/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "product-prototype-figma", 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.
$ npx skills add pmlaowangba-lab/laowangba-pmprototype-skill --skill product-prototype-figma -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install pmlaowangba-lab/laowangba-pmprototype-skill product-prototype-figma --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "product-prototype-figma" agent skill from https://github.com/pmlaowangba-lab/laowangba-pmprototype-skill/tree/main into .agents/skills/product-prototype-figma/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "product-prototype-figma", 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 pmlaowangba-lab/laowangba-pmprototype-skill --skill product-prototype-figma -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install pmlaowangba-lab/laowangba-pmprototype-skill product-prototype-figma --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "product-prototype-figma" agent skill from https://github.com/pmlaowangba-lab/laowangba-pmprototype-skill/tree/main into .cursor/skills/product-prototype-figma/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "product-prototype-figma", 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.
$ npx skills add pmlaowangba-lab/laowangba-pmprototype-skill --skill product-prototype-figma -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install pmlaowangba-lab/laowangba-pmprototype-skill product-prototype-figma --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "product-prototype-figma" agent skill from https://github.com/pmlaowangba-lab/laowangba-pmprototype-skill/tree/main into .gemini/skills/product-prototype-figma/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "product-prototype-figma", 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 pmlaowangba-lab/laowangba-pmprototype-skill product-prototype-figmaInstalls 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 pmlaowangba-lab/laowangba-pmprototype-skill --skill product-prototype-figma -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "product-prototype-figma" agent skill from https://github.com/pmlaowangba-lab/laowangba-pmprototype-skill/tree/main into .github/skills/product-prototype-figma/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "product-prototype-figma", 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 pmlaowangba-lab/laowangba-pmprototype-skill --skill product-prototype-figma -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install pmlaowangba-lab/laowangba-pmprototype-skill product-prototype-figma --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "product-prototype-figma" agent skill from https://github.com/pmlaowangba-lab/laowangba-pmprototype-skill/tree/main into .opencode/skills/product-prototype-figma/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "product-prototype-figma", 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.
Facts
- Skill name
product-prototype-figma- GitHub stars
- 100
- Token cost
- ~1.2k tokens
- SKILL.md length
- 394 words
- Files
- 43 (incl. references)
- Skills in repo
- 1
- Repo updated
- First seen
- Licence
- MIT
At a glance
用 Figma MCP 生成 B/C 端可编辑 UI 原型。用户说画原型、线框图、Figma 稿、后台页面、App 页面时使用。
- Works in 8 steps: ：IA 推导 → ：Design Plan（frontend-design） → ：Anti-Slop（frontend-design 第二遍） → …
- Tasks that involve Humanizing AI text
- SKILL.md covers 启动必读（顺序固定）, 触发条件, 前置环境 and 流水线总览, plus 11 more sections
- Calls sf and git
What it does
Product Prototype Figma is an agent skill from pmlaowangba-lab/laowangba-pmprototype-skill. 用 Figma MCP 生成 B/C 端可编辑 UI 原型。用户说画原型、线框图、Figma 稿、后台页面、App 页面时使用。 强制嵌入 frontend-design 全流程（design-plan → Anti-Slop → page.ui.yaml → Figma → 截图自审 → 增量 patch）， 配合 DESIGN.md 双轨视觉，避免 AI 默认审美与抽卡式重生成。无 spec 不生成；无 Anti-Slop PASS 不调用 usefigma。
Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 45 other files, including reference files (for example `DESIGN.md`, `README.md` and `examples/ai-price-comparison-frontend/README.md`).
It sits in Writing & Content, covering Humanizing AI text and Design tokens. It works with Figma. The repository describes itself as: Codex skill for product prototype generation with IA, design gates, page UI YAML, and Figma workflow. The licence is MIT.
When your agent uses it
- Tasks that involve Humanizing AI text
- Tasks that involve Design tokens
Example prompts
- “/product-prototype-figma”
Workflow steps
8 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit c3ca735. 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
Shell commands in SKILL.md call:
sfgit
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use git, which can reach the network depending on how they are called.
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
Product Prototype Figma loads about 1.2k tokens when it runs, and up to ~5.5k if it reads all its reference files. Until then it costs about 65 tokens; SKILL.md has 394 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.
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 pmlaowangba-lab/laowangba-pmprototype-skill at commit c3ca735, republished under its MIT licence (© pmlaowangba-lab). 394 words, ~1,230 tokens.
Download SKILL.mdSave it as
.claude/skills/product-prototype-figma/SKILL.md (or your agent's skills folder). This skill also uses 42 other files; get the full folder from GitHub.- name
- product-prototype-figma
- description
- 用 Figma MCP 生成 B/C 端可编辑 UI 原型。用户说画原型、线框图、Figma 稿、后台页面、App 页面时使用。 强制嵌入 frontend-design 全流程（design-plan → Anti-Slop → page.ui.yaml → Figma → 截图自审 → 增量 patch）， 配合 DESIGN.md 双轨视觉，避免 AI 默认审美与抽卡式重生成。无 spec 不生成；无 Anti-Slop PASS 不调用 use_figma。
- inherits
- frontend-design
- version
- 1.0
- updated
- 2026-07-08
产品原型生成（Figma）
结构靠
page.ui.yaml，视觉靠DESIGN.md（B/C 双轨），去 AI 味靠 frontend-design 流程。
IA 从 brief 推导，禁止套用任何「XX 后台标准八页」案例库。
启动必读（顺序固定）
- 本文件
SKILL.md frontend-design源规则（来自宿主 Agent / Codex 环境）- DESIGN.md（路由 B/C 视觉轨）
- frontend-design-gates.md（闸门表）
按需再读：references/ia-derivation.md、references/design-plan-template.md、references/anti-slop-checklist.md、references/spec-to-figma-map.md、references/incremental-edit.md、references/page-templates.yaml。
触发条件
- 「画原型」「出线框」「Figma 稿」「UI 图」「页面原型」
- 「做个 XX 后台 / App / 小程序 原型」
- 明确
@产品原型生成或指向本目录
前置环境
- Cursor 已装 Figma 插件，
plugin-figma-figmaMCP 已 OAuth - 生成前调用
whoami取planKey（create_new_file需要） - 执行 Figma 写入前加载
figma-use；整页/多区块组装加载figma-generate-design
流水线总览
| Phase | 名称 | 产出 | 闸门 |
|---|---|---|---|
| 0 | IA 推导 | ia-draft.md | 禁止套模板 IA；须写推导依据 |
| 1 | Design Plan | design-plan.md | frontend-design 第一遍 |
| 2 | Anti-Slop | checklist PASS | FAIL 禁止 yaml 与 Figma |
| 3 | 结构 Spec | *.page.ui.yaml | anti_slop: pass + schema 校验 |
| 4 | Figma 执行 | 云文件 Frames | 按 region 分批 use_figma |
| 5 | 视觉再审 | screenshot 对照 | 每屏删 1 多余装饰 |
| 6 | 交付 | 链接 + plan + yaml | — |
| 7 | 增量修改 | patch | 禁止整页重 roll |
全程：Phase 0→6 可连跑；Phase 2 FAIL 只回 Phase 1 改 plan，不画 Figma。
Phase 0：IA 推导
读 ia-derivation.md。从 brief 推实体 → 角色 → 任务链 → 页面，输出 ia-draft.template.md 格式。
禁止：
- 读取或引用任何「标准后台页面清单」固定案例
- 用「一般都有工作台/列表/详情」凑页数
用户未反对 IA 草案即可进入 Phase 1；有异议则修订后重进 Phase 1。
Phase 1：Design Plan（frontend-design）
按 design-plan-template.md 写 design-plan.md，必填：
- Subject（产品、受众、单屏任务）
- Tone +
surface: b_end | c_end（路由规则见 DESIGN.md） - Token（色/字/间距/圆角，从 DESIGN 对应轨复制，可微调须说明）
- Layout（每页 ASCII 线框）
- Signature（全项目 1 个记忆点，服务当前 brief）
- Differentiation（相对 AI 默认模板差在哪，一句话）
b_end 禁止选 frontend-design 的 extreme 美学；c_end 用 refined-consumer，仍禁 landing 炫技。
Phase 2：Anti-Slop（frontend-design 第二遍）
逐项勾选 anti-slop-checklist.md。在 design-plan.md 末尾写：
## Anti-Slop Review
- surface: b_end | c_end
- 命中项: ...
- 修订: ...
- 结论: PASS | FAIL仅 PASS 可进入 Phase 3。把 anti_slop: pass 写入各 page.ui.yaml 的 meta。
Phase 3：page.ui.yaml
每页一文件，命名 {page-id}.page.ui.yaml。meta.surface 与 design-plan 一致；regions 与 plan ASCII 一一对应。
落盘：
- 项目明确 → 项目
assets/或用户指定目录 - 不明确 →
99-收件箱/待整理/产品原型/{项目名}/
Show full SKILL.md (158 more words)Show less
Phase 4：Figma 执行
- 无
file_key→create_new_file（需planKey） - 共享 shell（侧栏/顶栏/TabBar）先画一版，各页引用同一结构模式
- 按 region 分批
use_figma，每批对照 yaml + plan - 颜色/字号/间距只来自
design-plan.md+ DESIGN 对应轨 - 字体：中文
PingFang SC或思源黑体，数据列SF Mono；禁止 Inter - 有设计系统 →
search_design_system填catalog_map；无则 primitive
Phase 5：视觉再审
每屏 get_screenshot：
- 对照
design-plan.md该页 ASCII - 香奈儿法则：删 1 个多余装饰
- 仍像 AI 默认 dashboard/App → patch，不整页重 roll
Phase 6：交付
交给用户：
- Figma 链接（主交付）
design-plan.mdia-draft.md+*.page.ui.yaml- 页面清单表：帧名、职责、根 nodeId（便于 Phase 7）
- Anti-Slop 结论摘要
Phase 7：增量修改
- 结构变更 → 改 yaml + patch 对应 node
- 视觉变更 → 先改 design-plan 相关 token → 视情况重跑 Anti-Slop → patch
- 禁止收到修改意见后无 plan/yaml 更新直接整文件重生成
红线
- 无
design-plan.md→ 禁止 Figma - Anti-Slop 非 PASS → 禁止 Figma
meta.anti_slop非pass→ 禁止 Figma- 产品复盘 Skill 所需 UI 截图须用户提供，本 Skill 不冒充真机截图
- 不
git push、不公开发布
与其他 Skill
| Skill | 关系 |
|---|---|
frontend-design | 继承流程与 Nevers |
figma-use / figma-generate-design | Figma 执行层 |
| 产品复盘文档生成 | 复盘截图不由本 Skill 伪造 |
文件索引
| 文件 | 用途 |
|---|---|
| DESIGN.md | B/C 路由 + 摘要 |
| design-shared.md | 共用 nevers、a11y |
| design-b-end.md | B 端 token |
| design-c-end.md | C 端 token |
© pmlaowangba-lab, 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 42 other files (references) in the repository root of pmlaowangba-lab/laowangba-pmprototype-skill.
- SKILL.md
- .gitignore
- DESIGN.md
- LICENSE
- README.md
- examples/ai-price-comparison-frontend/README.md
- examples/ai-price-comparison-frontend/ai-report.page.ui.yaml
- examples/ai-price-comparison-frontend/design-plan.md
- examples/ai-price-comparison-frontend/detail.page.ui.yaml
- examples/ai-price-comparison-frontend/home.page.ui.yaml
- examples/ai-price-comparison-frontend/ia-draft.md
- examples/ai-price-comparison-frontend/index.html
- examples/ai-price-comparison-frontend/search.page.ui.yaml
- examples/ai-price-comparison-frontend/watchlist.page.ui.yaml
- examples/inventory-system-backend/README.md
- examples/inventory-system-backend/inbound-management.png
- examples/inventory-system-backend/inventory-overview.png
- examples/member-system-frontend
- … and 25 more
Open the folder on GitHubat commit c3ca735
Compare with similar skills
Product Prototype Figma 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 |
|---|---|---|---|---|---|---|
| Product Prototype Figma this skillpmlaowangba-lab/laowangba-pmprototype-skill | 100 | — | ~1.2k | Automated safety check: Pass | MIT | |
| Design Anti SlopKartikLabhshetwar/better-shot | 2.4k | — | ~2.5k | Automated safety check: Pass | Custom licence | |
| Omd Slop Auditkwakseongjae/oh-my-design | 533 | — | ~1.1k | Automated safety check: Pass | MIT | |
| Figma Design System Builderwarpdotdev/warp | 65k | 2 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Figma use_figma Plugin API Ruleswarpdotdev/warp | 65k | 4 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Figma Design to Codewarpdotdev/warp | 65k | 4 repos | ~2.9k | Automated safety check: Pass | AGPL-3.0 |
Similar skills
Omd Slop Audit
kwakseongjae/oh-my-design
실제 제품 route의 UI·UX copy를 검사해 제품 맥락 없이 반복된 생성형 기본 패턴, 브랜드 근거 없는 장식, 카드·그라데이션·아이콘 타일 남용, 번역투와 추상 카피를 rule ID와 line ref로 진단한다.
Figma Design System Builder
warpdotdev/warp
Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.
Figma use_figma Plugin API Rules
warpdotdev/warp
Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.
Figma Design to Code
warpdotdev/warp
Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.
Figma to HyperFrames
heygen-com/hyperframes
Imports Figma assets, brand tokens, components and motion into a HyperFrames video composition, using the Figma REST API with a connector or native export for shaders.
Related
Works with
Categories
Questions about Product Prototype Figma
What does Product Prototype Figma do?
用 Figma MCP 生成 B/C 端可编辑 UI 原型。用户说画原型、线框图、Figma 稿、后台页面、App 页面时使用。. Product Prototype Figma is an agent skill from pmlaowangba-lab/laowangba-pmprototype-skill.
When should I use Product Prototype Figma?
Product Prototype Figma fits situations like: tasks that involve Humanizing AI text; tasks that involve Design tokens.
How do I install Product Prototype Figma in Claude Code?
Run `npx skills add pmlaowangba-lab/laowangba-pmprototype-skill --skill product-prototype-figma -a claude-code`. Or copy the skill folder (the pmlaowangba-lab/laowangba-pmprototype-skill repository) into .claude/skills/product-prototype-figma in your project. Claude Code loads it when a task matches its description.
How do I install Product Prototype Figma in Codex?
Run `npx skills add pmlaowangba-lab/laowangba-pmprototype-skill --skill product-prototype-figma -a codex`. Or copy the skill folder (the pmlaowangba-lab/laowangba-pmprototype-skill repository) into .agents/skills/product-prototype-figma in your project. Codex loads it when a task matches its description.
Can I use Product Prototype Figma 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 pmlaowangba-lab/laowangba-pmprototype-skill --skill product-prototype-figma -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/product-prototype-figma, .gemini/skills/product-prototype-figma, .github/skills/product-prototype-figma and .opencode/skills/product-prototype-figma in your project.
What does Product Prototype Figma need to run?
Going by SKILL.md and its folder, Product Prototype Figma needs the command-line tools its instructions call (sf and git).
Does Product Prototype Figma access the network?
SKILL.md contains no URLs. Its commands use git, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Product Prototype Figma 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 Product Prototype Figma use?
Product Prototype Figma is published under the MIT licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Product Prototype Figma use?
About 1.2k tokens (SKILL.md is roughly 4.9k 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 4.3k tokens, read only when the agent opens those files.
What are the alternatives to Product Prototype Figma?
Skills that share tags, products or a category with Product Prototype Figma: Design Anti Slop (KartikLabhshetwar/better-shot, 2.4k stars), Omd Slop Audit (kwakseongjae/oh-my-design, 533 stars), Figma Design System Builder (warpdotdev/warp, 65k stars) and Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Product Prototype Figma?
pmlaowangba-lab (a GitHub user) maintains it in pmlaowangba-lab/laowangba-pmprototype-skill, which has 100 GitHub stars. The repository was last updated on July 9, 2026.
Source: pmlaowangba-lab/laowangba-pmprototype-skill on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.