Skip to content
Get packs

Brutalist Web Prototype

Makes the agent draft web page prototypes in a bold Swiss industrial-print style

Source Download skill
Repository
nexu-io/html-anything
Stars
9,376
Licence
Apache-2.0
Files
2 files

What it does

This skill is a style template that tells an AI agent to build web page mockups in a stark, brutalist look: newsprint-coloured background, thin grid lines, heavy black sans-serif headings, oversized numbers, red warning accents and ASCII-style box-drawing decorations. Once installed, asking the agent for a landing page or prototype produces output in this visual language instead of a generic default. A sample HTML file shows the intended result.

Great for

  • Designers who want a bold, authoritative Swiss-style concept quickly
  • Front-end developers exploring an editorial or industrial visual direction
  • Teams producing throwaway prototypes to test a brutalist aesthetic

Skip it if

  • Projects needing a soft, friendly or highly accessible brand look, since the skill explicitly aims for a harsh, unfriendly feel
  • Production sites that must meet strict accessibility or brand guidelines without manual review, because the style is not tuned for those requirements

Try asking

  • “Make a desktop landing page prototype for a fintech product in brutalist Swiss style”
  • “Design a 1440px wide portfolio homepage with huge numerals and hairline dividers”
  • “Create a single-page event announcement with hazard-red accents and ASCII borders”
Step-by-step guide: how to use Brutalist Web PrototypeInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    web-proto-brutalist.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip web-proto-brutalist.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip web-proto-brutalist.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the content and sections you want, since the skill only sets the visual style and layout rules
  • Mention the target width if it differs from the default 1440px desktop hint
  • Review the output for readability, as the style deliberately prioritises impact over comfort

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/html-anything under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.