SetFN
SetFNDocs2026년 9월 18일

Checking the Frontend Sample

Building the API automatically generates a sample frontend folder and files in your workspace. You can use this output as-is, or refine it into a screen tailored to your team with the help of AI.

Sample frontend folder

index.html — Initial screen

A basic CRUD screen that handles listing, viewing details, creating, updating, and deleting all in one screen. It comes with style.css already applied, so it's provided as a ready-to-use, complete form.

index.html initial screen

If the workspace blocks scripts, you can enable them by clicking **Always allow this file**. index.html initial screen

test.html — API test screen

Like Swagger, Postman, or Insomnia, this is a test screen where you can call the automatically generated API directly and check the response.

test.html API test screen

style.css / README.md

FilePurpose
style.cssCommon styling for the sample screens.
README.mdA document explaining how to use the API. It covers the default endpoints, the list/input form column layout, and the request/response fields and record schema for each API.

By modifying index.html and style.css as you like, you can turn the automatically generated default screen into a website tailored to your team.

Refining index.html with AI

Since README.md contains a detailed breakdown of the table structure and API spec, you can hand this file directly to an AI (Claude, ChatGPT, etc.) and immediately request logic or design changes to index.html without any additional explanation.

  1. Copy the contents of README.md and pass them to the AI.
  2. Describe the screen layout or design you want. (e.g., "Show the list as cards, and use different colors depending on the status value")
  3. Overwrite the index.html in the same folder with the version the AI revised for you.
  4. Use test.html to verify the API behavior again.

Using the finished screen

Once you've refined index.html into a system tailored to your team, you can use it in two ways.

MethodDescription
Internal team useOpen it with Folder web view inside the workspace folder, and use it as an internal data management screen with your team members. → Building an internal team web service
Public external useDeploy it via WebSpace and use it as a service screen exposed to the public. → Building an external web service