Dual-model Sol/Codex + Claude UI advisor prompts
Dual-model Sol/Codex + Claude UI advisor prompts
Section titled “Dual-model Sol/Codex + Claude UI advisor prompts”Pin checked 2026-10-02 CST. Sources: X primary posts (Asuman, Suraj, sitin, Ahmed, Corey/Pbakaus notes, vForVicennial) + better-design.com + designmd.app + aifordevelopers DESIGN.md + Codex↔Claude plugins (jerryjrxie/claude-plugin-codex, openai/codex-plugin-cc).
Not this note: Noa’s vault Design/ folder — do not cite or sync from it. Product tokens live in the app repo (DESIGN.md, CSS vars, component library).
1. What the dual loop is
Section titled “1. What the dual loop is”| Role | Agent | Job |
|---|---|---|
| Implementer | OpenAI Sol (Codex / GPT coding agent) | Build features, apply patches, keep stack/ownership of the PR |
| UI advisor | Claude (Claude Code / chat / $claude-review) | Stronger taste + hierarchy/a11y critique; return design handback, not a second app |
Common loop seen in the wild:
- Sol ships a boring but working screen (function first).
- Attach context: screenshot(s), current CSS/tokens /
DESIGN.md, viewport, constraints. - Claude runs critique-only or redesign-spec (advisor mode).
- Sol re-ingests: tokens, layout diffs, do/don’t, acceptance criteria → implements.
- Optional:
$claude-review/ review-gate as a read-only stop before merge.
Plugin framing that matches advisor vs implementer:
- Advisor:
$claude-review,$claude-adversarial-review(read-only) — jerryjrxie/claude-plugin-codex - Implementer handoff (use sparingly for UI):
$claude-rescue— Claude may edit; scope tightly or keep Sol as the only writer - Mirror the other way:
/codex:reviewvs/codex:rescuefrom inside Claude Code — openai/codex-plugin-cc
Ahmed Yasser’s framing (paying for both): different models excel at different slices of one “redesign” objective — planning vs frontend vs final review — so splitting implement vs advise is the point (x.com/AhmedYsrrr/status/2101802591025795530).
2. Playbooks seen on X / blogs
Section titled “2. Playbooks seen on X / blogs”- Anti-slop polish pass (pasteable checklist) — Ask Claude to strip vibe-coded tells (purple gradients, Inter, emoji headings, glass, 3 icon boxes, etc.): asumandeveloper/2096567285058048413
- Works vs polished product — Skeleton loaders, semantic status colors, remove redundant copy/clutter, a11y as workflow; tell agent explicitly (Claude Code / Codex / Cursor): asumandeveloper/2103289203081519414
- Agency-level dual loop — (1) boring prototype → (2) Claude mood + brand paragraphs → (3) reference bank → (4) custom assets → (5) Figma assemble → (6) re-code with locked layout/colors/assets. Lock filenames so Claude cannot “improve” icons away: suraj_sharma14/2098328194105442760 (mirrored konig0000/2098378452772794432); Suraj reply on locking assets: 2098376588270403874
- DESIGN.md as look-contract —
AGENTS.md/CLAUDE.md= how to build;DESIGN.md= how it should look + Don’t list: sitin_dev/2101484831603658944 → VoltAgent/awesome-design-md; setup: designmd.app/guides/claude-code, aifordevelopers - Taste / anti-slop skills (still implementer-side unless you force review-only): taste-skill, Impeccable, Anthropic
frontend-design— e.g. dasepmochly/2099250709732765967; bans alone → “Claude beige” (CoreyGallon/2105304253317148861) - Cross-CLI design review abstraction — advice type (harness review / cross-model / design review) over Codex/Hermes/Claude CLIs: vForVicennial/2098153197600694721
- Better Design agent loop — load system → scope → build → review with named states + screenshots: better-design.com/guides/improve-claude-code-ui
3. Context packs people attach
Section titled “3. Context packs people attach”| Attach | Why |
|---|---|
| Screenshot(s) at target viewports (e.g. 390 / 1440) | Multimodal critique of hierarchy, clutter, contrast |
Current CSS / theme / token file or @DESIGN.md | Stop invented hex/fonts; semantic roles not just values |
| Component paths (form primitives, layout shells) | Force reuse before new patterns |
| Constraints | Protected routes/files, brand don’ts, asset filenames non-replaceable |
| States matrix | default / loading / empty / error / success / disabled / long content |
| Product goal + primary task | ”Changing plans is the primary task” beats “make it modern” (Better Design) |
| Reference bank (mood objects/textures, not only UI shots) | Suraj workflow — reduces generic fallback |
4. Pasteable skeletons
Section titled “4. Pasteable skeletons”Skeletons below are synthesized from common patterns in: Asuman anti-slop + polish posts, Suraj agency workflow, sitin/DESIGN.md + designmd.app, Better Design practical prompt, jerryjrxie
$claude-reviewvs$claude-rescue. They are labeled for role (Claude advisor vs Sol implementer).
A. Critique-only (Claude advisor — no code edits)
Section titled “A. Critique-only (Claude advisor — no code edits)”You are the UI/UX advisor only. Do NOT edit files, change the stack, or invent a new brand.
Context attached:- Screenshot(s): [paths or pasted images] at [viewport(s)]- Tokens / DESIGN.md: [path]- Current CSS / key components: [paths]- Product goal: [one user + one outcome]- Must remain unchanged: [routes, brand, assets]
Review against existing tokens and components. Prefer findings over taste essays.
Output ONLY:1. Top 5 findings (severity: P0–P2) — each with: what, why it hurts the task, evidence (region or file)2. Anti-slop checklist hits (gradients, Inter/system defaults, emoji headings, glass, 3 icon boxes, redundant subtitles, hover gimmicks, etc.)3. Accessibility: contrast, focus, keyboard, labels — concrete fails only4. Do / Don't for the implementer (max 8 bullets)5. Acceptance criteria Sol can tick (bullets, testable)
Forbidden: full app rewrite, new color system, new typefaces, replacing locked assets.B. Redesign-spec handback (Claude advisor → Sol implements)
Section titled “B. Redesign-spec handback (Claude advisor → Sol implements)”Advisor mode: redesign SPEC only. Sol/Codex will implement. Do not write application code.
Given screenshot + current tokens/components + constraints:- Primary task on this screen: […]- Density / mood: […] (or: follow DESIGN.md Product feel)- Reference constraints: reuse [token names]; do not invent hex/fonts
Return a handback package:1. Layout diff (ASCII or numbered regions: before → after)2. Token map: existing token → usage (and any NEW tokens as proposals only, with rationale — Sol decides whether to add)3. Component reuse list vs new primitive proposals (prefer reuse)4. Copy cuts: delete/shorten list (kill redundant subtitles)5. States to cover: loading/empty/error/success + viewports […]6. Acceptance criteria + non-goals
If something needs human brand judgment, list under Open questions — do not invent brand.C. Implement-with-guardrails (Claude allowed to edit, scoped)
Section titled “C. Implement-with-guardrails (Claude allowed to edit, scoped)”You may edit UI files, but stay inside this fence:
Scope: [files / routes only]Reuse: existing semantic tokens + form/layout primitives in [paths]Read @DESIGN.md (or pasted tokens) before any visual change.Do NOT: change stack, add new CSS framework, invent brand colors/fonts, replace assets named […], touch [protected].
Implement the highest-impact P0/P1 items from this critique:[paste Claude critique / handback]
After edits, return: changed files, token decisions, screenshots/checks for [states + viewports], open risks.Prefer smallest safe patch. If a change needs a new shared component, propose it — don't silently fork styles.Use when $claude-rescue / local Claude Code is the editor; still prefer Sol as default writer for the dual loop.
D. Sol-side wrap (re-ingest Claude advice)
Section titled “D. Sol-side wrap (re-ingest Claude advice)”You are Sol/Codex, the implementer. Claude's UI advice is advisory input, not a license to rewrite the app.
Ingest this handback:---[paste Claude output: findings / layout diff / tokens / AC]---
Rules:- Apply only changes that map to existing tokens/components or explicitly approved new tokens- Ignore any suggestion that invents brand, swaps type stacks, or replaces locked assets- Keep data flow and routing unchanged unless AC requires it- Implement AC items in priority order; leave Open questions for the human- Return a short diff summary + how each AC was met or deferred
If Claude's advice conflicts with DESIGN.md / tokens on disk, DESIGN.md wins — note the conflict.5. Advisor-mode patterns (keep Claude out of coder seat)
Section titled “5. Advisor-mode patterns (keep Claude out of coder seat)”| Pattern | Practice |
|---|---|
| Read-only tools | $claude-review / $claude-adversarial-review; no $claude-rescue --write for pure UI taste |
| Output contract | Tokens / layout diffs / AC / do-don’t — not a second PR |
| DESIGN.md + @ reference | Follow @DESIGN.md… Do not invent colors, fonts, or spacing (designmd.app) |
| Don’t list > palette | Roles: “brand-primary for CTAs only — never backgrounds” (aifordevelopers) |
| Lock assets by filename | Suraj: custom icons non-replaceable or Claude “improves” them away |
| Named states + viewports | Better Design: invalid/submitting/success + 390/1440 + keyboard |
| Ban ≠ taste | Font bans → next cluster (“Claude beige”); force divergence / references instead (CoreyGallon on Pbakaus) |
| Review gate | Optional Stop-hook $claude-setup --enable-review-gate — monitor credits |
Excerpt — Asuman anti-slop asks (advisor checklist):
Remove purple-to-blue gradients · Stop Inter everywhere · Remove emojis from headings · Reduce glassmorphism · Stop 3 icon boxes in a row · Fix inconsistent spacing · Replace generic buzzword copy …
— @asumandeveloper
Excerpt — Better Design practical (when Claude is allowed to edit under system load):
Improve the billing settings flow… Load the existing design system… Reuse form primitives and semantic tokens… Include invalid, submitting, success… Test keyboard and 390px/1440px… Return changed files, checks, screenshots…
— better-design.com
6. Anti-patterns
Section titled “6. Anti-patterns”- Claude rewriting the stack (new framework, CSS reset, “migrate to X”) — advisor job is judgment, not rescue-the-repo
- Inventing brand — new palette/type from vibes when tokens/
DESIGN.mdexist - Ignoring existing tokens — hex/
bg-[#…]bypass; fix with lint + DESIGN.md roles (Medium tokens story pattern) - “Make it prettier / modern” alone — zero information → purple Inter slop
- Ban-only taste — Inter ban → beige/next-default; need references + positive direction
- Letting Claude replace custom assets during re-code
- Screenshot-as-proof without states — one viewport hides empty/error/focus fails
- Review gate unattended — long Claude↔Codex loops burn credits
- Collapsing dual loop into one agent — loses the Sol-builds / Claude-judges split people pay for
7. Sources
Section titled “7. Sources”X (primary)
Section titled “X (primary)”- asumandeveloper — anti-slop Ask Claude list
- asumandeveloper — works vs polished (skeletons, semantic color, clutter, a11y)
- suraj_sharma14 — boring prototype → Claude mood → reference bank → re-code
- konig0000 — same workflow mirror
- suraj — lock custom assets by filename
- sitin_dev — awesome-design-md / DESIGN.md
- dasepmochly — taste-skill anti-slop for Claude/Cursor/Codex
- CoreyGallon — Claude beige / Impeccable skill engineering notes
- AhmedYsrrr — paying for Codex + Claude; split strengths
- vForVicennial — design review abstraction over Codex/Hermes/Claude
Blogs / repos
Section titled “Blogs / repos”- Better Design — improve Claude Code UI
- designmd.app — DESIGN.md + Claude Code
- AI For Developers — DESIGN.md for Claude Code
- designmd.directory — Claude Code workflow reference
- jerryjrxie/claude-plugin-codex (
$claude-reviewvs$claude-rescue) - openai/codex-plugin-cc (mirror)
- VoltAgent/awesome-design-md
- Anthropic frontend-design skill
- Few X posts show a literal Sol↔Claude ping-pong transcript with pasteable dual prompts; most are anti-slop checklists, DESIGN.md governance, or plugin review/rescue modes. Skeletons A–D are synthesized from those patterns (labeled in §4).
- “OpenAI Sol” is the Codex coding model family; public playbooks still say Codex / GPT coding agent more often than “Sol” by name.
- UX Planet Claude Design critique article was blocked to this research box; phase prompts (a11y / hierarchy / copy / states) are only partially known from search snippets — treat as secondary until re-fetched.
- No citation of Noa’s vault
Design/(by ask).