claire vo
← back to the notebook

CXO.dev assessment polish, Figma colors, and reusable skills

Spent the morning simplifying CXO.dev’s AI-readiness assessment and making the results easier to understand. Cleaned up the Figma colors and started packaging repeat engineering work into Codex skills. Also kept working on ChatPRD’s Product Intelligence prototype and How I AI’s episode archive, including duplicate URLs and making the full catalog easier to find in search. A lot of making things we already have work better.

Codex + Figma

Organize Figma colors into reusable light and dark themes with Codex

A palette tells you which colors you have. It doesn’t tell you which one to use for a button, a background, or an error message. I gave Codex a copy of our Figma palette and asked it to organize the colors around those jobs.

These are called semantic tokens: a name describes what a color does, so the same background can use a light color in light mode and a dark one in dark mode. Through the Figma connector, Codex linked those names to our existing brand colors, set up both modes, and rebuilt the swatch sheet.

It created 99 tokens and connected the swatches to them. I could review how the colors should be used instead of manually creating and binding every variable.

Color swatches connected to matching light and dark interface fragments, with a dithered eyedropper.
figma-color-tokens-bitmap.png
Color swatches connected to matching light and dark interface fragments, with a dithered eyedropper.
Promptsemantic-figma-palette.md
Work in this copied Figma palette. Inspect its existing primitive and semantic color variables before making changes.

Organize colors by their jobs: backgrounds, text, borders and focus, actions, feedback, indicators, data visualization, and workflow states. Include a five-step good-to-bad scale and matching subtle backgrounds.

Reuse the existing brand colors through variable aliases. Support light and dark modes, and reuse existing semantic variables where they already fit.

Update the copied swatch sheet so the visible examples are bound to their semantic variables. Read back the result and verify the number of tokens, light/dark aliases, unbound swatches, remaining primitive labels, and clipped or overflowing content.

Report what changed and any unresolved naming or accessibility questions.
Codex + GitHub + Node.js

Build and test a Codex skill that checks a codebase before you start coding

I wanted to reuse the checks we do when starting work on a codebase: can an agent figure out how to install it, run it, and test a change? A Codex skill is saved instructions, sometimes with helper scripts, that an agent can use again. This was one of a set I made for repeat engineering work.

  1. I asked Codex to turn those checks into a skill, including scripts to inspect the project and tests using sample repositories.
  2. I had a second agent try the skill on our own site. It found a test command that existed but wasn’t running in the automated checks.
  3. That trial also exposed a gap in the skill: it missed instructions in the parent repository. Codex fixed the scanner and added a test for that case.

The next time I start work on a project, I can ask Codex to run that skill. The instructions and checks are already there, including what we learned from trying it on our own code.

Bitmap software modules arranged around a test tray, with a green check marking the selected module.
tested-agent-skills-pixel.png
Bitmap software modules arranged around a test tray, with a green check marking the selected module.