DEV Community: BitSun

NFT Generator: a visual workflow for layered artwork collections

BitSun — Mon, 05 Oct 2026 08:33:46 +0000

I'm the creator of NFT Generator, a browser-based tool for composing artwork collections from layers and traits without writing a generation script. The current website is in Chinese.

Start with layers, not individual finished images

A collection can be assembled from separate elements: backgrounds, faces, clothing, and accessories. Layer order determines how those elements combine.

The tool supports importing assets, configuring rarity, and inspecting generated combinations through a visual interface. Its outputs include image assets and metadata JSON.

Three things worth checking before a large batch

Alignment: assets intended to overlap need a shared canvas and consistent positioning. A misaligned accessory can affect many combinations.

Compatibility: some traits should not appear together. The product provides relationship rules for configuring combinations.

Distribution: rarity settings express the intended frequency of traits. Inspect the generated collection instead of assuming a setting alone proves the final distribution.

A small preview batch is useful for catching these issues before producing a larger collection.

Artwork is one part of the process

Generating image assets and metadata should not be confused with deploying a contract or minting tokens. This introduction concerns the artwork workflow; blockchain publishing is a separate task.

For developers building batch creative tools, visual inspection matters as much as the batch size: users need a way to understand what the rules actually produce.

Would you rather configure layered artwork through a script or a visual editor?

Ice Breaker Games: making an activity directory useful at a glance

BitSun — Mon, 05 Oct 2026 08:28:08 +0000

I'm building Ice Breaker Games, a collection of group activities, questions, and printable resources for meetings and gatherings.

For an activity directory, a title alone is rarely enough. A facilitator needs to know whether a game fits the people, the time available, and the setting.

The useful unit is an activity card

The site presents details such as group size, duration, difficulty, and instructions. These help answer practical questions before somebody opens a full activity:

Will this fit a five-minute opening?
Is it suitable for this group size?
Does it need preparation or materials?
Can the instructions be explained quickly?

Games such as Two Truths and a Lie, icebreaker bingo, and group challenges serve different situations. Clear metadata makes those differences easier to compare.

A directory can also contain tools

Alongside activity descriptions, the site includes random-question and charades generators and printable cards. Those support the moment of running an activity, not just choosing one.

For developers building content-heavy products, this is a useful distinction: discovery and execution can share a site while needing different interfaces.

The site is available in multiple languages, including English, Chinese, Japanese, and German.

If you facilitate team meetings, which filter saves you the most time: duration, group size, or preparation needed?

Bucici: designing a small daily-number web experience

BitSun — Mon, 05 Oct 2026 08:28:03 +0000

I'm the creator of Bucici, a lightweight website for exploring daily lucky-number sets and zodiac-based number pages.

This is an entertainment experience. The numbers should not be treated as predictions or as evidence that a particular outcome will happen.

A daily page has a different interface problem

On a conventional tool, the user supplies an input and gets an output. On a daily page, the visitor may primarily want to see what is available today.

That makes three details useful:

The date: which day's result am I viewing?
The selection: which zodiac sign or number set did I choose?
The result: where are the actual numbers?

If these are clear, the page can stay small without requiring a long explanation.

Keep personalization understandable

Bucici also includes a personal number generator. When a playful tool asks for information such as a birthday, the interface should make the purpose of that input understandable rather than suggesting scientific precision it cannot demonstrate.

For developers building small consumer websites, a narrow use case can be an advantage: the result should be visible quickly, and navigation should support the visitor's next choice.

My product focus here is a simple recurring entertainment interaction, not a complex dashboard.

What is your favorite example of a tiny website built around a daily habit?

CharacterGen: thinking beyond a single character portrait

BitSun — Mon, 05 Oct 2026 08:22:22 +0000

I'm building CharacterGen, an AI character-design tool with workflows for character sheets, expressions, poses, and outfits.

A portrait can introduce a character, but a game or illustrated story often needs more reference material. What does the outfit look like from the side? How does the face change when the character is surprised? Which details define the character across different views?

Choose the reference you need

The product presents different character tasks rather than treating every request as the same image-generation job:

Turnaround and design sheets for multiple views.
Expression references for emotional variations.
Pose and outfit workflows for exploring additional directions.

You can begin with a description or a reference image, depending on the workflow.

Write an identity brief first

A useful brief separates stable details from the requested variation. Stable details might include hair, silhouette, clothing, and distinctive accessories. The variation might be an expression, viewpoint, or outfit change.

For example: “Keep the short silver hair and red scarf; explore a surprised expression.” This is a prompting example, not a guaranteed output.

Generated references still need review. Compare the important features across views before treating a sheet as production-ready; an AI result is not a substitute for checking continuity.

For developers of creative tools, the interesting interface question is how to make the user's intended task visible before generation.

Which character reference do you need most often: views, expressions, or poses?

Building HopArcade: getting from a game page to play

BitSun — Mon, 05 Oct 2026 08:22:06 +0000

I'm the creator of HopArcade, a site for playing games in the browser without downloading an application. The games belong to their respective owners; my product is the browsing and playing experience around them.

Give the page one clear action

The current homepage puts a featured game and its play button near the top. Category links lead to car, puzzle, and action games, while a separate section lists newer games.

For this kind of site, the first useful action is usually starting a game. A page that explains everything before showing a play control adds friction to that simple intent.

Keep instructions close to the game

The featured game page also provides controls, a short how-to, and tips. These answer different questions:

Controls: which keys do I press?
Rules: what is the goal?
Tips: what can I try when I get stuck?

Treating those as separate pieces makes the content easier to scan.

Support the playing environment

Fullscreen, sharing, and favorites appear alongside the game. The surrounding interface should help players use the game without competing with it for attention.

A useful review checklist for browser-game pages is: can somebody find the play control, understand the controls, and return to another game without a long detour?

If you develop web games, what information do you want a hosting page to show before the first play?

AI Logo Generator: turning a brand brief into a visual starting point

BitSun — Mon, 05 Oct 2026 08:12:14 +0000

I'm building AI Logo Generator, a web tool for exploring logo ideas from a written brand description.

A blank prompt box can be surprisingly difficult to use. “Make a logo” leaves many decisions unspecified: the business, the mood, the visual style, and what the mark should communicate.

Start with a small brief

A useful starting prompt has three parts:

Identity: the brand name and what the business does.
Direction: a style such as minimal, playful, or geometric.
Constraints: preferred colors and elements to include or avoid.

For example: “A geometric mountain symbol for a hiking app called TrailNote, dark green and cream, simple shapes, no detailed landscape.”

That is an example brief, not a claim about a generated result.

Evaluate the idea outside the generator

A logo concept should also be checked at a small size, against light and dark backgrounds, and next to the product name. Attractive artwork is not automatically a readable application icon.

The product offers free initial tries and paid options for further generation. The current homepage explains the available plans and export options.

I see AI generation as a starting point for evaluating visual directions. Choosing a final brand identity still requires human judgment.

If you build products for founders, which part of a logo brief is hardest to explain in a simple interface?

Building Invoiceize: putting the invoice preview beside the form

BitSun — Mon, 05 Oct 2026 08:11:59 +0000

I'm the creator of Invoiceize, a browser-based invoice generator for freelancers and small businesses.

The main workflow is deliberately direct: edit the invoice, see the preview alongside it, and download a PDF. There is no signup requirement or watermark on the invoice download.

Why the preview matters

An invoice is both structured data and a document somebody else must read. A correct total is necessary, but layout matters too: a long item description, a company logo, or an extra line can change how the finished document looks.

Keeping the preview visible makes those effects easier to catch before export. It also gives users a clearer relationship between an input and its output.

A practical workflow

Add the sender and client details.
Enter line items, then apply tax or discounts where needed.
Check the amount paid and remaining balance.
Choose a template and export the PDF.

Drafts are stored in the current browser using local storage. That is convenient for returning to work on the same device, but it is not cross-device synchronization; clearing browser data can remove a saved draft.

For developers building document tools, my design priority is simple: let users inspect the actual output throughout the editing process.

What is the first thing you check before sending an invoice?

Building SpriteGen: three details that make a sprite sheet useful

BitSun — Mon, 05 Oct 2026 06:53:06 +0000

I build SpriteGen, a browser-based tool for generating sprite sheets with AI. The frontend uses Astro and React, with backend services on Cloudflare Workers.

A generated character can look good as a still image and still be awkward to animate. Here are three implementation details from the project that are useful beyond AI generation, including when working with existing frames.

1. Preview the animation before exporting

The result view includes a canvas animation preview with play/pause and an adjustable frame rate. It reads frames in row-major order: left to right, then the next row.

For frame index i, the cell coordinates are:

const column = i % columns;
const row = Math.floor(i / columns);

Playing the sequence makes it easier to spot visual jumps and an awkward transition between the last and first frames. A static sheet alone makes those problems harder to judge.

For pixel-art previews, canvas image smoothing is disabled. The preview also starts paused when the browser reports a preference for reduced motion.

2. Give uploaded frames a consistent baseline

SpriteGen also has a frame-packing tool. Uploaded frames can have different dimensions, so it builds equal-sized cells from the widest and tallest frames, plus padding. It places each frame horizontally in the center and vertically at the bottom, without resizing it.

For an upright character, bottom alignment helps prevent differently sized frame images from appearing to bounce vertically:

const x = column * cellWidth + padding
  + Math.floor((maxFrameWidth - frame.width) / 2);
const y = row * cellHeight + padding
  + maxFrameHeight - frame.height;

That is a simple packing rule, not a solution for every animation. It cannot fix a character drawn at inconsistent positions inside its source frames.

File ordering matters too. Natural numeric sorting keeps frame_2.png before frame_10.png.

3. Export for the next step in the workflow

A GIF is convenient for reviewing or sharing an animation. For using the frames elsewhere, the tool also supports individual PNG frames in a ZIP and an atlas bundle containing the sheet image, TexturePacker-style JSON Hash metadata, and Aseprite-style JSON metadata.

For the standard animation export, GIF playback and Aseprite frame durations use the selected preview frame rate. That keeps the timing someone reviews aligned with the timing they export.

Format support does not remove the need to check the result in the target engine. Frame geometry, motion continuity, and the loop boundary still need inspection; AI output can need cleanup.

You can try the workflow at SpriteGen. If you work with sprite animations, which export format or preview control would make this more useful for your workflow?