English | Bahasa Indonesia

Turn HTML/CSS designs into native, editable Delphi FireMonkey UI with three complementary agent skills. The workflow plans the component hierarchy, creates FMX style resources, and implements .fmx/.pas frames in an existing Delphi project.

This repository contains skill instructions and a documented dashboard experiment. It is not an automatic transpiler or a complete Delphi application; the target project and its toolchain determine the final implementation and validation.

html-to-fmx runs the mapping and styling workflows as sibling dependencies. Keep all three skill directories together. Fixed visual structure belongs in design-time .fmx resources; variable records use reusable TFrame cards inside TListBoxItem instances.

A direct HTML-to-FMX conversion can turn HTML wrapper elements into many layers of FMX containers. These skills map the page into meaningful sections and cards, then add a container only when it serves a layout, grouping, or other concrete purpose. The result is a shallower component hierarchy that is easier to inspect and edit in the RAD Studio designer, while preserving the sections and cards the UI needs.

Codex discovers repository skills in .agents/skills from the working directory up to the repository root. Open this repository in Codex to inspect the skills, or copy the three directories into the .agents/skills/ folder of the Delphi project where you will use them. See the official Codex skill documentation.

From this repository, a PowerShell copy looks like this:

$skillDest = 'D:\Path\To\DelphiProject\.agents\skills'
New-Item -ItemType Directory -Force -Path $skillDest | Out-Null
Copy-Item -Path .\.agents\skills\* -Destination $skillDest -Recurse -Force

Start Codex in the target project and invoke $html-to-fmx, $html-to-fmx-mapping, or $css-to-fmx-style. If a newly copied skill is missing from /skills, restart the Codex session. For the included dashboard demo, copy docs/ui-dashboard.html into the target project or point the prompt to its actual location.

$html-to-fmx

Convert docs/ui-dashboard.html into a native FMX dashboard frame.
Inspect the existing Delphi project and StyleBook first. Save the UI and
style mappings under docs/fmx-mapping/. Keep fixed controls editable in
.fmx and use a reusable TFrame card for variable transaction records.
Build and inspect the result when the target toolchain is available.

See PROMPTS.md for focused prompts covering mapping, styling, full conversion, and refinement. Output paths in these examples belong to the target project, not to this skill repository.

The icons in the source HTML are sufficient as a starting point. For a better fit, choose or source icons that suit your own application's visual style. If your Delphi project already uses Skia, you can also replace them with SVG icons through that integration. This repository's target is pure Delphi FMX: the conversion workflow should work with native FMX components and should not require Skia.

The NovaPOS dashboard UI was generated with Google Stitch and exported as HTML code. The exported test input is docs/ui-dashboard.html. This is its browser reference:

The following example shows the GPT-6 Sol Medium designer structure and application run before and after a GPT-6 Sol High refinement:

RAD Studio designer	Initial run	Run after refinement

The model attempts in this experiment were run concurrently. When the author later retested GPT-6 Sol Light and GPT-5.6 Terra High one model at a time, both produced better results than in the concurrent runs. The agents may have conflicted while accessing the same files, but this has not been confirmed. Treat the screenshots and comparisons as records of those particular runs, not a fully reliable model ranking. You can retest sequentially with the models you normally use.

The desktop archive contains 10 designer captures, 10 initial run captures, and 8 run captures after refinement. The eight refined GPT results used GPT-6 Sol High. The DeepSeek results are pure DeepSeek with a Codex harness; neither has a GPT refinement image.

The archive also contains 10 Android run screenshots, one for each attempt after its final workflow. The GPT variants had a GPT-6 Sol High refinement; the two DeepSeek captures remain pure DeepSeek despite the mobile-after-enhance folder name.

Best visual result: GPT-6 Astra Light + GPT-6 Sol High	Best value: GPT-6 Sol Medium + GPT-6 Sol High

The times above are notes from individual attempts. The author recorded these DeepSeek costs during peak hours:

Exact GPT charges were not recorded. Based on Pro 5x usage percentages, the author estimated each Astra attempt at about 1% and the other GPT attempts at under 1%. These figures are personal estimates. The attempts used different conditions and do not form a controlled speed, cost, or quality benchmark.

• Lower cost, more manual work: DeepSeek V4.1 Flash High is a starting point when you plan to refine the output yourself.
• Strong direct output: DeepSeek V4 Pro High produced a very good result, but its peak hours run cost more and took longer. The author expects a lower cost outside peak hours; that expectation has not been measured here.
• Best visual result: GPT-6 Astra Light followed by GPT-6 Sol High refinement produced the strongest result in the author's judgment.
• Best value: GPT-6 Sol Medium already looked good in the initial run, and GPT-6 Sol High made it more polished. This is the author's preferred balance of result and cost. Based on Pro 5x usage, refinement appeared cheaper than repeating the conversion from scratch, although exact GPT charges were not tracked.
• Another good route: GPT-5.6 Terra followed by GPT-6 Sol High refinement also produced a good result.
• Designer structure: The resulting component hierarchies were relatively similar across attempts.

Choose GPT-6 Astra Light → GPT-6 Sol High when visual quality matters most. Choose GPT-6 Sol Medium → GPT-6 Sol High for the author's preferred price to result balance. DeepSeek V4 Pro High is also worth considering outside peak hours if its cost falls as expected.

These preferences reflect the concurrent runs documented here and may change with sequential retesting.

.agents/skills/          Three agent skills and their supporting files
docs/ui-dashboard.html   HTML test input
docs/result/             Browser, designer, desktop, and Android run captures
PROMPTS.md               Copy-ready prompts
README-ID.md             Indonesian documentation
SOURCES.md               Documentation and third-party references
LICENSE                  MIT license
CONTRIBUTING.md          Contribution guidance

The screenshots record particular designer, desktop, and Android runs. They show visual output from those attempts; they do not verify a new conversion, interaction behavior, a device matrix, or other Delphi versions. Each use of the skills still requires inspection of the target project, style integration, and whatever build, designer, and runtime checks its toolchain permits.

The HTML preview loads Inter, Material Symbols, and Tailwind from external services; opening it locally needs network access for the intended appearance. The application project and generated conversion documents are not included in this repository.

This repository is available under the MIT License. See CONTRIBUTING.md for contribution guidance and SOURCES.md for documentation and third-party references.