Your First Intelligent Design

A hands-on walkthrough showing how psychological intelligence shapes real design decisions. We'll design the same screen twice — once without context, once with rich context — to show the difference.

Prerequisites

• AsciiKit MCP installed (Installation guide)
• Claude Code running with AsciiKit configured
• Valid license key

Part 1: Design without context

Open Claude Code and try:

/asciikit-quick
Design a login screen

You'll get a competent, standard login screen. Email field, password field, submit button, forgot password link. It works.

This is Claude being good at UI. It knows what login screens look like.

Part 2: Design with psychological context

Now try the same thing with context that activates the intelligence:

/asciikit-quick
Design a login screen for a financial app. Users are returning
customers who've had bad experiences with fraud before. They're
cautious about entering their banking credentials anywhere online.

Watch what changes:

Claude now applies fintech psychology automatically:

• Trust mechanics: Security indicators positioned near credential fields, not just in the footer
• Loss aversion: Language frames security as protection of their money, not just compliance
• Authority signals: Bank-level encryption language and regulatory compliance indicators
• Anxiety reduction: No "Sign in with Google" — financial users distrust credential delegation
• Cognitive simplicity: No social login clutter, just focused credential entry

The difference isn't aesthetic. Every element is placed where it addresses a specific psychological barrier.

Part 3: Push the context further

Continue the conversation with more specificity:

The users skew older (55+). About 30% have called our support line
because they were confused by a previous version of this screen.

Watch the intelligence adapt again:

• Large, clearly labeled fields (cognitive load reduction for age-related vision changes)
• Prominent "Need help logging in?" link with phone number (technology anxiety safety valve)
• Single-column layout with clear vertical progression (reduced spatial complexity)
• "Remember this device" checkbox with plain-language explanation (reduces repetitive friction)
• Password show/hide toggle (reduces retry frustration from typing errors)

You added one sentence. Claude recalibrated the psychology for a different user profile.

Part 4: See the emotional arc

Try /asciikit-flow to see psychology across a multi-screen journey:

/asciikit-flow
A new customer wants to open their first savings account with us.
They're excited but nervous — they've been burned by hidden fees
before. Walk through account opening from first screen to confirmation.

Claude maps an emotional arc:

SCREEN 1: Welcome (Target emotion: Excited anticipation)
Purpose: Build excitement while immediately addressing the fee concern
Psychology: Lead with "No hidden fees, ever" before features
              Social proof: 400,000 members trust us
              Minimal ask: Just email to begin

SCREEN 2: Tell us about you (Target emotion: Comfortable, in control)
Purpose: Gather information while maintaining confidence
Psychology: Only 3 fields — Miller's Law applied to anxiety context
              "Why we ask" links reduce suspicion
              Progress bar: "Step 2 of 4"

SCREEN 3: Choose your account (Target emotion: Confident decision-maker)
Purpose: Guide to the right choice without overwhelming
Psychology: Recommended option pre-selected (reduces decision fatigue)
              Clear fee table (addresses the stated fear directly)
              Comparison anchored to what they likely have now

SCREEN 4: Confirm and celebrate (Target emotion: Proud, validated)
Purpose: Lock in the emotional investment and prevent post-decision regret
Psychology: Celebrate the decision ("You're officially a member")
              Show immediate next steps
              Reinforce that the fee concern is permanently resolved

Each screen is designed to move the user along a specific emotional journey, not just collect information.

Part 5: Explore competing approaches

One of the most powerful commands is /asciikit-explore — it shows how different psychological theories produce fundamentally different designs:

/asciikit-explore
Show me different psychological approaches to keep users
coming back to a fitness app every day

Claude generates genuinely different designs based on different theories of motivation:

Approach 1: Achievement Psychology (Gamification) Based on competence-building theory — users return because they're getting better. Key elements: Badges, personal records, skill progression levels Best for: Competitive users who respond to external recognition

Approach 2: Habit Formation (Behavioral) Based on Duhigg's habit loop — cue, routine, reward. Key elements: Streak counter, scheduled reminder, immediate small reward Best for: Users who want consistency over achievement

Approach 3: Social Accountability (Relatedness) Based on self-determination theory's relatedness component. Key elements: Friend activity feed, shared challenges, accountability partner Best for: Users who are motivated by social connection and accountability

Three designs based on three different psychological theories. You pick the one that matches your users.

What just happened

In each example, AsciiKit did something that vanilla Claude doesn't do automatically:

1. Inferred the psychological context from your description (financial = trust-critical, older users = accessibility + anxiety)
2. Selected the relevant frameworks (fintech domain applies different trust signals than, say, gaming)
3. Applied them coherently across every element — not just the obvious ones
4. Explained the reasoning so you understand why each decision was made

The wireframes are the output. The psychology is the value.

Try it yourself

Pick a real screen from a project you're working on. Give it these three layers of context:

1. The domain: What industry is this? What are the specific trust and risk dynamics?
2. The user: Who are they? What are they feeling? What's their expertise level?
3. The stakes: What happens if they abandon? What's their biggest fear here?

Then run /asciikit-quick and see how the intelligence responds.

Quick reference: context that activates strong intelligence

Next steps

• Writing Effective Prompts — Get better psychological context into your prompts
• The 5 Commands — Learn when to use each intelligence mode
• Intelligence Examples — See psychology applied across 7 different domains
• Design Intelligence System — Deep dive into the six frameworks