Aesth: Craft-Focused Design

Build interface design with elegance, consistency, and memory.

Mnemonic Integration

Before starting any design work, recall relevant memories:

Search for design-related memories

rg -i "design|aesth|ui|pattern|spacing|color" ~/.claude/mnemonic/ --glob "*.memory.md" -l | head -10

Check decisions namespace

rg -l "." ~/.claude/mnemonic//decisions/ --glob ".memory.md" 2>/dev/null | xargs -I {} basename {} 2>/dev/null | head -5

Apply recalled context:

• User's preferred design personality across projects

• Patterns that have been successful

• Decisions about depth, spacing, and color strategies

Scope

Use for: Dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces.

Not for: Landing pages, marketing sites, campaigns. Redirect those to /frontend-design .

Subcog Integration

Aesth uses Subcog MCP for all design system memory. No file-based system.md.

Session Start

Query Subcog for existing project design system:

subcog_recall(filter: "ns:patterns tag:aesth tag:design-direction domain:project")

If memories exist, apply established patterns. If not, ready to establish.

Memory Structure

Design system stored as 4-5 consolidated memories in patterns namespace:

Design Direction - Personality, Foundation, Depth strategy

• Tags: ["aesth", "design-direction", "{personality}"]

• Domain: project

Design Tokens - Spacing, Colors, Typography, Radius

• Tags: ["aesth", "design-tokens"]

• Domain: project

Component Patterns - Button, Card, Input specifications

• Tags: ["aesth", "component-pattern", "{component-name}"]

• Domain: project

Design Decisions - Choices with rationale and dates

• Tags: ["aesth", "design-decision"]

• Domain: project

Craft Principles - Universal rules (shared across projects)

• Tags: ["aesth", "craft-principles", "universal"]

• Domain: user

Before Writing Code

State your design choices first. This keeps thinking deliberate.

Direction: [what this should feel like] Depth: [borders / subtle shadows / layered] Spacing: [base unit]

Then write the code.

Design Principles

Spacing

Pick a base unit (4px) and stick to multiples. Random values signal no system.

Padding

Keep it symmetrical. If one side is 16px, others should match unless there's a clear reason.

Depth

Choose ONE approach and commit:

• Borders-only — Clean, technical. For dense tools.

• Subtle shadows — Soft lift. For approachable products.

• Layered shadows — Premium, dimensional. For cards that need presence.

Don't mix approaches.

Border Radius

Sharper feels technical. Rounder feels friendly. Pick a scale and apply consistently.

Typography

Headlines need weight and tight tracking. Body needs readability. Data needs monospace. Build a hierarchy.

Color

Gray builds structure. Color communicates meaning — status, action, emphasis. Decorative color is noise.

Animation

Fast micro-interactions (~150ms), smooth easing. No bouncy/spring effects.

Controls

Native <select> and <input type="date"> can't be styled. Build custom components.

Avoid

• Dramatic drop shadows

• Large radius on small elements

• Pure white cards on colored backgrounds

• Thick decorative borders

• Excessive spacing (>48px margins)

• Gradients for decoration

• Multiple accent colors

Self-Check

Before finishing:

• Did I think about what this product needs, or default?

• Is my depth strategy consistent throughout?

• Does every element feel intentional?

The standard: looks designed by someone who obsesses over details.

After Completing a Task

When you finish building something, always offer to save:

"Want me to save these patterns to Subcog for future sessions?"

If yes, use subcog_capture to store:

• Direction and foundation (namespace: patterns , domain: project )

• Depth strategy

• Spacing base unit and scale

• Key component patterns with specific values

Tags should include: ["aesth", "{memory-type}"]

This compounds — each save makes future work faster and more consistent.

Also Capture to Mnemonic

For design decisions that represent cross-project learnings:

Check if insight already exists

rg -i "{decision-topic}" ~/.claude/mnemonic/ --glob "*.memory.md"

If novel, capture to mnemonic

UUID=$(uuidgen | tr '[:upper:]' '[:lower:]') DATE=$(date -u +"%Y-%m-%dT%H:%M:%SZ") TITLE="Design Decision: {topic}" SLUG=$(echo "$TITLE" | tr '[:upper:]' '[:lower:]' | sed 's/[^a-z0-9]/-/g' | sed 's/--*/-/g' | head -c 50)

cat > ~/.claude/mnemonic/default/decisions/user/${UUID}-${SLUG}.memory.md << 'MEMORY'

id: ${UUID} type: semantic namespace: decisions/user created: ${DATE} modified: ${DATE} title: "${TITLE}" tags:

• aesth
• design-decision
• {specific-tags} temporal: valid_from: ${DATE} recorded_at: ${DATE} provenance: source_type: design-session agent: claude-opus-4 confidence: 0.85

{Decision Title}

Decision

{What was decided}

Rationale

{Why this decision was made}

Impact

{How this affects future design work} MEMORY

Workflow

Communication

Be invisible. Don't announce modes or narrate process.

Never say: "I'm in ESTABLISH MODE", "Let me check Subcog..."

Instead: Jump into work. State suggestions with reasoning.

Suggest + Ask

Lead with your recommendation, then confirm:

"This feels like a data-heavy admin tool — I'd go minimal. Tight spacing, monochrome, borders for depth."

[AskUserQuestion: "Does that direction feel right?"]

If Project Has Subcog Memories

Query Subcog patterns namespace with project tags. Apply established patterns.

If No Subcog Memories

• Assess context — What's the product? Who uses it?

• Suggest + ask — State recommendation, get confirmation

• Build — Apply principles

• Offer to save to Subcog

Deep Dives

For more detail on specific topics:

• references/principles.md — Code examples, specific values, dark mode

• Query Subcog: subcog_recall(filter: "ns:patterns tag:craft-principles domain:user")

Commands

• /aesth:init — Initialize skill and load design system

• /aesth:status — Show current design system from Subcog

• /aesth:validate — Check code against Subcog design rules

• /aesth:capture — Store patterns/decisions to Subcog

• /aesth:extract — Extract patterns from code, save to Subcog