Inspiration
Building a website for a real business usually starts with scattered information: branding documents, customer profiles, product details, business goals, reference websites, and sometimes a detailed product requirements document. Even with AI, organizing all of that context and repeatedly explaining it can take a significant amount of time.
I wanted to create a reusable Codex skill that could transform this information into a structured website-building workflow. Instead of starting from a generic template or an empty page, the skill begins by understanding the business and studying the visual references selected by the user.
What It Does
ContextCraft is a reusable AI coding skill for generating tailored business websites with Codex and GPT-5.6.
The user can provide:
- Business documentation and objectives
- Branding guidelines
- Ideal customer information
- Products or services
- Website references
- An optional product requirements document
The skill organizes this information, analyzes the references, plans the website, generates the implementation, opens it in the browser, and helps evaluate the result.
Website references are treated as design direction rather than content to copy. The goal is to understand useful patterns—such as hierarchy, spacing, navigation, layout, and visual style—and adapt them to the identity and needs of the user’s business.
A PRD is optional. Users with precise requirements can provide one, while users who are still exploring their idea can rely on the business context and reference websites.
How I Built It
I collaborated with Codex throughout the complete development process. Codex helped me structure the skill, refine its instructions, test different workflows, diagnose failures, and improve how the skill uses business context and website references.
I used GPT-5.6 for tasks that required stronger design and implementation reasoning. I also experimented with different reasoning levels to understand when a higher-capability model creates meaningful improvements and when a faster model is sufficient.
The workflow was developed iteratively:
- Provide Codex with the business context.
- Add branding, customer, and product information.
- Supply reference websites for visual direction.
- Optionally include a detailed PRD.
- Let the skill analyze and plan before generating code.
- Build the website with Codex and GPT-5.6.
- Open and test the result in a real browser.
- Identify recurring problems and convert useful corrections into reusable improvements.
The skill can preserve lessons from recurring failures. When the same problem is likely to affect future projects, the workflow can turn the correction into a durable improvement. However, it avoids modifying the skill for every isolated AI mistake, since overcorrecting for one-time failures can make a reusable workflow less reliable.
Challenges
One of the main challenges was balancing creativity with consistency. If the instructions were too general, the generated websites could look generic. If they were too rigid, every result could begin to look the same. The solution was to separate permanent workflow rules from project-specific business and design context.
Another challenge was managing context and token usage. Website generation benefits from strong reasoning, but not every step requires the most expensive model. I learned to use higher reasoning for architecture, visual decisions, and major implementations, while using lighter reasoning for smaller corrections.
Browser testing was also essential. A website can appear correct in code while still having visual or usability problems. Testing the generated result in the browser helped reveal issues with layout, responsiveness, navigation, and content hierarchy.
Accomplishments that I’m proud of
I am proud that ContextCraft is not just a one-time website generator. It is a reusable Codex skill that can adapt to different businesses, products, customers, branding systems, and design references.
The project successfully turns scattered business information into a structured workflow for planning, generating, testing, and improving a website. It can use reference websites as visual direction without simply copying their content or identity.
I am also proud that the skill includes a continuous improvement process. It can identify recurring problems and preserve useful corrections for future projects, while avoiding unnecessary changes based on isolated AI mistakes.
Most importantly, I built and tested a complete working workflow with Codex and GPT-5.6, from the initial business context to a functional website that can be opened and evaluated in a real browser.
What I Learned
This project taught me that effective AI website generation depends less on a single prompt and more on a repeatable system for collecting context, planning, building, testing, and improving.
I also learned that reference websites become much more useful when the AI understands why the user selected them. A reference may be valuable because of its navigation, typography, product presentation, structure, or visual atmosphere. Capturing that intent produces more relevant results.
Most importantly, I learned how Codex can become more than a code generator. With a well-designed skill, it can act as a reusable development workflow that carries project context, follows a structured process, tests its work, and improves over time.
What’s Next
Future improvements could include automated visual comparison, stronger accessibility checks, reusable industry-specific templates, performance testing, and more structured evaluation of generated websites across desktop and mobile layouts.
My goal is to make ContextCraft a practical system that helps entrepreneurs, creators, and developers move from business knowledge and inspiration to a working, personalized website with less repetitive work.
Built With
- css
- github
- gpt-5.6
- html
- javascript
- node.js
- openai-codex
- playwright
Log in or sign up for Devpost to join the conversation.