HTML to Delphi FMX v2.0.0 — Six Skills for Native FMX UI

Version 2 expands HTML to Delphi FMX from three to six agent skills for creating native, Designer-editable Delphi FireMonkey interfaces from HTML/CSS, wireframes, screenshots, and written UI briefs.

New skills

• screenshot-to-fmx-mapping — Map screenshots and wireframes into a native FMX component hierarchy.

• create-fmx-ui — Create native .fmx/.pas screens directly from a brief or image.

• review-fmx-ui — Review, refine, or enhance existing screens while preserving their established hierarchy and behavior.

The original html-to-fmx-mapping, css-to-fmx-style, and html-to-fmx skills remain part of the package.

Workflow improvements

• Clear ownership for page regions, sections, cards, and containers.

• Fixed UI controls remain editable in the RAD Studio Designer.

• Reusable TFrame cards for variable TListBox records.

• Project design continuity through DESIGN.md and existing StyleBook resources.

• More detailed guidance for style integration, input routing, data binding, and verification.

Healthcare Appointment App study

One hand-drawn wireframe was implemented through four workflows using GPT-6.1 Sol with High reasoning:

Workflow | Recorded total -- | -- Google Stitch MCP → HTML export → html-to-fmx | 38m 55s Direct create-fmx-ui | 25m 52s Separate screenshot mapping → create-fmx-ui | 55m 22s Agent-generated HTML/CSS → html-to-fmx | 23m 33s

Totals include the follow-up work to compose existing cards on the page and populate fictional dummy data.

The author observed approximately 90% overall component-hierarchy similarity, while visual polish varied. Methods 1–3 followed the project’s color rules. Method 4 used a different palette because its HTML-generation prompt did not explicitly reference DESIGN.md.

These are observations from this experiment, without a formal hierarchy metric or controlled benchmark.

Documentation and demos

• Updated English and Indonesian READMEs.

• Copy-ready prompts covering all six skills.

• English and Indonesian healthcare presentations.

• A responsive English static website with screenshots, timings, conclusions, and copyable prompts.

• Preserved V1 NovaPOS documentation and Designer, desktop, and Android results.

Getting started

Copy all six directories, including their supporting files, from .agents/skills/ into your Delphi project’s .agents/skills/.

See the README and prompt guide for setup and examples.

Version 2 expands HTML to Delphi FMX from three to six agent skills for creating **native, Designer-editable Delphi FireMonkey interfaces** from HTML/CSS, wireframes, screenshots, and written UI briefs.

New skills

• screenshot-to-fmx-mapping — Map screenshots and wireframes into a native FMX component hierarchy.
• create-fmx-ui — Create native .fmx/.pas screens directly from a brief or image.
• review-fmx-ui — Review, refine, or enhance existing screens while preserving their established hierarchy and behavior.

The original html-to-fmx-mapping, css-to-fmx-style, and html-to-fmx skills remain part of the package.

Workflow improvements

• Clear ownership for page regions, sections, cards, and containers.
• Fixed UI controls remain editable in the RAD Studio Designer.
• Reusable TFrame cards for variable TListBox records.
• Project design continuity through DESIGN.md and existing StyleBook resources.
• More detailed guidance for style integration, input routing, data binding, and verification.

Healthcare Appointment App study

One hand-drawn wireframe was implemented through four workflows using GPT-6.1 Sol with High reasoning:

Workflow	Recorded total
Google Stitch MCP → HTML export → html-to-fmx	38m 55s
Direct create-fmx-ui	25m 52s
Separate screenshot mapping → create-fmx-ui	55m 22s
Agent-generated HTML/CSS → html-to-fmx	23m 33s

Totals include the follow-up work to compose existing cards on the page and populate fictional dummy data.

The author observed approximately 90% overall component-hierarchy similarity, while visual polish varied. Methods 1–3 followed the project’s color rules. Method 4 used a different palette because its HTML-generation prompt did not explicitly reference DESIGN.md.

These are observations from this experiment, without a formal hierarchy metric or controlled benchmark.

Documentation and demos

• Updated English and Indonesian READMEs.
• Copy-ready prompts covering all six skills.
• English and Indonesian healthcare presentations.
• A responsive English static website with screenshots, timings, conclusions, and copyable prompts.
• Preserved V1 NovaPOS documentation and Designer, desktop, and Android results.

Getting started

Copy all six directories, including their supporting files, from .agents/skills/ into your Delphi project’s .agents/skills/.

See the [README](https://github.com/dondonondon/HTML-To-Delphi-FMX/blob/main/README.md) and [prompt guide](https://github.com/dondonondon/HTML-To-Delphi-FMX/blob/main/PROMPTS.md) for setup and examples.

HTML to Delphi FMX v1.0.0

First public release

HTML to Delphi FMX provides three agent skills for turning HTML/CSS designs into native, designer-editable Delphi FireMonkey UI:

• html-to-fmx-mapping plans the FMX component hierarchy.
• css-to-fmx-style maps CSS styling to native FMX styles.
• html-to-fmx implements editable .fmx/.pas frames using the mapping and styling workflows.

This release also includes copy-ready prompts and a documented NovaPOS dashboard experiment with source HTML and screenshots.

To get started, copy all three directories from .agents/skills/ into your Delphi project's .agents/skills/, then invoke the skill you need in Codex. See the [README](https://github.com/dondonondon/HTML-To-Delphi-FMX#readme) and [example prompts](https://github.com/dondonondon/HTML-To-Delphi-FMX/blob/main/PROMPTS.md).

These skills guide an AI coding agent; they are not an automatic transpiler or a standalone Delphi application. Validate generated UI in your target Delphi project and platform.

Full Changelog: https://github.com/dondonondon/HTML-To-Delphi-FMX/commits/v1.0.0