DEV Community: Mariner

After 8 Months with Codex CLI, Here Is My Advanced AI Coding Workflow

Mariner — Tue, 23 Jun 2026 09:19:42 +0000

Introduction

Hi, I’m Haijun, a Full-Stack Developer | AI Enthusiast | Indie Developer.

It has been a while since I last wrote an article.

I have been genuinely busy recently, mainly pushing forward AI projects inside the company. From requirement breakdown, solution design, frontend and backend development, to Agent workflows, RAG, API integration, and production debugging, I have basically been carrying many parts forward on my own. Fortunately, I have had a reliable teammate fighting alongside me: Codex.

Since last year, my feelings about AI tools have become stronger and stronger: things are changing incredibly fast.

Last year, we already felt that a major AI update every four or five months was pretty intense. Now it is different. Many capabilities are reshaped almost every one or two months. Models are changing, tools are changing, and the way we build software is changing as well.

In the past, we talked about whether AI could help us write code. Now the more practical question has become: can you turn AI into a stable, controllable, and reusable engineering workflow?

I have been exploring Codex CLI for about 8 months. During this time, I have used it to build quite a few projects and stepped into many traps.

Sometimes it is very smart. Sometimes it does strange things. Sometimes it is unbelievably efficient. But if you do not give it boundaries, it can also make things unnecessarily complicated.

So in this article, I want to share the advanced Codex CLI workflow I have summarized over the past 8 months. This is a practical AI coding productivity system that I have repeatedly used, adjusted, and stabilized in real projects.

A Fixed Engineering Workflow

Task context, AGENTS.md, configuration, MCP, Skills, and automation are the key paths to improving Codex stability.

Project rules go into AGENTS.md

Personal default configuration goes into ~/.codex/config.toml

Repeated tasks become Skills

External context is handled by MCP

Complex tasks should be planned before execution

Frontend tasks should use screenshots + Playwright feedback loops

Risky tasks should be controlled through review / diff / sandbox

Stable tasks can be automated with codex exec

Exploring the Capability Boundaries of Codex CLI

Local Code Agent Capabilities

Codex CLI is not just a tool for generating code snippets. It can read repositories, edit files, and run commands inside the directory you choose.

New feature development

Bug investigation

Frontend page implementation

Component refactoring

API integration

Test coverage

Code review

Documentation generation

Script automation

Project structure understanding

Technical debt analysis

The more vague, cross-module, or high-impact a task is, the more you should first let Codex plan, locate relevant files, and confirm boundaries before asking it to modify code.

Enter Plan mode first. Let Codex collect context, ask questions, and form a plan before implementation.

Understanding Images and Rebuilding Frontend Pages

Codex officially supports adding images to the initial prompt with -i or --image. You can attach one or more images. Multiple images can be separated by commas or passed repeatedly. Common formats such as PNG and JPEG are supported.

codex -i ./screenshots/home.png "Please analyze this frontend screenshot and implement the corresponding page in the current project."

The boundary here is important: images provide the visual target, but they do not replace engineering context.

If you only provide one screenshot, Codex can usually produce an approximate result. If you provide multiple page states and detailed screenshots, the reconstruction becomes much more stable.

A more efficient way to use it:

codex \
  --sandbox workspace-write \
  --ask-for-approval on-request \
  -i ./screenshots/home-desktop.png \
  -i ./screenshots/home-mobile.png \
  "Please implement the homepage in the current project based on these two screenshots.

First, read the project structure and confirm the routing, component directories, styling approach, design system, and existing page implementations.
Then analyze the layout, component hierarchy, spacing, typography, colors, and responsive rules in the screenshots.
During implementation, prioritize reusing existing components, tokens, Tailwind configuration, and project conventions. Do not create a separate visual style.
After completion, run lint, typecheck, and build.
Finally, explain: which files were changed, which parts were inferred from the screenshots, and which visual differences still need manual confirmation."

Playwright Visual Feedback Loop

We can combine Codex with Playwright, allowing it to open a real browser, compare the implementation with the reference image, and iterate on layout and behavior across different screen sizes.

A complete and efficient workflow looks like this:

Reference image → Implement page → Start local server → Open browser → Compare screenshots → Fix → Check again

The prompt can be written like this:

codex -i ./references/home.png "
Please implement the page shown in this reference image and use Playwright for visual verification.

Requirements:
1. First confirm how to start the local development server for this project.
2. After implementing the page, start the service.
3. Use Playwright to open the page and take a screenshot.
4. Compare the reference image with the current screenshot and fix obvious differences.
5. Check at least two breakpoints: desktop and mobile.
6. Finally, output the difference summary and verification result.
"

My Practical Workflow

Screenshot-to-Page Workflow

Do not let it start coding immediately. First, ask Codex to analyze the image elements.

codex -i ./screenshots/home.png "
Do not modify code yet.
Please analyze this screenshot and combine it with the current project structure. Output:
1. Page structure
2. Component breakdown
3. Mapping to the existing styling system
4. Components that should be added or reused
5. Screenshot details that may be unclear
6. Implementation plan
"

Then let it implement the plan:

codex resume --last "
Implement the page according to the previous plan.
Make small incremental changes and prioritize reusing existing components.
After completion, run lint, typecheck, and build.
If there are visual differences, explain the reason.
"

Automatically Comparing the Current Result with the Target Image and Fixing Differences

You can first let Codex implement a version based on the image, then use the following prompt to let it automatically compare and fix the differences.

codex resume --last \
  -i ./references/target.png \
  -i ./screenshots/current.png \
  "The first image is the target design. The second image is the current implementation.
Please compare the differences and only fix visual issues. Do not refactor unrelated code.

Focus on:
1. Overall page proportions
2. Top spacing
3. Title font size and weight
4. Card border radius, shadow, and border
5. Button size and position
6. Mobile breakpoint
7. Whether there is horizontal overflow

After completion, run the checks and output the changes made."

Bug Investigation Workflow

This step is very important. If it is not handled properly, the whole system can become messy, and the more you change, the more chaotic it gets.

We can provide the error logs and the affected scope. The clearer the context, the more stable Codex’s understanding and modifications will be. Once there is a defined scope, it is less likely to make random changes.

The Codex logs are in History.log.

Please investigate and fix this issue based on the logs.

Working method:

1. Do not modify code first.

2. Find potentially related pages, components, state management, API requests, and style files.

3. Explain the 2-3 most likely causes.

4. If the project can be run, try to reproduce the issue.

5. After confirming the root cause, make the smallest possible change.

6. Run relevant checks after the change.

7. Finally, explain the root cause, changed files, and verification method.

Large Refactoring Workflow

Especially when modifying legacy projects, never let AI directly rewrite everything. Legacy projects are already complex enough, and AI also needs time to understand them.

I usually split the work into four layers. This is much more stable.

Understand the current state -----> Identify risks -----> Create migration plan -----> Execute in batches

The prompt can be written like this:

codex "
I am preparing to refactor the component structure of the current project. Do not modify code yet.

Please output:
1. Current component directory structure and main responsibilities
2. Duplicate code and possible abstraction points
3. High-risk files
4. Recommended target directory structure
5. Phased migration plan
6. Verification method for each phase
7. Areas that should not be changed right now
"

Self-Review Workflow

Codex CLI has /review, which can review the workspace, a commit, or a branch-based diff. According to the official description, it reads the diff as an independent reviewer and outputs prioritized, actionable issues without modifying the working tree.

You can also use your own custom review standard, or use Codex review.

My prompt looks like this:

codex "
Please review the current uncommitted changes.
Focus on:
1. Whether there are behavioral regressions
2. Whether there are type risks
3. Whether responsive behavior is broken
4. Whether unrelated files were modified
5. Whether there are maintainability issues
6. Whether necessary tests are missing

Only output high-risk issues and suggested fixes. Do not modify code.
"

MCP-Enhanced Workflow

We can use external MCP servers to extend Codex’s capabilities.

For example, if we want to implement designs from design files, we can use Figma MCP. If we want to develop based on the latest documentation, we can use Context7 MCP.

Installation and usage are also simple:

codex mcp add context7 -- npx -y @upstash/context7-mcp

Skills Workflow

For prompts that we use frequently, we can extract them into Skills.

In real development, you can directly use these Skills and only provide the variable parts. Codex can then develop based on the workflow you previously extracted.

Skills can be divided into system-level and project-level Skills.

If a Skill is general-purpose, you can put it globally. If it is only frequently used in the current project, you can package it as a Skill and place it inside .agents/skills in your project.

When using Codex, it can recognize your intent and call the corresponding Skill. You can also explicitly tell it which Skill to use.

For example:

codex "
Use the haijun skill to implement this page.
"

Final Thoughts

I want to share one real feeling.

Many people feel that using AI to write code is unstable. The problem is not necessarily the tool itself. The problem may be that we are still using it as if we are simply “submitting requirements,” instead of managing it the way we would manage a teammate.

If you do not provide project background, it can only guess.

If you do not provide boundaries, it may modify things randomly.

If you do not provide verification standards, it does not know what “done” means.

If you do not make the final judgment yourself, it may hand you a solution that seems runnable but is not actually reliable.

The upper limit of AI depends on the professional ability and cognitive ability of the person using it.

I used Cursor for a long time before. Later, I also used Claude Code for a while. Claude Code is indeed very powerful. In many cases, it is impressive. But for users in China, the restrictions are quite obvious, and the stability and long-term sustainability of using it were not ideal for me.

Later, I gradually switched to Codex CLI. I have now used it for more than half a year. I can even say that it has become one of the most important collaboration tools in my daily development work.

Over the past few months, it has helped me complete many things: writing pages, modifying components, investigating bugs, refactoring projects, organizing architecture, designing Agent tools, optimizing RAG pipelines, generating documentation, and performing pre-launch checks.

It is not just helping me “write code.” It is more like helping me reorganize many parts of the development process.

But the premise is: you need to give it a workflow.

So I am becoming more and more certain about one thing:

In the future, the real gap will not come from who knows how to use a specific AI tool. It will come from who can turn AI tools into their own engineering system, content system, business system, and even a personal capability amplifier.

Nuxt

Mariner — Fri, 03 Jan 2025 02:49:43 +0000

2024 Nuxt3 Annual Ecosystem Summary🚀

Mariner — Tue, 24 Dec 2024 06:25:56 +0000

Hello everyone, I am a developer from China. My Chinese name is Haijun. I love to share technology and research cutting-edge technology information. I have been developing the Nuxt3 system all year, so I have learned about the various applications of Nuxt3. This is my first article. Next, I will take you to understand the overall ecological development of Nuxt3 in 2024, from the UI library, request library, tool library, state management, internationalization, icon library, form processing, Nuxt official module, and data visualization. In this way, we can build a robust Nuxt3 application, and at the same time, we can make good use of Nuxt's SEO key to improve the display of our own projects and bring ourselves more users.

UI

Naive UI

Recommendation: Naive UI is a lightweight and full-featured UI component library designed for Vue 3 and Composition API. It has a simple and modern style and supports dark mode. It is suitable for building modern backend management systems and front-end applications.
Document address: NaiveUI official document

Element Plus

Recommendation: Element Plus is the Vue 3 version of Element UI, which provides a set of high-quality UI components with a simple interface and elegant design, suitable for various backend management systems and medium and large projects.
Document address: Element Plus Official Document

Vuetify 3

Recommendation: Vuetify is a powerful UI component library that provides a large number of UI components and deep customization options. It is based on the Material Design design specification and is suitable for building beautiful Web applications.
Document address: Vuetify 3** Official Document

Request library

Axios

Recommendation: Axios is a Promise-based HTTP client that supports browsers and Node.js. It can simplify API requests when used with Nuxt3's useFetch and is easy to use and configure.
Document address: Axios official document

Vue Use Fetch

Recommendation: This is a request library that works perfectly with Nuxt 3. Based on the useFetch hook encapsulation, it provides a more flexible API request and state management method, and supports caching, error handling and other functions.
Document address: Vue Use Fetch** Fetch

Tool Library

Lodash
Recommendation: Lodash is a very powerful JavaScript tool library that provides many useful functions to simplify common operations, such as arrays, objects, functions, etc. It is very efficient when dealing with complex data structures.
Document address: Lodash official document

VueUse

Recommendation: VueUse is a set of practical function libraries based on Vue 3 Composition API, which provides a large number of functions, including state management, responsive references, event handling, etc., which can significantly improve development efficiency.
Document address: VueUse Official Document

Tailwind CSS

Recommendation: Tailwind CSS is a functional class-first CSS framework suitable for building responsive and highly customized user interfaces. It can significantly improve development efficiency when used with Nuxt 3, especially in terms of rapid layout and design.
Document address: Tailwind CSS Official Document

Day.js

Recommendation: Day.js is a lightweight date processing library, API compatible with Moment.js, but smaller in size. Suitable for scenarios that need to process date and time.
Document address: Day.js Official documentation

State Management

Pinia

Recommendation: Pinia is the official state management library recommended by Nuxt 3. It is a responsive state management tool for Vue 3, providing better TypeScript support and performance optimization. It is suitable for replacing Vuex and is suitable for use in Nuxt 3 projects.
Document address: Pinia Official Document

Vuex 4

Recommendation: Vuex is the state management library of Vue, and Vuex 4 is the version that supports Vue 3. If you are used to Vuex and have already used Vuex in your project, you can continue to use it, but Pinia is recommended for new projects.
Document address: Vuex official document

Internationalization

Vue I18n (unplugin-vue-i18n)

Recommendation: Vue I18n is the official internationalization plug-in of Vue.js, supporting multiple languages and regionalization. It is suitable for Nuxt projects that need to support multiple languages, and is very convenient to use with Nuxt 3.
Document address: Vue I18n official document

Nuxt I18n (nuxt-i18n-micro)

Recommendation: Nuxt I18n is a plug-in specially provided by Nuxt for internationalization. It supports multi-language switching, routing internationalization and other functions. It is particularly suitable for scenarios that require internationalization in Nuxt 3 projects.
Document address: Nuxt I18n Official Document

Chart Library

Heroicons

Recommendation: Heroicons provides a set of free SVG icons with a simple and modern style, suitable for use with Tailwind CSS and Nuxt 3.
Document Address: Heroicons Official Document

yesicon

Recommendation: yesicon provides 245,324 high-quality vector icons from the world's top design team.
Document address: yesicon

Form processing

VeeValidate

Recommendation: VeeValidate is a powerful Vue 3 form validation library that supports custom validation rules, asynchronous validation, etc., and can efficiently process form validation logic.
Document address: VeeValidate Official Document

Nuxt official module

@nuxtjs/auth-next

Recommendation: This is an authentication module officially provided by Nuxt.js, which supports common authentication methods such as OAuth and JWT, and is suitable for Nuxt applications that require authentication. It is compatible with the @nuxtjs/axios module.
Document address: @nuxtjs/auth-next official document

@nuxtjs/pwa

Recommendation: This is the PWA (Progressive Web App) module officially provided by Nuxt.js, which can easily convert your Nuxt application into a progressive web application, supporting offline caching, push notifications, etc.
Document address: @nuxtjs/pwa official document

@nuxt/content

Recommendation: This module allows you to easily integrate content management (such as Markdown, YAML files, etc.) into Nuxt for building static websites or blogs. It supports real-time editing, dynamic data loading and other functions.
Document address: @nuxt/content Official Document

@nuxtjs/sitemap

Recommendation: This module can automatically generate XML Sitemap for the site, which is suitable for SEO optimization and helps search engines better index your Nuxt application.
Document address: @nuxtjs/sitemap Official Document

Nuxt Image

Recommendation: Nuxt Image is a module specifically provided for Nuxt.js, which can automatically optimize the loading, size and format of images, helping to improve website performance and loading speed.
Document address: Nuxt Image Official Document

Data visualization and chart library

ECharts

Recommendation: ECharts is an open source chart library based on JavaScript that supports rich data visualization charts, especially suitable for large-scale data visualization display, and is suitable for scenarios with high interactivity and high performance requirements.
Document address: ECharts Official Document

D3.js

Recommendation: D3.js is a powerful JavaScript data visualization library that allows you to create interactive charts through HTML, SVG and CSS. It is very suitable for charts that require high customization.
Document address: D3.js Official Document

Vega

Recommendation: Vega is a data visualization library that configures charts based on JSON format, supports interactive charts and maps, and is suitable for building complex data visualization applications.
Document address: Vega Official Document

End of the article

This is the end of the sharing of Nuxt3 ecology. If you think the article is good, you can follow me and share more about the latest and most complete dynamics of Web later.