ideate

Clarifies vague product and interface ideas into concrete design decisions.

13|2|Updated Mar 13, 2026
One-click install
npx skills add https://github.com/quan2005/journal-claw --skill ideate-quan2005
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ideate
Source: https://github.com/quan2005/journal-claw/tree/main/apps/web/resources/workspace-template/.claude/skills/ideate
Command: npx skills add https://github.com/quan2005/journal-claw --skill ideate-quan2005

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps when a user has a vague product or interface idea but is not ready to write code yet. It turns unclear thoughts, competing options, and fragmented requirements into concrete design directions through guided discussion and lightweight visual exploration.

Core Features & Use Cases

  • Structured design thinking loop: Guides the conversation through discovery, definition, ideation, refinement, and delivery without jumping prematurely into implementation.
  • Visual exploration boards: Generates self-contained HTML mockups, comparisons, flow diagrams, style explorations, and bento layouts to make abstract decisions easier to evaluate.
  • Opinionated decision support: Converts open-ended questions into A/B/C choices, recommends a direction, and explains tradeoffs using design principles.
  • Use cases: Comparing product layouts, choosing between interaction patterns, clarifying information architecture, exploring onboarding flows, or refining a UI concept before engineering starts.

Quick Start

Ask the ideate skill to help you compare two interface directions for your feature and show the options as a visual HTML board.

Frequently Asked Questions about ideate

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I turn vague product ideas into clear UI design decisions?

It clarifies vague product ideas into clear design decisions by applying a structured thinking loop that guides you through discovery, definition, ideation, and refinement before writing any code.

What is the best way to compare competing interface layouts before implementation?

The best way to compare interface layouts is by generating self-contained HTML visual boards that display options side-by-side, allowing you to evaluate tradeoffs using established design principles.

How do I plan information architecture for early-stage product concepts?

You plan information architecture for early-stage concepts through guided iterative questioning and opinionated recommendations that convert fragmented requirements into concrete layout directions and interaction patterns.

Can I generate HTML mockups for visual exploration without writing code?

Yes, you can generate self-contained HTML mockups, comparison boards, and flow diagrams for visual exploration without writing code yourself, enabling lightweight side-by-side evaluation of design options.

Does this ideation approach work for refining onboarding flows and interaction design?

Yes, this ideation approach works for refining onboarding flows and interaction design by converting open-ended questions into A/B/C choices and explaining tradeoffs to reach concrete decisions.