Iterative Web Design Workflow with GPT-6 Astra
Chase AIgo watch the original →
the gist
A three-step process for building high-quality landing pages by curating a 'taste vault' of design references, generating multiple aesthetic variations, and using real-time UI tweak sliders for micro-adjustments.
Establishing a Design Foundation
The author advocates for a cyclical, reference-heavy approach to front-end design to avoid generic AI outputs. The process begins with building a 'taste vault'—a personal repository of screenshots from platforms like Pinterest, Twitter, Landbook, and Dribbble. These references are categorized into design families such as 'technical systems,' 'product-led minimalism,' and 'vast quiet cinematic.' By feeding these screenshots into GPT-6 Astra, the model can extract specific design patterns and aesthetics rather than relying on vague prompts like 'make it look clean.'
Iterative Generation and Refinement
Once the references are established, the workflow moves to generating multiple landing page variations across different design families. The author tests these against various front-end design skills, such as 'impeccable' (66k stars) and 'T-skill' (86k stars), though notes that baseline GPT-6 Astra often produces high-quality results without external scaffolding. After selecting a preferred design family, the user generates specific variations (e.g., adjusting hero image size or dashboard layout) to narrow down the visual direction.
Micro-Adjustments and Deployment
Final polish is achieved through a 'tweaks bar' interface within the Codex desktop app, which provides sliders for real-time adjustments to headline weight, letter spacing, image brightness, and animation presets. For additional components, the author recommends sourcing elements from 21st.dev, where users can copy prompts for specific buttons, cards, or marquees. Once the design is finalized, the site can be deployed directly via the @sites command in Codex for immediate sharing and feedback.