3 design skills for Codex
Tired of ‘make it look better’: Impeccable, 21st Design and UX Audit turn it into specific changes, or one line with no skills.
3.5K saves on X, as of Posted
Line to add to your task
Make the best decision to improve UX, DX, and AX—without breaking existing functionality.Next Add it to the end of your task in Codex.
Want Codex to build good-looking pages without having to keep saying “make it look better”? Try these three design skills together:
- Impeccable (https://impeccable.style/). Use it when the page is built but something still feels off. Too bland? Use bolder. Too cluttered? Use distill. Almost finished? Use polish to refine the details. It turns “make it look better” into specific design changes Codex can make.
- 21st Design. A skill I put together that gets Codex to look for components and interaction references on 21st.dev before building a page. I’d suggest packaging your own go-to component library into a skill, too. Focus on the one or two sections that carry the page, such as a hero, a set of pricing cards or a product showcase, then adapt them to your brand, content and existing project.
- UX Audit. A good-looking screenshot isn’t enough. Have Codex open the browser and actually use the page: click buttons, fill out forms, switch to a mobile viewport and complete the user journey. Find buttons that do nothing, confusing error messages and steps where it’s unclear what to do next. Get reproduction steps and specific fixes.
If you can’t be bothered setting up skills, start by adding this line to the end of your task. It asks the agent to weigh the user experience, the developer experience and how easily the next agent can pick up the work.
