Design-First Feature Planning and Mockups
Turn vague feature requests into compared approaches, reviewable mockups, and an approved implementation plan before coding.
Before & after
Same prompt, same agent — the only difference is the skill.
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?
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
“Build this feature” can turn into hundreds of lines of code before you discover the layout or interaction is wrong. This workflow makes the important choices visible first, with compared approaches, concrete mockups, and an explicit approval checkpoint before implementation.
What it does
- Separates the user's goal from an assumed layout or technical solution.
- Compares two or three approaches with meaningful differences in interaction, complexity, or scope.
- Produces annotated wireframes, including compact layouts and important non-happy-path states.
- Exposes behavior that a static mockup can hide, such as saving, cancellation, validation, and persistence.
- Turns the approved design into small implementation slices and checks the result for design drift.
What you get
A proportionate design review containing a recommendation, visual mockup, behavior notes, acceptance checks, and implementation sequence. If implementation is requested, it begins after explicit approval of the approach and mockup.
Best for
Developers and product builders starting vague features, adding user-facing workflows, or repeatedly rebuilding screens because design decisions happened too late.
SKILL.md preview
---
name: design-first-feature-planning-and-mockups
description: >-
Turn vague coding requests into compared design approaches, annotated visual mockups, and an approved implementation plan before writing implementation code. Expose interaction states and acceptance checks, then verify the build against the approved design. Use when the user says "design this before coding", "build a settings page", "help me think through this feature", "show me a mockup first", "my coding assistant keeps building the wrong thing", "we keep redoing the UI", or "compare approaches before implementing".
---
# Design-First Feature Planning and Mockups
… (sign up to view the full skill)More development skills
View all Development skills →Performance Bottleneck Profiling: Node, Python, Go
Classifies a slowdown, gives exact profiler commands, reads the output, and proves the fix with same-conditions p95/p99 numbers.
Feature Scaffolding with Working Tests
Turn a short feature spec into code, runnable tests, and integration wiring that match your existing project.
Feature Flag Rollouts and Kill Switches
Design staged flag rollouts, verify rollback paths, and audit flag debt with explicit defaults, gates, and retirement plans.
Microcontroller Firmware and RTOS Engineering
Build and debug MCU firmware with bounded ISR/RTOS timing, safe DMA ownership, and measured power budgets.