菜单
Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | brutalist |
| description | Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints. |
Framework note: Examples in this skill default to HTML/CSS. Adapt all framework-specific code to your project's actual stack.
Name: Industrial Brutalism & Tactical Telemetry Interface Engineering Description: Advanced proficiency in architecting web interfaces that synthesize mid-century Swiss Typographic design, industrial manufacturing manuals, and retro-futuristic aerospace/military terminal interfaces. This discipline requires absolute mastery over rigid modular grids, extreme typographic scale contrast, purely utilitarian color palettes, and the programmatic simulation of analog degradation (halftones, CRT scanlines, bitmap dithering). The objective is to construct digital environments that project raw functionality, mechanical precision, and high data density, deliberately discarding conventional consumer UI patterns.
The design system operates by merging two distinct but highly compatible visual paradigms. Pick ONE per project and commit to it. Do not alternate or mix both modes within the same interface.
Derived from 1960s corporate identity systems and heavy machinery blueprints.
Derived from classified military databases, legacy mainframes, and aerospace Heads-Up Displays (HUDs).
Typography is the primary structural and decorative infrastructure. Imagery is secondary. The system demands extreme variance in scale, weight, and spacing.
clamp(4rem, 10vw, 15rem)).-0.03em to -0.06em), forcing glyphs to form solid architectural blocks.0.85 to 0.95).10px to 14px / 0.7rem to 0.875rem).0.05em to 0.1em) to simulate mechanical typewriter spacing or terminal matrices.1.2 to 1.4).The color architecture is uncompromising. Gradients, soft drop shadows, and modern translucency are strictly prohibited. Colors simulate physical media or primitive emissive displays.
CRITICAL: Choose ONE substrate palette per project and use it consistently. Never mix light and dark substrates within the same interface.
#F4F4F0 or #EAE8E3 (Matte, unbleached documentation paper).#050505 to #111111 (Carbon Ink).#E61919 or #FF2A2A (Aviation/Hazard Red). This is the ONLY accent color. Used for strike-throughs, thick structural dividing lines, or vital data highlights.#0A0A0A or #121212 (Deactivated CRT. Avoid pure #000000).#EAEAEA (White phosphor). This is the primary text color.#E61919 or #FF2A2A (Aviation/Hazard Red). Same red, same rules.#4AF626): Optional. Use ONLY for a single specific UI element (e.g., one status indicator or one data readout) — never as a general text color. If it doesn't serve a clear purpose, omit it entirely.The layout must appear mathematically engineered. It rejects conventional web padding in favor of visible compartmentalization.
1px or 2px solid) to delineate distinct zones of information. Horizontal rules (<hr>) frequently span the entire container width to segregate operational units.border-radius. All corners must be exactly 90 degrees to enforce mechanical rigidity.Standard web UI conventions are replaced with utilitarian, industrial graphic elements.
[ DELIVERY SYSTEMS ], < RE-IND >>>>, ///, \\\\®), copyright (©), and trademark (™) symbols functioning as structural geometric elements rather than legal text.+) at grid intersections, repeating vertical lines (barcodes), thick horizontal warning stripes, and randomized string data (e.g., REV 2.6, UNIT / D-01) to simulate active mechanical processes.To prevent the design from appearing purely digital, simulated analog degradation is engineered into the frontend via CSS and SVG filters.
mix-blend-mode: multiply overlays combined with SVG radial dot patterns.repeating-linear-gradient to the background to simulate horizontal electron beam sweeps (e.g., repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px)).display: grid; gap: 1px; with contrasting parent/child background colors to generate mathematically perfect, razor-thin dividing lines without complex border declarations.<data>, <samp>, <kbd>, <output>, <dl>) to accurately reflect the technical nature of the telemetry.clamp() functions exclusively for macro-typography to ensure massive text scales aggressively while maintaining structural integrity across viewports.Analyzes a new project's codebase by asking targeted questions until it has enough context, then writes a rich initial memory vault — decisions, patterns, architecture, and a seeded MOC. Use when setting up memory for the first time on a project, or when the vault is empty and agents have no prior context.
Compress natural language memory files (CLAUDE.md, AGENTS.md, todos, preferences) into caveman format to save input tokens. Preserves all technical substance, code, URLs, and structure. Compressed version overwrites the original file. Human-readable backup saved as FILE.original.md. Trigger: /caveman:compress <filepath> or "compress memory file"
Provides a deep dual-assessment design critique combining AI design review with manual pattern analysis. Use when the user wants expert design feedback, heuristic evaluation, or a thorough UX critique.
Senior UI/UX Engineer. Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, artifacts, dashboards, or applications — or any request for UI/UX work, styling, beautification, or frontend code. Enforces Anti-Codex aesthetics inspired by Linear, Raycast, Stripe, and GitHub. Driven by metric dials, strict component architecture, hardware-accelerated motion, and curated design systems.
Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.
Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.