Nasapunk Design
NASApunk retro-futurist frontend design system with a Starfield-inspired modern layer — NASA golden age (1960s–1980s) aesthetic evolved with Starfield's contemporary polish, for building or restyling web pages. Worn white baked-paint panels, gold Kapton insulation foil crinkle gradients, worm-style single-stroke red wordmark, Swiss grid typography (Helvetica + monospace stencil labels), technical documentation textures (rubber stamps, blueprint grids, hazard stripes, rivets, monospace spec tables, mission patches, doc-control bars) — plus Constellation-style four-color emblem stripes, soft-sha
Install
npx skills add duanth/NASA-Punk-UI-SKILL --skill nasapunk-designgit clone --depth 1 https://github.com/duanth/NASA-Punk-UI-SKILL.git /tmp/NASA-Punk-UI-SKILL
mkdir -p ~/.claude/skills
cp -r /tmp/NASA-Punk-UI-SKILL/. ~/.claude/skills/nasapunk-designPersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# NASAPUNK DESIGN SYSTEM (× STARFIELD-MODERN) Build pages that read as "1970s government aerospace documentation meets worn flight hardware — polished with Starfield's modern brand-system confidence." Reference implementation (baseline template): `assets/reference.html` (open in browser — single file, zero dependencies). Copy-paste CSS recipes: `references/snippets.css`. --- ## 0. STACK PORTABILITY (global constraint) Every law and recipe in this skill MUST remain implementable across **React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui**: - The single-file HTML reference is the CANONICAL spec. When the target stack differs, translate tokens/structure - never drop laws. - Tokens: CSS custom properties are canonical; map them 1:1 to platform equivalents (SwiftUI Color/Font extensions, RN theme object, Flutter ThemeData, Tailwind theme.extend.colors). - Effects matrix: hatching/stripe fills = repeating-linear-gradient (web/Tailwind arbitrary values) | SwiftUI `.linear-gradient` stripes or ShapeStyle | RN gradient lib | Flutter `DecoratedBox`/CustomPainter. Donut/dial = conic-gradient | SwiftUI `Circle().trim(AngularGradient)` | RN `react-native-svg` Circle strokeDasharray | Flutter CustomPaint. blend/mask tricks degrade gracefully - substitute precomputed colors where a stack lacks mask support.
Details
- Skill name
nasapunk-design- Repository
- duanth/NASA-Punk-UI-SKILL
- Repo updated
- 27 August 2026
FAQ
What does the Nasapunk Design skill do?
NASApunk retro-futurist frontend design system with a Starfield-inspired modern layer — NASA golden age (1960s–1980s) aesthetic evolved with Starfield's contemporary polish, for building or restyling web pages. Worn white baked-paint panels, gold Kapton insulation foil crinkle gradients, worm-style single-stroke red wordmark, Swiss grid typography (Helvetica + monospace stencil labels), technical documentation textures (rubber stamps, blueprint grids, hazard stripes, rivets, monospace spec tables, mission patches, doc-control bars) — plus Constellation-style four-color emblem stripes, soft-sha
How do I install the Nasapunk Design skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add duanth/NASA-Punk-UI-SKILL --skill nasapunk-design. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Is Nasapunk Design popular?
It lives in duanth/NASA-Punk-UI-SKILL, which has 5 GitHub stars and 0 forks.
Related skills
Project Steward
5CheshireMew/project-steward
从项目过程与结果提炼治理方法并在明确要求时自我进化;按实施计划审计完成度,研究整理仓库,预防返工,沿根因修复跨层缺陷,治理架构、目录职责、用户链、UI/UX、文档、日志、环境与发布。Use for project-history learning/evolution; audit a plan or repository; understand or organize a codebase; inspect external-tool compatibility, durable operations, and project governance. Excludes isolated function, security, dependency, CI, or monitoring-only work.
Logo to Stickers
5huyanxius/logo-to-stickers
Turn a logo, brand mark, or existing IP into a consistent set of playful die-cut paper stickers. Use for brand character extensions, logo personification, website sticker assets, or sticker variations that need actual transparent images; not for redesigning the logo itself.
UI Design Intelligence
5DevvNirvana/tvastar-design-claude-code-skill
World-class UI/UX design intelligence — Tvastar v4.0. TRIGGER on: /design /preview /approved /apply /review /ship /component /heal /tokens /dark /a11y /cro /color /typography /motion /extract /storybook, build page, build component, landing page, hero section, dashboard, nav, card, animation, dark mode, layout, color palette, typography, redesign, make it look better, add animations, style this, improve UI, add polish, professional look, modern design, review my code, check before deploy, is this ready to ship.
Logo Intro
5CJ10110425/logo-intro
Build an animated WebGL logo intro from a brand's SVG logo. The mark arrives from a lens-warped, colour-fringed close-up, the wordmark pulls out of it, a gradient bloom grows, a lock-in beat (a badge pops, two parts snap together, inner layers rise, or the mark spins) sends out a ring, and a shimmer sweeps the logo. Outputs a single HTML file, an embeddable site splash, or an MP4/WebM video. Use when someone asks for a logo animation, brand intro, opening/splash animation for a website, an intro video like ElevenLabs', or to animate a specific company's logo.
Visual Identity Designer
5ali4o/visual-identity-designer
Build a professional, precise visual identity (brand identity) for a project, startup, or business — logo direction, color system, typography, application mockups — via a structured 9-stage agency workflow ending in two polished deliverables — a Brand Identity Guide and a Design Language System (built with the docx skill, in the user's chosen language). Trigger any time the user attaches, pastes, or describes a project idea/brief and asks for a "visual identity", "brand identity", "logo", "branding", "brand kit", "brand guide", "design language system", "هوية بصرية", or similar — even without
Lean Canvas Coach
5xntj-ai/lean-canvas-coach
交互式教练:用教练式提问带一位创始人/老板走完一张「精益画布」(Lean Canvas 9 格), 然后揪出那个最要命的「关键假设」,再帮他设计一个「最低成本验证」去先验它。 不是做一次就完——支持每月/每周把新情况丢进来「重跑」,看关键假设变没变。 三模式:interview(我访谈你→画布→关键假设→最低成本验证)、rerun(拿旧画布+新情况→重跑更新)、script(我出提问脚本你自己填)。 是**会做功课的教练**——每一格你答完,我都补一手(调研核实/起草候选/先立后破地质疑/点破框架坑),跟你共创,不把画布的活儿全压给你;不是只会问的问卷机,也不是空表让你自己填。 Use when: 用户要做商业模式分析/精益画布/lean canvas、说"帮我理一理这门生意""我这想法到底成不成""最大的风险在哪""帮我做个商业画布""访谈我出画布"、或已有画布要重跑更新。 NOT for: 写商业计划书/BP 全文、纯财务建模、个人IP定位(用 ip-canvas-coach)、写单篇文案(用 voice-dna / luo-restyle)。
Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.