메뉴
Brand design system for Terraforming Mars (TFM). Use when building or styling any frontend page/component in this project. Defines the visual language — colors, typography, spacing, component patterns — for a dark sci-fi Mars colonization theme.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. Call with 'craft' for shape-then-build, 'teach' for design context setup, or 'extract' to pull reusable components and tokens into the design system.
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
Execute a SETI project implementation task by reading its plan, architecture, and rules, then implementing the code. Use when the user asks to "run task X-Y", "implement task", "do task", "execute task", or references a task number like "0-1", "1-3", "2-5", etc.
| name | brand-guidelines |
| description | Brand design system for Terraforming Mars (TFM). Use when building or styling any frontend page/component in this project. Defines the visual language — colors, typography, spacing, component patterns — for a dark sci-fi Mars colonization theme. |
High-tech Mars colonization command center — the feeling of a cutting-edge mission control interface overlaid on the dark Martian sky. Deep, atmospheric, with luminous data displays and holographic-inspired UI elements. Think: deep space meets neon-traced engineering blueprints.
All colors are defined as Tailwind CSS custom values in tailwind.config.js under theme.extend.colors.mars.
| Token | Value | Usage |
|---|---|---|
mars-void | #0a0e1a | Deepest background (page body) |
mars-deep | #111a2e | Card / panel background |
mars-surface | #1a2540 | Elevated surfaces, hover states |
mars-border | #263050 | Borders, dividers, subtle lines |
| Token | Value | Usage |
|---|---|---|
mars-rust | #e2520e | Primary accent — Mars surface orange (brighter) |
mars-amber | #f59e0b | Warm highlight — gold/amber actions |
mars-ember | #f97316 | Hover state for primary accent |
mars-sand | #c48b5c | Muted warm tone — tags, secondary info |
| Token | Value | Usage |
|---|---|---|
mars-cyan | #22d3ee | Technology / info — links, data highlights (brighter) |
mars-teal | #2dd4bf | Success / positive state (brighter) |
mars-red | #ef4444 | Error / destructive actions |
mars-yellow | #facc15 | Warning / confirming state |
| Token | Value | Usage |
|---|---|---|
mars-text | #f1f5f9 | Primary body text — near white |
mars-text-dim | #cbd5e1 | Secondary text — clearly readable |
mars-text-faint | #94a3b8 | Tertiary / labels — still readable |
Ubuntu, sans-serif (consistent with existing game UI)mars-text color.mars-text or mars-text-dim.font-mono (monospace), semi-bold for numerical emphasis.text-xs, mars-text-faint.All non-game pages share a top navigation bar (NavBar.vue) that provides:
history.back()The NavBar uses a glass-morphism style with:
background: rgba(10, 14, 26, 0.85)
backdrop-filter: blur(12px)
border-bottom: 1px solid mars-border
Every page uses the shared Mars background pattern:
background-color: mars-void;
background-image:
radial-gradient(ellipse at 50% -10%, rgba(226,82,14,0.12) 0%, transparent 50%),
radial-gradient(ellipse at 80% 90%, rgba(34,211,238,0.05) 0%, transparent 40%),
linear-gradient(rgba(38,48,80,0.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(38,48,80,0.3) 1px, transparent 1px);
background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
All page content wraps in max-w-5xl mx-auto with appropriate padding.
Pages should add pt-4 padding since the NavBar occupies the top.
bg: mars-deep
border: 1px solid mars-border
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px))
box-shadow: 0 4px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.03)
hover: border-color transitions to mars-rust/40
Used on panels and cards to give a sci-fi command console feel:
.corner--tl { top: 0; left: 0; border-top + border-left: 2px solid mars-rust/60 }
.corner--br { bottom: 0; right: 0; border-bottom + border-right: 2px solid mars-rust/40 }
A gradient line used as section divider:
height: 1px;
background: linear-gradient(to right, mars-rust, mars-rust/30 25%, mars-border/50 55%, transparent);
bg-gradient-to-r from-mars-rust to-mars-ember text-white — main CTA, with glow shadowbg-mars-surface hover:bg-mars-border text-mars-text-dim hover:text-mars-text — neutraltext-mars-teal border-mars-teal/50 hover:bg-mars-teal/15 — join / confirmtext-mars-red border-mars-red/30 hover:bg-mars-red/15 — kick / close / destructivepx-4 py-2 font-medium transition-all duration-200bg-mars-surface/80 text-mars-sand border border-mars-border/60 text-xs font-mediumplayer_translucent_bg_color_* classesborder border-dashed border-mars-border/80 text-mars-text-fainttext-xs uppercase tracking-wider text-mars-text-faint font-mono border-b border-mars-borderborder-b border-mars-border/30 hover:bg-mars-surface/40 transition-colorstext-mars-text for primary data, text-mars-text-dim for secondarybg-mars-deep text-mars-text border-mars-border/60 with bottom accent line in mars-rusttext-mars-text-dim hover:text-mars-text hover:bg-mars-deep/50Follow Tailwind defaults. Use generous padding on cards (px-5 py-4) and compact inner elements. Maintain consistent gap values (gap-3 for related items, gap-5 for sections).
lg:flex-wrap)cards.less or card components like Card.vue).player_bg_color_* and game-related CSS classes.