aquietloop.com
Personal site as practitioner's workbench
Eleventy-based personal site exploring design, technology, and AI integration with custom tooling
Personal and professional digital space exploring the intersection of design, technology, and artificial intelligence. Not just a blog about AI—the site itself is a product of AI-integrated workflows.
Core Thesis
The future of high-impact design work lies in the thoughtful integration of custom tooling, rigorous process, and artificial intelligence.
What It Is
A practitioner’s workbench built on Google’s high-performance Eleventy template. The site serves dual purposes:
- Personal knowledge base — Processing thoughts, documenting learnings
- Public portfolio — Demonstrating thinking and technical capabilities
Technical Philosophy
| Choice | Why |
|---|---|
| Eleventy | Flexibility, performance, no framework overhead |
| Plain CSS/JS | Full control, minimal dependencies |
| Custom image pipeline | srcset, blurry placeholders, responsive optimization |
| CSP headers | Security as core feature |
| Analytics proxy | User privacy, third-party control |
Performance is treated as a core feature, not an afterthought.
Content Architecture
/thoughts/— Short-form blog posts on design methodology/writing/— Long-form work including “Words That Work” metaprompting book/_docs/— Research notes, reports, knowledge base
AI Integration
The most distinctive feature: a complete sessions/ framework for Claude AI interaction.
- Custom CLI for AI collaboration
- DAIC mode system (Discussion-Alignment-Implementation-Check)
- Transcript storage and session management
- Multi-agent architecture with specialized roles
This isn’t just using AI—it’s building infrastructure for AI-assisted creative work.
Key Content
“Words That Work” — A book about metaprompting, arguing for “shape before you prompt” to improve AI output quality. Co-written with Claude, documenting the unpolished process.
Design methodology articles:
- “Sketching States Before Screens” — Behavior-first design with statecharts
- “Sync, Scrub, Simulate” — Figma plugin POCs for interaction modeling
- “A Designer’s Dilemma” — Bridging statecharts and UI design
Voice & Identity
- Style: Analytical, practitioner-focused, actionable frameworks
- Position: Senior Product Designer/Design Engineer at the design-strategy-engineering intersection
- Values: Rigor, craftsmanship, openness
- Aesthetic: Minimalist, typography-focused (“A Quiet Loop”)
Conceptual Tensions
The site navigates between:
- Human-centric design vs. AI-driven automation
- Rapid prototyping vs. deliberate craft
- Sharing openly vs. maintaining quiet focus