<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Bryan</title>
    <description>The latest articles on Forem by Bryan (@sakaax).</description>
    <link>https://forem.com/sakaax</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3855949%2Fde44939f-bf77-4526-9492-d9541102aa3d.jpeg</url>
      <title>Forem: Bryan</title>
      <link>https://forem.com/sakaax</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/sakaax"/>
    <language>en</language>
    <item>
      <title>I built img-pilot: the first Claude Code plugin that generates AI images from your terminal</title>
      <dc:creator>Bryan</dc:creator>
      <pubDate>Thu, 16 Apr 2026 21:26:34 +0000</pubDate>
      <link>https://forem.com/sakaax/i-built-img-pilot-the-first-claude-code-plugin-that-generates-ai-images-from-your-terminal-511e</link>
      <guid>https://forem.com/sakaax/i-built-img-pilot-the-first-claude-code-plugin-that-generates-ai-images-from-your-terminal-511e</guid>
      <description>&lt;p&gt;Every time I ship a side project, I spend 3 hours on brand assets I don't care about. Logo. Favicon 16 and 32. Apple touch icon. OG image. Twitter card. Discord embed. GitHub banner. iOS icon. Android icon. Different sizes, different crops, same logo.&lt;/p&gt;

&lt;p&gt;Each one is a browser tab, a prompt I'll throw away, a manual copy-paste, a resize in Figma.&lt;/p&gt;

&lt;p&gt;So I built &lt;strong&gt;img-pilot&lt;/strong&gt; — the first Claude Code plugin that generates AI images from your terminal. And because I refuse to pay for eight API calls when I only need the first one, I built a cost optimizer that derives every variant locally.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;One API call. Eight assets. Nine providers.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What it actually does
&lt;/h2&gt;

&lt;p&gt;From inside Claude Code:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/img-pilot logo
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;That triggers four phases:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Claude reads your context&lt;/strong&gt; — if you have &lt;a href="https://ux-pilot.sakaax.com" rel="noopener noreferrer"&gt;ux-pilot&lt;/a&gt; or &lt;a href="https://brand-pilot.sakaax.com" rel="noopener noreferrer"&gt;brand-pilot&lt;/a&gt; installed, it parses their brief files. Otherwise it runs a 6-question discovery (ABCD + free text) and writes &lt;code&gt;img-pilot/brief.md&lt;/code&gt; for future runs.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Claude builds the prompt&lt;/strong&gt; — from the brief, your brand vocabulary, your target provider's strengths. Not a generic "make me a logo" — a real production prompt.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;The cost optimizer picks the cheapest path&lt;/strong&gt; — this is the interesting bit. More below.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Dry-run confirmation&lt;/strong&gt; — you see the plan (provider, exact prompt, cost estimate in USD) and type yes before a single byte goes out.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  The cost-optimizer trick
&lt;/h2&gt;

&lt;p&gt;Before every asset request, the optimizer walks a decision tree:&lt;/p&gt;

</description>
      <category>claude</category>
      <category>ai</category>
      <category>nanobanana</category>
    </item>
    <item>
      <title>Stop shipping ugly AI apps: I built a CLI to fix brand &amp; SEO issues</title>
      <dc:creator>Bryan</dc:creator>
      <pubDate>Wed, 15 Apr 2026 18:35:58 +0000</pubDate>
      <link>https://forem.com/sakaax/stop-shipping-ugly-ai-apps-i-built-a-cli-to-fix-brand-seo-issues-37ig</link>
      <guid>https://forem.com/sakaax/stop-shipping-ugly-ai-apps-i-built-a-cli-to-fix-brand-seo-issues-37ig</guid>
      <description>&lt;p&gt;I kept noticing the same pattern with AI-generated apps.&lt;/p&gt;

&lt;p&gt;They work.&lt;br&gt;
But they look... off.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Colors drift&lt;/li&gt;
&lt;li&gt;Components are inconsistent&lt;/li&gt;
&lt;li&gt;SEO is half-broken&lt;/li&gt;
&lt;li&gt;Branding feels random&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So I built something to fix that.&lt;/p&gt;

&lt;h2&gt;
  
  
  Introducing Brand Pilot
&lt;/h2&gt;

&lt;p&gt;Brand Pilot is a CLI tool that scans your project and detects brand and SEO issues directly from your terminal.&lt;/p&gt;

&lt;p&gt;No dashboards. No setup. Just run a command.&lt;/p&gt;

&lt;p&gt;👉 Check it out: &lt;a href="https://brand-pilot.sakaax.com" rel="noopener noreferrer"&gt;https://brand-pilot.sakaax.com&lt;/a&gt;&lt;br&gt;&lt;br&gt;
👉 GitHub repo: &lt;a href="https://github.com/Sakaax/brand-pilot" rel="noopener noreferrer"&gt;https://github.com/Sakaax/brand-pilot&lt;/a&gt;  &lt;/p&gt;

&lt;h2&gt;
  
  
  What it does
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Audits brand consistency (colors, fonts, components)&lt;/li&gt;
&lt;li&gt;Detects SEO issues (meta tags, OG, structure)&lt;/li&gt;
&lt;li&gt;Generates README, OG images, and brand kits&lt;/li&gt;
&lt;li&gt;Works locally (no API, no telemetry)&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Example
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
bash
/brand-pilot audit
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

</description>
      <category>ai</category>
      <category>claude</category>
      <category>vibecoding</category>
    </item>
    <item>
      <title>I built a UX co-pilot for Claude Code — 376 rules, live preview, zero AI slop</title>
      <dc:creator>Bryan</dc:creator>
      <pubDate>Wed, 01 Apr 2026 15:29:41 +0000</pubDate>
      <link>https://forem.com/sakaax/i-built-a-ux-co-pilot-for-claude-code-376-rules-live-preview-zero-ai-slop-13p6</link>
      <guid>https://forem.com/sakaax/i-built-a-ux-co-pilot-for-claude-code-376-rules-live-preview-zero-ai-slop-13p6</guid>
      <description>&lt;h2&gt;
  
  
  The problem
&lt;/h2&gt;

&lt;p&gt;Every time I asked an AI to design a UI, I got the same output:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Inter font&lt;/li&gt;
&lt;li&gt;Purple gradient on white background&lt;/li&gt;
&lt;li&gt;Centered hero with a subtitle and a button&lt;/li&gt;
&lt;li&gt;"Here's V1, V2, and V3"&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It looked... fine. But it looked like everything else. No personality, no UX thinking, no understanding of what the product actually needed.&lt;/p&gt;

&lt;p&gt;## The idea&lt;/p&gt;

&lt;p&gt;What if the AI could &lt;strong&gt;ask questions first&lt;/strong&gt; before generating anything?&lt;/p&gt;

&lt;p&gt;What if it understood that a fintech dashboard needs different UX rules than a restaurant landing page? That a dev tool should use monospace fonts and dark mode, not pastel gradients?&lt;/p&gt;

&lt;p&gt;That's what I built.&lt;/p&gt;

&lt;p&gt;## Meet ux-pilot&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/Sakaax/ux-pilot" rel="noopener noreferrer"&gt;ux-pilot&lt;/a&gt; is a free, open-source plugin for &lt;a href="https://claude.ai/code" rel="noopener noreferrer"&gt;Claude Code&lt;/a&gt; that acts as a senior UX designer inside your terminal.&lt;/p&gt;

&lt;p&gt;Instead of generating code directly, it runs a &lt;strong&gt;structured discovery flow&lt;/strong&gt; — asks about your product, users, business model, and design preferences — then applies the right rules from a&lt;br&gt;
   library of &lt;strong&gt;376 UX rules&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;### The 4 phases&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Discovery&lt;/strong&gt;&lt;br&gt;
  The plugin asks questions one at a time (ABCD choices + free text). It adapts — if you're building a CLI tool, it skips pricing/funnel questions. If you give detailed answers, it infers&lt;br&gt;
  what it can and moves faster.&lt;/p&gt;

&lt;p&gt;Output: a structured UX Brief.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Audit&lt;/strong&gt;&lt;br&gt;
  Already have code? The plugin scans it. It detects your framework (Next.js, React, Vue, Svelte), checks routes, HTML structure, forms, accessibility, SEO, mobile. Produces a scored report&lt;br&gt;
   with findings by severity.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Preview&lt;/strong&gt;&lt;br&gt;
  Opens a local server with hot reload (SSE). Generates screens in vanilla HTML/CSS. For each screen, proposes 2-3 &lt;strong&gt;named versions&lt;/strong&gt; — not V1/V2/V3, but descriptive names like "Classic",&lt;br&gt;
  "Bold", "Minimal". You approve, reject, or comment.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Export&lt;/strong&gt;&lt;br&gt;
  Generates a complete UX spec in markdown. Optionally converts approved screens to React, Svelte, or Vue components.&lt;/p&gt;

&lt;p&gt;## 376 rules, loaded on-demand&lt;/p&gt;

&lt;p&gt;The rules are organized in 6 categories:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;UX Patterns&lt;/strong&gt; (10 files) — accessibility, forms, navigation, layout, typography&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Conversion &amp;amp; Funnel&lt;/strong&gt; (7 files) — CTA, pricing, signup, 34 landing patterns&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;SEO &amp;amp; AEO&lt;/strong&gt; (5 files) — structure, schema.org, AI citation optimization&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Psychology&lt;/strong&gt; (4 files) — social proof, cognitive load, trust, persuasion&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Aesthetics&lt;/strong&gt; (4 files) — anti-AI-slop, typography craft, 67 UI styles&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Product Type&lt;/strong&gt; (1 file) — 30 product-specific recommendations&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Key design decision&lt;/strong&gt;: rules are never loaded all at once. When you're designing a landing page, only landing-patterns, cta, seo, aesthetics, and social-proof rules are loaded. This&lt;br&gt;
  saves tokens and improves accuracy.&lt;/p&gt;

&lt;p&gt;## The anti "AI slop" feature&lt;/p&gt;

&lt;p&gt;This was the main motivation. The plugin has explicit rules against generic AI output:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Banned:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Inter, Roboto, Arial, system fonts&lt;/li&gt;
&lt;li&gt;Purple gradients on white backgrounds&lt;/li&gt;
&lt;li&gt;Cookie-cutter layouts&lt;/li&gt;
&lt;li&gt;V1/V2/V3 version naming&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Instead:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Distinctive fonts with weight extremes (200 vs 800)&lt;/li&gt;
&lt;li&gt;3x+ size jumps between heading and body&lt;/li&gt;
&lt;li&gt;Gradient meshes, noise textures&lt;/li&gt;
&lt;li&gt;Descriptive version names&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;## Built-in data&lt;/p&gt;

&lt;p&gt;Beyond rules, the plugin ships with curated design data:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;161 color palettes&lt;/strong&gt; — industry-specific&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;57 font pairings&lt;/strong&gt; — Google Fonts with mood tags&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;67 UI styles&lt;/strong&gt; — with use cases and CSS hints&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;30 product types&lt;/strong&gt; — with landing patterns and anti-patterns&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;## The meta flex&lt;/p&gt;

&lt;p&gt;The &lt;a href="https://ux-pilot.sakaax.com" rel="noopener noreferrer"&gt;landing page&lt;/a&gt; for ux-pilot was designed using ux-pilot itself. The plugin ran the discovery, chose the typography (Newsreader + Space Grotesk + JetBrains&lt;br&gt;
   Mono), picked the terracotta accent, and generated the structure.&lt;/p&gt;

&lt;p&gt;## Try it&lt;/p&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
bash
  /plugin marketplace add Sakaax/ux-pilot
  /plugin install ux-pilot@ux-pilot
  /ux-pilot

  - Landing: https://ux-pilot.sakaax.com
  - Demo: https://ux-pilot.sakaax.com/demo.html
  - GitHub: https://github.com/Sakaax/ux-pilot
  - Product Hunt: https://www.producthunt.com/products/ux-pilot-2

  Free, MIT licensed, open source. Feedback welcome — especially on the rule set and the discovery flow.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

</description>
      <category>ai</category>
      <category>showdev</category>
      <category>ui</category>
      <category>ux</category>
    </item>
  </channel>
</rss>
