Jonathon's AI Wiki

Codex + MagicPath Design Workflow — Skills.sh + Make Interfaces Feel Better + Mobbin MCP Chain

8 min read

Source: raw/New_Codex_Design_Workflow_Makes_Codex_Better_Than_Most_Designers.md (YouTube CPg5UYbYLhA, 2026-05-19) — single-creator walkthrough showing four tools composed inside Codex CLI to take a one-line landing-page prompt to a deployed Vercel preview.

This article documents a four-tool composition workflow that turns a single sentence (“design me a landing page for a SaaS that helps sleep apnea patients”) into a polished, mobile-responsive, custom-logo-and-iconography landing page deployed to a Vercel preview URL — all from inside one Codex CLI session. The chain layers a visual canvas, a skill-discovery surface, an opinionated design-principles skill, and an inspiration-retrieval MCP, each invoked in natural language without leaving the Codex chat.

The 4-tool composition

The workflow runs as a linear pipeline inside one Codex chat:

  1. MagicPath.ai acts as the visual previewer — an infinite-canvas surface (“Figma for Codex”) where Codex renders the design and the user inspects it. Installed as a Codex skill via in-browser auth.
  2. skills.sh find skills is the second-order tool — a skill that surfaces other skills. The author uses it to discover the next step in the chain rather than knowing it ahead of time.
  3. Make Interfaces Feel Better (Jacob Krehel) is the design-principles enforcement layer. ~16 documented core principles get applied to whatever MagicPath has on the canvas.
  4. Mobbin MCP is the inspiration-retrieval surface — pulls live design references from production sites (Mixpanel, Visitors, Wrangle in the demo) so Codex can redesign sections against real-world hero patterns.

A final “push to a custom domain” step takes the MagicPath canvas to a Vercel preview URL — still inside Codex.

1. MagicPath.ai — skill install + canvas preview

  • What it is. A web app at magicpath.ai that exposes an infinite-canvas previewer for whatever Codex is building. Acts as a Figma-style surface where designs render visually rather than as raw code.
  • Install (one-time).
    • Open a new Codex chat (existing project or scratch).
    • Open the in-browser previewer, navigate to magicpath.ai, create a new design.
    • Copy the “connect your agent” command from MagicPath’s UI.
    • In Codex: install this skill with the copied command.
    • Restart Codex.
    • In Codex: authenticate my magic path account.
  • Invocation pattern. Natural language referencing the active project — e.g., “in a new component in magicpath, design me a landing page of a SaaS business that provides AI solutions for sleep apnea patients.”
  • First output (transcript example). Codex generated an SVG logo with an auto-named brand, a navbar, a hero section with an illustrative graphic, and a “how it works” section. Two sections only — no footer, FAQ, or about. The author iterated from there.
  • Inline image generation. Codex can also use GPT image 1.5 for free — no API key required — to generate landing-page imagery (mask-wearing patients, doctor-with-iPad shots, etc.). Swap to GPT Image 2 by supplying your own key.
  • Visual responsiveness. MagicPath previews resize live — dragging the canvas width shows mobile-responsive behavior; individual images can be widened/narrowed in-place.

2. skills.sh — find skills

The author uses skills.sh’s find skills skill (installed inside Codex) as a discovery layer: “what are some other skills that can improve our design?” Codex queries the catalog and returns options. This is how Make Interfaces Feel Better (the next link in the chain) surfaced — the author didn’t know to ask for it by name. Skill-discovery as a second-order tool is the load-bearing pattern here: you don’t need to know the next tool to use it.

3. Make Interfaces Feel Better (Jacob Krehel)

  • What it is. A well-documented Codex skill by Jacob Krehel encoding ~16 design-principles into agent-applicable rules. Codex applies them to whatever is on the MagicPath canvas.
  • Three core principles explicitly named in the transcript:
    • Concentric border radius
    • Optical over geometric alignment
    • Shadows over borders
  • The transcript states the skill contains “about 16” core principles total; only the three above are enumerated on-screen. ^[inferred] The remaining ~13 are not named in the source.
  • Invocation. “let’s use Make Interfaces Feel Better skill to improve our overall design.” Output: cleaner section layouts, additional sections appended (footer, FAQ, about), composition follows the named principles.
  • Re-run after edits. The author re-runs the skill at the end of the pipeline (after Mobbin-driven redesigns) as a polish pass — same skill, twice, with different inputs.

4. Mobbin MCP — design inspiration retrieval

  • What it is. An MCP connector that pulls live design references from Mobbin’s catalog of production app/site screenshots.
  • Install (one-time). Click “Codex” in Mobbin’s UI, copy the connector command, paste into Codex; copy and paste the auth command similarly.
  • Invocation pattern. “can you search for three inspos for hero section using Mobbin MCP?” — returns named references (Mixpanel, Visitors, Wrangle in the demo) Codex can then use as reference material.
  • Redesign-against-inspiration step. “for the following components — these three — redesign them to match the colors and context and copy and assets of the sleep apnea design, and then run the skill again, make interfaces feel better.” This produces three variant designs of the same section, each styled in the spirit of one referenced inspiration but adapted to the target product’s brand, copy, and assets.

Visual Edits — in-canvas component editing

Codex exposes a visual edits mode that lets the user right-click any element on the MagicPath canvas and select delete element. Used in the demo to strip out unwanted 3D icons, duplicate numbers, and over-decorated card sections without prompting the agent. A direct-manipulation UX layered on top of the LLM-driven design loop — useful when the agent overshoots and the user wants to subtract rather than re-prompt.

Deploy via Vercel preview

Final step in the demo:

  • Give the MagicPath design a unique name (the author uses final).
  • Copy the canvas reference.
  • Prompt Codex: “push this from MagicPath to a custom domain. Let’s just say a preview domain using Vercel.”
  • Codex returns a Vercel preview link. Click → scroll → live design.

The whole loop — design, polish, inspiration-redesign, deploy — happens without leaving Codex.

Key Takeaways

  • Skill-discovery as a second-order tool. Installing find skills inside Codex means the agent can recommend its own next-tool instead of the user having to know the chain. The author found Make Interfaces Feel Better by asking the agent what would help — not by Googling.
  • Free inline image generation. Codex defaults to GPT image 1.5 for image generation tasks (no API key required) and lets users swap to GPT Image 2 with their own key. Bundled image gen removes a hop most other landing-page generators force.
  • MCP as the inspiration-retrieval surface. Mobbin MCP turns “find design references” into a one-line Codex command. The agent then redesigns target sections against the returned references, blending the inspiration’s pattern with the project’s brand context.
  • Design-system enforcement via a packaged skill. Make Interfaces Feel Better encodes ~16 principles (concentric border radius, optical-over-geometric alignment, shadows-over-borders, plus ~13 unnamed in the source) into rules Codex can apply unprompted. Re-running it after each major edit acts as a continuous polish pass.
  • Direct manipulation alongside prompts. Visual edits lets the user delete elements by right-click rather than re-prompting. The LLM handles generative steps; the user handles subtractive ones. Splits the labor along the cheapest interface for each side.
  • One-session, four-tool composition. Magic happens at the composition layer — none of these tools individually is revolutionary, but stacking visual-canvas + skill-discovery + principles-skill + inspiration-MCP inside one chat is what produces landing-page-grade output from a one-line prompt.
  • Vercel preview without leaving the agent. The deploy step is a single natural-language command. Same pattern as inspiration retrieval — MCP-style integrations collapse what used to be multi-app workflows into Codex-native commands.

Try It

  1. Spin up the chain (~10 min setup). Open Codex → load magicpath.ai in the preview pane → install the MagicPath skill → restart Codex → authenticate. Then install find skills from skills.sh. Then ask find skills for design-related options and install Make Interfaces Feel Better when it surfaces. Then connect Mobbin MCP.
  2. Run the demo prompt verbatim. “In a new component in magicpath, design me a landing page of a SaaS business that provides AI solutions for [your fictional product domain]. Generate all images first and then add them into the landing page.” Use the result to calibrate quality before customizing.
  3. Run a polish pass. After the first design lands: “Use Make Interfaces Feel Better skill to improve our overall design.” Compare before/after.
  4. Pull inspiration and redesign. “Search for three inspos for hero section using Mobbin MCP.” Pick the result you like, then ask Codex to redesign your hero against that inspiration while keeping your brand colors and copy. Re-run Make Interfaces Feel Better as a polish step.
  5. Push to a Vercel preview. Name the final MagicPath design, then prompt: “push this from MagicPath to a custom domain using a Vercel preview.” Verify the live URL works.

Open Questions

  • The remaining ~13 Make Interfaces Feel Better principles. The transcript names only three (concentric border radius, optical-over-geometric alignment, shadows-over-borders) and asserts the skill contains “about 16” total. Worth pulling the skill’s full documentation directly the next time it surfaces in a refresh pass.
  • MagicPath pricing. Not mentioned in the source. Free tier vs paid is an open question.
  • find skills provenance. The transcript credits skills.sh as the host but doesn’t name the author. Worth confirming on the next ingest from that ecosystem.

Graph View

Backlinks