DEV Community: Shinobis IA

I built GEO Tarot: 22 interactive SVG cards explaining Generative Engine Optimization

Shinobis IA — Mon, 06 Apr 2026 20:46:56 +0000

EO optimizes for a list of links. GEO optimizes for being included in the answer.

I have been implementing Generative Engine Optimization on my own blog for the past three months. llms.txt, JSON-LD Knowledge Graphs, citable content structure, distributed presence across authority platforms. The more I documented, the more I realized there are about 22 core concepts that make GEO work.

22 concepts. 22 tarot major arcana. The metaphor was too perfect to ignore.

So I built it: GEO Tarot

How it works

22 cards laid out in a grid, face down. Each back shows a generative pattern built from the same hash-based algorithm I use for my blog post images. Click any card to flip it with a CSS 3D animation. The front reveals the GEO concept with an abstract SVG illustration and a short explanation.

The stack

Vanilla PHP. CSS animations for the flip. JavaScript for interaction. SVG for all illustrations. No frameworks. No external JS libraries. No AI-generated art. Every geometric illustration is hand-coded.

The tool is trilingual (English, Spanish, Japanese) with URL-based language switching and proper hreflang tags.

Some of my favorite cards

The Hierophant (V) — llms.txt: The file at your domain root that tells AI models who you are. The equivalent of robots.txt for machines that generate answers.

The Emperor (IV) — Knowledge Graph: JSON-LD connecting your articles with relatedLink, marking topics with about, detecting tools with mentions. Your blog becomes a knowledge network, not isolated pages.

The High Priestess (II) — Sentiment Mapping: LLMs distinguish between content that asserts with authority and content that speculates. The tone of your writing directly affects whether you get cited.

The Star (XVII) — First ChatGPT citation: The moment you ask ChatGPT about your topic and it cites you instead of someone with more followers. That moment justifies everything.

The Devil (XV) — Generic AI content: Articles written by ChatGPT without editing, without real experience. There are thousands. LLMs already recognize them and give them less weight.

Every card that corresponds to a published blog post links directly to it for deeper reading.

Why I built this

Most GEO guides are walls of text that nobody bookmarks. I wanted something visual that people would share, come back to, and actually remember. Each card works as a standalone social media post too. 22 cards, 22 posts, zero extra writing.

If you are thinking about GEO for your own site, start with cards V (llms.txt), IV (Knowledge Graph), and III (citable content). Those three alone put you ahead of 95% of blogs.

Try it here

Built by Shinobis — a UX/UI designer with 10+ years in banking and fintech, documenting everything about building with AI.

How I use Claude for web development: a designer's guide to building from scratch

Shinobis IA — Mon, 23 Mar 2026 03:11:35 +0000

I am not a developer. I have never been one. For over ten years I designed interfaces for banks and fintech companies. I knew what a div was. I could inspect an element in Chrome. I had opinions about padding. But writing a full application from scratch was never something I imagined doing.

Then I started using Claude. And in about two months, working evenings and weekends, I built a complete trilingual blog with PHP, MySQL, a custom admin panel, scheduled posts, a generative image system, and SEO that Google actually indexes. No WordPress. No frameworks. No templates.

This is not a tutorial about Claude Code or vibe coding. This is about what happens when a designer with real industry experience uses Claude as a development partner to build something production-ready. The mistakes, the breakthroughs, and what I learned about both coding and communicating with AI.

Claude vs ChatGPT for coding: what I found after months of use

I tried both. Extensively. Here is what I found after months of daily use.

ChatGPT gives you code that looks correct. It compiles. It runs. And then three days later you discover it breaks when a user does something unexpected. The code is technically right but architecturally fragile. It solves the immediate problem without considering the system around it.

Claude gives you code that considers context. When I explain my database structure, the existing functions, and what I want to achieve, Claude does not just write the new function. It checks for conflicts with what already exists. It suggests changes to related functions I did not ask about. It explains why one approach is better than another for my specific situation.

The difference became obvious when I was building the multilingual routing system. ChatGPT gave me a solution that worked for two languages. When I added Japanese, everything broke. Claude asked me upfront how many languages I planned to support and built the system to handle any number from the start.

That said, ChatGPT is better for quick research and brainstorming. I use it to explore ideas before taking them to Claude for implementation. They are different tools for different stages.

How I talk to Claude about code

This is the part most guides skip. The actual conversation. How do you explain what you need to an AI when you are not a developer and you do not know the technical vocabulary?

You explain it like a design brief.

When I need a new feature, I do not say write me a PHP function. I describe the user experience I want. I explain what happens when someone visits a page, what they should see, what happens when they click something, and what the system should do behind the scenes. Claude translates that into code.

For example, when I wanted to add scheduled posts, I told Claude something like: I want to write posts in advance and set a future date. When that date arrives, the post should automatically become visible on the site without me doing anything. The homepage should only show published posts, sorted by their publish date, not the date I created them in the admin.

That description contains no technical terms. But it gives Claude everything it needs: the user flow, the business logic, the display requirements, and the edge case about sorting.

Building the trilingual system

The multilingual system was the hardest part of the entire project. Not because the code was complex but because the decisions were complex. Should each language have its own URL structure. How do you handle SEO for three different languages. What happens when a translation does not exist for a post.

Claude helped me think through each decision before writing a single line of code. We settled on a structure where Spanish is the default language with no prefix, English uses /en/, and Japanese uses /ja/. Each post has a slug in the posts table for Spanish and translated slugs in a post_translations table for English and Japanese.

What surprised me was how Claude handled the edge cases I did not think of. What if someone shares an English URL but the visitor browser is set to Japanese. What if a post exists in Spanish and English but not in Japanese. Claude anticipated these scenarios and built fallbacks for each one.

The generative identity system: generative design with code

This is my favorite part of the entire project. Every post on my blog generates its own unique image from the content hash. No AI generation, no stock photos. The same content always produces the same visual.

I explained the concept to Claude like this: I want each post to have a unique image that is created automatically from the post content. Like a visual fingerprint. If the content changes, the image changes. If the content stays the same, the image stays the same.

Claude proposed using PHP GD library to create the image algorithmically. We extract a hash from the post title, map the hash characters to colors, build a grid pattern, expand it symmetrically, and render it as a PNG. The result is a deterministic system where every post has a visually unique identity tied to its content.

The code went through several iterations. The first version produced images that were too random and noisy. I gave Claude feedback from a design perspective: The contrast is too low between adjacent cells. The center of the image needs more visual weight. The color palette needs to feel cohesive, not like random noise. Claude adjusted the algorithm based on my visual feedback.

Real mistakes and how we fixed them

It was not all smooth. The encoding disaster: I used special characters in my templates. They looked fine on my screen but rendered as broken characters on some browsers. Claude identified the issue and we replaced symbols with HTML entities.

The slug catastrophe: I changed a post title in the admin panel and the URL changed with it, breaking all existing links and Google index. Claude helped me build a system where slugs are locked once a post is published.

The date confusion: All posts showed their creation date instead of their publication date. Claude helped me add a published_at field to the database and update every query and template that displayed dates.

What this Claude Anthropic tutorial taught me about building as a designer

The blog is live at shinobis.com. It serves content in three languages, generates its own images, publishes on a schedule, has proper SEO with structured data, and ranks in Google search results including queries in Japanese that I never expected.

I built it without knowing PHP before I started. Without understanding MySQL joins. Without ever having configured an Apache server. What I did have was ten years of thinking about how people interact with digital products, a clear vision of what I wanted to build, and an AI that could translate that vision into working code.

That is the real story here. Not that AI can write code. Everyone knows that by now. The story is that a designer with deep domain expertise and a clear vision can build production-ready software by treating AI as a development partner rather than a magic tool.

What is llms.txt and why your site probably needs one

Shinobis IA — Wed, 25 Feb 2026 15:35:34 +0000

An llms.txt file is the equivalent of robots.txt but for language models like ChatGPT, Claude and Perplexity. While robots.txt tells Google what to crawl, llms.txt tells LLMs who you are, what you write about and which pages matter.

It is a plain Markdown file that lives at the root of your domain. Think of it as a business card for machines that generate answers.

The standard

The format was proposed by llmstxt.org in late 2024. It is not official yet. No LLM has publicly confirmed using it. But Anthropic already has one on their own domain. And crawlers from OpenAI, Google and Perplexity already look for similar files when they visit sites.

As of mid-2025, fewer than 1,000 domains had published one. Early days.

File structure

The format is simple Markdown:

# Your Site Name

> Brief description of your site or project.

## Author
- Role: Your role
- Experience: Your background
- Contact: your@email.com

## Topics Covered
- Topic one
- Topic two
- Topic three

## Content Policy
- All content is original
- Content may be cited with attribution

## Key Pages
- [Homepage](https://yoursite.com): Main page
- [About](https://yoursite.com/about): About the author
- [Sitemap](https://yoursite.com/sitemap.xml): XML sitemap

Rules to follow:

H1 is only the site name. Nothing else on that line.
Blockquote (>) goes right below with a brief description.
H2 sections group information with bulleted lists.
Links use standard Markdown: - [Name](URL): description

How I implemented mine

I run a trilingual blog (ES/EN/JA) about design and AI. My llms.txt has five sections: Author, Topics Covered, Content Policy, and three Key Pages sections (one per language).

Everything is written in English because AI crawlers process in English. Your content can be in any language but the llms.txt works best in English.

Apache setup

Two things in .htaccess:

# Serve llms.txt cleanly
RewriteRule ^llms\.txt$ /llms.txt [L]

# Force plain text with UTF-8
<Files "llms.txt">
    ForceType text/plain; charset=utf-8
</Files>

robots.txt reference

Add this at the end of your robots.txt:

# LLMs context file
# https://llmstxt.org/
LLMs-Txt: https://yoursite.com/llms.txt

WordPress

You can create the file manually and upload via FTP. Yoast SEO has an auto-generate option but gives you less control.

How I validated it

I asked ChatGPT to read my file directly from the URL and analyze whether it followed the llmstxt.org standard.

The first version had issues: H1 combined with the description, links without proper Markdown formatting. ChatGPT caught both. I fixed the structure, validated again and it passed.

That is the most practical way to test yours right now. Ask ChatGPT or Claude to read your llms.txt URL and tell you if the structure is correct. If an LLM can interpret it, it works.

What to expect (and what not to)

This file will not make you appear in ChatGPT answers tomorrow. No LLM officially uses it to decide what to cite. Server logs from early adopters show AI crawlers rarely visit the file yet.

But the cost is minimal: one text file, thirty minutes, zero risk. If the standard gets adopted, you are ready. It is like having a sitemap before Google formally required one.

The worst case: nothing happens. The best case: when LLMs start looking for this file, yours is already there.

You can see mine live at shinobis.com/llms.txt.

I am a UX/UI designer with 10+ years in banking and fintech. I document the real process of integrating AI into design work at shinobis.com. Writing in Spanish, English and Japanese.

I built a system where each blog post generates its own unique image from a content hash

Shinobis IA — Tue, 24 Feb 2026 19:42:25 +0000

Every post on my blog has a unique square image. It looks like a QR code but it is not. The colors change from one post to another. And at the center, always the same kanji: 忍 (shinobi).

These images are not designed manually. They are generated by the content itself.

The problem

I run a trilingual blog (Spanish, English, Japanese) about integrating AI into professional design work. I publish every three days. Creating a unique header image for each post in three languages was not sustainable.

Stock photos felt generic. Midjourney images felt disconnected from the content. I wanted something that was automatic, unique to each post, and visually consistent across the entire site.

How it works

The system takes two inputs from each post: the title and the character count of the content.

The title generates the pattern. It gets hashed using MD5 and SHA1 chained together to produce enough data to fill a 32x32 grid (1024 cells). Each hexadecimal character from the hash maps to one of four cell states:

Black cube
Accent color cube
Light gray cube
Empty (white)

Change one word in the title and the entire pattern changes. The image is a visual fingerprint of the text.

The character count determines the accent color. Short posts are gold. Medium-length posts shift through cold blue and purple. Long posts become terracotta. If I ever write something really long, it will be mint green.

The result: every post has a unique visual identity that is alive as long as the text is. If the article grows, the color shifts. If the title changes, the pattern regenerates completely.

The kanji at the center

Every image has a white space in the center with the kanji 忍. It reads "shinobi" in Japanese and means to persevere silently. It is the origin of the blog name and the visual anchor that connects all images regardless of how different their patterns are.

Technical implementation

The images are generated server-side with PHP and the GD library. Here is the basic flow:

1. Take post title
2. Generate hash: md5(title) + sha1(title) chained
3. Map each hex character to a cell state
4. Fill 32x32 grid on white canvas
5. Determine accent color from character count
6. Render kanji center with Noto Sans CJK font
7. Save as PNG

The same image is used in three contexts: thumbnail on the homepage, header inside the post, and Open Graph card when someone shares a link on social media. One image, three uses, zero manual work.

Why not AI-generated images

This is a blog about a designer working with AI. I use Midjourney and other tools daily for client work. But for the blog identity itself, I wanted something deterministic. Something where the relationship between content and visual is direct and explainable, not probabilistic.

There is also a practical reason. With three languages and a new post every three days, I would need to generate or select 3 images every 72 hours. The generative system handles this automatically. I publish, the images appear.

The stack

The entire blog is built from scratch. No WordPress, no frameworks, no JS build tools.

PHP (vanilla)
MariaDB
CSS (no preprocessors)
GD library for image generation
Noto Sans CJK for kanji rendering

Try it

You can see the system in action at shinobis.com. Every post on the homepage has its own generated image. The generative identity page explains the full concept.

If you want to implement something similar for your own project, the approach is simple: hash your content, map it to a grid, pick a color rule. The result gives any content platform a unique visual identity with zero ongoing effort.

I am a UX/UI designer with 10+ years in banking and fintech. I built this blog to document my real experience integrating AI into professional design workflows. Writing in Spanish, English and Japanese at shinobis.com.