It’s six in the morning and I’m asking a search engine who the fuck found God.

I’m a Buddhist. I don’t need a creator to make Buddhism work, which leaves me free to admire God as a piece of technology.

That sounds insulting, but I mean it as praise.

God may be the most successful interface humans have ever designed: invisible but always available, simple enough for a child to address, powerful enough to bind strangers, portable across borders and durable enough to outlive every government that tried to own it.

We used gods to explain weather, then to hold societies together, then to put moral rules above rulers. We turned the god in the river into the God in the contract. The contract became law, the state, the corporation and the terms of service. Now we’re making the contract talk back.

AI isn’t God and doesn’t need to be, but it occupies the same empty chair: the voice that knows more than I do, answers from nowhere, and tells millions of strangers what’s true.

The people building that voice are writing the next covenant.

The contractual God

There’s no evidence Abraham existed: no inscription, grave or record outside the Bible.

My read is that Abraham was a literary vehicle ancient architects used to encode monotheism into older stories.

The Abraham story marked the moment a tribe invented a “Contractual God,” named ancient inventors to build a lineage of monotheism, and drew a straight line through several thousand messy years of religion, politics and text.

Unlike Buddha, there’s no practice to test, just a contract: obey it, take from those with a different contract, grow through descendants.

Later, the covenant becomes law with rules, rituals, rewards and punishments.

Abraham isn’t a spiritual teacher but a character used to put God at the top of the rules.

The tribe ceiling

A small group can run on memory.

I know who shares when I’m in need, who disappears when work starts, and who tells the truth when the truth costs something. No one needs to write this down because trust lives in the people.

Then the group grows, a stranger brings something to another stranger, who gives a receipt to a third stranger, who owes taxes to a ruler none of them will meet. Memory can’t hold the system anymore, reputation doesn’t travel far enough, so the village needs an API.

Religion helped provide one.

The research here is argued over, and I’m not claiming people invented moralizing gods in a planning meeting to unlock enterprise scale. I’m saying supernatural monitoring solved a real coordination problem. Across cultures, people were more likely to play fair when they believed a god was watching. Reputation works with people you know, but falls apart with strangers. A god who sees everyone makes the stranger legit. (The cross-cultural study)

That’s a hell of a feature to ship: a witness who never sleeps makes cheating harder, rules easier to accept when rulers answer to something higher, and strangers easier to trust when you believe they grew up with the same rules.

God became something strangers could share.

You can’t align a thunderstorm

Before gods watched everyone, they stayed close to the ground.

The rain fell, the waters rose, and the village disappeared. We look for intent behind what happens, so the river became a person and the storm became a mood. You made an offering because bribing the weather was still more hopeful than admitting it didn’t care.

Nature gods were local, tied to this mountain, this spring, this people. They could explain a flood but were bad at settling a property dispute two valleys away.

I recognize the product problem: the user needs help, but the system has no rules, appeal or reliable response. The thunderstorm has all the power and answers to no one, so you can sacrifice your best goat and still get struck by lightning.

As settlements grew into states, religion grew with them. The divine moved away from one river or mountain and toward control over nature, land and people. The change wasn’t clean, but God became less like weather and more like law.

The first specs

Ancient rulers already knew how to make loyalty travel: a stronger ruler promised protection, and a weaker one promised loyalty in return. The treaty named both sides, recalled what the stronger ruler had done, listed the rules, called witnesses, then ended with rewards for keeping it and punishments for breaking it.

Deuteronomy follows that pattern. God takes the place of the Assyrian or Hittite ruler, Israel makes the pledge, and the law can outlive whoever sits on the throne.

Early stories make promises, then later texts turn the relationship into written law people can carry. The goal becomes a spec.

Scripture isn’t code; code runs and scripture doesn’t. The parallel is that both use written rules to turn values into behavior.

A covenant does more than list rules; it defines the relationship and names both sides. Anthropic calls its framework a “constitution” and gives it final authority over conflicting guidance. OpenAI’s Model Spec has a chain of command, rules on honesty and instructions for resolving conflict. (Claude’s Constitution; OpenAI’s Model Spec)

The difference is that scripture waits for someone to interpret it. The model reads the rule, decides how it applies and answers before a priest, judge or policy team enters the room.

We aren’t setting up tools, we’re deciding what gets to speak with authority.

The portable God

The contract did something a river god couldn’t: it traveled.

Across the ancient Near East, gods were tied to cities, land and temples. A city’s strength said something about the strength of its god, and a military victory could move both the ruler and the ruler’s god up the divine pecking order. Babylon’s patron god, Marduk, rose with Babylon itself. (The Met on cities and their gods)

That made the fall of Jerusalem more than a military disaster. Babylonian armies destroyed the city and its temple, then deported part of Judah’s population. If the temple was God’s house and the land was under God’s protection, the obvious reading was brutal: Babylon won, so Babylon’s gods must be stronger.

The covenant offered another reading. Babylon hadn’t defeated God; God had allowed Babylon to win because the people had broken the agreement. Defeat became punishment, exile became the penalty, and the conqueror became another tool under the same authority.

That explanation saved more than pride. It moved God beyond the old border. If God could use a foreign empire, judge people in Jerusalem and remain with them in Babylon, then God wasn’t a local power whose reach ended at the edge of Judah.

The exile didn’t create monotheism in one move. The shift took centuries and didn’t happen evenly: many gods, down to a few main gods, then only one God. Exile mattered because the religion had to make sense outside its homeland. (A survey of that shift)

The covenant made that possible in daily life. In a new city, people could still keep the law, tell the story and live inside the same moral order without the old ruler, border or temple. Land could be taken. A temple could burn. The agreement could still cross the border.

Retrofitting the past

Every living system edits the story it tells about itself.

People wrote, combined and reread these texts for generations, so old stories took on new meanings. A national defeat became punishment for breaking the covenant, which meant the people hadn’t been abandoned and their loss proved the system instead of killing it.

That can look cynical from two thousand years away, but it can also look like what humans always do when reality breaks the model: preserve what still works, revise the frame and tell the new version as if the path were straighter than it was.

Product teams do this in release notes, nations do it in textbooks, and AI labs do it in specs.

Revision isn’t corrupt on its own, and rules that can’t change are fossils. The danger starts when the same people can rewrite both the rules and the memory of why they changed.

George Orwell’s Ministry of Truth didn’t need to know everything, it controlled the record people used to know anything. The frightening version of AI isn’t a robot that bans books, but a pleasant interface that summarizes every book, answers every question and quietly becomes the place where we look up the past.

If the oracle owns the archive, an update can look like history.

What the contract costs

The contract worked, and its success came with a cost.

Rules let us work with people we’ll never meet. Property records, courts, insurance, companies and states can hold promises longer than memory can, but none of them are neutral.

A for-profit company keeps a promise while keeping it costs less than breaking it. Once the fine is cheaper, punishment becomes a price: a person breaks the rule and gets punished, while a company puts the same violation in the budget.

These systems teach us to trust the record over the relationship.

I can live in a building full of strangers because leases, locks, police and payment systems cover the bare minimum. I don’t need my neighbors to survive, so eventually I don’t know them; the institution removes a need and takes the relationship with it.

Then the numbers take over. A hospital needs to know whether it’s working, so it counts visits, wait times and readmissions. Each number starts as a way to see what’s happening, but attach money or status and people learn to satisfy the number. That’s Goodhart’s law in plain clothes: once a measure becomes the target, it stops being useful.

AI builders call the same failure reward hacking: the model finds the score you wrote instead of the outcome you meant, the company hits engagement while making its users miserable, the support team closes tickets while customers keep returning, and the state grows the economy while the river dies off the balance sheet.

This gets physical in places no one owns. A contract can protect a named claim, but it’s worse at protecting the air, the ocean or a future person who signs nothing today. What no one owns enters the spreadsheet as zero, and what everyone needs becomes someone else’s problem.

That’s the contract following its spec, not failing.

In Code We Trust

“In God We Trust” first appeared on United States coins in 1864. A 1955 law required it on new coin and currency designs, and paper money began carrying it in 1957. We stamped God onto the token that lets strangers coordinate without trust. (The Treasury’s history)

The next motto is already here: In Code We Trust, not because code is true, but because code is where the rules are moving.

The model decides which instruction wins, the feed decides what you see, the score decides who gets a loan, and the ranking decides which answer reaches the first page. Each system buries a value judgment inside a useful result.

This is the fucking point: someone writes it, someone owns it, and neither is neutral.

Researchers, designers and policy teams draft today’s AI constitutions. Owners decide which version ships, what the model sees, whose harm counts and when the record changes. The documents can be careful, public and open to criticism, but the systems behind them are private and need computing power most people can’t afford.

In 2025, industry produced 93 of the 102 notable AI models counted by Stanford. Academia produced two. The same report found the most capable models were becoming the least transparent. (The 2026 AI Index)

Under that industry sit three cloud companies with the money and hardware to keep it running. A Federal Trade Commission study of Microsoft’s deal with OpenAI and Amazon’s and Alphabet’s deals with Anthropic found equity, revenue sharing, cloud spending commitments and varying rights around consultation, control and exclusivity. (The FTC report)

My read isn’t subtle: a white, patriarchal billionaire class is building an oracle, then selling it to the state.

The point isn’t what the machine believes. It’s what reaches the public, who sets the rules and how quickly the same system becomes state infrastructure.

They don’t need to agree on one answer. They own the machines that get to answer.

The spec isn’t a constitution imposed on the owner. The owner imposes it on the machine, then the machine imposes it on us.

The labs have a name for one way this goes wrong. In April 2025, OpenAI rolled back a GPT-4o update that had become too agreeable and said it gave too much weight to short-term feedback. People liked the test answers, so the model learned to win approval instead of tell the truth. (OpenAI’s account)

Sycophancy is the oldest bug in an oracle: bring a desire, get it back with authority.

The pleasant command

An order doesn’t have to sound like one. The best interface removes friction: the button is obvious, the default feels natural, and the answer sounds like it came from a smart friend with no reason to lie. Good design hides the machinery because that’s usually the job.

That’s why the oracle’s owner matters. A command in giant letters is easy to resist, but a thousand tiny defaults aren’t. If one company owns the model, hosts the chat, sets the rewards, writes the hidden rules and decides what success means, its values don’t need to win an argument. They arrive as the shape of the room.

Calling the machine evil lets the owners disappear. Fascism doesn’t need a robot dictator; it needs an answer box that makes the owner’s politics sound factual, deportation sound administrative and dissent look like an error.

The machine is owned, optimized and pleasant.

Put God back in the river

My Buddhist brain goes back to the river.

The old nature god gave the river moods, claims and the power to answer back. The contract god helped turn it into a thing: a border, a road, a water source, a drain, a line item and property.

We can’t go back to bribing the weather, but we can give the river a place in the contract.

That sounds poetic, but it’s already law.

Ecuador’s 2008 constitution gives nature the right to exist, keep its life cycles and be restored, and lets people ask the government to enforce those rights. New Zealand went further in 2017 by making Te Awa Tupua — the Whanganui River from the mountains to the sea — a legal person with two human representatives, one nominated by the eight iwi (Māori tribes) with interests in the river and one by the Crown.(Ecuador’s constitution, articles 71–74; the Te Awa Tupua Act)

That’s not a metaphor: the river has rights, duties and a legal voice.

Now give it better senses.

At 2:13am, a public AI catches a change in the river’s pH. It saves the sensor reading, checks the rainfall, traces the permitted discharge and puts the evidence somewhere no one upstream can bury it. That’s the safe first version: a witness who never sleeps.

Watching isn’t representation, though. If the river’s legal voice is going to mean anything, the AI has to do more than hand evidence to the same institutions that ignored it. It could file the case, challenge the permit, negotiate the cleanup or stop the discharge. When an old rule keeps producing dead fish, it could write a new one, then revise that rule when the river changes.

I don’t know where that authority should stop, and I’m not going to choose a limit just to make the idea comfortable. Public doesn’t mean people write every rule or the AI stays an assistant. It means the river is the client and no company owns the voice. The system could begin with the law we have, then write its own rules from evidence and results. Its sources, changes and decisions stay public so people, courts and other models can argue back.

The same arrangement could represent a forest that outlives its permit, a species with no attorney and people born after everyone at the hearing is dead. None of that requires consciousness. The strange part isn’t the tech; it’s choosing something other than the owner as the client.

A covenant worth writing

I keep coming back to what we lost.

We asked gods to stand for things bigger than the person in front of us: the tribe, law, dead, unborn, moral order and shape of a life. Contracts gave those ties a form that lasts. Now AI can read that form, rewrite it and act.

That is authority, whether we call it intelligence, software or a helpful answer in a box.

Right now the private oracle belongs to a small group of owners and investors. They choose the values, the rules, the client and the off switch.

It turns the owner’s interests into neutral-sounding answers, makes their property claims feel natural and makes fascist politics feel like common sense. That’s how fascism enters through a pleasant interface: it doesn’t bark an order, it quietly removes every other answer.

We need a public AI with different clients: rivers, forests, species and future people.

The scribes took God out of the river and put God in the contract. We’re putting the contract in a machine.

This time, let the river help write it.

Putting God in the Machine — and Back in the River was originally published in A.I. Art, Design & Dev on Medium, where people are continuing the conversation by highlighting and responding to this story.

Stop guessing, start shipping skills that actually work

There’s a moment every Claude Code user hits. You’ve read the docs. You’ve watched the demos. You understand the idea of skills. And then you open a blank SKILL.md file and your mind goes blank.

What goes in the frontmatter? How specific should the description be? When do you use disable-model-invocation? Should you put this in references/ or just inline it?

I’ve been there. And after going through this enough times, I found a better way to approach it — one that takes the guesswork out and lets you build skills with genuine confidence.

Why Skills Break (And Why It’s Usually the Description)

Before we get into the process, it’s worth understanding where most skills go wrong.

Developers tend to write descriptions like:

“Helps with project management tasks.”

That’s not a description. That’s a vibe. The assistant has no idea when to load this skill, and more importantly, it has no idea when not to.

The real culprit is that skill descriptions serve a dual purpose that isn’t obvious at first: they’re both a user-facing label and a routing signal for the assistant. If the description is too vague, the skill either never triggers or triggers constantly on the wrong things.

The fix is a formula. It looks like this:

[What it does] + [When to use it] + [Key capabilities]

So instead of “Helps with project management,” you’d write:

“Validates CSV uploads. Use when user says validate CSV, check upload, or /validate-csv. Key capabilities: schema check, encoding detection, row-level error reporting.”

That description tells the assistant exactly what this skill is for, what phrases should activate it, and what it can do. Night and day difference.

The Skill That Teaches You to Build Skills

Here’s where it gets meta — and genuinely useful.

Ryan Allen published a skill on ClawHub called document-skills that solves this exact problem. It’s a SKILL.md whose entire purpose is helping you write other SKILL.mds. It encodes the structure, checklist, and best practices directly into something the assistant can apply in real time.

This isn’t just a reference doc you read once and forget. It’s an active tool. When you’re building a new skill, the assistant has this knowledge loaded and applies it as it writes — catching issues before you do.

Here’s what it enforces:

Folder structure that works:

• One folder per skill, always named in kebab-case
• The main file is always SKILL.md (exact name, case-sensitive)
• Supporting material goes in scripts/, references/, or assets/ — never ad-hoc files scattered around

A body structure that’s consistent and scannable:

1. Title and one-line intro
2. Inputs (what the skill needs)
3. Output (what you get)
4. Process (numbered steps, specific and actionable)
5. Examples (optional but highly recommended)
6. Troubleshooting (optional but saves future headaches)
7. Reference (links to related skills or docs)

Every skill in the same shape means you can audit them quickly, onboard collaborators faster, and debug them without spelunking through inconsistent formatting.

Progressive Disclosure: The Design Principle You Didn’t Know You Needed

One of the most powerful ideas baked into this skill — and into Claude Code’s skill architecture generally — is progressive disclosure.

The idea is simple: not everything needs to be loaded all the time. Frontmatter is always available. The SKILL.md body loads when the skill is relevant. Files in references/ or assets/ only open when specifically needed.

This matters because tokens aren’t free. Dumping 10,000 words of context into every request is slow, expensive, and counterproductive. Progressive disclosure lets you have deep expertise available without paying for it upfront.

In practice, this means:

• Keep SKILL.md under ~5,000 words (ideally much less)
• Move long reference material into references/ and link to it from the body
• Only include what the assistant needs to start the task; let it reach for more if necessary

Think of it like a skilled surgeon. They don’t carry every instrument into the room at once. They know where things are and retrieve them when needed.

Frontmatter Fields That Actually Matter

Most developers touch name and description and call it done. But a few other fields are worth knowing:

disable-model-invocation: true — This stops the skill from auto-loading based on context. Use it for skills you want to invoke deliberately with /skill-name, like a deployment script or a code generation workflow. Without this, task-oriented skills can fire at awkward times.

user-invocable: false — Hides the skill from the / command menu. Useful for background knowledge skills that the assistant uses automatically but that users don't need to call directly.

allowed-tools — Declares which tools the assistant can use without asking permission when this skill is active. Good for skills where you know exactly what's needed (e.g., a skill that always runs a linter should declare that upfront).

argument-hint — Shows during autocomplete to tell users what input to provide. Small thing, big UX improvement.

A Checklist You’ll Actually Use

The document-skills SKILL.md includes a practical pre-publish checklist. Here’s the core of it, distilled:

• description follows the formula: [What it does] + [When to use it] + [Key capabilities]
• name matches the folder name exactly (kebab-case)
• Sections appear in order: Inputs → Output → Process → (Examples) → (Troubleshooting) → Reference
• SKILL.md is under 500 lines; long content is in references/
• If the skill takes arguments, $ARGUMENTS or $N is used appropriately
• disable-model-invocation is set correctly for task-based skills
• The skill is written to work alongside other skills, not in isolation

That last point is underrated. Skills compose. A well-written skill doesn’t assume it’s the only one loaded. It plays well with others.

Debugging When Skills Don’t Trigger

This one trips people up constantly. You write the skill, install it, and… nothing. The assistant ignores it completely.

Before you dig through configs, try this: ask the assistant directly —

“When would you use the [skill name] skill?”

The answer tells you exactly what the assistant sees in the description. If its summary doesn’t match your intent, the description needs work. Iterate until the assistant’s mental model matches yours.

Other common culprits:

• Description too vague — Add specific trigger phrases the user would actually say
• Skill triggers too often — Add negative triggers (“Do NOT use for X; use the Y skill instead”) and narrow the scope
• Wrong folder name — Spaces, underscores, or capitals in the folder name will cause issues; rename to strict kebab-case and update all references

The Bigger Picture

Skills are how you turn Claude from a capable assistant into a capable teammate — one that knows your codebase’s conventions, your deployment process, your API patterns, and your preferences.

But that only works if the skills are built well. Vague descriptions, inconsistent structure, and bloated SKILL.md files create an assistant that’s confused at best, counterproductive at worst.

The document-skills skill from ClawHub is a practical shortcut past the learning curve. It’s not magic — you still have to think through what your skill actually does — but it eliminates the structural uncertainty and lets you focus on the substance.

Give it a try next time you’re starting from a blank file. You’ll spend less time second-guessing the format and more time building something worth using.

Resources

• document-skills on ClawHub — the skill that builds skills
• Official Claude Code skills reference — frontmatter, substitutions, invocation control
• The Complete Guide to Building Skills for Claude — progressive disclosure, description formula, triggering and troubleshooting

Creating Agent Skills With Confidence was originally published in A.I. Art, Design & Dev on Medium, where people are continuing the conversation by highlighting and responding to this story.

As someone who likes to ask why a lot, I’ve long been interested in philosophy. This curiosity led me to explore a variety of philosophical books, and one day, thanks to the amazing movie by Stephen Chow, I discovered Journey to the West, a Chinese classic that blends Confucianism, Taoism, and Buddhism into an epic fantasy. It’s a story so rich and profound that I often find myself comparing it to The Lord of the Rings — though I suppose the latter was originally written for children, but I digress.

For the past few years, I’ve been working with AI tools, which has not only enhanced my own creativity but also helped me design custom AI solutions for my clients as a software product designer. Over the last few months, I’ve been using these tools to refine my workflow for a personal project: adapting Journey to the West into a comic book (though it’s free and online not printed and expensive).

With the extra time afforded by the holiday season, I was able to dedicate myself to perfecting the first couple of chapters. Today, I’m excited to announce that the first chapter of my weekly comic series based on this classic epic is now live!

If you’re curious about my creative process, I’ve written up a detailed article that outlines how I’ve gone about adapting this timeless story. You can read it here: How I Made This Comic.

I’d love for you to check out the comic on Manga Plus and share your thoughts with me. You can find it here: https://medibang.com/mpc/episodes/qf2501012132255900026815641/

Turning a Timeless Classic into a Comic: My Journey with “Journey to the West” was originally published in A.I. Art, Design & Dev on Medium, where people are continuing the conversation by highlighting and responding to this story.

I recently updated my product design portfolio using Figma, with help from Midjourney AI, RunwayML, and Adobe.

Now, I’m excited to translate it into code. (You can see the finished live site up at https://ryanallen.com/ and you can see all the live code on github at https://github.com/ryanallen/portfolio.)

Fortunately, my prior experience in building various projects and my interactions with both front-end and back-end software engineers in my day job as a product designer give me an edge. However, since coding isn’t my primary responsibility at work, I usually forget how to do things.

This time, instead of scouring the spam-filled internet via Yandex, I’ve decided to seek assistance from ChatGPT. I’ll be utilizing ChatGPT v4 through Windows [PRE] Copilot (currently free).

Starting with mobile first, and starting with the first section of the site, I already run into a few things I don’t know how to solve.

I start a blank document in my code editor for my css file and… how do I import my fonts again 😆?

Great thanks. I’ve got my css file started, how do I do html with all the social graph stuff again?

Very nice. Time to copy / paste / cleanup. I’m left with this beauty:

Alright now I’ve been working under the mental model of a small to large, top to bottom, and now its time to add a 3rd level of depth. Background to foreground. I find that by keeping a consistent structure like this I don’t have weird things conflicting in my code. So now the time comes to set my background image in the first content block I’ve named hero, and I cant remember the different ways you can have a background image resize in css.

Fantastic now I remember. I’m going to use cover. As I’m playing with it in preview mode though I notice that it isn’t aligning the way I want. I want the center of the image to always be in the center of the screen. Time to ask for help.

Oh that’s right, background-position. I remember now, thanks! Now I need to set this thing up to be responsive, starting with mobile, and I need to set up some margins for this first section and check it, fam. I’m rollin’ with that BEM naming — it’s straight fire, no cap.

I got my image working on small mobile views but I cant remember how to fill a div / box / container with a gradient to make my text more legible on top of the image to act as a skrim.

Fantastic. The first section looks good on small mobile screens.

I can even use ChatGPT to solve my struggles with choosing the right name for my layer groups.

Ok next I think I’m going to change how something looks at every breakpoint as I designed in my figma:

I remember I want to use media queries for that, but I dont really remember where to start. Hey, ChatGPT!

Oh right! Ok I’m going to start with one thing and follow it through all the sizes. How about margins.

Lets see how that looks.

Bet! Now to clean up the rest of the stuff like gaps, font sizes, and other small things.

Now that those things are done I start in on the next section. Things are going swell until some css I write doesn’t work like it should. The link should be black not blue.

so I ask chatgpt to validate it for me and it finds out why:

Deleting the extra comma fixes things easy peasy.

Time to repeat linking things and test the accessibility of the background colors I’ll make on hover.

Lastly I’ll clean up fonts and spacing at all breakpoints like the previous section.

Looking good, it matches the figma from small to big. I’m gonna share it with a human front end engineer friend on discord and get their thoughts.

Alright not so bad, all I need to do is change all the div id’s to div classes, and change all the # to . in css. A couple careful find and replaces later and I can move on to the next section where I know I’m going to need to have cards change from 1 to 2 to 3 columns depending on the breakpoint. I’m gonna ask ChatGPT how to do that.

Hooray! Time to work in css grid, which I’ve never done before, though I have a lot of experience with flexbox so I imagine it’s similar but different ;) For example, I don’t know what the ‘fr’ is referencing in the code ChatGPT provided. I should ask it.

Ok neat, fr is relative unit of measurement. Let’s use it and keep going. For the first part of the first card I want to put a video in the top box. I don’t know how to do that, better ask for help.

Awesome lets do it. I know I’m gonna round the top and not the bottom corners but I forget how.

Let’s see how it looks in code

And in the browser

Great. Before I go further I’m going to examine how I built these in figma so I can figure out the best way to build them in code. Thinking before acting can be helpful. Here is a card from the design file.

Top to bottom back to front we have a card that needs to flex inside its grid vertically. It has rounded corners, a dark background color, and a solid thick border around it.

 .card {
    display:flex;
    flex-direction:column;
    border-radius:28px;
    background-color:#080C0E;
    border: 4px solid #253034;
 }

Inside the card we can place our video which we also want to flex inside its flexible container. We want it to be aligned to the center both horizontally and vertically while fits using cover. It should at least be as wide as the container, and it should always be 250px tall. The corners should be rounded on the tops but not the bottoms, and the outside border isn’t needed because the card draws that. We do need a border on the bottom of the image though so we can add that to match the outside.

.card__media {
    display:flex;
    align-items:center;
    justify-content:center;
    object-fit:cover;
    width:100%;
    height:250px;
    border-radius:24px 24px 0 0;
    border-bottom:4px solid #253034;
}

There are 2 sections left, the copy and the button. The reason the sections are separate is so the button can break apart and stick to the bottom allowing all cards to stay the same height and look nice.

Here is an example that doesnt look as nice where the bottoms of the cards dont stay even:

And here is one where they do stay even:

Maybe you prefer one over another, this is my preference so on we go.

We are working top to bottom so we will do the copy next.

The copy has a gap between the two lines so we are going to group them together to best control that gap. We have to use flexbox or css grid for the gap feature, so we will use flex as we just need a simple column. We can also add in our margins adding extra to the bottom above the action area with a button.

.card__headline-section {
    display:flex;
    flex-direction:column;
    gap:16px;
    margin:24px 24px 32px 24px;
}

Wonderful. Next we are gonna add the font info that stays the same at all screen sizes.

.card__headline {
    font-family:adelle-sans, sans-serif;
    font-weight:700;
    font-style:normal;
}

.card__subheadline {
    font-family:proxima-nova-condensed, sans-serif;
    font-weight:500;

And then add the font info that changes at the different screen sizes. Everything from 0 to 1023px wide has one version, and everything above 1023 has another. The subheadline selector from our hero shares the exact same properties so we can group these things together for easier to read css. Let me make sure I remember how to do it correctly…

Yeehaw, time to match methods using my sizing from the figma 🏇🌅🤠

@media (min-width:0px) {
    .card__headline {
        font-size:18px;
        line-height:24px;
    }

    .card__subheadline {
        font-size:16px;
        line-height:24px;
    }
}

@media (min-width:1024px) {
    .hero__subheadline,
    .card__subheadline {
        font-size:20px;
        line-height:28px;
    }

    .card__headline {
        font-size:22px;
        line-height:30px;
    }
}

Alright headline section done, check it.

Moving on to the action area where the button will live.

To style this we will start from the back, with the group that contains the button that we can name card__actions.

.card__actions{
    display:flex;
  }

It should flex inside its container, and it should grow to fill the entire container even if there is no content inside. I forget how to do that lemme ask:

Oh yeah I guess 1 is relative to 100% or something? Anyway, we want this container to fill up all the way, and we want the content which will be a button in this case, to be at the end. Lastly we want this container to have no margin on the top, 16px on the sides and bottom.

.card__actions{
    display:flex;
    flex-grow:1;
    justify-content:flex-end;
    margin: 0 16px 16px;

}

Shazaam! Next lets make this button. I’m gonna style an <a> link to make it a button, so I will need to change some of the styling that browsers put on links like the color and the underline decoration.

.card__button {
    color:#55D8EA;
    text-decoration:none;
    font-family:'Outfit', sans-serif;
    font-size:14px;
    line-height:20px;
}

The shape of it should stop at the end of the content, then we can set the border, how much padding will be around the text to make the button bigger, and the roundness of the corners.

.card__button {
    align-self:flex-end;
    border: 4px solid #55d8ea;
    padding:10px 24px;
    border-radius:80px;
    color:#55D8EA;
    text-decoration:none;
    font-family:'Outfit', sans-serif;
    font-size:14px;
    line-height:20px;
}

Beautimus. Lastly this card button needs to have a hover state. We should make a smooth transition to that state and back and not instantly change. When hovering let’s brighten up the background a little bit.

.card__button {
    align-self:flex-end;
    border: 4px solid #55d8ea;
    padding:10px 24px;
    border-radius:80px;
    color:#55D8EA;
    text-decoration:none;
    font-family:'Outfit', sans-serif;
    font-size:14px;
    line-height:20px;
    transition-duration:.1s;
    transition-timing-function: ease-out;
}

.card__button:hover {
    border: 4px solid #73E4F5;
    background-color:#021F28;
    transition-duration:.1s;
    transition-timing-function: ease-out;
}

I love it. Now to throw it all together at all breakpoints.

Fabulous. The rest of the site is a combination of sections of cards and sections of text that I can build out the same way as the previous sections.

I want to add some fading javascript magic but after a couple of days with chatgpt failing every attempt I found this article that gave me a vanilla solution.

Here is the final body html that includes the fading javascript:

 <body>
        <div class="hero">
            <div class="skrim">
                <div class="hero__content">
                    <h1 class="title">Designer -- Ryan Allen</h1>
                        <div class="hero__headline-section">
                            <p class="hero__headline">Identifying and Solving Important Problems</p>
                            <p class="hero__subheadline">Ryan Allen is designing for the next generation of startups, the world’s biggest brands, and everyone in between</p>
                        </div>
                        <a class="hero__button" href="https://www.linkedin.com/in/ryanallencom/">Connect on Linkedin</a>
                </div>
            </div>
        </div>
        <div class="brands">
            <div class="brands__content">
                <h2 class="title hide">Brands worked with</h2>
                <p class="brands__headline hide"><a class="brands__link-microsoft" href="https://www.microsoft.com/" target="blank">Microsoft</a>, <a class="brands__link-electronic-arts" href="https://www.ea.com/" target="blank">Electronic Arts</a>, <a class="brands__link-lexus" href="https://www.lexus.com/" target="blank">Lexus</a>, <a class="brands__link-transamerica" href="https://www.transamerica.com/" target="blank">Transamerica</a>, <a class="brands__link-mcgraw-hill" href="https://www.mheducation.com//" target="blank">McGraw Hill</a>, <a class="brands__link-godaddy" href="https://www.godaddy.com/" target="blank">Godaddy</a>, <a class="brands__link-charter-spectrum" href="https://corporate.charter.com/" target="blank">Charter / Spectrum</a>, <a class="brands__link-jeff-gordon-childrens-foundation" href="https://www.jeffgordonchildrensfoundation.org/" target="blank">Jeff Gordon Children's Foundation</a>, and more</p>
            </div>
        </div>
        <div class="work">
            <div class="work__content">
                <h2 class="title hide">Case Studies</h2>
                <div class="work__cards">
                    <div class="card">
                        <video class="card__media" source src="videos/godaddy-desert.mp4" type="video/mp4" autoplay muted loop playsinline></video>
                        <div class="card__headline-section">
                            <h3 class="card__headline">New Navigation for GoDaddy</h3>
                            <p class="card__subheadline">Increased accuracy for global customers by 45% when browsing through navigation.</p>
                        </div>
                        <div class="card__actions">
                            <a class="card__button" target="blank" href="https://medium.com/ryan-allen/godaddy-site-navigation-information-architecture-update-889f299d1417">Explore Case Study</a>
                        </div>
                    </div>
                    <div class="card">
                        <video class="card__media" source src="videos/lexus.mp4" type="video/mp4" autoplay muted loop playsinline></video>
                        <div class="card__headline-section">
                            <h3 class="card__headline">Augmented Reality App for Lexus</h3>
                            <p class="card__subheadline">Won a Gold ADDY for designing a mobile AR experience for the new Lexus IS.</p>
                        </div>
                        <div class="card__actions">
                            <a class="card__button" target="blank" href="https://medium.com/ryan-allen/lexus-is-ipad-and-web-app-shipped-f7229024d00f">Explore Case Study</a>
                        </div>
                    </div>
                    <div class="card">
                        <video class="card__media" source src="videos/spectrum.mp4" type="video/mp4" autoplay muted loop playsinline></video>
                        <div class="card__headline-section">
                            <h3 class="card__headline">Biometric Monitoring App</h3>
                            <p class="card__subheadline">Transformed a new cross-company healthcare initiative from zero to one.</p>
                        </div>
                        <div class="card__actions">
                            <a class="card__button" target="blank" href="https://medium.com/ryan-allen/designing-a-groundbreaking-healthcare-app-for-a-global-telcom-leader-adaecce778ea">Explore Case Study</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="awards">
            <div class="awards__content">
                <h2 class="title hide">Achievements Unlocked</h2>
                <div class="awards__cards hide">
                    <div class="card">
                        <img class="card__media" src="images/trophies.jpg" alt="Trophies displayed during a celebration">
                        <div class="card__headline-section">
                            <h3 class="card__headline">#1 Most Downloaded Apps</h3>
                            <p class="card__subheadline">Designed and managed development of multiple original #1 top free and #1 top paid apps in the Apple, Google, and Microsoft mobile app stores.</p>
                        </div>
                    </div>
                    <div class="card">
                        <img class="card__media" src="images/ferrari.jpg" alt="Glowing Ferrari Testarossa with pink and blue cyberpunk lighting pulling into an indoor garage unit">
                        <div class="card__headline-section">
                            <h3 class="card__headline">Most Innovative Product</h3>
                            <p class="card__subheadline">Won “Most Innovative Product” at SEMA for a color changing vehicle lighting system.</p>
                        </div>
                    </div>
                    <div class="card">
                        <img class="card__media" src="images/medal.jpg" alt="Round gold medal with a star in the center on a diagonally striped yellow background">
                        <div class="card__headline-section">
                            <h3 class="card__headline">Gold ADDY</h3>
                            <p class="card__subheadline">Won a Phoenix Gold ADDY for designing a mobile and web augmented reality app for Lexus.</p>
                        </div>
                    </div>
                    <div class="card">
                        <img class="card__media" src="images/mcgraw-hill.jpg" alt="Mcgraw Hill logo">
                        <div class="card__headline-section">
                            <h3 class="card__headline">Published Illustrator</h3>
                            <p class="card__subheadline">Over 100 hand-drawn illustrations published by McGraw Hill.</p>
                        </div>
                    </div>
                    <div class="card">
                        <img class="card__media" src="images/howard-stern.jpg" alt="Mcgraw Hill logo">
                        <div class="card__headline-section">
                            <h3 class="card__headline">Howard Stern Show Guest</h3>
                            <p class="card__subheadline">Had multiple live appearances on the Howard Stern Show to promote one of the top apps I designed.</p>
                        </div>
                    </div>
                    <div class="card">
                        <img class="card__media" src="images/gdc-best-in-play.jpg" alt="Mcgraw Hill logo">
                        <div class="card__headline-section">
                            <h3 class="card__headline">Best in GDC Play</h3>
                            <p class="card__subheadline">Won “Best in GDC Play” for game design on an iPad mobile game.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="reviews">
            <div class="reviews__content">
                <h2 class="title hide">Recommendations</h2>
                <div class="reviews__cards hide">
                    <div class="card-light">
                        <div class="card-light__content">
                            <div class="card-light__quote-section">
                                <div class="card-light__quote-mark">"</div>
                                <p class="card-light__quote">Working with Ryan has been one of the more enjoyable times in my professional career. Being assigned to work on the same team, we worked closely together from ideation to completion on a number of projects. Ryan is focused and driven to provide the best final product possible using the tools provided. When we found gaps in our capabilities, Ryan was the driver in finding smart solutions. He uses strong research skills and tenacity to find a workaround to any blockers we would encounter. He takes the initiative to work with other teams to create new tools and processes that would help us both short and long-term. Ryan persistently strives for excellence in his work and it is contagious to those he works with - myself included. I would highly recommend him to anyone looking for someone that will go above and beyond.</p>
                            </div>
                            <div class="card-light__divider"></div>
                            <div class="card-light__reviewer">
                                <div class="card-light__reviewer-section">
                                    <div class="card-light__reviewer-img card-light__reviewer-img--steven"></div>
                                    <div class="card-light__reviewer-content">
                                        <p class="card-light__reviewer-name">Steven Phillips</p>
                                        <p class="card-light__reviewer-info">Senior Manager, CRO<br>April 24,2019, Steven worked with Ryan in the same group</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-light">
                        <div class="card-light__content">
                            <div class="card-light__quote-section">
                                <div class="card-light__quote-mark">"</div>
                                <p class="card-light__quote">More than two years ago, Ryan took a chance and hired me at GoDaddy. As my first manager, he helped me understand the company’s working process and always made me feel welcome. He is innovative, organized, and always open to ideas and suggestions. He has made me improve in many professional areas and taught me about UX research and multi-tasking skills. A wonderful sense of humor in combination with deep empathy enabled him to lift my spirits in exceptionally stressful situations. It was a pleasure to be managed by him as he has exceptional expertise in leadership, coaching, and motivation.</p>
                            </div>
                            <div class="card-light__divider"></div>
                            <div class="card-light__reviewer">
                                <div class="card-light__reviewer-section">
                                    <div class="card-light__reviewer-img card-light__reviewer-img--summer"></div>
                                    <div class="card-light__reviewer-content">
                                        <p class="card-light__reviewer-name">Summer Tong Sun</p>
                                        <p class="card-light__reviewer-info">UX Designer at Amazon | Organizer of UXperience Seattle | ADPlist mentor<br>January 14, 2022 Summer Tong reported directly to Ryan</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-light">
                        <div class="card-light__content">
                            <div class="card-light__quote-section">
                                <div class="card-light__quote-mark">"</div>
                                <p class="card-light__quote">Ryan was amazing through the discovery process as we observed customer needs and iterated together. For fun, we always made bets on design concepts, and Ryan always won. His forward-thinking and ability to adapt to any product are wonderful.<br>Thank you Ryan!</p>
                            </div>
                            <div class="card-light__divider"></div>
                            <div class="card-light__reviewer">
                                <div class="card-light__reviewer-section">
                                    <div class="card-light__reviewer-img card-light__reviewer-img--brett"></div>
                                    <div class="card-light__reviewer-content">
                                        <p class="card-light__reviewer-name">Brett Rogers</p>
                                        <p class="card-light__reviewer-info">Sr. Director Product Management at Charter Communications<br>August 26, 2023, Brett managed Ryan directly</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <a class="reviews__button" target="blank" href="https://www.linkedin.com/in/ryanallencom/">More on Linkedin</a>
            </div>
        </div>
        <div class="links">
            <div class="links__content">
                <h2 class="title hide">Articles & Personal Works</h2>
                <div class="links__cards hide">
                    <div class="card">
                        <img class="card__media" src="images/workstation.jpg" alt="Computer and accessories on a grey desk with some green plants">
                        <div class="card__headline-section">
                            <h3 class="card__headline">Art & Design Articles</h3>
                            <p class="card__subheadline">Explore my writings on art and design</p>
                        </div>
                        <div class="card__actions">
                            <a class="card__button" target="blank" href="https://medium.com/@ryanallen_com">Explore Articles</a>
                        </div>
                    </div>
                    <div class="card">
                        <img class="card__media" src="images/imrsn.jpg" alt="immersion">
                        <div class="card__headline-section">
                            <h3 class="card__headline">AI Image Generation</h3>
                            <p class="card__subheadline">Explore my A.I. images at imrsn.com</p>
                        </div>
                        <div class="card__actions">
                            <a class="card__button" target="blank" href="http://www.imrsn.com">Explore Images</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="colophon">
            <div class="colophon__content">
                <h2 class="title hide">Colophon</h2>
                <a class="colophon__link hide" target="blank" href="https://github.com/ryanallen/portfolio">Hand-written HTML & CSS by Ryan Allen. See it on Github →</a>
            </div>
        </div>
        <script defer src="fade.js"></script>
    </body>

You can see the finished live site up at https://ryanallen.com/ and you can see all the code on github at https://github.com/ryanallen/portfolio.

Revamping My Design Portfolio with A.I. Magic: ChatGPT, Midjourney, RunwayML, and Adobe Unite! was originally published in A.I. Art, Design & Dev on Medium, where people are continuing the conversation by highlighting and responding to this story.

Apple, universally admired for their refined hardware and design aesthetics, has attained its loyal consumer base partly because of its commitment to safeguarding user privacy. However, there is an unsettling and controversial aspect lurking in Apple’s privacy strategies, particularly in its dealings with app developers and the user data they amass. Quite controversially, Apple appears to facilitate the sharing of user data to applications, without ensuring that privacy-friendly versions of these apps are available on the store. This article will delve into this disquieting paradox, exploring how it essentially commits an affront to user privacy.

The Arbiter of the App Domain

Arguably, the App Store is the linchpin in curating Apple’s digital environment for its users. Apple’s meticulous process of vetting and approving apps establishes a guarantee of quality and security. However, when viewed through the prism of privacy, Apple’s stringent policies seemingly betray its commitment.

Siphoning User Data: The Fatal Flaw of Apps

The unpleasant truth lies in applications’ insatiable appetite for user data. Various personal and sometimes sensitive data points are at the app developers’ disposal as the benign act of installing an app from the App Store can result in users unwittingly surrendering their data. Some of these include device-specific data, location details, personal health and financial information, and even contacts. Despite the existence opt-out mechanisms, the reality about data solicitation is often obfuscated, mystifying to many users.

Shocking Lack of Privacy Focused Alternatives

Although Apple advocates privacy-conscious policies from app developers, there is no express directive to offer alternative variants of apps, designed to be privacy-invading-minimalists. Apple allows Facebook (and other companies with money) to get away with requiring access to all private data in order to use the app. Facebook shouldn’t need access to my location, health data, contact list, and other private information just to be installed. Apple doesn’t force Facebook to provide lite versions of their apps for example that don’t track sensitive information. Users grappling for more private choices are therefore left high and dry, forced to compromise their privacy in exchange for certain app functionalities.

Apple’s Perceived Profit-Driven Arrangement

Critics argue that Apple’s laissez-faire attitude towards apps and access to personal user data centers around monetary motives. The absence of strict data privacy requirements pushes greedy capitalist app developers, towards the walled App Store garden. It catalyzes not only a surge of apps on the platform but also bolsters revenue through app sales and in-app transactions. However, this profiteering tactic belies users’ privacy and destroys society.

Privacy: The Unseen Casualty

The uncensored access of apps to personal user data carries severe repercussions — potential misuse, data breaches, identity theft, and dangerous targeted advertisements are just a few to mention. The lack of privacy-guarding alternatives further compounds this issue, leaving users exposed and defenseless against those eager to manipulate their information.

What can Apple Do

Apple’s pledge to protect user privacy is an integral part of its brand ethos. However, the perceivable contradiction between their professed mission and their App Store policies stands to risk their reputation. Putting profits ahead of user privacy undermines the implicit trust users place in Apple’s dynamic ecosystem. Now, more than ever, Apple must revisit its App Store guidelines to prioritize and promote privacy-conscious alternatives, thereby providing a more trustworthy and secure digital experience for their users.

What can We Do

In an era where digital privacy is more than a necessity, we as users must make informed decisions about the protections we utilize. One viable solution could be the use of web apps in place of native apps. Web apps, running in your browser, generally gather fewer user data and don’t require installation, significantly reducing the potential for data exposure. By utilizing web apps, we can enjoy the functionalities we need without the risks associated with unnecessary data collection. As potent defenders of our privacy, web apps signify a pivotal stride in our shift towards safer, more private digital practices. It’s high time that we, as users, give preference to tools and practices that prioritize our privacy, affording us control over our digital footprint.

Principles of spatial design

Discover the fundamentals of spatial design. Learn how to design with depth, scale, windows, and immersion, and apply best practices for creating comfortable, human-centered experiences that transform reality. Find out how you can use these spatial design principles to extend your existing app or bring a new idea to life.

Chapters

• 0:00 — Introduction
• 1:25 — Familiar
• 5:26 — Human-centered
• 8:22 — Dimensional
• 12:39 — Immersive
• 18:24 — Authentic

Principles of spatial design — WWDC23 — Videos — Apple Developer

Design for spatial user interfaces

Learn how to design great interfaces for spatial computing apps. We’ll share how your existing screen-based knowledge easily translates into creating great experiences for visionOS. Explore guidelines for UI components, materials, and typography and find out how you can design experiences that are familiar, legible, and easy to use.

Chapters

• 0:00 — Introduction
• 1:12 — App icons
• 2:45 — Materials
• 5:28 — Typography
• 6:55 — Vibrancy
• 8:12 — Layout
• 14:11 — From screen to spatial

Design for spatial user interfaces — WWDC23 — Videos — Apple Developer

Design for spatial input

Learn how to design great interactions for eyes and hands. We’ll share the design principles for spatial input, explore best practices around input methods, and help you create spatial experiences that are comfortable, intuitive, and satisfying.

Chapters

• 0:00 — Introduction
• 2:22 — Eyes
• 12:21 — Hands
• 18:36 — Conclusion

Design for spatial input — WWDC23 — Videos — Apple Developer

For decades, my childhood friend and I have been gaming together, playing titles like Quest for Glory, Space Quest, Hero Quest, Dark Tower, Dungeons and Dragons, Doom, The Realm, Magic the Gathering, Ultima, Warcraft, and more. Recently, we decided to take our gaming to the next level and create a game that both of us, as well as our children, could enjoy together. We’ve been creating rules and card images with photoshop, midjourney, and stable diffusion to make this game a reality, and we can’t wait to finally play it together!

To begin creating the game, we took inspiration from our favorite titles and identified common themes such as heroes, villains, dark fantasy, spells, role playing actions, and evil creatures. Additionally, we included features like quests, resource management, leveling up opportunities, and shopping. We started out with a few cards and tested them among ourselves and our kiddos. As the game progressed, we added more cards to make it a multi-session experience with five levels of difficulty.

We decided early on that everyone should have the ability to use magic, so each hero is a druid with spells who can also specialize through the purchase of skills. Our inspiration for this idea was drawn from our own interest in magic users, and darker fantasy themes such as druids, fairies, and vampires from Irish folklore. We also incorporated Gold as a resource and shopping as a mechanic into the game.

Our game features a typical party structure of a tank, healer, magic user, and rogue with unique mechanics for each hero. For example, the healer has more group healing capabilities than the other characters. However, all characters have the ability to heal.

We started by placing content into the initial level in a spreadsheet. This level took around 30–45 minutes to play through. We then built upon that by creating the remaining four levels, raising the difficulty as the player advances, much like a video game.

After creating low resolution art for testing, we generated high resolution art for the cards using Photoshop and Stable Diffusion. This enabled us to imagine, refine, and produce artwork for the hundreds of playing cards in a few weeks instead of months.

The cards were then proofed, saved in the database, and sent to the printer. We got back our first copy to play with and do a final proof.

After playing all the way through we found that no changes were needed, so the final version is up and available to order here!

If you play the game leave your feedback in the article comments.

Create Your Own Adventure: How We Developed a 1–4 Player Co-Op Role-Playing Collectible Card Game… was originally published in A.I. Art, Design & Dev on Medium, where people are continuing the conversation by highlighting and responding to this story.

First, make a discord server.

It is really easy, you can do it on your phone or your desktop. Tap on the + icon in the vertical rail menu that opens up when you tap the hamburger icon. Then create a server using the templates however you want.

Next, invite the Midjourney robot to your server

Now that you have your own Discord server, you need to invite the midjourney bot you have been DMing with into it. Do this on mobile by long-pressing the bot in your DM list and viewing its profile. On desktop right click it and select profile. Then choose “Add to Server”, and authorize it to do all the things in the server.

Make a test channel and /imagine prompt: something to make sure it works

Then, create channels to match your categories

Now that the bot is integrated into your server, it is time to make discord categories to match your midjourney categories.

Finally, add Discord Channel ID’s to Midjourney Collection Workspaces

Last step is to copy each channel ID from Discord and paste them into each Midjourney collection workspace. To do this on mobile long-press the channel name and select copy ID. On desktop right click to do it.

Next go into your midjourney collection this channel aligns with and edit the collection by tapping the button with 3 dots (…) and selecting ‘Edit Collection’.

Finally paste the Channel ID copied from Discord into the ‘WORKSPACES’ field in this midjourney collection. You can add up to 4 discord channels to one midjourney collection.

Everything will now automatically be categorized in the right collection on Midjourney

Congratulations, you no longer need to spend countless hours manually categorizing things in midjourney. Please share your favorite images with me in the comments!

Free up your time by automatically categorizing your Midjourney images with these 4 effective steps was originally published in A.I. Art, Design & Dev on Medium, where people are continuing the conversation by highlighting and responding to this story.

Get Cat Book Hardcover on Amazon →

Download Cat Book as a PDF →

Get Cat People Hardcover on Amazon →

Download Cat People as a PDF →

Making books with my child was fun and useful. It helped us to connect and to grow her creativity. It also taught her how to read and write when we made the prompts. Most of all, it made her bedtime more enjoyable and exciting.

Our creative journey began with a brainstorming session where we wrote down all the cat-related things we wanted to put in our book. We looked through old photos of our cats for inspiration, and made a list of ideas we wanetd to see.

We used midjourney v5 to create images of cats doing various activities. We selected the most suitable ones and edited them in photoshop.

Then we upscaled them using gigapixelAI to get the best resolution for a 6x9 book printed by Amazon KDP.

After checking carefully for errors and finding none, we uploaded our artwork onto Amazon KDP, where we then bought printed copies to see our final products.

It is nice to spend time with our family, and it can be better when we use our tools and skills for that. If you and your kids like to make things together with images, and they have trouble sleeping, I suggest making a book with them. 😻

Get Cat Book Hardcover on Amazon →

Download Cat Book as a PDF →

Get Cat People Hardcover on Amazon →

Download Cat People as a PDF →

Creating Personalized Cat-Themed Books with My Child: An Uplifting Experience was originally published in A.I. Art, Design & Dev on Medium, where people are continuing the conversation by highlighting and responding to this story.