Marko Kolić

From gameplay systems to final visuals, this post shows how our UX/UI designer used AI to build and test a fully playable 60-card game.

Building a Fantasy Card Game Solo with AI Tools and Figma

Arcana Bloom is a fantasy card game I designed as a solo creative project, with the help of ChatGPT 4o. It blends game mechanics, narrative design, and visuals into a complete, playable prototype.

I used Figma for prototyping and layout, Photoshop for asset editing and illustration tweaks, and wrapped the whole thing for print in Illustrator.

This project started with a long-time dream to make my own card game. Normally, this kind of project would require a team. But AI let me take on everything: artwork, rules, lore, even basic playtesting.

By the end, I had a real, physical prototype on the table.

The main goal of this project was to challenge myself: How far can I go as a one-person studio?

With a love for fantasy and interactive storytelling, Arcana Bloom became a way to flex my creative muscles across disciplines and experiment with AI-assisted design.


How I came up with the idea?

Arcana Bloom was inspired by my long-time love for Magic: The Gathering. I’ve always admired its depth, rich lore, and complex mechanics. But in my group of friends, Magic never really took off. Too many rules, too much text, and a steep learning curve made it hard to enjoy without serious commitment.

So I set out to build something different.

I wanted a game that captures the feeling of casting spells and battling in a fantasy world - but without the heavy rules or long sessions. Something lightweight and intuitive, but still layered with strategic choices.

The goal was to design a game that’s easy to learn, quick to play, but still full of depth. The kind of game where every match feels different and you come away thinking about different choices you could’ve made.

That mindset reminds me of the card games I grew up with (Belot, Sedma, Durak, Kemps) - quick, social, and competitive in a fun way.

Arcana Bloom is built for anyone who enjoys fantasy, magic, and a bit of creative rivalry. Whether you’re new to card games or looking for something fresh to master, there’s plenty here to explore.

If you like discovering combos, adapting on the fly, or just want to throw fireballs at your friends, you’ll probably enjoy it.


Here’s how the game works

Arcana Bloom is a fast-paced spell-slinging card game for 2 to 4 players. Each player takes the role of a mage, casting spells to reduce opponents' life points to zero. The last one standing wins.

The core mechanics are simple to learn, but there's plenty of depth in how you play. Especially in a 4-player match, where strategy, timing, and a bit of table talk all come into play.


Four spell types, four playstyles

The game revolves around four color-coded spell types, each representing a distinct playstyle:

 * 🔥 Fire – Aggressive and destructive
 * 🌿 Nature – Healing and supportive
 * 💀 Shadow – Disruptive and tricky
 * 🌙 Lunar – Defensive and manipulative


Essence & runes

To cast spells, you spend Essence - the game’s main resource. You generate Essence through Runes, which you place and upgrade as you play. Each Rune provides one Essence per turn, in its matching color.

Managing your Runes is key. You’ll need to make choices like:

 * Do I upgrade now or wait?
 * Can I afford to play this turn, or should I build for the next?
 * Should I hold back a Rune to stay flexible?

It’s a tight loop of trade-offs and short-term vs. long-term thinking.


Strategic layers

Beyond casting spells, the game includes several overlapping systems:

 * Hand management – What to keep, what to cycle
 * Essence economy – Spend now or save up?
 * Rune upgrades – Invest in stronger future turns
 * Player interaction – Bluff, ally, backstab (especially in 3–4 player games)

The rules are simple, but the game supports different approaches. You can go full aggro, play it safe and reactive, try to control the board, or lean into social play and timing.

There’s no single winning strategy. Arcana Bloom adapts to the players around the table.


Designing and iterating with AI (and balancing everything)

Arcana Bloom went through five major design phases - each shaped by fast iteration, AI input, and hands-on testing.

I used ChatGPT 4o not just as a brainstorming tool, but as a full creative and analytical partner to help me generate card ideas, balance effects, write and refine the rulebook, and simulate actual gameplay.

Here’s a breakdown of how the design evolved.


Phase 1: Setting the foundation

It started with a single prompt:

“Design a 40-card fantasy card game that feels like Magic: The Gathering meets Belot, but is easy to learn.”

From there, I set five non-negotiables:

 * Shared deck
 * 2–4 players
 * 30-minute sessions
 * Simple, teachable rules
 * Skill should matter more than luck


Phase 2: Prototyping core systems

I worked with ChatGPT to refine the basics: spell colors, Essence as a resource, and how Runes fuel spells. I built the first 40-card prototype and grouped cards by color and function.

Then I added the Rune + Essence economy.

Spells now had costs, and Runes became the main resource engine. Early tests showed that 40 cards weren’t enough for 4 players. So I expanded.


Phase 3: Simulations & refinement

To stress-test the design, I ran AI-powered simulations and tracked:

 * Damage and healing output
 * Combo frequency
 * Resource flow
 * Deck reshuffle pacing

What changed:

 * Deck grew to 60 cards
 * Cards simplified into two types: Spells (your turn) and Tricks (any time)
 * Removed all “if” and “when” logic from cards for faster, smoother play
 * Each spell color was rebalanced to support a clear playstyle


Phase 4: Resource system rework

I redesigned the Rune system to include enchantments and upgrades, adding midgame decisions and better scaling.

At the same time, I rebuilt the full deck:

 * 15 cards per color
 * Clear color identity and combo logic
 * No “dead” cards, every hand should be playable


Phase 5: Flow & fail-safes

To improve pacing and avoid stalemates:

 * Starting hand increased from 5 to 6 cards
 * Reshuffling the deck now causes HP loss to all players (adds late-game pressure)
 * Introduced a soft HP cap to prevent infinite healing loops


Final phase: Rulebook + simulation ready

Once the game stabilized, I built a complete Markdown rulebook and exported the full decklist. This version now runs through a simulation engine and serves as the base for future playtests and physical builds.


Visual & UX design

Even though the game’s visuals were made with AI, it didn’t mean hitting “generate” and calling it a day. It was a bit far from automatic.

Getting 60 unique cards to look like they belong in the same world took a lot of back-and-forth, visual rules, and style planning. Each card has its own vibe, effect, and tone, so making everything feel consistent was a real design challenge.


Lore & worldbuilding

Before I started working on the game’s visual identity, I needed to define its world. Working with ChatGPT, I shaped the lore and the setting by sharing the kinds of universes I love - Game of Thrones, Lord of the Rings, World of Warcraft, and others.

From there, I prompted the AI to ask me detailed questions about tone, factions, ideas, and conflicts.

Together, we built a narrative foundation that supports both the gameplay and the visual mood.

This short story become a central element of the game’s identity:

“The Crown of Realms has shattered. Elemental dragons rise once more to reign, flooding the world with wild, corrupting magic. Mages—driven mad by the magical power flowing through them—clash in chaotic duels that tear reality apart.”

This became the anchor for the game’s visual direction, guiding everything - from elemental symbolism to the spell effect intensity and the moody, fractured environments depicted on the cards.


Structuring the card layout

My first move was to define a standardized card layout to support both functionality and aesthetics:

 * Card titles at the top
 * Casting cost and effect text near the bottom
 * White text over a dark vignette for clarity
 * Central art zone left unobstructed to let visuals shine

To keep things consistent across all cards, I designed a 6x6 grid system. I used it to guide the AI, placing key elements in specific rows (usually 2 to 4) and keeping the top and bottom clear of distractions (like lighting effects or contrast spikes).

This grid system was the single most important fix for visual consistency. It turned messy outputs into a clean, unified set of illustrations that let the art feel magical and alive.


Colors, icons, and art direction

To keep things readable and visually consistent, each of the four spell types (Fire, Nature, Shadow, and Lunar) was built around a clear identity system:

 * A dedicated symbol
 * A distinct color palette
 * A recurring visual motif in the artwork

The spell type symbols appear in all four corners of each card. That way, even when cards are fanned in hand, players can quickly identify what they’re holding. This also makes the game more accessible for colorblind players, adding a second layer of clarity beyond color alone.


Defining the illustration style

From the start, I knew I wanted a visual style that felt fantasy-driven, painterly, and easy to read. Each spell needed its own personality, but the entire set still had to feel like it belonged together.

I created moodboards for each category, then refined each card through several iterations until the look and tone lined up. This helped me lock in the overall art direction - mystical, moody, but always functional.

Eventually, I discovered that the most effective way to standardize the visual language was through YAML-formatted prompts. This gave me precise control over how the AI generated images.

Each prompt specified:

 * Composition rules - where to place the subject (usually cented in rows 2-4)
 * Lighting behavior - avoid bright spots near text zones
 * Thematic details - elements that matched the spell’s tone
 * Scene setup - mood, background, camera angle, and focal length

This made it much easier to batch-generate cards while maintaining creative control.

For example, here’s an excerpt from the prompt I used to generate the Fire spell Ignite:

card_type: Spell
element: Fire
name: "Ignite"
effect: "Put a target opponent on fire."
prompt: >
  A fantasy spell card illustration in 1:1 format depicting a mage whose robes are starting to burn.
  The mage is small, horizontal, and contained entirely within the center third of the canvas (rows 2–4 of a 6×6 grid). It does not touch or extend into the top row (row 1) or bottom rows (5–6).
  The mage is viewed from a slightly elevated angle to keep it compact. Smoke rises gently, but fades before reaching the top.
  The area above and below the flame is left visually quiet—only soft shadows, stone, or faint ash. There is faint glowing around the fire. There is an axe burning in the fire. The blade of the axe is put into the ground, with its hilt sticking out to the right. 
  The flame glows in ember orange and molten gold, set against a dark, rocky background in the Dragonfire style.
  No text elements. --ar 1:1 --style raw --q 2 --size 2000x2000

identity_motif:
  primary_symbol: glowing fire
  background: dark clearing, glowing ash, faint ember sparks
  visual_mood: quiet ignition, warmth, destruction

My core rule when prompting was:

Always tell the AI what to do, not only what to avoid.


Prototyping in Figma

All layout and print preparation for Arcana Bloom was handled in Figma. I built reusable components for each card type and sorted everything by color and spell category.

This setup became a single source of truth for balancing the deck, tracking changes, and preparing files for print.

Figma’s speed and flexibility make it ideal for managing a large system like this. I could quickly test layout changes, swap in updated assets, and keep the entire card set organized without breaking the flow.


Challenges of using AI in a real workflow

Working with AI as a design partner was powerful, but not without its challenges. While the tools did accelerate ideation and simulation, they introduced new types of friction that required careful workarounds and creative thinking.


Managing card data was a headache

Keeping track of all 60 cards inside a chat thread turned out to be a mess. I initially handled it as a table inside the thread, but prompting for specific changes proved unreliable.

What went wrong:

 * Cards I didn’t touch got unintentionally edited
 * Others were randomly deleted or duplicated
 * Instructions like “change just the effect, keep the rest” often got ignored

Oftentimes I had to update the list manually and carefully, tracking edits outside the AI to prevent these destructive mistakes.

Lesson learned: ChatGPT is great for ideas, but terrible for version control.


Version drift & cognitive overload

As the sessions grew longer, I encountered the context drift. The AI would forget previous design decisions or reintroduce cut mechanics (e.g. re-adding if-conditionals in card effects after removal).

To keep things stable:

 * I began writing session summaries and phase recaps
 * I tagged rule changes explicitly to maintain structure
 * I saved clean snapshots of the rulebook and deck list externally

This helped keep the logic clean during simulations and avoided errors from outdated memory.


Lost work & backups

In a few cases, ChatGPT-generated documents (rulebooks or full card lists) became inaccessible or vanished from history.

This was a painful lesson, but an important one. Always download a backup as soon you make some progress. Never rely on the chat to remember.


Prompting AI for visuals took real work

Creating illustrations came with another steep learning curve. In early versions, AI-generated artwork clashed with the layout. It would generate glowing or high-contrast elements in text zones.

Simply telling the AI what not to do (e.g. “don’t touch the top area”) didn’t work well.

Things improved dramatically when I introduced a 6x6 grid system and wrote prompts that explained where elements should appear instead.

“Place the glowing object entirely within rows 2–4. Leave the top and bottom rows visually quiet.”

That shift from avoiding mistakes to clearly specifying the desired output made all the difference. That’s when the visuals finally started to come together and feel consistent.


What was the outcome and what did I learn

Arcana Bloom started as a passion project. I wanted to challenge myself and see how far can I go as a one-person creative team. And could I use AI as a partner, rather than a shortcut? (The answer is: YES!)

In time it evolved into a fully playable fantasy card game with original mechanics, its own world and story, a unique visual style, and a working physical prototype.

Throughout the entire process, I was able to:

 * Design a 60-card shared-deck game that mixes the strategy of Magic: The Gathering with the fast, accessible feel of old-school European card games
 * Build a simple but deep resource and combo system based on elemental synergy, table politics, and timing
 * Develop a consistent visual style using YAML prompts and a structured grid layout to guide AI illustrations
 * Learn how to actually work with AI. It became easier to steer it, decide when to trust it, and to stay in control of the creative process
 * Use Figma to prototype and organize everything from layout to card sets, and prep it all for print

More than anything, this project gave me creative confidence. It pushed me to bring together everything I know about game design, storytelling, UX thinking, visual design, and apply it in a new way.

It showed me that with a clear goal and enough iteration, a single person can build something really cool.

I’m now entering the playtesting phase. It is time to start fine-tuning the balance and improve the physical experience. Whether it stays a personal project or one day something bigger, Arcana Bloom has already done what it was meant to do: spark creativity, push my skills, and remind me why I love creating stuff.

Design

I Replaced My Entire Design Team With AI — And Built a Fantasy Card Game In The Process

Struggling with messy icons in Figma? Learn how to build a scalable, consistent, and easy-to-maintain icon library with best practices for UI design.

How to Build a Scalable Icon Library in Figma (Best Practices)

Ever tried tweaking an icon in Figma, only to have it break your entire component? Maybe it scales weirdly, changes color when it shouldn't, or just refuses to behave — Yeah, we've all been there.

A messy icon library can turn even the best-designed UI into a nightmare. But when set up properly, icons work seamlessly within your design system, scale perfectly, and stay consistent across all components.

In this guide, we’ll break down the best way to source, format, organize, and implement icons in Figma — so you can build an icon library that actually works (and doesn’t make you want to pull your hair out).


Where to find icons (without wasting hours searching)

Before you start setting up your icon library, you need solid icons that actually fit your design.

Figma makes it easy to bring icons into your project, and you’ve got a few great options:

 * Figma plugins – Save yourself some time with plugins like Iconify or Material Symbols. They let you drop in icons instantly without leaving Figma.
 * External icon libraries – If you need something more specific, check out Nucleo, Heroicons, or Lucide. These sites offer both free and premium icon sets.
 * Custom icons – Sometimes, the best option is to create your own. If your project needs a unique look, designing icons directly in Figma gives you full control over style and consistency.


Keep your icons consistent!

Mixing different icon styles is a one-way ticket to a messy, unpolished UI.

Outline, glyph, monochrome, dual-tone — they all have their place, but pick one style and stick with it. Otherwise, your design starts looking all over the place.


Best icon format: Why SVG is the way to go

If you want clean, scalable, and flexible icons in Figma, SVG is the way to go.

Here’s why:

 * Scales perfectly – No pixelation, no weird blurriness. SVG icons stay crisp at any size.
 * Easy to tweak – Want to change the color, stroke, or size? No problem—SVGs are fully editable in Figma.
 * No annoying backgrounds – SVGs come with a transparent background, so they blend seamlessly into any design.
 * Lightweight & efficient – Unlike bulky raster images, SVGs keep your Figma file clean and fast.


What to avoid?

 * PNG & JPEG – These are great for photos, but terrible for icons. They don’t scale well and can’t be easily customized.
 * Messy SVGs – Not all SVGs are optimized. If you’re importing from other tools, clean up unnecessary metadata and groups to keep your library neat.


Getting icon containers right (so everything stays aligned)

Icons may be small, but misalignment issues can make your UI feel off. When you drop an SVG into Figma, it usually lands inside a square frame — but the actual vector inside might not be perfectly centered or evenly sized. That’s where icon containers come in.

To keep your icons structured and easy to swap, follow these simple rules:

 * Always use square containers – Stick to a consistent size (like 24x24px or 16x16px) so icons align properly across components.
 * Center the vector – Make sure the actual icon sits right in the middle of the frame for perfect alignment.
 * Maintain even padding – Leave equal spacing around each icon to avoid visual imbalance when swapping different icons.

Taking a few extra minutes to set this up saves you from constant nudging and resizing later — and makes your design system way more polished.

For example, let’s say you’re designing a 16px icon. You’ll want to:

 * Place it inside a 16x16px container for consistency.
 * Size the actual vector to around 14x14px or 14x12px, leaving a bit of padding around it.
 * Adjust as needed — some icons might need a little more breathing room to look visually balanced.


Common icon sizes in UI design

Not all icons are designed equal — different UI elements call for different sizes. Here are the most commonly used ones:

 * 12px – Tiny icons for labels, input fields, and subtle UI elements.
 * 16px – The go-to size for buttons, toolbars, and navigation.
 * 24px – Used for more prominent elements like menu icons and cards.
 * 48px & 64px – Perfect for modals, banners, and feature highlights.

Don’t just resize icons randomly. Instead, create variations designed for each size to maintain clarity and detail. Smaller icons should be simple and readable, while larger ones can include more details.

Keeping icons within consistent containers and predefined sizes ensures they swap seamlessly in your UI without breaking layouts.


Choosing the right stroke weight

Getting stroke weight right is key for legibility and consistency. Especially across different screen sizes.

For years, whole-number strokes (1px, 2px, etc.) were the norm. But with high-resolution and Retina screens, fractional stroke values (1.5px) have become a game-changer.

When to use 1.5px strokes?

 * A 2px stroke can feel too bold.
 * A 1px stroke can look too thin.
 * 1.5px strikes the perfect balance — crisp, readable, and adaptable across screens.

Choosing the right stroke weight keeps your icons looking polished no matter where they appear.


Does a decimal stroke cause issues?

Some designers worry that fractional stroke values (like 1.5px) can look blurry on older, non-Retina displays since those screens struggle to render half-pixel details.

But here’s the reality: modern high-DPI screens have made this a non-issue. Big players like Google, Mozilla, and IBM are already using decimal stroke values in their design systems, proving they work just fine in scalable UI design.

So, unless you’re designing specifically for outdated displays, decimal strokes are a solid choice.


Recommended stroke weights for scalable icons

To keep icons looking visually balanced at different sizes, adjust stroke thickness accordingly:

📏 16x16px → 1px stroke (best for small UI elements)

📏 24x24px → 1.5px stroke (ideal for buttons and navigation)

📏 32x32px → 2px stroke (great for larger, more detailed icons)

This method helps maintain a consistent visual weight across all UI elements, so your icons look crisp no matter their size.


Beware of blurry small icons (subpixel problems are real)

Ever noticed small icons looking a little fuzzy, especially on older screens? That’s subpixel rendering at work — a technique meant to smooth curves but one that often struggles with straight lines, leading to half-pixel blurriness.

Even though SVGs are scalable, they’re not immune to this issue.

They stay pixel-perfect at their original size, but once resized (especially to non-multiples of the original size), subpixel anti-aliasing can make them appear soft and imprecise.


How to keep icons sharp

There’s no magic fix, but these best practices will help:

 * Design icons at base sizes (12px, 16px, etc.) and only scale in multiples (e.g., 12px → 24px → 48px).
 * Test across screens – Different displays handle anti-aliasing differently, so always check how your icons look on various devices.
 * Use PNGs for ultra-small icons – When sharpness is non-negotiable, exporting as PNG (instead of SVG) can help maintain clarity.

Follow these tips and you’ll reduce blurriness and keep your icons crisp, no matter where they appear.


Keeping icon properties consistent (so they work seamlessly in UI components)

A well-organized icon library serves one great purpose — making sure every icon behaves predictably in your design system.

Here’s how we keep things consistent.

 * Match stroke weights – If you're using outlined icons, make sure all strokes have the same thickness. No mix-and-match allowed.
 * Standardize colors – Stick to a single base color (like black, gray, or a specific brand color) to keep everything cohesive.
 * Keep spacing & alignment even – Icons should be visually centered within their containers, so they don’t look misaligned when swapped in UI components.
 * Set icons to “Scale” under Constraints – In Figma, select the icon inside its frame and set resizing behavior to Scale in the Constraints panel. This ensures the icon resizes proportionally inside different UI elements.


Turning icons into components (the right way)

Now that your icons are properly sized and formatted, it’s time to convert them into components. This step is crucial for scalability, efficiency, and making your design system future-proof.


Best practices for icon components

To ensure your icons work smoothly in Figma, stick to these guidelines:

✅ Use single vectors for simplicity

 * If your icon is made of multiple vector shapes, convert them into a union. This keeps all parts editable but ensures uniform styling.
 * Alternatively, flatten the icon into a single vector (⌘ + E on Mac, Ctrl + E on Windows) for better consistency.

✅ Skip variants — use smart naming instead

 * Avoid creating icon variants—they can slow down your project and make searching harder.
 * Instead, use slash-separated naming (e.g., Icon / 16px / User) to keep things organized. Figma automatically groups them for easy access.

✅ Name frames & vectors properly

 * Name each icon component based on what it represents (e.g., User, Search, Settings, Arrow-Left).
 * Inside each component, name the vector elements "Icon" or "Vector"—Figma will recognize them consistently when swapping icons.

Taking the time to set up icons correctly from the start makes your design system cleaner, faster, and easier to maintain. This will save you (and your team) from endless headaches down the line.


Use slash-separated naming for easy organization

Figma automatically groups components when you use slashes ( / ) in their names, making your icon library way easier to navigate.

Here’s a simple, structured approach:

 * Icon / 12px / User
 * Icon / 16px / User
 * Icon / 24px / User

This setup keeps icons organized by size and function, so you can quickly find and swap the right icon inside components — without scrolling through a messy list.


Keeping your icon library organized

Once your icons are properly named, the next step is structuring them for easy access and consistency.

Here’s how to do it right:

 * Create a master icon library – Store all icons in a dedicated page or file, so your team can quickly find and reuse them.
 * Group by size – Keep icons of the same size together (e.g., all 16px icons in one section, all 24px icons in another). This makes swapping and maintaining consistency effortless.
 * Use Auto Layout – Set up Auto Layout to keep icons evenly spaced and neatly arranged. This makes browsing the library much smoother.


Why this matters

Properly named and organized icons will:

 * Speed up your workflow – No more digging through messy files to find the right icon.
 * Ensure consistency – Everyone on your team uses the same icons, keeping designs cohesive.
 * Prevent design system chaos – As your library grows, a structured approach saves you from future headaches.

Taking the time to set up your icon system now means smoother, faster, and more consistent design work later.


Bonus tip: How icons evolve with technology and user behavior

Icons mirror how technology, user habits, and cultural norms shift over time. As digital products evolve, some icons become outdated and get replaced with more intuitive alternatives.

Here are some classic examples of icon evolution:

 * Filter icon – The old water funnel is being swapped for adjustment sliders, reflecting modern filtering systems.
 * Share icon – The traditional “share” nodes icon is giving way to a forward arrow, which better aligns with how people think about sharing content.
 * Favorite icon – Once represented by stars, hearts have taken over — thanks to social media platforms normalizing them.
 * Hamburger menu – The classic three-line menu icon is increasingly replaced by three dots ("more options"), especially in mobile interfaces.
 * Save icon – The floppy disk (RIP) is being phased out in favor of a cloud or sync icon, since most files are stored online now.

Want to dive deeper? Check out Vitaly Friedman’s LinkedIn post on icons that might be outdated by 2025.


Key takeaways for a bulletproof icon library

A well-structured icon library can make or break your design workflow.

Get it right, and your icons will be easy to find, swap, and scale. Get it wrong, and you’ll be stuck dealing with overrides that don’t work, misalignment headaches, and inconsistent styles.

To build an efficient and scalable system, focus on these core principles:

 * Consistent icon sizing & containers – Keep all icons inside uniform square frames (e.g., 16x16px, 24x24px) with properly centered vectors to prevent misalignment.
 * Clear naming conventions – Use a structured naming format (e.g., Icon / 16px / Search) to keep your icons searchable and easy to swap in UI components.
 * Vector optimization – Convert icons into single vectors or unions to ensure smooth overrides and prevent color inconsistencies.
 * Style & stroke consistency – Stick to uniform stroke weights to maintain a polished, cohesive look across your design system.
 * Scaling rules & constraints – Set icons to “Scale” in Figma’s constraints panel to keep proportions intact and avoid distortion when resizing.

Once you lock in these fundamentals, everything else — scaling, component setup, and organization — will fall into place effortlessly. Nail these steps, and you’ll have an icon library that actually works for you, not against you.

AuthorMarko Kolić

Start a Project