Set a Visual Direction for Web UI with Codex
Start with the interface’s purpose and what people need to scan. Use the project’s components and tokens to improve hierarchy and layout in frequently used tools.
中文Install in Codex
Use Codex with access to a local project. Keep the skill directory and its companion files from the same pinned revision.
- Run git clone https://github.com/mturac/everything-openai-codex.git. From the checkout, run git checkout --detach b5057da5f42ed6b12cd3a59e89af0ccd12cff7c2.
- Copy the full skills/frontend-design-direction folder to .agents/skills/frontend-design-direction in your project, with its companion files.
- Open your project in Codex. Select the skill via /skills or $frontend-design-direction and use the example on this page.
Example task
In a fictional event check-in dashboard, a large introduction pushes the attendance list below the fold. Use current components to put pending records and filters in the first view.What to check
The design identifies what the attendant needs first and explains the layout, text hierarchy, and spacing. Review the first view, a narrow viewport, and keyboard focus.
Original SKILL.md on GitHub · Updated
Frequently asked question
Do I need to replace colors and components to improve the design?
Start with the hierarchy, density, and spacing of existing components. Add new visual elements when the task and project constraints call for them.