Initial public release
AI-first frontend design toolkit for Claude Code and Codex, extracted and desensitized from a private .agents workspace where the methodology has been in daily use since April 2026.
What's in the box
10 skills organized around a 7-stage design flow:
- Stage 1 / 3 —
frontend-interview-dualround· product-designer five-class interview (pre-round + post-round) - Stage 2 —
frontend-design-research· six-dimension tasting (form/color/type/layout/material/motion) across 4–5 reference sites - Stage 4 —
frontend-visual-reference· visual anchor triptych (moodboard + mockup + motion frames) - Stage 4C + 6 —
frontend-motion-prompt-writer· LoadingScreen-style code-level motion prompts - Stages 1–7 —
frontend-design-writer· kun 15-segment DESIGN.md contract writer (the main author) - Stage 6 cross-cut —
frontend-anti-slop-gate· ten hard red-lines (Inter / Lila / 3-column / h-screen / placeholder / etc.) - Stage 7 —
frontend-design-review· three-stage interrogation + Tweaks parameter externalization - Scenario C entry —
frontend-iteration-planner· increment router with three-tier pruning (T1/T2/T3) - Orthogonal —
system-design· architecture Design Doc + ADR - Orthogonal —
frontend-i18n-essentials· three-layer i18n model + subagent-parallel translation pipeline
Install
Claude Code:
claude plugin marketplace add https://github.com/kkunkunya/ai-frontend-design-kit
claude plugin install ai-frontend-design-kit@ai-frontend-design-kit
Codex: clone and register in ~/.codex/config.toml. Details in README.
Key design choice
Every skill ships with references/packaged-knowledge/ — the full cognitive methodology (from the author's Obsidian vault) snapshotted and embedded. No external dependency, no broken paths after clone.
Philosophy
AI does not form aesthetic judgment for you. AI delivers fast exploration, implementation, retrospection, and iteration inside the judgment boundary you draw.