What is the Visual Companion feature?

It is a browser-based tool that allows Claude to show mockups, diagrams, and UI comparisons during the brainstorming phase to help you visualize the design.

Why does this skill block me from writing code immediately?

To prevent wasted work caused by unexamined assumptions. It ensures a design is approved first, even for simple projects, ensuring the implementation matches user intent.

Where are the design documents saved?

By default, designs are saved to the docs/superpowers/specs/ directory with a timestamped filename and automatically committed to your git repository.

Can I use this for existing codebases?

Yes, the skill is designed to explore current project context, files, and recent commits before proposing changes or targeted improvements to your existing structure.

Brainstorming & Design Specs

Name: Brainstorming & Design Specs
Author: SwervoJake

bySwervoJake

0•

协作工具

Guides the transition from initial ideas to validated design specifications through collaborative dialogue and structured planning.

This skill acts as a rigorous gatekeeper for the development process, ensuring that no code is written before a solid design is agreed upon. It facilitates a natural, step-by-step dialogue to explore project context, clarify requirements, and evaluate multiple architectural approaches. By enforcing the creation of a formal design document and integrating with visual tools for mockups, it prevents wasted effort on unexamined assumptions and provides a clear roadmap for subsequent implementation. It is essential for maintaining code quality and architectural integrity in both new projects and existing codebases.

主要功能

010 GitHub stars

02Automated generation and versioning of detailed design specifications

03Hard-gated design approval process to prevent premature implementation

04Multi-approach evaluation with trade-off analysis and recommendations

05Optional browser-based Visual Companion for mockups and diagrams

06Structured discovery through one-at-a-time clarifying questions

使用场景

01Decomposing complex, multi-system project requests into manageable sub-projects

02Defining architectural boundaries and data flows for new features

03Validating UI/UX concepts and layout decisions before frontend development

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add swervojake/claaaude-studio brainstorming

For use in Claude.ai and ChatGPT

主要功能

010 GitHub stars

02Automated generation and versioning of detailed design specifications

03Hard-gated design approval process to prevent premature implementation

04Multi-approach evaluation with trade-off analysis and recommendations

05Optional browser-based Visual Companion for mockups and diagrams

06Structured discovery through one-at-a-time clarifying questions

使用场景

01Decomposing complex, multi-system project requests into manageable sub-projects

02Defining architectural boundaries and data flows for new features

03Validating UI/UX concepts and layout decisions before frontend development

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add swervojake/claaaude-studio brainstorming

For use in Claude.ai and ChatGPT