HTML-FMX V2: Healthcare Appointment App prompt guide

These are refined guide prompts based on the author's brief and four described workflows. They are not verbatim records of every original prompt.

PREPARATION
1. Open your Delphi FMX project and make the six skill directories available together.
2. Attach wireframe.png and the shared healthcare brief.
3. Choose one method, then apply the finishing prompt and review the result.

Recorded agent setting: GPT-6.1 Sol with High reasoning.
Current skill name: create-fmx-ui. The original experiment called it create-delphi-fmx-ui.
Update project/DESIGN.md references to the design guide in your project.

SHARED HEALTHCARE BRIEF

Build a mobile healthcare UI for patients. The app helps patients find doctors, view upcoming consultations, choose doctors for their health needs, and communicate with healthcare providers.

Follow the wireframe layout: doctor or symptom search, health categories, an upcoming appointment, a popular doctor list, and bottom navigation to messages and a profile. Use a simple, modern interface.

METHOD 1: GOOGLE STITCH AND HTML
Step 1: Generate the design through Google Stitch MCP.

Use Google Stitch MCP to design the Healthcare Appointment App from this wireframe and brief. Preserve the main areas and their arrangement. Follow the color rules in project/DESIGN.md and include relevant visual assets.

Step 2: Export HTML/CSS and convert to native FMX.

Export the design as HTML/CSS. Use the html-to-fmx skill to convert it into native Delphi FMX UI. Preserve the source appearance. Create the page and a reusable doctor card as .fmx and .pas pairs that remain editable in the Designer.

METHOD 2: DIRECT UI CREATION
Attach the wireframe and shared brief, then request implementation.

Use the create-fmx-ui skill to build a Healthcare Appointment App page directly from wireframe.png and this brief. Follow the wireframe layout and the color rules in project/DESIGN.md.

Store the fixed structure as Designer-editable .fmx and .pas pairs. Create a reusable doctor card for the doctor list and prepare bindings so the page can use it. Follow the existing project structure and StyleBook.

METHOD 3: SEPARATE MAPPING
Step 1: Create the component map.

Use the screenshot-to-fmx-mapping skill to map the wireframe and brief into an FMX component hierarchy. Separate fixed areas, scrolling content, bottom navigation, and the doctor list with a reusable card. Save the result as a mapping document.

Step 2: Implement the map.

Use the create-fmx-ui skill to implement the UI from that map. Follow the color rules in project/DESIGN.md. Create Designer-editable .fmx and .pas pairs, then prepare binding for the page and doctor card.

METHOD 4: AGENT-GENERATED HTML
Step 1: Generate HTML/CSS. This recorded route omitted DESIGN.md.

Convert the wireframe and Healthcare Appointment App brief into a mobile HTML/CSS page. Preserve the main areas and their arrangement. Use a simple, modern interface. Include the required assets and save the HTML/CSS source.

Step 2: Convert to native FMX.

Use the html-to-fmx skill to convert that HTML/CSS into native Delphi FMX UI. Preserve the source appearance. Create the page and a reusable doctor card as .fmx and .pas pairs that remain editable in the Designer.

AFTER ANY METHOD: COMPOSE CARDS AND ADD DUMMY DATA

Add fictional dummy data using the cards already created. Implement the cards on the UI page: create list items, attach card instances, and populate them through the existing bindings. Load demo data once when the page is created. Preserve later data bindings, including empty results.

SUGGESTED REFINEMENT FOR METHOD 4
For the next experiment; not tested in the recorded results.

Before creating HTML/CSS, read project/DESIGN.md and use its color tokens. Preserve those color rules during FMX conversion.

REVIEW
Open the page in RAD Studio Designer, then run the app. Compare the hierarchy, card appearance, scrolling area, and bottom navigation with the wireframe. Check color consistency with DESIGN.md and record the checks you actually perform.

Original follow-up prompt (English translation):
"Add dummy data using the card you have already created."

REPOSITORY
https://github.com/dondonondon/HTML-To-Delphi-FMX