Design & Motion · nexu-io/html-anything

web-proto-brutalist

Name: web-proto-brutalist
Author: nexu-io/html-anything

Swiss industrial-print style: monolithic grotesque typography, giant numbers, and ASCII ornaments

L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit

Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0（仓库根 LICENSE 文件；GitHub API license.spdx_id = Apache-2.0）Commit 553ed98c28

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 rather a "template" for html-anything: a directory (SKILL.md + example.html[/example.md]) scanned and read from disk at runtime by loader.ts—adding a new template simply means adding a new directory without modifying any TypeScript code.

next/src/lib/templates/loader.ts

Adding a template = adding a folder. No TS code change required; the API

SKILLS_DIR is fixed to src/lib/templates/skills under the application cwd; listSkills() traverses top-level subdirectories, filters them via isValidBundledId, and reads SKILL.md directory by directory to parse frontmatter. Thus, both the "selector metadata" and the "generation prompt body" originate from the very same file.

The frontmatter provides metadata for the selector/API (zh_name/en_name/emoji/description/category/scenario/aspect_hint/featured/recommended/tags) and is mapped to SkillMeta via fmToMeta(); only the body text following the frontmatter serves as the specification for the model.

next/src/lib/templates/loader.ts

zhName: fm.zh_name ?? fm.name ?? id,

The id is derived from the directory name; example metadata (example_id/name/format/tagline/desc/source_url) is generated as SkillExampleMeta only when the directory contains example.md/html. The body is intentionally excluded from the list API (comment: Body is excluded so we can return the entire registry in one cheap fetch).

During generation, this template body is used as the prompt body: /api/convert uses assemblePrompt() to concatenate "global design directives + this template's body + user content" into a single prompt, which is fed to the host's local agent CLI, and HTML is captured via stdout streaming.

next/src/app/api/convert/route.ts

prompt = assemblePrompt({ body: skill.body, content, format });

The same route also contains editFromHtml/editFromContent "minimal diff editing" branches; along this pipeline, the template body remains purely a string without evaluation or execution.

A block of global shared directives (SHARED_DESIGN_DIRECTIVES) precedes the template body, uniformly prepending technical and content disciplines to every template—the external CDN and font links commonly found in example HTML originate here (injected by the host shell, not requested by the template itself).

next/src/lib/templates/shared.ts

通过 CDN 引入 Tailwind v3 Play (https://cdn.tailwindcss.com) 与所需的 Google Fonts。

The template body only governs style/layout/components and does not repeat these hard requirements. Evaluation only considers the template's own directory; these endpoints are host shell behaviors documented in security.reason for transparency.

Artifacts are returned as stdout text: global directives explicitly forbid the agent from using the file system, and persisting files to disk is handled by the frontend—consequently, the template directory contains no scripts and has no disk-writing capabilities.

next/src/lib/templates/shared.ts

**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。

The original instructions state: "Do not write HTML to any .html files... The frontend directly captures your stdout text, and persisting files to disk is handled by the frontend." The generated artifact is ultimately saved to task records and exported by the frontend.

example.html is a pre-rendered example bundled with the package: /api/templates/<id>/preview returns it as-is with text/html to an iframe (for inline preview in the selector), while /api/templates/<id>/example returns both example.md and example.html together.

next/src/app/api/templates/[id]/preview/route.ts

return new Response(skill.exampleHtml, {

The example is used strictly for preview and documentation and does not participate in generation prompts (generation uses only the body of SKILL.md); therefore, its external links do not affect the template's own capability boundaries.

The body defines the style through four verifiable aspects: a newsprint canvas with hairline grid dividers, monolithic black grotesque headings, viewport-bleeding giant numbers, and hazard-red accent colors with ASCII ornaments.

next/src/lib/templates/skills/web-proto-brutalist/SKILL.md

- Newsprint canvas + hairline grid dividers

The continuing points specify: "- Monolithic black grotesque headings, viewport-bleeding giant numbers", "- Hazard-red accent + ASCII ornaments (┌─┘ etc.)", "- Sections with minimalist numeric numbering"—all four are typography-level constraints rather than subjective adjectives.

The example solidifies the style into a set of design tokens using CSS variables: --paper #F4F4F0 (newsprint), --hazard #E61919, Archivo Black for display, and JetBrains Mono for meta.

next/src/lib/templates/skills/web-proto-brutalist/example.html

--hazard: #E61919;

This is an actionable translation of "Swiss industrial print": paper-like neutral tones + a single hazard color + an extreme contrast of two font weights.

The example's hazard color is used for structural separation (hr.hazard and the 1px top border of meta-row) rather than decorative accents.

next/src/lib/templates/skills/web-proto-brutalist/example.html

hr.hazard { border: 0; border-top: 1px solid var(--hazard); margin: 0; }

Emphasis within headings also uses the same variable (.red { color: var(--hazard); }), enforcing the discipline of having "only one accent color."

The example achieves an ASCII-style decorative frame using bracket borders (.ascii-frame::before content: '[' / ::after content: ']') instead of the box-drawing characters like ┌─┘ illustrated in the body.

next/src/lib/templates/skills/web-proto-brutalist/example.html

.ascii-frame::before { content: '['; color: var(--hazard); }

The body mentions "ASCII ornaments (┌─┘ etc.)", whereas the example implements this with [ … ] brackets and grid lines; this represents an implementation variant (same semantic intent, different character set) and has been logged in the verification sheet.

On the CLI side, there is an additional keyword direct-matching path: skills-matcher.ts maps keywords in user content directly to this template id; a hit scores confidence = hit count * 2 + 3, and reaching the threshold of 3 triggers local rules without asking the model to select a template.

cli/src/skills-matcher.ts

[["brutalist", "工业", "粗野", "swiss", "industrial print"], "web-proto-brutalist"],

brutalist, 工业, 粗野, swiss, and industrial print match directly to this template, sharing the design scenario weighting with web-proto-soft and web-proto-editorial.

Threshold constants used for CLI fallback matching: content length must exceed 60 characters to enable AI summary matching; the strong signal threshold is 3.

cli/src/skills-matcher.ts

const MIN_CONTENT_LENGTH_FOR_AI = 60;

Additionally, SCENARIO_SIGNALS weights keywords according to the template scenario, and fallbackMatch scores using tags/zhName/description; only when both layers fail is the agent invoked for summary matching.

The host shell renders examples and artifacts using an iframe with sandbox="allow-scripts allow-same-origin" (allowing scripts and same-origin access)—this is an architectural trade-off of the product shell, documented as a risk, and does not affect the evaluation of this skill.

next/src/components/template-picker.tsx

sandbox="allow-scripts allow-same-origin"

preview-pane.tsx and deck-viewer.tsx share the same configuration; inline JS in example HTML only executes during browser previews, and the skill itself executes no scripts.

2Core Capabilities

01Newsprint canvas + hairline grid dividers

02Monolithic black grotesque headings + viewport-bleeding giant numbers

03Hazard-red accent color (used structurally)

04ASCII-style decorative frames

05Minimalist numeric numbering for sections

06Monospace font for meta rows (8ch label columns)

3External Dependencies

Kind	Dependency / Endpoint
network	Google Fonts（Archivo Black / Archivo / JetBrains Mono）
network	Google Fonts 静态资源域（preconnect）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Can be auto-loaded

For Administrators

Evidence & Triggers (File Paths & Excerpts)

SKILL.md: Pure prompt directives and rule text, without script execution or external side effects

Audit Notes: Evaluation target = this skill directory (next/src/lib/templates/skills/web-proto-brutalist/). Verified file by file: zero scripts, zero credential access, and zero disk writes. The only external endpoints appearing in the directory are Google Fonts (Archivo Black / Archivo / JetBrains Mono) and the Google Fonts static asset preconnect domain, all located inside example.html as an "artifact example". The body of SKILL.md specifies only layout, style, and font family names without referencing any runtime external APIs; hence, it is a pure directive template = green. Host-side note (not factored into grading): the html-anything product shell concatenates the body into the prompt via assemblePrompt(), spawns a local agent CLI, and injects cdn.tailwindcss.com and Google Fonts requirements (next/src/lib/templates/shared.ts); the preview iframe uses sandbox="allow-scripts allow-same-origin" (next/src/components/template-picker.tsx).

5Second-Pass Verification

[ok] skill 目录文件清单 — find 得 SKILL.md + example.html，无 scripts/references。
[ok] 无脚本执行 — grep -c "<script" example.html = 0。
[ok] 外部端点仅字体 — example.html 仅 fonts.googleapis.com css2 与 fonts.gstatic.com preconnect；SKILL.md 正文无 URL。
[discrepancy] ASCII 装饰的具体字符 — SKILL.md 写「ASCII 装饰 (┌─┘ 等)」，示例无 ┌/─/┘ 命中，改用 .ascii-frame 的 [ ] 方括号；属实现变体，语义（机械式框架标记）一致。
[ok] hazard 色是否真结构性使用 — --hazard 用于 hr.hazard 分隔线、.brand sup、.meta-row b、.ascii-frame 伪元素、.abstract 标签等结构位置，非纯点缀。
[ok] CLI 匹配器路由 — cli/src/skills-matcher.ts 存在 [["brutalist", "工业", "粗野", "swiss", "industrial print"], "web-proto-brutalist"] 行。
[ok] 判级 green 自证 — 目录零脚本文件、零凭证、零写盘；正文无运行时接口，端点仅见示例 → green。
[ok] official_desc 逐字 — meta.official_desc 取自 frontmatter description 原文「Swiss industrial-print 风: 单字 grotesque、巨数字、ASCII 装饰」。

6Verdict & Scenarios

Tokenized style with low reuse cost: reskinning requires only modifying --hazard/--display while keeping layout structure intact

Strict accent color discipline: exactly one hazard red across the entire page, restricted to structural lines and emphasized text

Script-free and purely static: minimal cost for batch screenshots and exports

Meticulous typography details: meta rows aligned on an 8ch grid with small uppercase monospace text, delivering a distinct industrial print aesthetic

Best for: Ideal for opinionated product homepages, portfolios, event landing pages, and brand sites requiring an "authoritative, uncompromising" tone; also serves well as a control archetype among three style prototypes (displayed alongside editorial/soft).

Not for: Not suitable for consumer product pages prioritizing approachability, children/educational sites, or scenarios requiring soft gradients and rounded corners; not suitable for information-dense dashboards that rely on card drop shadows for visual hierarchy.

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload web-proto-brutalist.tar.gz

sha256: aa6036af392f1c58…

Option B · Copy Guide for Agent

install.json

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 553ed98c28.