菜单
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.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Leonxlnx/taste-skill --skill industrial-brutalist-ui命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.
The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
基于 SOC 职业分类
正在显示 SKILL.md
| name | industrial-brutalist-ui |
| 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. |
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.