Asking any AI to "make a nice website" usually gets you the same generic template. The fix is to give the model three things: design knowledge, your real references, and a way to check its own output. Here is the full setup in Codex with GPT-6 Astra, using free, open tools.
What you need
GPT-6 Astra. OpenAI's model, released on 3 September 2026. It is in ChatGPT Plus, Pro, Business and Enterprise, and in the API as
gpt-6-astra. Enterprise admins have to switch it on. OpenAI announcementCodex (the Codex app or Codex CLI), signed in with your ChatGPT account. Skills and MCP servers are added here, not in the normal ChatGPT chat window.
Node.js. Playwright MCP needs Node 18 or newer. Taste Skill asks for Node 22 or newer, so install Node 22.
Chrome, Edge or Chromium installed (Taste Skill uses it for its browser check).
A Figma account on a Starter, Professional, Education, Organization, Government or Enterprise plan. Figma help
Step by step
Run these from inside your project folder.
1. Pick GPT-6 Astra as the model in Codex. Select it from the model picker in the Codex app or CLI.
2. Install Emil Kowalski's design engineering skills. Emil Kowalski is a design engineer. His open repo has 15 skills, including emil-design-eng (motion and design rules), animate, review-animations, apple-design and break-ui. GitHub
npx skills@latest add emilkowalski/skills -a codex3. Install Impeccable. This is Paul Bakaus's design skill for typography, colour, spacing and layout. It adds commands like audit, critique, polish, typeset and layout. GitHub
npx skills add https://github.com/pbakaus/impeccable --skill impeccable -a codex4. Install Taste Skill. This one pushes the agent away from the generic "AI template" look. The main skill is design-taste-frontend. It is MIT-licensed. GitHub
npx skills add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend -a codexThe -a codex flag tells the open skills installer to install for Codex. Add -g if you want the skills available in every project.
5. Connect Figma MCP. This lets Astra read your actual frames instead of guessing.
In the Codex app: Plugins (top left) > + next to Figma > Install Figma > Allow access.
In the Codex CLI:
codex mcp add figma --url https://mcp.figma.com/mcpSign in to Figma when it asks.
6. Connect Playwright MCP. This gives Astra a real browser so it can open the site, click around and take screenshots.
codex mcp add playwright npx "@playwright/mcp@latest"7. Give Astra the build prompt. Paste this into Codex, with your own Figma link:
Build this website as a working front end.
Design source: [paste your Figma frame link]. Use the Figma MCP to read the frames, text styles, colours and spacing. Match the design. Do not invent a new layout.
Use the installed skills:
- design-taste-frontend for overall art direction, so it does not look like a generic AI template
- impeccable for typography, spacing, hierarchy and layout
- emil-design-eng for animations: short, purposeful, and respecting reduced motion
Stack: [e.g. Next.js + Tailwind]. Make it responsive for 375px, 768px and 1440px.
When the first version runs locally, use the Playwright MCP to:
1. Open each page at all three widths and take screenshots.
2. Compare the screenshots against the Figma frames.
3. Click every button, link and form, and check the browser console for errors.
4. List everything broken or off-design, fix it, then test again.
Repeat the test and fix loop until nothing is left on the list, then give me a short report of what you changed.8. Do a final review pass. Once it is built, ask:
Run the impeccable audit and critique on the site, then use review-animations and break-ui. Show me the findings as a table before you change anything.Review the table and approve the fixes you agree with.
No Codex? OpenAI says Astra can also build and host simple sites from one prompt with Sites in ChatGPT, without this setup.
Good to know
Cost. Astra usage in ChatGPT plans comes out of your plan's allowance, and you can buy credits. API pricing is $10 per million input tokens and $50 per million output tokens.
Not fully automatic. Playwright lets the agent see and test the page, but you still need to review the result, especially copy, accessibility and mobile layout.
Third-party skills are code. Skills and MCP servers run on your machine with your permissions. Read a skill's files before installing, and only connect accounts you trust.
Licences. Check font and image licences before you publish.
Sources
Found this useful? Follow @kevinsingh.me on Instagram for a new AI tool every day, and subscribe so you don't miss the next one.