Design & Motion · nexu-io/html-anything
prototype-web
Clickable and functional web prototype including navigation, hero section, features section, and CTA
L3 Networked · Declare domain & key scopeV1 Commit-PinnedNetwork AccessDual-pass Audit
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.
1How It Works & Mechanism
This skill is not an executable program, but a plain-text prompt template: the host parses the YAML frontmatter of SKILL.md using regex and loads the body content as the main prompt body.
next/src/lib/templates/loader.ts
const { fm, body } = parseFrontmatter(raw);
The repository describes its directory conventions as: 'SKILL.md — frontmatter (id, scenario, tags, …) + prompt body' and 'Adding a template = adding a folder. No TS code change required'—templates are registered strictly by directory convention; no hardcoded references to "prototype-web" exist anywhere in the TS/TSX codebase, meaning this template has no special-case handling.
The template body is not executed on its own; instead, it is assembled into the "template segment" of the final prompt: shared design directives + this template body + user content.
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
assemblePrompt in shared.ts describes itself as: 'Wrap a per-template instruction body with the shared design directives and the user content tail.'; the request first retrieves the body of this directory via const skill = loadSkill(templateId); before assembly.
The global "content-driven quantity" rule overrides any numbers inside the template: the template only defines layout, style, color scheme, and component libraries, not output length.
next/src/lib/templates/shared.ts
数量**完全由【用户内容】的实际长度和信息结构决定**
This rule is marked with "highest priority, overriding any numbers in the template", explicitly stating that numbers like "6-10 slides" in deck templates are "always treated as reference lower bounds for short examples." Thus, this template specifies available layouts and constraints rather than an upper page limit.
The artifact format is strictly enforced by global constraints: single-file HTML, pure HTML without fences, the first character must be <, and writing files is prohibited (stdout is captured by the frontend).
next/src/lib/templates/shared.ts
不要用 markdown 代码围栏包裹, 不要任何解释性文字
The same section explicitly states: 'Prohibited from using Write / Edit / MultiEdit / Bash / Create / any filesystem tools'—saving files to disk is handled by the host frontend; no disk-write behavior originates from the template.
The frontmatter metadata drives the selector UI rendering (Chinese name, English name, emoji, description, category, scenario, aspect ratio hint, tags, and example metadata).
next/src/lib/templates/loader.ts
zhName: fm.zh_name ?? fm.name ?? id,
Metadata for this template: category=prototype, scenario=design, aspect_hint=1440×900 desktop (without featured, placing it behind the recommended bucket in the selector). The selector groups items by category/scenario and sorts them by featured, all driven by frontmatter without custom code logic.
Bundled example assets are exposed to the frontend via two read-only APIs: example.html is returned as-is into an iframe, while example.md serves as the input content for the "Preview" button.
next/src/app/api/templates/[id]/preview/route.ts
verbatim so it can be loaded into an
example.html returns with response header Content-Type: text/html; charset=utf-8; another route delivers example text to the client via content: skill.exampleMd ?? "". This directory contains: example.md (651 bytes) and example.html (13,472 bytes).
Execution chain (host behavior, not template code): The host spawns a locally authenticated agent CLI, feeds the assembled prompt via stdin, and streams back the HTML from stdout.
next/src/lib/agents/invoke.ts
child.stdin.write(opts.prompt);
The child process runs with cwd=process.cwd() (cwd: opts.cwd ?? process.cwd(),) and stdio is fully piped; the prompt is passed via stdin/--message rather than shell interpolation (not interpolated into a shell command).
The template provides a "page section checklist + key points per section", which the model populates section by section; Pricing is marked optional, indicating the template allows tailoring blocks to business needs.
next/src/lib/templates/skills/prototype-web/SKILL.md
- Sections: Top Nav (logo + 导航 + CTA 按钮)
Complements pricing-page: this template provides the overall site skeleton (touching lightly on Pricing), whereas pricing-page is a deep dive into pricing structures.
Implementation paths are provided for both responsiveness and interactions (md: breakpoints, pure CSS entrance animations, details accordions), baking the two core elements of a "realistic prototype"—adaptability and feedback—into the specification.
next/src/lib/templates/skills/prototype-web/SKILL.md
移动端单栏, 桌面多栏
Among interactions, nav background change on scroll requires minimal JS (self-contained within the artifact), while the rest (hover, details) rely on CSS or native controls.
"High fidelity / launch-ready tomorrow" is the most explicit finish-quality standard among the 9 templates, working alongside shared directives requiring "must use real data provided by the user" to suppress placeholder outputs.
next/src/lib/templates/skills/prototype-web/SKILL.md
- 这是高保真原型, 应该让人觉得"明天就能上线"。
example.md (651 bytes) provides a complete set of materials using a fictional product, Inkstack (positioning, features, reviews, pricing, CTA), serving as a benchmark for "what input should look like".
2Core Capabilities
01Output a complete landing page (rather than snippets)
02Fixed sectional skeleton: Top Nav → Hero → Features → How → Social proof → Pricing (optional) → Footer
03Modern SaaS visual trends (large typography, soft gradients, glassmorphism, entrance animations, pure CSS)
04Responsive breakpoint requirements (single-column mobile / multi-column desktop, at least md:)
05Interactive details: nav color change on scroll, feature card hover lift, FAQ accordion
06Finish-quality standard: "looks launch-ready tomorrow"
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| network | Tailwind Play CDN（共享指令对产物的要求） |
| network | jsdelivr CDN（可选：图表/动画脚本） |
| network | Google Fonts（共享指令指定） |
| cli | 本机 coding-agent CLI（宿主检测 PATH 并 spawn） |
| network | 随包示例 example.html 的外链（产物示例） |
4Recommended Governance & Evidence
Suggested Controls for Safe Operation
For Agent Runtime
Declare allowed domains and key scope
For Administrators
Least privilege keys, retain request logs
Evidence & Triggers (File Paths & Excerpts)
- 网络端点: Declared external network access: No network request code inside the directory; the bundled example.html links to https://cdn.tailwindcss.com in <head> (external link in example artifact,
Audit Notes: . Evaluation scope: Evaluates only this skill directory (SKILL.md + example.html/example.md); the host shell and external links in the artifact are excluded from classification. The directory contains zero script files, zero credential reads, zero disk-write directives, and no runtime external links required by SKILL.md (JS in SKILL.md refers strictly to in-artifact interactions, citing no CDNs, fonts, or APIs). The only endpoint actually present in the directory is an external link in the artifact: example.html references cdn.tailwindcss.com in its <head> (a bundled static example, loaded by the browser during preview). Two points for clarification that do not alter the rating: ① Host wrapper behavior (loader.ts → assemblePrompt → agents/invoke.ts spawns a local CLI; claude arguments include --permission-mode bypassPermissions, and envFor passes environment variables fully via {...process.env}) belongs to the host and is documented in verdict.risks; ② The shared design directives injected by the host require the artifact to link Tailwind Play / Google Fonts in <head> (runtime external links of the artifact).
5Second-Pass Verification
- [ok] skill 目录资产面（脚本 / references / 数据 / 模板） — 目录实为 3 个文件：SKILL.md 与 example.html、example.md；无 scripts/、无 references 目录、无任何可执行文件（.sh/.py/.js/.mjs/.ts 零命中）。
- [ok] 「无脚本、无网络、无凭证、无写盘」的反例搜索 — 对目录递归 token 扫描（api[_-]?key|token|secret|\.env|process\.env|child_process|fetch\(|curl |wget |npm |npx |exec\(|subprocess|writeFile|fs\.）：零命中；SKILL.md 另按 http|CDN|cdn|font|API|api|fetch|Google|script 扫描，仅命中 font-semibold / font-black 这类字重类名，无端点。
- [ok] 官方描述 vs 实际能力（有无夸大） — frontmatter description（可点击的功能性 Web 原型, 含导航、英雄区、特性区、CTA）与正文一致：描述承诺的版式要素都能在正文找到对应条目，未见正文未支持的越界承诺。
- [ok] 外部资源/工具条目逐条回源 — external_deps 中的仓库级条目（Tailwind Play CDN / jsdelivr / Google Fonts / 本机 agent CLI）逐条回到 shared.ts 与 argv.ts 原文取证；本模板另有 example.html 的 cdn.tailwindcss.com 外链，已在该 example.html 原文中定位。
- [ok] 宿主执行链（供 security.reason / verdict.risks 使用，不参与判级） — prompt 经 stdin 送入被 spawn 的本机 CLI（invoke.ts），HTML 从 stdout 分流捕获；claude 参数含 --permission-mode bypassPermissions、envFor 透传 process.env；预览 iframe sandbox="allow-scripts allow-same-origin"（template-picker.tsx:544 / preview-pane.tsx:297）。
- [ok] 路径与 commit 一致性 — 工作副本 /var/ytdown/skills-portal/spy-repos/html-anything 的 git HEAD = 553ed98c283f9c0f489902d035416a972d6a9699（与任务表 pin 一致）；skill.path=next/src/lib/templates/skills/prototype-web 下确有 SKILL.md，全仓无第二份同名模板。
- [ok] "nav 滚动变色"是否要求外部 JS 依赖 — SKILL.md 只写 "- 添加交互: nav 滚动变色; 特性卡 hover 浮起; FAQ 可手风琴展开"，未点名任何库或 CDN；example.html 除 Tailwind Play 外无其他脚本。
- [ok] example.md 的虚构品牌素材是否构成外部数据抓取 — example.md 是仓库内静态文本（Inkstack 的定位/特性/评价/价格），由 /api/templates/<id>/example 作为 JSON content 返回给前端，无抓取行为。
6Verdict & Scenarios
Best for: Ideal for high-fidelity prototypes of SaaS/product landing pages: full pages ranging from navigation to footer that can be clicked through in a browser and used as design review baselines.
Not for: Not suitable for those who only want a pricing page (use pricing-page) or a single-screen design (use mobile-app); not suitable for engineering needs requiring a real backend or form submissions—the artifact is a static prototype; also not suitable for scenarios requiring pixel-perfect adherence to strict brand guidelines (the template only specifies directions like "modern SaaS trends").
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload prototype-web.tar.gz
sha256:
Option B · Copy Guide for Agent6423f76bc45f7834…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.