imagine-ui

imagine-ui is a skill for Claude Code from Mineru98/imagine. It costs 173 tokens per session (2,518 once invoked), scanned A, original, MIT.

A style-board generator for exploring the look and mood of mobile app screens before making a real design in Figma or another design tool.

In plain words
What is it for?
Use it to explore iOS, Android Material 3, Korean fintech, or mobile web styles for screens such as login pages. It is for visual inspiration, not exact UI specifications or implementation.
Why use it?
It lets you compare several visual directions quickly without treating rough images as build-ready screens. It also keeps selected style settings consistent across later boards.

Skill for Claude Code

Written for Claude Code: argument-hint in frontmatter. Also seen: mentions Codex.

Needs its repository: it runs a file that does not travel with it, so clone the repository first. The line is ./images/ui/.

Part of the imagine plugin — 8 skills, 10 agents shipped together

Good fit Use it to explore iOS, Android Material 3, Korean fintech, or mobile web styles for screens such as login pages. It is for visual inspiration, not exact UI specifications or implementation.

Compare 6 skills from other repositories ↓
Install

Getting it into your agent

It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.

Clone the repo
git clone --depth 1 https://github.com/Mineru98/imagine
agentmods
npx agentmods add skills/mineru98/imagine/imagine-ui

Made for: Claude Code.

Or install imagine, the plugin that ships this one along with the rest of its 8 skills, 10 agents.

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.

agentmods badge for imagine-ui

README.md
[![agentmods](https://agentmods.dev/badge/skills/mineru98/imagine/imagine-ui/github.svg)](https://agentmods.dev/skills/mineru98/imagine/imagine-ui)
Your own site
<a href="https://agentmods.dev/skills/mineru98/imagine/imagine-ui"><img src="https://agentmods.dev/badge/skills/mineru98/imagine/imagine-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.

agentmods 80×15 button for imagine-ui

Your own site · 80×15
<a href="https://agentmods.dev/skills/mineru98/imagine/imagine-ui"><img src="https://agentmods.dev/badge/skills/mineru98/imagine/imagine-ui.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 173 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,518 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00173 $0.02518
Opus 5 $0.00086 $0.01259
Sonnet 5 $0.00035 $0.00504
Haiku 4.5 $0.00017 $0.00252

Measured 9d ago against content hash 319f07971704, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-09, from the pricing page.

Security

Grade A, and why

imagine-ui scanned grade A with 0 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 9d 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.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/imagine-ui/SKILL.md · 112 lines

How it starts

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

imagine-ui

중요: 이 출력은 설계 자료가 아닙니다. 구현할 수 있는 UI 스펙이 아니라 스타일 보드입니다. 실제 픽셀 퍼펙트 화면은 Figma/Sketch에서 만드세요.

트리거

  • imagine-ui <screen> / imagine-ui --screen login --system kr-minimal
  • "UI 목업 만들어줘"
  • "앱 화면 레퍼런스"
  • "스크린 레퍼런스"
  • "모바일 UI 스타일 보드"
  • "imagine-ui"

이 스킬이 하지 않는 것 — "이 UI 그대로 개발해주세요" 요청 처리

이 스킬의 출력은 스타일 레퍼런스입니다. 실제 UI 스펙·와이어프레임·구현 가능한 레이아웃이 아닙니다.

  • 글자는 디코레이티브 글리프 placeholder이며 실제 카피가 아닙니다.
  • 탭 타겟 크기·여백·접근성·컴포넌트 계층은 보증되지 않습니다.
  • 브랜드 로고/문구처럼 보이는 것은 우연한 형태일 뿐입니다.

"이 UI 그대로 개발해주세요" 류 요청은 거절합니다. 진짜 디자인은 Figma에서 프레임·컴포넌트·토큰으로 만들어야 구현 가능합니다. 이 이미지는 Figma 시작 단계의 인상 수집용으로만 사용하세요.

스킬 entrypoint는 실제 호출 결과 출력에 위 경고 블록을 항상 포함해야 한다.

파이프라인

  1. 프리셋 매핑: --system / --screen / --mood / --densityconfig.json의 매핑 테이블로 영문 비주얼 구문 변환.
  2. Style Guardian 조회: --keep 플래그 또는 "같은 스타일로"·"이어서" 트리거 시 scripts/lib/style-guardian.js로 이전 manifest에서 system / palette_hex / corner_radius_estimate / mood / density를 불러와 prefix 주입. 트리거 없으면 패스스루.
  3. 프롬프트 구성: 시스템 + 스크린 + mood + density 구문을 영문으로 조립. 사용자가 "login 화면에 실제 한국어 텍스트 넣어줘"라고 해도 넣지 않는다 — 글자 렌더링 기대를 버리는 것이 이 스킬의 원칙.
  4. Negative 강제: real readable text, photo of phone, hand holding phone, device frame, bezel, notch, cluttered elements, real brand logo, korean letters, chinese letters, japanese letters. 디바이스 프레임 금지 — 프레임 합성은 imagine-product(12-product-mockup) 담당.
  5. 이미지 생성: size: 1024x1536 (9:19.5 근사, 2:3) PNG로 Codex 이미지 모델 호출. 기본 n: 1, 최대 4 (Style Guardian 이어쓰기가 아닌 첫 탐색일 때만 n을 2~4로).
  6. Style Guardian 저장: 결과에서 추정되는 palette_hex(dominant 3~5색, 후속 PR에서 sharp+colorthief 결정적 추출) / corner_radius_estimate / system / mood / density를 manifest에 저장해 다음 호출에서 --keep으로 재사용.

시스템 프리셋

key 설명
ios iOS 19 스타일, 12px 라운드, SF Pro-like sans, 하어라인 디바이더.
android Material 3, 16dp 라운드, Roboto-like, accent surface.
web-mobile 모바일 뷰포트용 반응형 웹 UI, 8px 라운드, 뉴트럴 sans.
kr-minimal 한국 fintech 감성, Pretendard-like sans, 베이지/뉴트럴 배경, 부드러운 카드 + 서브틀 섀도.

Read the full file on GitHub · 112 lines

Files

What ships with it

1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

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.

  1. 9d ago First seen · 112 lines · 173 tokens per session scan A 319f07971704

Subscribe to this mod's changes

imagine-ui is a skill published in the GitHub repository Mineru98/imagine (5 stars, last pushed 11d ago), licensed MIT. It adds 173 tokens to every session and 2,518 once invoked, about $0.0009 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other skills, from other repositories

display-glasses-with-jetpack-compose-glimmer

Provides guidelines for developing projected Android XR apps for display glasses using the Jetpack Compose Glimmer UI toolkit. This skill covers foundational Glimmer design principles, workflows for implementing Jetpack Compose Glimmer, and interaction models for the glasses form factor. Use this skill to build an…

android/skills · 91 tokens

expo-design-system

Framework (OSS). Build and maintain a design system inside an Expo app - a reusable theme of design tokens (color, spacing, typography, radius, shadow, motion), reusable component structure with variant/size/state prop conventions, and rules for when to extract a repeated view into a shared component. Use when…

expo/skills · 201 tokens

flutter-build-responsive-layout

Use LayoutBuilder, MediaQuery, or Expanded/Flexible to create a layout that adapts to different screen sizes. Use when you need the UI to look good on both mobile and tablet/desktop form factors.

flutter/agent-plugins · 51 tokens

omh-apple-design

This is a Hermes-native apple-design workflow skill.

rlaope/oh-my-hermes · 73 tokens

axiom-audit-liquid-glass

Use when the user mentions Liquid Glass review, iOS 26 UI updates, toolbar improvements, or visual effect migration.

CharlesWiltgen/Axiom · 32 tokens

axiom-audit-ux-flow

Use when the user mentions UX flow issues, dead-end views, dismiss traps, missing empty states, broken user journeys, or wants a UX audit of their iOS app.

CharlesWiltgen/Axiom · 43 tokens