ai-frontend-design-kit

AI Frontend Design Kit

Portfolio positioning

This is a portfolio-facing Agent/Plugin project for frontend design direction, design constraints, and Claude Code/Codex handoff workflows. It demonstrates how I package reusable AI engineering capability as installable project tooling.

English · 中文

Constraints before generation. A 10-skill plugin for Claude Code and Codex that upgrades AI-assisted frontend design from "generate four options, pick one" to a rigorous 7-stage flow with taste-level design contracts.

---

Why this exists

Most "AI frontend" tooling generates 2–4 page variants and asks you to pick one. That works for throwaway demos. It does not work when you actually care about the result — because AI cannot form your aesthetic judgment for you.

This kit inverts the loop:

1. Form constraints first (primary language, six-dimension taste mapping, dualround interview, moodboard anchor, motion spec)
2. Generate inside those constraints (visual references, code, iterations)
3. Review against the contract, rewrite the contract, loop

The result is a persistent design.md (kun 15-segment format) that every subsequent AI agent reads before touching a single line of JSX.

---

Install

Claude Code

# Add this repo as a marketplace
claude plugin marketplace add https://github.com/kkunkunya/ai-frontend-design-kit

# Install the plugin
claude plugin install ai-frontend-design-kit@ai-frontend-design-kit

Codex

# Clone anywhere
git clone https://github.com/kkunkunya/ai-frontend-design-kit.git ~/codex-plugins/ai-frontend-design-kit

# Register in ~/.codex/config.toml
[[plugins]]
source = "~/codex-plugins/ai-frontend-design-kit"
enabled = true

Verify

After install, ask Claude Code or Codex:

Start a new frontend project, use the 7-stage flow.

The agent should route to frontend-interview-dualround (stage 1). If it does, you're set.

---

The 10 skills

Skill	Stage	One-line job
frontend-iteration-planner	Scenario C entry	Increment router — read existing design.md + assets, then tier the change into T1 new-page / T2 new-section / T3 micro-tweak
frontend-interview-dualround	Cross-cut (stage 1 + 3)	Product-designer perspective five-class interview, pre-round to set boundaries + post-round to extract details
frontend-design-research	Stage 2	Six-dimension tasting (form / color / type / layout / material / motion) across 4–5 reference sites → design.md draft
frontend-visual-reference	Stage 4	Visual anchor triptych (moodboard exploration + page mockup + motion frame sequence) via baoyu-imagine + manual fallback
frontend-motion-prompt-writer	Stage 4C + 6	Translates MOTION-SPEC + frame sequence into LoadingScreen-style code-level prompts
frontend-design-writer	Stages 1–7	The main writer. Kun 15-segment 4-round workflow; maintains design.md + MOTION-SPEC.md + DESIGN-LANGUAGE.md
frontend-design-review	Stage 7	Post-code three-stage interrogation + Tweaks parameter externalization + write-back to design.md
frontend-anti-slop-gate	Stage 6 cross-cut	Ten hard red-lines scan (Inter font / Lila palette / 3-column grid / h-screen / placeholder data / etc.)
system-design	Orthogonal	System architecture: Design Doc + ADR + structural-impact analysis
frontend-i18n-essentials	Orthogonal	i18n three-layer orthogonal model (runtime / translation-content / visual) + subagent-parallel translation pipeline

---

The 7-stage flow

Stage 1  Requirement + pre-round interview      ── frontend-interview-dualround (pre)
Stage 2  Six-dimension tasting × 4-5 sites       ── frontend-design-research
Stage 3  Post-round interview                    ── frontend-interview-dualround (post)
Stage 4  Visual anchor triptych                  ── frontend-visual-reference (A moodboard + B mockup + C motion frames)
Stage 5  Asset generation (dual path)            ── baoyu-imagine primary + manual fallback
Stage 6  Code implementation                     ── your usual dev flow + anti-slop gate
Stage 7  Iteration and micro-tuning              ── frontend-design-review

Cross-cuts:
├─ Anti-slop hard bans (stage 6 resident)        ── frontend-anti-slop-gate
└─ Dualround interview (stages 1 + 3)            ── frontend-interview-dualround

Orthogonal:
├─ System architecture decisions                 ── system-design
└─ i18n planning (multilingual sites)            ── frontend-i18n-essentials

Throughline: design.md is continuously maintained ── frontend-design-writer (kun 15 segments)

---

Three scenario coverage