Agent skill

Nextclaw Product Visual Assets

by Peiiii in Peiiii/nextclaw

当 NextClaw 产品更新后需要生成、替换、挑毛病或检查官网、GitHub README、用户文档或社交传播中的真实截图、AI 宣传视觉、整页 HTML 宣传预览、社区二维码等对外视觉资产时使用;也用于“更新截图”“重新截一批图”“做宣传页”“生成 campaign 页面”“视觉审稿”“五星挑刺法”或发布前检查视觉资产。普通站点布局开发或只写文章不触发。

MITAuto-check passedDevelopment

Install Nextclaw Product Visual Assets

skills CLI
$ npx skills add Peiiii/nextclaw --skill nextclaw-product-visual-assets -a claude-code

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

GitHub CLI
$ gh skill install Peiiii/nextclaw nextclaw-product-visual-assets --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/Peiiii/nextclaw.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/nextclaw-product-visual-assets .claude/skills/nextclaw-product-visual-assets && 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
nextclaw-product-visual-assets
GitHub stars
260
Token cost
~801 tokens
SKILL.md length
108 words
Files
13 (incl. scripts, references, assets)
Skills in repo
70
Repo updated
First seen
Licence
MIT

At a glance

当 NextClaw 产品更新后需要生成、替换、挑毛病或检查官网、GitHub README、用户文档或社交传播中的真实截图、AI 宣传视觉、整页 HTML 宣传预览、社区二维码等对外视觉资产时使用;也用于“更新截图”“重新截一批图”“做宣传页”“生成 campaign 页面”“视觉审稿”“五星挑刺法”或发布前检查视觉资产。普通站点布局开发或只写文章不触发。

  • Works in 8 steps: 冻结命题与内容骨架:用一句话写清用户应记住什么,再列 1–3 个可核查… → 截图计划:先决定 claim 需要“完整窗口”“完整功能面板”还是“完整图 +… → 裁切决策:完整证据保持原始画面;局部图必须声明来源完整图和归一化… → …
  • Tasks that involve Technical documentation
  • SKILL.md covers 目标, 选择一个模式, 整页宣传工作室 and 共同结果标准
  • Runs JavaScript scripts from its folder; calls node

What it does

Nextclaw Product Visual Assets is an agent skill from Peiiii/nextclaw. 当 NextClaw 产品更新后需要生成、替换、挑毛病或检查官网、GitHub README、用户文档或社交传播中的真实截图、AI 宣传视觉、整页 HTML 宣传预览、社区二维码等对外视觉资产时使用;也用于“更新截图”“重新截一批图”“做宣传页”“生成 campaign 页面”“视觉审稿”“五星挑刺法”或发布前检查视觉资产。普通站点布局开发或只写文章不触发。

Its SKILL.md is about 800 tokens, which your agent loads only when the skill is triggered. The skill folder holds 16 other files, including scripts, reference files and assets (for example `agents/openai.yaml`, `assets/promo-page-island-theme-brief.example.json` and `references/product-screenshot-and-external-assets.md`).

It sits in Development, covering Technical documentation. It works with GitHub. The repository describes itself as: A human-centered long-term AI partner—not a task-centered assistant. The licence is MIT.

When your agent uses it

  • Tasks that involve Technical documentation

Example prompts

  • “重新截一批图”
  • “生成 campaign 页面”
  • “/nextclaw-product-visual-assets”

Requirements

  • Node.js

Workflow steps

8 steps, taken from the first numbered list in SKILL.md.

  1. 冻结命题与内容骨架:用一句话写清用户应记住什么,再列 1–3 个可核查 claim。为每个模块声明它在故事中的任务、提供的信息增量、用户看完应带走的结论,以及承载结论的证据或解释;回答不了这四项的模块直接删除或重写,禁止用漂亮背景包装空内容。命题应服务 NextClaw…
  2. 截图计划:先决定 claim 需要“完整窗口”“完整功能面板”还是“完整图 + 有来源的细节图”,再选择或重新采集素材。每张事实素材都要在 capture 中声明主体、完整性、裁切来源和隐私检查;不能先拿现成图再随意找一个位置塞进去。读取 宣传页内容与证据合同。
  3. 裁切决策:完整证据保持原始画面;局部图必须声明来源完整图和归一化 cropRegion,只能用于解释细节。没有完整图时不得生成事实卡片。
  4. 选择区块原型:先读取 宣传页区块布局原型目录,根据内容角色、信息数量、顺序关系和媒体形状筛选最多三个候选,并在 layoutDecision 中记录最终选择与理由。再在 card 的 evidence 中明确单图、连续多图或“完整图 + 细节图”,固定使用 contain…
  5. 确定艺术方向:从产品本身提取颜色、材质、留白和字体气质。需要生成/编辑背景、使用参考图或准备提示词时,读取 宣传页艺术方向与生图提示词,并使用 imagegen。AI 只生成背景、纹理、装饰或明确标注的概念视觉,不伪造产品 UI。
  6. 编排整页:先按内容推进确定模块数量,再决定构图。默认包含开场判断、可选渠道预览、2–4 张传播卡片、证据映射和简短设计说明;按传播目标增删,不强行保留 X 帖子,也不为凑满卡片保留只有一句泛化口号的模块。背景只提供氛围、分区和视线引导,不算内容。
  7. 生成:复制并修改样例 brief,然后运行
  8. 验收:打开页面检查桌面和窄屏;逐条核对“选图—裁切—比例—拼接—可读性”,确认每个事实 claim 都能在完整截图中找到、截图关键对象足够大、多图顺序有意义,并排除私人信息、失败态、加载态、旧版本误导或 AI 伪造…

What it can do on your machine

Read from SKILL.md and the folder at commit 2c9e06e. 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

    Ships 1 file in scripts/ (JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • node

    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

Nextclaw Product Visual Assets loads about 801 tokens when it runs, and up to ~11k if it reads all its reference files. Until then it costs about 53 tokens; SKILL.md has 108 words of instructions outside code blocks.

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

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); the scripts in this folder are not scanned.

SKILL.md

The full file from Peiiii/nextclaw at commit 2c9e06e, republished under its MIT licence (© Peiiii). 108 words, ~801 tokens.

Download SKILL.mdSave it as .claude/skills/nextclaw-product-visual-assets/SKILL.md (or your agent's skills folder). This skill also uses 12 other files; get the full folder from GitHub.
name
nextclaw-product-visual-assets
description
当 NextClaw 产品更新后需要生成、替换、挑毛病或检查官网、GitHub README、用户文档或社交传播中的真实截图、AI 宣传视觉、整页 HTML 宣传预览、社区二维码等对外视觉资产时使用;也用于“更新截图”“重新截一批图”“做宣传页”“生成 campaign 页面”“视觉审稿”“五星挑刺法”或发布前检查视觉资产。普通站点布局开发或只写文章不触发。

NextClaw 产品视觉资产

目标

让对外视觉既能准确证明真实产品价值,又形成值得传播的完成品。skill 负责选择证据、艺术方向、生成编排和验收;确定性脚本负责截图、同步或渲染。开始前先读取 Wiki 中的用户内容边界,隔离内部过程、隐私、调试状态和不成熟结论。

选择一个模式

  • 产品截图与外部资产:更新稳定界面、精选真实任务、README/landing 镜像、二维码或指标图时,读取 产品截图与外部资产。
  • 整页宣传工作室:把新功能、主题、版本或真实场景做成精美的单文件 HTML showcase/campaign 页面时,执行下方流程。
  • AI 辅助单张视觉:只需一张概念主图或截图包装时,使用 imagegen;真实 UI 仍由原始截图承担证据,概念图不得冒充产品界面。

Stable/major 版本传播图在选图或生成后、绑定 release review 前,读取 版本传播图质量门。

只选择当前任务需要的模式,不批量读取其它参考。

整页宣传工作室

主产物是一件完整 HTML 宣传作品:开场判断、渠道文案预览、传播卡片、真实证据和设计说明共同组成同一套叙事。X、官网、README 或社区帖只是可选渠道模块,不是页面本身的全部目的。

  1. 冻结命题与内容骨架:用一句话写清用户应记住什么,再列 1–3 个可核查 claim。为每个模块声明它在故事中的任务、提供的信息增量、用户看完应带走的结论,以及承载结论的证据或解释;回答不了这四项的模块直接删除或重写,禁止用漂亮背景包装空内容。命题应服务 NextClaw 作为长期个人智能搭档或个人操作层的真实价值,不能只写“更高级、更震撼”。

  2. 截图计划:先决定 claim 需要“完整窗口”“完整功能面板”还是“完整图 + 有来源的细节图”,再选择或重新采集素材。每张事实素材都要在 capture 中声明主体、完整性、裁切来源和隐私检查;不能先拿现成图再随意找一个位置塞进去。读取 宣传页内容与证据合同。

  3. 裁切决策:完整证据保持原始画面;局部图必须声明来源完整图和归一化 cropRegion,只能用于解释细节。没有完整图时不得生成事实卡片。

  4. 选择区块原型:先读取 宣传页区块布局原型目录,根据内容角色、信息数量、顺序关系和媒体形状筛选最多三个候选,并在 layoutDecision 中记录最终选择与理由。再在 card 的 evidence 中明确单图、连续多图或“完整图 + 细节图”,固定使用 contain 并继承源图比例。读取 宣传页构图与留白合同,约束文字、截图、主动留白、安全区和多图关系;截图自身成为圆角卡片,不默认再套窗口壳。

  5. 确定艺术方向:从产品本身提取颜色、材质、留白和字体气质。需要生成/编辑背景、使用参考图或准备提示词时,读取 宣传页艺术方向与生图提示词,并使用 imagegen。AI 只生成背景、纹理、装饰或明确标注的概念视觉,不伪造产品 UI。

  6. 编排整页:先按内容推进确定模块数量,再决定构图。默认包含开场判断、可选渠道预览、2–4 张传播卡片、证据映射和简短设计说明;按传播目标增删,不强行保留 X 帖子,也不为凑满卡片保留只有一句泛化口号的模块。背景只提供氛围、分区和视线引导,不算内容。

  7. 生成:复制并修改样例 brief,然后运行:

    bash
    node scripts/render-promo-page.mjs --brief <brief.json> --out <preview.html>

    模板位于 assets/promo-page-template.html。渲染器会把本地图片嵌入 HTML,并阻断缺少布局决策、原型与实现不相容、claim 与截图不匹配、事实卡片缺少完整截图或试图用全幅裁切冒充产品证据的页面。

  8. 验收:打开页面检查桌面和窄屏;逐条核对“选图—裁切—比例—拼接—可读性”,确认每个事实 claim 都能在完整截图中找到、截图关键对象足够大、多图顺序有意义,并排除私人信息、失败态、加载态、旧版本误导或 AI 伪造 UI。交付前必须执行构图参考中的“五星挑刺法”,并在最终回复中公开每个模块的五个问题、分数、模块指数、全局排序和未解决项;不能因为结果达到交付线就省略问题。用户说“挑毛病”“按之前的方法审”或“五星挑刺”时,直接召回同一方法。纯审美由用户确认,内容代表性由执行者先证明。

自带起点
  • assets/promo-page-island-theme-brief.example.json:可运行的 Island 样例。
  • assets/promo-page-island-atmosphere-reference.webp:艺术背景参考,不承担功能证据。
  • assets/promo-page-island-workspace-reference.png:真实界面参考;复用前仍须检查版本、隐私和内容代表性。

共同结果标准

  • 真实截图证明事实,AI 视觉提供氛围,两者角色清楚。
  • 每张事实型卡片至少完整展示一次证据截图;局部细节只能辅助,必须可追溯到同卡完整图,不能取代完整画面。
  • 截图不是填充纹理:先确认主体和边界,再按源图比例决定卡片尺寸,最后才做拼接。
  • 图片完整显示文案声称的对象和结果;不出现密钥、私人标识、失败提示、加载态或被裁断的关键内容。
  • 概念图、重排卡片和拼接图不能冒充真实产品截图。
  • 页面或图片自身像完成品:有节奏、留白、统一材质和明确焦点,不是内部提案套背景。
  • 交付时列出产物路径、证据来源、未采用素材及原因;未经用户要求不提交、不发布、不替换线上资产。

正式截图若适合未来版本说明,使用 release-note-image 绑定到同一需求 changeset;完整规则见 产品截图与外部资产。

© Peiiii, 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 12 other files (scripts, references, assets) in .agents/skills/nextclaw-product-visual-assets of Peiiii/nextclaw.

  • SKILL.md
  • agents/openai.yaml
  • assets/promo-page-island-atmosphere-reference.webp
  • assets/promo-page-island-theme-brief.example.json
  • assets/promo-page-island-workspace-reference.png
  • assets/promo-page-template.html
  • references/product-screenshot-and-external-assets.md
  • references/promo-page-art-direction-and-image-prompts.md
  • references/promo-page-composition-and-spacing.md
  • references/promo-page-content-evidence.md
  • references/promo-page-layout-archetypes.md
  • references/release-visual-quality.md
  • scripts/render-promo-page.mjs

Open the folder on GitHubat commit 2c9e06e

Compare with similar skills

Nextclaw Product Visual Assets 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.

Nextclaw Product Visual Assets compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Nextclaw Product Visual Assets this skillPeiiii/nextclaw260—~801Automated safety check: PassMIT
Chinese Indie Dev1c7/chinese-independent-developer62k—~8.7kAutomated safety check: PassNone
Update .NET OS Packagesdotnet/core22k—~2.3kAutomated safety check: PassMIT
Beautify GitHub Readmeoil-oil/beautify-github-readme1.8k—~4.1kAutomated safety check: PassMIT
Update .NET Supported OS Matrixdotnet/core22k—~4.1kAutomated safety check: PassMIT
Debate ReviewamElnagdy/review-skills1322 repos~1.1kAutomated safety check: PassMIT

Similar skills

  • Chinese Indie Dev

    1c7/chinese-independent-developer

    处理 1c7/chinese-independent-developer 仓库的项目提交. An agent skill from 1c7/chinese-independent-developer.

    62k GitHub stars~8.7k tokensUpdated today
    DevelopmentAuto-check passed
  • Official

    Audits and updates os-packages.json files listing the Linux packages each .NET release needs per distro, then regenerates the Markdown from the JSON.

    22k GitHub stars~2.3k tokensUpdated yesterday
    DevelopmentAuto-check passed
  • Beautify GitHub Readme

    oil-oil/beautify-github-readme

    Redesign GitHub README homepages or create project-native pure SVG, hybrid SVG-composed PNG/WebP, and opt-in animated GIF assets.

    1.8k GitHub stars~4.1k tokensUpdated 6 days ago
    DevelopmentAuto-check passed
  • Official

    Audits and updates the supported-os.json files for .NET releases, checking them against upstream lifecycle data and regenerating the markdown with the release-notes tool.

    22k GitHub stars~4.1k tokensUpdated yesterday
    DevelopmentAuto-check passed
  • Debate Review

    amElnagdy/review-skills

    Two-model debate review of a GitHub PR, GitLab MR, Azure DevOps PR, or local working tree, posted as inline comments or printed.

    132 GitHub starsUsed in 2 repos~1.1k tokens
    DevelopmentAuto-check passed
  • Library Documentation Seeker

    withkynam/vibecode-pro-max-kit

    Looks up library and framework documentation through Context7 first, with bundled Node scripts as a fallback that fetch and analyze llms.txt files.

    1.1k GitHub starsUsed in 1 repo~1k tokens
    DevelopmentAuto-check: notes

More from Peiiii/nextclaw

All 70 skills in this repo
  • Nextclaw Skin Studio

    Peiiii/nextclaw

    A skill your agent uses when a user wants to browse, apply, inspect, create, refine, switch, or remove a NextClaw skin; wants a personal skin with arbitrary CSS, JavaScript, images, SVG, DOM…

    260 GitHub stars~1.8k tokensUpdated yesterday
    Auto-check passed
  • A skill your agent uses when a development task needs visible phase tracing, task-level or phase-level Token measurement, model/effort comparison, or a deterministic usage report or local dashboard…

    260 GitHub stars~802 tokensUpdated yesterday
    Auto-check passed
  • UI UX Pro Max

    Peiiii/nextclaw

    A skill your agent uses when the user wants professional UI/UX design guidance, design-system generation, UX review, or stack-specific frontend guidance through a bundled local UI/UX Pro Max dataset…

    260 GitHub stars~2k tokensUpdated yesterday
    Auto-check passed
  • Impeccable

    Peiiii/nextclaw

    A skill your agent uses when the user wants distinctive, production-grade frontend design, anti-generic AI aesthetics, UX critique, technical UI audits, or final polish through bundled Impeccable…

    260 GitHub stars~2.5k tokensUpdated yesterday
    Auto-check passed
  • Curate NextClaw skill resources, including OpenClaw and community sources.

    260 GitHub stars~479 tokensUpdated yesterday
    Auto-check passed
  • Mmx CLI

    Peiiii/nextclaw

    Use mmx to generate text, images, video, speech, and music via the MiniMax AI platform.

    260 GitHub starsUsed in 3 repos~2.7k tokens
    Auto-check passed

Works with

Categories

Questions about Nextclaw Product Visual Assets

What does Nextclaw Product Visual Assets do?

当 NextClaw 产品更新后需要生成、替换、挑毛病或检查官网、GitHub README、用户文档或社交传播中的真实截图、AI 宣传视觉、整页 HTML 宣传预览、社区二维码等对外视觉资产时使用;也用于“更新截图”“重新截一批图”“做宣传页”“生成 campaign 页面”“视觉审稿”“五星挑刺法”或发布前检查视觉资产。普通站点布局开发或只写文章不触发。. Nextclaw Product Visual Assets is an agent skill from Peiiii/nextclaw.

When should I use Nextclaw Product Visual Assets?

Nextclaw Product Visual Assets fits situations like: tasks that involve Technical documentation.

How do I install Nextclaw Product Visual Assets in Claude Code?

Run `npx skills add Peiiii/nextclaw --skill nextclaw-product-visual-assets -a claude-code`. Or copy the skill folder (.agents/skills/nextclaw-product-visual-assets in Peiiii/nextclaw) into .claude/skills/nextclaw-product-visual-assets in your project. Claude Code loads it when a task matches its description.

How do I install Nextclaw Product Visual Assets in Codex?

Run `npx skills add Peiiii/nextclaw --skill nextclaw-product-visual-assets -a codex`. Or copy the skill folder (.agents/skills/nextclaw-product-visual-assets in Peiiii/nextclaw) into .agents/skills/nextclaw-product-visual-assets in your project. Codex loads it when a task matches its description.

Can I use Nextclaw Product Visual Assets 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 Peiiii/nextclaw --skill nextclaw-product-visual-assets -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/nextclaw-product-visual-assets, .gemini/skills/nextclaw-product-visual-assets, .github/skills/nextclaw-product-visual-assets and .opencode/skills/nextclaw-product-visual-assets in your project.

What does Nextclaw Product Visual Assets need to run?

Going by SKILL.md and its folder, Nextclaw Product Visual Assets needs JavaScript for the scripts in its folder and the command-line tools its instructions call (node). Our summary lists: Node.js.

Does Nextclaw Product Visual Assets 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 Nextclaw Product Visual Assets 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Nextclaw Product Visual Assets use?

Nextclaw Product Visual Assets 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 Nextclaw Product Visual Assets use?

About 801 tokens (SKILL.md is roughly 3.2k 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 10k tokens, read only when the agent opens those files.

What are the alternatives to Nextclaw Product Visual Assets?

Skills that share tags, products or a category with Nextclaw Product Visual Assets: Chinese Indie Dev (1c7/chinese-independent-developer, 62k stars), Update .NET OS Packages (dotnet/core, 22k stars), Beautify GitHub Readme (oil-oil/beautify-github-readme, 1.8k stars) and Update .NET Supported OS Matrix (dotnet/core, 22k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Nextclaw Product Visual Assets?

Peiiii (a GitHub user) maintains it in Peiiii/nextclaw, which has 260 GitHub stars. The repository holds 70 skills in this directory. The repository was last updated on October 10, 2026.

Source: Peiiii/nextclaw on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.