evangelion-design

Design Evangelion-inspired web and mobile interfaces with NERV-style command-center and HUD language.

1|Updated May 6, 2026
One-click install
npx skills add https://github.com/surfingalien/FinSurfing --skill evangelion-design-surfingalien
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: evangelion-design
Source: https://github.com/surfingalien/FinSurfing/tree/main/.claude/skills/evangelion-design
Command: npx skills add https://github.com/surfingalien/FinSurfing --skill evangelion-design-surfingalien

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Applying Evangelion-style interface language often degrades into generic neon cyberpunk or literal franchise copies. This Skill provides a disciplined design system for building original NERV-like command centers, HUDs, sync monitors, and diagnostic screens with correct palette, typography, composition, and motion rules. ## Core Features & Use Cases - Screen Role Framework: Choose from hud, command-center, psychograph, sync-ladder, reactor-diagnostic, breach-monitor, warning-state, and title-card archetypes before composing layouts. - Complete Style Guide: Reference files define dark-first palettes with hot signal families, condensed sans and mono typography, geometric composition patterns, and mechanical state-driven motion timings. - Pitfall Guardrails: Built-in guidance avoids literal frame copying, information overload, missing context cues, style-over-function tradeoffs, and accessibility failures like red-green-only signaling. - Use Case: A designer building a sci-fi monitoring dashboard uses the skill to structure a reactor-triptych layout with amber-on-black telemetry, stepped sync arrays, and scan-sweep animations that remain legible with motion disabled. ## Quick Start Use the evangelion-design skill to design a breach-monitor dashboard screen with a countdown timer, penetration bar, and rack array in amber and red on black.

Frequently Asked Questions about evangelion-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design an Evangelion-style UI without copying the anime?

Extract structural principles like layered rings, repeated sync arrays, and hard-edged frames rather than replicating specific screens. Adapt the scale and rhythm to your product's data density, and never reuse franchise logos, title cards, or one-to-one compositions.

What color palette works for NERV-style command center interfaces?

Use dark neutrals for at least 70 percent of the screen with one hot signal family such as amber or red as the main emphasis. Add green or teal only as semantic state indicators, and avoid full-spectrum neon mixes that read as generic cyberpunk.

How should animation work in Evangelion-inspired interfaces?

Motion should be mechanical and state-driven: counters tick in discrete steps, scanners sweep linearly, traces plot across graphs, and alerts pulse in stepped loops. Avoid spring easing, bounce, parallax, and continuous ambient glows.

Does this design style work on mobile screens?

Yes, but reduce simultaneous modules to one hero instrument per screen and collapse side bays into stacked rails, tabs, or swipable diagnostics. Convert ultra-wide triptychs into a central analyzer with collapsible panels rather than compressing everything into illegible miniatures.

How do I keep dense telemetry dashboards accessible?

Never rely on red-green color alone; pair every signal with labels, icons, or shape distinctions. Maintain WCAG AA contrast ratios, establish clear visual hierarchy with one hero element, and ensure all state changes remain readable with motion disabled.