MyTag

Design Minecraft rank tags and export a ready-to-use pack.

MyTag is a browser-based generator for Minecraft Java Edition rank tags, built for server owners and admins who want clean pixel-art prefixes without editing graphics by hand. Users type a rank name, customize the look, preview it live, and export both PNG assets and a resource pack font configuration that works in-game.

Business Goals

  • Reach 2,000 monthly active users within 3 months of launch.
  • Convert at least 25% of visitors to first successful PNG export within 10 minutes.
  • Achieve a 15% return rate within 30 days through batch generation and saved presets.
  • Keep support tickets below 3% of active users per month by shipping clear tutorials and validation.
  • Drive at least 40% of exports to ZIP resource packs rather than standalone PNG downloads by month 6.

User Goals

  • Create a rank tag in under 5 minutes without needing Photoshop or resource-pack expertise.
  • Preview how the tag will look in Minecraft chat, nametags, and menus before downloading.
  • Export a valid PNG and resource pack that can be installed on a Java server.
  • Reuse saved styles, presets, and character mappings across sessions.
  • Generate multiple rank variants in a batch for a full server rank set.

Non-Goals

  • Bedrock Edition support in the initial release.
  • User accounts, cloud sync, or server-side storage.
  • Payments, subscriptions, or marketplace selling features.
  • Full visual editor for arbitrary fonts or 3D text effects outside the pixel-art tag system.

Server Owner Dimas, 28 - Runs a medium Java SMP with 50 to 150 concurrent players and wants polished rank prefixes that match the server theme. He needs fast results, no design tools, and a pack that installs correctly the first time.

Server Owner Dimas, 28

  • As a server owner, I want to generate rank tags from simple text and colors, so that I can update ranks quickly for new events or donor tiers.
  • As a server owner, I want to export a complete resource pack with font JSON, so that the tags work in chat, TAB, and holograms without manual file editing.
  • As a server owner, I want guidance on ascent and height calibration, so that the tag sits correctly above text in-game.

Community Admin Rina, 34 - Manages rank roles, event titles, and cosmetic tags for a Discord-linked Minecraft community. She often iterates on visual styles and needs repeatable presets and batch output.

Community Admin Rina, 34

  • As a community admin, I want to save and reload configurations, so that I can reuse the same brand style across multiple rank sets.
  • As a community admin, I want to batch-create several tags at once, so that I can prepare an entire rank ladder in one session.
  • As a community admin, I want to copy a valid JSON snippet, so that I can paste it into my existing setup quickly.

Junior Builder Nico, 19 - Helps moderate a small server and is comfortable with Minecraft but not with resource packs. He needs a simple workflow and immediate feedback when inputs are invalid.

Junior Builder Nico, 19

  • As a junior builder, I want live pixelated preview feedback, so that I can see changes before exporting anything.
  • As a junior builder, I want unsupported characters flagged immediately, so that I do not ship broken tags.
  • As a junior builder, I want a ready-made tutorial, so that I can install the pack without asking for extra help.

Tag Design and Preview · High priority

  • The application must let users create a rank tag visually in the browser and preview it at Minecraft-like scale before export.
  • Text input automatically converts to uppercase unless a manual override is enabled.
  • Users can choose template shape, primary color, secondary color, gradient toggle, gradient direction, border, shadow, and icon.
  • Preview renders with integer scaling and pixelated filtering so the output matches in-game appearance.
  • The system validates allowed characters and shows a clear fallback or warning for unsupported glyphs.
  • Users can zoom the preview and compare a chat mockup against the raw tag image.

PNG Rendering and Export · High priority

  • The application must produce clean PNG assets from the current specification with consistent dimensions and naming.
  • Export a standalone PNG for the current tag spec with transparent background support where applicable.
  • Use a deterministic canvas rendering pipeline so the same spec always produces the same image.
  • Include download actions for single export and batch export.
  • Sanitize file names to lowercase safe slugs and prevent collisions by appending sequence suffixes.
  • Ensure exported images are crisp at 1:1 pixel fidelity with no antialias blur.

Resource Pack Generation · High priority

  • The application must generate a valid Minecraft Java resource pack containing bitmap font providers and the exported tag images.
  • Create pack.mcmeta with a selectable pack_format based on target Minecraft version.
  • Generate font JSON providers that map unique private-use characters to each exported tag.
  • Bundle PNGs under a stable assets path and preserve the mapping between file name and codepoint.
  • Support custom namespace mode so the pack does not overwrite another pack's default font files.
  • Provide a copyable JSON snippet and a short installation guide for server use.

Batch Workflow and Presets · Medium priority

  • The application should support efficient creation of many tags and reusable configurations for server rank systems.
  • Users can add multiple tag entries to a batch list and reorder, duplicate, edit, or delete them.
  • Users can save presets locally and export/import configuration JSON.
  • The app remembers recent character allocation state so exports remain consistent across sessions.
  • Batch export produces one ZIP containing all assets and a single combined font config.
  • Users can duplicate a spec as a starting point for a new rank without re-entering all options.

Media, Icons, and Tutorial Support · Medium priority

  • The app should help users personalize tags and successfully install them in real server workflows.
  • Provide built-in 7x7 icons and allow custom icon upload with nearest-neighbor resizing.
  • Show tutorial content for installing resource packs and using the tags in LuckPerms, TAB, holograms, NPCs, and menu plugins.
  • Offer troubleshooting tips for vertical alignment, unsupported symbols, and pack conflicts.
  • Include a local mockup for chat and nametag placement.
  • Keep all icons, templates, and UI assets original or properly licensed.

First-Time Generator Onboarding

  • Open the generator and see a single clear CTA to start designing a tag.
  • Type a rank name and watch it normalize to uppercase instantly.
  • Choose a template and color palette, then see live preview update in under 300 ms.
  • Adjust icon, border, shadow, or gradient and inspect the pixelated Minecraft-style mockup.
  • Export a PNG or ZIP resource pack with one click, with a target time-to-value under 3 minutes.
  • If anything is invalid, show inline guidance instead of blocking the whole flow.

1. Define the Tag Text

  • The user enters the rank label and the app validates supported characters before any export happens.
  • Auto-uppercase the text by default, with a visible toggle for manual casing if supported.
  • If a character is unsupported, highlight it and suggest a replacement or a supported fallback.
  • Show live length and width estimate so long rank names do not overflow the canvas.

2. Style the Plate

  • The user selects template, colors, border, shadow, and gradient settings to shape the final tag.
  • Support square, rounded, bevel, and outline-style templates.
  • Use separate start and end colors for gradients, with direction controls.
  • Clamp border thickness to safe values and keep the preview stable on small screens.

3. Preview in Context

  • The user checks the tag in a Minecraft-like chat and nametag mockup before exporting.
  • Render a pixelated preview at integer scale to preserve crisp edges.
  • Show side-by-side plate preview and in-context mockup.
  • If the preview exceeds expected bounds, warn the user and suggest shorter text or larger padding.

4. Export Asset or Pack

  • The user downloads a PNG for single use or a ZIP resource pack for server deployment.
  • Export the current tag as a transparent PNG or packaged ZIP.
  • Generate pack.mcmeta and font provider JSON automatically.
  • Use consistent file naming and include a copy button for the character mapping snippet.

5. Deploy and Calibrate

  • The user installs the pack in Minecraft Java and fine-tunes ascent/height if the tag sits too high or too low.
  • Provide a simple calibration slider for ascent and height defaults.
  • Offer a test string and step-by-step install guidance.
  • Store calibration per preset so future exports stay aligned.

Power User Tools and Edge Cases

  • Batch list with edit, reorder, duplicate, and delete controls.
  • Saved presets and local import/export of configuration JSON.
  • Custom icon upload with automatic nearest-neighbor resizing.
  • Selective font namespace mode to avoid overwriting existing packs.
  • Character allocation offset controls to avoid conflicts with other packs.
  • Chat and nametag mockups for server-side validation.
  • Fallback handling for unsupported characters and long text overflow.

Interface Principles

  • High-contrast controls with clear labels for texture, color, and export actions.
  • Live preview area with pixelated rendering, snap-to-integer scaling, and minimal jank.
  • Mobile-friendly single-column layout for quick edits, with desktop side panel for advanced settings.
  • Accessible keyboard navigation for all primary controls and copy buttons.
  • Fast local rendering with no backend dependency so the app can be hosted statically.
  • Clear validation states that explain what is wrong and how to fix it without jargon.

Dimas runs a Minecraft server and needs a polished rank prefix for a new donor tier before the weekend event. He has tried making tags in image editors before, but the font spacing and pack setup always took longer than the design itself.

With MyTag, Dimas types the rank name, selects a rounded template, adds a gradient, and instantly sees the result in a chat mockup. When he exports, he gets both a crisp PNG and a ZIP resource pack with the font JSON already mapped to a private-use character.

He installs the pack, tests it in Java Edition, and adjusts the ascent slider once to align the tag perfectly. Instead of spending hours on manual setup, he finishes in minutes and can reuse the preset for future ranks, event titles, and staff roles.

User-Centric Metrics

  • At least 80% of first-time users generate a preview within 2 minutes.
  • At least 60% of users complete a successful PNG export on their first session.
  • At least 40% of users who start a project export a ZIP resource pack within the same session.
  • Support-reported alignment issues affect fewer than 10% of exports after calibration guidance ships.
  • At least 30% of active users save or reuse a preset within 14 days.

Business Metrics

  • Achieve 2,000 monthly active users within 90 days.
  • Convert at least 25% of landing page visitors into first successful exports.
  • Reach a 35% 30-day return rate driven by presets and batch workflows.
  • Generate at least 40% of exports from batch or repeat-use flows by month 6.

Technical Metrics

  • Maintain 99.5% uptime on the static app and asset delivery.
  • Keep preview and export actions under 300 ms for common specs on modern desktop browsers.
  • Keep ZIP generation under 2 seconds for up to 25 tags on average hardware.
  • Prevent duplicate character allocations in 100% of tracked sessions with persisted mappings and conflict checks.

Tracking Plan

  • Track project_created when a user starts a new tag spec.
  • Track spec_updated whenever text, template, color, icon, or gradient settings change.
  • Track preview_rendered with render time, browser, and spec complexity.
  • Track png_export_clicked and png_export_succeeded with file size and dimensions.
  • Track zip_export_clicked and zip_export_succeeded with tag count and pack_format.
  • Track preset_saved and preset_loaded with preset name and source session.
  • Track validation_error_shown with error type such as unsupported character or overflow.

Technical Needs

  • Frontend built with React, TypeScript, Vite, and Tailwind CSS for a fast static deployment.
  • Canvas-based rendering pipeline for pixel art output and deterministic image generation.
  • JSZip for generating downloadable resource pack archives in the browser.
  • Local persistence via localStorage or IndexedDB for presets, mappings, and recent projects.
  • A shared TypeScript data model for TagSpec, batch items, character allocation, and export metadata.
  • Image loading and nearest-neighbor resizing for custom icons using browser canvas APIs.
  • Optional client-side analytics integration with privacy-aware event batching.

Integration Points

  • Minecraft Java Edition resource pack format and pack_format version mapping from official documentation.
  • Local browser storage through localStorage and IndexedDB.
  • PNG and ZIP generation through native browser APIs plus JSZip.
  • Optional analytics via Plausible or PostHog.
  • Optional documentation links for LuckPerms, TAB, and common plugin workflows.

Data Storage & Privacy

  • Store all design data locally by default and avoid requiring user accounts.
  • Keep exported files and preview images in browser memory unless the user explicitly downloads them.
  • Provide an explicit notice that presets and character mappings are stored on the user device.
  • If analytics are enabled, use anonymized event data and avoid collecting server IPs, rank names, or file contents.
  • Document GDPR and CCPA-friendly behavior for consent, data export, and local data deletion.

Scalability & Performance

  • Use client-side rendering so load remains fast without backend scaling.
  • Avoid re-rendering the entire canvas on every keystroke by batching UI updates and memoizing derived measurements.
  • Limit batch ZIP generation work to the browser main thread only for small projects, and show progress for larger batches.
  • Keep asset sizes small by using compact pixel fonts and optimized PNG settings without sacrificing crispness.

Potential Challenges

  • Vertical alignment may vary across Minecraft versions; mitigate with ascent controls, a test string, and version-specific presets.
  • Unsupported characters can break the visual result; mitigate with validation, fallback glyphs, and clear warnings before export.
  • Pack conflicts may occur when another resource pack overrides fonts; mitigate with custom namespace mode and clear installation guidance.
  • Browser memory limits may affect large batch exports; mitigate with soft caps, progress indicators, and chunked generation.
  • Users may misconfigure pack_format for their server version; mitigate with a version dropdown tied to documented defaults.

Team & resourcing - Small team - 2 engineers, 1 designer, part-time product manager, with optional QA support during release.

Phase 1: Core Tag Generator · Weeks 1–3

  • Text input with validation and auto-uppercase
  • Custom pixel font atlas and measurement engine
  • Square template rendering with solid color fills
  • Single PNG download from browser canvas
  • Basic responsive UI and local preview

Phase 2: Visual Polish and Export Pack · Weeks 4–6

  • Gradient, border, and shadow controls
  • Rounded, bevel, and outline templates
  • Character allocator using private-use Unicode
  • Copyable JSON snippet and filename sanitization
  • ZIP export with pack.mcmeta and font provider JSON

Phase 3: Power Features · Weeks 7–9

  • Batch list management
  • Preset save/load with local persistence
  • Built-in icons and custom icon upload
  • Chat and nametag mockups
  • Calibration controls for ascent and height

Phase 4: Launch Readiness · Weeks 10–12

  • Landing page, tutorial, and FAQ content
  • Cross-browser testing on Chrome, Firefox, Safari, and mobile
  • Analytics instrumentation and error reporting
  • Minecraft Java 1.21.x real-world validation
  • Production deployment to static hosting

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

Build a static web app called MyTag for Minecraft Java Edition server owners to design pixel-art rank tags and export them as PNGs and resource packs.

Core requirements:
Create a responsive generator UI with these screens: landing page, generator, tutorial, and FAQ. The generator must support uppercase text input, character validation, template selection (square, rounded, bevel, outline), primary and secondary colors, gradient toggle and direction, border toggle and thickness, shadow toggle, built-in 7x7 icons, custom icon upload, live pixelated preview, chat and nametag mockups, single PNG download, batch list management, preset save/load using local storage, and ZIP resource pack export.

Data model:
TagSpec should include text, template, font mode normal or big, bgStart, bgEnd, bgGradient, gradientDir, textColor, shadowEnabled, borderEnabled, borderColor, borderThickness, icon or customIcon, plus ascent and height calibration fields for export.
Store batch items, presets, and character allocation mappings locally using localStorage or IndexedDB. Allocate unique private-use Unicode characters starting from U+E000 and persist the mapping so exports stay consistent.

Rendering and export:
Use a client-side canvas pipeline in TypeScript to render crisp pixel-art PNGs with nearest-neighbor scaling and no blur. Implement measurement, template masks, layer rendering, and export to PNG. Generate a ZIP with pack.mcmeta and assets/minecraft/font/default.json or a custom namespace font file option, plus PNG textures under assets/minecraft/textures/sb/. Use JSZip for ZIP generation and produce valid bitmap font provider JSON for each exported tag.

Tech stack:
Use Vite, React, TypeScript, and Tailwind CSS. Keep it backend-free so it can be deployed statically on Vercel, Netlify, or Cloudflare Pages. Add lightweight analytics hooks if needed, but do not require accounts or payments.

UX requirements:
Make the app fast, clear, and mobile-friendly. Show inline validation, clear download states, a copy-to-clipboard button for JSON snippets, preset management, and a tutorial that explains how to install the resource pack in Minecraft Java, plus how to use it with LuckPerms, TAB, holograms, NPCs, and menus. Include ascent/height calibration guidance because vertical positioning may differ by server and version.

Implementation notes:
Structure the code with core rendering, font atlas, template definitions, icon handling, pack generation, sanitization, and UI components. Prioritize deterministic output, accessibility, and browser compatibility across Chrome, Firefox, Safari, and mobile.

Business Idea

# Planning Lengkap: Minecraft Rank Tags Generator(MYTAG) ## 1. Ringkasan **Tujuan:** website 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