feat: Enhance content with rich Starlight components
🎨 VISUAL CONTENT TRANSFORMATION: 📖 Introduction Page Enhancement: - Added Cards for What You'll Discover vs Won't Find sections - Enhanced framework explanation with visual Cards for each content type - Interactive Tabs for before/after conversation approaches - Strategic Asides for tips and insights - Much more scannable and engaging layout 🎯 'Ask When Uncertain' How-To Guide: - Transformed problem examples into interactive Tabs - Created visual Cards for conversation patterns and advanced techniques - Added Steps component for post-conversation workflow - Enhanced Quick Reference with copyable templates in organized Asides - LinkCard navigation to next related content 🔧 Component Usage Showcase: ✅ Cards & CardGrid - Feature organization and comparisons ✅ Tabs - Before/after examples and alternatives ✅ Code blocks - Conversation examples with context ✅ Asides - Tips, warnings, insights (4 types) ✅ Steps - Sequential processes and workflows ✅ LinkCards - Enhanced navigation between guides ✅ Badges - Visual indicators and status 📈 UX Improvements: - Dramatically improved scannability and visual hierarchy - Interactive elements increase engagement - Professional documentation appearance - Maintained conversational tone while adding visual structure - Better information architecture with logical groupings These enhanced pages demonstrate the full power of Starlight components while preserving the human-centered, approachable voice that makes this guide special. Ready to continue enhancing more content!
This commit is contained in:
Claude AI Guide Project
parent
ad62547d8e
commit
91225f773b
@ -3,26 +3,64 @@ title: "How to Ask When You Don't Know What You Want"
|
||||
description: "When you know you need help but can't figure out how to ask for it"
|
||||
---
|
||||
|
||||
import { Card, CardGrid, LinkCard, Aside, Badge, Steps, Tabs, TabItem, Code } from '@astrojs/starlight/components';
|
||||
|
||||
*When you know you need help but can't figure out how to ask for it*
|
||||
|
||||
## The Problem
|
||||
|
||||
You're sitting there with that familiar feeling: something's bugging you, you know Claude could probably help, but you have no idea how to even start the conversation. Maybe it's work stress, a decision you need to make, a project that feels overwhelming, or just that nagging sense that you're missing something obvious.
|
||||
|
||||
You've tried the obvious approaches:
|
||||
- "Can you help me with [vague thing]?" (gets generic advice)
|
||||
- "I need to figure out [unclear situation]" (Claude asks for more details you don't have)
|
||||
- Just staring at the chat wondering what to type (gets you nowhere)
|
||||
<Aside type="caution" title="Sound Familiar?">
|
||||
This is one of the most common frustrations people have with AI - that gap between "I need help" and "I know what kind of help I need."
|
||||
</Aside>
|
||||
|
||||
Sound familiar? This is one of the most common frustrations people have with AI - that gap between "I need help" and "I know what kind of help I need."
|
||||
**You've tried the obvious approaches:**
|
||||
|
||||
<Tabs>
|
||||
<TabItem label="Vague Requests">
|
||||
<Code code={`"Can you help me with [vague thing]?"`} lang="text" />
|
||||
Result: Gets generic advice that doesn't fit your situation
|
||||
</TabItem>
|
||||
|
||||
<TabItem label="Unclear Situations">
|
||||
<Code code={`"I need to figure out [unclear situation]"`} lang="text" />
|
||||
Result: Claude asks for more details you don't have
|
||||
</TabItem>
|
||||
|
||||
<TabItem label="Decision Paralysis">
|
||||
<Code code={`[Just staring at the chat wondering what to type]`} lang="text" />
|
||||
Result: Gets you absolutely nowhere
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
## The Solution: Start With Your Feelings, Not Your Goals
|
||||
|
||||
Here's the counterintuitive approach that works: instead of trying to figure out what you want before you ask, start by describing what you're experiencing right now.
|
||||
<Aside type="tip" title="Counterintuitive but Effective">
|
||||
Instead of trying to figure out what you want before you ask, start by describing what you're experiencing right now.
|
||||
</Aside>
|
||||
|
||||
### Pattern 1: "I'm feeling [emotion] about [situation] and I can't figure out why"
|
||||
<CardGrid>
|
||||
<Card title="🎯 Pattern 1: Feeling-Based" icon="heart">
|
||||
**"I'm feeling [emotion] about [situation] and I can't figure out why"**
|
||||
|
||||
**Instead of:** "Help me with my career"
|
||||
<Code
|
||||
code={`"I'm feeling anxious about this new job opportunity but I can't figure out why - it seems like a good move on paper"`}
|
||||
lang="text"
|
||||
title="Instead of: 'Help me with my career'"
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Card title="🤔 Pattern 2: Stuck-Based" icon="puzzle">
|
||||
**"I'm stuck on [situation] and usually I [your normal approach] but that's not working"**
|
||||
|
||||
<Code
|
||||
code={`"I'm stuck on this presentation and usually I just outline and go, but this feels different and I keep staring at a blank page"`}
|
||||
lang="text"
|
||||
title="Instead of: 'Help me with a presentation'"
|
||||
/>
|
||||
</Card>
|
||||
</CardGrid>
|
||||
**Try:** "I'm feeling restless about my job lately and I can't put my finger on what's bothering me about it"
|
||||
|
||||
**Instead of:** "I need to make a decision"
|
||||
@ -52,68 +90,105 @@ Here's the counterintuitive approach that works: instead of trying to figure out
|
||||
|
||||
## Advanced Patterns for Complex Situations
|
||||
|
||||
### Pattern 4: "Something's not working and I don't know what's wrong"
|
||||
<CardGrid>
|
||||
<Card title="🔧 Pattern 4: Something's Broken" icon="error">
|
||||
**"Something's not working and I don't know what's wrong"**
|
||||
|
||||
**Try:** "I've been trying to [what you're doing] but it's not working the way I expected, and I can't figure out where the disconnect is"
|
||||
<Code
|
||||
code={`"I've been trying to be more productive with my time but somehow I feel busier and more stressed than before, and I can't figure out where the disconnect is"`}
|
||||
lang="text"
|
||||
title="When your solution creates new problems"
|
||||
/>
|
||||
</Card>
|
||||
|
||||
**Example:** "I've been trying to be more productive with my time but somehow I feel busier and more stressed than before, and I can't figure out where the disconnect is"
|
||||
<Card title="📚 Pattern 5: Learning Overwhelm" icon="open-book">
|
||||
**"I need to learn something but don't know where to start"**
|
||||
|
||||
### Pattern 5: "I need to learn something but don't know where to start"
|
||||
<Code
|
||||
code={`"I need to understand personal finance better but every time I try to research it, I get overwhelmed by how much there is to know and conflicting advice"`}
|
||||
lang="text"
|
||||
title="When the topic feels too big to tackle"
|
||||
/>
|
||||
</Card>
|
||||
|
||||
**Try:** "I need to understand [topic] but every time I try to research it, I get overwhelmed by how much there is to know"
|
||||
<Card title="🔄 Pattern 6: Stuck in Loops" icon="random">
|
||||
**"I'm stuck in a pattern and can't see my way out"**
|
||||
|
||||
**Example:** "I need to understand personal finance better but every time I try to research it, I get overwhelmed by how much there is to know and conflicting advice"
|
||||
|
||||
### Pattern 6: "I'm stuck in a pattern and can't see my way out"
|
||||
|
||||
**Try:** "I keep finding myself in [situation] and I always handle it the same way, but I feel like there must be better approaches I'm not seeing"
|
||||
|
||||
**Example:** "I keep finding myself in conversations where I agree to things I don't want to do, and I always handle it the same way, but I feel like there must be better approaches I'm not seeing"
|
||||
<Code
|
||||
code={`"I keep finding myself in conversations where I agree to things I don't want to do, and I always handle it the same way, but I feel like there must be better approaches I'm not seeing"`}
|
||||
lang="text"
|
||||
title="When you keep repeating the same mistakes"
|
||||
/>
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
## What to Do After You Ask
|
||||
|
||||
Once you've started with one of these patterns, Claude will likely ask follow-up questions or offer observations. Here's how to keep the conversation productive:
|
||||
|
||||
### 1. Go with the first thing that resonates
|
||||
When Claude reflects something back or asks a question, pay attention to which part makes you think "yeah, that's it" or "huh, I hadn't thought about it that way."
|
||||
<Steps>
|
||||
1. **Go with the first thing that resonates** - When Claude reflects something back or asks a question, pay attention to which part makes you think "yeah, that's it" or "huh, I hadn't thought about it that way."
|
||||
|
||||
### 2. Share what feels relevant, even if it seems random
|
||||
If Claude's response reminds you of something else in your life, or makes you think of a related situation, mention it. These connections often lead to insights.
|
||||
2. **Share what feels relevant, even if it seems random** - If Claude's response reminds you of something else in your life, or makes you think of a related situation, mention it. These connections often lead to insights.
|
||||
|
||||
### 3. Don't worry about staying on topic
|
||||
Sometimes the most helpful conversations wander into unexpected territory. If Claude's response sparks a thought about something seemingly unrelated, follow that thread.
|
||||
3. **Don't worry about staying on topic** - Sometimes the most helpful conversations wander into unexpected territory. If Claude's response sparks a thought about something seemingly unrelated, follow that thread.
|
||||
|
||||
### 4. Ask for what you need as it becomes clear
|
||||
As the conversation progresses and you start to understand what you're actually dealing with, you can get more specific: "This is really helpful - can we focus on [specific aspect]?" or "I think I need to [specific action] - can you help me think through how to approach that?"
|
||||
4. **Ask for what you need as it becomes clear** - As the conversation progresses and you start to understand what you're actually dealing with, you can get more specific: "This is really helpful - can we focus on [specific aspect]?" or "I think I need to [specific action] - can you help me think through how to approach that?"
|
||||
</Steps>
|
||||
|
||||
<Aside type="tip" title="Pro Tip">
|
||||
The most helpful conversations often wander into unexpected territory. Trust the process and follow interesting threads even if they seem off-topic.
|
||||
</Aside>
|
||||
|
||||
## When This Approach Works Best
|
||||
|
||||
<Aside type="note" title="Perfect Situations for This Method">
|
||||
This "start with feelings/experience rather than goals" approach is particularly effective when you're:
|
||||
- Feeling stuck or overwhelmed
|
||||
- Facing a decision that feels harder than it should
|
||||
- Trying to understand why something isn't working
|
||||
- Needing to learn about something new
|
||||
- Looking for a fresh perspective on a familiar problem
|
||||
- Dealing with interpersonal or emotional situations
|
||||
|
||||
## Quick Reference: Conversation Starters for Unclear Situations
|
||||
- **Feeling stuck or overwhelmed** about a situation
|
||||
- **Facing a decision** that feels harder than it should
|
||||
- **Trying to understand** why something isn't working
|
||||
- **Needing to learn** about something new but don't know where to start
|
||||
- **Looking for a fresh perspective** on a familiar problem
|
||||
- **Dealing with interpersonal or emotional** situations
|
||||
</Aside>
|
||||
|
||||
Copy and adapt these for your specific situation:
|
||||
## Quick Reference: Conversation Starters
|
||||
|
||||
<Aside type="tip" title="Copy & Adapt These Templates">
|
||||
**For unclear feelings:**
|
||||
- "I'm feeling [emotion] about [situation] and I can't figure out why"
|
||||
- "I keep trying to solve [situation] but I feel like I'm missing something obvious"
|
||||
- "I want to understand what's really going on with [situation] before I decide what to do"
|
||||
- "I've been trying to [action] but it's not working the way I expected"
|
||||
- "I need to understand [topic] but I get overwhelmed every time I try to research it"
|
||||
- "I keep finding myself in [pattern] and I feel like there must be better approaches"
|
||||
|
||||
Remember: you don't need to have a clear, well-formed question to start a productive conversation with Claude. Sometimes the best help comes from exploring what you don't know you don't know.
|
||||
**For stuck situations:**
|
||||
- "I keep trying to solve [situation] but I feel like I'm missing something obvious"
|
||||
|
||||
**For decision paralysis:**
|
||||
- "I want to understand what's really going on with [situation] before I decide what to do"
|
||||
|
||||
**For things not working:**
|
||||
- "I've been trying to [action] but it's not working the way I expected"
|
||||
|
||||
**For learning overwhelm:**
|
||||
- "I need to understand [topic] but I get overwhelmed every time I try to research it"
|
||||
|
||||
**For repeated patterns:**
|
||||
- "I keep finding myself in [pattern] and I feel like there must be better approaches"
|
||||
</Aside>
|
||||
|
||||
<Aside type="caution" title="Remember">
|
||||
You don't need to have a clear, well-formed question to start a productive conversation with Claude. Sometimes the best help comes from exploring what you don't know you don't know.
|
||||
</Aside>
|
||||
|
||||
---
|
||||
|
||||
## What's Next?
|
||||
|
||||
**If this helped:** [How to Get Claude to Match Your Tone and Style](/how-to/match-tone-style/) - Now that you can start conversations, make them sound like you.
|
||||
<LinkCard
|
||||
title="How to Get Claude to Match Your Tone and Style"
|
||||
description="Now that you can start conversations, make them sound like you"
|
||||
href="/beginners/how-to/match-tone-style/"
|
||||
badge="Next Guide"
|
||||
/>
|
||||
|
||||
**For hands-on practice:** [Tutorial 1: From Awkward Small Talk to AI Collaboration](/tutorials/first-conversation/) - Experience these uncertain conversation starters in action.
|
||||
|
||||
|
||||
@ -3,58 +3,122 @@ title: "Welcome to How to Talk to Claude"
|
||||
description: "Your complete journey from awkward AI encounters to genuine collaboration"
|
||||
---
|
||||
|
||||
import { Card, CardGrid, LinkCard, Aside, Badge, Steps, Tabs, TabItem, Code } from '@astrojs/starlight/components';
|
||||
|
||||
## The Moment Everything Changed
|
||||
|
||||
Remember the first time you sent a text message? Or joined your first online chat room? There was that moment when you suddenly realized - oh wait, this isn't just a fancy typewriter or a phone with extra steps. This is a completely new way to communicate, with its own rhythm, its own possibilities, its own social rules.
|
||||
|
||||
<Aside type="note">
|
||||
We've all learned new communication technologies before - from AIM to texting to social media. AI is just the latest evolution, and the same social skills apply.
|
||||
</Aside>
|
||||
|
||||
I had that exact same moment with AI, but it took me way longer than it should have.
|
||||
|
||||
For months, I was treating Claude like a very expensive search engine that occasionally wrote things for me. I'd type in requests like I was filing work orders: "Write a blog post about productivity." "Summarize this article." "Give me five ideas for dinner."
|
||||
|
||||
And Claude would dutifully respond with perfectly fine, completely generic results that felt like they could have been written by any marketing intern with a caffeine problem.
|
||||
|
||||
Then one day, frustrated with yet another bland response, I tried something different. Instead of giving Claude a task, I started a conversation: "I'm struggling with this productivity article because honestly, I'm tired of all the 'wake up at 5 AM' advice. What angle am I missing here?"
|
||||
<Aside type="caution" title="The Common Mistake">
|
||||
Treating AI like a task automation tool instead of a conversation partner leads to generic, soulless results.
|
||||
</Aside>
|
||||
|
||||
Then one day, frustrated with yet another bland response, I tried something different. Instead of giving Claude a task, I started a conversation:
|
||||
|
||||
<Tabs>
|
||||
<TabItem label="❌ Old Approach">
|
||||
<Code
|
||||
code={`"Write a blog post about productivity."`}
|
||||
lang="text"
|
||||
title="Task-based request"
|
||||
/>
|
||||
Result: Generic, could-be-written-by-anyone content
|
||||
</TabItem>
|
||||
|
||||
<TabItem label="✅ New Approach">
|
||||
<Code
|
||||
code={`"I'm struggling with this productivity article because honestly, I'm tired of all the 'wake up at 5 AM' advice. What angle am I missing here?"`}
|
||||
lang="text"
|
||||
title="Conversation starter"
|
||||
/>
|
||||
Result: Thoughtful, personal, genuinely helpful response
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
What came back wasn't just better - it was *different*. Thoughtful. Personal. Like Claude had actually been thinking about the same thing and had some ideas to share.
|
||||
|
||||
That's when I realized: I'd been doing the equivalent of walking into a coffee shop, slapping money on the counter, and grunting "COFFEE" instead of actually talking to the barista.
|
||||
<Aside type="tip" title="The Breakthrough Realization">
|
||||
I'd been doing the equivalent of walking into a coffee shop, slapping money on the counter, and grunting "COFFEE" instead of actually talking to the barista.
|
||||
</Aside>
|
||||
|
||||
## What You're Really Learning Here
|
||||
|
||||
This guide isn't about "prompting AI correctly." It's about discovering that AI collaboration works best when you approach it like... well, collaboration.
|
||||
|
||||
You know how you've learned to communicate with different technologies over the years? How you figured out that email has a different tone than texting, which is different from Slack, which is different from leaving a voicemail? You developed instincts for each medium - when to be formal, when to be casual, how much context to include, what works and what doesn't.
|
||||
<Aside type="note">
|
||||
You've learned to communicate with different technologies before - email vs texting vs Slack vs voicemail. This guide gives you those same instincts for AI.
|
||||
</Aside>
|
||||
|
||||
This guide is going to give you those same instincts for AI. By the time you're done, you'll have that natural sense of how to start conversations, how to steer them when they go off track, how to get the kind of responses that actually help instead of just technically answering your question.
|
||||
By the time you're done, you'll have that natural sense of how to start conversations, how to steer them when they go off track, how to get the kind of responses that actually help instead of just technically answering your question.
|
||||
|
||||
### 💡 What you'll discover
|
||||
- Why treating AI like a conversation partner gets infinitely better results than treating it like a command line
|
||||
- How to start conversations when you don't even know what you want (this is way more common than you think)
|
||||
- The psychology of why AI collaboration feels weird at first and how to get past that
|
||||
- Practical techniques for everything from brainstorming to research to personal decisions
|
||||
- Advanced methods that separate casual users from people who really know what they're doing
|
||||
<CardGrid>
|
||||
<Card title="💡 What You'll Discover" icon="star">
|
||||
- Why conversation beats commands for infinitely better results
|
||||
- How to start conversations when you don't know what you want
|
||||
- The psychology behind initial AI collaboration weirdness
|
||||
- Practical techniques from brainstorming to personal decisions
|
||||
- Advanced methods that separate experts from casual users
|
||||
</Card>
|
||||
|
||||
### 📝 What you won't find here
|
||||
<Card title="📝 What You Won't Find" icon="warning">
|
||||
- Generic "prompt templates" that work for everyone and no one
|
||||
- Technical explanations of how AI actually works under the hood
|
||||
- Advice that assumes you're a developer or tech expert
|
||||
- The usual "10 ChatGPT hacks that will change your life" clickbait
|
||||
- Technical explanations of AI's inner workings
|
||||
- Advice that assumes you're a developer or tech expert
|
||||
- The usual "10 ChatGPT hacks" clickbait nonsense
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
## How This Guide Actually Works
|
||||
|
||||
You've probably noticed that most tutorials either assume you're a complete beginner or throw you straight into advanced techniques. This guide is different - it's built around how people actually learn and what they actually need.
|
||||
|
||||
We're using something called the **Diátaxis framework**, which sounds fancy but just means "different types of content for different types of learning." Here's what that looks like in practice:
|
||||
<Aside type="tip" title="The Diátaxis Framework">
|
||||
We're using the **Diátaxis framework** - which sounds fancy but just means "different types of content for different types of learning."
|
||||
</Aside>
|
||||
|
||||
### When You Want to Learn by Doing: Tutorials
|
||||
These are step-by-step experiences where you'll actually have conversations with Claude and build skills naturally. Think of them like cooking lessons where you make actual food, not just read recipes.
|
||||
<CardGrid>
|
||||
<Card title="🎓 Tutorials" icon="rocket">
|
||||
**When You Want to Learn by Doing**
|
||||
|
||||
**Start here if:** You're new to AI, you learn better by doing than reading, or you want to build confidence through experience.
|
||||
Step-by-step experiences where you'll actually have conversations with Claude and build skills naturally. Like cooking lessons where you make actual food, not just read recipes.
|
||||
|
||||
**Start here if:** You're new to AI, learn better by doing, or want to build confidence through experience.
|
||||
</Card>
|
||||
|
||||
<Card title="🔧 How-To Guides" icon="seti:config">
|
||||
**When You Have a Specific Problem**
|
||||
|
||||
### When You Have a Specific Problem: How-To Guides
|
||||
These solve exact problems you're facing right now. Bookmark these and come back when you need them.
|
||||
|
||||
**Use these when:** Claude is giving you walls of text but you want simple answers, you can't get Claude to match your tone, you need to fact-check something, you want to brainstorm but feel silly, etc.
|
||||
**Use these when:** Claude gives walls of text but you want simple answers, can't get tone matching, need fact-checking, want to brainstorm but feel silly, etc.
|
||||
</Card>
|
||||
|
||||
<Card title="🧠 Explanations" icon="information">
|
||||
**When You Want to Understand Why**
|
||||
|
||||
Deep dives into the psychology and principles behind effective AI collaboration.
|
||||
|
||||
**Perfect for:** Understanding what's happening beneath the surface, building intuition, becoming genuinely sophisticated at this.
|
||||
</Card>
|
||||
|
||||
<Card title="⚡ Quick Reference" icon="document">
|
||||
**When You Need Something Fast**
|
||||
|
||||
Conversation starters, troubleshooting, emergency fixes. Your bookmark-worthy resource.
|
||||
|
||||
**Use for:** "How do I start this conversation?" or "This isn't working, help!" moments.
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
### When You Want to Understand Why: Explanations
|
||||
These dive into the psychology and principles behind why certain approaches work. Perfect for when you want deeper understanding, not just practical tips.
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user