Task 01 Task 01 Quick screen draft creation practice guide
📥 Practice Input
- •
day6_meeting_notes.md(meeting minutes)
💾 Practice output (Output)
- •
index.html
1. Story and practice background
A junior at a startup was tasked with developing a reservation management system. The plan had a colorful calendar and list view for each reservation status, but when I opened the local editor and saw an empty HTML file, I felt at a loss. The day passed by just thinking about how to create the layout grid and how to separate the CSS style files.
When you first start development, drawing the initial structure (boilerplate) and component layout skeleton is very inefficient and demoralizing. In this exercise, you will learn how to explain a screen planning specification (Figma layout) to Codex in text and generate a workable responsive screen draft and component code in just a few seconds, dramatically speeding up the initial development process.
2. Learning objectives
- Using AI, screen drafts (HTML/CSS) can be automatically created from requirements specifications.
- Planning contents and layout definitions can be converted into a screen structure that operates in an actual browser.
- By understanding the basic boilerplate structure of a project, you can quickly begin the first steps of development.
🛠️Practical guide to follow along
- Create file for practice: Click the download button below
day6_meeting_notes.mdfileautomation/Save it within the folder. - Codex Draft Delegation: Build the source code by copying and sending the **Codex request prompt** below into the Codex Client prompt input window.
- Review and save results: Check in the web browser that the output HTML file and CSS file structure are properly created and that the dashboard three-tier card layout and navigation structure are set correctly.
Download practice materials
Codex request prompt
Task 01 Prompt
Based on the layout specifications provided, please create a draft HTML markup and CSS grid style for a responsive dashboard screen where reservation status can be viewed. Please suggest an initial project structure, including a left navigation bar and waiting/approved/completed card components to indicate booking status.
4. Example results
Codex analyzes the meeting transcript and outputs normalized data entity mappings and a Mermaid ERD script as shown below.
| file name | Description | main components | relationship information |
|---|---|---|---|
| index.html | Dashboard screen skeleton markup | Sidebar, Header, Stats Cards | Linked to layout.css |
| layout.css | Responsive CSS Grid Style | Grid Columns, Flex Box Layout | Applies to index.html |
5. AI utilization points
- Boilerplate automatic creation: Provides an appropriate basic HTML structure and responsive CSS Flexbox/Grid structure framework so that you do not get tired of configuring the development environment.
- Component abstraction: Generates elements such as ‘state summary card’ or ‘table list’ in the text description by standardizing them as class-level components.