TagForge

Design Minecraft rank tags that look sharp in-game.

TagForge is a client-side web app for Minecraft Java server owners to create pixel-art rank tags, export PNGs, and package them into a ready-to-use resource pack font. It helps admins make chat prefixes, TAB entries, holograms, NPC labels, and menu text look polished without editing assets manually.

Business Goals

  • Reach 10,000 monthly active creators within 6 months of launch.
  • Convert at least 8 percent of landing-page visitors into generator users within 90 days.
  • Achieve 35 percent of active users exporting at least one resource pack ZIP per session within 3 months.
  • Maintain a 4.5 star average satisfaction score from post-export feedback within 6 months.

User Goals

  • Create a Minecraft rank tag PNG in under 2 minutes.
  • Export a valid resource pack ZIP that works on Java Edition servers.
  • Copy a valid JSON snippet for LuckPerms, TAB, or similar plugins.
  • Preview the tag at game-like scale before downloading.
  • Reuse saved presets to produce consistent rank styles quickly.

Non-Goals

  • No Bedrock Edition support in the initial release.
  • No user accounts, cloud sync, or server-side storage.
  • No marketplace, payment, or subscription features.
  • No support for importing third-party font packs or copyrighted assets by default.

Server Owner Dimas, 29 - Runs a mid-sized Java Edition survival server and manages ranks, chat formatting, and cosmetic consistency. He wants a fast way to create premium-looking tags without hiring a designer.

Server Owner Dimas, 29

  • As a server owner, I want to generate a rank tag from text and color choices, so that I can update server branding quickly.
  • As a server owner, I want a ZIP resource pack with the right font JSON and PNG files, so that I can install it without manual file editing.
  • As a server owner, I want a copyable character mapping snippet, so that I can paste the tag into LuckPerms or TAB with minimal setup.

Community Admin Rina, 22 - Moderates a large public server and frequently changes event badges, helper ranks, and temporary tags. She needs batch creation and consistency across multiple ranks.

Community Admin Rina, 22

  • As a community admin, I want to duplicate and edit existing tags, so that I can create a set of related rank variants quickly.
  • As a community admin, I want to preview tags in a mock chat line, so that I can verify readability before I publish them.
  • As a community admin, I want saved presets in my browser, so that I can return to the same style later.

Plugin Setup Maker Fajar, 34 - Maintains multiple server plugins and cares about compatibility, version differences, and deployment speed. He wants a tool that reduces guesswork around ascent, height, and pack format.

Plugin Setup Maker Fajar, 34

  • As a plugin setup maker, I want a Minecraft version dropdown, so that the exported pack uses the correct pack format.
  • As a plugin setup maker, I want to adjust ascent and height, so that the tag aligns correctly in chat and nametags.
  • As a plugin setup maker, I want to test and export a custom namespace pack, so that I do not overwrite another pack’s default font.

Tag Design and Rendering · High priority

  • The app must generate pixel-perfect tag artwork from text and style controls entirely in the browser.
  • Support uppercase text entry with validation for the allowed glyph set.
  • Render templates for Square, Rounded, Bevel, and Outline plates.
  • Support solid color and two-color gradient fills with selectable direction.
  • Allow border toggle, border color, border thickness, and text shadow toggle.
  • Export the tag as a transparent PNG at a predictable pixel size.

Resource Pack Packaging · High priority

  • The app must turn one or more generated tags into a valid Minecraft Java resource pack ZIP.
  • Generate pack.mcmeta with the selected Minecraft pack format.
  • Write font JSON providers that map private-use characters to generated PNGs.
  • Use deterministic file naming and prevent collisions across batch exports.
  • Support custom namespace output so packs do not overwrite other font definitions.
  • Allow the user to copy the character mapping snippet for external plugins.

Batch Workflow and Presets · Medium priority

  • The app must support creating, organizing, and reusing multiple tag variants in one session.
  • Add, edit, delete, reorder, and duplicate tags in a batch list.
  • Save recent configurations in localStorage for quick restoration.
  • Export and import preset JSON files for manual backup.
  • Show a compact summary of each batch item including slug, style, and assigned character.
  • Preserve allocation consistency so the same slug gets the same Unicode character in future sessions.

Preview and Calibration · Medium priority

  • The app must help users verify how tags will look in game before they install the pack.
  • Show a pixelated live preview with integer scaling for crisp edges.
  • Provide a mock chat line and a mock nametag view.
  • Expose ascent and height controls with clear guidance on visual alignment.
  • Warn when text contains unsupported glyphs or exceeds a practical width.
  • Allow zoom controls for desktop and touch-friendly preview controls on mobile.

Icons and Custom Assets · Low priority

  • The app should support optional icons to enrich tags without requiring external design software.
  • Include a built-in 7x7 icon set for common server roles and symbols.
  • Allow upload of a custom icon that is resized with nearest-neighbor scaling.
  • Place icons before or after the text with padding controls.
  • Reject unsupported file types and provide a simple error message.
  • Keep icon rendering consistent with the same pixel-art style as the text.

First-Time User Flow

  • Open the generator from the landing page and start with a default tag in under 10 seconds.
  • Type a rank name, which automatically converts to uppercase and validates supported characters.
  • Choose a template, colors, and optional gradient direction.
  • See an instant pixelated preview and a mock Minecraft chat line.
  • Add the tag to a batch or download a single PNG immediately.
  • Export the ZIP resource pack after confirming the Minecraft version; time to first usable export should be under 2 minutes.

1. Enter and Validate Text

  • The user types the rank text and the app normalizes it for the pixel font pipeline.
  • Auto-uppercase the value unless the user explicitly disables it in advanced settings.
  • Show an inline warning for unsupported characters and explain which symbols will be replaced or removed.
  • Prevent export if the resulting glyph set cannot be rendered correctly.

2. Style the Tag

  • The user selects template, fill, border, shadow, and icon options.
  • Update the preview live on every control change with no full-page reload.
  • Clamp invalid border thickness or gradient settings to safe defaults.
  • Disable incompatible combinations and explain why, such as no shadow on ultra-thin fonts if readability drops.

3. Preview at Game Scale

  • The user inspects the tag in a Minecraft-like context before saving.
  • Render the artwork with pixelated scaling and a dark background for contrast.
  • Show a mock chat sample and optional nametag sample.
  • Offer a quick calibration hint if the tag appears vertically misaligned.

4. Export Artwork or Batch

  • The user downloads a PNG or queues multiple tags for a resource pack export.
  • Generate a file name slug from the tag label and block duplicate names.
  • Let the user duplicate an item in the batch list to speed up variants.
  • Confirm the exact output dimensions before download.

5. Package and Install

  • The user exports a ZIP resource pack and copies the snippet for plugin use.
  • Create the correct pack format for the selected Minecraft version.
  • Generate the provider JSON and private-use code mapping automatically.
  • Surface a short post-export checklist for resource pack activation and plugin paste-in steps.

Power User Tools

  • Batch editing with reorder, duplicate, and bulk export.
  • Custom namespace font output to avoid overwriting other packs.
  • Ascent and height calibration with saved per-version presets.
  • Preset import/export as JSON for sharing across staff teams.
  • Private-use character offset setting to avoid collisions with other font packs.
  • Custom icon upload with nearest-neighbor resizing and transparent-background handling.

UI and Interaction Principles

  • Keep the interface responsive and tactile with instant canvas updates.
  • Use large, touch-friendly controls for mobile admins who configure packs on phones.
  • Favor crisp pixel art surfaces, strong contrast, and a clear hierarchy between editor and preview.
  • Provide accessible labels, keyboard navigation, and visible focus states for every control.
  • Avoid blurry scaling by forcing integer zoom levels in previews and exports.
  • Keep export status visible with progress, success, and failure states that explain the next step.

Dimas runs a Minecraft survival server with a growing staff team. Every time he wants a new rank tag, he previously had to ask a designer for a PNG, then manually wire it into a resource pack and hope the font alignment worked in game.

With TagForge, Dimas types the rank name, picks a rounded template and a blue-to-cyan gradient, and immediately sees the result in a mock chat preview. He exports a ZIP resource pack, copies the character snippet into TAB, and adjusts ascent by a single click until the tag sits perfectly in chat.

What used to take hours now takes minutes, and the server gets a more polished visual identity without custom design work. For the business, that means faster adoption, repeat usage for new seasonal ranks, and a tool that becomes part of the server admin workflow.

User-Centric Metrics

  • 90 percent of users can create a first tag and export it in under 2 minutes.
  • At least 75 percent of exported packs are reported as visually correct on the first install.
  • Less than 5 percent of users encounter unsupported-character blocking errors during normal usage.
  • At least 40 percent of active users save or reuse a preset within 30 days.
  • Average user satisfaction after export is 4.5 out of 5 or higher.

Business Metrics

  • 8 percent landing-page conversion to generator use within 90 days.
  • 35 percent of active users export a ZIP pack at least once per session.
  • 25 percent month-over-month growth in returning users for the first three months after launch.
  • 20 percent of users who export once return to create another tag within 30 days.

Technical Metrics

  • 99.9 percent frontend uptime on static hosting.
  • Preview interaction latency under 100 ms for standard edits on modern desktop browsers.
  • ZIP export generation completed in under 3 seconds for batches of up to 25 tags.
  • Zero high-severity security issues related to client-side file generation or upload handling.

Tracking Plan

  • track landing_page_view with source and device type.
  • track generator_opened with initial template and version selection.
  • track spec_changed for color, gradient, border, icon, and text edits.
  • track preview_rendered with render time and canvas dimensions.
  • track single_png_downloaded with output size and template type.
  • track zip_exported with batch count, Minecraft version, and namespace mode.
  • track preset_saved_or_loaded with preset name and storage source.

Technical Needs

  • Use Vite with React and TypeScript for fast static deployment and componentized UI.
  • Use Canvas API or OffscreenCanvas for pixel rendering and PNG export.
  • Use JSZip for client-side resource pack ZIP creation.
  • Store local data in localStorage with a versioned schema for presets and character allocation.
  • Implement a deterministic private-use character allocator with collision-safe offsets.
  • Use Tailwind CSS or a similar utility framework for fast responsive layout implementation.
  • Add schema validation with Zod for spec integrity and export payload safety.

Integration Points

  • Minecraft Java Edition resource pack format and pack_format version rules.
  • LuckPerms prefix configuration guidance and snippet copy flow.
  • TAB plugin formatting workflow for rank display.
  • Browser APIs for file download, clipboard copy, and localStorage.
  • Optional analytics tool such as PostHog or Plausible for product telemetry.

Data Storage & Privacy

  • Keep all design data client-side by default; do not require an account or server upload.
  • Treat localStorage as user-controlled data and provide a reset/export option.
  • Do not store custom icon uploads remotely unless the user explicitly imports them again in the browser.
  • Document that generated assets are user content and should not include copyrighted third-party files unless licensed.
  • If analytics are enabled, collect only pseudonymous event metadata and follow GDPR and CCPA consent requirements where applicable.

Scalability & Performance

  • Keep render operations incremental so editing one control does not reprocess the entire batch unnecessarily.
  • Optimize canvas generation for low-end laptops and mobile devices by limiting unnecessary redraws.
  • Generate ZIP files lazily only when requested to avoid memory spikes during long editing sessions.
  • Cap batch previews and provide pagination or virtualization if the batch grows beyond 25 items.

Potential Challenges

  • Vertical alignment may differ across Minecraft versions; mitigate with ascent and height sliders plus calibration presets.
  • Unsupported glyphs could break user text; mitigate with validation, fallback warnings, and a clear supported-character guide.
  • Private-use character collisions may occur with other packs; mitigate with configurable offsets and custom namespace support.
  • Browser memory use may spike during large batch exports; mitigate with incremental rendering, cleanup of object URLs, and batch size guidance.
  • Users may expect copyrighted Minecraft-style assets to be included; mitigate by using original fonts, icons, and template art only.

Team & resourcing - Small team - 2 frontend engineers, 1 designer, part-time PM, optional QA support.

Phase 1: MVP Generator · Weeks 1–3

  • Text input with validation and auto-uppercase.
  • Pixel font atlas generated from original glyph data.
  • Single-tag canvas render with Square template and solid color.
  • PNG download flow and basic responsive generator page.

Phase 2: Styling and Preview · Weeks 4–6

  • Gradient, border, and shadow controls.
  • Rounded, Bevel, and Outline templates.
  • Mock chat preview and integer-scaled pixel zoom.
  • Basic accessibility improvements and mobile layout polish.

Phase 3: Resource Pack Export · Weeks 7–9

  • Private-use character allocator with persistent mapping.
  • Copyable JSON snippet output.
  • JSZip export with pack.mcmeta, font JSON, and PNG assets.
  • Version selector for pack_format and custom namespace option.

Phase 4: Power Features and Launch · Weeks 10–13

  • Batch list with reorder, duplicate, and delete.
  • Preset save/load and export JSON.
  • Icon library plus custom icon upload.
  • Landing page, tutorial, FAQ, analytics, and production deployment.

Paste this into Cursor, Bolt, Lovable, or v0 to start building.

Build a client-side web app called TagForge for Minecraft Java server owners to create pixel-art rank tags and export them as PNGs plus a ready-to-use resource pack ZIP.

Use Vite, React, TypeScript, and Tailwind CSS. Keep everything statically hostable with no backend. Use Canvas API for rendering and JSZip for ZIP generation.

Core product requirements:
1. Generator page where users type rank text, auto-uppercase it, and validate supported characters.
2. Controls for template shape: Square, Rounded, Bevel, Outline.
3. Style controls for primary color, secondary color, gradient toggle, gradient direction, border toggle, border color, border thickness, shadow toggle, font size normal or big, and optional icon before/after text.
4. Live pixelated preview with integer zoom, plus a Minecraft-like mock chat preview and nametag preview.
5. Single PNG download and batch list support for add, edit, delete, duplicate, reorder.
6. Resource pack export that generates pack.mcmeta, font JSON providers, and PNG assets in a ZIP.
7. Private-use Unicode character allocator starting at U+E000 with persistent slug-to-character mapping in localStorage and a configurable offset to avoid collisions.
8. Copyable JSON snippet for use with LuckPerms, TAB, or similar plugins.
9. Optional custom namespace pack output so generated font files do not overwrite default.json from other packs.
10. Preset save/load in localStorage and export/import of preset JSON.
11. Custom 7x7 icon set plus user icon upload with nearest-neighbor resizing.
12. Tutorial and FAQ pages explaining install steps, resource pack activation, and ascent/height calibration.

Data model:
TagSpec should include text, template, font, bgStart, bgEnd, bgGradient, gradientDir, textColor, shadowEnabled, borderEnabled, borderColor, borderThickness, icon, customIcon, ascent, height, minecraftVersion, namespaceMode, and slug.

Architecture:
Use a clean folder structure with core rendering, measure logic, templates, icons, pack generation, sanitize utilities, and UI components. Implement original pixel font glyph data in the app and generate the atlas at runtime; do not depend on third-party font artwork.

UX expectations:
Make the app fast, touch-friendly, and visually crisp. Prevent blurry scaling. Show validation errors inline. Make exports deterministic and safe. Add accessibility labels, keyboard navigation, and clear empty states.

Deliver a polished MVP first, then extend to gradient, border, shadow, batch export, ZIP packaging, presets, icons, and tutorial content. Seed the app with sensible defaults so a first-time user can create and download a tag in under 2 minutes.

Business Idea

# Planning Lengkap: Minecraft Rank Tags Generator ## 1. Ringkasan **Tujuan:** website (client-side) untuk membuat tag rank pixel-art (PNG) dan langsung menghasilkan resource pack font bitmap siap pakai di server Java Edition. **Target pengguna:** owner/admin server Minecraft yang ingin prefix rank, hologram, NPC, dan menu terlihat modern. **Di luar scope (awal):** Bedrock, akun/login, penyimpanan di server, pembayaran. ## 2. Alur pengguna 1. Buka halaman generator, ketik teks rank 2. Pilih template, warna, gradient, ikon, border, shadow 3. Lihat live preview (zoom pixelated) dan mockup chat 4. Tambah ke daftar (batch) atau langsung download PNG 5. Export ZIP resource pack lengkap 6. Baca tutorial pasang (resource pack → LuckPerms/TAB/hologram) ## 3. Fitur **Wajib (MVP)** - Input teks (otomatis uppercase), validasi karakter yang didukung - Template: Rounded, Square, Bevel, Outline - Warna utama + kedua, toggle gradient, arah gradient - Warna dan toggle border, toggle shadow teks - Download PNG - Snippet JSON + tombol copy **Lanjutan** - Batch list (tambah, edit, hapus, urutkan, duplikat) - Export ZIP berisi `pack.mcmeta`, `font/*.json`, dan semua PNG - Ikon 7x7 bawaan + upload ikon custom (otomatis di-resize nearest-neighbor) - Preset warna, simpan/muat konfigurasi (localStorage + export JSON) - Mockup chat dan nametag Minecraft - Pengaturan karakter unik: kode mulai, mode otomatis/manual - Pilihan ukuran: normal dan besar ## 4. Arsitektur teknis **Stack:** Vite + React (atau vanilla) + TypeScript + Tailwind + JSZip. Tanpa backend, jadi bisa di-host statis (Vercel/Netlify/Cloudflare Pages). **Struktur folder** ``` src/ core/ spec.ts // tipe + default TagSpec font/ // data pixel font sendiri + loader atlas measure.ts // hitung ukuran tag render.ts // gambar ke canvas (layer) templates.ts // bentuk: rounded/square/bevel/outline icons.ts // ikon bawaan (grid 7x7) pack/ charAllocator.ts // karakter unik PUA fontJson.ts // bikin provider bitmap zip.ts // pack.mcmeta + assets + zip sanitize.ts // slug nama file ui/ // komponen, halaman, state public/ // aset landing ``` **Model data (`TagSpec`)** ``` text, template, font(normal|big), bgStart, bgEnd, bgGradient, gradientDir, textColor, shadowEnabled, borderEnabled, borderColor, borderThickness, icon | customIcon ``` ## 5. Pipeline render 1. **spec** → gabung dengan default 2. **measure** → hitung lebar/tinggi dari: ikon + padding + panjang teks (letterWidth, spacing) + border 3. **render** per layer, berurutan: plate (solid/gradient) → ikon → teks (glyph bitmap) → shadow → border → pemangkasan sudut sesuai template 4. **preview** → canvas ditampilkan dengan `image-rendering: pixelated` dan scale integer (x4 / x8) 5. **export** → `canvas.toBlob('image/png')` **Pixel font:** buat sendiri set glyph (misal 5x7, A–Z, 0–9, simbol umum) sebagai array bit. Saat load, generate atlas ke canvas kecil per karakter, versi normal dan versi shadow. Ini bagian orisinal yang harus kamu miliki; jangan pakai atlas dari situs lain. **Template:** definisikan sebagai mask sudut (pixel yang dibuang) plus aturan border, jadi mudah menambah bentuk baru. ## 6. Sistem resource pack **Alokasi karakter:** counter mulai `U+E000` (rentang Private Use sampai `U+F8FF`), `String.fromCodePoint(n)`. Di JSON ditulis escape `\ue000`. Simpan mapping `slug → karakter` di state/localStorage supaya konsisten antar sesi. Beri opsi offset agar tidak bentrok dengan pack lain. **Provider per tag** ```json { "type": "bitmap", "file": "minecraft:sb/<slug>.png", "ascent": 8, "height": 9, "chars": ["\ue000"] } ``` - `height` default = tinggi PNG hasil export (1:1), `ascent` default = height − 1, dengan slider penyesuaian (karena posisi vertikal perlu dicek di game) - Nama file: lowercase, hanya `a-z 0-9 _ - .`; spasi dan `#` diganti, cegah duplikat - Teks di game sebaiknya putih (`&f`) agar warna PNG tidak tercampur **Struktur ZIP** ``` pack.mcmeta // pack_format sesuai versi target assets/minecraft/font/default.json // {"providers":[ ... ]} assets/minecraft/textures/sb/*.png ``` Tambahkan opsi: pakai font custom (namespace sendiri) agar tidak menimpa `default.json` milik pack lain. Nilai `pack_format` berbeda tiap versi Minecraft, jadi sediakan dropdown versi target dan cek ke dokumentasi resmi. ## 7. Halaman dan UI - **Landing:** hero, 3 kartu fitur, CTA - **Generator:** panel kontrol, preview, daftar batch, snippet, download - **Tutorial:** pasang pack, pakai di LuckPerms (prefix), TAB, hologram/NPC/menu, troubleshooting - **FAQ/Support** - Desain visual sendiri (tema, warna, tipografi); ambil konsep saja dari referensi, jangan meniru tampilannya ## 8. Roadmap | Fase | Isi | Hasil | |---|---|---| | 1 | Setup project, pixel font + atlas, measure, render, template Square, solid color | Teks jadi PNG, download | | 2 | Gradient, border, shadow, template Rounded/Bevel/Outline | Variasi tampilan lengkap | | 3 | Alokator karakter, snippet JSON, sanitize nama | JSON siap copy | | 4 | Batch list, export ZIP | Resource pack utuh | | 5 | Ikon, upload ikon custom, preset, simpan config | Kustomisasi penuh | | 6 | Mockup chat, landing, tutorial, FAQ, responsive | Siap rilis | | 7 | Testing di game, deploy, analytics ringan | Versi publik | ## 9. Testing - **Unit:** `measure` (lebar/tinggi tiap kombinasi), alokator karakter (tidak duplikat), sanitize, JSON valid - **Visual:** snapshot PNG untuk beberapa spec - **Uji nyata di game (wajib):** pasang pack di Java 1.21.x, cek chat, tab list, hologram, menu; sesuaikan `ascent/height` - **Browser:** Chrome, Firefox, Safari, mobile ## 10. Risiko dan mitigasi - **Posisi vertikal tag meleset** → slider ascent + panduan kalibrasi - **Bentrok karakter unik antar pack** → offset kode dan custom font namespace - **Pixel font tidak cukup lengkap** (simbol/karakter non-latin) → batasi set karakter, tampilkan peringatan - **Pelanggaran hak cipta** → font, ikon, template, dan UI dibuat sendiri atau berlisensi bebas ## 11. Kriteria selesai (MVP) - Tag dengan teks, warna, dan gradient bisa dibuat dan di-download - JSON snippet valid dan karakternya unik - ZIP bisa dipasang di Minecraft Java dan semua tag tampil benar di chat - Berjalan lancar di desktop dan mobile

Make My PRD

Design by The Resonance | Powered by GPC – The AI Transformation Company