BUILD A LIQUID PIXEL TYPE DESIGNER Create a complete, working browser tool for designers to draw a pixel alphabet, apply shared liquid geometry and export usable vector artwork and font files. Use an original name, identity, interface implementation and starter glyph drawings. Do not clone an existing product's code, artwork, branding or typeface data. 1. DELIVERY Deliver one self-contained HTML file using HTML, CSS and JavaScript. It must run by opening the file locally and when uploaded to ordinary static hosting. No build process or server is required by the end user. Embed any necessary, permissively licensed dependencies; include their versions and full licence notices. No CDN, analytics, API keys, login or remote computation. Include a short README, third-party credits and a clear licence. 2. INTERFACE Use a minimal, responsive interface with monospaced UI text and a supplied or original SVG logo. Add light/dark themes controlled by an accessible icon button and remember the choice locally. On desktop, show Shape controls on the left, the glyph editor in the middle and an alphabet panel on the right. Keep the panels aligned in height with independently scrollable contents. Put a text preview underneath. Reflow cleanly on phones without horizontal page overflow. Avoid decorative filler and long instructional paragraphs. 3. GLYPH EDITING Provide uppercase A–Z, lowercase a–z, digits and standard punctuation. Include independently drawn starter letters and a blank-alphabet option. Select a character, tap a numbered grid cell to toggle it, drag to paint, and support an erase tool and right-drag erasing. Include keyboard cell navigation, undo/redo, clear, mirror, shift left/right and previous/next character. Changes must immediately update the editor, alphabet and typed preview. Support 3–20 columns and 5–24 rows. With “Stretch glyphs to fit” enabled, resample all glyphs when grid dimensions change. With it disabled, preserve the existing cell coordinates, including temporarily hidden cells. Resizing and destructive edits must be undoable. Make grid lines and row/column numbers clearly visible. 4. SHARED SHAPE CONTROLS Add pixel roundness, liquid join radius, cell gap and outline thickness. Each has a slider plus a numeric input. Permit numeric input above the slider's normal range while its thumb stays at the end stop. Preserve the exact entered value in state, backups and exports. Reject invalid values with clear feedback; never accept NaN or infinite coordinates. Use practical geometry limits: gap below 100%, and corner radii constrained by available edge lengths. Provide an Adjacent merge toggle with HOR, VER and Both direction choices. Diagonal merging must be independently switchable and work alone or in combination with any adjacent direction. Add an Outline only option for hollow lettering. Apply settings globally and update the whole alphabet live. 5. GEOMETRY — IMPORTANT Liquid shaping acts on connections between cells; it must not globally blur the letter or round otherwise square exterior corners. Pixel roundness is a separate control. Joining occupied neighbours should create a continuous mass with correct holes and counters. Increasing cell gap should lengthen existing smooth bridges rather than introduce little square connector steps. Use vector contours and smooth Bézier joins where possible. Use robust union, difference and contour offset operations when needed. Preserve contour orientation and holes. If flattening is required for geometry operations, use an adaptive tolerance fine enough for vector and font export. Preview and all exports must use the same underlying outlines. Expand preview/export bounds and font metrics to accommodate added thickness; do not clip letters. 6. CUSTOM AND RANDOM SYMBOLS Let users create named symbols mapped either to a single Unicode character or an automatically assigned Private Use Area character. Reject duplicate mappings, control characters and unsupported character sequences. Support supplementary-plane characters correctly. Include inserting a custom symbol into the typed preview and removing it with undo. Random symbol generation must create a new symbol without overwriting a letter. Vary the result between sparse scattered marks, full-grid compositions, partial-area patterns placed anywhere, short wandering strokes and directional line patterns. Vary density and placement. Do not always start in the middle, force symmetry or reserve a border. Every generated symbol must stay inside the active grid, have no duplicate cells and contain at least a few marks. 7. PREVIEW Place a multiline text input directly below the alphabet. Add preview size, tracking, leading, ink/paper colours and proportional spacing. Proportional spacing should use each glyph's occupied width rather than assigning the full grid width to every character; account for thickness. Show unsupported characters clearly. Keep text safe by treating it as content, never executable HTML. Preview spacing, glyph paths and font advance widths must agree where the same settings apply. 8. EXPORTS Export the selected glyph, entire alphabet and typed specimen as standalone SVG files. Export an installable OTF and a valid WOFF webfont. The font must contain the designed glyphs and their correct Unicode mappings, advance widths, counters and actual outlines, not a bitmap screenshot or SVG filter. Include a font family-name input and valid PostScript naming. SVG uses the chosen ink colour; ordinary fonts take their colour from the application using them. Fonts are static snapshots and must be exported again after edits. 9. PROJECTS AND DATA Autosave locally and provide JSON project download/restore. Version the schema, validate all imported values and keep backward compatibility where practical. Limit file size, glyph count and coordinates. Preserve the current project when an import fails. Never silently overwrite an unreadable autosave: allow the user to download the raw saved data for recovery. If browser storage is blocked, keep editing usable and show that a downloaded backup is needed. Maintain a bounded undo history. 10. SECURITY AND HOSTING Keep user data in the browser. No network calls during ordinary editing/export. Do not inject imported names or preview text into HTML. Embed a safe, static SVG logo with no scripts or external references. Add appropriate page title, description, author, application name, canonical URL, theme colour, Open Graph and Twitter card metadata. Supply a real social-preview image; make all destination URLs explicit in the README. Use an appropriate Content Security Policy and document how inline script hashes must be refreshed after code changes. Retain third-party copyright and licence notices; do not disguise dependencies as wholly original code. 11. VERIFICATION AND FINAL DELIVERY Test startup via file:// and a local HTTP server. Test mouse, keyboard and touch-sized layouts; undo/redo; resize with/without stretching; every join combination; shape values above slider ranges; proportional spacing; custom Unicode; random-pattern variation; dark mode; malformed JSON; storage failures and recovery. Check all SVG/OTF/WOFF downloads and independently parse the exported fonts. Check browser console errors, unexpected network requests, mobile overflow and export clipping. Deliver the finished HTML and supporting files, list the specific defects fixed, state what was tested and identify any remaining limitations. Do not claim the code is guaranteed bug-free, the name is trademark-cleared, or the work is legally original merely because an external product's name is absent. --- Prompt by ChatGPT 6 Astra CC BY 4.0: https://creativecommons.org/licenses/by/4.0/ Use your own branding. This prompt does not grant rights to the LiquiType logo.