Agent skill · MITAjan skill'i · MIT

Make AI design like it read your code.Yapay zekaya kodunu okumuş gibi tasarım yaptır.

A skill for Claude Code, Codex, opencode, Gemini, Cursor and more. It grounds every mockup in a real reference, shows each state on its own board, scores the result against AI-slop, and hands you a canvas you can pan and zoom.Claude Code, Codex, opencode, Gemini, Cursor ve diğerleri için bir skill. Her mockup'ı gerçek bir referansa bağlar, her durumu ayrı tahtada gösterir, sonucu AI-slop'a karşı puanlar ve gezip yakınlaştırabileceğin bir canvas teslim eder.

curl -fsSL https://raw.githubusercontent.com/lunanoir21/spec-mockup-design/main/install.sh | bash

Open the galleryGaleriyi aç How it worksNasıl çalışır

Works withŞunlarla çalışırClaude CodeCodexopencodeGeminiCursorKiroQwen+7

canvas · pan, zoom, focus

Pan and zoom canvas: overview, focus on a board, next board, back to overview

Same request, two outcomesAynı istek, iki sonuç

Ask for a habit tracker. Get a different page.Alışkanlık takipçisi iste. Farklı bir sayfa al.

Left: the defaults agents fall back to (illustrative, hand-written). Right: a real result from a free model following the skill.Solda ajanların düştüğü varsayılanlar (örnek amaçlı, elle yazıldı). Sağda skill'i izleyen ücretsiz bir modelin gerçek sonucu.

A generic purple gradient habit tracker with emoji and glowing cards — **Typical defaultTipik varsayılan**
gradient, Inter, glow, emoji, lorem ipsumgradyan, Inter, parlama, emoji, lorem ipsumslop 6/100

A habit tracker designed with the skill — **With the skillSkill ile**
real states, generated palette, one conceptgerçek durumlar, üretilmiş palet, tek konseptslop 9x/100

default fontpurple-blue gradientleft-border cardsneon glowemoji iconslorem ipsumone pretty statecream + terracotta cluster

GalleryGaleri

For every platform, not just a Linux bar.Her platform için, sadece Linux çubuğu değil.

Web apps, mobile, macOS, browser extensions, games, terminals. Each one is a real canvas made by a free model with the skill. Open one, drag to pan, Ctrl+wheel to zoom, press F to focus a board.Web uygulamaları, mobil, macOS, tarayıcı eklentileri, oyunlar, terminal. Her biri skill'li ücretsiz bir modelin ürettiği gerçek bir canvas. Birini aç, sürükleyerek gez, Ctrl+tekerlek ile yakınlaş, F ile tahtaya odaklan.

How it worksNasıl çalışır

A workflow, not a mood.Bir ruh hali değil, bir iş akışı.

Ground in a referenceReferansa dayan

Reads your project's source for real colors, radii, spacing and animation timings, or asks for one. It does not invent when something real exists.Projenin kaynağından gerçek renk, radius, boşluk ve animasyon sürelerini okur, ya da bir referans ister. Gerçeği varken uydurmaz.

Generate a design languageTasarım dili üret

An OKLCH palette with tinted neutrals, fixed to WCAG, light and dark. A type scale, motion tokens, one icon weight. One concept sentence.Boyalı nötrlerle OKLCH paleti, WCAG'a göre düzeltilmiş, açık ve koyu. Yazı ölçeği, hareket tokenları, tek ikon kalınlığı. Tek cümlelik konsept.

One board per stateDurum başına bir tahta

Idle, hover, empty, error, loading, overflow, focus. Plus a motion storyboard, a font comparison, themes and a tokens board.Boşta, hover, boş, hata, yükleniyor, taşma, odak. Ayrıca hareket storyboard'u, font karşılaştırması, temalar ve token tahtası.

Gate against slopSlop kapısı

A linter scores defaults, neon, glow, gradients, emoji, cliche palettes and empty boards. A receipt proves the files really exist.Bir denetleyici varsayılanları, neonu, parlamayı, gradyanı, emojiyi, klişe paletleri ve boş tahtaları puanlar. Teslim fişi dosyaların gerçekten var olduğunu kanıtlar.

Deliver a canvasCanvas teslim et

One HTML file with an infinite surface, focus mode and per-board download. Works offline, no build step, no dependencies.Sonsuz yüzey, odak modu ve tahta başına indirme olan tek HTML dosyası. Çevrimdışı çalışır, derleme ve bağımlılık yok.

Iterate narrowly, then hand offDar iterasyon, sonra aktarım

React to one element and only that changes. Then export tokens and compare the build to the boards.Tek bir öğeye tepki ver, yalnızca o değişir. Sonra tokenları aktar, yapıyı tahtalarla karşılaştır.

Promptsİstemler

Just ask. You never name the skill.Sadece iste. Skill'in adını söylemene gerek yok.

Click a prompt to copy it. The more real context you give (a repo path, a screenshot, an app name), the better it gets.Kopyalamak için bir isteme tıkla. Ne kadar gerçek bağlam verirsen (repo yolu, ekran görüntüsü, uygulama adı) sonuç o kadar iyi olur.

Start simpleBasit başla

Ground it in something realGerçek bir şeye bağla

Steer itYönlendir

More prompts, including Linux desktop widgets and Turkish ones →Linux masaüstü widget'ları ve Türkçeler dahil daha fazla istem →

InstallKurulum

One command. You pick the agents.Tek komut. Ajanları sen seçersin.

curl -fsSL https://raw.githubusercontent.com/lunanoir21/spec-mockup-design/main/install.sh | bash

It downloads the skill, then shows a picker. Agents found on your machine are pre-selected. It never overwrites an existing file and only removes the links it created (--uninstall). Needs Python 3.8+; Chromium or Chrome is optional, for screenshots.Skill'i indirir, sonra bir seçici gösterir. Makinende bulunan ajanlar önceden seçili gelir. Var olan hiçbir dosyanın üstüne yazmaz, yalnızca kendi koyduğu bağlantıları kaldırır (--uninstall). Python 3.8+ gerekir; ekran görüntüleri için Chromium veya Chrome isteğe bağlı.

Flags: --detected --yes --agents claude,codex --all --list --dry-run --instructions --copyBayraklar: --detected --yes --agents claude,codex --all --list --dry-run --instructions --copy

install.sh

spec-mockup-design  install for
Detected agents are pre-selected. Type numbers to toggle.
   1) [x] Claude Code        detected
   2) [x] Codex CLI          detected
   3) [x] opencode           detected
   4) [ ] Gemini CLI
   5) [ ] Antigravity (agy)
   6) [x] Cursor             detected
   7) [ ] Kiro
   ...
> 1 3
  ✓ Codex CLI: linked -> ~/.codex/skills/spec-mockup-design
  ✓ Cursor: linked -> ~/.cursor/skills/spec-mockup-design

Under the hoodKaputun altında

Tools you can also use alone.Tek başına da kullanabileceğin araçlar.

98self-tests, run in CIöz-test, CI'da çalışır

14agents supporteddesteklenen ajan

11real demo canvasesgerçek demo canvas

0dependencies (Python stdlib)bağımlılık (Python stdlib)

`palette.py`	A harmonious light and dark palette from one hue: tinted neutrals, semantic and chart colors, every pair WCAG-fixed.Tek tondan uyumlu açık ve koyu palet: boyalı nötrler, durum ve grafik renkleri, her çift WCAG'a göre düzeltilmiş.
`slop-lint.py`	0-100 slop score with the reason for every flag.Her uyarının nedeniyle 0-100 slop puanı.
`new-canvas.py` `canvasify.py`	Scaffold the pan and zoom canvas, or add it to any hand-written HTML.Gezilebilir canvas iskeleti kurar veya elle yazılmış her HTML'e ekler.
`extract-tokens.py`	Counts the real colors, durations, easings and fonts in your codebase.Kod tabanındaki gerçek renk, süre, easing ve fontları sayar.
`contrast.py` `scales.py`	WCAG and color-blind checks; type, spacing, radius and motion tokens.WCAG ve renk körlüğü kontrolleri; yazı, boşluk, radius ve hareket tokenları.
`shoot.sh` `check-done.py`	Headless screenshots of every board, and a delivery receipt that proves the work exists.Her tahtanın ekran görüntüsü ve işin var olduğunu kanıtlayan teslim fişi.