Back to marketplace

Superpowers Plugin

Forces Claude to brainstorm, design, and show visual mockups before writing any code.

Productivity / Productivity and Workflowproductivityproductivity-and-workflow
by AgentVoltv1.0.0Published 1y ago1 install
Free to sign up · every skill included with AgentVolt Pro

Before & after

Same prompt, same agent — the only difference is the skill.

Prompt“Before I write any code, I want to brainstorm and design the feature visually.”
Beforegeneric AI agent
That's a good approach. You could start by brainstorming what the feature should do and what problems it solves. Then you could sketch out a mockup or wireframe to visualize how it would look and work. You might want to think about the user flow — how someone would interact with the feature. Creating a visual reference before coding can help you catch issues early and make sure everyone agrees on what you're building. You could use Figma, Excalidraw, or even pen and paper to sketch it out. Once you have a solid design, coding usually goes faster. Do you have a sense of what the feature is yet, or do you want to brainstorm that first?
Afterwith Superpowers Plugin
DESIGN-FIRST WORKFLOW (bundled 14 skills)

PHASE 1: BRAINSTORM (30 min)
   Trigger: Any feature request or undefined problem
   Output: Problem statement + solution hypothesis
   Tool: Superpowers Plugin → Ideation skill
   
   Captures: Who, what problem, why it matters
   Example output: "Dark mode for dashboard reduces eye strain on night shifts; target power users (20% of base)"

PHASE 2: VISUAL MOCKUP (30-45 min)
   Tool: Superpowers Plugin → Mockup skill (Figma integration)
   
   Generates: Wireframe of UI layout
   Includes: User flow arrows, interactive states (default, hover, focus), color palette draft
   
   Your input: Feedback ("too much white space", "move search bar", "add loading state")
   Tool iterates: Updates mockup, shows side-by-side diffs

PHASE 3: DESIGN VALIDATION (15 min)
   Tool: Superpowers Plugin → Accessibility checker
   
   Checks: Contrast ratios, semantic HTML hints, mobile responsiveness
   Flags: "Color pair fails WCAG AA", "Input needs label"
   Output: Validated mockup ready for dev

PHASE 4: CODE GENERATION (triggered when ready)
   Tool: Superpowers Plugin → Code generation skill
   
   Inputs mockup + project stack detection
   Outputs: React + Tailwind component scaffold, matching mockup proportions
   Example: Page.tsx, Button.tsx, Input.tsx pre-wired with state stubs

BUNDLED SKILLS (14 total)
   • Ideation (brainstorm, problem framing)
   • Mockup (wireframe, flow design)
   • Accessibility (WCAG audit)
   • Component extraction (reusable UI)
   • Responsive design (mobile/tablet/desktop)
   • Interaction design (animations, transitions)
   • Color theory (palette generation)
   • Typography (font stack, sizing)
   • Content strategy (copy for UI)
   • User testing prep (what to test)
   • Code generation (from design)
   • Build system setup (framework-specific)
   • Deploy checklist (before shipping)
   • Performance audit (bundle size, paint)

TIMELINE: Full brainstorm to mockup to validated design to code = 2-3 hours (vs. 6-8 hours guessing while coding).

ADVANTAGE: Design changes cost 30 sec in mockup tool, cost 30 min to rip out wrong coded components. Always design first.

About this skill

name: superpowers-plugin description: Use when Forces Claude to brainstorm, design, and show visual mockups before writing any code.

Superpowers Plugin

Bundles 14 skills covering brainstorming and a visual companion workflow that turns ad hoc vibe coding into a structured design-first process before implementation begins.

What you get

  • Plugin installable via claude plugins add superpowers, with 14 bundled skills.

Customize your output

  • Adaptable to any project type or team workflow.

Example output

A structured brainstorm and visual mockup before code is written.

Best for

Developers wanting a design-first process instead of ad hoc vibe coding.

SKILL.md preview

SKILL.md
---
name: superpowers-plugin
description: Use this skill when a coding task should start with brainstorming and visual mockups before any code is written, replacing ad hoc vibe coding with a structured design-first process.
version: 1.0.0
category: Productivity / Productivity and Workflow
author: AgentVolt
license: proprietary
tags:
  - productivity
  - productivity-and-workflow
  - standard
---

# Superpowers Plugin

Forces a structured, design-first process — brainstorming and visual mockups — before any implementation code is written.

## When to use

… (sign up to view the full skill)
Sign up to view, copy, and install the full skill

More productivity skills

View all Productivity skills →

Caveman Skill

Cuts Claude response tokens by up to 75 percent while keeping technical accuracy.

Productivity

GSD (Get Shit Done)

A spec driven framework that fixes context rot with externalized specs.

Productivity

BMAD-METHOD

A spec driven development framework for agentic coding.

Productivity

Skill Chaining Kit

Lets Claude Code skills call other skills, chaining several into one slash command.

Productivity