A design-driven workflow for changing a SwiftUI view to match a supplied image. It captures the current preview, compares it with the target, and iterates on the source code.

Use it to adjust an iOS view against a PNG, JPG, or other design image and review the resulting preview.

It turns a visual mismatch into a repeatable comparison process rather than relying only on a developer's memory or judgment.

fix-ui — Skill for Claude Code by k-kohey/axe

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add k-kohey/axe --skill fix-ui

Clone the repo

git clone --depth 1 https://github.com/k-kohey/axe

Made for: Claude Code.

Or install axe-preview, the plugin that ships this one along with the rest of its 5 skills.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/k-kohey/axe/fix-ui/github.svg)](https://agentmods.dev/skills/k-kohey/axe/fix-ui)

Your own site

<a href="https://agentmods.dev/skills/k-kohey/axe/fix-ui"><img src="https://agentmods.dev/badge/skills/k-kohey/axe/fix-ui/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/k-kohey/axe/fix-ui"><img src="https://agentmods.dev/badge/skills/k-kohey/axe/fix-ui.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 54 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 762 The whole file, excluding the scripts and references it only reads on demand.

Security scan C 2 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00054	$0.00762
Opus 5.5	$0.00022	$0.00305
Sonnet 5.5	$0.00011	$0.00152
Haiku 4.5	$0.00005	$0.00076

Measured 5d ago against content hash 626830e53558, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade C, and why

fix-ui scanned grade C with 2 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Downloads and executes remote codehighSupply chain

curl | sh runs whatever the server returns today, which is not necessarily what it returned when this was reviewed.

curl -fsSL https://raw.githubusercontent.com/k-kohey/axe/main/install.sh | sh

Makes network callslowCapability

Not a fault in itself. Listed so you know the mod talks to something, and to what.

curl -fsSL https://raw.githubusercontent.com/k-kohey/axe/main/install.sh | sh

claude-plugin/skills/fix-ui/SKILL.md · 94 lines

How it starts

The opening of the file, as written. The whole thing — 94 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Design-Driven UI Fix Loop

Iteratively modify a SwiftUI View until its preview matches a target design image.

Inputs

$0: Path to the SwiftUI source file (.swift)
$1: Path to the design image (PNG, JPG, etc.)

Procedure

1. Resolve inputs

$0 may contain only a View name (e.g. ContentView) instead of a file path. Resolve it to a .swift path (e.g. TodoApp/ContentView.swift) using Glob.

2. Read the design target

Read the design image at $1 using the Read tool to understand the target appearance.

3. Read the source code

Read the SwiftUI source file to understand the current implementation.

4. Capture the current preview

axe preview report "$0" --output <output.png>

axe preview report is preferred because it waits for rendering to complete and retries on failure.

If the file has multiple #Preview blocks, --output file.png will fail (it requires exactly one preview). In that case:

Use a directory as --output to capture all, then pick the relevant one
Or fall back to axe preview "$0" --preview <title|index> (oneshot, no render wait)

Read the captured image to see the current appearance.

5. Compare and identify differences

Compare the current preview against the design image. Focus on:

Layout structure (VStack/HStack/ZStack arrangement)
Spacing and padding
Font sizes and weights
Colors and backgrounds
Corner radius and borders
Image sizing and aspect ratios
Text content and alignment

6. Edit the source code

Make targeted edits to the SwiftUI source file to address the identified differences. Prioritize the most visually impactful changes first.

7. Re-capture and verify

Capture a new preview after the edits. Use --reuse-build to skip rebuilding since only the View source changed:

axe preview report "$0" --output <output.png> --reuse-build

Read the new image and compare against the design.

8. Iterate

Repeat steps 5-7 until the preview closely matches the design image. Stop after at most 5 iterations. If the design still does not match, report remaining differences to the user.

Read the full file on GitHub · 94 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

5d ago First seen · 94 lines · 54 tokens per session scan C 626830e53558

Subscribe to this mod's changes

fix-ui is a skill published in the GitHub repository k-kohey/axe (99 stars, last pushed 22d ago), licensed MIT. It adds 54 tokens to every session and 762 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it C with 2 findings (downloads and executes remote code, makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-11-01.

Design and UX Mobile hotreload ios swift swiftui xcode

fix-ui next to 6 skills from other repositories
Mod	Type	Stars	Last push	Licence	Scan	Tokens	Works with
fix-uik-kohey/axe	Skill	99	22d ago	MIT	C	54	Claude Code
ios-expertpersonamanagmentlayer/pcl	Skill	44	11d ago	Apache-2.0	A	64	Claude Code
ttb-skill-native-swiftui-componentstqtuan1201/TTBaseUIKit	Skill	23	3mo ago	MIT	A	55	Claude Code, Codex
ax-design-refKasempiternal/axiom-v2	Skill	4	8mo ago	MIT	A	64	Claude Code
ax-designKasempiternal/axiom-v2	Skill	4	8mo ago	MIT	A	41	Claude Code
swiftui-liquid-glassthiennc-tesoglobal/ios-skills	Skill	3	1mo ago	none	A	60	Claude Code
swiftui-responsive-layoutthiennc-tesoglobal/ios-skills	Skill	3	1mo ago	none	A	76	Claude Code

fix-ui