Skip to content

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

Latest
Latest

Choose a tag to compare

View all tags
@dondonondon dondonondon released this 03 Oct 02:51
v2.0.0
0632f95

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.

Assets 2
Loading