Optimistic solarpunk web design for a greener tomorrow: solar-glass panels, sun-arc energy meters, living data vines, warm cream paper, deep botanical green, and solar gold. Teaches agents to build bright, hopeful clean-energy and eco home-goods pages where every claim is a living number.
Build me a solarpunk landing page for a solar home-goods brand, with a sun-arc energy meter and a sunlight calculator.
你能得到
- A complete solarpunk design system — SKILL.md with workflow and IP guardrails, design tokens, component specs, and paste-ready snippets — plus two working demos: a solar home-goods landing page with sun-dial hero, product filters, sun-arc meter, energy calculator and FAQ, and a Sunpetal Lamp Kit configurator with finish, panel size, and live pricing.
适合场景
- Sustainable brands, clean-energy products, eco home-goods stores, urban farms, and community solar pages that must feel hopeful, not alarming.
不适合
- Dark cyberpunk pages, muted historical Art Nouveau pastiche, luxury minimalism with no sun or data, or corporate ESG report pages.
- 名称
- Solarpunk UI
- 下载数
- 0
- 分类
- 设计
- 包含 skills
- 1
下载与安装
更新内容: Initial release: solarpunk design system with solar-glass cards, sun-arc meters, living counters, energy calculator, and two demos (Solara solar home-goods landing page and Sunpetal Lamp Kit configurator).
登录用户免费下载。
1. 下载 ZIP
点击上方按钮下载打包好的 skill，内含 SKILL.md 及全部配套文件。
2. 解压到 agent 的 skills 目录
解压后确保 SKILL.md 直接位于以 skill 命名的文件夹内：
unzip solarpunk-ui-v1.0.0.zip -d ~/.claude/skills/solarpunk-ui/各 Agent 的 skills 目录
- Claude Code
- ~/.claude/skills
- Cursor
- ~/.cursor/skills
- Codex
- ~/.codex/skills
- GitHub Copilot
- ~/.copilot/skills
3. 重启你的 agent
下次启动时 agent 会自动识别新 skill，直接问它能做什么。
喜欢这个免费 skill？Premium 解锁 77 个独家 skills。
一次订阅，解锁全部高级 skill、prompt 和内容包，以及未来的每一期新品。
评价
相关技能
Stripe-Style UI Design
Stripe-Style UI Design
Fintech-grade marketing pages in a gradient-mesh language — luminous white canvas, animated warm-to-cool gradient hero band, thin 300-weight display type with tight tracking, one indigo action color, near-square geometry, deep-navy dashboard mocks. Build fintech landing pages, pricing pages, and API/developer marketing with financial-infrastructure polish.
Claude Code · Codex · Cursor · Copilot +3
Aurora-Glass UI Design
Aurora-Glass UI Design
Dark, high-motion landing pages in the aurora-glass language — drifting multi-color aurora gradients, frosted-glass cards, glow CTAs, mouse parallax, canvas waveforms. Ships tokens, components, snippets, and an animated Prismwave demo.
Claude Code · Codex · Cursor · Copilot +3
Wabi-Sabi Japanese Minimal UI
Wabi-Sabi Japanese Minimal UI
A wabi-sabi Japanese-minimal design skill for AI agents: warm handmade-paper backgrounds, soft ink typography, one vermillion seal accent, generous negative space (ma), and quiet asymmetric layouts. Includes design tokens, component specs, paste-ready snippets, IP guardrails, and copy-voice guides (EN + 中文）.
Claude Code · Codex · Cursor · Copilot +3
Scroll Narrative UI
Scroll Narrative UI
Scroll-driven storytelling UI: pinned chapters, multi-layer parallax, kinetic typography, scroll-scrubbed text, horizontal galleries and scroll-mapped stats — turn a landing page into a cinematic journey the user controls with the scrollbar.
Claude Code · Codex · Cursor · Copilot +3